Pages Menu

Posted by on Jan 30, 2011 in Development | 0 comments

Learning from the HTML5 Boilerplate

This is one of a set of notes for talks I attended as part of DeveloperDeveloperDeveloper9, held at Microsoft Reading on 29th January 2011. They are mostly for my own records, but if you find them useful, good. If you have any questions about the content (unless it’s to tell me I’m irresponsibly wrong), I’d suggest contacting either the speakers or someone who knows more about the content than I do! You can also see the twitter hashtag timeline of the day – #ddd9.

Title: Learning from the HTML5 Boilerplate

Speaker: Dan Maharry



HTML 5 things:
<!doctype html>   <– this is the HTML5 doctype

HTML5 boilerplate is a collection of lots of tips, tricks, improvements, hacks and ideas for using HTML 5, JQuery and CSS intelligently and fast. Not sure if you would actually want to start a project with everything in the boilerplate, but it does make a very good learning tool.

Also comes with ant/MSBuild build files which compress/minify JS, CSS, images etc. automatically.

modernizr – looks at client browser and automatically lists out in CSS all classes supported by browser (so that only what the browser supports is used). You can also get this list via javascript.

Clever idea for using CDN-based JQuery script, but also falling back to local if CDN version can’t be loaded.

Put Google Analytics script at *bottom*. It’s asynchronously loaded, but even so, if at top will call at start of page, even if user presses back before the page has fully loaded. At the bottom of the page, GA results will only be saved if user fully loads page.

Cache-Busting the CSS – use query string with updatedable ‘version’: this.css?v=2
(the build scripts automatically update this version number to bust the cache)

Someone has also created a version of the Boilerplate for use with MVC/Razor project. It’s on Github.

HTMLify is an attempt to ask you what you’ll need (what server, what browsers etc) and tailors the Boilerpate. At at the moment but may move to main Boilerplate page soon.

Post a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This site uses cookies to help make this website better. By continuing to use this site we’ll assume you’re OK with that (implied consent).