Issue #19 - January 4, 2012
Welcome to issue 19 of HTML5 Weekly. As I suggested in the last issue, HTML5 Weekly took a little winter break but I'm back and ready for a very strong year for HTML5 and its related technologies in 2012. This is a sector that's only going to continue to grow and it's an exciting time to be involved :-)
News and Latest Developments
Billy Lamberta and Keith Peters present a book that covers everything you need to know about creating dynamic scripted animations on the HTML5 canvas element. It even digs into the math and physics knowledge you'll need to make things look smooth. At 504 pages, it's no lightweight guide.
Ben Savage, founder of spaceport.io, recently put together a list of HTML5 related predictions for TechCrunch. He expects a major console game to be ported to WebGL, HTML5 ads to overtake Flash ads, and for mobile Safari's HTML5 sound support to remain broken.
The 'Shadow DOM' refers to DOM element subtrees that can be rendered within a document but aren't accessible through the document's own DOM tree. This living draft presents a specification for the concept and how Shadow DOM structures can be manipulated.
Mozilla has unveiled a new Firefox beta that includes some all new development tools including page and style inspectors and the Orion code editor, along with anti-aliasing for WebGL contexts.
As part of its iOS SDK, appMobi has open sourced 'directCanvas', an attempt at solving the common performance problems of using HTML5 canvas elements on iOS devices. They say it's coming to Android too in early 2012.
Articles and Tutorials
Over at Smashing Coding, Opera's Divya Manian takes a look at how CSS will be supporting (or is beginning to support) paged media, columns, regions, exclusions, grids, and the flexbox.
Angry Birds is a popular game ported to HTML5 from the iOS platform (you may have seen it relentlessly promoted in Chrome) and in this hour long presentation Google's Joel Webber explains how Google helped with the port.
A tutorial on creating some simple interactive operations on the HTML5 Canvas element by Simon Sarris.
A list post featuring some handy HTML5 powered tools, including a CSS sprite generator, a font testing tool, a pattern generator, and an SVG to HTML5 Canvas converter.
Ever seen the 'Prezi' presentation tool where presentations are on a giant canvas that you spin and navigate around? Impress.js brings a similar concept to the world of HTML-based slideshows.
Code and Libraries
They sum it up best: "A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet."
Use this bookmarklet to get an idea of what your site will look like on older browsers that don't support CSS3.
It's clunky and laggy but nonetheless an amazing WebGL demo of a MineCraft style game entirely in the browser, complete with multiplayer. WebGL support definitely required here :-)
An interesting demo of an iPhone 4 rendered using CSS3 with no images or canvas work. Looks great in Chrome, Firefox and Safari, not so much in IE, alas.
WebKit has begun to implement the CSS Filter Effects 1.0 specification which provide a way to influence an element's rendering before it's displayed in its parent document.
Last but not least..
Dabblet is a new 'interactive playground' for quickly testing snippets of CSS and HTML code. Unlike JSFiddle or JSBin, it's very CSS and design oriented, includes handy keyboard shortcuts, can save to GitHub gists, and takes care of browser specific CSS prefixes for you (so you can just use the proper standards-defined ones instead).