web analytics

Category Archives: Web

Node/Express/Backbone/Jade/Heroku tutorial update

I’ve completely refactored my NodeJS/Backbone tutorial. The front end code is much cleaner and easier to understand and I’ve removed the server’s reliance on Backbone, which isn’t suitable for server-side use. I’ve buillt a shared client- and server-side validation module; created proper routing, including 302, 404 and 500 responses; rewritten the CSS so it looks pretty and updated the README file to match the dependency and installation instructions. I’ve also included updated package.json and proc files so it’s ready to run on Heroku. Just set up your app, clone the repo from github and push. Oh, and it generates its own documentation using docco. Wow.

It’s quite a lot of stuff for such a tiny application (which does no more than multiply two number together!) but I think it demonstrates many of the features required to build a basic Javascript web app. I’ll be running my department through the client side aspects of it later this month, so I’d really appreciate any feedback in the comments section, below. The source code is available on GitHub and there is also a Heroku demo.

Screenshot of Javascript MVC Lesson 1: Backbone

Javascript MVC Lesson 1: Backbone

Turkcell: Imitation is the highest form of flattery

Earlier this year, I worked on a project for LBi London where I was lead developer for Turkcell, Turkey’s largest mobile phone company. This Monday, I received an email from one of our designers who’d been contacted by one Yekta Gürel, a UXer from Tribal DDB Istanbul. He informed us that a company in San Francisco, going by the name of Flexible Web Design, had a site that looked almost identical to our work for Turkcell. Further investigation revealed they had swiped about 3 months worth of code, assets and creative and dropped it onto their own servers, looking all the world like it was their new home page. As is oh-so-common these days, it subsequently blew up on Twitter and according to this tweet, Turkcell initiated legal action later that day. Google have now indexed thousands of results on the topic and allegedly the news even hit the mainstream Turkish media. The site was returned to its original state some time later that day but not before a screen shot had been taken by Turkish tech blogger Gökhan Menge.
I’m always proud of the work my team and I do and this is, in many senses, the ultimate form of flattery. I just wish I’d seen it live and in the flesh before it got pulled. Visit Gökhan’s article to judge for yourself quite how flattered we were…

Brian Cox, Bruce Schneier and Jim Walter at Intel Reg Live 2011

I make a brief appearance in a Q&A session with Bruce Schneier and Jim Walter at the Intel Reg Live 2011 event. I ask the man exactly what the title of the book he recommended was. If you want to know, skip ahead to 6:48 or try this Amazon link.

Sadly, my (much better) question to Professor Cox about neutrinos and going faster than light didn’t get recorded because his face is property of the BBC. But just to prove I met him, here’s a photograph of me holding my now signed copy of “Why does E=mc^2?”:

Me with a signed copy of Why Does E=mc^2?

Me with a signed copy of Why Does E=mc^2?

As you can see, I am back home but still utterly star struck. In the end, my eyes took about a week to resume their more usual, slightly sarky appearance.

Writing MVC Javascript – A Node JS tutorial

I’ve been using Backbone JS daily as part of my day job for about three months. I’ve learned a lot in that time and have found it to be very effective at what it does. Whilst I am now much more comfortable with the framework, I had some false starts and I found the documentation slightly intimidating for a noob! Whilst I appreciate that this is in part due to the philosophy behind the software, I would have loved a structured tutorial with an accompanying “Hello World” example.

The problem with “Hello World” is that being an application that outputs only one string, it’s not really suited to a demonstration of MVC techniques which require slightly more dynamic data sources. Instead, I decided to write a simple calculator web server that multiplies two operands supplied by the client and returns the result. It demonstrates the basic principles of MVC on the client using both JSON and traditional form submits. It also has a script to generate its own documentation web pages from the source code, which are served up as part of the tutorial application.

The frontend is written in Backbone, jQuery and HTML5 and is served by Node JS using Express, Backbone, Jade and Browserify. All the documentation is generated with docco and it comes ready for deployment to Heroku.

Fork the code on github
Check out a live demo on Heroku

Christmas comes early in Hackney Wick

Two unexpectedly wonderful things happened to me this week. Firstly, my good friend @rossbruniges asked me to attend the 2011 .Net Awards next week (interestingly, tomorrow afternoon I am interviewing the lead front end developer for one nominee for their Best Site award). The .Net awards are run by .net magazine and aim to recognise the best talent and work in web development. Their parties are legendary and it will be an honour to attend. The second thing was that The Register rang me yesterday to offer me a ticket to see Professor Brian Cox and Bruce Schneier (amongst other luminaries in such diverse subjects as high energy physics and high performance computing) deliver talks at the Altitude 360 bar in Vauxhall for their annual Live! event. I can’t remember being more excited, even when I got the Space Lego Moon Base for Christmas 1986. You can bet I will be taking a camera and my well thumbed copy of Why Does E=mc^2?

Custom Select Element Rage

Custom Select Rage

Custom Select Rage

I produced a presentation for LBi‘s Technology Department Show and Tell sessions. It describes the problems I faced producing Flyweight jQuery Custom Select and how I overcame them, giving a brief summary of the techniques used and a breakdown of the plugin’s eventual performance. Sadly the presentation wasn’t filmed but I do have the slides, which LBi have kindly granted me permission to share with you.

So, without further ado I present you with Custom Select Element Rage. I hope you enjoy reading as much as I enjoyed making it…

Custom Select Element Rage (Open Doc Presentation)
Custom Select Element Rage (Powerpoint Presentation)

This presentation was originally given on 26th August 2011.

Flyweight jQuery Custom Select

I’ve uploaded my first version of a jQuery custom form control to github. Take a look if you’re that way inclined. It’s intended to provide and alternative to the rather heavy jQuery UI version by Filament group. I developed it because Filament’s plugin renders very slowly on older browsers, particularly on pages with many inputs as it replaces each select menu with a full control. My version only implements the parts which must be visible at any one time, thus saving much event binding and many DOM operations, which are the most expensive of any Javascript calls. My version is yet to be ported to the jQuery or jQuery UI module format but it should prove a relatively straightforward process once I get the time.

Check out the theory behind the flyweight design pattern.

Edit 20110726

Added an unstable branch and live demo to the github pages. All branches, including the live demo, are now implemented as a jQuery plugin.

Retro Track and Field Game, HTML5 Canvas Style

My colleague Rob Greville put together a retro Track and Field game which uses the HTML5 canvas. I am hosting it for him on isittheolympicsyet.com.

Is it the Olympics yet?

I just put a new website live. Does what it says on the tin, plus lolz.