|
Issue #33 - April 11, 2012
News and Latest Developments
Appliness is a new 'digital magazine' for web app developers and aimed at readers using tablets (although a PDF preview is available). Issue 1 features an interview with Maximiliano Firtman, coverage of HTML5 canvas quirks, a jQuery Mobile tutorial and more.
Tim Anderson highlights an interesting issue in iOS 5.1 which causes the localStorage storage area to be wiped on app restart with apps that use WebKit APIs to store data (such as PhoneGap apps). Workarounds are on the way but this is a messy situation.
An interesting live survey and set of results for WebGL support in Web browsers. You don't have to do anything, but your browser's WebGL capabilities are measured and you can see how it fits in with everyone else. So far only 51% of visitors have browsers that support WebGL.
Reading
Cutting edge stuff that requires Chrome Canary but over at the Adobe Developer Connection Romuald Quantin demonstrates how to use JavaScript and the getUserMedia API to build a virtual 'xylophone' of sorts.
Over at MSDN, David Rousset kicks off a series on turbocharging your HTML5 Canvas-based games. In this case, he picks on Canvas scaling and using CSS3 transforms to improve transitions between scenes.
Media queries and responsive design have become big topics lately but what about animated media queries? If people are changing screen size or orientation, you can add animations to the mix for the transition.
The developers of Worms-like HTML5 game Lux Ahoy share some tips on using Easel.js drawing library and the Box2D physics library together.
A walk through some simple, yet effective, techniques for improving the performance of HTML5 Canvas apps.
HTML5 evangelist Chris Heilmann uses a simple demo to pick at a sore point of HTML5: its cross-browser audio support. He wants to reignite the discussion over HTML5 audio.
Thomas Hardy shows off how easy it is to use localStorage capabilities to both store and retrieve data for unsubmitted HTML forms. There are libraries that will do this job but it's good to see how easy it can be in the raw too.
Tools
A handy one page code generator for an HTML element that has an 'arrow' coming off of one side of it. The graphic should give you a better idea :-)
This add-on lets you cut the feedback loop down to the minimum when using Firefox's Scratchpad JavaScript editor. Evaluate your JavaScript functions in real-time while editing, etc.
Code and Libraries
An animated carousel / slider built using CSS3 and highly stylized radio buttons. A very intriguing and imaginative approach!
Locache is a JavaScript caching library for client side caching using localStorage. It gracefully degrades when the browser doesn't support localStorage.
An open source script that makes it easy to serve high-resolution images to devices with 'retina' displays (such as the new iPad or iPhone 4+).
Demos
An HTML5 game where you explore a procedurally-generated wilderness landscape, collecting resources and building structures and tools to survive.
Lux Ahoy is a new Worms-style combat game created by agency Luxurious Animals. It uses Box2D for physics, SoundJS for audio and Easel.js for graphics and animation.
A visually striking set of demos that recall the demoscene of yesteryear.
An impressive demo that brings together the rendering of a Quake 3 level with the ability to 'throw' boxes around, complete with basic physics support. How long till we get Quake 3 Live in the browser without plugins..?
An interesting Easter themed animation based around CSS3 transitions (with a little JavaScript to kick it off and play some music).
|