Posts Tagged ‘javascript’

Exploring Canvas – An ode to PS301

For me, the most exciting part of downloading a PS3 update is restarting, hearing that sound* and seeing if the shimmering ribbon of glory has been updated. Whether its a new colour, a floatier ribbon or more sparkles, it always seems to get better and better.


Earlier this week, as often happens, I found myself sitting in a darkened room, half reading email on my iPad, and half mesmerised by the PS3 wallpaper. My mind started wandering and I began to think about who made it and what the technology behind it was. I then decided that it was my destiny to try and recreate it. Not having access to any 3D design/animation software I decided to approach the challenge in a more familiar technology… Javascript, or more specifically Canvas.

Progress to date… (Not master branch)

Preview of PS3 style animation

Source on GitHub | Demo of latest version

Right now it’s a bit of a work in progress, it’s got a reasonable interpretation of the organic waves but it’s missing the sparkly bits. Once it’s finished, and if there is any interest (let me know in the comments), I might break it down into some tutorial posts.

DISCLAIMER: It’s only been tested in chrome so far so don’t be disappointed if you’re in another browser and nowt happens.

* The startup sound of the PS3 (which I believe is the sound of an orchestra’s string section tuning up) always reminds me of the opening to Keep the Car Running – Arcade Fire. Once this connection is made in your brain you will never be able to turn on your PS3 without your inner jukebox bursting into song… pretty annoying huh?… I’m sorry.

PS – I just lost the game.

Backbone.js – Time for Something New20

Backbone.js logo

Last week I was involved in a discussion which amongst other topics covered working with github and building javascript apps with client-side MVC frameworks such as backbone.js. Whilst I had a vague awareness of both I was unable to contribute very much to the conversation due to a lack of hands-on experience. Feeling rather frustrated by this I decided to grab the bull by the horns and jump straight into building a new backbone app and pushing the source code to github.

Last night, as a result, drinklist was born. The app itself is currently very basic and is neither intended to change the world nor make me famous. What I do however hope is that overtime it will evolve into a respectable code example which will cover some skills that I have not yet found an opportunity to implement in my current job.

The technologies involved in the app are:

The first version of the demo app also includes a to “Still to do…” list which outlines where I hope this learning exercise will take me.

Feedback from any more experienced backbone folk or suggested reading links would be much appreciated.

Node.js – Server-side JavaScript24

Last Friday I was lucky enough to attend Remy Sharp‘s one day Node.js workshop in London.

nodejs - server side javascript

The course started, rather conveniently, from the very beginning and concisely covered the basic installation of node.js and getting up and running with node package manager.

Next we used express.js, a node web framework, to rapidly build and deploy a data-driven webapp complete with custom url routing, and EJS page templating. As if this wasn’t already enough, we then wrote another line or two of code to add a fully functional JSON API to provide access our site’s data… amazing!

For me this was the highlight of the day. The speed with which new prototypes can be built and deployed is astonishing. Express JS kind of reminded me of the CodeIgniter PHP framework except it was quicker and easier to work with in almost every respect.

After a very impressive two course lunch, complete with a salad bar (all included in the ticket price) we headed back to the classroom to learn how to create a variety of web servers to support:

For the lazier readers amongst you, there is a good summary of all these technologies over at the HTML5Doctor blog.

Unfortunately, due to evolution of the workshop syllabus throughout Remy’s tour, learning about databases (MongoDB) was no longer in scope for the course. However, thanks to the solid foundation I got from the rest of the course, I am now confident that I can work this part out on my own.

WARNING: After a couple of beers it seems Remy has a tendency to get over-excited whilst demoing his pet projects. If there are any full pints on the table, get your laptop and bag out of the way ASAP!

All in all a great day. I left feeling inspired to build new things, eager to learn more and smelling somewhat beery, thanks Remy.

HTML5 site of the month22

This month’s issue of .net magazine has awarded the recently reskinned HTML5 site of the month!

HTML5 Site of the Month badge

As a front-end developer on the project I was quoted in the article as saying…

“The front-end dev team at Yell wanted to advance the coding standards, and moving to the HTML5 doctype was the first logical step. We made use of custom data attributes, placeholder attributes and local storage, all of which contributed to an improvement in the quality of our source code and the performance of our JavaScript. We also had the added benefit of being able to simplify our charset, style and script tags.” – Chris Bewick

This was an excellent project to work on and I am delighted with the reponse. Many thanks to @brucel for the great write-up and to @doodlemoonch for being, as always, a delight to work with.

This article can be found on page 57 of issue 204 of .net magazine.

Doctor, doctor…27

html5 doctor logo

I am really excited to be able to announce the publishing of my guest author post, HTML5 Custom Data Attributes (data-*) on the HTML5 Doctor website.

I have used HTML5 Doctor as a learning resource many times in the past and it feels great to be able to give a little something back.

Many thanks to Richard Clark, Remy Sharp and Mike Robinson for their constructive feedback on the article.

Full Frontal 2009 – Back to Brighton25

Last Friday I got up early and headed south on the train. My destination was the Duke of York Picturehouse in sunny (couldn’t be farther from the truth) Brighton. The reason for this outing was the first ever Full Frontal JavaScript conference, organised and curated by Remy Sharp (@rem).


On arrival in Brighton I was faced with a 10 minute uphill trudge in the rain. This was not an ideal start to the day but, before too long I had successfully navigated to my destination, which as had been pointed out to me a couple of days earlier “cannot be missed” due to a massive pair of stocking-clad legs sticking out of the roof. After a well needed cup of tea and two (yeah that’s right, two!) pain au chocolat I settled down into what must have been the most comfortable conference seat ever and prepared myself for the day’s talks.

Full Frontal 2009 Itinerary

A day of firsts…

Full frontal was a day of firsts… It was the first time I had been to a purely javascript conference, it was the first time I had properly understood closures (thanks to @robertnyman) and most importantly, it was the first time I had ever been to a conference where I had enjoyed every single talk. This was a brilliant suprise because in the past at conferences I have always found myself clock-watching in at least one presentation and wishing it would finish so I could go and get another free tea and danish.

The highlight of the day for me was Robert Nyman’s talk, which was a fantastic (albeit heavily Ben Affleck orientated) summary of everything you needed to know in order to be a JavaScript wizard. I also really enjoyed Jake Archibald’s talk on performing your own JavaScript performance research and how best to incorporate JavaScript libraries. The humour and enthusiasm he put into this potentially very boring topic was excellent.

Original presentation methods

Another thing that really impressed was the quality and originality of the presentation materials used, with three out of the seven talks not using powerpoint or keynote. Jake Archibald’s presentation was done entirely in flash, which despite being a little controversial for a JavaScript conference was incredibly well designed and animated. Stuart Langridge had made his own Javascript/CSS3 web-based presentation software, which he later told me would be available to download once he could sort out all the “fucking trigonometry”. Last but not least was Simon Willison’s presentation, which consisted of an original and brave navigation around 16 Mac OSX spaces arranged in a 4 x 4 grid, it was pretty hectic but it worked.

All in all the conference was a wonderful success and I really hope it happens again in 2010. The night ended with what was possibly the best burger I have ever tasted and a few beers at the OHSO Social on Brighton beach. Higher resolution versions of my photos are available on flickr along with many others in the Full Frontal Conference pool.