I have been working in web development now for 24 years, and have been coding for quite a bit longer. All that time adds up to a lot of projects, and a lot of useful knowledge. Some of which is now, thankfully, well beyond its use-by date — why my brain continues to hold on to work-arounds for Netscape 4.7 bugs, I'll never know...

Strange nostalgic knowledge aside. In order to give a feel for the range of projects I've worked on over the years — and the sheer amount of gobbledegook I've got numerous devices to understand — I've selected a few past projects to display here that have been particularly noteworthy.

See some of past my work

See some of my past positions

ASUS : In Search of Incredible
2011
I have only worked on one project for ASUS, but it was large enough to require every aspect of my expertise and was probably the most complicated project I've worked on to date. This content managed, Flash & HTML5 Hybrid campaign site, boasted 16 languages and allowed users to upload video, audio, photos and text into ASUS's global competition — to find the incredible.

Due to the highly multilingual nature of this site — and choices that were made prior to me entering the fray — it was decided to use a very open source CMS called Ionize, to power the site's front-end content. Unfortunately Ionize was still in BETA, it employed some rather questionable back-end processes, and no page caching.

So whilst it was easy to define translations for each page, when we actually came to launching, the CMS — coupled with high visitor load — almost brought the live servers down.
Questionable back-end processes ... ? Well lets just say I had never, and haven't since, come across a PHP-powered CMS/Framework that passed all of its code through the PHP eval() function. Treating the code as if it were templates to be parsed??!

This action alone circumvented a number of code caching solutions we had in place, and caused normal PHP execution to be about five times slower.

So despite having Akamai edge-caching and a load balancer, the content part of the site just took too much processing. Thankfully (and sensibly) a group of us developers had pushed to use CodeIgniter (a much more weathered framework) to handle the media upload portion of the site, which ran in a much more sensible and predictable way.

I solved the Ionize issue by writing a quick spider that cached the mark-up it generated. This static content was then served to the public. A poor mans Varnish, but it worked.

Gap : VIP Campaign
2009 — 2011
I was brought in to this campaign after a few iterations, so there were a number of decisions I had no control over. I also had no control over the fact that the site itself was hosted on a Windows box, which was my first time dealing with anything so awkward.

Thankfully I did have full control over the codebase, so I was able to build in a number of tools and systems to help me manage what was essentially a rather awkwardly designed campaign. Powered by PHP, this site was responsible for allowing an initial list of VIP users to get early access to 30% off at Gap and to then share with their friends via email.

All I can say is I learned a lot about "user journeys" with this one... and that many users double or triple click links in emails!!

EMI
2006 — 2007
There have been a few times in my work where I've been asked to apply my web knowledge to solve offline problems. Most of these requests came from EMI, and in the shape of touch screen interfaces.

I designed and constructed quite a few offline audio players for album launches. Most notable would be for Robbie Williams and for Iron Maiden. They were built using an animated Flash interface, a configured version of Firefox 2, and the browser-plugin version of VLC.

Lexus
2009 — 2011
For a number of years I worked on numerous projects for Lexus, far too many to recount here in any detail. The work ranged from constructing a monthly email-based newsletter, building campaign-specific emails, banners and mini sites, to data collection apps and intricate flash animations.

During the period of 2009 to 2011 I constructed so many emails for different clients that I actually built myself a number of tools to expedite the work. This included an email test script that would warn me of common email-client specific issues. Despite my efforts however, the Lexus newsletter was a real pain to get pixel perfect, and normally went through a number of test iteration... mainly because it involved the use of one of the most complicated table layouts I had encountered for a number of years. And not to mention that all the mails had to work for Lotus Notes 6.5.4 — the most pernickety email client to have ever existed on the planet.

Waitrose Christmas Pud
2010
I have worked on a number of mini-sites, emails, banners and apps for Waitrose. However one of the most visually interesting and code-involved was for the Heston's prize pudding campaign.

My work on this project involved creating a Flash-based app — that sat within the main Facebook app (coded by a third party) — which allowed a user to choose a slice of Christmas Pudding.
A bit of a random request really...

This was probably my first "Flash Movie" that was destined to be integrated by a remote third-party, which meant there was particular focus on providing an easy to use API to control the pudding's behaviour and animation.

There was also a fun side in trying to get a "realistic" christmas pudding working, from only a few photographs, whilst at the same time keeping bandwidth usage to a minimum.
Interesting side-story

