Issues » 19

Read this issue on the Web
HTML 5 - Please enable images? :-) Weekly 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
Foundation HTML5 Animation with JavaScript
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.
The Definitive Guide To HTML5: 14 Predictions For 2012 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.
Draft Shadow DOM Specification 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.
An Infographic Showing what Firefox Achieved in 2011 [jpeg]
New Firefox Beta with New Developer Tools Is Ready for Testing 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.
appMobi Open Sources 'directCanvas' HTML5 Acceleration Technology for iOS 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
Six CSS Layout Features To Look Forward To 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.
How Google Ported 'Angry Birds' to HTML5 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 Gentle Introduction to Making HTML5 Canvas Interactive A tutorial on creating some simple interactive operations on the HTML5 Canvas element by Simon Sarris.
The CSS3 Pseudo-Elements: :Before and :After
Implementing Minecraft in WebGL An interesting overview of some of the concepts and research involved with producing a MineCraft style game using JavaScript and WebGL. (Check out this issue's "Demos" section for another such attempt.)
Tools
23 Useful Online HTML5 Tools 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.
impress.js: Presentations Based on the Power of CSS3 Transforms and Transitions 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
Introducing filer.js: A Wrapper for the HTML5 Filesystem API filer.js is a fully-tested wrapper for the HTML5 Filesystem API which gives you access to a sandboxed filesystem from JavaScript. It uses familiar UNIX commands in its API (e.g. cp, mv, ls).
jQuery-Placeholder: HTML5 Placeholder Behavior for Old-School Browsers They sum it up best: "A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet."
syze: JS Powered Dynamic CSS Classes for Screen Size or Device Types syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS.
deCSS3: Bookmarklet to Test Graceful Degradation Use this bookmarklet to get an idea of what your site will look like on older browsers that don't support CSS3.
Stitch - A CSS Pattern Framework for Compass
Demos
WebCraft: A MineCraft Pastiche Built on WebGL
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 iPhone 4 in Pure CSS3 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.
CSS Filter Effects Landing in WebKit 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: Interactive CSS and HTML Playground 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).
Curated by Peter Cooper and published by Cooper Press.
Want to sponsor an issue? See our media kit.

© 2013 Cooper Press Ltd. Email policy Privacy policy
Office 30, Fairfield Enterprise Centre, Louth, LN11 0LS, UK
Update your email address
or unsubscribe here

ONE e-mail each Wednesday. Easy to unsubscribe. No spam — your e-mail address is safe
Published by Cooper Press and curated by Peter Cooper