Issues » 33

Read this issue on the Web
HTML 5 - Please enable images? :-) Weekly Issue 33
April 11, 2012
News and Latest Developments
Appliness: A New Digital Magazine for Web Application Developers 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.
Did Apple Break Web Storage for Non-Safari Apps in iOS 5.1? 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.
WebGL Stats: Who Supports WebGL and How? 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.
From Our Sponsor
Reading
Implementing Motion Detection with the getUserMedia API 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.
Modernizing Your HTML5 Canvas Games Part 1: Hardware Scaling and CSS3 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.
CSS3 Animated Media Queries 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.
Combining Easel.js and Box2D with the HTML5 Canvas The developers of Worms-like HTML5 game Lux Ahoy share some tips on using Easel.js drawing library and the Box2D physics library together.
Unleash The Power of HTML5's Canvas For Gaming A walk through some simple, yet effective, techniques for improving the performance of HTML5 Canvas apps.
A Comparison Chart of HTML5 Video Players
HTML5 Audio and Audio Sprites - This Should Be Simple 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.
Creating a Hex Grid for HTML5 Games in Javascript
Using HTML5 localStorage On A Form 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.
Taking an Entire Page Offline using the HTML5 FileSystem API
Tools
CSS Arrow Please: A Speech-Bubble Style Element Generator
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 :-)
Live Scratchpad Add-on for the Firefox Scratchpad 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.
HTML5 Bookmarks: A Daily HTML5 Link/Resource Site
iPad Retina Display Compression Tester
Code and Libraries
A Responsive CSS3 Slider Without JavaScript An animated carousel / slider built using CSS3 and highly stylized radio buttons. A very intriguing and imaginative approach!
Locache: Memcache-inspired Client Side Caching Framework Locache is a JavaScript caching library for client side caching using localStorage. It gracefully degrades when the browser doesn't support localStorage.
Retina.js: Retina Graphics For Your Site 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+).
How to Flip a Page Upside Down with CSS Transforms
Demos
Make No Wonder: An HTML5 Exploration Game
An HTML5 game where you explore a procedurally-generated wilderness landscape, collecting resources and building structures and tools to survive.
Lux Ahoy: A Worms-style Game Using Box2D and Easel.js 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.
Plane Deformation: A WebGL Demo A visually striking set of demos that recall the demoscene of yesteryear.
Three.js + Ammo.js Quake 3 Physics Test 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..?
Happy Easter CSS3 Animation An interesting Easter themed animation based around CSS3 transitions (with a little JavaScript to kick it off and play some music).
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