Oh no!

I guess all good things must come to an end. 

It reminds us that when using cloud services (free or paid) we should be aware of the consequences of shut-down. Luckily Google are well versed at planning and looking after Users - so they have offered up solutions like Google Takeout in order to export personal feeds for use by another feed reader.

Our advice when choosing cloud services is to make sure you have an exit strategy when selecting your service. 

A few quick questions should help when first choosing a service:

• Is it the only service operating in this space? (e.g. will you become dependent on it?)
• Does it provide export options?
• Will other services allow imports?

Even if all the answers are "no" - being aware that you are entering a service with no-failover could useful. You will be much more likely to create your own back-ups, fail safes etc and if the worse does happen, at least you will have considered it.

Anyway, personally we loved Google Reader and July 2nd will be a sad day :(

Just in case they can be swayed, we have signed this: https://www.change.org/petitions/google-keep-google-reader-running

p.s If you are interested, the easiest import we have found so far has been Feedly - but with all feed readers it's a case of UI and making sure you are happy with the tools and layout it provides. Pulse looks nice, but not found a nice way to import easily from Google Reader exports yet.

Two days of hacking gets work started on a curiously codenamed project…

Claire toured the university circuit to spread the word about our placement scheme. Speaking of which, if want to know more or think you've got what it takes, get in touch with us at jobs@clock.co.uk…

Vince spots a confusingly permissive sign during a mad dash through Heathrow Airport…

Syd literally hits the slopes in Söll for a stag week – pictured here shortly before a collision resulting in a cracked rib. D'oh…

Suspicious about the presence of mice in his house, Paul sets up a motion sensing infra-red camera to email him a picture when the little suspects visit. So far the camera's been unsuccessful, but here's a test shot of a tiny elephant setting it off…

Each week, the Times+ newsletter delivers unique subscriber benefits to The Times and The Sunday Times subscribers. Clock was tasked with transforming the newsletter’s digital template, which was proving too rigid for the in-house team who wanted to be able to vary the layout regularly to better showcase content and stimulate greater user engagement. 

Clock’s creative team responded with a crisp new style backed by a digital framework that offered full back end and CMS flexibility while still retaining The Times+ look and feel. 

Claire Gribben, Product Manager of Times+, states, “Clock’s redesign has transformed the way we present our content. We now have the flexibility to switch from big hero features to smaller multiple items, add special formats that tie in with calendar events like Christmas, and to link in other sources and sites – as our needs dictate. Clock has helped make our newsletters much more visually appealing. Almost straight away, our open rate increased to 40% and our click-through to a staggering 17%.” 

“The experience is now much richer,” Gribben adds. “Content can easily be linked back to editorial from The Times and The Sunday Times. For example, promotions can now be tied in to film, theatre and restaurant reviews – pushing traffic back through to the newspapers and adding value for our readers. There is also more scope for social interaction including Twitter feeds to columnists and readers’ comments, creating valuable dialogue and a community feel.” 

 Matt Dibben, MD of Clock adds, “For e-newsletters, the secret is building in flexibility without making it too complex. With Times+ we have created a really fluid format that can be adapted to suit the content. This has inspired their creative teams to make the end result much more engaging for the reader – without compromising the brand style. With its dramatic uplift in click rates, Times+ proves that compelling design is crucial in keeping digital audiences switched on and coming back for more.” 

About Times+

Launched in October 2009, it was the first membership scheme and customer retention programme of any UK newspaper. Times+ is complimentary to subscribers to The Times and The Sunday Times. Members enjoy events, offers and extras at the Times+ website www.mytimesplus.co.uk. Times+ deepens the titles’ relationship with its readers, rewards their loyalty and generates new direct revenue streams. Times+ members show high levels of engagement and respond well above industry average to offers and newsletters.

The boardroom has seen many a meeting this week…

An office renovation looms and some materials turn up. The new office floor will most definitely be pink rubber…

Adam T, after years of Windows abuse finally gets his hands on a shiny new Mac. Great timing too, as it arrived on his birthday…

Rob, concerned his media armoury is decidedly lacking, has created a scheme to rectify this by 'volunteering' fellow colleagues to lend their personal personal favourites…

I'd like to borrow a DVD, CD or Book (or all 3) from your top favourites - I promise to take good care of it and return in working order! :)

And to achieve this, a state-of-the-art person selector device…

Tom G got accepted on the the LeapMotion developer programme. This week his device arrived, enabling him to wave his hands Harry Potter style at his Mac and have it actually respond (the lack of the LeapMotion didn't stop him trying before)…

Ben G got his hands on a Powerball to try to prevent the arm pump he gets while riding his trials bike. (It didn't stop him winning the clubman class last weekend though)…

Over and out!

Why do we use Backbone?

For those that don't know – Backbone.js is a JavaScript library that runs in the browser. We use it to structure client-side applications – those that run in a web browser.

From Fancy Scripting to Software Engineering

Increasingly, application logic and heavy lifting is heading in to the browser. It used to be that JS was used for fancy effects and embellishments. Now though, it's stuff that matters – proper application code as well as the niceties. That means we need to take more care to organise and structure our source.

Some of the things we care about:

• Maintainability
• Compatibility
• Testability
• Reusability
• DRY-ness
• Consistency
• Modularity

What about jQuery?

But we already use a framework, jQuery on pretty much all of our sites. Doesn't that help? Well, jQuery is great for a number of things:

• Ironing out browser inconsistencies
• Improving the DOM interface
• AJAX
• Animation

These definitely make our lives easier, but what they don't do is help to structure applications. That's because jQuery is a utility belt.

We need no greater proof that jQuery doesn't help us to do the things that Backbone does, than the fact jQuery is a dependency of Backbone's.

Backbone sits on top of Underscore.js, as well as jQuery, to provide a platform for building applications.

So, we use Backbone to structure our applications with proven software patterns, separating UI logic from business logic.

Alternatives

It's worth mentioning that, of course, alternatives to Backbone exist, for example:

• Ember
• Angular
• Spine

… and many more. Personally, I've never looked beyond Backbone – quite simply because it has done everything I've wanted from such a tool.

I will round off this introduction with an excerpt from the Backbone docs that I think succinctly and accurately specifies the problem that Backbone addresses:

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

What does Backbone do?

Backbone provides the reusable building blocks that are required for the majority of applications – loosely following the MVC pattern. I say loosely – MVC is actually a very specific and well-defined pattern composed of Models, Views and Controllers. Of these components, Backbone only has models and views, and the view behaves like a view and and a controller – technically violating the pattern.

The amount of code in Backbone is remarkably small for a library and it does surprisingly little, actually. I recommend reading or at least scanning the annotated source to get a grasp on the internals.

So it provides a bit of code, but more importantly it provides a set of conventions about the structure of applications.

I will now take you through the 'building blocks' that Backbone provides, with code examples. If you want to run any of the examples, head over to the Backbone site, fire up your console and paste the code in.

Backbone.Events

Events is a trait that can be mixed in to other objects to give them event triggering and listening behaviour – a very effective way of promoting decoupling between components. The following example shows how to use Backbone.Events on your own objects:

var o = {}
_.extend(o, Backbone.Events)

o.on('zap', function () {
  console.log('zapped')
})

o.trigger('zap')
//=> outputs 'zapped'

This Events trait is inherited by all of the other prototypes that Backbone provides.

Backbone.Model

Backbone models are for encapsulating entities that are associated with data. They provide accessor and mutator access to the data through get() and set() methods. This level of indirection allows other parts of the system to be notified when things change – useful, for example, for a view that should update when its underlying model changes.

The following is an example of instantiating and using a stock Backbone.Model:

// Create a new model by passing in some data
var person = new Backbone.Model({ name: 'Bob', age: '30' })

// Access the data
person.get('name')
//-> returns 'Bob'

// Observe the data for changes
// using the event methods that
// the model has inherited
person.on('change', function () {
  console.log('Something about this person changed')
})

// Mutate the data
person.set('name', 'Robert')
//-> outputs 'Something about this person changed'

So that's pretty handy for wiring up simple models where you just need access to the data, but what if your models need to be more complex than that? This is where you need to extend the stock model with your own logic. In the first example, our model contained an age attribute – this is poor practice, because if that data was persistent it would have to be maintained every time the date changed. In the following example, the model will have a date of birth and the age will be calculated on the fly:

// Create a new constuctor by extending
// the stock model with our custom method
var Person = Backbone.Model.extend(
  { age: function () {
      return (new Date() - this.get('dob'))
    }
  })

// Instantiate one of the new
// Person objects with some data
var person = new Person(
  { name: 'Bob'
  , dob: new Date('21 Sept 1988')
  })

// Use the custom function
person.age()
//-> returns the number of milliseconds since '21 Sept 1988' (useful!)

Everything we've seen so far is useful for connecting up with views and having a front-end that doesn't need persistence. Models also provided methods for communicating with a server to provide persistence. I won't be covering them here, but you should know that the methods sync() and destroy() are available. Backbone makes it very easy to wire up your models to a restful/crud-y JSON API.

Backbone.Collection

Collections are ordered sets of models, and there's not really a great deal to say about them. They get all of the Underscore array/collection methods for convenient set manipulations.

The most useful thing is that events triggered on models within the collection propagate up and get triggered on the collection instance too.

// Create an array of models that
// can be passed in to a collection
var models = []
for (var i=0; i < 5; i++) {
  models.push(new Backbone.Model({ num: i })
}

// Create collection containing the models
var collection = new Backbone.Collection(models)

// An example of an underscore function -
// some will return true if the function
// passed to it returns true for any of
// the collection's contents
collection.some(function (model) {
  return model.get('num') === 3
})
//-> Returns the model that has { num: 3 }

// An example of events bubbling up to the
// containing collection - bind a listener
// to the change event on the collection
collection.on('change', function () {
  console.log('one of the models changed')
})

// Acces one of the models (not via
// the collection) and change it
models[4].set({ num: 10 })
//-> Logs 'one of the models changed'

Backbone.View

Views are my favourite part (I'm not sure if it makes sense to have a favourite part…).

I personally have spent a lot of time coding UIs without Backbone – not necessarily web-apps but things that have just a bit too much state for a jQuery plugin, so I really feel the benefits.

View objects are associated with a fragment of DOM. They are designed to be tied to models (data) that needs to be presented to the user. Against the traditional MVC pattern, and due to the nature of the DOM, Views act like controllers too. They are both presentational and interactive.

Each Backbone.View, upon creation gets its own 'root' DOM element. They come with a render() method, which is by default a noop. It's a convention. You have to extend Backbone.View with your own methods and implement render in the way that you want to.

var v = new Backbone.View()
$('body').append(v.$el)
//-> Appends the default root element,
//-> a 
, to the document body

In order to acheive anything useful, the view needs to be extended:

// Extend a View with a custom render
// function that writes the current date
var Clock = Backbone.View.extend(
  { render: function () {
      this.$el.empty().append(new Date)
    }
  })

// Instantiate a custom objet
var clock = new Clock()

// Append its element to the document body
clock.$el.appendTo('body')
//-> An empty div is attached to the body
//-> because render() has not yet been called

clock.render()
//-> Document now shows the current time

// Subsequent calls to render update the time…
clock.render()
clock.render()
clock.render()

Hold up though, there's a clock in our UI logic! Uh oh! What if there are other views that wanted to know about the time? The views would become tightly coupled. Instead, we'll factor the clock out into a model and have the view listen for changes:

// Create model to hold the time
var clockModel = new Backbone.Model({ time: new Date() })

// Create view that listens to change
// events on the model, and renders
// each time it changes
var ClockView = Backbone.View.extend(
  { initialize: function () {
      this.model.on('change', _.bind(this.render, this))
    }
  , render: function () {
      this.$el.empty().append(this.model.get('time'))
    }
  })

// Instantiate a view and pass in the model
var clockView = new ClockView({ model: clockModel })

// Append the clockView element to the document body
clockView.$el.appendTo('body')

// Get the time to change every second
// triggering the view to render
setInterval(function () {
  clockModel.set('time', new Date())
}, 1000)

//-> The time in the document updates every second

That brings us the end of this introduction. I hope you found it useful.

As always, if you have any questions, don't hesitate to comment below.

Paul (our CTO by day, mountain-goat by night) takes a Luke and Francisco for a trip to the climbing wall to show them the ropes…

And Francisco practices his figure of eight knot for the climbing competence test…

Ben hacks his Raspberry Pi into an AirPlay device, so he can stream music wirelessly from his phone or computer anywhere in the house. Now to build some protective housing for those exposed components…

Vince took a final trip to Vicarage Road to see Saracens play, as they bid farewell before moving on to their new stadium in London – The Allianz arena…

And finally, Adam's mid-life crisis definitely does not arrive about 20 years early, as he casually acquires an understated and practical new motor…

$cmd = "php location/to/some/long/running/task.php"; // Start the process and continue outputting your response to the user  
exec($cmd . " > /dev/null &"); 
echo(...); 

So what are our options?

Well as it turns out, there is a wealth of options to choose from when it comes to background processing including:

• Cron jobs – everyone knows what a cron job is – simply put, it's a scheduled task

• Gearman – A highly scalable, language independent, open source background task manager

• Event listening/triggering – not really practical with PHP

• A polling script – A bit rudimentary but it works for a lot of things

• Database triggers – only really an option if the task can be written in a stored procedure

There are more, I'm sure but theses are the options that are most widely used and therefore the ones I will discuss.

Cron jobs

Cron jobs have existed in Unix based operating systems since 1979 (Unix V6), they have served us well and will continue to do so for the foreseeable future but there are some drawbacks to using this system to process background tasks in a web environment. In the fast paced, dynamic world of the modern day web any delay is considered unacceptable. If you and more importantly your clients have to wait for a cron job to be scheduled and pick up your task you could very well loose your competitive edge. To fix the problem of long delays we could set the cron to run every minute but in a server environment where every instruction execution counts this is not a ideal solution, after all, we're paying for the CPU time. We need to come to a compromise and this tends to be around the 5 minute mark, this still means your clients could be waiting up to 5 minutes before they see the effects of their actions, for a database import is not a problem but what if the action was to divert a plane away from a potential crash? Cron jobs are clearly unacceptable for time critical tasks or where there may be hundreds or thousands of tasks that need running every minute.

Gearman

Gearman is a highly scalable, powerful and potentially load balanced open source solution to the background task problem. Gearman is a scheduling manager that can handle many workers across multiple nodes, it is very good at handling bulk tasks such as mailing list distribution, user uploads, image manipulation, large dataset processing etc. and it is very flexible in what you can do with it, it simply runs your background code when a new task is added. One major disadvantage of Gearman is its overhead, we have used Gearman for a few of our projects here at Clock and its certainly not the easiest tool to setup, for large projects with thousands of tasks it's the ideal solution but for small websites, in my personal opinion its overhead outweighs its advantages.

Event listening/triggering

There's no real event handling API built into PHP and that makes listening to events a near impossibility. Although event listening seems to be ruled out in PHP, we can however trigger events using the PHP “exec” function to call the system’s “kill” command with the event number and process we want to trigger. The listening process obviously has to be built in a language that supports listening to events. I'm aware of a PECL library named “libevent” but it is still in beta and not really usable in production environments just yet. There are some obvious disadvantages to this approach, for example you have to load the kill process into memory every time you call an event, your listening process has to then fork the hard part off so that it can continue listening and it all seems a little hacky. Nevertheless, signals can be very useful and lightweight so maybe they are the ideal solution for the smaller environment. Signals can be used to process a request immediately and prevent your clients from waiting for some task that never seems to end.

A polling script

A polling script is another way to go and it's a very simple, lightweight way to process tasks in the background. The script will need to be set up in such a way that it runs regularly enough to process the tasks in a timely manor but not so often that it takes up too much processor time. A basic setup will look similar to the following:

$taskManager = new TaskManager(); 
    while(!$taskManager->hasClosed()) { 
        while($task = $taskManager->getTask()) {
            // On a high load server or a really long running task we should 
            // pass this work onto another thread, possibly on a different node. 
            someTask($task); 
        } 
    sleep(10); 
} 

The obvious problem with this approach is that as soon as we get a bunch of tasks pushed onto the task queue, it will take 

time to process the queue. A solution to this problem would be to fork or pass the task onto a different node, but if you’re thinking about that then this solution is probably not the one for you. If we take a closer look at the task manager we may find we have a FIFO type queue, the problem with this is that it probably isn't thread safe.

I'm going to briefly discuss a few techniques to achieve thread safety because I think it ties in nicely with shared access to a resource which the methods we've discussed thus far all do.

Shared Memory and Mutual Exclusivity

While shared memory is one type of resource that needs to be protected when inside a multithreaded environment, any resource that is shared and you cannot guarantee fully atomic read/write operations should be protected using some sort of mutual exclusivity scheme. The use of a Mutex or a Semaphore can ensure that only one, or only a set amount of processes in the case of a Semaphore, can access the shared resource. I’ll give a brief overview of both but I will not go into implementation specifics because it is OS dependant.

Mutex

A Mutex, simply put is like a token that is passed between each process trying to gain access to a shared resource. The process trying to gain access to a resource must first gain control over the token before it can proceed to use the resource. When one process has control over the Mutex, no other process can use the resource.

Semaphore

A Semaphore is very similar to a Mutex except for one major difference, a Semaphore has a counter built into it so it can allow multiple processes to gain access to a shared resource, once the counter has been exhausted it will not allow any more processes to gain access to the resource. The counter limit it specified at setup time.

In both cases, each process trying to gain access to the shared resource must block until the Mutex has been released or a process has decremented the counter in the Semaphore thus allowing one more process to gain access to the resource. The root process to start up must setup the Mutex or Semaphore before any other process tries to gain access to the resource. When using any sort of mutual exclusivity you should be aware of causing race conditions or locking out of a process.

Shared Memory

Shared memory is simply a block of memory that is shared by two or more processes and allows them to read and write to that block of memory. I simply used it here because it is an example of a shared resource that can obviously not be written to at the same time.

Fortunately, thinking about mutual exclusivity is not something we have to do very often because a lot of resources we may use such as a database have already thought about this and will not allow two processes to write to the database at the same time, leaving us developers to concentrate on the more important task of creating great products.

Database Triggers

I won't go into much detail on database triggers, it’s more of a side note. If all you are doing is a simple SQL query then why not create a database trigger that fires every time you insert a row into the database and leave the hard work up to the database.

So, what's with the title? I hear you ask. It's true, it's not really a black art but it caught your attention didn't it! Please note the methods and techniques I've suggested in this post are opinion and not necessarily the best or most efficient way to achieve background processing.

Please use the comments section below, it would be nice to have an active discussion on the topic.

To kick things off, five of us Clockers hit the slopes in Les Deux Alpes. Here we are snapped on Adam's GoPro at Pano Bar – 'Altitude Clubbing' at 2600m. Expect videos of slope action from the GoPro soon, after Adam has passed his PHP certification…

When we returned, as is to be expected, England was grey – exhibited by this snap, taken when the management team had a meet up on a crisp, wintery morning in Henley-on-Thames…

But Mother Nature had other ideas: this is the scene at the Old School House (a.k.a. Clock Towers) this morning…

Our CEO has the right idea though, as he glams it up in sunny Mexico, escaping the chilly greys and whites for a warming yellow hue…

Anyway, enough about the weather!

A big screen makes a subtle and camouflaged entrance to the studio…

Our resident Danish designer, Mikkel, awaits his final exam grade. He passed! Congratulations Mikkel…

After racking up a poor travel to sleep ratio, Mike invests in an Ostrich Pillow  – a revolutionary 'Powernap enviroment' (seriously, follow the link!)…

Remember Vince's happy injury from last time? Well it took this much wrapping up to prevent the flow and get it repaired. He's since had the bandaging off, but you don't want to see that photo. 

That's a wrap for this week folks. Enjoy the snow while it lasts!

First up, we've got a rather impressive panoramic shot from the balcony of our Winter Party suite…

(Click on this image for a larger one)

If you squint a little, tilt your head to the side, and use a sprinkle of imagination, you might be able to see a bit of clever branding masquerading as champagne flutes:

Our party had a variety of entertainment, including an Elvis tribute act, a conic dance floor and a pop-up casino. The main hit with us Clockers though was a retro photo booth. Here's a scattering of the resulting photos…

Vaishal's omission of his criminal past from his CV came to light – being sharply dressed and casually wielding a firearm in a way only a true gangstar could…

We'll let you into a Clock family secret here. Forget music and alcohol, the ingredients to truly get a party started are lasers and mirrorballs. You heard it here first. A big hat tip to Mr Mirrorball and Lord Laser for bringing sparkles and radiation to both our Winter Party and New Year's at the Nadim residence…

It wasn't all doom and gloom through all that awful wet Christmas period. Even Vince's (very rock and roll) washing up cut managed to smile through it…

Neither did the weather manage to prevent Saracens from smashing Bath 22-0, nor the front row spectators from having a blast. You'd have thought "Bath" would have been used to all that running water………hmm…?

Finally, we have a sneak preview of an internal Clock project: HUD. I'll just leave you with this little teaser and the assurance that we'll do an in depth blog post when it's released…

And that's it. Thanks for reading, and hopefully see you back here, same time next week!

Some of the team were lucky enough to attend a party hosted by our clients ShortList Media. Though they weren't feeling quite so lucky the morning after, if you know what I mean! Here they are being made to feel special next to a red carpet…

Sophie does a spot of white water rafting, and gets snapped mid catastrophe as she's about to get a face load of splash…

Vincent's budding archeologist of a son spots a historic creature in the sky…

Amazon are seen to go the extra mile, making sure your orders arrive in exactly the condition they left the warehouse in. Check out the packaging for this lonely roll of wrapping paper received by Tom G…

The non-tone deaf members of the team got down to West Herts College for a jam in the studio. Now taking bookings for kids parties in the Hunton Bridge area… it's the Clock Band…!

A SwipeStation unit pops up at partner whynot!'s office to show off to their clients…

Ema gets into the festive spirit with some shiny nails, and informs us that it's National Christmas Jumper day today. So what are you waiting for? Dig out that abomination your mum knitted you 10 years ago and wear it with pride (if anything, you'll get kudos from your mum and she'll be nice to you over Christmas)…

And finally, somebody has given Sophie the task of bringing the bubbly to our party tonight. Let's hope at least one of the bottles make it, eh…!

However, do we find ourselves forgetting about our remote staff? Does the lack of a physical presence in the office leave them feeling left out? Well, our CTO Paul Serby wanted to find out. After all, you never know when your office might fall down or you can't leave your house due to a sudden zombie invasion (that's right, we carry on working even if that happens).

So began the plans to kick everyone out for the day and see how we got on (Clock have over 30 staff so this is a tall order). This involved making sure everyone would be able to have all the same access from home that they would have in the office, from the basics such a decent internet connection up to the slightly more complicated VPN set-up ensuring everyone was able to access the correct servers. We chose a Friday as our office hours are 9-2 which meant if it was a total disaster the pain would be short lived.

So, for one day only, on the 23 November the entire company got up to take their long commutes to their spare rooms, living rooms or kitchens (!) and joined a rather large Skype text chat at 9am.

This was the first hurdle that we had to overcome, whilst we had wanted to run a quick staff meeting using Google Hangouts or Skype's voice call, neither of these products supported the numbers of people we needed to involve. However, the text chat went ahead and with everyone being told to keep it efficient by only saying what they had to, it actually worked pretty well and we got through it. After this we had planned to break into smaller team chats to cover the daily scrums and any other meetings that we had to get through which enabled people to be a lot more chatty without boring the wrong people.

Prior to the day we had also spotted an important Skype configuration change that we asked all staff to make.

Within Skype’s preferences is the option to set how long it takes to automatically update a Users status from on-line to away. We asked that all staff to set it to 3 minutes as there is nothing more annoying that trying to chat to someone that looks like they are on-line but are in fact off making a cup of tea. (please note, it also important that this setting is applied to tablet and mobile phones).

So, after all of these chats had we succeeded in making sure everyone knew what they were supposed to be working on and that no poor soul was left out in the cold, confused and crying? Well I certainly hope so....... although there is a but! If this is something we tried to do more often or even (heaven forbid) full time, would we be this efficient everyday?

For me the short answer is no. Even our full time remote workers come into the office once in a while for meetings, social gatherings and for general catch ups. Having the option to work remotely is fantastic and while I can confirm that our remote working day was a success, trying to do that everyday has the potential to get very difficult and perhaps very lonely.

During the day we asked everyone to take a picture of their remote set-up. The results can be seen below:

*oh and you'll be pleased to know that no zombies attacked us :)

Thanks to Rob Arnold for helping with this blog entry and to Dan Wells for editing the photos.

(The above photo belongs to Vince who took working remotely too far and flew to Ireland for the day)

I saved the best for last....

I had been meaning to take the exam for the last year or so. Finally last month I booked it.

Revising

There is very limited material online detailing what the questions are like and how best to revise for the exam. Zend list the topics that the exam covers and most blog posts suggest reading the PHP manual and read the Zend Study Guide.

Unfortunately the Zend study guide is full of mistakes, missing answers and like PHP, is full of inconsistencies. That said it is helpful as a prompt of what to revise and has questions and answers at the end of each topic.

After some revision I wanted to test my knowledge with some practice questions to gauge how well my revision was going. As I have said already, practice questions are few and far between. With enough searching on Google, I stumbled across a few blog posts, each with a few questions the author had remembered. I also found PHP Riot & uCertify both offering a handful of questions for free, however you needed to pay for more questions. uCertify offers a money back guarantee if you do not pass first time and for $120 (£75) you can have unlimited access to all their questions (over 400). PHP Riot is $5 (£3) for 200 questions. I did not use either of the paid options but if you want more sample questions then I would suggest choosing one of these two options.

Taking the test

The test is made up of 70 questions and you have 90 minutes to complete the exam. The questions are in a random order and are mainly multiple choice, with some free text. Questions are in the form of statements, code snippets or best practices.

Beware some questions are trick questions, with syntax errors. Some require you to choose 2 or more answers (this is stated in the question though). Others are just poorly worded to attempt to confuse you.

Is 90 minutes long enough to answer 70 questions?

Yes it is. Some questions take slightly longer to read and understand but others are very straight forward. You will have plenty of time to review your flagged questions / incomplete questions prior to ending the test.

What is the pass mark?

Zend are very secretive about this and have never confirmed the actual pass mark, but the community believe it to be in the region of 60%

Can I find out how well I did?

If you fail you are given a print out detailing each section and how well you did on the scale of poor, average & good. If you pass you just get a print out detailing you have passed.

Upon completing the test you are instantly presented with a simple screen with a Zend logo and a statement of whether you have passed or failed.

My Thoughts

I see the benefits of the exam from an employers point of view in that they can say their developers are Zend certified and from a recruitment point of view. However personally I feel that the way some questions are geared in terms of remember exact function names and orders of parameters a bit pointless. I always have the PHP manual open in my browser and utilise my IDE's auto complete functionality to prompt me on PHP's built in functions. 

Does being able to recall library functions make you a better developer? I think not. A developer who is able to write OO code that is maintainable, scalable and readable is much better than someone whose Mastermind specialist subject is the PHP manual.

Resources

• Exam Topics
• Zend Study Guide
• PHP Riot (paid)
• uCertify (paid)
• Booking your test with Pearson Vue

P.s. If you are interested I passed! :)

Congratulations Syd!! 

Vince meets some rather 'stiff' new friends in Dublin... ahem.

While the rest of the team get their grease on at the local Go-Kart track... Go TEAM!

Nina gets artistic at the Hospital Club with this impression of Syd in chalk...

And we get all teenage and excitable at our new bumper sticker collection!

Francisco gets an early Xmas present... (insert creepy growling noise here)

Loz's Mo-date from last week... 

And Ben's...

Ben also tears up the Isle of Wight with his supremo trials skills... not just a pretty moustache.

Ashley tears up the studio with his supremo rubicks' skills...

Commercial show us how to do it in style with this awesome panorama of London at the BIMA after party...

And one penultimate look at Ben's Mo before next week's final shot. It's actually growing on him... geddit? heheh

Two weeks ago, I ran a team building exercise to get the creative juices flowing and have the team work with people they haven't necessarily worked with before.

Previously I have run the excellent Marshmallow Challenge which is great fun and interesting - this time round I wanted to create my own team building exercise that would focus on creativity and collaboration. So I found a two hour slot the whole company could attend (which is a task in itself!), booked an event in everyone's diaries and began preparations.

• 1) Acted
• 2) A video commercial
• 3) A presentation of ideas

