Issues » 37

Read this issue on the Web
HTML 5 - Please enable images? :-) Weekly Issue 37
May 9, 2012
Welcome to issue 37 of HTML5 Weekly. A ridiculous amount of WebGL stuff this week in particular; not sure why! There a couple of impressive demos though, so be sure to head down to the 'Demos' section if you usually skip it - Peter.
News and Latest Developments
The BBC on HTML5: 'HTML5 Takes the Internet by Storm' HTML5 hits the news mainstram as the BBC News riffs on what HTML5 provides while developers scroll through JavaScript and CSS code. It's all a bit lightweight but HTML5 making headline news is, well, news in itself.
Schmonference Conf: Free Front End Dev Conf in Palo Alto, June 29 Groupon is putting on a small front end developer conference in Silicon Valley on June 29. You can register your interest now (to attend and/or present).
WebKit is the Most Popular Mobile Browser in the World David Kaneda refers to some stats by StatCounter showing Opera as the most popular mobile browser but explains why, really, WebKit is the most popular.
Professional WebGL Programming: Developing 3D Graphics for the Web A new book by Andreas Anyuru and published by Wrox. No reviews but the description sounds good. In print and on the Kindle. Not an affiliate link :-)
From Our Sponsor
Reading
Making A Move with CSS3 Animations Over at Dev.Opera, Chris Mills gives an introduction to CSS3's animation support. An easy way in if you haven't played with the feature yet.
Why Publishers Don't Like Apps (And Love HTML5) MIT's Technology Review on the continuing trend of publishing moving from native apps to HTML5-powered Web sites.
Viewport Sized Typography with vw, vh, and vmin Chris Coyier looks at some new features in CSS3 for sizing things relative to the current viewport size: vw, vh, and vmin. It's shipping in Chrome 20 and IE 10 and is otherwise headed your way soon.
How to Compile and Run a C 'Hello World' in Google Native Client (NaCl)
WebGL Statistics and the State of WebGL/HTML5 Support This doesn't make for great reading if you're working with WebGL and targeting Opera or IE are high on your priority list.
Taming the SVG (Scalable Vector Graphics) Beast Andrew Baker looks at the rendering of SVG files in the browser, along with two rather different approaches to bring SVG files to the HTML5 Canvas, Ink2Canvas and Canvg.
Getting Started with WebGL: Drawing Figures Not a tutorial, but a code and example heavy introduction to WebGL. Like what you see? View source! Not the best structured code out there but more than enough to learn from.
Case Study: A Tale of An HTML5 Game with Web Audio
Emscripten OpenGL to WebGL Conversion Progress Alon Zakai shares some notes on the conversion of a C++ / OpenGL 3D first person shooter (Sauerbraten) to JavaScript and WebGL using his popular Emscripten toolkit.
Watching
Chrome DevTools Timeline's New Frame Mode Paul Irish shows off a new feature in the Chrome 'vertical timeline' (a.k.a. frame mode) which lets you diagnose visual performance issues.
Beyond HTML5: Device APIs and PhoneGap with Brian Leroux Brian Leroux, Adobe software developer on the Apache Cordova team, discusses the current status of HTML5 before moving on to Device APIs, Installable Web Apps, Carrier APIs, WebRTC, the highly ironic Battery API, PhoneGap, and Boot2Gecko.
Peter Lubbers on 'The HTML5 Connectivity Revolution' In this video from DevCon5, Pro HTML5 Programming author Peter Lubbers talks about the revolution in connectivity enabled by HTML5 (Server-Sent Events, WebSockets, etc.)
Code and Libraries
Brackets: Adobe's Web Editor Built Using Web Technologies Brackets is an open source code editor for HTML, CSS and JavaScript that's built using.. those very technologies. You can get involved and help work on it yourself, too. Check out the screenshots to get a feel for it.
node-webgl: A Port of WebGL to the Desktop (via Node.js)
A Polyfill for the 'meter' Element HTML5's 'meter' element gives a way to render a progress bar on a Web page but isn't currently supported by several browsers. This jQuery powered polyfill plugs the gap.
canvg: JavaScript SVG Parser and Renderer for Canvas
Cuepoint.js: Plugin for HTML5 Video Cuepoints and Subtitles An open source plugin for adding subtitles to your HTML5 videos. The demos show it off best.
Stratiscape: A Layered Approach to HTML5 Canvas Drawing
Riloadr: Cross-Browser Framework-Independent Responsive Image Loader
Demos
Grand Theft Auto in WebGL
An experiment that uses the original files from GTA 1 to produce a playing field you can walk around in. Takes a while but is definitely cool. As a commenter on Hacker News said though: "Grand Theft Walk Around A Bit."
'Cube 2 Sauerbraten' FPS Ported to WebGL A WebGL version of a popular multiplayer/singleplayer first person shooter game. It has some quirks but performs well. At this rate, we could have a full Quake 3 game in WebGL by Christmas ;-)
Minesweeper Recreated in Pure HTML and CSS
Travelling Over a Cityscape in the GLSL Sandbox The GLSL Sandbox is a live, online editor for fragment shaders, then rendered using WebGL. This particular example sends us flying over a cityscape and you can edit the code on the fly.
Last but not least..
Polyfills For The Pragmatist An HTML5-powered slidedeck by Jason Johnston taking a high level look at polyfills, how they work, and some of the most useful ones.
Shifticons: Easy and Fast Way to Create Custom Icon Web Fonts
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