On day one of going live I was asked for help by those managing this Facebook app, because a number of errors and odd happenings were occurring with their site.

This led to a rather hurried live debugging of completely unfamiliar third-party PHP code. A hectic thirty minutes later and I identified and fixed a rather significant database concurrency bug.

Moral of this story, everyone should always run multiple concurrent user testing!

Unilever : Touch Screens
2006, 2007
For a few years running I was in the position to construct a number of touchscreen interfaces for various companies. The most interesting of these projects was definitely building some interactive displays for a number of Unilever's AGMs.

The first four screenshots here are some examples plucked from a number of design options, all constructed in multilayered Photoshop files. This allowed the client to narrow down the styles they preferred. Once the better options were chosen I moved on to a second design iteration, and from this Unilever chose the final template.

I think Unilever were the only client to ever ask me to make the logo smaller.

<<< These four screenshots are taken from one of the final systems, and they show one particular user journey.

The system had to run on a standard offline Windows XP install so I opted to build it using Flash and to run it locally in a slightly modified version of Firefox 1.5/2.

What I was most please about with this project, was that I didn't just hardcode the required elements directly into the Flash stage. Instead I built a recursive template parser in AS2, and used XML files to describe how each page would appear. The parser then created MovieClips, Groups and Text dynamically whilst loading any assets that were required.

Basically it was a simplistic offline browser, with the power of animations and vector graphics.

Tate
2011, 2012, 2013, 2014
Back in 2011 I took on a very interesting two month contract, to help the one and only Tate to revamp their website. Now we're nearing the end of 2014 and I'm still there, still helping to enhance their online presence.

The core site was constructed from scratch in Drupal 7 (PHP/MySQL), which has steadily been upgraded over the years with a number of useful bespoke features (minisite capability, social sign in, audio and video groups, improved landing page support, mobile tours). I have also been involved in a number of sibling projects like Turbine Generation, and just recently Art & Artists.

Art & Artists was singularly interesting because the project involved replacing the existing java-powered tate.org.uk/art with a completely new Django/Python back-end. This actually gave me the chance to delve into Python, a language I have always found intriguing... and if I'm honest, I definitely prefer it to PHP (esp. the way PHP is going).

My career as a Web Developer started when instead of going to University — to pursue Sequencing and Video Production — I decided to help three other friends start up a web development company, Fubra. We came into things just after the dot com bubble had burst, so we had our work very much cut out for us. The hours were long and the work was hard, but the learning curves were fun and the projects we produced were compelling.

Fubra is still going strong today. They now have their own offices, a huge network of popular web sites, they invest in other start-ups, and they have employees from around the world.

Whilst at Fubra I constructed a number of large-scale web projects (sites and applications) that handled high numbers of users. A typical early project for me would cover the initial logo and site design, back-end database implementation, and the server-side and client-side coding. Later projects were much more of a group effort and the tasks I would perform would be dependent on how the project had been divided and delegated.

2000 — 2007

My early forays into programing had centered around creating my own games, first on a Spectrum ZX81, and then on a 128K, and then when I was older on my very own Amiga 600! When, begrudgingly, I moved away from the Amiga to the world or Windows, I found that nothing there compared to the simplicity and sense of creative fun I had experienced with the likes of AMOS Basic and D-Paint. JavaScript and the browser environment were good, but not great visually (DHTML!?). CorelDRAW was awful. Photoshop was far far better, but still clunky and complex.

That was until I got into the world of Flash and ActionScript. Flash was quite an attraction for me due to the exciting collision of coding, animation, and effects. Its close link to JavaScript to didn't hurt either. It was vector-based, so I couldn't be as precise with those pixels; But it made up for that in lots of other ways.

At the time Fubra was mainly focused on PHP, so I decided to head out on my own. This led to a number of interesting and slightly experimental projects, a favourite of which was a fully customisable touch screen CMS written in AS2. I still kept in touch with the Fubra world however, and freelanced a few projects for them. An example would be an interactive and dynamic Flash-based graph depicting house prices.

2005 — 2009

I worked at Kitcatt Nohr for just over two years as part of their Studio team, a group of very talented, and not to mention very definitely fun guys and gals.