• Feasibility (is it likely)
• Buyability (would you buy it)
• The Team’s X-Factor (how good was the commercial/presentation)

I won't go into too much detail on each product as you had to be there to get the true experience of each pitch.. but a quick summary of each team:

A mannequin style ironing experience. Wake up to crisp and perfectly fitted and ironed clothes :) (oh and there is a Ironwoman/child too)

Always getting food on your clothes when trying to get food from the back of the fridge? well fear no more....

The 2 hours flew-by and much was gained by all.

....oh and the winning team was Team 1 (The Mycrowave).

Have you run a team building exercise lately?

Or so I thought.

I was going to do some development on my local machine, so I fired up npm install <packagename>. Unfortunately, due to a npmjs.org outage, it was not possible for me to get on with my work. So I did what any driven developer would do; I set up a CouchDB replica of npmjs.org. Next time this happens I will be prepared!

As this npmjs.org replica is hosted in the same datacenter as we deploy most of our sites to, it enables a super speedy deployment to testing.

How do we go about this you ask? Well let me tell you.

Installing CouchDB

Note: These instruction are geared towards Ubuntu 12.04 LTS. But it should be pretty easy to get it up and running on *nix systems, including Mac OS X.

Install the required packages:

sudo apt-get install build-essential autoconf automake libtool erlang libicu-dev libmozjs-dev libcurl4-openssl-dev 

Download CouchDB 1.2:

wget http://mirrors.ukfast.co.uk/sites/ftp.apache.org/couchdb/releases/1.2.0/apache-couchdb-1.2.0.tar.gz 

Extract, and relax:

tar xfv apache-couchdb-1.2.0.tar.gz 

Now time to compile:

cd apache-couchdb-1.2.0
./configure
make
make install 

After all that is done we now want to check that everything's fine and dandy, and that we get the expected output:

$ couchdb
Apache CouchDB 1.2.0 (LogLevel=info) is starting.
Apache CouchDB has started. Time to relax.
[info] [<0.32.0>] Apache CouchDB has started on http://127.0.0.1:5984/ 

Sweet! But are we responding to requests?

$ curl -X GET http://localhost:5984
 [info] [<0.361.0>] 127.0.0.1 - - GET / 200

Boom, we now have a working CouchDB instance!

You: But wait kind sir, what if we reboot the server? Wouldn't we have to start CouchDB again?

That's correct, we will be adding CouchDB to our init.d scripts, but first we need to create the correct user, group and permissions:

