Frontend Focus
Issue 306 — September 6, 2017
The state of browsers when it comes to virtual reality and a look at the state of implementing VR on the Web using WebVR’s APIs.
Ada Rose Edwards

WebUSB allows web apps to access user permitted USB devices. There’s also support for importing JavaScript modules within script tags.
Google Developers

A usability study into the use of ‘flat’ elements on the Web, as opposed to buttons and elements with shadows and bevels.
Nielsen Norman Group

Automatically detect and diagnose JavaScript errors impacting your users with Bugsnag. Get instant diagnostic reports, know immediately which errors are worth fixing, and debug in a fraction of the time compared to traditional tools. Try it free.
Bugsnag   Sponsor

Giulio Mainardi shows you how to build a Trello-like layout using new Grid Layout Module features and Flexbox, along with some Sass for efficiency.

.. and here’s why. Most sites can benefit from becoming a PWA — and your users will benefit too.
Aaron Gustafson

The visual viewport API, in draft but now supported by Chrome 61, gives access to details on how the user zooms and scrolls around the page. A neat little demo here.
Google Developers

Could audio feedback improve the user experience of filling a form? Ruth John takes a look.
CSS Tricks

Jobs Supported by

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

In Brief

CSS Grid to Ship in Microsoft Edge on October 17 news
Greg Whitworth

Typekit Now Serving Web Fonts With No JavaScript Required news
You can now add fonts to your web site using only CSS.
Persa Zula

It’s easy to version control your database alongside your application 
Connect your database to your version control system with SQL Source Control and keep track of every change.
Redgate  Sponsor

Prefilling Date Input Fields tutorial
Chris Coyier

A Very Basic Introduction to HTML Components tutorial
Jasper St. Pierre

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins tutorial
Farley Reynolds

Two Approaches to Removing Unused CSS Rules tutorial

How to Create Fancy Revealing Animations with Simple CSS Tricks tutorial
Carlos Roso

9 Things You Didn’t Know About Firefox Dev Tools tutorial
Kezz Bracey

Exploring Bump Mapping with WebGL tutorial
Apoorva Joshi

Designing for Great Web Performance, with Addy Osmani video
Google Chrome Developers

A much faster way to debug code than with breakpoints or console.log tools
Wallaby.js features allow you to inspect the result of any JavaScript expression execution in your editor.
Wallaby.js  Sponsor

Flexbugs: A Curated List of Flexbox Issues & Cross-Browser Workarounds code
Philip Walton

asm-dom: A WebAssembly Virtual DOM to Build SPAs in C++ code
Matteo Basso

Lozad: Performant Lazy Loading with the Intersection Observer API code
Apoorv Saxena