Frontend Focus
Issue 193 — June 17, 2015
Nick Desaulniers takes a high level look at the concepts behind building an HTML5 game, as well as briefly reviewing Karl Bunyan’s Build an HTML5 Game book.
Mozilla Hacks

Ido Green looks at a forthcoming feature in Chrome 43 that will let you specify autocomplete attributes on form inputs. For example, ‘autocomplete=”address-line1”’. Includes a complete example.
HTML5 Rocks

A superb talk by Léonie Watson of the Paciello Group, an accessibility lead for the UK government, and a leading expert in ARIA and Web accessibility issues.
Léonie Watson

Want to integrate email into your application with a click of a button? Mailgun integrates nicely with Zapier. You don't have to setup any code to hook Mailgun up with over 400 apps including Wufoo, Firebase, Slack and Hipchat to name a few. Click here to learn more.
Mailgun   Sponsor

A site that shows off the level of support in the main browsers for accessibility support for their HTML5 user interface features. Chrome is in the lead.

A look at a variety of edge cases, quirks, and unusual applications of responsive images.
Taylor Hunt

A simple and straightforward tutorial of making a simple ‘snake’ game using Phaser and JavaScript.

A spec defining a framework for exposing sensor data to the Open Web Platform in a consistent way via an abstract Sensor interface that can be extended to accommodate different sensor types.

A look at the initial implementation of srcset in Windows 10 and the future of responsive images in upcoming Edge releases.
Microsoft Edge Team

Jobs Supported by

  • Frontend Developer — London, UK — Improbable.ioTaking frontend back to it’s essence: design and build the experience / workflows of software that will be used by millions. HTML5, CSS3, JS and everything in between. Lot’s of freedom, lot’s of fun.
  • Top HTML5 Freelancers Wanted (Telecommute)We only hire the absolute top-tier HTML5 developers and if you survive our ultra-screening™ process, the projects overfloweth. (Must read, write speak English extremely well.) Toptal

Can't find the right job? Want companies to apply to you? Try

In Brief

Latest Forward Web Technology Summit videos released video news
Grab your ticket to the July 29 event in San Francisco before prices go up.
Forward Web Technology Summit  Sponsor

favicon-bug: Demonstrates Chrome/Firefox Downloading 1GB Favicons news code
This repository demonstrates that browsers will download huge favicon and touch-icon files to the point that they crash and/or bring the computer to a halt.
Benjamin Gruenbaum

W3C Adopts New Software and Document License news

LiveGL: On-Demand Diagnostics for WebGL Applications news
A Kickstarter for a project that might particularly intrigue WebGL developers.
Timothy Dedischew

Security Standard Open Kitchen news
Virginie Galindo will be talking at Paris Web about the recent security and privacy achievements made at the W3C.

Internet Explorer 11 Gains HTTP Strict Transport Security in Windows 7 and 8.1 news

Practical Techniques On Designing Animation tutorial
Smashing Magazine

Defining 'auto': An Adventure in Layout tutorial
A slide deck that covers how a browser’s layout engine works, particularly in respect to CSS and box models.
Elika J. Etemad

How 3 Modern Tools are Using Flexbox Grids tutorial

Build a Media Player with HTML tutorial

Supercharging Page Load with Service Worker video
Jake Archibald

Recreating The Birdman Opening Credits with the Web Audio API demo
Music and text synchronize together in the opening to this popular movie. Source available.
Mark DiMarco

Dynamics.js: JS Library to Create Physics-Based CSS Animations tools
Michaël Villar

Bootstrap Form Builder tools
The easy way to generate HTML form code that works with Bootstrap 3. Free to use.
Formden  Sponsor

Web MPD: A Web-based MPC-Type Instrument demo
Presents a keyboard to which you can drag audio files to use as samples. Comes preloaded with numerous historic samples.
Max Ogden

Breakup: Split Up the HTML Specification Your Way tools
Based on recent discussions, this is a slightly tongue in cheek tool to let you ‘split up’ the HTML specification arbitrarily.
Robin Berjon

Introducing Pure.css – A Lightweight Responsive Framework code tutorial

postcss-custom-media: PostCSS Plugin to Transform W3C CSS Custom Media Queries to More Compatible CSS tools code

Checkerboard: Shared Transactional Memory with Zero Server Configuration code
Lets you create shared state among clients without server-side logic. It has two components: a Node back-end and a browser client library.
Gregory Fabry