$ sudo adduser --disabled-login --disabled-password --no-create-home couchdb
Adding user `couchdb' ...
Adding new group `couchdb' (1001) ...
Adding new user `couchdb' (1001) with group `couchdb' ...
Not creating home directory `/home/couchdb'.
Changing the user information for couchdb Enter the new value, or press ENTER for the default
  Full Name []: CouchDB Admin 
  Room Number []: 
  Work Phone []: 
  Home Phone []: 
  Other []: 
Is the information correct? [Y/n] Y

User added, now permissions:

sudo chown -R couchdb:couchdb /usr/local/var/{log,lib,run}/couchdb
sudo chown -R couchdb:couchdb /usr/local/etc/couchdb/local.ini

We also want CouchDB to use insecure rewrites for a later step. We can turn this off by editing /usr/local/etc/couchdb/local.ini and adding secure_rewrites = false on line 11 in the httpd section.

$ sudo vim /usr/local/etc/couchdb/local.ini
[httpd]
secure_rewrites = false

Ready, set, link, defaults.

sudo ln -s /usr/local/etc/init.d/couchdb /etc/init.d
sudo update-rc.d couchdb defaults 

Go!

sudo /etc/init.d/couchdb start 

YAY!

Replicating npmjs.org

Now to replicate the npm registry.

curl -X POST http://127.0.0.1:5984/_replicate -d '{"source":"http://isaacs.iriscouch.com/registry/", "target":"registry", "create_target":true}' -H "Content-Type: application/json" 

What this means is that once this is completed your local replication will be an exact copy of the npm registry. However, to ensure we do indeed receive all updates we will add a "continuous":true parameter to the JSON string in our POST request, this utilises CouchDB’s _changes API and will pull any new changes when this API is notified.

curl -X POST http://127.0.0.1:5984/_replicate -d '{"source":"http://isaacs.iriscouch.com/registry/", "target":"registry", "continuous":true, "create_target":true}' -H "Content-Type: application/json" 

We are now replicating continuously from npmjs.org to our private CouchDB instance! If you ever want to stop these replications you can easily do this by running the same command as before but add a "cancel":true parameter to the JSON POST data.

curl -X POST http://127.0.0.1:5984/_replicate -d '{"source":"http://isaacs.iriscouch.com/registry/", "target":"registry", "continuous":true, "create_target":true, "cancel":true}' -H "Content-Type: application/json" 

And we're almost done! All we need to do now is to set up our own version of the npmjs.org registry and we can relax like the humanoid in the CouchDB logo, or as we do @clock, melt into our beanbags...

Getting npm to work with our replicated CouchDB

Most of the steps can be found on isaacs github in the npmjs.org git repositories README

Of course we need to have nodejs and git installed for this:

git clone git://github.com/isaacs/npmjs.org.git
cd npmjs.org
sudo npm install -g couchapp 
npm install couchapp 
npm install semver 
couchapp push registry/app.js http://localhost:5984/registry 
couchapp push www/app.js http://localhost:5984/registry 

Boom, we now have a working npm repository, to test this we can run the following command.

npm --registry http://localhost:5984/registry/_design/scratch/_rewrite login
npm --registry http://localhost:5984/registry/_design/scratch/_rewrite search

If you are getting results then everything has gone according to plan!

So we now have your own privately hosted npm registry, that keeps itself updated. Pretty neat, eh?

All you have to get up and running on your own subdomain is to modify the [vhosts] section in /usr/local/etc/couchdb/local.ini. Uncomment the example and restart CouchDB.

$ vim /usr/local/etc/couchdb/local.ini
[vhosts]
example.com = /registry/_design/scratch/_rewrite

And while we are at it will lock down the application and prevent unauthorised users from deleting our data.

$ vim /usr/local/etc/couchdb/local.ini
[admins]
admin = password
$ sudo /etc/init.d/couchdb restart 

Start using your version of npm with the client!

Straight from the npmjs.org README, just replace <registryurl> with your registries url, for example:

http://localhost:5984/registry/_design/app/_rewrite

You can point the npm client at the registry by putting this in your ~/.npmrc file:

registry = <registryurl>

You can also set the npm registry config property like:

npm config set <registryurl>

Or you can simple override the registry config on each call:

npm --registry <registryurl> install <packagename>

Now you can code and install modules even if npmjs.org is down, or if you want to push the boat even further have this running on your local machine and have an up-to-date npm registry just before your flight. ;]

Thanks to @MikeCronn and @mjorhimself for proof reading this article.

Any questions? Tweet me @tomgco or leave a comment below.

Smokey cloud with fiery rain spotted at this years Guy Fawkes celebrations…

Rob kicks of a team building exercise at Clock this week. Objective: invent, design and shoot a commercial for a new home appliance. Ladies and gentlemen, meet the inventors of "The Spidge"…

Rocking it in the boardroom are the inventors of "Iron Man" and woman and child…

Team Spidge get their edit on…

While proprietors of the outstanding new social technology "Mycrowave" scrum up…

A sneaky peak into the invention of "Health Checker 3000" aka… Dr Shit.

Rob loses concentration and focuses on Jack's butt momentarily…

AND now! To present... Dr Scheizenhausen and Mike the Plumber from Crapologies Ltd.

And the winning team! Mycrowave! Well done guys…

So back to work... Ema figures out a new approach to scamping

While the tech loft get cosy… in more ways than one! Erik here showing off his new bag…

While Luke gets a little confused with his…

And Adam just bypasses it altogether and goes straight for the sleeping bag…

But then gets confused and ends up falling asleep in an actual meeting…

Syd plays SHIT in words and friends…

And Vince comes at him with RAPE... yeesh!

Luke invents a new kind of noodle soup…

Ema and Dan decide the best meet is a sofa meet!

AND what we've all been waiting for… Our Mo Bro's have an update for us. Ben's looking ever so smug!

And well Loz is just grabbing the bull with both horns (geddit? haha)

So PLEASE please go and donate for this great cause. Movember is only here for another 3 weeks! Make it count…

Sam and Vince take us on a tour of the World Publishing Expo in Frankfurt...

Some pretty cool Typography on the escalators…

A grand entrance…

A little tipple…

And feeling it a little the next day… (aww)

Syd manages to find the only human who can fall asleep in a nightclub at the After Dark Club in Reading...

And catches this corker whilst on the commute… Send captions to @Clock

Francisco shows us how to keep trim during office hours…

And Paul adds a little healthy competition into the mix…

Meanwhile Jules gets his Glug on…

And we enjoy a talk about Mr Bingo and his Hate Mail…

Syd gets his pumpkin out… Meee -owww!

Loz gives us his game face for Movember…

While Ben goes ALL out with this before and after…

So PLEASE get donating to the Clock Team for Movember. It's a great cause of which you can read about here. GO MO!

Ben Gourley killing it on his trials bike on the Isle of Wight...

Jack unwinding with his Halloween inspired Lego Arduino project… pics of the finished article coming sooOOOOooonn…

Paul Serby was invited to speak at #LNUG where he covered topics like our award winning Swipestation…

Moving on to the transitions of wearable computing…

The guys enjoyed some pizza and beers with Bowler Cam making an appearance (Wearable computing from Clock)…

Did I mention there was beer?

Not long after the morning after the night before, Adam D donned his new GoPro…

And Sophie, Luke and Tom G joined him on the slopes of Hemel Hempsted…

Luke showed his steeze…

Sophie got air…

And kept the long running feud between Skiers and Boarders alive… (no skiers were hurt in the making of this WIP, she was actually helping them up)

All this while Clock launched the new Go Think Big! site…

Back in the studio Adam D gets a step ladder to help with… well, everything…

Ema finds the perfect combination of her love of comic illustration and, well, drinking…

In preparation for meeting the Scissor Sisters! Shot taken side stage…

Party cannons launched!

And the aftermath…

Sophie laid her eyes on this beast at Freeze Festival…

And got in with the Lea Valley white water rafting crew. I see a new hobby developing…

We round this week's WIP up with the totally amazeballs announcement of the ALL NEW Clock Band! Syd is showing his inner rock star here…

"You Rock Kings Langley!"

Presenting… Nodestack conference!

Clock CTO Paul Serby speaking at Nodestack with fellow speakers Bryan Cantrill, Aaron Heckmann, Nuno Job and Ben Wen…

Winding down in San Francisco with the team…

And a final shout to San Francisco captured by Sam Fresco our Marketing Manager…

Whilst back in the UK, Swipestation scooped some awards at the Digital Impact Awards in London…

The team get spoiled for dinner…

And then 'recover' from the celebrations the next morning…

The creative team get creative with their late night positioning…

Jack shows us what he's going to connect to his Arduino kit! Watch this space…

And Mikkel's lifeline gets a shout this week all the way from Denmark with Sam C on speed dial… a little office bromance never goes amiss – even if it is long distance :-)

@SydNadim @lozpayne56 and @frescosam get up close and personal with the BIMA End of Summer Bash crew.

Clock developers reduce their carbon footprint by banning semi-colons - @bengourley rolls out the new JS Style guide for Clock. You can check it out here.

@theredbull catches some serious rays in the wonderland that is the New Forest...

@OliverJohnston5 gives us an insight into the diet of a hardcore coder...

Whilst @SydNadim and @emekaiweka show us the diet of the commercial team with this fancy ensemble. Dry ice sushi at Gilgamesh!

@tomgco makes @lukewilde a serious cup of tea...

Bruce Wayne AKA The Bat infiltrates the @Clock site stats....

@Mae84 gets a shock when she discovers this little guy just came outta nowhere... 

And the @Clock team are holding 3 meetings on the roof of @TheHospitalClub today.. Cold? What cold? Brrrrrrrr....

And we get a new pet in the form of the new @trello Doggy! Rarf!

Double exemption tea game means a whole new set of rules...

Ash enjoys a new crown for coding...

Sam C gets some hate mail...

Adam D jumps out of a plane... nothing to do with work of course.

Loz, Tosin and Sam F get up close and personal with the Olympic Torch..

Syd shows off his terrible - sorry Tearable Puns....

Paul shows off his new Node Bowler!! Check him out at http://bowler.clockte.ch/

and rocking it at #LXJS!!

Bowler Cam takes it's next victim at #LXJS

Most people know they shouldn't like it, and they perhaps even pretend in public (to save face) that they dislike it - but secretly they love it. 

Recently I have started receiving spam emails that I believe fall into this bracket. 

The emails are from a Joyo at mk-time.com.
I can only presume that somehow they decided to mass email all emails containing "clock" in the domain, as I have certainly never visited their site or signed up for a newsletter - or for that matter purchased anything from them.

In a very weird way, I'm glad! The emails bring a smile to my face every-time I receive one. Have a look at them: pure genius (make sure to read the text too)!:

Love 'em!

On a more serious note, a good way (provided your email service allows) to find out if you have been subscribed to email you never asked for, is to use a technique called "address tags" or "sub-addressing"

Definition from Wikipedia:

Some mail services allow a user to append a tag to their email address (e.g., where joeuser@example.com is the main address, which would also accept mail for joeuser+work@example.com or joeuser-family@example.com). The text of tag may be used to apply filtering and to create single-use addresses. Some IETF standards-track documents, such as RFC 5233 refer to this convention as "sub-addressing".

So, assuming your email provider allows, when you register on a site, or sign-up for a newsletter, you can use the site's name to ensure that any email you receive is coming from the site you requested, and that they haven't sold your data to another company.

For example:

Joe Bloggs wants to register on acmecorp.com. His email address is usually joebloggs@example.com, but he signs up with: joebloggs+acmecorp@example.com.

He could then filter all mail to joebloggs+acmecorp@example.com to a sub-folder/tag in his inbox called 'Acme Corp'.

If he receives an email to joebloggs+acmecorp@example.com from another company other than acmecorp.com he knows that either they have sold his data to another company or that someone has email harvested his address.

Anyway, hope you enjoyed the spam from mk-time, have you got any spam that you love?!

Update: Received one moments after posting blog entry :)

These were the top talks for me:

James Halliday - Harnessing The Awesome Power Of Streams

James (aka substack) gave a whistle-stop tour through streams in node.js, showing by insanely fast examples, augmented by hand drawn illustrations, on how and why they should be used.

Brian LeRoux - Mobile JavaScript

As part of a great mobile JS state of affairs, Brian gave a great insight into dirty hacks that PhoneGap/Cordova has to do to overcome various device specific problems.

Anthony Ricaud - The Web is the platform

Anthony talked about how Firefox had brought control of the web away from proprietary implementations, but now the mobile space is controlled by Apple and Google. He introduced Firefox OS, which aims to do to the mobile space, what Firefox did the the browser market.

One thing that unfortunately let down a fair few presentations was coding demos not working. Budding presenters: watch Substack's exemplary talk, and notice he didn't actually do any coding, it was all prepared in advance.

We had a great time at LXJS and meeting the Lisbon people. Thanks to the organisers for such an enjoyable event in a great city!

As projects and their teams grow, so must the amount of time that is invested into isolating latent errors. If your development team utilises source control it can often be useful to narrow your search down to the specific commit which introduced a given issue. Doing this manually can be a tiresome process, fortunately for our fingers Git exposes a way to ferret out offending commits with a technique akin to a Binary Search.

The simplest use of this tool requires you to undertake a small, manual workflow.

1. Start git bisect. # git bisect start
2. Give git a bad revision. # git bisect bad {insert your bad revision}
3. Give git a good revision. # git bisect good {insert your good revision}
4. The bisect loop begins.
   1. Git checks out an alternative commit (Following a Binary Search approach).
   2. You build and test your application.
   3. Tell git if the issue is present or not. # git bisect good or # git bisect bad
   4. Git narrows it's search and performs another search.
5. Eventually git will arrive at the git which introduced the issue.

Voilà! You have located the offending commit; the volume of code you need to inspect has been drastically shortened. (You can check the contents of a given commit using git show {insert commit ref}).

The procedure above is great for locating a bug on a page of a web application for example. But if the output your testing is displayed in the console (Such as status from a build process or unit test), then we can get Git bisect to automate this workflow it's self.

Basic Automation

If you're bisecting to find the introduction of a failed unit test or build of your application, running and waiting for the associated commands to complete can consume a lot of your time. Luckily for our patience, Git bisect can take a command to run against each commit and looks at the command's exit code automatically determine the success of the revision.

# git bisect start {bad revision} {good revision}
# git bisect run {command to run unit tests or build your project}

Nice! This works for a good number of cases but if you want to preform a more precise tests on your output, you can enlist the assistance of a small Shell script.

Custom Automation

The main thing you'll need to be successful in writing your own scripts is a basic understanding of Shell exit codes. At the most basic level an exit code of '0' is for success and anything else denotes an error. As you've probably guessed Git will look to these codes to determine the success of your build script. By grepping the output of my build process I can test for the occurrence of a given string then close my Shell script with an exit code pertaining to the result.

#!/usr/bin/env bash

# Build and grep for failure output. Replace with your own command.
maiden setup development 2>&1 | grep '\"reload\" failed'

# Retrieve the exit code of the grep.
if [ "$?" -eq "0" ]; then
    # echo "Text found."
    exit 1
else
    # echo "Text not found."
    exit 0
fi

Now that we've written our test logic, you'll want to put it somewhere outside of your repository, this is to prevent git reacting to your script as an untracked file. This script is one I will (probably) make use of again, so I've gone ahead and put it in a scripts directory setup on my user's path. 

Now we're ready to run:

  # git bisect start {bad revision} {good revision}
  # git bisect run {path to your script}

Git will now perform the binary search based on output provided by your script. This approach can of course be used alongside time intensive unit tests, enabling you to play detective in the background.

Further Reference

• http://www.kernel.org/pub/software/scm/git/docs/git-bisect.html - GIt Bisect manual
• http://en.wikipedia.org/wiki/Binary_search_algorithm - Binary Search
• http://tldp.org/LDP/abs/html/exit-status.html - Shell exit codes
• What was the 2>&1 in the above script?

// Create a plain object
var o = {}

// Bind an event handler
$(o).on('bump', function () {
  alert('ouch')
})

// Trigger an event
$(o).trigger('bump')

// Unbind event handlers
$(o).off('bump')

For some reason, this feature isn't documented, but it's really useful when you want an event listener mixin for your objects and you've already got jQuery on the page. It may not be the most performant event engine out there, but unless you've got hoards of events flying about, this solution is nice because you don't add any page bloat.

When writing module.js, I wanted to set up some automated cross-browser testing. Firing up VMs is tedious and slow, but for a front-end JavaScript library, making sure it works in all the browsers you intend to support is paramount.

It's probably worth saying now that I'm focussing on functional testing here, not the inspection of styles. As far as debugging your CSS is concerned, I'm afraid my best suggestion is still to fire up a VM or use service that does that for you and lets you interact (i.e. BrowserStack, Browserling).

Testing by hand (i.e just running code and inspecting that it did what was expected) is a start, but after every tiny change to your front-end JavaScript, can you honestly have the discipline (and the time) to fire it up in every browser and fully test its functionality? If you do, I congratulate you, and apologise because the rest of this article might bore you.

Unit and acceptance tests help to catch regressions – bugs that are introduced by changes to the code: adding features, fixing other bugs or refactoring. They help to sanity check that your program does what it is intended to do. They mean that you as the author have to use your program, casting scrutiny over its API.

Importantly for open source projects, tests promote trust in your program – their existence alone is added assurance for most users, while the ability to run them enables the more sceptical user to verify that your program fulfils its claims. If you're releasing your OS project on GitHub, hoping for community input, then tests can help make sure pull requests don't break things. Also, well written tests can provide great example usage for your code, augmenting any documentation, readme and examples you might write.

Now that I've convinced you that testing is a good idea, and that opening up different browsers is a pain, hopefully now you can share my desire for automated cross-browser testing.

Testling

My first port of call was a service called Testling by StackVM. StackVM's main product (it seems) is Browserling: a service which lets you operate different browsers from within your own. Testling is Browserling's little brother – a service which sits on HTTP, allowing you to send a payload of tests to run in the selection of browsers that you specify.

Let me say now, that if Testling had worked for me, it would have been the holy grail (and this article would be called something 'TDD: Testling Driven Development', or some other witty pun).

However, I was fraught with silent hanging tests (Had they failed? Why? Had they not failed? Why were they taking so long?). These munched up my minutes, of which Testling's free tier gets you 30/month, and I wasn't ready to jump to $20/month for something that wasn't yet working for me. Another show-stopping issue that occurred when asking Testling to run tests files with more than two or three tests in various versions of IE was 'Failed to compile – Instrumentation may have failed'. There is an option to switch instrumentation off, so I did, resulting in a terse message of 'Syntax error' – leaving me baffled, since running the same file in different browsers worked, and each of the tests alone worked in IE. Anyway, I digress–I'd love to hear that I'm doing something wrong, but unfortunately I think these problems are a sign of Testling being a young and fledgling service. Again, let me re-iterate: I believe that a mature Testling would be the ideal solution. For now though, it's frustratingly close.

BusterJS

Buster is another new, 'beta' labelled approach to cross browser testing. Currently Buster requires that you start a server on your local machine, fire up all of the browsers that you want to test in (including from within VMs) and have them 'captured'. Once captured, a browser becomes a 'slave' to the Buster server, and they can be used to repeatedly run your tests. This is a pretty laborious thing to do compared with Testling, plus you have to stock up on your own array of VMs and browsers. However, in their roadmap, the team behind Buster aim to hook up with the BrowserStack API (currently in beta) so that you can leave the nitty-gritty of browser acquisition and OS virtualisation up to the experts, and concentrate on running your tests.

Getting up and running with Buster was pretty straightforward (especially being a Node developer – as the Buster server is a Node module); things were going swimmingly. Then the major blocker was discovered: the browser capture feature doesn't work in < IE8. Reading up on the issue tracker, it seems they are keen to deliver good browser support, but it's just not been achieved yet. An alternative 'static' server is offered, which instead of capturing the browser, will just serve up the tests to run within the browser. This works in said browsers, but requires manually navigating to the page and hitting refresh–that doesn't sound automated to me! Once Buster integrates with BrowserStack, I think it'll be a real rival for Testling (though I think as a CLI junkie I'd prefer Testling) but for now, no cigar.

Next…

My next port of call will be to try the vanilla BrowserStack API for myself, as the kind people there have given me Beta access.

This is where I need you. Have you solved this problem for yourself? If so, share the wisdom so fellow developers like myself can achieve enlightenment! Thanks for reading, and I look forward to responding to your comments.

Some really interesting work to see last night at the D&AD New Blood exhibition. My highlights below, in no particular order (well the order their business cards fell out of my pocket).

The standard was pretty high and I'm sure I have missed some great talent, anyone I couldn't easily get a card from or didn't have a website I've not included. Enjoy.

http://sophiekemp.com/
http://www.abigailburch.co.uk/
http://www.behance.net/stephaniebonner
http://risottostudio.com/
http://cargocollective.com/suziemoloney
http://birdandcroft.com/
http://www.behance.net/joelpascual
http://cargocollective.com/rikdasillustration
http://cargocollective.com/girlswithballs
http://terryhearnshaw.co.uk/
http://jamesmeacock.blogspot.co.uk/
http://www.behance.net/james-alexander
http://petesmart.co.uk
http://cargocollective.com/kevingartland 

In short, Scrum is a great framework that underlines a very simple process with an emphasis on adaptability and retrospection.

Here at Clock, Agile and Scrum allow us and our clients to quickly inspect the work in progress and quickly spot things going wrong before it's too late.

Scrum on its own, doesn’t resolve problems. When exercised properly by a talented and committed team, and when combined with good software development practices, it can almost be the silver bullet.

A great deal of Scrum’s success depends on a skilled and dedicated Product Owner to follow and support the project development.

Enough said! This article will focus on a particular portion of Scrum, the ‘Sprint Planning’ section and to demonstrate how best, and to what degree the team should commit to in a sprint.

‘Sprints’ or otherwise know as ‘Iterations’, which if you come from a Lean approach, is a list of tasks that the team commits to execute in a boxed time.

To plan a sprint, the team will choose the tasks from the ‘Product Backlog’. The Tasks are then broken down into smaller, individual cards, thus creating the ‘Sprint Backlog’.

During the Sprint planning, two opposed interests can come into play which are:

• The ‘Product Owner’ wants the team to pick more cards and deliver more value;
• The ‘Team’ can be interested in challenging tasks and avoid committing to too much.

The following diagram illustrates the scenario.

Note that challenging tasks doesn’t necessarily mean complex nor complicated. A complicated task is one with many parts or lots of dependencies, whilst a complex task is one with an outcome the team cannot fully predict, or understand how to build during the planning session.

Be aware that complexity can lead to anarchy. Too many complex tasks on a product backlog often means the technical plan was not detailed enough in the first place.

This diagram below illustrates the process.

It’s the ‘Scrum Master’s’ job to mitigate and facilitate both parties interests into common ground.

How should one decide how much to commit to in the sprint?

Sprint velocity is a good indicator of how much the Team should/can commit to. The velocity is the result of the total amount of points the team is able to do in a Sprint. It often takes two sprints to establish the Team's velocity.

Ideally, it is best to avoid the idea that the number of points is equal to the degree of success. This could translate into a team death march. The result of a Sprint could be that the team wasn’t able to deliver all of the story points.

In a similar situation we have heard Product Owners saying:

"If the team committed to 30 points, they must get it done, even if it rains frogs."

In order to avoid this misunderstanding on Sprint success, we introduced a ‘Sprint Goal’.

A ‘Sprint Goal’ is easily understood by the Product Owner (client) and by the team.

A Sprint Goal can be, for example:

• Writing and publishing articles;
• Users login.

So committing to a Sprint Goal will avoid non-constructive meetings where the Scrum Master has to explain to the Product Owner where and why the team did not meet the agreed stories or story points.

A Sprint Goal is a much better and clearer measure of Sprint success. This has proved to us that our clients are much happier during the project development when they know what to expect.

When developing HTML5 applications with JavaScript, iOS click and touch response times are infamously slow. With speed in mind, here's some advice from down in the trenches at Clock on how to improve the responsiveness of your applications.

Don't listen to Click's

After a user taps their device, the iOS browser will wait roughly 300ms to decide if the user performing a click or a more elaborate swiping gesture. To liberate your application from this delay you can instead listen to the immediately triggered touchstart event. To detect when this is available and utilise it along side your traditional click event you can perform the following test as you bootstrap your application:

var eventName;
if ('ontouchstart' in document) {
  eventName = 'touchstart';
} else {
  eventName = 'click';
}
$('.button').on(eventName, function(event) {
  alert('ding');
}

NB: you might also be interested to know you can also listen for the verbosely named touchmove.

Decapitate your DOM

Still finding our button actions to be unacceptably delayed, we recognised a distinct link between these response times and the amount of HTML rendered onto the DOM. For us, this was key. The application we were building consisted of one HTML document which, using CSS3 animations, took the user through a number of different pages/views. Given our situation, the technique which offered the most substantial benefit was to hide the HTML from the browser untill it was needed. We achieved this by housing markup in tags and appending it to the DOM only when required.

<script id="panel-template" type="text/html">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  </p>

</script>

As we were only substituting static text and markup we decided not to use any specific templating technology, Instead enlisting jQuery to retrieve and append our templates.

<script type="text/javascript">
  $(function() {
    $('body').on("click", function() {
      $("body").append($('#panel-template').html());
    });
  });
</script>

A number of JavaScript frameworks will manage this process for you (we're rather fond of Sencha). However, these framework can themselves impose their own performance overheads, which can be in turn exacerbated by use of PhoneGap

Flatten your DOM

Even with the DOM heavily truncated our application still demanded better performance. To attain better results we had to sacrifice the verbosity of our markup. Our designers, to their dismay, were consequently required to flatten down images which were previously layered on different z-index's. This helped reduce the nesting & complexity of elements and lower the application's memory footprint. Aside flatting markup, our designers were repeatedly compressing assets into ever smaller and smaller files.

(Sprites deserve a mention here)

By this point, developing our application bared striking resemblances to optimizing a game. While our application made high demands of the hardware available on our list of supported devices, we were able to get performance up to a satisfactory level.

In this post we will:

• Download and install Node and npm
• Create a basic website

Getting started

First of all, we need Node. Get pre-compiled binaries for Mac & Windows from http://nodejs.org/#download . (If you run Linux, you'll need fly solo for a bit and compile it yourself). Node comes with a package manager called 'npm', which is used to install modules. From here on in, I am going to write from the point of view for a Mac user, simply because that is what I use. The process on Linux should be near identical. It will be a similar process on Windows as Node and npm have a consistent interface, but things will definitely vary. Hopefully you can still follow along.

Open up a terminal and type node -v and npm -v to ensure it's installed ok.

Creating project skeleton

Create a folder anywhere you like, and call it anything you like, e.g.:

cd ~/Projects
mkdir MySite
cd MySite

Make sure you're inside this folder. This will house all of our files. Create a file called package.json with the following contents:

{
  "name": "MySite",
  "version": "0.0.1",
  "private": "true",
  "dependencies": {
    "express": "3.0.0alpha4",
    "jade": "*",
    "stylus": "*",
    "nib": "*"
  }
}

This file tells npm about your project. If you then do npm install in the project root, it will install the dependencies that are listed. The dependencies are listed by name and version. In proper projects, it is good to specify a version, however, the '*' means that any version will do and npm will retrieve the latest; this is ok for now. Npm installs modules locally in a folder called 'node_modules'. The private flag ensures that our site doesn't get accidentally published to the npm directory.

Here's a little info about our dependencies:

Express

Express is a web framework, inspired by the Ruby project 'Sinatra'. It's one of many web frameworks in Node, but is the the most popular, and in my opinion the most easy to learn. Other frameworks that are worth checking out once you have got to grips with Node include: Flatiron, Geddy, and Taco.

Jade

Jade is a tempting engine. It is a language that compiles to HTML. It's a really great way of separating your logic from your markup. If you've dabbled in PHP, you'll know the problem I'm talking about. Jade is awesome. Some people are put off its whitespace-significant syntax, but I recommend giving it a go. It's very clean, and you'll never write a malformed HTML document again! (You'll never have to type angle brackets ever again).

Stylus

Stylus is a CSS-preprocessor. If you're familiar with LESS or SASS, Stylus does very much the same job (if not, Stylus is a language which compiles down to CSS for the browser; it adds new features that make CSS easier to work with). In my opinion, Stylus trumps the other pre-processors out there. It doesn't force a certain syntax upon you (you can use plain CSS syntax if you like, but I prefer the colon, semi-colon and curly brace free option). For more info on what Stylus can do, see the website and a blog post of mine on some of the lesser-know, but very useful features.

Nib

Nib is a set of utilities for Stylus. Among other things, it enables going vendor-prefix free, which in my eyes makes it worthwhile alone.

Getting up and running with Express

Express comes with a utility for creating a site skeleton. However, since we're in the business of learning, we'll create everything from scratch.

Create a file called app.js in the project root, and open it up in your favourite text editor. First things first, we need to require our modules that we installed with npm:

/*
 * Module dependencies
 */
var express = require('express')
  , stylus = require('stylus')
  , nib = require('nib')

Next, we want to fire up Express, tell it to use Jade and Stylus, and some other basic functionality:

var app = express()
function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .use(nib())
}
app.set('views', __dirname + '/views')
app.set('view engine', 'jade')
app.use(express.logger('dev'))
app.use(stylus.middleware(
  { src: __dirname + '/public'
  , compile: compile
  }
))
app.use(express.static(__dirname + '/public'))

The app.set() directives tell Express that we want to use Jade, and where we will keep our views. On that note, let's create a folder called 'views' in the project root where we will put our Jade files.

The app.use() calls pass 'middleware' functions for Express to use. Middleware are simply functions that have the signature fn(req, res, next). They take the request object, the response object and next, which will call the next piece of middleware. Express executes them in the order in which they are passed, and any of them may send a repines, preventing the execution of any remaining in the series (by not calling next()).

The first piece of middleware we apply is the Express logger in 'dev' mode. This will simply log incoming requests to the console. Next, the Stylus middleware is applied, which will compile our .styl files to CSS. In order to use nib, we pass in a custom compile function to the Stylus middleware. After that it's the Express static middleware, which is used for serving static files (we tell it that our static files will live in a folder called 'public', so lets create that in the project root now). You might be wondering why we need this. Unlike Apache, the Express server doesn't mimic the filesystem to the visitor. This allows great flexibility for the url structure of your site, but it's quite a useful feature for serving static assets, so the static middleware does exactly this on the directory that we pass. A file 'pic.jpg' in a folder 'images' within 'public' will be available to the client at '/images/pic.jpg'.

By now, you might be eager to run something. Finish off app.js with the following code:

app.get('/', function (req, res) {
  res.end('Hi there!')
})
app.listen(3000)

This creates a 'route', simply a function which takes the request and response object, and sends the plain-text response 'Hi there!'. We then tell the Express application to listen on port 3000.

If you run node app.js in the terminal, then navigate to http://localhost:3000/ in your browser, you should see the plain-text response.

Creating some content

Now for some actual web content. First up, lets create a template with our site's markup skeleton. Create a file called 'layout.jade' inside the views directory. Open it up and fill it with the following contents:

!!!5
html
  head
    title #{title} - My Site
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    header
      h1 My Site
    .container
      .main-content
        block content
      .sidebar
        block sidebar
    footer
      p Running on node with Express, Jade and Stylus

Even if you're not familiar with Jade, hopefully you'll be able to get an idea of what's going on here. Firstly, the !!!5 part tells Jade to output the HTML5 doctype . Then, each word beginning a line represents a tag. Indentations after that line denote the tag's content, so rather than having to close a tag, you just stop indenting lines. Within the head tag we output the contents of a title variable with #{title} -- you'll see later on where this gets defined. We are also linking to the place we expect our compiled Stylus to be. The only thing left to explain here is block. Since we won't be filling in this file with our page contents, we can denote blocks. Templates which inherit from this one can define their own content to be output within these blocks.

If you're feeling a bit confused or just want to know more about Jade, then head over to the docs .

Next we want to fill in these blocks with some content. Create a file named 'index.jade' inside 'views'. Populate it with this:

extend layout
block content
  p
    | Vivamus hendrerit arcu sed erat molestie
    | vehicula. Sed auctor neque eu tellus
    | rhoncus ut eleifend nibh porttitor. Ut in.
  p
    | Donec congue lacinia dui, a porttitor
    | lectus condimentum laoreet. Nunc eu
    | ullamcorper orci. Quisque eget odio ac
    | lectus vestibulum faucibus eget in metus.
    | In pellentesque faucibus vestibulum. Nulla
    | at nulla justo, eget luctus tortor.
block sidebar
  .widget
    h1 Widget
    p
      | Sed auctor neque eu tellus rhoncus ut
      | eleifend nibh porttitor. Ut in nulla enim.
    p
      | Vivamus hendrerit arcu sed erat molestie
      | vehicula.

You can see that the first thing we are doing is extendinglayout. This will output all of the content of layout.jade, and allow us to define content to be output in place of the blocks that we defined.

Lastly we want to hook up our stylesheet. Create a folder called 'stylesheets' within 'public', and create a file called 'style.styl'. The Stylus middleware will compile it into a CSS file of the same name, in the same directory.

Feel free to freestyle on this bit, and style up the content yourself. Otherwise grab the contents of my stylesheet , which has some comments about the Stylus features it's using.

So now we have our view and stylesheet in place, let's revisit 'app.js' and tell it what to render.

Replace the app.get('/', …) part with this:

app.get('/', function (req, res) {
  res.render('index',
  { title : 'Home' }
  )
})

There's that title variable we talked about earlier on. The functionres.render() is provided by Express and takes the name of the view to render, followed by an object whose properties the view will have access to (the properties of this object are sometimes known as 'locals').

Now run the app again, using node app.js. If it's still running from before, quit it with ctrl-c. It's worth mentioning here that any change to JS files that Node will run will require a restart of the app. When in development, we use nodemon which will watch for changes and restart the app for us.

If you used my stylesheet, navigating to http://localhost:3000/ should result in something like this:

So there we have it. A simple website in Node. Hopefully you've been able to follow along, and were able to get the site running. If not, this project is over on GitHub . You can check that out, run it and have a poke around. In a future blog post, we'll look at the various options for deploying and hosting Node sites. If you have any questions, then give me a shout in the comments.

A lot of university degrees require students to undertake a 40 week internship in an industry relevant to their degree. This allows students to put their skills into practice and help them find work when they graduate (as they have some experience of the real world).

The benefits of intern schemes to both students and companies are unbelievable. 

Students benefit from the experience gained from CV writing and being interviewed, but mainly from working in the real world- plus the added bonus of earning some money! 

Companies benefit from a relatively cheap resource, and when nurtured students have the potential to become a key member of any team. Most interns have little to no experience of working in the real world, so the employer has the opportunity to mould the student in to an ideal employee. With new students every year bringing their own views and opinions it keeps the company fresh and exciting.

At Clock we love our interns. Each year they surpass all our expectations, always showing excitement and enthusiasm regardless of the task put in front of them. We feel that an intern should have a say in the direction of their time with us, so if they want to pursue a particular area or technology, then we support them. An internship is not just about the company but about the individual.

After 40 weeks or more of working for us, our interns are invaluable and they are missed when they return to university. They understand how we work, and the way we work, so some want to carry on working for us. We are often keen to hire them when they graduate.

If you are a small company with limited resources then having an internship scheme to aid growth and provide extra resource is very beneficial.

Clock have hired 8 interns after graduating, (including me) all of which have key roles within the company. A couple have left for pastures new, but the rest still remain.

We have a relationship with lots of Universities but here are some of the ones with websites on internships:

• Bournemouth University 
  
• Brighton University 
  
• Hertfordshire University 
  

Doctrine is a set of PHP libraries focused on providing persistence services. Doctrine uses an object relation mapper and database abstraction layer to provide the functionality it offers. See the Doctrine homepage for more general information.

One of the key aspects of Doctrine's ORM is its ability to manage associations between entities. I.e one-to-many, one-to-one, many-to-one, many-to-many. See the associations reference library.

This post will assume a reasonable understanding of relational databases and PHP. As well as a basic understanding of Doctrine.

To help understand how each of the associations are defined a common example of students will be used throughout.

One To one

/**
 * @OneToOne(targetEntity="Address")
 */
protected $address;

Simply specify the TargetEntity on the owning side (in this example this is the Student Entity) and the association is setup. A student has one address. Optionally you can describe the join columns. See @OneToOne

One To Many

/**
 * @OneToMany(targetEntity="Year", mappedBy="students", cascade={"all"})
 */
protected $year;

This is defined in the entity that contains a single item. So in the example a student belongs to only one year. Optionally you can describe the join columns. See @OneToMany

Many To One

/**
 * @ManyToOne(targetEntity="Student", cascade={"all"})
 */
protected $students;

This is defined in the entity that contains multiple items. So in the example a year has many students. See @ManyToOne

Many To Many

With Many to Many relationships there is an owning side and an inverse side. It doesn't matter which entity is the owning side and which is the inversed side. The owning side defines the join table and columns and the inversed side references the owning side.

A student has many classes and a class has many students. If you are storing more information in the join table besides the relationship then a combination of Many to One and One to Many should be used instead using a link entity.

Owning Side

/**
 * @ManyToMany(targetEntity="Class", inversedBy="students")
 * @JoinTable(name="student_to_class",
 *      joinColumns={@JoinColumn(name="student_id", referencedColumnName="id")},
 *      inverseJoinColumns={@JoinColumn(name="class_id", referencedColumnName="id")}
 *      )
 */
protected $classes;

Inversed Side

/**
 * @ManyToMany(targetEntity="Student", mappedBy="classes")
 */
protected $students;

We are not explaining how to design a scalable application; it's assumed that any Node instance can correctly handle any request at any time, and therefore sessions (or any other shared data) are available to all of them. We store the session data in the MongoDB replica set to achieve this.

All deployments are on SmartMachine appliances at the same data centre. These are instances of SmartOS, which is a fork of OpenSolaris. As a Linux house, there was some frustration getting used to the Solaris commands, but resources such as the Rosetta Stone for Unix proved useful.

Security/Firewalling

Within Joyent's cloud, there is a possibility that other clients will have access to the private interfaces of your instances. Therefore it's critical that they are correctly firewalled, and this should of course be done first. Joyent provide documentation for configuring the firewall. On each server, after initial setup of the ipfilter service, we configured /etc/ipf/ipf.conf as follows:

1 line per server in the cluster like this:

pass in quick from <remote private IP> to <this machine's private IP>

block in from any to <this machine's private IP>

svcadm restart ipfilter

Node.js deployment

MongoDB configuration

• The whole of MongoDB (including config) is installed in /mongodb.
• The database is configured to start automatically and run as the “mongodb” user.
• /mongodb/mongodb.conf was edited to add or amend these lines:

bind_ip = 127.0.0.1,<this machine's private IP>
replSet = <your set name>
rest = true

• Restart the service with "sudo svcadm restart mongodb".

MongoDB arbiter

<exec_method  name='start' type='method' exec='/root/local/bin/mongod
  --bind_ip=127.0.0.1,<this machine's private IP> --replSet=<your set name> --journal
  --dbpath  /root/local/var/mongodb &' timeout_seconds='60'/>

It's worth noting that the script strangely installs Mongo in /root/local. To run the shell you need to specify the full path: /root/local/bin/mongo.

Final configuration

Now the cluster is at a stage where the replica set can be initialised by following 10gen's documentation.

Load-balancing the Node.js instances

Joyent offer a range of Zeus SmartMachine appliances for load-balancing, which are well documented on their site.

Node.js code changes

We use Christian Kvalheim's MongoDB Native Node.js Driver, which already has replica set support. From the documentation you can see that it's very simple to use, so switching from a single Mongo instance is trivial. Be sure to enable the "read_secondary" option to take advantage of reading from all servers. (This option is referred to as slaveOk by Mongo itself.)

For coders, it's useful to develop against a test replica set. To aid this, we wrote mongo-replset-test, a simple bash script to create throw-away replica sets on the local machine.

Conclusion

As you can see, on the whole we've found the configuration of this site on Joyent's SmartMachines fairly easy and straightforward. In terms of fail-over, failure of either MongoDB or Node.js instances should not impact the running of the cluster. However it's worth understanding the location of the servers. When you create a SmartMachine, Joyent's algorithm will try to locate the new instance in a cabinet not shared by your other servers. If it can't, then it will try to ensure that it's on a different server. If that still can't be achieved, you could find two of your instances running on the same physical server. That last case is unlikely but clearly undesirable, in terms of fail-over. The only way to verify the location of your instances is to raise a support ticket, and a Joyent technician will confirm for you.

In regard to expanding the site's capacity, we can now horizontally scale the web nodes by adding more instances. It's a very quick process, but the firewalling setup is an ongoing issue which we need to address.

The MongoDB replica set can also be scaled easily in terms of database reads. All writes must go through a single server (which is dynamically elected by the cluster, and automatically recognised by the Node.js driver). If this is a limitation, a sharding configuration is required to scale further.

Today is Clock's 5th annual trip to the PHP Conference and generally speaking, it gets better each year.

The keynote this year is by Rasmus Lerdorf entitled "A look at PHP in 2012", and as the PHP conf site tells us, Rasmus is:

Best known for having gotten the PHP project off the ground in 1995. He then went on to be infrastructure architect at Yahoo! for more than 7 years and most recently has been advising start-ups including WePay, Etsy, and Room77. Rasmus will give insight on PHP as he sees it in 2012 - from PHP's humble beginnings as the Personal Homepage project up to what is new in PHP 5.4 and beyond. http://www.phpconference.co.uk/

We'll be live blogging and tweeting throughout the day. You can see our thoughts on the talks we attend, by either refreshing this blog or following:

• Clock Dev Ops - Which is an aggregation of links and tips by @clock's tech team (RSS here: http://bit.ly/rIQgd4)

Or individually follow some of our tech members:

• PabloSerbo (Clock's CTO)
• ClockArnIIe
• tomboa
• lukewilde
• domharrington
• rnoake

Live Feed

*A few notable tweets and a dump of data from the talks (to be formatted and summarised later!):

16:50 - Now the final talk, but this one is a panel session about 'PHP at scale' with Ian, Nikolay, Rasmus and Hugh Williams

This is going to be fast, so I'll summarise later!

Update: The panel had some great discussions and answered as much as they could. Topics included:

• Scaling a team
• Scale becomes an architecture question not a language one
• Don't just throw encrypted data at new cookies, avoiding session issues won't last long using a cookie method
• Most startups don't need to worry, there aren't that many Facebooks in the world, you can tackle it later.

16:00 - Teaching your machine to find fraudsters by Ian Barber

Ian starts with "Fraud is a big problem"

Some small numbers:

.1% a large retailer can expect to be fraudulent, 8% is the level of "Suspected" fraud.

If we had a 99% successful fraud system, we'd likely be 90% wrong on the suspected frauds.

Can already see that Ian is a great speaker, good pace and great content.

Tweet by @carshann - "Fraud Prevention/Detection talk the most solid and informative I've seen all day. Recommended! #phpuk2012 https://joind.in/4949"

Detection techniques

• Anomaly Detection (using standard deviation and historical data window to detect anomalies - need to factor in other factors "Sickness Availability")
• Building scores on details (email address vs name, geo-ip of billing vs shipping, re-sale value of item, card to addresses, previous purchase data)
• SVM (Support Vector Machines)

Really enjoyed listening to Ian, he made great sense and gave good insight, not sure how to use the info immediately, but when dealing with eCommerce the lessons shown will be really valuable, and I am confident the abstract ideas can be used in other areas.

The last three talks have been well structured and kept good pace.

14:50 - Distribute the Workload by Helgi Þorbjörnsson

Helgi promises to lead us through the world of distributed systems and scalability and how to counter a sudden rush of popularity.

Refreshing start by Hegli! Starts with humor... then straight into the meat: Why Distribute?

Answer.. Efficiency, Budget and Perception.

10 small servers > 1 big server Google and Amazon have throw away boxes. Commodity hardware.

Flickr is a good example of Perception, the service gives instant feedback and "Defers intensive processes" - Users can basically keep browsing whilst lots and lots of small servers handle the requests. Ants work exactly like this, natures perfect example of distributed systems working together to achieve a common goal.

Helgi moves onto

• Decoupling (Twitter has API issues, ok lets add a new API box as the rest of the application is running fine - decoupling logic and sections helps when scaling)
• Elasticity, Load balancing (using low TTL on DNS to remove some single point of failure issues).

We get into a Q&A about if the Load Balancer becomes the machine that you have to beef up? Simple answer yes, but load balancers are just passing data rather than processing so it isn't so much of an issue. Also someone points out that TTL's aren't always observed by ISP's so a better mechanism is Virtual IPs.

Monitoring becomes very important, as how do you know when and what to scale. Also Keeping records means you can look at trends and counter them.

Being able to monitor real-time and then using elasticity, adding and removing servers, becomes and really nice model to allow the system to become self-aware.

Helgi starts to discuss Skynet and I wonder if the "Singularity" discussion might ensue, it doesn't which is likely a good thing. Ray Kuzweil fans/critics might be sat in the conf!

Great talk by Helgi and nicely light hearted. Good speaker and handled the questions well.

13:55 - Waiting with anticipation for "To a thousand servers and beyond" by Nikolay Bachiyski

Nikolay is a long-time Wordpress contributor and will be discussing scaling a massive PHP application. Apparently he has a bear, or so it says in his bio!

Nikolay has seen Wordpress scale from 65million to 800million requests per month.

Nikolay starts with a funny story about a pig that deheads beers, and works out that understanding how foam is generated helps him with his job

The moral is... Get to know the abstraction below

One of the abstractions we face is the servers, if a site has a single server and it dies, we have a problem - we add multiple web-servers and so we add a load balancer, and the problem eventually moves somewhere else (db servers).

What happens when the data is too big for the Database? We partition the data. (which likely means no sql joins!)

HyperDB allows us to solve the issue that we don't know where to send the sql query, by using parameters to state the partition type (e.g please use the 'User' table please). HyperDB also handles failover, replication lag etc.

Next issues are load, servers bringing down database servers etc, so WordPress add caching (e.g memcache).

Ok, so Nikolay starts talking about bigger issues, imagine the servers are in a single data-centre... if the DC fails we have another "Single point of Failure" We can add more DC's and it will help, but caching becomes a problem (how do we stop the stale of cache across DC's)?

Nikolay also cites deployment as an interesting element when dealing with multiple DC's. WP commit changes approx 100 times a day, by commiting they deploy to a 1000 servers and so the commit button becomes the "button of doom!" and they have made it super fast (8 seconds).

Users don't care about commits, they just want "Publish Immediately" to mean exactly that; immediately!

But that means sorting spam, indexing, quickly, and it was slow, so WP employed AJAX to handle post-processing. And it turns out async jobs become very, very useful.

php -S

//Check if we're using cli-server
if (PHP_SAPI == 'cli-server') {

Without versionator this is what can happen:

You set your static content to be cached and expire in 30 days time.

 express.static(__dirname + '/public', { maxAge: 2592000000 })

Installation

  npm install versionator

Usage

Basic Middleware

app.version = '0.1.0';
var basic = require('versionator').createBasic(app.version);

app.configure(function() {

app.use(basic.middleware('v' + app.version))
  ....
  .use(express.static(__dirname + '/public', { maxAge: 2592000000 }));

});

public/js/app.js

HTML

  <script src='/js/v0.1.0/app.js' />

app.configure(function() {

// This exposes the helper to the views
  app.helpers({
    versionPath: basic.versionPath
  });

});

Jade

  script(src=versionPath(/js/app.js))

Middleware

 req.url = '/js/v0.1.0/app.js'

 req.url = '/js/app.js'

Mapped Middleware

versionator.createMapFromPath(__dirname + '/public', function(error, staticFileMap) {

var mappedVersion = versionator.createMapped(staticFileMap);

app.configure(function(){

// This exposes the helper to the views
    app.helpers({
      versionPath: mappedVersion.versionPath
    });

app
      .set('views', __dirname + '/views')
      .set('view engine', 'jade')
      .use(express.bodyParser())
      .use(express.methodOverride())
      .use(mappedVersion.middleware)
      ....
  });

....
});

Live map updates

    var mappedVersion = versionator.createMapped(originalFileMap);
    ...
    // modify resource files. put full file path(s) in a list.

versionator.createMapFromPath(__dirname + '/public',  {'fileList': fileList}, function(error, modifiedFileMap) {
        mappedVersion.modifyMap(modifiedFileMap);
    )};

// send new hashed path to client
    hashedpath = mappedVersion.versionPath(path)
    ...

Versionator on github: https://github.com/serby/versionator

To date we have been running our node sites out of the Upstart system in Ubuntu Linux, and are using one upstart script per site.  With a server running several sites, this would translate to a lot of these scripts, all pretty much identical apart from some variables.

My solution to this is as follows....

First of all, there are a few dependencies to mention.

• The first is that we are dependent on Upstart.  Other than Ubuntu, there are a few recent distributions that also use the system.  Redhat Enterprise 6 and Fedora 6 are listed as supporting it on the wikipedia page for Upstart.
• The next is of course Node.js.  This method could however be transferable to other services that run lots of individual instances.
• Lastly, we need a way of maintaining the right version of node for each instance, and we use n (npm install -g n) for this purpose.

The solution comes in two parts.  One upstart script to start each node instance, the second to start them all on boot.

Part One: node.conf

description 'node upstart script'
author 'iain'

start on (local-filesystems and net-device-up)
stop on shutdown

instance "Node - $NAME"

respawn
respawn limit 5 60

script
        . /etc/node/$NAME.conf
        exec sudo -u node NODE_ENV=${NODE_ENV} /usr/bin/n use ${NODE_VERSION} ${NODE_PATH} >> ${LOG_PATH} 2>&1
end script

NODE_VERSION="0.6.5"
NODE_PATH="/var/application/test/app.js"
LOG_PATH="/var/log/node/test.log"
NODE_ENV="production"

# start node NAME=test-production

# start node NAME=test-production
node (Node - test-production) start/running, process 1562

description 'Start all node instances at boot'
author 'iain'

start on (local-filesystems and net-device-up)

task

script
  for file in `ls /etc/node/*.conf` ; do
    filename=`basename ${file%.*}`
    start node NAME=$filename
  done
end script

As you can see, this script will cycle through all config files in /etc/node and start a node instance for each based on the name of the file (minus path and extension for those unfamiliar with the `basename ${file%.*}` line).

The key thing to mention about this script is the task keyword.  It is this that makes this upstart script a short lived process - it does its thing then dies off.

More information on the technologies mentioned can be found at....

NodeJS - http://nodejs.org

NPM module n by TJ Holowaychuk - http://github.com/visionmedia/n

Upstart Cookbook - http://upstart.ubuntu.com/cookbook

Ubuntu - http://ubuntu.com

Bash Manual - http://www.gnu.org/software/bash/manual/bashref.html

I noticed the issue on a virtual machine running Ubuntu Server, however, other systems vary and output slightly different key codes (i.e, ';5D' and '^[[5D') if so, you'll have to adjust the commands below to suit the output you're seeing.

If you're affected by the above example you'll likely need to amend the skip word forward behaviour as well. To amend these issues, append the following to your .zshrc (located at /home/{username}/.zshrc):

bindkey '5D' emacs-backward-word
bindkey '5C' emacs-forward-word

export WORDCHARS=''

Having more issues with key bindings? See the Zsh website for more information.

I ended up using Chrome for longer than I intended and with good reason, I found it to be the best browser I had used. Previously I was an adherent Firefox fan.

So, how does Opera fare? With more than 220 million users worldwide - surely pretty good?

On installing it and firing it up I was immediately loving some* of the things I could see straight away:

Turbo? Faster on slow connections? You've got my interest.

I could already see that it was lightening quick to load pages, I don't have the stats to hand but I already knew, from the articles that spawned my interest in the different browser nuances, of Opera's reputation at being a speed freak - and it is true - it is super quick. So what was all this talk of Turbo?

Their blurb sums it up, and I can't argue with that - great thinking:

How we squeeze out all that speed When Opera Turbo is enabled, webpages are compressed via Opera's servers so that they use much less data than the originals. This means that there is less to download, so you can see your webpages more quickly. Enabling Opera Turbo is as simple as clicking the Opera Turbo icon at the bottom-left of the Opera browser window. When you are on a fast connection again and Opera Turbo is not needed, the Opera browser will automatically disable it.

Quick search parameters by default... Like it a lot

Clock's CTO has always taught me that the best thing to do when getting new software is to look at every menu and advanced option before using - it is a great tip, it teaches you immediately the flexibility and features that you might not otherwise appreciate.

I love using Alfred as my override for "Spotlight Search" and have always loved the ability to custom create my own shortcuts (does have its disadvantages when using other people's machines though), so when I saw that Opera comes bundled with some pre-installed Search Keywords and ability to do my own, it made me smile.

Add-ons, Extensions.. what ever you want to call them!

Asking around the office no-one uses Opera as their default browser, so I didn't have a head start of knowing which add-ons to install (like I did with the switch to Chrome). I'll be trialling these add-ons, if you happen to be an Opera user and know of decent add-ons please let me know in the comments section

• Snap Links - Select an area containing links and have them open all at once.
• YSlow - YSlow analyses web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
• The Developer Briefcase - Various tools to help web developers and designers.
• HTML Color Coder - Colour picker

Again I got myself acquainted with the inspector, seems as good as Chrome's - but not put it to any mean tests yet.

And now for some Negatives:

Why is Chrome not on the import list? 

I ended up having to look for a tutorial to do this, that is not ideal ... I really don't get why Chrome is missing from the list.. definitely not as good as Chromes import (for my use case)

I prefer Chrome page search

Whilst Opera's page search is pretty good - it lacks one thing that Chrome has managed... to show the rest of the results on the scrollbar. Not a major flaw but I still enjoyed using Chrome's page search more.

Is bing really the default SE?

I'm likely criticising without knowing full detail, but is the default search engine really bing? I hope it would have asked me on install or rotated through them by default. Anyway, at least I could delete it and use my personal favourite.. Google!

I want to be able to re-open closed tabs

Sometimes through a mistake or just wanting to pull up a previously read web-page, I can close a tab and want to quickly re-open the tab. Chrome & Firefox (through TabMixPlus) lets me do it, why can't Opera? certainly wasn't there as a menu option.. I enjoy this feature from Chrome and I don't want to have to hunt for an extension

--UPDATE 9/01/12

This was unfair, as pointed out by a couple of colleagues - Opera has a closed tab option that shows closed pages (and you can also use the shortcut cmd+shift+t to reopen closed tab)

Overall

I have only been using it a few days, I'll be sure to detail more once I have given it a good go, then it is decision time:

Chrome, Firefox or Opera as my default browser... sorry IE, I just can't bring myself to even try!

The ‘Secret Santa’s Tombola’, is a new free iPhone web app from digital agency Clock Limited to help you find that perfect Secret Santa gift.

The Secret Santa app, developed in-house at Clock, guides you through various choices about the recipient before helping you find them the perfect gift, all of which were hand-picked by the Clock team and available to purchase through Amazon.

Clock was founded with a loan from The Prince's Trust and all Amazon's referral fees from the Secret Santa iPhone app will be donated straight back to the charity. HO! HO! HO!

Simply give it a go here www.secretsanta.me

Have a brilliant Christmas and a Happy New Year!

How did it start?

So lately, the world of gaming has started to spill out from the realm of hardcore gamers to, well... the realm of everyone else; those we call 'casual gamers'. In a similar fashion, the concept of 'instant rewards' that are found in games has also begun spilling over it's boundaries and into the 'real world', becoming  an incentive concept for actual life tasks. This movement is known as gamification. But where does this all come from?

Back in the day a company called Blizzard create a game called Diablo. It became huge and the reason for this was a very simple mechanic. You run around the game killing things and getting rewards for it. The more things that you killed, the more rewards you got and the more 'badass' the thing you killed, the better the class of reward you got. So gamers that played Diablo got addicted to the concept of running around a magical world, killing things and completing quests just to see what reward you could get next. Pretty simple really; dangle a carrot, perform a task, win the carrot.

As the science of Pavlov's experiments demonstrates, any creature can be conditioned to repeat set tasks to deliver set reward, including humans. Thus game mechanics in real life, outside of games, relies on providing people groups such as consumers, employees and managers instant rewards for tasks accomplished on a scale of economics that allots you more each time the more you do - creating a meritocracy with instant rewards as opposed to deferred rewards and doing it all in a fun, competitive and driven manner.

Confused? And so you should be! Bring on the infographic.

[caption id="attachment_1271" align="alignleft" width="300" caption="Gamification in stick figures"][/caption]

What is changing?

The introduction of game mechanics and the wide appeal it has to a large following of adults is introducing radical changes in the way we approach company tasks and the way in which employee rewards are being considered for the next generation of adults. Instead of spending 10 years in a company for a meagre share offering as a reward for all your hard work, companies are introducing fast turnaround rewards for its employees and its customers that allow them to reap proportional rewards quickly - for results achieved or goods and services bought. Genius. Because as we know, man is not a patient species nor does it plan for its future. The here and now is the way to go when incentivising a person to get anything done.

Therefore, the trick is to also do this publicly. Not only do you incentivise people for fast returns but you also introduce a competitive edge to the performance by comparing your results with your co-workers or other consumers creating the drive to be better than the next guy. Now we know humans like being better than the next guy - so this is a no brainer. Nothing like a bit of friendly public humiliation to get those slackers to perform better.

So lets take an example of how this is working for one of our clients (who will remain unnamed for a variety of reasons).

The Problem:

The company, a traditional business, was having difficulty motivating its' managers to use Facebook. Nothing worked, not even training.

The Solution:

We created a tool that allowed the parent company to create an aggregated list of the best performing managers, based on posts made, images uploaded and comments made to each of their corporate Facebook pages. That list was circulated among the managers, publicly showcasing the top performers and the poor performers.

How it worked out:

With the added incentive of wanting to 'beat' their fellow managers in this ficticous ladder of competition, the stage was set for the low performing managers to find ways to improve their ranking so they were rewarded better and looked better in the eyes of their peers.

The role of agencies in driving game-to-ROI value

Agencies play a vital role in bringing great user experiences and strategies to companies. The trick is to ensure that the 'gamified' strategy delivers a real return to the customer. But how do you approach this?

Discover the business value

Never rush into a social strategy. Stop and think - what is it that the client needs? Where will he get value? There are both soft values and hard values to consider and your strategy for a gamified social experience should include both. Engage the viewer with fun and deliver a result that has real value to that company.

Find the lever

In every successful game franchise in history there is a lever, a hook, that keeps people coming back to it. Discover what that lever is for your client's audience. Naturally, you can't start your execution until you know exactly what this is.

Don't forget the fun factor

Games are fun. So should your gamified strategy be. Engage the user with visual splendour, a competitive factor and a measurable fast return.

Let's take a look at a prototype idea for a gamified concept developed by a research group at MiT.

The team was attempting to harness the appeal of massive multiplayer gaming to obtain ideas about solving the energy problem. If we run out of fuel what will we do? To answer this they created an open-ended world where players played as corporations and has access to all the natural resources that currently exist on the planet in some form. Then they challenged the players to create viable company models within the fictive economy to see what the thousands of people playing the game would come up with regarding commercially viable strategies for alternative energy sources. So not far off a larger version of Sim City but with a micro managed economy under the players control.

This game utilised modern gaming graphics and engines together with the collective thinking power of thousands of gamers to see if a viable method of having a replenishable energy could be commercially utilised in a controlled economic environment. This exercise at MiT did not yield the solution to our energy crisis. However, it certainly is one of the best examples of advanced gaming technology and mass collective problem solving that I have found to date.

Do you know of any good gamified examples? Post below in the comments and let us know!

The above is a question. Not a dramatic question just yet. It doesn't have any context, no real point, no drama. But we can work on that.

Yesterday I was watching the BBC documentary "Inside Facebook", featured in it was a short interview with the ever elusive Mark Zuckerberg. Other people were also interviewed, mostly people I had never heard of but one particular interview was with a CEO of an agency that helped his clients with Facebook advertising; the interview discussed the new 'sponsored story' implemented on Facebook.

For those that don't know, Facebook recently introduced advertisements into their timeline. In order to fool us into thinking they were not advertising, they called them "stories". Then they take advertisements on Facebook that you have LIKE'd and show those advertisements in your friend's timeline - and dub them "sponsored stories". Sponsored by you - because you LIKE'd them. Now to ask the all important question...

Where is my money?

The guy being interviewed was saying that implicitly by LIKE-ing something on the Facebook platform you are endorsing it and that made it OK for Facebook to advertise that to your friends and charge a company to make that happen. The BBC reporter asked 'why is my LIKE showing up as an advert?' Just because I like something does not mean I am advertising it does it? This was the wrong question. The right question is:

Where is my money?

The right question has been asked before by pundits, internet experts, news casters, reporters and many others. The reasoning behind the question is this:

I am endorsing things that charge money from advertisers to be shown to my friends and the content on Facebook exists purely because us, the users, are present online and are uploading content -  then should we not be getting a cut?

Once again...

Where is my money?

Can you see where I'm heading with this?

Before we jump to the conclusion that a billion dollar corporation owes us money because they are using our content, let's take a look at a precedent. YouTube started sharing revenue from its adverts with content creators a long time ago. And they reward channel uploaders for acquiring followers, for uploading content and for distributing their content. So why doesn't Facebook pay me for my content if its making money from it? Hold on to your hats ... in the midst of this analysis the question has suddenly changed. It is now this.

Should I be making money?

And now for some light number tossing...

Facebook has 500 million users. It exists because of its users and because of the content that we upload. Content that the users own and content that the users create. Facebook is about to go public at a valuation of $10BN (or £6.3BN), with ad revenues of over $1.8BN in 2010; for argument's sake so let's call that  a cool $2BN for 2011. Bring on the equation!

Direct value of a Facebook user >> $ 10 000 000 000 / 500 000 000 users = $20 / user (...we ain't that valuable)

Income to Facebook per user >> $2 000 000 000 / 500 000 000 users = $4 / user / year (...a revenue share of that would be negligible)

So there we have it. On our own, each user is actually not worth much at all. We only matter as a collective. The value we get off of Facebook is not, and never will be, monetary as a user - it is about sharing and the need to share.

For Facebook to exploit that volume of users to engage in a commercial enterprise with our data to make money is a fair capitalist exchange of a service for wealth generated from it - the wealth is just coming from someone other than us. So we can all relax, as can the press, the pundits, the internet experts, the news casters and the reporters... it turns out... Facebook doesn't owe any of us any money as in actual fact...

There is no question.

Choosing to use a minimalist development environment is invariably going to bring about some limitations, of these I find the most noticeable to be the lack of debugging tools. While I will suggest some means to allow you to receive trace statements to debug your application, if you're developing large and complex applications you may want to consider some other free alternatives: Flash Develop.

Download Flash Compiler and .swf viewing Software

If you don't have any kind of flash authoring environment installed, you're going to need to download some software:

• A version of the Flex SDK is needed to compile your application (Version: if you're not sure, the Adobe Flex SDK is likely to be appropriate)
• You'll probably want an SWF debug projector to enable you to run your SWF's on the desktop and provide stack trace output.
• Additionally one of the Plugin content debuggers will be useful for access stack traces in the browser.

You'll notice that the first two of these applications don't come with any kind of installer, it's up to you where you want them, (as a Windows 7 user) I extracted them both into C:\Program Files (x86)\Flex SDK\

Configuring MXMLC as a Build System in Sublime Text 2

Now you've got your Flex SDK extracted you'll want to set it as what's known in Sublime Text as a build system.

In Sublime's menu, access: Tools > Build System > New Build System…

Replace the default build script with the following:

{
	"cmd": [
		"C:\\Program Files (x86)\\Flex SDK\\bin\\mxmlc.exe",
		//"-o", "${project_base_name}.swf",
		"${file}"
	],
	"selector": "source.actionscript"
}

Sublime's Build System Notes

Hello World

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	// import flash.external.ExternalInterface;

public class HelloWorld extends Sprite {

public function HelloWorld () {

// ExternalInterface.call("console.log('ding')");
			var mytextfield:TextField = new TextField();
			mytextfield.text = "Hello World!";
			addChild(mytextfield);
		}
	}
}

Debugging Your Flash Applications in a JavaScript Console

Now we've cut the Flash IDE out of the equation, you've actually lost your Flash console meaning your trace() statements aren't going to get shown anywhere, even the flash player debuggers can only output stack traces. The most suitable way I found to output debugging information was by embedding my .swf in a webpage and outputting data to the browsers console. By utilising Flash's ExternalInterface class you're able to invoke javascript functions, more specifically in Firefox the FireBug console, or Chrome's native javascript console.

After importing the class into your application you can simply call the console like so: ExternalInterface.call("console.log('ding')");

This does, however, rely on the fact that you're running your SWF in a browser and importantly that your console is loaded before you call it (Embedding using SWFObject will help avoid errors relating to this).

If you're Debugging needs go very far beyond this, then its probably time to install a more integrated development environment with native debugging and profiling support.

Refrences and Recommended IDE's

• http://sublimetext.info/docs/en/reference/build_systems.html - Sublimes Build Properties
• http://www.arulraj.net/2010/08/flash-player-debugger-in-ubuntu.html - Installing the Plugin content debugger on Ubuntu
• http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page - Flash Develop IDE
• http://fdt.powerflasher.com/ - FDT, Eclipse based IDE

So, I made the leap from my trusty Firefox to Google Chrome, and it was a lot easier and efficient than the last time I tried it.

I used the handy 'Import Bookmarks and Settings' menu option and it pulled my stuff across pretty quickly, it did lose my bookmarked rss feeds - but I can live with that, took a few minutes to grab them again.

Next task was to make Chrome my default browser, which is simple enough (menu option within preferences).

The next thing I wanted to do was grab the same extensions other Clock Chrome users found useful:

• Chrome Sniffer 0.2.11 - Detect web applications and javascript libraries run on browsing website
• REST Console 4.0.2 - REST Console is an HTTP Request Visualizer and Constructor tool, helps developers build, debug and test RESTful APIs.
• Web Developer 0.3.1 - Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

I also got myself familiar with the inspector, the replacement for Firebug and found that it was not nearly as memory hungry.

Tab Mix Plus for Firefox is a fantastic plug-in, and despite a good 15-20 minutes scouring the web, nothing is seemingly comparable on the Chrome extensions webstore. TMP allows a user to open new tabs whenever a bookmark, url or specific content is clicked/used. It does much, much more and is highly configurable - and my first few days using Chrome meant that my navigation of webpages was a bit clunky. I'd become lazy with TMP and now I'd have to remember to click 'cmd+t' to open a new tab each time.

If you are a Firefox user, I highly recommend Tab Mix Plus - tabbed browsing with a boost.

Now everything was set-up, I was ready to see the benefits.. and there are plenty.

Speedy

I love the speed of page rendering, especially given that when you type in the address bar (omnibox) it shows you the page you are about to navigate to. It didn't feel natural at first, as I just wasn't used to it - but I soon realised the advantages of it.

Clean

I was again impressed with how clean the browser felt, not vying for screen space. The menu options are clear and to the point.

Sturdy

In the last 3 weeks that I have been using it, it hasn't crashed once. I do tend to overload with tabs - and Firefox has certainly taken issue with me for that approach in the past - occasionally crashing the entire browser.

Features

I love the fact that page search highlights on the scrollbar, very handy and I've not seen this on any other browser.

Overall

There are more and more features that I am discovering each day. So far very impressed, I'll give it another month and then trial Opera and detail the results.

Whereas G+ Profiles was purely aimed at connecting people, it now empowers everyone from local businesses to global brands to build your online relations with G+ Pages.

Using the same style and layout as your Google+ Profiles, your Page is almost the same except for a small square icon next to your company's name which denotes you're on a page, not a profile. See our page for example.

Firstly, you're going to need a Google Account. If you don't have one yet, create an account through this link.

Once your set-up there, you can head over to plus.google.com/pages/create to get started.

Here you sign-in with your Google Account.



Punch in your Gender, Date of Birth yada-yada and you can upload your profile picture if you so wish, there is also another chance for that later on too so don't worry too much.

Remember you're still in your own profile; there are few differences between a Google+ Profile and a Google+ Page. Google+ pages can’t +1 other pages and unlike Facebook, it doesn’t support notifications. Also, Google+ Page admins can’t add people to circles until the page is added first or mentioned.

Anyway, next Google will check emails/networks for you to 'Add people you Know'. This IS important as later on sharing the page you create will come from these contacts, so when you go to share your new page, it will ask your profile account to send using your contacts. Clear as mud. But it's important, in a nutshell - your page is promoted via your profile.

We continue along and our next option is to 'Follow public posts from interesting and famous people', good to fill up the stream a bit -  give yourself a better feel for the platform.

SO - we're now on your rather bare looking profile, time to set-up a company page. (SEE IMAGE)

RIGHT, now on to the good stuff.

Here, you pick the category of your business - this bit you'll have to chose for yourself. As far as I can see your choice makes little difference but just helps Google get the options a bit more specific and categorise you a bit better (correct me if i'm wrong)...

For me and many of you, I'm going to go ahead and create a "Company, Institution or Organisation".

So, page name, your site, sector, age appropiate for... and tick boxes then 'Create'.

Now we have your tagline (10 words), here's some inspiration from other G+ Pages:

PEPSI - Pepsi and the evolution of digital consumer engagement TOYOTA - We will lead the way to the future of mobility VODAFONE - Power to You on Google+ too MASHABLE - The latest in digital, social media, business, tech, entertainment and mobile news

Lovely. Now time for your profile picture.

Dimenions for profile pictures are largest at:

200 x 200px (Main profile picture - and below is a rather fantastic example)

As normal, this will be shrunk to 48 x 48px for use around the site.

Google does also throw in a chance for you to get creative and utilise the top 5 banner pictures.

They are at 150 x 150px and can be used quite ingeniusly. Haven't spotted anything game-changing as yet (so please post if you do see and will update) But for now, an average example of creativity, check out Toyota's new page and you'll see what I mean.

INTERESTINGLY, a trend already emerging appears to be a call-to-arms, "Add us to your circle" text (like we've done) and sometimes Google circle icons. Check out our Clock page and also T-Mobiles page for examples.

Finish up here and we're all good to go.

As Google will politely tell you, top-right drop down switches between page and profile much like the Facebook interface. (Also here to manage other Page accounts)

What is great about setting up your page is that G+ provides you with great tools to get promoting. From G+ icons for your site, to your public profile link everythings ready for you. [The +1 button is a really great one for SEO so I read...]

Wait, there's more

A 'cherry on the icing' for page admins is a new feature that more are beginning to learn and love, and that is the Google+ Direct Connect feature. This allows a direct link to your Google+ page (and even add that page to your circles) through Google Search itself. For example, if you searched for the query '+youtube' or '+pepsi,' you could be immediately taken to the YouTube Google+ page, or the Pepsi Google+ page, and given the option to add the page to your circles.

[VIDEO] Google+: Direct Connect

A final innovative feature of Google+ Pages is that you can create circles which can then be selected as the viewers of a particular post. At the moment, G+ provides ready-made circles with the titles 'VIPs', 'Customers', and 'Team members'. Naturally, this leads to a comparison with Facebook pages - so here are a few differences:

[As noted on Crazyengineers.com]

1. Followers can’t post directly to the wall of a Google+ Page. 2. If a follower mentions a page in his/her update, it wont be updated on the Google+ page. 3. Followers can not start discussions, the way they do on Facebook pages 4. Google+ Page has no facility right now for a separate landing page that appeals users to add them to their circles.

So

That should be more than enough to get you up and running, so have fun and knock yourself out. Always on the look-out for inspiration/creativity be it images or stories so comment below and I'll be dropping the best examples in.

RIGHT NOW: I'm just finishing the final touches to Clock's Google+ Page, have a look how I'm doing.

Like a lot of people I suspect, I have pretty much stuck with the same browser for a number of years; that browser being Mozilla Firefox. On occasion, I have trialled both Opera and Chrome at various points, but never really gave either of them a real chance as I always had my trusty FF to revert back to.

[Although interestingly, as an Iphone user I have remained with Safari for all my mobile browsing needs, simply because I have never really had the need to switch.]

After a few "heated" discussions in the office regarding browser of choice, it became very clear that techies hold their browser choice dearly and will argue the merits of their personal set-up until every aspect has been fully exhausted.

And this is what has got me thinking... if people really will argue the merits of other browsers so passionately, perhaps I am being too stubborn. Or perhaps it's just laziness?

Perhaps I should really give the other browsers a fair shot. To date, my excuses tend to be my beloved extensions that I have come to love and fear life without, namely; Firebug, Web Developer Toolbar and Screengrab - all of which, have been too good to sacrifice.

Admittedly, Chrome has very similar extensions now - and quite likely, more that I haven't even tried.

I guess I have always felt safe in the gold Fox's hands, but I admit that such loyalty has meant that I have missed out on the wide and varied browser experiences available; after all, variety is the spice of life!

Now, I believe that more than ever and I'm ready to embrace the other tools out there...

I am lucky enough that Clock has purchased me a brand spanking new MacBook Air (see 'Tools for the Job' section on Kos' blog post "The Web Agency Boilerplate") and I really have reaped the rewards, having previously spent 15+ years of my life on Windows/PC set-up, I absolute adore my laptop - it has forced me to question my original working practices and social use of the computer.

Thus, I fundamentally believe that my perfect browser would be a pure mix of all the browsers, therefore giving me the following benefits:

• Speed (Opera as per the Lifehacker article)
• Safety (Never knowingly compromised on any of them)
• Add ons (Firefox and Chrome win for me)
• Menu layout (all fine except IE)
• Look and feel (Chrome and Firefox win for me)

Menu layout seems an odd criteria choice you might think - but I often find myself wanting to be able to guess where the menu options will be, and to be able to get it right within a few clicks. IE's menu layout has always infuriated me, not always finding the advanced option within a few guesses. It sounds petty, but when you spend your life on a browser these small things become big time wasters.

With this article in mind, I am going to try switching to Chrome for a month, then Opera and see/document what I find out.

Let me know your favourite browser is and why...And stay tuned to find out how I get on!

It is a 6 monthly prize allocation system, and the prizes are worked out via the following metric:

The most popular blog post (by unique views for each month) gets 5 points, the second most popular gets 3 points and the third 1 point.

The blog post can only claim points for one month, so if it starts life in the first month in third place but gets increasingly popular as the months go by - unfortunatelty it will only get the solitary point. We decided upon this rule as otherwise very popular posts would take the points each month and it would result in people thinking they cannot compete - we want to incentivise blogging.

and so, the prizes

After 6 months, the points are tallied, and in the monthly company meeting the prizes are allocated as follows:

• The author with the most points gets £250
• 2nd: £200
• 3rd: £150
• 4th: Bottle of wine (choice of red or white)
• 5th: Bottle of wine

If multiple people have the same number of points, the prize is split accordingly... except the wine of course, which will simply result in more bottles of wine being handed out.

Tactics may vary, so the winner come the end of February could be someone that simply posted 2 or 3 very popular posts or it could be someone that posts every month but isn't quite seeding the posts in the right manner or perhaps leaving the marketing of the post as an organic process.

Do you have your own scheme? We'd love to hear what you think of ours..

"We're interviewing for a front-end developer this week and [not being a front-ender] I was wondering if you could give me some tips on what topics we should cover?"

Not a problem at all, I said. Having recently been interviewing for similar positions here at Clock I knew what I would look for so it was no trouble in the slightest.

Afterwards it became apparent that there's not actually that much out there to help in these situations, so he suggested I write something for other people in the same situation. When I got a spare few minutes I did just that...

First and foremost you want to look for someone who is enthusiastic about what they do. Of course their knowledge is important but you get a real sense of how good and motivated someone is by the manner in which they talk about their profession. It's important that they'll fit into your team, and (depending on the level you are looking for) bring extra knowledge and energy to the workplace.

Next up it's always good to see how up-to-date their knowledge is of the front-end world. I think we can all agree the industry moves forward at a considerable rate, so it's always good to get their opinion on the state of things like HTML5, CSS3 and any latest additions there might be to the working specification drafts. Also, it's no good asking questions like 'are you familiar with HTML5?' - that's a question anyone can say yes to. You need to delve a bit deeper, ask questions that require them to show a bit of knowledge, like 'what's your favourite aspect of HTML5?' - that's a question they actually have to answer.

It's always great if they can show you some work and describe what they did on it. Make sure you keep the links so you can have a look back at the code quality and structure later on. If they can't demonstrate any latest techniques such as responsive / adaptive design, then cover topics like Media Queries and how to use them, how they go about establishing suitable break-points for different screen sizes, and try and get a sense of their general opinion on cross-platform production. What can they tell you about different mobile frameworks (jQuery Mobile, JQ Touch, Kendo UI, Spine Mobile to name a few) as well? If familiar with them, what do they think are the benefits and pitfalls within the products? This level of mobile development may not be directly applicable to the position but it's always good to get a specific idea of their knowledge and passion - and who knows, they might even bring something new and unexpected to your team.

Unfortunately the age-old issue of IE6 still exists. Some people choose not to support it any more - unfortunately some of our biggest clients still wish to continue support, so it's something we have to provide for. Even if you're lucky enough not to though, ask how your applicant would cater for older browsers. It's another question that they need to show opinion on, and it's great to hear a solution that includes JavaScript failover, or doesn't rely on JS in order to work best. The better someone is, the more they'll know about these topics, and the more they can talk about solving these problems the more they're selling themselves to you.

I personally enjoy it when someone starts talking about progressive enhancement as it then helps the conversation flow nicely into subjects like the browser market, to what extent they embellish products with CSS3, what browser tools they like to use, which is their browser of choice, and why.

Discussion that revolves around browsers means you can easily talk about HTML5 compatibility. Similar to when talking about IE6 support, how would the applicant get older browsers to cater for HTML5? There are a couple of different options out there - Paul Irish's HTML5 Boilerplate being a great example of a thorough, well-produced template for this kind of development. One thing I particularly like about the Boilerplate is the fantastic description of what's in there, and why. Anyone who talks me through the inner-workings of something like this, stands a great chance of getting the job.

The Boilerplate's developed on GitHub, which brings us to version control. Social coding and code control is another topic that is great for a potential employee to talk about - any knowledge about subversion or Git means that they know the importance of having continual, stable development stages that you can roll back to should it be needed. The benefits of branching a project and when it's appropriate, merging and resolving conflicts - the more they can talk about this subject matter, the better it is all round.

All this and not even a real mention of JavaScript yet. These days most applicants I meet tend to use jQuery, which is fine. There are other libraries out there, and it's always interesting to hear why someone might use one over another, so that's another nice topic to cover. The more they can talk about writing their own JavaScript though, the better.

In the last few months we've been developing using Node.js, and one of its major benefits for front-end production is the utilisation of Jade and Stylus. Both are fantastic packages for writing efficient, well-organised and valid markup, which helps maintain high coding standards. I'm not going to go into everything they can do, but similar packages are available - and again it's great to compare the benefits of one over another - if they know more about Less or Sass, for example.

Now I'm not saying I would expect more junior applicants to know everything I've mentioned here, but I would want to see a passion for the industry, combined with sound knowledge of some of the more basic topics covered here. Obviously the higher up the position, the more I'd want demonstrated.

I hope that you've found the article helpful, and if there's anything you think I've missed then feel free to add a comments below.

I'd be very interested to hear what you have to say - good luck recruiting!

It did get me thinking though....who can we compare this man to? I then wondered if Bill Gates would get the same level of empathy and recognition?

I think we know the answer (a likely no maybe?), but I tried to understand why. His impact on how human-kind interacts with technology today is on a par (if not greater) than Steve Jobs. He may have 'copied' Steve Jobs with the concept of a desktop computer, but he managed to package the product and market it to the masses far more effectively (until very recently of course). Anyone can have an idea, its 'how you execute it' is something I read over-and-over again through the various start-up community material. Lest us not forget, The Bill Gates Foundation is the largest philanthropic organization in the world, donating a quite mind boggling amount of money to good causes every year. Warren Buffett (the richest man in the world) is due to give the majority of his fortune to the Foundation once he passes away. Bill Gates once again had to package something up, make it attractive and get buy in from people.

So in every way, it just doesn't make sense. The only conclusion I could make is this - PR. Our perception of Steve Jobs is vastly different to that of Bill Gates (greater good vs. capitalist I would say, I maybe wrong). This has mainly been driven by the advertising and messaging relating to the products we buy from his companies. Which takes me back to my first point - the culture he created within his company truly is greater than the sum of the parts in his products which is absolutely incredible. There's saying "It's not what you say, it's how you say it" and I think this applies here.

I'm sure this will divide opinion. Be interested to hear your thoughts - who has had the greatest impact on how we use technology today?

"If you can't explain it simply, you don't understand it well enough."

I was reading an article by Alberto Gutierrez on makinggoodsoftware.com and within the article he touches upon a technique that we *sometimes-but-not-often-enough* take.

He explains the 5 minute explanation test, as:

1. Grab a fellow programmer, who can spare some time, to review your code
2. Walk him through your code, just a high level introduction.
3. Ask him if he understood your code.

After following the 3 steps you can evaluate how readable your code is based on how much effort & time it took you to explain it. Alberto says:

"as a rule of thumb if it takes more than 5 minutes for the other programmer to have a high level idea of the design, assume that the code is not readable."

A good example of the 5 minute test often occurs when the code is broken and you seek help from colleagues (rather than presenting your most polished code). This can be a true test of your general coding style.

Conducting the approach does throw up some instant (and perhaps obvious) questions.

1. How much commenting is overkill?

2. Is the code complex for complex sake, or include tricks?

3. How much abbreviation should be allowed?

4. Does it follow a set standard

Of course the answer to these questions is debatable, and you will find many blog posts and articles arguing the detail.

For us, it comes down to common sense and common ground. If people disagree and it leads to debate amongst the tech team, then that is a good thing, and provided a consensus is met - then we have progressed. We may not have the golden bullet approach (does one exist?), but it should allow for people to pick up our code and get going without too much head scratching.

I don't want to preach in this post, as lord knows - I have written poor code in my past (you'd be a liar if you (are a programmer) said you hadn't). But I found a piece of freelancer code from a long, long time ago that allows me to tackle most of the above points.

/**

* Really sorry for this, I need to refactor it but I haven't got time now

**/

