Frontend Focus
Issue 225 — February 3, 2016
An excellent, in-depth walkthrough of both what service workers are, and how to implement one of your own, from scratch.
Lyza Danger Gardner

The MediaRecorder API enables you to record audio and video from the Web. It’s available now in Firefox and in Chrome for Android and desktop.
Sam Dutton

A page that uses all but a handful of HTML5’s elements. Useful for testing and seeing differences between browser implementations.
The Ackernaut

Corgibytes
Let the super-polyglots at Corgibytes help. We code in any language, platform, and framework.
Corgibytes   Sponsor

CSS variables (a.k.a. CSS custom properties) are landing in Chrome 49. They can be useful for reducing repetition in CSS, and for runtime effects like theme switching and even polyfilling future CSS features.
Rob Dodson

jCanvas is aimed at jQuery users and provides a jQuery-style approach to working with the HTML5 Canvas.
Maria Antonietta Perna

The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback) depending on how long it takes for them to load.
Rob Dodson

A modern WebGL engine that includes physics and post effects.
Alexander Buzin

Jobs Supported by Hired.com

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

In Brief

VP9 Is Now Available in WebRTC in Chrome 48+ news
Google

HTML5 Supported Video Formats Now Dominate The Web news
H.264 and WebM dominate.
Arc from Applause

Smooth Scrolling in Chrome 49 news
A look at how scrolling is getting smoother in Chrome 49 and some of the issues involved.
Paul Lewis

API Deprecations and Removals in Chrome 49 news
Google

NEW WEBINAR: Master your Angular Workflow with New Key Tools rawurl news
Learn Angular 2’s improved tooling and explore other modern JavaScript build systems, like Webpack, to improve your workflow. Tune in to get up to speed on the new Chrome dev tool Batarangle, Angular 2 CLI, TypeScript Babel and more.
RANGLE.IO  Sponsor

Art Directed Responsive Images with the 'picture' Element and Cloudinary tutorial
Eric Portis

Using React with the HTML5 Canvas tutorial
Anton Lavrenov

A Short Note On Improving Usability of Scrollable Regions tutorial
“You can make an element scrollable using CSS overflow property - [the] problem is that typically the content cannot [then] be scrolled using the keyboard.”
Steve Faulkner

HTML 5 Game Development Video Series video
Mozilla Hacks

Large Scale CSS Refactoring at trivago opinion
trivago

Login Forms over HTTPS, Please opinion
Mozilla Hacks

The 'Yellow Fade' Technique, Using CSS3 code
Kamran Ahmed

origami.js: HTML5 Canvas for Humans code
Began as a project to teach JavaScript and geometry to children.
Raphael Amorim

Loud Links: Tiny Library to Add Interaction Sounds to Your Site code
Mahdi

Remodal: The Modal Done Right code
Responsive, lightweight, fast, synchronized with CSS animations, fully-customizable modal window plugin with declarative configuration and hash tracking.
Ilya Caulfield

The Spirit: A Particle-Based WebGL Experiment, with Code demo code
Edan Kwan

A Generic Infinite Runner Game on CodePen demo code
Eduardo Lopes

Web Speech Demo: Change The Background Color with Speech demo code
Wes Bos

Get paid to share your developer knowledge with a global audience rawurl
Create and publish video training courses as a freelance Author. Flexible schedule, work from home. Apply today.
Pluralsight  Sponsor