HTML5 Rocks
Google have updated their HTML5Rocks website with all new content – http://www.html5rocks.com/ While obviously targeted at Chrome developers in particular the site has grown from the demo slideshow presented last year into a useful point of reference now containing samples and tutorials.
Also gaining some traction are sites offering basic HTML5 frameworks such as HTML5 Boilerplate – http://html5boilerplate.com/ – which help ease the development time which stock implementations of basic code. Even with such reference code becoming commonplace web application development still lacks tools to speed up the process. Two that are headed in the right direction though are Glimmer – http://visitmix.com/labs/glimmer/ – a Flash-like jQuery animation builder and 280North’s Atlas – http://280atlas.com/ – which mimics Apple’s Xcode. With an acceleration of support for new web standards we hope there will be an increase in the availability of such tools.
Competition Season
The demo scene has been around for a long time. Starting out as intros for cracked software titles back as far as the Commodore 64 days it wasn’t long until tech heads were admiring the work of the coders putting together the jaw dropping technical displays pushing hardware to it’s limit more than the software they had obtained by less than legitimate means. The idea of a demo is to push hardware to produce effects that shouldn’t in all reason be possible while doing so with the least amount of code possible. 64k is seen as pretty roomy for a program, 16k is still enough room to swing a cat but the true hardcore programmers show their skills with a limit of 1k. That’s 1024 bytes. To put that in perspective this article is already 775 characters long at this point.
Creating a program that not only does something in such a small size but produces effects that can push hardware to it’s limits is awe inspiring. This scene has now jumped to the web with the advent of the 1k Javascript contest – http://js1k.com/home – which challenges programmers to produce the same dizzying effects through a simple webpage that allows 1024 characters of Javascript. The results are to a programmers eye a least impressive. See this for example – http://js1k.com/demo/15 – results will of course depend upon your browser, more specifically it’s support for the Canvas element and the speed of it’s javascript engine. Internet Explorer is out of the question but webkit based browsers like Chrome and Safari will display the effects fine.
Somewhat related is An Event Apart’s 10k app contest – http://10k.aneventapart.com/ – the idea of which is to create a useful web app in jst 10k of code with a prospect of a juicy $3,000 reward for the best entry. While the results are less inspiring to a coders eye than the 1k Javascript contest it does show how seriously the web community is now pushing the adoption of HTML5 and especially experimenting with the possibilities of the Canvas tag.
Konami Code
A recent mock up for a new design had a couple of us musing on the avenues for adding interesting discoverable content to websites. By interesting I of course mean silliness that may not be appreciated by the clientèle and so the thought ended there. There are however websites that have audiences that are perhaps more appreciative of easter eggs. A growing subset of these use the Konami Code first seen back in the heady days of the NES. Enter the elusive code on such a site and all manner of wackiness occurs. Try it on Facebook for instance. Clearly it’s a bit onerous to try this on every website you visit just on the off chance they have something for you but thankfully wikipedia steps up with this handy list – http://en.wikipedia.org/wiki/List_of_Konami_code_websites
Want to add it to your website ? Konami-js provides an easy drop in solution http://www.snaptortoise.com/konami-js/ and there’s a jQuery plug-in for fans of that library http://www.gethifi.com/blog/konami-code-jquery-plugin-pointlessly-easy
P.s. It’s Up, Up, Down, Down, Left, Right, Left, Right, B, A
CSS3 PIE
Internet Explorer has long been the bane of modern web development and while Microsoft are forging ahead with an ever growing list of features for IE9 there will still be for some time a need to support earlier versions. To meet the need for brand spanking new HTML and CSS support in old browsers there is a slowly increasing list of workarounds usually involving Javascript that enables the latest features. While certainly not the first CSS3 PIE is one of the more interesting solutions to the problem as it adds some of the more eye catching styling abilities of CSS3 to IE6 thru 8. With the addition of a simple behaviour file to your CSS you can have support for gradients, shadows and yes, even rounded corners.