function reOptInCallBack($param) {

$urls = array(); //Create an empty array

for ($i = 1; $i <= 5; $i++) {  //Loop 5 times

$urls[] = $this->getCBUrls($param); //Get CB Urls to return

}

return $urls;

}

 

There are so many things wrong with this code that I am not going to be able to cover them all. In an attempt to relate them to the above questions I'd say the following:

The first comment explaining the function is simply ridiculous. I think I'd almost rather have no comment - as it simply infuriates, rather than puts the developer at ease, as an apology. If you don't have time, don't commit it. Or at the very least make some effort to explain what you intend to fix and change, so that I have something useful as a starting place.

The next comments are equally useless. Thanks for telling me what array() and "for" does! If I don't know the language constructs etc then I won't likely be trying to do something with it. If comments are necessary then tell me why the number 5 and why you have to loop, not how the code is doing it, but why.

The other comment (Get CB Urls to return) - this is just repeating the function call. In fact it gives me 0 extra information. I also detest of abbreviation like this. I can guess (although why should I have to?) that CB stands for CallBack as it is mentioned as the function name, but why not stay consistent and call it getCallBackUrls?

I have no idea what "re" does on reOptInCallBack, so maybe the chance to explain it would have been useful instead of the rubbish apology.

I could go on all day about how bad this code is. It has failed almost every question raised, the developer who wrote it certainly would have failed the 5 minute explanation test if they had run it by me (or any other self respecting coder).

