• Burberry Live Runway Show

    Throughout my year and a half contracting at Burberry, I was the lead front-end developer for the twice-yearly runway show online experience. With Burberry's huge online fanbase, it was exciting working on something that so many thousands of people across the world would tune in to watch live.

    As well as a live feed of the show, it featured real-time Instagram, Twitter and Facebook Open Graph functionality, and an interactive catalogue to keep users busy (and spending!) long after the show finished.

  • Burberry Eyewear Campaign

    Burberry wanted to present something a little more edgy for their range of Aviator sunglasses, so they decided to shoot music videos for four up-and-coming British music acts and feature them in an online campaign.

    The experience took the form of a streamlined parallax scrolling page for desktop and iPad that allowed users to watch the bands in action and familiarise themselves with the products.

  • Burberry Festive

    For their festive campaign, Burberry wanted an interactive online countdown to the holiday season, introducing the user to more products gradually as they became available to buy during the course two month compaign.

    The Flash centrepiece for the experience was a collaboration with Less Rain, but that left the nitty-gritty of integrating it with the (extremely locked down) Burberry store front-end. Being equally comfortable in JS and AS3, I handled all the back-and-forth AS/JS communication to integrate the experience seamlessly into the Burberry site.

  • Frieze Art Fair

    When we were approached to make the official interactive guide for the Frieze Art Fair, I jumped at the chance to get a great iPhone/iPad project under my belt.

    It's packed with features: interactive fair map with route planner, filtered artwork search, automatic content updates, content bookmarking, and it's fully skinned throughout. The iPhone version proved invaluable for getting around the fair, and the artworks look even better on the iPad. I also threw in a CMS so they could update the content right up until the show, without having to go through Apple's review process.

  • The Henson

    Londonewcastle were looking for a website to promote their new housing development, The Henson. They wanted to attract a young professional audience through an interactive Flash site which was both fun to use, and uncluttered in terms of look and feel.

    It was my job to implement the site framework and layout, so I developed the Mohu MVCS framework and the Mohu layout components, which we've used in pretty much every project since. This also benefited from a Flex version of the CMS I've developed, allowing the clients to update the site without any training whatsoever.

  • Kick-Ass

    Lionsgate wanted a highly interactive, tech-heavy viral promotion for the DVD release of their geek hit Kick-Ass. The Create A Hero viral allows you to drag superhero accessories onto a Facebook photo in real 3D, to create the ultimate superhero cover shot to share with friends.

    I was assigned the Create A Hero and Home sections, as well as adding the Facebook functionality and building the site's structure and navigation. The prop editor makes heavy use of Away3D, plus some nifty image manipulation effects which make the end result surprisingly realistic!

  • Dead Set

    I really enjoyed making the Flash centrepiece which is at the bleeding heart of this viral for E4's Dead Set.

    Charlie Brooker had specifically asked for a terrifyingly creepy video viral to promote his Big-Brother based zombie serial: I was pretty pleased with the result, and apparently so were the BAFTA team when they awarded it the TV Craft BAFTA for 'Interactive Creative Contribution'.

  • Psychoville

    The Psychoville writers really got behind us with this promotion for their BBC comedy thriller series. Users would receive an email from a friend urging them to follow the link to a video on the Graham Norton site, which turns out to reveal an unsettling amount about their darkest secrets...

    The campaign has ended by now but take a look at the send-to-a-friend preview to see it in action. Load a photo, enter a friend's name and secret message and see what happens!

    Fun fact: the 'iPlayer' I made for this is more accessible than the official BBC version.

  • Iron Man Game

    Nickelodeon wanted a fun, fast-paced action game featuring their popular comic book character. After experimenting with various different 3D engines, the performance just wasn't enough for what we wanted so instead I decided to remake the game with pre-rendered video backgrounds. This brought the speed up and kept the game looking much slicker.

    Tip: use the space bar to boost through the training level, then you can start shooting your way towards defeating the evil end boss!

About Me

