Issue #20 - January 11, 2012
Welcome to issue 20 of HTML5 Weekly. A bumper week for HTML5 news and tutorials, as well as some slightly older items finishing the catchup from the New Year's break :-) - Peter.
News and Latest Developments
The Windows IE blog revels with an almost perverse glee at the news that US-based Internet Explorer 6 usage has dropped below 1%. Let's hope the Web is a better place for it.
The popular Toms Hardware site pits Chrome 16, Firefox 9, IE 9, Opera 11.60, and Safari 5.1 against each other in a performance shoot out on both OS X and Windows 7. Firefox took the crown on Windows and Safari on OS X.
Articles and Tutorials
In an excerpt from 'The HTML5 Cookbook' Christopher Deutsch and Marc Grabanski explain how to access the W3C Geolocation API and what you can do with the data it provides.
A delightfully deep look at monitoring and analyzing the performance of CSS selectors using both WebKit and Opera's style profilers. This is heavy stuff but the rendering performance gains are very appealing.
Web design guru Molly Holzschlag asked some of the leading lights in the industry about what they perceived as the most frustrating aspects of CSS. Here's a round up of the top 7 'missing features.'
Peter Beverloo picks some choice developments from 680 WebKit and 986 Chromium commits made since Christmas. For the developers amongst us, the Web Inspector tool gets a new CSS selector profiler as well as support for source mapping through the X-SourceMap HTTP header.
Peter Gasston looks at CSS3's '3D transforms' - already established in Safari and Chrome but coming to Firefox and IE soon. Want to rotate your elements through the full 3 dimensions? Read this.
Chris Coyier of CSS Tricks points out a common snag when embedding Google Web Fonts - not respecting the specific type weights available and ending up with muddy bold type.
An interesting writeup and 'behind the scenes' interview about the development of Microsoft and ZeptoLab's HTML5 game, 'Cut the Rope' (linked elsewhere in this newsletter).
Initializr is an HTML5 template generator to help you start a new HTML5 Web project, all based on the HTML5 Boilerplate. Initializr generates a clean customizable template with just what you need to start, including responsive features.
We featured it back in issue 1 but the popular HTML5 Test page has been updated with new elements of the HTML5 specification. It now marks your browser out of 475 points vs the old 450.
Code and Libraries
Zoltan, the 'User Agent Man', takes a different approach to progress bars with the HTML5 'progress' tag which renders a native-style progress bar on multiple platforms. He then styles them in various ways, including as a speedometer! Interesting experiments.
PhoneGap is an HTML5 app platform for building native apps using Web technologies. WebGLGap is a PhoneGap plugin that aims to provide WebGL support so that high performance HTML5 games can become a reality. It's still experimental and half baked at this stage though.
Cut The Rope is a slick HTML5 game developed by Microsoft's Internet Explorer team in partnership with ZeptoLab. It uses HTML5 canvas, HTML5 audio and video, CSS3 styling, and Web fonts.
Imagine what a JSFiddle for fragment shaders (rendered using WebGL) would look like and you have the GLSL Sandbox. Lots of interesting live demos to watch, edit and learn from.