The item that peeves me the most is the comments, and I think Ryan Campbell has a nice quote about commenting code:

"Commenting your code is like cleaning your bathroom—you never want to do it, but it really does create a more pleasant experience for you and your guests"

This bathroom in-particular was smelly, in need of refurbishment and broken!

I truly believe that if we all wrote code that considered future developers our solutions would be vastly more elegant and friendly.

Naturally, my first handful of tweets were shaky and this was demonstrated through my initial (and unfounded) ‘nice to meet you’ tweet to what turned out to be an ex-employee.

Lesson 1: don’t speak on behalf of your company, you’re only their voice.

So seeking assistance, I enlisted help from Clock’s friends over at Gloople (@Gloople) who have been doing fantastically from their online presence and social media use.

Their MD and co-founder, Warren Knight (@wvknight), let me sit in on a client demonstration so I could grasp the ‘end game’ of what their online marketing efforts would eventually lead towards. He then took me in to the conference room and unleashed a whirlwind of handouts, links, tips and secrets for becoming a great social-media marketeer.

Firstly, it became quite clear how important grasping the concept of social media is – which not everyone does. Utilised in the proper fashion, the online space can provide an opportunity to generate excitement, interest and ultimately; engagement. It’s that ‘online buzz’ that we’re striving for and the secrets lie somewhere between good monitoring, relevance, quality of content and knowledge of the industry in question.

So far all pretty obvious right? That’s what I thought - but the complicated part comes in bridging that gap between a Facebook ‘like’ or a retweet and recruiting a shiny, talented new web developer or attracting that all-important interest from a prospective client. In this respect, using social media in a professional capacity is comparable to incepting an idea; it’s putting yourself (your company) on show for the world; showing what excites you, what you’re up to and what interests you and ‘hoping’/dropping the right SEO keywords, to be found at the right times by the right people. Currently, there is an abundance of information about ‘how’ to twitter effectively and it seems that every average Joe and his dog has become an expert from just a year or so of experience. But the reality is that it’s such a fresh and rapidly evolving channel that there really are no professionals and physically can’t be for some years to come.

Nevertheless, there are those 'better' and those 'worse'; and my lesson was coming from a man with ten-thousand-something followers blowing my four-hundred-something out the water quite significantly. Crucially it became apparent that effective web monitoring is half the battle, the other half being publishing new tweets/posts/blogs that are vital to the maintenance of a healthy online profile. And this is what stumps a vast amount of users – what to say. Because posting doesn’t have to be what you had for breakfast, it can (and should) be used for initiating an age-old art; conversation.

For example, here at Clock we are establishing ourselves as a go-to agency for the new technology, Node.js, after our successful work for The Sun with Sunperks.com. So after promoting the link on the day of launch, the activity on our feed naturally died down. What’s important here is continuing the ‘buzz’ – so good monitoring of tweets mentioning ‘#node’ involved opening the floor for a polite introduction such as:

‘Hey – great to see you’re using #node too! We’ve just built Sunperks.com with it and are really pleased with the results. How are you finding it?’

Yes this response infringes on overly-friendly and treads on the tip toes of self-promo territory. But critically it achieves two things; it gets us out and about whilst initiating a relevant conversation in front of the world, an ‘in-it-to-win-it’ approach. Thus, if this technique is applied to monitoring and then escalating a handful of concepts we specialise in to a conversation, suddenly the workload increases tremendously.(Although naturally it’s important to bear in mind the balance between being courageously ‘in-it-to-win-it’ and annoying).

Overall, the introduction opened my eyes to aspects of social media I usually glaze over. It highlighted the importance of keeping organised with simple tools such as spreadsheets and weekly/monthly strategies to ensure you’re marketing with social media effectively. There is a lot that can be done in the social media world and it’s on the verge of its boom (if you argue it hasn’t already). So it’s an exciting time to push the boundaries and see what can happen, particularly as there are no experts.

Looking forward to hear your thoughts,

- Sam.

If it is the last commit this is very straight forward. Simply run:

git reset HEAD

This will pop off the latest commit but leave all of your changes to the files intact.

If you need to delete more than just the last commit there are two methods you can use. The first is using rebase this will allow you to remove one or more consecutive commits the other is cherry-pick which allows you to remove non consecutive commits.

Example git log

Using Rebase

Using the git log above we want to remove the following commits; 2 & 3 (ae45fab & 77b9b82). As they are consecutive commits we can use rebase.

git rebase --onto <branch name>~<first commit number to remove> <branch name>~<first commit to be kept> <branch name>

e.g to remove commits 2 & 3 above

git rebase --onto repair~3 repair~1 repair

Using Cherry Pick

Step 1: Find the commit before the commit you want to remove git log

Step 2: Checkout that commit git checkout <commit hash>

Step 3: Make a new branch using your current checkout commit git checkout -b <new branch>

Step 4: Now you need to add the commit after the removed commit git cherry-pick <commit hash>

Step 5: Now repeat Step 4 for all other commits you want to keep.

Step 6: Once all commits have been added to your new branch and have been commited. Check that everything is in the correct state and working as intended. Double check everything has been commited: git status

Step 7: Switch to your broken branch git checkout <broken branch>

Step 8: Now perform a hard reset on the broken branch to the commit prior to the one your want to remove git reset --hard <commit hash>

Step 9: Merge your fixed branch into this branch git merge <branch name>

Step 10: Push the merged changes back to origin. WARNING: This will overwrite the remote repo! git push --force origin <branch name>

You can do the process without creating a new branch by replacing Step 2 & 3 with Step 8 then not carry out Step 7 & 9.

Example

Say we want to remove commits 2 & 4 from the repo.

1. git checkout b3d92c5 Checkout the last usable commit.
2. git checkout -b repair Create a new branch to work on.
3. git cherry-pick 77b9b82 Run through commit 3.
4. git cherry-pick 2c6a45b Run through commit 1.
5. git checkout master Checkout master.
6. git reset --hard b3d92c5 Reset master to last usable commit.
7. git merge repair Merge our new branch onto master.
8. git push --hard origin master Push master to the remote repo.

Final note

Git rebase & cherrypick are dangerous but powerful solutions that should only be used as a last option and only be undertaken by someone who knows what they are doing.  Beware that both solutions could have adverse effects on other users who are working on the same repository / branch.

Finally remember to be careful and good luck!

Relying on others to know what is meant by 'staging version', 'live version', 'account section', 'sign-up' page is thwart with danger and room for misinterpretation.

Emails like this should be avoided:

Hi Jo

We've fixed the account page on testing. Can you check it for me?

Regards

Clocker

Hi Jo

We have added Age and Address to the Account page:

http://testing.dangler.com/account/

Please check and confirm you are happy.

Regards

Clocker

More on how to write better emails:

• 15 Tips for writing effective emails
• Closing Lines

Variable Envelope Return Path or "VERP" is a technique to enable automatic detection and removal of undeliverable e-mail addresses.

I have previously used email campaign software (mentioning no names) whereby VERP was not utilised.

Let me give you a scenario to highlight why you need to check VERP is being used..

Say you have a newsletter sign-up box on a site. 100 people sign-up but 99 of them are invalid; people move companies, change email addresses, give fake addresses etc all the time (especially if the email address is not validated). You create and send your email campaign (with a system not using VERP or equivalent) to the theoretical 100 people (actually only 1 person will ever receive it). That loyal user actually views/reads/clicks the email you sent - you check your campaign stats and it says your email campaign reach was 1% - very disappointing.

If the system used VERP that reach would be accurate and report a 100% reach.. as it has taken into account the Users that never existed (or no longer exist).

On top of this, the next time the campaign is sent, it will only send to the subscribed members (1 person) rather than not learning and resending to the 99 non-existent people.

It sounds obvious but not all email campaign web sites/tools use VERP.

So how does it work?

VERP works by using a different return path (also called "envelope sender") for each recipient of a message. If a *permanent* bounce is received by that unique return path then the system knows it can automatically un-subscribe that user from the list.

Note: It is important to distinguish a permanent bounce from a temporary bounce (out of office, over quota etc).

Example:

Email Sent:

Recipient: joe.bloggs@example.com Envelope Sender: 12345-joe.bloggs@example.com

Bounce Recieved:

Recipient: 12345-joe.bloggs@example.com Message: Example.com was not able to deliver this email as the recipient joe.bloggs@example.com does not exist.

[joe.bloggs@example.com is unsubscribed from mailing lists, and is no longer sent emails from said software]

At Clock we built an online email and SMS campaign website a number of years ago, called ClockUp and we made sure we utilised VERP from the very beginning, we realised during development that the stats we provided to our clients without using VERP would be very wrong.

There are a number of good email campaign sites out there; MailChimp, DotMailer, CampaignMonitor to name a few, I believe they use VERP (or a similar method).. whatever you use, it's worth checking.

I have learnt that despite limitations, you can actually achieve a fair amount during driving to and from work (or by train).

I found the best use of my time was split into the following sectors:

- Creative ideas

I would say that this was the easiest way to spend my time. Using the free uninterrupted time really allowed my creative juices to get flowing and come up various ideas.. some of which I hope to take forward and build upon (including an idea for my first iPhone/mobile App)

As a result of the things I have thought about, I have forced myself to learn how to:

• Produce and format a podcast suitable for iTunes
• Picked up and starting learning how to build apps via Appcelerator
• Enhance my knowledge (and use of) of Spreadsheets

- Experimentation

During my first few weeks trialling this new 'utilise my commuting time' experiment, I learnt an awful lot about which iPhone apps worked well and which weren't worth using (whilst driving).

Good apps: Voice memos  (really useful, but if like me - you hate the sound of your own voice, cringy to play-back!) iPadio (fantastic for recording phone calls and broadcasting) Skobbler Lite (a great, free alternative to paid sat navs - and even more promising is the 'Open Street Map' platform Skobbler is built on) TED (audio and video presentations on a variety of subjects)

Not so-great, apps:

Dragon Dictation and other voice dictation apps (not found anything useful yet)

- Extending the working day

You can achieve quite a lot of work when not distracted, and it is rare to find a time whereby you don't find yourself isolated with no-one in eyesight (like remote working from home can be) and yet able to achieve work tasks completely undisturbed (like scribing emails, making and receiving calls, ideas for projects/clients etc)

If you have a suggestion for how to best use commuting time, I'd love to hear it...

In the last few weeks, I have discovered:

• Learning #1 Just because a Google search doesn’t yield results after 10 or so searches, does not mean it doesn’t exist.
• Learning #2 Dragon Dictation is not adequate for writing emails.. must find other useful voice controlled apps.
• Learning #3 You might not succeed in the ventures you undertake, but as long as you take something from that experience, you'll have gained.
• Learning #4 Anything is possible, and whilst it may be unlikely that you'll know how far the idea will spread, you might be surprised (e.g Dave's street poetry and Custom t-shirt ideas)
• Learning #5 - You can use commuting time to track and record data using voice memos (it's rudimentary - but doable)
• Learning #6 - Self help tapes are perfect for commuting time - learning a new language would be a fantastic use of commuting time

This week I interviewed Clock's CEO Syd Nadim and this is what he had to say:

[audio src="http://blog.clock.co.uk/wp-content/uploads/2011/07/CommutingPodcast3-SydNadim_20110715080038.mp3"]

Alternatively, listen via ipadio or itunes:

http://www.ipadio.com/phlogs/RobArnold

http://itunes.apple.com/gb/podcast/commuting-podcast/id447751425

I really enjoyed what he had to say, and a completely different use of time from the other 2 interviewees; Dave Birss and Vincent Iweka.

Syd likes to use the time to catch up with phone calls to friends, and where possible watch TED videos on the train - as well as immersing himself in current affairs. I too love TED videos, and have previously listened to the audio tracks via my iphone. One annoying thing about the audio is that sometimes the TED speaker references diagrams and infograms which is totally lost on a listener, but TED is a perfect application for Train commutes.

• Learning #7 TED and other interesting lecture sites can be the perfect antidote to a long commute (rather than the seemingly repetitive radio stations)

