HTML5 is the future of the web, but building the future is hard work and so it’s always great to get a bit of help with that. Some of that help comes in the form of HTML5 Boilerplate from the minds of Paul Irish and Divya Mani, who have teamed up to bring us “the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site”. Boilerplate is basically a bunch of files, the exact kinds of files you would create as you start working on a new website, except that these already contain the basic starting code and include all the best practices baked in. Things like reset styles,pngfix, HTML5 markup and more. I went over most of it line by line and after a few adjustments based on my own personal preferences I’m going to start using it as the base for all websites I work on.
Some of the reasons Boilerplate is awesome:
- The index file has everything you’ll ever need in the <head>, even the stuff you might have not known you needed — like an empty conditional comment so IE doesn’t choke up on its own code.
- There are adjustments for mobile browsers as well as a reference to an iphone compatible icon, because even if you don’t design for mobile specifically, it’s nice to provide at least minimal compatibility.
- jQuery is included via Google API but it has a fallback to a local version
- YUI profiler and asynchronous Google Analytics are included
- The scripts have a wrapper for console.log so you won’t break anything if you forget about it (I do it all the time)
- In addition to reset styles, a few basic and simple styles are included that take care of common tweaks, such as letter spacing, input fields alignment, link outlines, monospace tags (like <code> and <pre>), and even the helper classes like clearfix.
- On top of all that, which already classifies this as awesome, there’s also crossdomain.xml (just in case you want to use it), robots.txt and .htaccess
And they’re not even done yet, as minification script and gzipping are coming.
And just the other day they released an updated “bare bones” version of the the files, without comments. So, you can either get it zipped straight from the site, or go the the github project page.
Well, those folks on webkit dev team sure are moving fast. WebGL (OpenGL for web, i.e. fancy 3d graphics in your browser) spec hasn’t even been finished yet, as far as I know, and they already have the stuff working in the latest webkit builds. The good news about this is of course that as WebGL becomes more widely adopted, we’re going to see some interesting uses of 3D graphics for interfaces on the web. Of course the flipside of that is there’s a good chance that suddenly dozens of sites will spring up with cheesy cubes or spheres rotating with blinking colours or something.
Hopefully most uses of WebGL will be more sophisticated than that
WebGL itself is actually pretty hardcore in comparison to stuff like HTML and JavaScript. It’s a true, honest-to-god programming language. Which means that even simple things take a substantial amount of code. Heck, even initializing the damn thing takes a whole function. On the other hand, it’s also a very well established API (more specifically the OpenGL ES 2.0 API on which WebGL is based on) with plenty of resources, tutorials and websites that cover it from A to Z. So if you’re willing to roll up your sleeves and dig into it you’ll be making spinning cubes with blinking colours in no time.
For all the details and some example check out the WebKit blog.
Gizmodo had a post on an HTML5 experimental page from 9Elements design studio. If you have Firefox 3.5, Safari 4 or latest Chrome build you can check it out yourself here.
It’s really an amazing piece of work — beautiful animations coupled with sound and neat interactivity (clicking the lights displays tweets about the page). All this is done with no Flash, or Silverlight or anything like that, though of course the code that runs all that isn’t exactly trivial, it’s all HTML5, JavaScript and Canvas.
I hope that we see more and more people taking advantage of HTML5. Internet Explorer currently supports only a small subset of HTML5 spec and none of it is for something like this. But if there’s enough push for HTML5, hopefully either the other browsers will leave IE completely in the dust and people will just stop using it (one can always dream), or Microsoft will wiseup and implement proper standards and HTML5 support into IE.
[Gizmodo Post]
