Posts Tagged ‘html5’

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.

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.

HTML5 and CSS3 wizardry wokshop06

At 6:15am on Wednesday 2nd September I left Reading to travel to Brighton. On arrival, after a swift Sausage McMuffin breakfast, I headed to the Clearleft office to attend a workshop entitled HTML5 and CSS3 Wizardry.

img_3020CSS3 workshop in progessBrighton pier


The workshop which was part of dConstruct 2009 was split into two halves. In the morning Jeremy Keith (@adactio) explained the evolution of HTML. This interesting journey covered the complete history of HTML and introduced the various individuals and associations responsible for its development over the years. The focus then shifted to the future of HTML and new HTML5 specification. Jeremy introduced the new doctypes, tags and attributes available to web authors and gave examples of their usage. Much like Remy Sharp’s HTML5 presentation at geek in the park a few weeks earlier Jeremy explained how these new tags can be incorporated into existing websites and how best to approach support in older browsers.

Jeremy was also very keen to highlight areas of the spec which he believed could be improved. In particular the disambiguation of the usage of section/article tags and similarly the figure/aside tags. He also raised concerns about the strict and counter-intuitive usage defined for the new footer tag*. Jeremy encouraged others to get involved with the WHATWG mailing list and raise any concerns before the working draft deadline in October.

* The very next day the footer tag specification was amended to be more inline with the header element… hooray!


The afternoon session run by Richard Rutter (@clagnut) and Natalie Downe (@Natbat) focused on CSS3. The talk covered, in detail, a large number of the new CSS3 modules and discussed how best to implement these new technologies without compromising backwards compatibility. Of particular interest to me was the advanced use of border-radius and understanding the full list of options available for box-shadow.

Towards the end of the session they demonstrated some of the more bizarre elements of CSS3. The weirdest of these by far was the css3 template module, a quirky new way to define a web page layout by drawing an ASCII art blue print (complete with dimensions) within your CSS file… very strange indeed.

The venue and hospitality at the workshop were great, the presentations were well researched and hugely informative. Unfortunately, due to the experimental nature of the content covered I felt that there was very little that I could implement at work due of the huge proportion of our users still using legacy browsers. With such a small audience and no immediate impact on revenue I think it will be a long time before large corporate websites will invest any significant resources into CSS3 related projects. On a brighter note the examples demonstrated contained some inspiring eye-candy which I will definitely consider for personal projects outside of the corporate environment.

After an enjoyable early evening drink in The Fountain Head and some fish and chips on Brighton pier I returned to Reading.

Geek in the park 200916

Yesterday I spent an enjoyable afternoon in Jephson Gardens, Royal Leamington Spa, for this year’s Geek in the Park event. The afternoon consisted of lounging in the sun, feasting on our picnic and drinking rather a lot of red wine. This was interspersed with several somewhat amateur rounds of ‘keepy uppy’ none of which lasted very long because of the glorious heat. Later on in the afternoon we were lucky enough to get ringside seats for a drunken brawl between two of Leamington’s finest skinhead cider connoisseurs. This incredibly one-sided fight disbanded after the three rounds of pummeling and was then cleaned up by the local police.

Jephson Garden's band stand, geek in the park 2009

As seven o’clock approached the geeks gathered in the south east corner of the park, between the bandstand and the Royal Pump Rooms, our home for the evening. The conference room was smaller than I had expected but was very pleasant. I decided to get the beers in before the first talk, however this turned out to be a lot harder than I had expected. Both Carlsberg and John Smiths had run dry and then the barkeep proceeded to tell me that the single bottle of corona was only in the fridge ‘just in case’. Eventually, armed with a bottle of Bud I settled in my seat ready for the first talk.

Simon Collison – ‘Nailing your own projects’

Simon Collison, nailing your own projects

First up was Simon Collison (@colly) who was talking about project management and process. Particular focus was given to the strategies used at Erskine Design when redesigning their own portfolio website. Simon sung the praises of several project management/planning tools including basecamp, codebase and some hexagonal magnets for team brainstorming from logo visual. Simon then went on to share some of the tools he likes to use to collect inspirational materials and share them with his team online. Using LittleSnapper and Dropbox Erskine are able to create communal, collaborative mood boards. The talk was an interesting insight into how Erskine design approach a project as a team and I found it quite motivating.

Remy Sharp – ‘HTML5 and friends’

Remy Sharp, HTML5 and Friends

After a short interval and more amusement from the barkeep pooring coke all over his hand instead of in the glass I returned to my seat for the second half of the evening. Next up was Remy Sharp (@rem) who was here to talk about ‘HTML5 and Friends’. I had already read a fair amount of Remy’s HTML 5 work on his blog and on the HTML 5 Doctor website so I was familiar with a lot of his material. Despite this it was great to have these ideas reinforced and demonstrated in person. It was also nice to see the personality behind the pages of words that had filled my screen over the previous weeks. The take home message from the talk was HTML 5 is ready to start implementing now and with minimal effort the core features can be made to work in all major browsers.

All in all it was a great day and I will definitely keep an eye open for more geek in the park events. You can see the rest of my photos on flickr. Big thanks to @doodlemoonch for driving to Leamington Spa and back.

Slides from the presentations

Simon Collison – ‘Nailing your own projects’
Remy Sharp – ‘HTML5 and friends’