Kitcatt Nohr itself was a great place to work and learn, mainly because the place had a friendly atmosphere, but also because the work demands fluctuated between good days and "Oh my god what was <insert names of all sentient entities involved here> thinking"!

Their house website — depicted below — was constructed by myself and fellow WebDev Luke Mourino, and was powered by Drupal 6 along with a bunch of core modules, and not to mention more than a smattering of bespoke CSS, PHP and JavaScript. Unfortunately, as with everything in this temporary world, the site has now been replaced with Wordpress. It did survive for at least 3 years however, and in the world of advertising, that is quite a while!

Tate
2011 — 2015
Back in 2011 I took on a very interesting contracting role, to help the one and only Tate to revamp their website. Now we're in 2015 and I'm still there, still helping to enhance their online presence in a multitude of different ways.

The core site was constructed from scratch in Drupal 7 (PHP/MySQL), which has steadily been upgraded over the years with a number of useful bespoke features (minisite capability, social sign in, audio and video groups, improved landing page support, mobile tours). I have also been involved in a number of sibling projects like Turbine Generation, and just recently Art & Artists.

Art & Artists was singularly interesting because the project involved replacing the existing java-powered tate.org.uk/art with a completely new Django/Python back-end. This actually gave me the chance to delve into Python, a language I have always found intriguing... and if I'm honest, I definitely prefer it to PHP (esp. the way PHP is going).

There's a reason why I continue to work in web development, and that's simply because I'm passionate about the web and all that it can achieve. It also doesn't hurt that I'm deeply interested in code and the way complexity can be derived from relatively simplistic rules. So I understand how lucky I am to have such a job that allows me to combine the reach of the web, the power of code and the intrigue of visual design.

This is why my experience covers pretty much every useful aspect of web development — from small five page sites, to complicated affiliate systems, from intranet admin panels, to full-blown multilingual campaigns... and even simple banner animation to fully interactive online games. Put simply, because I enjoy creating and inventing for this newly born global network of information and utility.

Experience Skills

Whilst design is not my core business, I am more than competent when it comes to producing well thought-out usable layouts, logos or animations.

The main secret to creating any good design is to balance form with function; and with so many different technologies to choose from — and so many devices to cater for — I believe that artful developers are your best bet if you want to avoid the many pitfalls that can befall new sites and redesigns.

Example Designs

My Games

If you have managed to discover the other levels of this website, you will know that I have a number of on-going (never ending?) game projects. Much of what has taken the time is not the coding side, but rather the design — in the form of game assets, animations, maps and levels.

The first example here is game screen from ALWTM, in the Clockwork forest. The second is some design work from Gadgets.
Paintings

I will have to admit I don't get the time these days, but I used to enjoy taking a weekend to produce rather colourful and abstract paintings. Nothing much to do with my professional business, but I believe my understanding of colour and form greatly aid my design approach.
Template requests

Some of my simpler tasks over the years has been to construct simple web templates, and sometimes a complete brand including on and offline logo design. The example shown here is for a World of Warcraft Guild with a name inspired from the "His Dark Materials" trilogy written by Philip Pullman.

The logo is obviously an interpretation of an Angel, but won't probably quite so obvious is that the encompassing ring is attempting to hark back to the Alethiometer and a tower viewed from above.
Made to measure

Quite often my own design work will have to fit in or around existing styles, designs and artwork.

An example of this is with Tim Turner's web presence. As a creative type himself, he has a wealth of 2d and 3d work that his website needs to display.

To the left is a screen shot of his earlier website, this shows quite well the collaboration between his character work and the site's layout.
Own designs

It is quite often the lament of many-a-good-webdeveloper that they don't get enough time to work on their own website, which always reminds me of that strange hair-dresser riddle. So perhaps I should scruffle up this current website a bit. Although to be fair this recent incarnation has taken me two years to perfect.

I tend to use my own website as an experimental battle ground. I try out all the new fangled thingywatsits — the ones that will probably become standard in not too long, but that would induce puzzled or shocked reactions in any client or internal IT department. Doing this means I'm ready for the next wave of webisms, so when a simple question is asked, I can give a simple answer.

Before I start building anything however, I sit down with Photoshop.
Custom Designs

I've had to call on my Photoshop, Flash, Inkscape and Illustrator skills numerous times during my time as a developer of internet-enabled bits and pieces; and even for things that exist in the real world too.

