HTML5. Again.
This time last year I released my new blog built from scratch on the barebones wordpress theme from Elliot Jay Stocks – starkers, which I nicknamed themed up as sharp due to it’s sharp speech bubbles and used the V logo (standing in for my surname – Vong).
Today I relaunch a similar project which I’ve been working on/off for a while now and hindered due to discover my web host (MediaTemple) not supporting the latest version of Ruby (1.6 and not 1.5). So after playing locally with StaticMatic, Jekyll and GitHub on Ruby, I reverted to a new blank theme and moving over my HAML and SASS.
The whole thing is versioned on my local servers with GIT, written in HAML (similar to zen-coding without the expansion of tags) and SASS. Despite moving away from StaticMatic, the whole site written for it was compiled out to HTML for me to export into php. Something I was very grateful for!
Alongside building the site, I’ve been reading lots of SitePoint and O’Reilly books such as jQuery: Novice to ninja, Why’s Poignant Guide to Ruby, Introducing HTML 5 (Voices That Matter) and I’ve just started on a JavaScript Cookbook as well as a few other books.
For those of you doing web design or building up design patterns – lots of the new semantics in HTML5 will help you in picking and reusing information/designs patterns you have. A great example can be found when looking at the inner workings of: sections, articles and hgroups containing headers, content and footer elements inside them – which could start up some interesting discussions on how you could use them in your layouts. Something that Jeremy Keith looks at in his book HTML5 for Web Designers.
It does all make me wonder how many mistakes we’re all going to make as a result of everyone having different interpretations of how it works with it all being so new. This knock on effect will have a real impact for those of us with little time to practice using HTML5 outside of production, however the web has proved over the years that even the most horrible of implementations and hacks can still have some good impact. If you’re not sure of where to start, a good reference place to begin is with Remy Sharp and Bruce Lawson’s HTML5 examples by simply viewing the source of the example pages.
Despite the use of this site being fully in HTML5 and the existence of Modernizer (the jS script to enable HTML5 for IE and pre-HTML5 browsers), For production and huge traffic websites – I’ll be sticking with div tags using classes their future HTML5 replacements. Using the safest bits of HTML5 – such as improvements to forms improvements and the HTML5 doctype/charset utf-8. In the mean time, I like to think of this site and my mini-projects as preparation for the invasion of the HTML(5) element snatchers.
Right. Enough serious stuff. Now for something random and different. First person to guess where the inspiration for this comes from wins something cool. Just tweet me the answer through the link below.
PS. The video above is using YouTube’s experimental HTML5 feature – an iFrame 
.