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.
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.
HTML5 Client Side storage. In every browser. Right now.
Somewhere along the road to cloud based storage accessed through web applications a weary programmer sighed and pointed out that you would not have access to your data if you have no internet connection. The response was to add local client side storage as part of the HTML5 spec. Hence-forth you could keep a copy of all your data on your local machine for your web apps to access. Possibly the same programmer pointed out that while this was indeed a solution wouldn’t it require everyone to have fully HTML5 compliant browsers ? I imagine there was a lot of frowning from various people at this point. Never fear though because more clever programming chaps have come up with ways to have client side storage on all browsers. Yes, even those produced by Microsoft, which incidentally have had this ability since IE5.5.
Store.js – http://github.com/marcuswestin/store.js
Lawnchair – http://brianleroux.github.com/lawnchair/
PersistJS – http://pablotron.org/?cid=1557
MilkCrate – http://github.com/garrow/milkcratejs
CSS Media Queries
Nary a month on from the UK launch of the iPad it’s iPhone 4 day. Beyond the sight of people getting giddy over expensive consumer electronics the proliferation of mobile devices with all sorts of different resolutions and orientations raises the question of how best to serve web content that can be viewed as nature intended on all these devices. We’re not even past clients asking for pages that “fit on one screen” to which we invariably point to articles such as this – http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm – so how do we build for everyone ?
One answer are CSS media queries. Simply put these allow you to supply different CSS depending upon queries about the devices resolution and orientation. For more information see http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html and http://www.alistapart.com/articles/responsive-web-design/