My design skills are most often best put to use in coming up with unique and intuitive interfaces, memorable icons and logos, or just down-right strange and colourful characters,
Admin panels

Over the years I've designed my fair share of administration panels. It is one of the most fulfilling parts of my job, when I'm told by a client that I've streamlined a process they've been stuck with and complaining about for some time.

It is often the easiest thing in the world for me to add just a singular button to a system, that can save hours and hours of time per day.

Design approach

For me, the best way to approach any interface, is to ask the target audience what elements are key to their tasks; but it is surprising how infrequently this is done by the businesses I've worked with.

Admin panel design should be more about functionality than aesthetics, although where ever possible I try to push for both usability and beauty.

Note: Beauty is not something that many would use to describe websites that were constructed in the early 2000s however, as some of these panels were.

Nuteshell.js is a simple JavaScript library that can be used to create data snapshots of single webpages or entire websites, once recorded, the data is stored on your nutshell account and can be filtered, downloaded and replayed.

Nutshell is designed to help import or export information from websites that may not have a built-in ability to do so; for example, it was created to help deal with rolling out certain configuration settings within Drupal.

Download Coming Soon

Minisnap.js is an experimental library that attempts to generate a screenshot of the current browser page by stepping the DOM and rendering to a canvas element (currently it requires jQuery). It is by no means infallible, nor is it unique — as there are other projects that exist with a the same goal, like html2canvas.

This library exists because we needed this ability for some very specific CodeLamp tasks, tasks which other libraries didn't quite support. If you find it useful, feel free to make use or modify it.

Download (14KB)

Pockets is a restful database that is enhanced with an easy to use UI. The system boasts clever filtering abilities and is ready to use straight from your browser.

Pockets also exposes a powerful API to a number of popular languages that allows interrogation of your data in interesting ways.

Think of it as jQuery, but for data, with a nice CMS-like UI thrown in.

Coming soon

E.x.i.t.

Escape the eleventh terminus

Exit is a game idea I've been working towards since 2009.

The principal is simple, but the execution tricky. Basically my aim is to get a realistic 2D movement for the main character, that verges on the flexibility of parkour... and then provide the player with lots of tricky situations to get out of in the nick of time.

I've attempted a number of different approaches over the years. Reseting sometimes due to technological advances or just not being happy with the current state of the system.

Currently I'm working on an SVG version, augmented with the power of D3 manipulations and transforms.

See Prep work

E.X.I.T. — Control Systems

Exit isn't a game I'm building for its story, it isn't a game that will have "amazing graphics", it isn't even built with an aim of teaching anyone anything... My main reason for taking my time and wanting to produce this game, is the control system.

I've played a number of games in my time, some I've loved, some have been rather disappointing... and there is nearly always a pattern between the two. The games that employ a well designed, well executed control system, become a joy to play. The ones that don't fail to survive, even if the other elements of the game are great.

Sadly, well-built control systems are few and far between, mainly because it takes a lot of work... and that is the reason I'm still working away, trying to build the best one I can.

E.X.I.T. — Design

The other part of Exit that I hope to make quite interesting is the way that the levels are formed. Levels will be built randomly from specifically designed segments, that will flow into each other. In parts the game pace will be very quick, and at others puzzling and slow. This will be down to which ever segments parts are chosen to load in next.

One inspiration for this game was a run of flash-based animations, called the Xiaoxiao series, which started back in early 2000s. The attention to detail and physical motion was pretty special for "simple" flash animations. And ever since watching the first one I had always thought if someone could get a similar range of motions into a game, that would be pretty special too.

The other inspiration is quite obviously a piece of graphic design that you'll find hard to miss during your day. This game will be my chance to give this eternally trapped little guy, a chance for escape.

Pebbl.co.uk

Where nothing is as it seems, unlike everything else.

Pebbl is almost ready for re-launch!

The code now on pebbl.co.uk is a revamped engine powered by Phaser/Pixi js. This is my fourth attempt at an engine to power this strange game. And despite the amount of time plowed into something that does not yet exist in the eyes of the interweb, Pebbl has single handedly helped me learn a cornucopia of different techniques and technologies.

In trying to construct this original canvas-based experiment, back when canvas was new, and for some reason slower to clear than draw on??! I have wandered through the realms of Canvas 2D Context, Canvas 3D Context, a hybrid mix of Canvas and DOM, then SVG, Pixi.js, Paper.js, Three.js, EaselJS, Phaser, Unity 3D, Unity 2D and then back again to a hybrid of Canvas and SVG.