I do believe that following this interview, I should take a leaf out of "Syd's book" and use the time to catch up with more people (maybe even interview them?!).

The other task I set myself this week was to review another app, and a perfect candidate seemed to be Skobbler (Satellite Navigation)

For a free app, it is absolutely fantastic - the team have done a really good job. I used to have a Tom Tom until it broke, and I was really impressed with how this free application compares. The GUI is easy to use, and more importantly it hasn't let me down with directions (yet). I thoroughly recommend it.

• Learning #8 Skobbler (on the iPhone) really is a suitable alternative to other paid sat nav products

On top of this, I believe it has opened my eyes to the OpenStreetMap project which I believe could be very useful for future web site and app developments.

If you have any apps that you think would be a good thing to use during commuting time, please get in contact (using comments below).

More interviews, learnings and ideas in a couple of weeks :)

Stylus, combined with Jade speeds up my output so much. I love the cleanliness of the markup (well, what markup there is) - it's clean, efficient and most importantly, quick once you get your head around it.

I won't go into too much detail about what Mixins are (you can find out all about that on GitHub), but one of the things I have found them most useful for is; browser vendor prefixes. As someone who uses TextMate, I use my colleague JackBB's excellent bundle to write styles quickly (he's made a couple that are worth a look), and one of the best things about that is tab-completion of my browser prefixes. With the immediate shorthand he's got going on I end up something like the following:

border-radius 5px 5px 5px 5px

-webkit-border-radius 5px 5px 5px 5px
-moz-border-radius 5px 5px 5px 5px
-ms-border-radius 5px 5px 5px 5px
-o-border-radius 5px 5px 5px 5px
border-radius 5px 5px 5px 5px

vendor(prop, args)
	-webkit-{prop} args
	-moz-{prop} args
	-ms-{prop} args
	-o-{prop} args
	{prop} args

border-radius()
	vendor('border-radius', arguments)

background-image()
	vendor('background-image', arguments)

background-linear-gradient(startPoint, startColor, startInterval, endColor, endInterval)
	background-color startColor
	background-image -webkit-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image -moz-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image -ms-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image -o-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image linear-gradient(startPoint, startColor startInterval, endColor endInterval)

background-linear-gradient(top, #FFFFFF, 45%, #000000, 55%)

background-linear-gradient(startPoint, startColor, startInterval, endColor, endInterval, deprecatedWebkitStartPoint = false, deprecatedWebkitEndPoint = false)
	background-color startColor
	if deprecatedWebkitStartPoint && deprecatedWebkitEndPoint
		background-image -webkit-gradient(linear, deprecatedWebkitStartPoint, deprecatedWebkitEndPoint, color-stop(startInterval, startColor), color-stop(endInterval, endColor))
	background-image -webkit-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image -moz-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image -ms-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image -o-linear-gradient(startPoint, startColor startInterval, endColor endInterval)
	background-image linear-gradient(startPoint, startColor startInterval, endColor endInterval)

background-linear-gradient(top, #FFFFFF, 45%, #000000, 55%)

background-linear-gradient(top, #FFFFFF, 45%, #000000, 55%, left top, left bottom)

And we now have full control over the gradients in older compatible browsers, as well as the most modern versions too.

So there we have it - a nice easy-to-use Mixin for the linear gradients you may want to use within your Stylus / Node / Other (delete as appropriate) projects. TJ Holowaychuk has also written an excellent extension to Stylus which does something similar - but for what I wanted, Nib seemed like quite a few extra files to add to my site, when I really just wanted to use a few lines of code to achieve my objective in this case.

Last week I discovered:

• Learning #1 Just because a Google search doesn’t yield results after 10 or so searches, does not mean it doesn’t exist.
• Learning #2 Dragon Dictation is not adequate for writing emails.. must find other useful voice controlled apps.
• Learning #3 You might not succeed in the ventures you undertake, but as long as you take something from that experience, you'll have gained.
• Learning #4 Anything is possible, and whilst it may be unlikely that you'll know how far the idea will spread, you might be surprised (e.g Dave's street poetry and Custom t-shirt ideas)

This week, I tried a new experiment; to capture information whilst I was driving. I had noticed just how bad and annoying people's driving habits had become, so I decided I wanted to drill a bit deeper and find out who seemed to be the main culprits... I fired up voice memos on my iPhone once more, and started tracking the offenders. You can see the results and details on my personal blog

Suffice to say, Black Vauxhalls are surprisingly the car of choice for annoying drivers!

Learning #5 - You can use commuting time to track and record data using voice memos (it's rudimentary - but doable)

This week I was due to interview my CEO Syd Nadim, but at short notice I had to switch to another colleague Vincent Iweka. Vincent kindly agreed to the interview - and it was interesting to hear his views considering his commute was a drive between 2 and 3 hours a day, unfortunately he was hung-over from a Channel 4 meetup the night before! - but he had some good insight and he had great idea for how to use the travelling time:

[audio src="http://blog.clock.co.uk/wp-content/uploads/2011/07/CommutingPodcast2-VincentIweka_20110708082338.mp3"]

Alternatively, listen via ipadio or itunes:

http://www.ipadio.com/phlogs/RobArnold

http://itunes.apple.com/gb/podcast/commuting-podcast/id447751425

Learning #6 - Self help tapes are perfect for commuting time - learning a new language would be a fantastic use of commuting time

Next week, I will be interviewing Syd Nadim and trying a few more ideas.

That evening on my drive home, I fired up voice memos on my iPhone and recorded my first thoughts:

[audio src="http://blog.clock.co.uk/wp-content/uploads/2011/06/20110623-180655.mp3"]

Apologies for the repetition, I am driving (you can even hear me indicating!) but hopefully you got the idea... the initial task I set myself was to work out what I can do with commuting time,  first off I wanted to phone interview (whilst commuting) a few colleagues and ask their opinion about it.

So, when I arrived home I started looking for an iphone app for recording conversations....

Learning #1 - Just because a Google search doesn't yield results after 10 or so searches, does not mean it doesn't exist.

This lesson came about as I did a good hour or so of searching for apps that record phone calls and I simply couldn't find what I was looking for, in fact I was about to blog this:

....Oh my gosh, Despite Apple's slogan "There's even an app for that" ... there wasn't! or more precisely there isn't a good one for it! I tried multiple, and they either simply didn't work, were US only, or were subscription model based which didn't appeal to me.

So Learning #1: Building a decent phone call recorder for an iPhone might be profitable!

The next morning on my way to work I dictated an email via an iPhone app 'Dragon Dictation' which was useless (but then I already knew that!) to Dave Birss and Syd Nadim asking them if they would like to be involved in an podcast interview.

Learning #2 Dragon Dictation is not adequate for writing emails.. must find other useful voice controlled apps.

After a failed recording of an interview with Dave Birss, I realised it wasn't sufficient or practical to try recording via a laptop in the car.

A few days later, after sitting with Dave and explaining the problem, he promptly fired up Google and searched for an app, and lo-and-behold the first search yielded a decent result.. ipadio.

It did exactly what I wanted (hence the life learning #1), so, on second attempt to interview Dave I managed to record my first ever podcast interview:

I apologise for my voice! As you will hear Dave has very melodic tones and is very soothing to listen to - in contrast I am driving, unaware of my volume and not well practised at sound recordings!

[audio src="http://blog.clock.co.uk/wp-content/uploads/2011/07/CommutingPodcast1-DaveBirss_20110630180051.mp3"]

Alternatively, listen via ipadio:

http://www.ipadio.com/phlogs/RobArnold/2011/6/30/Commuting-Podcast-1--Dave-Birss (Subscribe to podcast RSS)

(Podcast soon to be available on iTunes too)

As you can hear, Dave is a very inspirational figure (and modest about it) - The ventures that he has pursued as a result of maximising his commuting time was exactly the kind of ammunition I was looking for.

Learning #3 You might not succeed in the ventures you undertake, but as long as you take something from that experience you'll have gained.

Learning #4 Anything is possible, and whilst it may be unlikely that you'll know how far the idea will spread, you might be surprised (e.g Dave's street poetry and Custom t-shirt ideas)

Week 2 coming soon!

Tools for the Job

Buy your staff great up-to-date computers, monitors and software. Use them yourself. I have seen an agency skimp on monitors to save money and have people starting at screens trying to figure out what colour they were using. I have seen a designer working on a 7 year old PC that forced him to wait 3 seconds between each keystroke press. Just nonsense. Don't skimp on the tools, they are what get the job done.

Whiteboards

Empty walls are a waste of space. There is no such thing as too many whiteboards. Get boards up, places to scribble, plan and discuss. You won't regret it.

A Project Plan on the Wall

List all your running projects, your resources and tasks in a calendar with deadlines, milestones and resource usage. Put it on the wall where everyone can see it. Look at it every day. It will stop you from doing silly things (I promise!)

The Testing Panel

Get a cheap PC, Linux machine and Mac and put then next to each other on a spare table or panel. Install every OS version, browser and browser version that you think your work needs to be tested on. Leave those computers as test computers for people to test their sites on - and do nothing else with them. It will stop designers running to each others computers trying to find out who has the latest version of IE installed on it to test their site on. Alternatively...as I have just been pointed out...have VMs running on everyone's machine that successfully emulates each OS and browser combo to be tested.

Hire PMs/Account Managers

Do not have designers and developers liaising with clients. Leave the production staff to do production and hire other people to be project/account managers.

Set a Training Budget

If your competitors are smarter than you, you will lose. Train yourself and each other regularly. Courses are cheaper than losing customers and they waken the mind to new possibilities.

Be Agile

Implement Agile, don't just talk about it, actually do it. Have daily stand ups. Build product backlogs. Follow the Roles and obey the Rules of Agile. It will make your life easier. Don't fight it...it worked for hundreds of companies for decades - it will work for you.

Avoid Useless Meetings

This week I sat in a grand total of 12 hours of client meetings that I did not write a single note on, or take away a single action from. That was not because I was being lazy. There just wasn't a single action that came from them. Those meetings should not have happened. Make sure everyone prepares well, comes to a meeting with purpose and then leaves it with things to do. Otherwise you didn't have a meeting, you had a break. Nothing wrong with that...just don't spent 12 hours a week doing it.

Managers are Staff Too

If you have set-up a great set of rules and practices that keep your staff working at peak efficiency, make sure you are using those at management level too. No point creating a killer team and a less than killer management structure to lead them.

Beware the Cloud

And last but not least...use Cloud services but use them intelligently. If you are adopting a cloud service do it company wide under a company account. People using Google Apps, Basecamp, GIT, Cloud9 etc under personal accounts and sharing to personal email addresses with no oversight of managers and other company staff are going to put you in hot water when any of those people are unavailable or leave the company. Absorb technology well but in a manner that thinks of your customer first..not you first.

Talking Point: Looking forward to everyone's comments and ideas in the comments below on examples where your work or agency could have been spared problems if you had followed the above ideas!

It was a story about Steve Spiro and how he had created an album entitled 'Frequent Traveller'.

Within the report it explained how Steve wanted to make use of his 1 hour 'dead' commuting time - so he decided to sample the sounds he heard along his journey.

"There's a lovely sound of whirring you can hear....  I thought, it's my precious time - I'm going to write an album on this journey" - Steve Spiro

Immediately upon arriving at work, I fired up the dukebox (yes.. dukebox not jukebox... it has fondly been referred to as the 'dukebox of hazzard'!) and I purchased/listened to the album.. I loved it! It is very ambient and somehow soulful - almost immediately it strikes a sort of connection with my experiences of the journey to and from work (even though I happen to drive now more than train my way to work).

As mentioned, I find the story very inspiring and it makes me want to utilise my commuting time. I do have a great recognistion of the fact that the so called 'dead' time actually allows me to unwind after a hard day at work and resolve (internally) some of the issues of the day - and I would hate to impact on that, but I feel I can do more with my time.

So as a result of this story, my first thoughts are to arm myself with a voice recorder and track some ideas on the way home about what I can do with the commuting time... I hope to embark on a more fruitful journey from now on!

This model works really well but can be quite a daunting process to follow, especially if your team is a mixture of developers, designers, and content editors who are new to git. Thankfully everybody on the Clock team has bought into using git and can see the benefits. But it is a steep learning curve coming from svn where all day-to-day SCM tasks could be performed easily via a gui menu in a developer's IDE. Some training and group learning is definitely required. For Clock I ran a number of workshops to introduce git to the production staff and explain how the svn use cases translated to git. On top of that many team members have spent their own time learning how to tame the vast sheathe of power and flexibility that git affords you. There are great resources out there such as the excellent 'Git Immersion' by EDGECASE which are accessible to nearly any level of developer.

I have found that even if you know the the basics of git and understanding the branching model theory, it still isn't always clear what branch developers should be working on. This is compounded by the fact that we develop and maintain many sites; some big with many developers and some small with maybe only one developer responsible for updates. Vincent's branching model is good but it can be an overhead on small projects; so we are happy for the developers on a project on to choose how they manage their repos. As is true with all freedom of choice, the more free reign you allow, the greater the uncertainty that the correct path is being followed. Nobody likes strict rules, but nobody likes uncertainty either (except maybe Schrödinger's cat) so to help with this process I put together a flow diagram which aims to help you choose the correct branch to work on for a given task. It is nothing ground breaking, but I thought that others might benefit from a little insight into how we go about making that decision. Click the image for the PDF Version.

If you have any feedback or experience with alternative branching models that work well in agency environments please leave a comment.

I am (sadly) at the beginning, with hardly any prior knowledge about this strange-mystical-yet-exciting technology.

My concerns with it are:

• Stability & Security
• Support
• Having to re-write existing processes/functions
• Do I really have to learn a new language?
• Advantages it gives in real terms

As I pre-empted, my knowledge about this tech is pretty much non-existent, and I believe that I can ask these questions to our tech team and they can blog back the answers to my queries. Thereby opening up what would be an internal discussion we'd be having.

Ok, so:

Stability & Security

I take our 10 or so years of PHP development (and hosting of) as a huge advantage, we have encountered and overcome many, many stability and security concerns over the years - The simple question is: How stable and secure is NodeJS?

Support

Many of us on the tech team follow, and have  followed for a number of years, the PHP community - which is vast. When we come to new problems we can usually 1) overcome them using experience and comfort within the language 2) ask our colleagues 3) Use the vast community; from PHP UK/Conference groups we attend - to friends we hold dear within the PHP community. My question would be: Are we in the wilderness with Node?

Having to re-write existing processes/functions

I think the heading says it all. My question is - do I really have to re-write session management, cookie detection, caching etc etc?

Do I really have to learn a new language?

I have spent ages learning PHP, do I really need to learn this new language?

Advantages it gives in real terms

I know that speed will be your first response, but I want details! Scalability - how will this be better than our incumbent systems? Give me more.. ?!

btw - I am playing devil's advocate - in case you hadn't guessed!!!

.......I can feel the overwhelming response coming!!

Because of the number of links, they are split into sections as follows

1. Creative
2. Tech
3. Just for Fun

Set aside some time, prepare yourself. This is one pretty good list!

Creative

The Future of Web Design 404 page

Best viewed in a webkit browser, this 404 page contains a rotating red earth, created using CSS3.

http://futureofwebdesign.com/404

Footnote: Clock is a partner at FOWD this year! Come by our stand, have a chat, leave us a Gawk!

Email Template Guidelines

Creating an email template? There are many ways your design could be flagged as spam. Here are some guidelines to avoid that, and some best practice advice too.

http://www.campaignmonitor.com/design-guidelines

CSS in Depth: Floats and Positions

Personally I still haven't got all the css rules in my head. Although I have made progress in understanding css, reference, overviews and explanations are always helpful. Check over this article where you will learn how to put your HTML in order!

http://spyrestudios.com/css-in-depth-floats-positions

Creative Lab @ Google - 106 Things

Google make some pretty amazing things, and they also find some pretty amazing things too. The Labs team at Google have put together a list of things they find interesting. If you don't open many of these links, you MUST look at this one. It contains videos, images, web applications, pages using new technology to make exciting and interesting things. Stop, now, go, link.

http://bit.ly/creativeinternet

HTML5 Canvas Cheat Sheet

If you've done work with HTML5 Canvas, you will appreciate this Canvas cheat sheet. If you haven't worked with Canvas (yet), you will find this a good tool to get you going, and give you a quick overview of some of the features you will be using. Simply put, there is no reason not to enjoy this link, unless you don't do any form of web development. For bonus points, the page even has a playable version of Super Mario as it's background! Save the princess!

http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Forward Thinking Form Validation

Going from design to CSS can be difficult, especially when you want forms to be dead simple, yet elegant and give helpful feedback. CSS3 pseudo-classes based on a fields state is possibly one of the lesser known CSS3 tricks. This article explains the problem these pseudo-classes solve, with an explanation and demo. AND, get ready for this, although they only work in new browsers, someone has got busy making some script goodness, allowing you to use them on older browsers such as IE6!

http://www.alistapart.com/articles/forward-thinking-form-validation

Project Harmony (Sketchy Canvas)

[caption id="" align="alignright" width="489" caption="Sketchy Canvas"][/caption]

Although there is no title on the page, I'm calling this one Sketchy Canvas. Once you give it a try, I think you'll see where I'm coming from. I'm sure many of you remember this as one of the early canvas demo's, showcasing some of the awesome effects you can apply on canvas. Realistically, I could spend ages explaining what it looks like, but here is something I created in about 2 minutes!

http://mrdoob.com/projects/harmony

BigImg.It

Got a big image that needs fitting in a small place and getting bored of those fancy lightbox things that take over your page? BigImg.it offers a javascript based solution, allowing for you to click on the image, and then scroll the image using your mouse and NOT scroll bars. It's a different idea and a real alternative to having a nasty shrunk now pixelated image which grows when clicked on. This one is sort of Tech, but because of how easy it is to implement I've classed it as creative.

http://bigimg.it

Hakim El Hattab's Experiments

I have yet to find a part of this website which doesn't blow my mind. Hakim shows off (and rightly so) a few of his award winning HTML5 experiments. Some of it is simple stuff used in a creative way, while other bits are pretty damn complicated and look so pretty! Oh, and this is one of those sites which resizes dynamically based on your browser's window size. I keep clicking on links in the navigation bar JUST to see the pages fall away revealing the next page. *click... click... clickclickclick* Don't be surprised if you find yourself doing the same, following him on twitter, subscribing to his blog, and having a peak at his code! This site sure IS creative, but it also DOES give you a few tech things to look at too!

http://hakim.se/experiments

The Zen of HTML5: London Web meetup Presentation

Some of us may slightly forget about Opera sometimes, but let's be fair; Opera is helping and have contributed to the HTML5 (in the umbrella sense) spec. This link contains a video and resources from a presentation at the HTML5 London Web meetup about the Zen of HTML5. Actually being at this event and watching this presentation, I was shown some things about HTML5 that I hadn't yet been introduced to, for example the dynamic ways you could interact with the video element. Go watch / at least bookmark for later.

http://my.opera.com/ODIN/blog/2011/01/26/the-zen-of-html5-london-web-presentation

Minimalistic Designs of Consumer Products

I'm not a designer, I'm a programmer who occasionally dabbles with design tools when others neglect the "Keep out of reach of programmers" label you find on those Adobe boxes. This link contains 10 fairly well known consumer products in three stages of stripped down minimalistic design phases. Maybe I just like minimalism, maybe by making a simpler looking product, it looks like less of a complicated decision; but I know for most of those, I'd pick the one on the right (most minimalistic), EVEN if the content was the same. Makes you think.

http://www.fuelyourcreativity.com/minimalistic-designs-of-consumer-products

The Photoshop Etiquette Manifesto for Web Designers

On the subject of being a programmer and not a designer, "Us programmers keep to defined formats and layouts, how about you designer folk?" Turns out someone has put together a manifesto to that effect with regards to Photoshop files. If you work with a reasonable sized creative team, and need a good well thought out set of rules for creative files, this is your list. I'm not sure how often you need someone else to go back and edit, update or review a design or graphic creation, but if a member of the team is out on holiday for a week, and you urgently need to send the client a new updated version... Well, getting everyone to follow the same rules might save you a fair amount of time, and possibly your bacon too.

http://photoshopetiquette.com

Ajax Load(er graphic)

One of those pesky programmer types pestering you, a designer, for a spinner / progress bar / spiral / loading pacman? Tell them to make it themselves... OR, you could make it the quick way, and take all the credit. Ajax Load makes that dream a reality. You can choose to copy the Apple or Facebook style, or choose from the 37 other loader animations, and then select your foreground and background colour. Click generate. You have a downloadable animated gif exactly as you wanted. The site has a footnote which reads, "Generated gifs are totally free for use". Fantastic. I've used this on the current project I'm tasked to, and expect I will be using it again. Now you have no excuse NOT to have a shiny spinner.

http://www.ajaxload.info

Holmes.css - The CSS Markup Detective

Your CSS may pass validity checking, but wouldn't it be nice to give it just that extra final check and polish? Holmes makes that easy by putting borders on any element it sees an issue with, and when you hover, it displays a message explaining itself. Errors, warnings and deprecated CSS beware! One of the nicest features is the ability to run it from a bookmarklet. Give it a go.

http://www.red-root.com/sandbox/holmes

Tech

Eloquent Javascript

Javascript reminds me of Java, a lot. My learning language was Java, but if you have the choice of something else, like Javascript, that you will probably end up using more, then here is a free ebook for you. Don't go thinking that because it's free, it's not as good quality as a bought book, because you can actually buy this book in physical form on Amazon, if you're that way inclined.

http://eloquentjavascript.net

jQuery Templates Plugin

If you're build something big (or wrong), you can end up with a fair amount of Javascript and HTML muddled in together. Templates, a jQuery plugin aims to separate the HTML DOM from the JS logic, something I'm pretty sure sounds like a good idea. "A template contains markup with binding expressions. The template is applied to data objects or arrays, and rendered into the HTML DOM." Something we are looking into, but it's still in Beta, so possibly not ready for production.

http://api.jquery.com/category/plugins/templates

PHP Golf

Ever wondered what happens when you mix PHP and Golf? PHP Golf of course! There are a number of set challenges you are given, and the idea is to complete them with the least number of characters. Clock primarily provides PHP, and PHP Golf made us work harder and learn more PHP functions. We actually had an internal competition to try and beat the score of our CTO for three challenges: PHPGolf, Rot 13 and Triangular Numbers. If you check the high scores for those three challenges, you can still see some of ours pretty near the top! Try to beat them, I dare you.

http://www.phpgolf.org

PHP Simple HTML DOM Parser

You may have edited the DOM with Javascript and jQuery, but how about editing the DOM in PHP? Although this probably isn't as common a task, if you find yourself needing to do so, there is a PHP class for that. With some good example code, it was easy to whip up a page scraper to dynamically grab content from a randomly selected page.

http://simplehtmldom.sourceforge.net

SyntaxHilighter

Unbeknown to many, Wordpess already includes syntax highlighting out of the box! No need for another plugin, unless you have a less common language to show off. Here is an example...

[php]

<?php

echo "Hello Syntax Highlighter";

?>

[/php]

If you're interested in how to go about putting this sort of feature in your own CMS, more details can be found at the link below.

http://alexgorbatchev.com/SyntaxHighlighter

Lesser Known Unix Commands

Depending on your level of tech, and even some levels of creative, you might spend some time (or your whole day) in a Unix terminal. Someone on Quora asked for some lesser known commands, just to see what they have been missing out on. Here were peoples answers...

http://www.quora.com/What-are-some-lesser-known-but-useful-Unix-commands

Generate Data

Entering manual data for testing is OK, but when you're creating a big systems, your testing needs to be a little more thorough. While white box testing is fantastic for systems you are fully in control of, if you need some randomly generated data to test with systems where you don't have full access, black box testing with randomly generated data sets can help. I haven't seen another web app which generates data with as many settings as this.

http://www.generatedata.com

Live.js

There are a number of ".js" titled things coming out, especially with the rise of node.js. Live.js allows you to load in changes to a page without actually refreshing it. For example you can make changes to the css of a page, save, and watch it change dynamically right in front of your eyes.  I haven't implemented this myself yet, but I sure plan to. The example on the site is pretty neat, opening the CSS editor in a new tab/window, edit, save, and see the other page update itself accordingly. I dug around a bit on the site, and there is a tool called backfire which enables you to save any CSS changes you make in Firebug back to your CSS files, although with CSS aggregation, not much help for us. If you do try either of these, let me know how you got on.

http://livejs.com

Git Cheat Sheet - Visual Version

Git is starting to become the new source control application of choice, which in turn leads to a rise in cheat sheets. This one is slightly different though, as it gives a bit more context to the commands, and only shows those relevant to what you want to achieve. Clicking on "Workspace" as you can see in the image to the left, it displays all the commands relating to the workspace, and where they interact with. I haven't touched Git much myself, but I can see this will allow you to quickly work out what that command is if it's just on the tip of your fingers.

http://ndpsoftware.com/git-cheatsheet.html

PHP Mess Detector

No matter how long you've been programming, you will never produce perfect code first time round. PHPMD gives you a helping hand with your PHP code, giving it the once over and checking for things that could cause problems or lead to less maintainable code. It can pick up possible bugs, suboptimal code, overcomplicated expressions and unused parameters, methods and properties. If you take your PHP work seriously, this is something to add to your build script, or at least run now and then to make sure your code isn't getting out of hand. If you're working with legacy code, it can flag up things that you simply can't deal with (within budget), but at least it makes you aware of potential problems.

http://phpmd.org

Apigee

Working with a RESTful API? This may become your new best friend. Facebook have had an API console for a while now, and anyone who has worked with the Facbook API will tell you it has been damn handy. I heard about Apigee after some people tweeted about a twitter API console, which turns out was made by them. They also have a number of other API consoles including  Forsquare, Github, Groupon, Linkedin, Paypal, and Soundcloud. The most exciting thing however is the ability to create your own custom API consoles. I wish I had found this when I started working with the TopTable API!

http://apigee.com

Just For Fun

This is the Web Right Now (Winter 2010)

Facebook, Google, Apple and a few other names you might know of too. The web has changed quite a bit over the last few years. This amusing infographic come comic gives an overview of some of the things that have change (and that haven't). The "Tumblr beasts" have actually been adopted by Tumblr as their version of the fail whale, which marks this posts importance.

http://theoatmeal.com/comics/state_web_winter

Working with the Chaos Monkey

The cloud has some buzz surrounding it, cloud this, cloud that. If you understand anything about cloud solutions, you understand there are instances or nodes, and you must build your system to allow any instance to fail without heavily effecting your system. Netflix, the streaming video rental website, moved to AWS a while back. One of the first systems they had built was "The Chaos Monkey" which would randomly pick and take an instance offline. They explain why this system is so important, and why anyone considering running a service on a could computing platform should have one.

http://www.codinghorror.com/blog/2011/04/working-with-the-chaos-monkey.html

Rawkets - An Experimental Multiplayer Space Shooter

While I spent a fair chunk of my placement year at Hijack Media, Clocks sister company in London. When an American intern joined the team, Rawkets soon became the non-smokers smoke break. In the first iteration of Rawkets, you would have to sign in via twitter, but now it's open to anyone. If you've ever played asteroids, the game mechanics are a lot like that, except rather than asteroids, its other people you are trying to take out. Rawkets has had a few upgrades in the last few weeks, so the UI has had a face life, you now see who killed you, keep a tally of your kills, and even chat in game now too. It's fun, fast pace, and while it seems quite simple, it can provide so much fun! The guy who made this, Rob Hawkes, is quite an authority on HTML5 canvas now. He speaks at events, has a book, and even works for Mozilla as a Technical Evangelist now. What are you waiting for? Go play some Rawkets.

http://rawkets.com

Until about 4 years ago I was a major elitist when it came to work and skills. I just refused to work with people below a certain standard of coding or execution excellence and often found myself struggling with projects that, despite have elite teams of people throughout, never seemed to go exactly as planned. It used to frustrate me, occasionally enrage me and leave me perplexed.

About 4 years ago I started playing WoW. I got into it to get an escape from real life rigours of IT work and wanted to have a fun, collaborative place to play. I enjoyed the game immensely and eventually started my own guild with a bunch of people I met in PUGs. Adult players like myself, who did not power game, but wanted a good experience on the few hours we had. Molten Core raiding had just started happening in a big way and elite raiding guilds were emerging all over the world, for better and for worse. Most of these guilds rejected and frequently threw out players that were not elite, sometimes failing by only a small margin. Consequently, these people were disappointed and often sad while gaming. This was something I never understood in the gaming world - the lack of inclusion. So I started picking up these players into my guild, and essentially building a guild of people that were rejected from other guilds due to a lack of perceived skill.

The fun started to happen when I started organising raids in my guild. We set off with passion and fervour into Zul Gurub and I remember those days as feverish raids. We refused to use vent so I was typing commands furiously into the chat (hilarious typos emerged from this period) and people were running around like crazy, no coordination, no focus - in fact behaving in exactly the same way that got them thrown out of proper raiding guilds. So I thought...this is never going to work.

You can't climb the ladder of success in anything and pull it up after you, that's not how life works.

After a few fruitless encounters I decided to do some out-of-raid-time tutoring. I grabbed the weak members that were trying to do things they could not, and spent time figuring out what they could do well. I paired weak members with strong ones to create offensive /defensive balances. I forgave mistakes (even serious ones) and gave people multiple chances, encouraging our pro players to not reject the weak ones but to guide them to great strengths instead.

Over the next three months we conquered Zul Gurub and brought it into farming status and over the next few expansions conquered all the raid content the game through at us, transforming that rag tag bunch of rejects from other guilds into a top 5 ten man strict raiding guilds on our server by the time Cataclysm hit despite being a casual guild. The break through came in Burning Crusade, when our first run into Karazhan I was boggled to find I did not need to give a single order in boss fights. I watched with amazement as each individual member of our  ten man team played with exceptional situational awareness, tanks moving to grab mobs that come out of the woodwork, priests being shielded by the dps and CC'ers...and all of this with no leadership effort on my part at all. It was epic.

This transformation of our guild happened over the space of three years and as this learning experience happened in the game it started leaking out into my real life as well. I stopped building teams of elitists and started building teams of complimentary skills. Academics mixed with street smarts, elite mixed with gut feeling driven, supporting roles mixed with leaders. Suddenly my projects started coming together, results appeared, timelines were met - clients were happy. So what did this translate to in reality?

Team Makeup

Successful teams are not homogeneous in skill quality. In other words a team of people with the same level of skill at everything will think in the same way, and therefore not adapt to change. What does need to be homogeneous is attitude. It takes only one person with a bad attitude to ruin everything. Its better to have a person of mediocre skill with a great attitude than the reverse.

Strong members must help weak members get better. If your skills are greater than your neighbours, it's your job to help them get better. You can't climb the ladder of success in anything and pull it up after you, that's not how life works.

Adaptation to change is a key to success. The best laid plans fail, get over it and make another one.

If you have a successful team, don't mess with it. If you have a team of people that play / work well together, don't change it. Adding or removing a member can throw the entire team into a new learning cycle of team and skill balance that can be time consuming and costly.

Incentivise for success. Everyone is driven by different things. That is OK. DON'T try to make everyone motivated for the same reasons, DO try to get them all pointed in the same direction for their own different reasons.

The right person for the right job. Everyone can't be the leader, no matter how cool it is. Strengths should play to team success, avoid ego's getting in the way. High level specialists do NOT make good leaders. High level generalists do. Specialists should be incentivised to do what they are special at.

The Example

Lets take a look at how to do this in an typical group example, say a technology team and analyse the role make-up:

Technology Lead (in WoW this is your raid leader)

This person is usually someone that has a lot of client contact and is also responsible for the overall technology vision. This should be a high level generalist with a broad technology skill set and very good grasp of translating technology to business value. If this person is the best coder in the team, then you have hired the wrong developers. This role provides vision, leadership and motivation for the unit.

Team Lead (in WoW this is your class leader)

This person is your best developer and has won the respect of the team though his excellence in code delivery. His job is to lead the execution of the plans and goals set down by the technology lead. Detail oriented, quality concious and rigorously devoted to churning out the best possible result.

Senior Developer (in WoW this is your best performing class member)

This is your experienced developer, it his job to assist the Team Lead in execution and train junior developers and make sure they are up to scratch.

Junior Developer (in WoW this is your class team members)

This role is supportive in nature to the team and is gaining experience by inclusion, exploration and observation.

The Incentives

Technology Lead

This person is incentivised by ownership/rewards and recognition outside of the team. The value of this employee should be acknowledged in the company at large outside the technology team and freedom and ownership is the proper incentive for this role.

Team Lead

This person is incentivised by ownership and rewards. Immediately reward successes and give the team lead greater and greater freedom as he earns that right.

Senior Developer

This person is incentivised by rewards and status. Tougher projects on completing existing ones well, public commendation within the team when coding excellence occurs.

Junior Developer

This person should be incentivised by recognition. Applaud his successes, be quiet about his failures and do one on one tutoring to educate past them.

I have done some quick Google searches to see if there is anyone out there using the new html5 'contentEditable' feature to perform content management system tools for a Web site - and whilst there are forum posts indicating its usage I can't find anything concrete. Therefore, I'd like to, in this post - in a "think-whilst-I-write" style of blogging, explore whether I think this new HTML5 feature could be used effectively..

Ok, so I am going to go-ahead and presume that if you have read this far you know what 'contentEditable' means (not to be confused in this instance with 'designMode').

'contentEditable' was originally designed and implemented by Microsoft in Windows Internet Explorer 5.5. There was some superficial documentation on how to use them (so developers could develop rich text editors), but little thought was given to interoperability. Much of this was later reverse-engineered, and cross-browser support for basic operations is considered quite good.

So assuming that you can guide your CMS editors to use a 'contentEditable-safe' browser, then we are away and rolling.

Personally, I have found that the majority of our clients that use CMS systems have little to no experience of either html markup (or wiki formatting etc) - there are of course exceptions to the rule, but what I am thinking here is a very simple editor to allow text only amends (as I believe image/video input would result in non optimal code).

If we take a very simple site, a brochure site if you like, I believe it would be beneficial to allow specific parts of the page to be 'contentEditable', let's say in this instance - the introduction and body text.

The first two challenges that come to mind are:

In answer to 1 - As we want this system to be light weight, we need to think of a way to distinguish users without necessarily implementing ACL (Access Control Lists e.g. Security Groups and the like) etc, so my first train of thought is to use a simple 'Basic access authentication' check. This itself dictates that we lose a lot of CMS functionality. As we wouldn't want the users to see the login box, we'd need to place the site on another url (which would mimic the main site - but with login)

In answer to 2 - I believe the best method would be to place a save button on the footer (or header, or both) clicking save (using JavaScript) would take all the contentEditable regions and overwriting the saved content in the DBMS (whatever is being used).

Having now written a few paragraphs on this, I do not think the efforts involved mean that my approach would be preferable, as we are starting to lose functionality quickly. So perhaps a change of approach is suitable...

I still think that contentEditable has 1 big advantage over a text box in an isolated admin section.. the editor can see the amends real-time and how they effect the look and balance of the page.

So let's assume we are going to use the a pre-existing CMS system but now allow the method described when editors/administrators are looking at the front-end of the site. This means we have now not lost our lovely ACL and vast CMS functionality, but we can let the editor choose between editing text content in the CMS or editing in-line and on-page.

Some may argue that decent Content Management Systems have preview functionality - but the main drawback I see to this is that in introduces extra steps that are not needed. You could even allow the preview function to use contentEditable regions (reducing the number of steps for editors).

Sorry for the 'waffle', I did state this was going to be a "think whilst I write" style of blogging!

In conclusion

I started out with thoughts that contentEditable might provide an answer to a very light weight CMS for simple sites (text only amends). Through my thought process (and as you can see) I now believe that contentEditable could be used very effectively to aid CMS's rather than as a replacement/alternative method.

Your thoughts on such an implementation are welcomed.

I would type the command then press tab to get the completion

$maiden<tab><tab>

_maiden()
{
	local cur prev opts
	cur="${COMP_WORDS[COMP_CWORD]}"
	prev="${COMP_WORDS[COMP_CWORD-1]}"
	opts="-h -l -b -v -q"
	if [ -e "Maiden.php" ]
	then
		targets=`echo ""| maiden -b | sort -u`
		COMPREPLY=( $(compgen -W "${targets}" -- ${cur}) )
		return 0
	fi
	COMPREPLY=( $(compgen -W "${opts}" -- ${cur}) )
	return 0
}
complete -F _maiden maiden

 echo "COPY (SELECT * FROM \"User\") TO STDOUT CSV;" | psql -U postgres BigCompanyDatabase | gzip > Users-`date +%F-%H%M`.csv.gz

 mutt -s 'User Export' -a Users-`date +%F-%H%M`.csv.gz -- paul.serby@clock.co.uk < /dev/null

PgAdmin3, over SSH, on a 2Mbit line, took 30 mins to pull 11,000 rows. With the command line version it was in my inbox in less than a second.

Not everyone browses the same way, but I love Chrome and the fact that the address bar is also my search bar. For all my non-work related browsing I tend to use Chrome as I like its speed. Firefox 4 is fantastic too, don't get me wrong, but as amazing as Firebug is, it slows down browsing to the detriment of my user experience. You have to take the rough with the smooth I guess - both browsers have their benefits for my personal and work purposes.

Anyway, back to the search / address bar bit. I like this in Chrome, and in Firefox I browse the same way. I try not to use the search box as it takes up extra UI space, hence in both Chrome and Firefox I type a search term in the address bar, and bingo - the URL I type loads, or I get my Google search results for the term I entered. Or not, as the case may be...

After upgrading to Firefox 4, all of a sudden my results started returning in Bing. Bing? Bing! Now I don't have too much of an issue with Bing. I am sure it's a very good search engine. But I want Google. Google is my search engine of choice, so where did Bing come from?! I didn't install any Microsoft-related extensions or plugins, and after scouring every preference in Firefox and coming up fruitless, I returned to my reliable Google-standard search bar, and voila! The Mozilla support forum came to my rescue.

I'm not too certain what happened, but if anyone else has the same problems out there - here's what you have to do to return to the good old days:

In your address bar, type: about:config, then scroll down to keyword.URL when the config loads (after promising to be careful with the settings).

Right-click keyword.URL and select modify.

Paste the following into the panel that appears: http://www.google.com/search?ie=UTF-8&oe=utf-8&q=

Close the tab and the World is right again!

Aaaaaaah, that feels better.

Here's my situation:

• I use my local machine for development
• I have a remote server with SSH access for testing and production
• I'm using git for source control
• node and npm are installed locally and remotely

And here are my objectives:

• Encapsulate deployment process into single git push command
• Host multiple apps on a single server
• Have multiple instances of each app for testing and production

Read on and I'll take you through the different aspects of my solution. It is still very much a work in progress, so if you see anything which could be improved, or have a different approach then let me know.

Git

When you initialise a git repository, it creates a directory called hooks. When certain actions are invoked with git, it looks in this directory for scripts to run. The one that is particularly useful to us here is called post-receive, which gets run when a branch is pushed to the repository – after it has received everything. This means we can set up a git repository on our server, clone it on to our local machine, do some development, push those changes to the remote and have it run whatever we place in our post-receive script.

The system will assume that your post-receive is bash. However, since we're working with node, it makes sense for everything to be in js right? To have your system run it with node, simply have #!/usr/bin/env node as the first line.

On your server, initialise an empty, bare repository like so:

The --bare argument means that no working tree (all of the files that git is tracking) is stored in the filesystem, only their internal representation in git. This ensures that the repo has to be cloned to be worked with. On your local machine clone the repo like so:

You can see I've renamed the remote origin to deploy. This is purely superficial, and simply serves to make our deployment command more verbose – we'll be typing git push deploy live as opposed to git push origin live.

To achieve multiple instances of a single app on the server, we can simply use git's branching model. Personally I have removed the default master branch and have live and dev. In Clock projects we tend to have development, testing, staging and production environments – the choice is yours.

Here is what we want our post-receive script to do:

• Create a temporary directory
• Checkout the branch of the project that was just pushed to the repository into the temporary directory we just created
• Run the project's build script
• Remove the temporary directory

I won't clutter up this post with my whole script, so here it is on github (If you see references to Jake, that's my choice of build tool and it's explained later on). I have purposefully made this script do as few jobs as possible, and defer the bulk of the work to the build script – this is because the hook has to be (as far as I'm aware) placed into the git repo manually. The build script can live in the project so be project-specific and source controlled.

It is worth noting that if I had written this in bash, it would have been much shorter. For me, this was a trade-off I was willing to make in order to keep things all in one language (avoiding one I am a novice in).

Jake

Jake is a build tool written in node. It follows the node ideology and supports asynchronous tasks. In short, it is a framework for defining tasks and dependencies between tasks, and is written on top of node.

On your server you will need to install jake globally. npm normally installs packages in your current working directory, so you will need to use the global argument: npm install jake -g.

The bare minimum we want to achieve with the build script is as follows:

• Install dependencies
• Create a versioned directory e.g. SiteName@0.0.1
• Move the files from our temporary directory to the versioned directory
• Point a symlink to the new versioned directory
• Stop old version and start new version

The folder structure for my app directory looks like this:

There are are two main advantages to this:

• If anything goes wrong up to the symlink part of the build, then no damage will have been done to the live site and its associated files
• If the deployment has some unexpected effect on the site, the previous version can be brought back, simply by replacing the symlink

Once again, to avoid clutter here is my Jakefile.js in full.

Upstart

If you start node from your build script, your node instance is a child process of the build process – that's not good. It's a good idea to wrap each application in a service. Based on node hosting tutorials out there, I went with upstart to achieve this.

I found my upstart service directory to be /etc/event.d/, it might be different for you. In this directory, I place my service wrappers for all of my node apps. e.g.:

Site can then be started and stopped with start site.siteName-state and stop site.siteName-state.

Monit

What happens if your node app unexpectedly dies? What if it is a strange anomaly that could be resolved (if only temporarily) by restarting the service? Monit is a utility for monitoring and managing processes. We can use it to send a simple http request to our app. If it does not respond, or responds with any other http code than 200 OK, we can assume something went wrong and restart the service.

I use a monolithic monit config file called monitc located in /usr/local/etc/ where all of my apps are defined. Here's an example of a site in my Monit config:

The first line tells Monit to run as a daemon, and to check every 300 seconds with a 60 delay.

For each site, we tell Monit the location of the upstart wrappers, so it knows how to start and stop the services. A site can be targeted individually using the host name, e.g: monit start BenGourley-dev would start the service declared above.

You can start all the services that are defined with: monit start all. This is useful if the server is restarted and we want to bring all apps back up. I have placed this in my /etc/rc.local file to bring the apps up automatically.

Summary

So that's my process from start to finish. Just one more point – since multiple apps can't all listen on port 80, you'll need a proxy to sit on port 80 and route connections through to the appropriate node instance. For this, I use nginx.

I hope this has been in-depth enough, but not too much of a heavy read. This setup works really well for me as a single developer, and I hope it will help a few more get up and running. All of my examples in full can be found on github, where they will continue to evolve as I augment things.

References & Further reading:

• http://howtonode.org/deploying-node-upstart-monit
• http://caolanmcmahon.com/posts/deploying_node_js_with_upstart
• http://node-js.ru/6-jake-task-check-npm-dependencies
• http://www.deanoj.co.uk/programming/git/using-git-and-a-post-receive-hook-script-for-auto-deployment/

It is really easy to install, either download the files or they now have a pear channel. For more details visit the PHPExcel site.

This post is mainly for myself so that I can have a quick reference guide for common functions. For full documentation see PHPExcel Documentation.

PHPExcel supports fluent interfaces so function calls can be chained together. The following: Can be written like:

Basics

• Create a new object: $phpExcel = new PHPExcel();
• Getting the active worksheet: $sheet = $phpExcel->getActiveSheet();
• Add text to a cell: $sheet->setCellValue("A1", "Hello World");
• Add a new worksheet: $sheet2 = $phpExcel->createSheet();
• Add a formula to a cell: $sheet2->setCellValue("A5", "=SUM(A1:A4)");
• Rename a worksheet: $sheet2->setTitle("Simple");
• Merge cells: $sheet2()->mergeCells("A1:E3");
• Unmerge cells: $sheet2()->unmergeCells("A1:E3");

Adding properties to your file

• Set Author: $phpExcel ->getProperties()->setCreator("Tom Smith");
• Set Last Modified By: $phpExcel->getProperties()->setLastModifiedBy("Tom Smith");
• Set Title: $phpExcel->getProperties()->setTitle("Title");
• Set Subject: $phpExcel->getProperties()->setSubject("Subject");
• Set Description: $phpExcel->getProperties()->setDescription("A description of the file.");

Formatting A Cell

• Setting Width: $sheet2->getColumnDimension("A")->setWidth(40);
• Setting Auto Width: $sheet2->getColumnDimension("A")->setAutoSize(true);
• Setting Text Alignment Right: $sheet2->getStyle("A1")->getAlignment()->setHorizontal(PHPExcel_Style_Alignment::HORIZONTAL_RIGHT);
• Making text of a range of cells bold: $sheet2->getStyle("A1:F1")->applyFromArray(array("font" => array( "bold" => true)));
• Adding an auto filter to a range of cells: $sheet2->setAutoFilter("A1:C9");

Output to the browser as a download.

Example

Here is an example of PHPExcel code, it includes most of the functions described above.

Keep in mind though that SCRUM was designed initially to be implemented in large groups of developers for large projects in large companies. It works great in smaller projects too with some modification and ensuring that you keep a few basic guidelines in mind.

Truth 1: Rely on the Team. If the team is a very skilled one that has worked well together then they need less and less management. In a high accountability team you need less oversight.

Truth 2: The Product Backlog is King. Make it well, update it often and keep it accurate. If this is followed you can skip huge amounts of unnecessary admin.

Truth 3: Rely on Your Data. If its quacks like a duck, walks like a duck and looks like a duck - it's a damn duck. Don't rationalise the data, accept the findings and identify problems early and fix them.

The Barebones SCRUM Implementation

If the above truths are well in-hand for you as the SCRUM master then this is the bare bones structure you need to implement SCRUM properly:

• Create the product backlog. If you want a template to start with use my one here.
• Do daily stand-ups every day. No exceptions, nobody gets to skip it.
• Measure your results each sprint, don't skip it. Analyse the data together with the team and get team buy-in on the conclusions.
• Do not run from problems. Engage the team in the solution. A large problem is not fixed by ignoring it and solving an easier one.
• Do a project review session after the project to identify what you have learned.

How do you know you need to use SCRUM?

If your turn around time is less than a month, then you don't need SCRUM. Each sprint should be at least 2 weeks long and there should be at least 2 sprints for SCRUM to be needed. Why, you say? Because SCRUM is an iterative method of improving results based on data. If your project lasts less than 4 weeks any data you collect will be incidental and not yield correct results.

If you project team consists of less than 3 people you don't need it. Perplexed as to why? Because you need to analyze the data in a group and if you don't have enough people to weigh in and consult - you may very well draw the conclusions you want. Two people can convince themselves of anything, a dissenting majority requires at least three people to happen.

If you are going to be doing only one project in your working life - don't bother with SCRUM. It's designed to improve over iterations of many projects, not to slam dunk one.

Further reading

Scrum Official Site: http://www.scrum.org/

The Agile Manifesto: http://agilemanifesto.org/

Other Agile Methods: http://en.wikipedia.org/wiki/Agile_software_development

To run through some of the nuances and discussions we have internally, I thought it might be a nice exercise to blog about the ones I discovered for our very own blog, which happens to be using the WordPress system (in this version of the site).

Impressively WP/we scored an overall Page Speed Score of 93 (out of 100), and no high or medium priority recommendations were raised.

The following items were raised as low priorities:

• Leverage browser caching
• Defer parsing of JavaScript
• Minify CSS
• Minify JavaScript
• Minify HTML
• Remove query strings from static resources
• Specify a Vary: Accept-Encoding header

Leverage browser caching

So beginning with 'Leverage browser caching'. The feedback states that

"Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network."

GPS (which turns out is a terrible acronym for the Google Page Speed site!) listed a few different files that aren't being cached by the browser, one of which was: http://blog.clock.co.uk/.../fradmcn-webfont.svg

With the assistance of Mike Cronnelly - we checked the virtual host, specifically looking at the mod_expires settings and we had:

ExpiresActive On
ExpiresByType text/plain "modification plus 5 year"
ExpiresByType image/png "modification plus 5 year"
ExpiresByType image/gif "modification plus 5 year"
ExpiresByType image/jpeg "modification plus 5 year"
ExpiresByType image/pjpeg "modification plus 5 year"
ExpiresByType text/css "modification plus 5 year"
ExpiresByType application/json "modification plus 5 year"
ExpiresByType application/x-javascript "modification plus 5 year"
ExpiresByType application/javascript "modification plus 5 year"
ExpiresByType image/x-icon "modification plus 5 year"
ExpiresByType application/x-shockwave-flash "modification plus 5 year"

Defer parsing of JavaScript

Minify CSS & JS

Minify HTML

Remove query strings from static resources

Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL.

Specify a Vary: Accept-Encoding header

The following publicly cacheable, compressible resources should have a Vary: Accept-Encoding header.

Bugs in some public proxies may lead to compressed versions of your resources being served to users that don't support compression. Specifying the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource.

The mod_deflate module sends a Vary: Accept-Encoding HTTP response header to alert proxies that a cached response should be sent only to clients that send the appropriate Accept-Encoding request header. This prevents compressed content from being sent to a client that will not understand it.

<Location /resource/>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/json ...
</Location>

so it may be that we just haven't set in our conf correctly for the blog.

Teachers grade: B Teachers comment: Please use your sound knowledge across all projects.

That's all for now folks, maybe some more findings later on...

Big thanks to Mike Cronnelly, Ben Gourley, Jack Brewer and Tom Smith for their input.

Next to the logo on the Forrst homepage, we are greeted with the following description:

"Forrst is a community of passionate developers and designers focused on helping themselves and others get better at their craft, providing thoughtful critiques, and sharing their knowledge to build better applications and websites."

Let’s decompose this a little. Forrst is for designers and developers exclusively. If you are looking for end user or general population feedback, you would be on the wrong site. Forrst welcomes passion in your craft, be it design or development. To get the most out of the community, you should like what you do! Forrst wants to help you (the prospective user) and other members be better. Final point, you should want to help each other!

Three noteworthy qualities

Here at Clock, we nominate staff for praise at our monthly company meetings, and try to focus on 3 qualities: being agile, being on the bleeding edge and being creative. Recently I've grown to believe Forrst can help with all 3 of these qualities with varying degrees. To explain how I came to this conclusion, I need to take you on a journey of several steps from the past few months.

About two weeks ago (17/02/2011), I attended the London Web meetup, where Christian Heilmann, a Mozilla evangelist, spoke on "Finding harmony in web development" [slides]. To summarise the 122 slides and 2+ hour’s presentation, Christian said the current state of web development mostly is, "A world of constant disagreement and overly quick and harsh responses". He continued to decompose the current debate regarding hashbangs (the #! in urls that makes javascript-generated content search engine crawlable), and concludes it with making the point that being all sensational isn't helping us progress. Christian is right when he says our job is to make the web of tomorrow better than the web of today. If we focus on the outcome of the work we do, rather than our ego, we CAN do this. Enter collaboration enablers, like jsfiddle, github and Forrst.

"Everyone has something to contribute. Tell others, work together and build *real* products!” - Christian Heilmann - Mozilla Evangelist

Where does Forrst come in to all this?

"Fantastic," you might say, "I'm all up for making the web better, but how as a web design agency will this benefit both us and our clients?" Part two of my explanation, begins at a talk from PHPUK, an annual PHP London conference. A fair number of us Clock folk attended PHPUK, something I would personally recommend to any web developer. Sebastian Bergmann spoke on Agility and Quality [Slides], and while talk was focused on how you can tweak the "Time, Money, Quality" triangle, the talks opening was something I had read about before. Software Development is much like playing a Roleplaying game .

The simile was that each member of the team has different roles which aid the whole team. The project manager as the Tank, keeping the focus of clients. The Environment / Productivity engineer as the Healer, the invisible process facilitator, bug communicator and infrastructure maintainer. The coders and testers, the Damage Dealers, battling with the low level requirements and requests. Fantastic analogy for anyone who has played RPG's before.

Taking the comparison one step further, the Damage Dealers (Coders and Testers) in these games need to sometimes pause, use power-ups to make them stronger, go on a rage run or just something that gives them an edge. Forrst can be seen as one of those power-ups.

The Forrst power-up increases the Damage Dealers' agility. Upload snippets of code here and there, or posting a quick question; both are reviewed by your followers who often suggest improvements or complements in the form of "Loves". Reviews of a small amount of modular code can be a different view when you don't look at the whole system. Complements encourage good quality code.

The Forrst power-up increases the Damage Dealers' bleeding edge quality. Bookmarks are another form of post that you find on Forrst, often exciting new tech demos. Reviewing each others fresh code can help inspire new ideas and make us more willing to try out new things!

The Forrst power-up increases the Damage Dealers' creativity. Depending on how many inspiration blogs you subscribe to, you will probably be aware of posts with titles such as... “20 amazingly inspiration email templates / profile sites / wordpress themes”. Forrst holds the front line for this sort of content, right from the source, the creators of awesomeness themselves. You will be inspired and awed.

OK, you've sold it. How do I join?

Becoming a member of Forrst isn't quite as easy since their latest update. You can either be invited or apply for membership, and your application would be reviewed and approved or denied by the community. you can now only gain invites to share if you are amongst the most active members (93rd percentile or higher).

I use Forrst maybe a few times a week, and I’m at the 85th percentile, so realistically this sounds like a good way to do things. If you are a business however, and already have one member of the team forrsting away, you can ask Forrst really nicely, they will allow your whole team in.

If you've used Forrst, or any similar alternatives, we'd love to know what you think. Let us know in the comments section below.

Find me on forrst as Relequestual

I've been working on a few projects recently that have utilised many of the new features of 'HTML5' (I'm going to refer to it as that, as it's the easiest way to refer to it) and although I am enjoying the ride, I have noticed that the HTML I write these days has got bigger.

Years ago, when I started learning how to code, one of the golden rules was to restrict the amount of superfluous markup you wrote. As well as keeping things tidy, it meant there was less to render by the browser, and as long as you could still achieve the layout and design you wanted then the less code, the more efficient the site, and the better the product was.

Recently I have been getting a little bit frustrated because I have felt I have needed to increase the amount of code to achieve the same results as when I was writing old-school HTML. I'll give you an example - in the old days I would create a navigation menu like so:

It's plain, simple, and the unordered list contains the links that the user will need to browse my site. These days I wrap this unordered list in the brand-new nav element, which semantically makes more sense:

So that's fine, I guess - it's not ideal as I've had to add a new element to what was previously there - but as it's just for one main functional element of the page, then that's ok, right?

Well no, not really - the problem is that I might have more than one group of links on my page that require other nav elements. This means for each one of these unordered lists of navigational links, I add the extra markup to achieve the same result.

The problem is that the extraneous code isn't just restricted to this example either…each new sectioning element can now have it's own h1 (which is excellent), as described on the fantastic Dive Into HTML5, but does that mean that each h1 also needs to be nested in its own header tag? This is where problems creep in, and things could easily start spiraling out of control. What was once a nice, clean document now gets riddled with repetitive extra code that actually, really isn't needed. By adding these things are we making the product better? Is it more semantic, or more machine-readable? And if so does that make the product better?

I would suggest that the header example above could be resolved using common sense really - no, every sectioning element doesn't need to have its own header - the h1 should suffice in many cases. Sometimes the header will be required, but not in every situation.

But back to the nav issue…

WHATWG describes the nav element as "a section of a page that links to other pages or to parts within the page: a section with navigation links".

You will almost always see more important groups of navigational links output as a list, within a ul tag. Looking at that link to WHATWG, you can see that the nav examples mostly contain unordered lists. If this is the case, perhaps we should see the development of a new HTML element or attribute - something along the lines of a navlist tag, or a type="list" to add to the nav tag. This way, we could revert to fewer elements on the page by writing something like the following:

or

Surely browsers could evolve to treat the content like a list of links in the same way as it would other lists, and we create leaner markup.

If measures like this start to be introduced into the specification then I feel that it will help the HTML5 standards continue to improve the quality of products we see day in, day out, on and offline. It'll be easier to create clean products with optimised code, which means everyone wins - the consumer gets to use the fastest-loading interfaces, and the construction of those interfaces can be more solid, and easier to manage too.

WHATWG / W3C - what do you think? I would love to hear what you have to say. HTML is always evolving, so if we can start introducing solutions to make our development lives better, that'd be great. Please!

George Bernard Shaw once said that:

"England and America are two countries separated by a common language."

I think you could argue that in web design circles (and I'm sure other industries too):

"Developers and Clients are two separate entities that are also separated by a common language"

Imagine the scenario: You are building a new music website for a client, and they ask you to add a "shuffle playlist" feature to your product backlog.

Developers love to develop, but without using good communication in the process - via the PM or other (i.e. just letting the developers just crack on with the backlog items) the developers could easily upset the client by delivering their interpretation of shuffle (and not the client's).

Shuffle is a common term, used on almost every good music playlist device, yet it can vary hugely.

"Usually shuffle is completely random, but unfortunately it sometimes can repeat songs."

from: http://en.wikipedia.org/wiki/Shuffle_play

Just a few ways a developer could interpret  "shuffle":

1. Randomise playlist (I don't want to get into the truly random argument!) and play through the list until all songs are played once, then shuffle again (sometimes called shuffle repeat).
2. Play a song, then shuffle the list, then play a song, then shuffle the list...
3. Play a song, shuffle the list - refer to history and see if the next song has already been played, if so shuffle again, if not play it and so on..

Each of them would have different outcomes, and depending on the client - they may get infuriated that you have "mis-read the brief" (it happens!).

Going back to my original point; having communications with the client, and not just assuming the common understanding is sufficient can be the difference between a happy client and an angry client.

See the demo | View the source

The plugin works in all browsers, including IE < 8 and Mobile Safari.

How it works

The plug-in requires a single element to get started. This element should have relative positioning, a width set and no padding. This defines the draggable area. The jQuery plugin should be called on this element like so:

The plugin adds a child element which becomes the handle. This has a class of handle and no styles added by the javascript so it can be styled in your css; it just needs absolute positioning and a width set to be functional.

Mouse and touch event handlers are set up on the handle to detect clicks and drags. If the mouse button is held down / a touch happens for less than 150ms, the plugin treats this as a directive to change state – if it's on it will switch to off and vice versa.

If the mouse/touch action lasts more than 150ms, the plugin treats this input as a drag and will move the handle base on the mouse or touch position. When the drag is finished, the handles position is compared to a balance point – an optional bias – and moves to the nearest state – on or off, where a callback is fired.

Options

Here are all of the options that you can pass to the plugin:

onFunc and offFunc

These are callback functions to be executed when the switch is move to on/off states respectively. They are passed the drag elements for convenience (you don't have to put this in your callback signature if you don't want to use it)

returnTime

This is the amount of time in milliseconds that the handle animation should take to return to its nearest state.

balancePoint

A value from 0–1 to define the position at which the handle should switch to on/off. Closer to 1 means that the handle has to be dropped further to the right before it will stick to the on position. In the demo this is set to 0.9.

runOnce

If this is set to true, once the handle is set to the on position, all event listeners will be detached and it will no longer be interactive. If you want to add some sort of disabled class to the element to indicate this to the user, do it in the onFunc callback.

handleText

If you like, you add text to your handle element with this option.

onTest

A function to be executed when the handle is moved to the on position. This function should return a boolean value. If it returns true, the handle will remain in the on position and proceed to execute the onFunc callback. If the return value is false, the handle will return to the off state and the offFunc callback will be executed.

Usage

Feel free to use the plugin on any project – no attribution required, just leave a comment here if you do. You can find the plugin in my plugin repository on github – github.com/bengourley/Plugins. If you have any feedback or make any improvements, feel free to use the issues and pull requests on there.

See the demo | View the source

$ ab -c 10 -n 500 http://localhost/resource/image/sprite.png

NFS is quicker than Samba

Step 1 - Define what to share over NFS

/private/var/application -alldirs -mapall=501:501

$ sudo vim /etc/exports

$ id

Step 2 - Reload the NFSD config

$ sudo nfsd update

Step 3 - Install NFS client on guest Ubuntu machine

$ sudo apt-get install nfs-common

Step 4 - Mount Host Folder via NFS

192.168.56.1:/private/var/application   /var/application   nfs    _netdev,auto 0	0

$ mount
192.168.56.1:/private/var/application on /var/application type nfs (rw,addr=192.168.56.1)

Next Step

man nfsd
man exports

NFS Manager is a good paid for GUI app that creates your /etc/exports for you.

So it looks like until Virtualbox fix the bug that is causing Shared Folders poor performance we have no choice but to use NFS to access files on both the host and guest.

We run an Ubuntu 10.04.1 VM and use a Apache/PHP stack and serve up sites using files from a folder on the host environment. This method works very well for us, but does mean that a folder on the host system has to somehow be mounted on the guest Linux system. The way the VM software allow this is via a Shared Folder mechanism. You configure a host folder with a identifier and then this is available to mount within the guest system.

Unfortunately Shared Folders on VirtualBox have always preformed badly with our setup and the VirtualBox 4.o release does nothing to improve that:

Using Apache Bench (ab) I get the following results using Shared Folder:

$ ab -c 10 -n 500 http://localhost/resource/image/sprite.png
This is ApacheBench, Version 2.3 <$Revision: 655654 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking localhost (be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests
Finished 500 requests

Server Software:        Apache/2.2.14
Server Hostname:        localhost
Server Port:            80

Document Path:          /resource/image/sprite.png
Document Length:        22581 bytes

Concurrency Level:      10
Time taken for tests:   2.753 seconds
Complete requests:      500
Failed requests:        0
Write errors:           0
Total transferred:      11474000 bytes
HTML transferred:       11290500 bytes
Requests per second:    181.63 [#/sec] (mean)
Time per request:       55.058 [ms] (mean)
Time per request:       5.506 [ms] (mean, across all concurrent requests)
Transfer rate:          4070.29 [Kbytes/sec] received

Connection Times (ms)
 min  mean[+/-sd] median   max
Connect:        0    0   0.6      0       5
Processing:    31   55  14.7     50     118
Waiting:       31   54  14.7     50     118
Total:         31   55  14.9     50     120

Percentage of the requests served within a certain time (ms)
 50%     50
 66%     55
 75%     61
 80%     65
 90%     75
 95%     88
 98%    100
 99%    110
 100%    120 (longest request)

ab -c 10 -n 500 http://localhost/resource/image/sprite.png
This is ApacheBench, Version 2.3 <$Revision: 655654 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking
localhost
(be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests

Finished 500 requests
Server Software:        Apache/2.2.14

Server Hostname:        localhost
Server Port:            80
Document Path:          /resource/image/sprite.png
Document Length:        22581 bytes
Concurrency Level:      10

Time taken for tests:   1.184 seconds
Complete requests:      500
Failed requests:        0
Write errors:           0
Total transferred:      11473517 bytes
HTML transferred:       11290500 bytes
Requests per second:    422.31 [#/sec] (mean)
Time per request:       23.679 [ms] (mean)
Time per request:       2.368 [ms] (mean, across all concurrent requests)
Transfer rate:          9463.72 [Kbytes/sec] received

Connection Times (ms)
min  mean[+/-sd] median   max
Connect:        0    0   0.3      0       3
Processing:     9   23  19.6     16     121
Waiting:        9   23  19.3     16     121
Total:          9   23  19.6     16     121
Percentage of the requests served within a certain time (ms)

50%     16
66%     20
75%     26
80%     28
90%     39
95%     72
98%    111
99%    115
100%    121 (longest request)

As you can see you get 422 requests per second over Samba and on 181 when using Shared Folders. I repeated the test on Windows hosts and got similar results.

On VMWare Fusion and the shared folders performed really well.

So it looks like for now we will have to stick to using the samba shares.

If you're impatient, then skip over to the demo: HTML5 Canvas Chart Demo.

The Idea

We wanted to make something worth using the canvas for. It seemed pointless to draw a simple bar chart in canvas when that can be achieved with divs (or any of your favourite generic elements), so we opted to deal in circles, arcs and radians; firstly a form of pie chart, and secondly 'floating blobs'. However, we didn't want to neglect those not lucky enough to own a decent web browser. When browsers encounter tags they don't understand, their content is still rendered – the way it's dealt with may differ, but we can be sure that if we populate the canvas tags with fallback content, it will be displayed in any browser that doesn't support canvas. What's even better, is that although the content between the canvas tags is not rendered by the browsers that do support it, the contents still exist in the DOM. This is great – we only need one representation of our data; it can reside inside the canvas element and be fetched with Javascript for drawing.

Building It

Inside our canvas element, we decided to store our data in an HTML table, shock horror, but that's ok – it's semantic. This data is retrieved by the Javascript and stored in an array for drawing.

Firstly, we did a bit of normalising of our data. For the pie chart we needed to give each piece of data a proportional slice of the circle, and for the blobs it seemed sensible to give them values to add up to 100%. To draw the pie chart, we used the arc() method with a large stroke size. We also varied the stroke size based on the magnitude of the data which gives a nice dynamic effect. For the blobs, we used the Polar Co-ordinate System to divide the circle up in to equal angles based on how many data points there are, and plot the blobs with a radius based on the size of the data.

Here's a screenshot of the result:

So that's all pretty and stuff, but it lacks bells and whistles. We decided to introduce some animation and easing. The process goes something like this:

• We want the pie to start off with equally sized sections that animate to represent the data we've got.
• We've got a draw-once type function drawPie(). Let's factor out the all of the drawing to another method called drawShapeIncrementFromEqual() which takes an argument called progress.
• Our drawPie() method should now repeatedly call the drawShapeIncrementFromEqual() passing the progress argument between 0 and 1.
• The drawShapeIncrementFromEqual() should draw the chart at its start position if progress = 0, and at it's finishing position if progress = 1, and a linear progression for all values between.
• Now in our drawPie(), instead of passing our progress variable straight to the drawing method, we can run it through a custom easing method. Here we've chosen a nice bouncing ease.

Here's what we've ended up with.

Creating the Fallback

With a bit of CSS and some help from jQuery we can make the fallback data look nice, and even animate in some bar charts. The check for canvas support is simple: getElementById("myCanvasId").getContext will be undefined if canvas is not supported. Take a look at the fallback in your normal canvas capable browser; I've broken the canvas tag to make the fallback kick in.

Canvas fallback.

Unfinished Business

The thing that these charts are missing most is a key. What use is the data if we don't know what it represents? Obviously if we were to use this in a real-life situation then we would make one, but we confess we spent longer on tweaking the easing method than worrying about this!

If you haven't looked at the demo in IE (any version) yet, then don't! It is displaying the fallback content, but the fallback Javascript isn't executing. There are two things that could happen from here: either it's not possible for the javascript to interact with content inside an unrecognised tag. This is the worst case, and I doubt its likelihood, but it could just be styled with some simple CSS. Otherwise IE's not happy with some of the Javascript (somewhat more likely I think), and we could just fix that. I'll save this for a rainy day though, unless anyone would like to offer up any ideas!

Filtersets allow recursion through files with specific includes and excludes, and can be referenced in future if given a specific ID.

#1 Basecamp: It brings the projects (and teams) discussions/assets etc together quite seamlessely and it means you can always refer to agreements and designed/techinal routes for agile projects.

The milestones and to-do’s are a also a great tool for keeping things in-check.

It's my first port-of-call, it's strangely addictive!

#2 Evernote: Use Evernote to save your ideas, things you see, and things you like.  For free.

#3 Mindmeister: A new one for me. Seems fantastic for getting ideas onto paper & forming product backlogs etc

#4 Google Reader: Read your news in one place, sounds obvious - not everyone does it.

Also being able to filter really helps, such as tech news Tech Portal Popsci & PHP Benelux

• Standards allow everyone to follow the same practices, which lowers the learning curve when moving between projects.
• Coding standards make the reading of source code easier, thus lowering the time needed by a developer to understand it.
• Standards make projects easier to maintain.
• 80% of the software life-cycle is maintenance (Sun Microsystems).
• Software is often not maintained by the original author.

For standards of any kind to work EVERYONE MUST do their best follow them.

With that in mind, Eclipse PDT has a very useful tool for setting the layout of classes, functions, logical statements and the like - it's called templates.

Fire up Eclipse and take a look at Preferences > PHP > Editor > Templates.

The name column indicates what you need to type to insert a template.

For instance, to insert the elseif statement, type the name "elif" followed by Control + Space bar  (select the template), and hit enter/return, and hey presto - a Clock coding standards else if statement pre-formatted for your usage.

These templates allow for import and export, so ensuring your developers have imported the templates, you can rid of statements like "oh I didn't know we structured function comments like that" et cetera.

Captcha at the moment requires users to decipher a series of distorted characters and enter them in a text box to confirm they are actually human.

The concept behind the new idea is to use a slider instead of entering characters. They Make Apps use it for their sign up form.

Personally I think it's a great idea however implementations need to be throughly thought through to ensure it actual does the job of what it is supposed to do.

Possible solutions could be made using flash, Javascript or even HTML5.

I am not sure if it will take off, but I really like the idea. What do you think?

I used G-Spot to determine that the video and audio codecs used within the video were standard to Flash 9+ H.264 and AAC. This was unusual as I had tested with this type of video before, and the videos progressively loaded as expected.

After some searching, it is the Moov atom that is responsible. It is needed to be at the beginning of the file for the player to index the video keyframes. Major video editing software packages (including Premier, After Effects and Final Cut Pro) by default place this critical information at the end of the file.

There are a few small tools out there to simply replace the atom to the front of the file including:

• MP4Box - An open source MP4 multiplexer that can move the atom through a simple CLI command:

MP4Box -inter 0 test.mp4

• QTIndexSwapper - An Adobe Air application that does the same thing. It seems to be a very popular tool that is still in development, however for the files I was using I found it did not work and errored: "ERROR: The MOOV atom is not located at the end of the file, the file is ready for progressive download or it is a invalid file"

It goes like this:

Objective

Not to be the player with the lowest card (ace is high) or to be the player holding a red Queen.

The Dealer

The dealer can be 1 or more players. They are the loser of any previous games. and can be carried across any unparticipated games (absent or 'not up for it!' (named the Loomis rule!))

Setup

The loser of any previous games.. "The tea making loser" (dealer) shuffles and fans the playing cards out to be chosen.

The Game

Each player picks a card.

The person who draws the lowest card is the loser, and must make the tea/coffee for every player.

They must ask all players their preferred drink out of Tea or Coffee, then take all cups down to the kitchen.

Instructions on players preferences can be found on the kitchen board.

Although they are the loser they have the added benefit of being exempt from making the tea in the next game, as they become the dealer.

Action Cards

If a player pulls the 'Action Card':

Queen of hearts

They must collect monies from players, or use the biscuit fund, and buy the biscuits (within 48 hours).

Multiple rule: if the queen of hearts is pulled again before the biscuits have been bought, then the puller must buy or bake cakes.

Joker

The player is exempt for the rest of the day, unless they draw a Joker again, causing automatic loss.

A Draw

In what turns out to be, the unlikely event of a draw. the two (or more) players must play a face-off. All cards are returned to the dealer, who shuffles the pack and again fans the cards for the 2 (or more) tied players. They compete (lowest card again loses), this is repeated until a loser is decided.

Fairplay

Fair play must ensue, and underhand play will result in a forfeit decided by the majority group.

Evolving the Game

New rules can be implemented but must be agreed by all official players (including any guest players - if affected)

Now, as if someone has made a great discovery, URL shortners have become popular (I am guessing Twitter made them popular?)..

Facebook have one, Twitter have one, as do Amazon and Google.

I don't want to just rant, but why so popular? Why not just have a system where a User can input 'Link Text' to resolve character restrictions?

Instead of them actually helping me as a User, they hinder me, I am now open to phishing - or more realistically, wasting my time going to a URL that I would have previously not bothered to navigate to!

i.e Check out this awesome link: http://bit.ly/aNVFpF

Stop turning a perfectly usable and good system (DNS) into its previous incarnation!

Tinyurl and alike may as well have turned www.amazon.com into 72.21.210.250 !!!!!

Analyzing the workflows for the two SCMs meant I had a chance to review and document a general policy for versioning, branching and merging. Currently we have a policy but it is passed around like folk-law and evolves during tea game debates. As with most things at Clock, policy is just a guide and the technical leads will still have the final decision on how a project is versioned and branched, but I thought a picture and policy is always nice.

So here is a first draft of an activity diagram to help the team know when to branch, and how to merge projects.

We are a digital design, build and hosting company with strong technology, visual, UX , and software design skills. Clock started in 1997 and has grown from a small design agency to one of the top 100 web agency in the country. Over the years we have used a lot of open source technology but always retained the IP (intellectual property) over the software and services we have built. At times the battle for IP has been the hardest part of  the contract negotiation with our clients. A few years ago I was talking to our CEO, Syd Nadim, about a deal that had stalled  because we couldn't come to an agreement on the IP of the Clock software framework (Atrox). I suggested to him that rather than repeatably going through this pain in the desperate hope that we would make more money controlling the IP, why didn't we just make it free for all to use. Clients have always paid for our skills and our ability to solve their problems. Giving them our frameworks and toolkits wasn't going to stop us selling the our expertise, at worst they would build new web sties on top of our framework without us. After some debate we agreed it would be better they did that and possibly ask us for support in the future rather than dumping our technology and going with another supplier. From then onwards we offered our software under the BSD License which basically gives anyone the rights to do what they like with our code as long as they retain the license and credit us as the authors. This has been working well and the company continued to grow without a dent on revenue from the loss of IP. We now want to take the next step in the open world and actually make everything available and maybe even build a community around some of the tools or services we have produced over the years.

Over the next couple of months myself and others at Clock will be making public our polices, methods and software via this blog. All of this would have previously been for internal eyes only, but I'm hoping that some of it will be of interest to people or and maybe some will contribute feedback and suggestions on how we can make things better.

I'm currently working on a large project which is in the final stages of development. There's an API being called by another company, and any changes they require means another deployment to the testing environment, and usually they need to be pretty snappy. So I'm developing away in my little development corner, refactoring a fair chunk of the code base, when a request comes in for an extra field to be returned in a call. Simple enough, however I've made about 6 other inter-related changes on that file and if I commit it, it's going to break everything.

On a system that's already previously been developed and has a trunk to be deployed, I'd go with the "make the change to the trunk, deploy, and merge" option, however this project isn't at that stage. Making a whole new branch would be more hassle than it's worth. Enter 'Create Patch'.

When creating a patch in Eclipse, it in essence dumps a diff of the files you want to patch into a text file, and that's it. End of. When applying that patch back to the project, it shows you the changes and allows you to merge them back in. This was perfect. All I had to do was create a patch for my single file, revert back to the head revision, make my simple change, commit it, and apply my single patch back onto the file.

If anyone else has other scenarios that creating a patch is useful in, I'd definitely like to know more!

Friend or Internal as it is called in C# is added to methods or properties so that only classess in the same packages can access them. I remember in C++ you could actually allow access from classes outside the package, but whenever I needed to do that I then found I could improve the design of my application to keep coupling down.

I often find that when developing an API I have to make many more of the methods public so other classes in the same package can interact, however I don't intend for the end user of the API to every call these methods. This weakens the API because the internal state of object can be changed by the user often simply by mistake but it can cause unnecessary pain for the user or a lot of additional validation within the class making the code bigger and perform worse.

I'm going to follow this up with some examples, but if anyone has any good examples where software design can be improved by the use of Friends please let me know.