Subscribe to HTML5 Weekly here.
|
|
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 :-) Headlines 
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.
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.
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.
Articles and Tutorials 
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.
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.
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.
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.
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.
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.
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.
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!
A list post visually showing off 20 different CSS graph and chart systems and tutorials on how to use them.
Videos and Presentations
A talk by Paul Irish (a chipper developer relations guy at Google) given at a recent London JS event.
Tools
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 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 
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 is a node.js app that enables simultaneous, synced web surfing across a variety of devices and browsers.
Demos 
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.
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.
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 :-)
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.
HTML5 Weekly is published by Cooper Press. Our other newsletters include JavaScript Weekly and Ruby Weekly. Reading this as a non-subscriber? Click here to subscribe to HTML5 Weekly.
You opted in to HTML5 Weekly at HTML5Weekly.com to get weekly e-mails about HTML 5 and related browser technologies. Unsubscribe | Change your e-mail address. Street address: Office 30, Lincoln Way, Fairfield Enterprise Centre, Louth, Lincs, UK, LN11 9EJ |