I first got into digital development in my mid teens, making websites for local businesses, friends' bands, and pretty much anyone I came across who needed an online presence, regardless of how little budget they had to work with.

Despite the tiny amounts of money I actually made from these odd-jobs compared to the amount of hours I'd put in, I always ended up getting a huge amount of satisfaction out of it. By the time I was ready to head off for university I'd cultivated a passion for web development that's stuck ever since.

Over the last decade or so I've been on a mission to learn as much of the trade as I can: from the quirks of CSS, to OOP design patterns, to database optimisation, to framework architecture, to the different challenges and opportunities presented by mobile.

Luckily I haven't been disappointed: there's a lot of good stuff out there, and more by the day. The way I see it, I'd find it pretty tricky to get bored of working as a digital developer, given the proliferation of exciting new languages and frameworks and the rate at which trends appear and disappear.

As for which type of developer I am, it's hard to say. At heart I'm a front-end guy (JS/CSS/CoffeeScript/AS3), but I've always had a good knowledge of the back-end as well (originally PHP, then Python, nowadays more node.js). I like making things that look good and work smoothly, but at the same time I also care intensely about the elegance of the underlying code.

This is why I really enjoy working in digital. It's a field where technology, aesthetics, creativity and attention to detail are all as important as each other — and no matter how much experience you've racked up, there's always more to learn.

Technical Skills

Here come the buzzwords...

General programming skills

  • Strong OOP knowledge
  • Design patterns
  • Dependency injection
  • Framework design
  • Regular expressions

HTML/CSS

  • Thorough knowledge of HTML5/CSS3
  • LESS/SASS/Stylus
  • CSS box model, positioning, floats, etc
  • Media queries and alternate stylesheets
  • Grid960, Baseline grid (press Cmd+; )

Client-side programming

  • Advanced hand-coded OOP JavaScript
  • Backbone.js/Underscore.js
  • AMD and grunt.js build processes
  • Coffeescript
  • TypeScript
  • jQuery / writing jQuery plugins
  • JSON/XML/SOAP/ATOM serialisation

Server-side skills

  • Asynchronous Node.js
  • Experience using MongoDB
  • Server-side backbone.js
  • Thorough knowledge of PHP5/MYSQL
  • Python/Django framework
  • RESTful web services
  • Server-side image manipulation

ActionScript

  • Frameworks: Flex, Robotlegs, PureMVC
  • Data: AMF remoting, XML, JSON, file creation and upload
  • Visual effects: bump mapping, normal mapping, matrix-based filters etc.

Other languages

  • Objective-C, Cocoa, Core Data
  • Java, Google Web Toolkit
  • haXe (for cross-compiling)
  • XSLT and XPATH

Open Source

Check out my Github to see what I've been doing in my spare time

Hacking the Flex Compiler

Mon 18th Apr 2011

Ever wished you could use MXML for laying out your ActionScript views, without having the clunky Flex framework weighing your app down? In this article I'll explain how that's possible, going on to demonstrate how you can modify the MXML preprocessor in the Flex compiler. I'll show you how you can control the exact code that gets generated at compile time, allowing us to implement a cleaner alternative to Flex's data binding.

Read more...

Model-View-Controller

Tue 8th Mar 2011

Once we're confident with our event system, we can begin to lay the foundations of whatever it is we're building. Pretty much all medium-plus-sized web applications will be built around some sort of an architecture: the Model-View-Controller paradigm is one that has proved its worth since being invented over three decades ago, and is often a good choice for a wide variety of projects. Read on for a full introduction to the principles of MVC, and how they apply to the MVC framework I developed for Mohu.

Read more...

A Better Event System

Tue 30th Nov 2010

The need for a better event framework stems from the obvious shortcomings of the event-handling as it stands in most web programming languages. I've consistently found that my gripes with the standard methods for handling events in ActionScript, JavaScript and Cocoa all come down to one central point: listeners all seem to be either too tightly or too loosely coupled to the dispatcher. I'll explain what I mean in the following paragraphs.

Read more...