Frontend Focus
Issue 216 — November 25, 2015
A nice intro to the concepts behind the Web Audio API and its potential before using some libraries that make it easier to work with.
David Rousset

An attempt at an HTML-based domain-specific data format for the interoperable exchange of scholarly articles. This document (written in Scholarly HTML itself) describes how it works and how it is encoded.
Robin Berjon and Sebastien Ballesteros

With imgix, integrating responsive images into your site could not be easier. imgix is fully-compatible with the srcset attribute, the picture element, and Client Hints. Learn how to start delivering responsive images in less than 30 minutes.
imgix   Sponsor

Use the Page Visibility API’s functionality to save and restore sessions when the state of visibility changes to provide a reliable, consistent user experience.
Ilya Grigorik

An effective technique. Works on all modern browsers and falls back well due to the use of standard input elements.
Ionuț Colceriu

A great talk by an engineer on the Chrome team on HTTP/2. Lots of diagrams. If this appeals to you, check out our Web Operations Weekly too.

Sara Soueidan makes a lot of great arguments for SVG and why you should use them in almost any situation instead of animated GIFs.
Sara Soueidan

Simon Codrington gives a simple introduction to using the HTML5 Drag and Drop API to create a drag-and-drop puzzle game.

Jobs Supported by

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

In Brief

An Update on Web Components and Firefox news
Mozilla Hacks

W3C DOM4 is a W3C Recommendation news

Using The Gamepad API In Web Games tutorial
Smashing Magazine

Offline Recipes for Service Workers tutorial
Mozilla Hacks

Scaled/Proportional Content with CSS and JavaScript tutorial
Chris Coyier

You Know How to Code, but How Are Your Design Skills? course
Learn UI UX design through part-time, online courses with 1-on-1 mentorship from expert designers.
Designlab  Sponsor

10 Guidelines for Better Website Background Videos tutorial
Angus Russell

Material Design Ripples with CSS tutorial
Ionuț Colceriu

Creating an Animated Menu Indicator with CSS Selectors tutorial
James Nowland

6 Steps to Make Your CSS Code More Maintainable slidedeck tutorial

How to Animate 'box-shadow' with Silky Smooth Performance 
Tobias Ahlin

Autocomplete and Forms tutorial
A look at how form inputs can provide ‘hints’ to the browser as to how to autocomplete them.
Raymond Camden

Seriously, Don’t Use Icon Fonts opinion
SVG is better, says this author.
Tyler Sticka

Optimize Web App Performance through Drawing opinion
Jeanette Head

Betwixt: Web Debugging Proxy based on Chrome DevTools Network Panel tools
A tool for analyzing web traffic outside the browser using the familiar Chrome DevTools interface.
Konrad Dzwinel

CSS Cursor: See Different Pointer Types Live tools
A handy page that shows you which ‘cursor’ property types result in which styles of pointer in your current browser.
Tech Stream

allegro.js: An HTML5 Game Making Library tools code
From the creator of McPixel.
Sos Sosowski

Become A Magnet For The Best Job Offers rawurl
In one week, you can have interview requests from the industry’s hottest companies - without ever sending in an application. What are you waiting for? Join Hired today.  Sponsor