See demos

Pebbl Canvas Old — Click to play
Canvas-ready browser Required

Pebbl 0.0 : Canvas Demo (2009)

This was my first proper foray into canvas. As you can see in today's browsers its computational speed changes leave a lot to be desired. But the bare bones are there.

I wasn't happy at the time with the cross-browser support. Silly small differences between the user-agents sent me round in circles — just like when I started web development. Not to mention I was pretty much building my own Phaser / Pixi.js whilst juggling full time work, London landlords, and working with fun people who oddly kept going out — rather than building their own strange online projects ;)

UP

LEFT

DOWN

RIGHT

Pebbl Unity 0.1 — Click to play
Unity WebPlayer Required

Pebbl 0.1 : Unity Demo

This is a very small demo that I used to help me learn Unity back in 2013, and also to see if it was viable to get Pebbl working in such a 3D environment.

My plan for Pebbl has always been something a-kin to a web comic, in the fact that I hope to release a new puzzle weekly/monthly once I have the game engine sorted. Development with Unity turned out to be too slow for this particular project, but I was taken with how powerful the system was, and how much easier C# was to pick-up than I had first thought it would be.

Not to self: Curved surfaces — that are supposed to behave as flat in a physics environment — are a recipe for headaches.

UP

LEFT

DOWN

RIGHT

Pebbl Unity 0.2 — Click to play
Unity WebPlayer Required

Pebbl 0.2 : Unity Demo

This demo boasted animating of 3D shapes (press space or double tap!), which was rather tricky to get working. It behaves quite well, although the tweening plays havoc with the physical interactions. For all my games there has been a constant battle going on in my mind as to whether I should programmatically code all the different physical reactions, or to rely on a physics engine.

My current conclusion is to avoid physics, it helps you get reactions quickly, but is a blighter to control accurately... just like the real world, nothing stays where you put it!

UP

LEFT

DOWN

RIGHT

Pebbl, as of 2015

Currently I have a number of other demos that form the basis of Pebbl as it stands at the moment, which I'll hopefully be releasing soon.

Like with my other projects I've moved over to a SVG / WebGL / Canvas hybrid. I'm still trying to find the best mixture of supporting libraries however. My favourite combination so far is a smattering of bespoke code tying together Underscore.js, Pixi.js, D3, and Spine.

My main focus for now is getting the back-end storage system up and running. The one that will keep track of your inventory and progress through the game. For this I'm working heavily with Node.js and Mongo DB, and hope to have a prototype ready soon.

Gadgets

Go Fourth

Gadgets is an idea I've had in my head for a long, long time.

In fact I have the entire game world and story mapped out. I just need to get the right engine to power it. And the beauty with this idea is that there won't be any where near the same number of assets to build as in my other games.

This game is currently relying on my Pebbl engine. Once that is complete I should be able to put Gadgets together pretty quickly.

See designs

ALWTM

I will finish this one day...

"A long way till morning" just won't leave me alone.

Ever since the idea barged its way into my thinking way back in 2006, I've been using any free moment I've had — in amongst trying to live a relatively normal life — to push this from vapor to reality.

I don't really care if it takes my 30 years. I will get this mix of platformer and puzzler built. The only problem is that all my ideas for this personal project are overly ambitious, but then I wouldn't be happy with the end result if they weren't.

Most of my time — between then and now — has been spent generating assets. I've stop-started a number of times with regard to the engine. But as with my other projects, technology kept getting in the way. Thankfully, that seems to be changing...

HTML5 Presentation

Unity Demo

With thanks to ...

So many of my websites and projects would not be possible without the following brilliant services, languages, libraries and applications.

CodeLamp

Imaginative web development solutions

ASUS : In Search of Incredible

Gap : VIP Campaign

EMI

Lexus

Waitrose Christmas Pud

Interesting side-story

Unilever : Touch Screens

Tate

Tate

E.x.i.t.

Escape the eleventh terminus

Pebbl.co.uk

Where nothing is as it seems, unlike everything else.

Click to play

Click to play

Click to play

Click to play

Gadgets

Go Fourth

Feasibility Test with EaselJS

ALWTM

I will finish this one day...

With thanks to ...

Special Features