Frontend Focus
Issue 219 — December 16, 2015
A new web API that lets you defer actions until the user has stable connectivity (such as sending a message or syncing data). For now it’s just in Chrome Canary behind an ‘experimental features’ flag.
Google Developers

An accessibility QA engineer at Mozilla shares a list of the ‘absolute basics’ of Web accessibility every Web developer should know about.
Marco Zehe

Microsoft’s Edge browser is now also available to all Xbox One users and supports things like WebGL, Web Audio and the Gamepad API.

Frontend Masters
Learn everything you need to build and deploy a maintainable single page app. This course covers a broad range of topics as we build an app from scratch using React, Ampersand, ES6 (ES2015), and Webpack.
Frontend Masters   Sponsor

Rachel is optimistic a reliable, cross browser CSS grid layout system is just around the corner, and shows off how it works right now (behind an experimental features flag in Chrome).
Rachel Andrew

ally.js provides a handy way to collaborate on accessibility-related features by providing low-level tools to other libraries and frameworks as well as high-level functions to developers.
Smashing Magazine

Now uses Material Design Lite, includes optional ES6 support, and includes offline support via Service Worker. This is well worth looking at, if you haven’t already.

WebKit includes ‘fast tapping optimizations’ so well-optimized (for scale) mobile pages can avoid the 350 millisecond delay commonly worked around by using third party libraries.

Last year, Unity (the popular game engine) benchmarked their WebGL performance and now they’re back for another try: “Firefox 42 64-bit is currently the fastest shipping browser in most of the benchmarks.”

HTML5 code and demos for invoking different touch keyboards depending on input type. Worth keeping in mind for the benefit of mobile users.
Baymard Institute

Jobs Supported by

  • Principal Web Developer. Bristol, UKJoin MixRadio if you are an expert web developer with superior front-end skills. Help us improve our speed of execution and architecture. Use ReactJS and ES2015 on cross-disciplined teams to deliver the next best music streaming service. MixRadio
  • Frontend Developers at X-Team (Remote)We're looking for experienced frontend developers. The perfect candidate would be highly skilled in different frameworks and libraries. We are 100% remote and we provide the funding needed to help you achieve your goals and grow as a remote developer.  X-Team

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

In Brief

Tumult Hype 3.5 Released: The HTML5 Web Content Generation Tool news tools

Applying For Jobs Is As Outdated As Fortran rawurl
Get interviews with top companies without submitting another application. Through Hired, companies find you - and offer salary and other benefits upfront.  Sponsor

Firefox 43 Released news
Nothing huge for developers (lots of little dev tools tweaks), though Firefox 64 bit for Windows is now available which showed major performance increases in a recent Unity benchmark.

Self-Review Questionnaire: Security and Privacy news
A set of questions developers and engineers are encouraged to ask about the security and privacy impact of new Web features and specifications.

Turner & Google Vets Create SpeakPage, a New Content Technology news
SpeakPage is a technology for having audio narration for Web pages, and this very blog post demonstrates the idea.

Speedtest Launches New HTML5-Powered Beta news
A popular Flash-based connection speed testing tool is going HTML5.

Bringing the Power of SIMD.js to gl-matrix news
“SIMD.js can deliver major speedup to many JavaScript programs in high performance computing and the domain of multimedia.”
Mozilla Hacks

A Look at HTML5's 'header' Element tutorial
First written in 2009, but updated again yesterday.
HTML5 Doctor

How to Build a Star Wars Intro Style CSS Animation tutorial
CSS Animation Rocks

Decorating the Web with CSS Border Images tutorial
A look at CSS3 border customizations with border-image-source, border-image-slice and more.

Creating Repeatable CSS Animations with Sass tutorial
Srinivas Rao

Making NASA 'Quindar' Tones in Web Audio tutorial
You've heard this sound before, even if you didn't know what it was.
Output Channel

Website Layout Tools Compared: Flexbox Vs. Susy opinion
A comparison of the functionality provided by Flexbox, as implemented natively by most browsers, and Susy, a Sass-based layout toolkit.
Smashing Magazine

Firefox OS is Dead opinion
Peter-Paul Koch

SVG Icons Are Easy But The Fallbacks Aren't opinion
Matt Hinchliffe

Ultimate CSS Gradient Generator tools
A Photoshop-like CSS gradient editor.

Build 3D CSS Transforms Without Coding tools

Top 9 Animation Libraries to Use in 2016 code

react-flexbox-grid: React Components Implementing flexboxgrid.css code
Lee Siong Tai

Have you got SQL fingers? rawurl
Try SQL Prompt and you’ll be able to write, refactor, and reformat SQL effortlessly in SSMS and Visual Studio. Find out more.
Redgate  Sponsor

Lightsaber Escape: An HTML5 Chrome Experience demo
Use Chrome on your phone to wield a lightsaber on your desktop browser while trying to escape the Death Star.
Google and Lucasfilm