Issues » 21

Read this issue on the Web
HTML 5 - Please enable images? :-) Weekly Issue 21
January 18, 2012
Welcome to issue 21 of HTML5 Weekly. I apologize in advance if any of today's links go to posts that are blanked out in Wednesday's widespread protests against SOPA (a proposed US law that could seriously damage the way the Internet works). I'm addicted to publishing HTML5 Weekly each week but I wish you the best of luck if you're fighting SOPA in some way today :-)
StatusCode: My New Weekly Newsletter for All Developers, Coming February 1st
Progressive programmers are always learning and keeping an eye on the latest trends, big ideas, new algorithms and tool developments in the world of software development. StatusCode wraps all of this up into a once weekly e-mail digest, a bit like the e-mail you're reading now :-) It launches on February 1st and I'd love to have you on board.
A Recreation of Command and Conquer using HTML5 and JavaScript
Aditya Shankar has built an intriguing reproduction of the 90s real time strategy game Command and Conquer using HTML5 and JavaScript. It takes a while to load, but it plays, and there's a link to an article about how he developed it.
Sencha: The 2012 HTML5 Wishlist Each year, Sencha, the HTML5 framework/tools folks, publishes a wish list for HTML5 and browser technologies and here's 2012's. What do they want? Better HTML5 audio, WebGL everywhere, better mobile browser debugging, and more.
Speak at O'Reilly's new JS and HTML5 Conference in May: Call For Proposals is Open
From Our Sponsor
Articles and Tutorials
(Better) Tabs with Round Out Borders using CSS3
Menno van Slooten shows off an excellent 'rounded tabs' technique that comes together through many several small, incremental steps. It leans on CSS3's box shadows, gradients, and border radii.
Introduction to the 'contenteditable' Attribute Jack Osborne looks at the 'contenteditable' HTML attribute which allows you to specify if an element can be edited by someone who's viewing the document. Intriguingly, even the 'style' tag can be edited in this way.
SpaceShoot: Building A Multiplayer Game using HTML5
Resolution Independence With SVG Over at Smashing Magazine, David Bushell looks at SVG (Scalable Vector Graphics) and how it can be useful for resolution independent, responsive page layouts. An excellent introduction.
The Lowdown on :Before and :After in CSS What is a pseudo-element and how does it differ from a pseudo-class? Why do pseudo-elements sometimes have one colon and sometimes have two? How are :before and :after implemented in CSS? Joshua Jackson digs into it.
getUserMedia: Accessing the Camera and Privacy UI in Opera Bruce Lawson of Opera demonstrates how the user's webcam can be accessed in the latest labs builds of the Opera browser. As part of the WebRTC spec, supported by Google, Mozilla and Opera, this technology is sure to become a bigger deal in other browsers soon.
CSS Corner: Using the Whole Font with the CSS3 Fonts Module Recent updates to the CSS3 Fonts module include a new set of properties to expose advanced OpenType features within CSS. Sylvain Galineau of Microsoft shows them off and how they can be used in IE.
Random Notes on WebGL Armin Ronacher spent a lot of time over the Xmas break porting his Minecraft-style rendering engine to WebGL and JavaScript. In this attractive blog post, he shares some of his observations and tips on the process.
Making Love to WebKit Steven Wittens shows off the technologies, tools, and processes behind his impressive Web site redesign. First time I've ever seen an entire 3D scene editor built into a blog post, that's for sure!
20 Useful CSS Graph and Chart Tutorials and Techniques A list post visually showing off 20 different CSS graph and chart systems and tutorials on how to use them.
Videos and Presentations
Developing HTML5 For a Cross Browser World A talk by Paul Irish (a chipper developer relations guy at Google) given at a recent London JS event.
What The Heck Is Responsive Web Design? Presentation
Same presentation as above but done using scrolldeck.js
The CSS3 Click Chart A handy interactive 'cheatsheet' of various CSS3 features, including box sizing, element rotation, box shadows, and reflections. You get a live demo and example code for each feature.
VMXRay: Exploring VM and Disc Images in Your Browser VMXRay is an HTML5 web app that can explore disk images like VMWare VMDKs and CD/DVD ISOs right in the browser. It uses a JSLinux VM running inside the browser to interpret images and has a visual folder interface to navigate and extract files from them.
Code and Libraries
iPhone-style 'Slider' Checkboxes on the Web
Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. It's not particularly new but continues to be updated.
Shim: Simultaneous, Synced Web Browsing on Multiple Browsers Shim is a node.js app that enables simultaneous, synced web surfing across a variety of devices and browsers.
Pure JS and HTML5 Canvas Bilinear Image Interpolation
CSS3 Daft Punk LEDs Experiment
I continue to be amazed by what a little CSS3 can pull off (and the absolute minimum of JavaScript). Here's a great flashing animated flashing 'LED' demo supposedly based around a Daft Punk theme.
Hopper — Save Dragged and Pasted Links, Text and Images Sadly, Hopper isn't open source, but it's a great demo of HTML5 related technologies. You get a page you can load from anywhere to which you can paste text or drag files and images, sharing them across sessions.
WebSonic: Sonic 3D with WebGL and JavaScript
I don't plan to make a habit of linking to foreign language posts but someone has built an attractive Sonic 3D clone using WebGL. The GitHub repo linked in the post is in English, thankfully :-)
50 Examples of Responsive Web Design The idea of 'responsive' Web designs that change depending on the user's viewport size is a hot one right now and Designmodo presents a list post showing off some great examples of the trend.
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