Issues » 43

Read this issue on the Web
HTML 5 - Please enable images? :-) Weekly Issue 43
June 28, 2012
Welcome to issue 43 of HTML5 Weekly. I was travelling yesterday and thought you'd prefer the newsletter at the right hour, rather than in the middle of the night ;-) Back to normal next week! - Peter.
News and Latest Developments
Chrome 20 Closes 23 Security Holes, Adds Latest Flash for Linux Chrome 20 is now out on the 'stable' channel. No major new features, but Linux users now get the latest version of Adobe's Flash player, even on 64 bit systems, all thanks to Chrome's new cross platform plugin API.
Android 'Quietly' Makes Chrome Its New Default Browser The newest version of Android, Jelly Bean, is making Google Chrome its new default Web browser.
First W3C Working Draft of 'Web Intents' Spec Released
Firefox for Android Leaves Beta; Enters General Release
From Our Sponsor
Reading
Powerful New CSS and JavaScript Techniques (2012 Edition) Smashing Magazine presents a screenshot-heavy roundup of about 80 interesting JavaScript and CSS driven Web design and developments techniques from the past year. We've featured many in the newsletter already but there's still a lot of cool stuff to see here.
An Introduction to Content Security Policy Google's Mike West looks at a 'promising new defense' against XSS (Cross-site Scripting) attacks in modern browsers: Content Security Policy (CSP).
SPDY and Secure Proxy Support in Google Chrome Google's Ilya Grigorik shows off an interesting Chrome feature: built-in support for SSL-based proxies which, using SSL's Next Protocol Negotiation extension, can also tunnel SPDY requests.
How to Build An OutRun-style Racing Game (Straight Roads) The first in a multi-part series about building an 80's OutRun style racing game using JavaScript and HTML5 Canvas.
Wooga's HTML5 Adventure Wooga, a social game developer, has open sourced an entire HTML5 game: 'Pocket Island.' They also explain how they think HTML5 isn't quite ready for prime time yet, while encouraging the HTML5 community to play with their code.
ROOT EM! Using CSS3 'rem' Units for 'Elastic Pixels'
Horizontal Box: Polygon Intersection for CSS Exclusions The proposed CSS 'Exclusions and Shapes' module will enable wrapping content around an exclusion shape or to flow inline content within a shape. This article looks at a subset of the exclusion layout problem: computing the intersection of a horizontal rectangle with an exclusion shape defined by a single complex polygon.
Head Tracking With WebRTC and Headtrackr Audun Mathias Oygard of Opera demonstrates how they used Opera's support for WebRTC to build a browser-based 'head tracking' system. It also includes an open source library called 'headtrackr' which you can use. Clever stuff.
How to Build a First Person Shooter in the Browser with Three.js and WebGL
Building Books with CSS3 A List Apart looks at some of the tools and technologies involved in (e-)book production and shows off some of the CSS3 techniques you can use to replicate various features and effects.
Specifying Which Camera for getUserMedia to Use
The Amazing Powers Of CSS (Some Handy CSS Selector Tricks) Some cute tricks using clever applications of CSS selectors to style absolute links different from relative ones, highlight 'empty' links, make external links look different to internal ones, and more.
Working with CSS Regions and Shadow DOM
Watching
GRITS: PvP Gaming with HTML5 A fun talk from the Google I/O event about a multiplayer video game built at Google using HTML5 technologies. A lot to learn here.
The Graphical Timeline of Events Tool for Firefox In a silent screencast, Girish Sharma, a participant in Google Summer of Code 2012, shows off a new developer tool for Firefox: the Graphical Timeline of Events.
Tools
CSS3PS: Photoshop to CSS3 Plugin A free Photoshop plugin for OS X and Windows (CS3 through CS6) that can convert Photoshop layer styles to CSS3.
Find in Files with CSS Selectors Search through an entire project for any given CSS selector, an ideal way to quickly see which documents a CSS style change could affect.
Breakpoint: Media Queries Made Easy in Sass Make writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries then call it using the breakpoint mixin. I'm not too sure but it's an interesting idea.
SnappyTree: WebGL-Based Procedural Tree Generation Tool
Jobs
Web Developer, SoundCloud (Berlin, Germany) You are an awesome HTML5/CSS/Javascript guru with a serious passion for the mobile web. You'll be working on getting the super-crispy version of soundcloud.com to run in the browser and on any modern smartphone.
JavaScript, HTML5, CSS - Amazon London is hiring The new Amazon development centre in central London is hiring talented developers to deliver scalable and maintainable applications for TVs and consoles.
GFACE - UI Engineer at Crytek (the creators of Crysis)
Post a job for inclusion in HTML5 Weekly
Demos
HTML5 Face Detection: JavaScript getUserMedia API + Groucho Marx Glasses
A fun open source face detection demo using JavaScript and getUserMedia. It worked for me in Chrome 20 just by activating a single beta feature. (Yes, that's me in the screenshot here.)
Build (Lego) with Chrome
Parents couldn't afford all the Lego pieces you wanted as a kid? Live the childhood of your dreams with this experiment from Google and Lego Australia to build the 'largest Lego set ever' online in your browser. It leans heavily on WebGL and other browser technologies.
ToneCraft: Web Audio API + three.js = Interesting Musical Experiment
PixelJihad: Steganography in JavaScript Steganography is the technique behind hiding messages in otherwise ordinary looking content. This demo (complete with explanatory article) does just that using JavaScript, FileReader, and Canvas on images you supply.
WebAudioSynth: A Cool Controllable 'Analog' Synth As a synth fan, I love this little demo. Complete with knobs and switches to customize the sound to your taste. (Requires Web Audio API support, so Chrome 16+)
Last but not least..
Pinerly.com's WebGL-Powered 3D Presentation Deck
Pinerly is some sort of Pinterest-focused marketing tool but the interesting bit is its WebGL powered 3D slide deck to promote the company to potential investors. Feels very 'Second Life.'
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