Issue #23 - February 1, 2012
Welcome to both February and issue 23 of HTML5 Weekly. I'm still working hard on preparing my new Status Code newsletter this week so let's get straight to the stories! - Peter.
News and Latest Developments
Twitter has unveiled a dramatically evolved version of their popular 'Bootstrap' Web page boilerplate and UI component framework.
Mozilla has released Firefox 10 to the general release channel. It includes new developer tools which are shown off in a screencast on this news post. The best bit? You can now right click on page elements and 'Inspect Element' in a similar way to Chrome or Safari.
Articles and Tutorials
Over on the Web Hypertext Application Technology Working Group (WHATWG) mailing list, Shaun Moss argued that the HTML5 spec could do with 'comment' and 'ad' tags. Ian Hickson's response illustrates why it doesn't need them.
An analysis of the state of HTML5 video and its support across different browsers and platforms with what formats, tags, and accessibility features are also supported.
The CSS4 specification is already in the early stages of being written and Johnny Simpson deftly explains and demonstrates some of the new element selector features.
In a tutorial for NetTuts+, Ian Devlin primarily looks at how to use WebVTT to do subtitling on HTML5 videos. He also has a quick look at improving the accessibility of custom controls.
As part of Mozilla's WebAPI effort, they've been developing the Vibration API, an API to send users of supporting devices a notification via a vibration. Currently it only works using Firefox Aurora on Android phones.
Christian Heilmann argues that porting games to HTML5 from other technologies is hurting the cause and that we need more games built from scratch using Web technologies.
Videos and Presentations
Eric Bidelman of Google shows off a ton of stuff from the 'bleeding edge' of HTML5 and related technologies, including typed arrays, scoped styles, new CSS functions, CSS regions, new DOM functions, and the Mouse Lock API.
View any Web page in multiple screen sizes (to simulate the viewport of different devices) using a single bookmarklet. A simple but clever idea using IFRAMEs.
Want icons on your site without the headache of packaging up graphics files? Pick from any of the 650 icons in the Pictos library, build a font, and then embed it direct font-face style. It's a commercial service but there is a free plan.
Code and Libraries
While CSS3 can rotate individual letters, it's complicated to arrange an entire row of letters along a curved path. Arctext.js is a jQuery plugin that does this for you and the results look great.
An entire set of full vector buttons using font-face icons. They degrade gracefully, are open source, and can be customized to your heart's content.
Some slick 'soft' looking, purely CSS buttons from Johnny Simpson. It's great what a bit of box-shadow can do.
WebInterfaceLab presents code snippets for 6 attractive UI elements, including a calendar, progress bars, and some navigation bars. A bit of a random grab bag.
Last but not least..
I've not seen this book in the flesh, but "HTML & CSS" looks like an interesting attempt at teaching HTML and CSS in a very visual way, backed up with good graphic design and photography. Not what you usually expect from technical books.