Frontend Focus
Issue 248 — July 13, 2016
In just 30 minutes, Jake Archibald presents a practical guide to the technologies behind taking an online-only site and turning it into a fully network-resilient offline-first progressive webapp.

An objective set of pros, cons and helpful tips spanning the various ways of loading Web fonts on your site.
Zach Leatherman

A Chrome DevTools extension that lets you simulate interactions with a site as a completely, partially or color-blind person, as well as run an accessibility audit. More insights here.
Eugene Chiong

Eight days of sessions and workshops on React, D3, Angular 2, Accessibility, Progressive Web Apps and Functional JS.
ForwardJS   Sponsor

A code and example-dense look at how the rising popularity of Scalable Vector Graphics (SVG) could impact users of assistive technology, and what can be done to ensure a great experience.
Heather Migliorisi

A quick online game/tutorial to help you learn CSS selectors (or at least refresh your knowledge).
Luke Pacholski

A discussion of the history and uses of element queries and how this led to the creation of EQCSS, a plugin that supports element queries, Scoped CSS, and more.
Tommy Hodgins

Patrick Catanzariti looks at how the Internet of Things may affect front-end web development in the future.
Patrick Catanzariti

The level one draft for the CSS Grid Layout spec has been updated, outlining the differences between Flexbox and Grid: “Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts”

Jobs Supported by

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

In Brief

New Good Parts of JavaScript and the Web Course rawurl news
Douglas Crockford greatly expands JavaScript the Good Parts with more programming challenges, ES6, async, how web browsers work, web security and more.
Frontend Masters  Sponsor

HTML5test Updated; Now Supports Many New Web Specs news

A Start on a Human-Readable Prose-Led WebAssembly Spec news
Still very much a work in progress, like WebAssembly itself.
WebAssembly Project

The W3C and MIT Media Lab Host First ‘Blockchain and the Web’ Workshop news
Blockchain and Web standards experts discussed what needs to happen to integrate blockchains into the Web.
Giulio Prisco

Using Zopfli to Optimize PNG Images tutorial
A way to reduce the size of your PNGs (often significantly) in a lossless fashion.
Ariya Hidayat

Accessibility Options for Unlabelled HTML 'input' Search Fields tutorial
Jeremy Keith

How To Build A Cross-Platform WebGL Game with Babylon.js tutorial
David Rousset

How to Scale SVGs Without Scaling Their Strokes tutorial
Useful when scaling icons, for example.
Nick Salloum

How to Set Up Automated, Cross-Browser JavaScript Unit Testing tutorial
Philip Walton

6-Step Responsive Design Guide: Grids, Progressive Disclosure, & Layouts rawurl tutorial
Learn how to truly design mobile-first and the 3 vital questions to ask before you start any web development project.
Designlab  Sponsor

How The Guardian is Experimenting with Interactive Web Notifications story
Madeline Welsh

How Will Web Components Change CSS Architecture? opinion
Jonathan Snook

We Built Our Website Without CSS: The Highs and The Lows opinion
“If I started a personal project today, I would do my styling in JavaScript.”
David Gilbertson

Practical Use Cases for the 'picture' Element opinion
Corey Bruyere

The Hottest Trend in Web Design Is Making Intentionally Ugly, Difficult Sites opinion
Washington Post

Reflecting on the W3C Web Payments WG opinion
The Payment App API was adopted as an editor’s draft this week.
Adrian Hope-Bailie

The Moment CSS Started Making 'Sense' opinion
Geoff Graham, Robin Rendle and Sarah Drasner share what it took for them to ‘get’ CSS.
Geoffrey Graham

A Look at WebP Support in Browsers opinion
WebP offers some advantages over JPEGs and PNGs but how broad is support for the format? More common than you’d think..

aXe 2.0: An Open Source Accessibility Testing Engine tools
Automated testing of HTML-based UIs for accessibility defects.
Marcy Sutton

VidzPlayer: A React-Based HTML5 Video Player code
A simple video player built in React, leveraging vidz for the player creation.
Plant The Idea

ZingTouch: A JavaScript Mobile Gesture Detection Library code
Provides six standard gestures that are completely customizable (Try it on a touch-enabled device).

Recreating The Sounds of The BBC Radiophonic Workshop demo
The BBC has reproduced an early electronic instrument using the Web Audio API. You can play with it here and also see how it was built. Several other examples can also be found in the footer.
BBC Research and Development