Frontend Focus
Issue 288 — May 3, 2017
‘Headless’ Chrome is basically Chrome running without any UI or visible controls, so is ideal for automated testing or server environments.
Eric Bidelman

ES module support is arriving in browsers, first in Safari 10.1, as well as Chrome 60, Firefox 54, Edge 15 behind config settings. Jake explains what this means for front-end developers.
Jake Archibald

Got a font but want to use a different font for certain characters? CSS lets you combine multiple fonts into one family - here’s how.
Jake Archibald

Frontend Masters
Become a Full Stack Engineer and gain the confidence to master the command line and server.
Frontend Masters   Sponsor

Brings native notifications on macOS, improvements to streams and the Media Capture API. Also see what’s new Chrome 59’s DevTools, including CSS + JS code coverage.

Maria Antonietta Perna digs into performance issues, and solutions for them, when loading custom web fonts.

Rather than writing separate CSS to handle ‘themes’ on a site, why not write it once and control it using CSS variables?
Chris Coyier

Bring Spector into your WebGL projects and it provides a ton of debugging tools for digging into what’s going on.

A story-led course on using the Flexible Box Layout Model. Free with registration.
Dave Geddes

Jobs Supported by

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

In Brief

Upcoming Web Design Conferences (May–September 2017) news
A list of over 100 events all around the world.
Smashing Magazine

What's Changed in Bootstrap 4.0 (alpha 6)? news
Yuri Ramos

5-Minute Signup Forms with Node-RED and MongoDB tutorial
Learn how to quickly build a signup form in Node-RED and save the entered data to a Compose MongoDB database.
Compose  Sponsor

Using Device Motion on the Web To Detect Shaking tutorial
Raymond Camden

An Accessibility Style Guide for the Web tutorial
Covers best practices for various site components, and includes code examples.
Carie Fisher

Samsung DeX Brings the Mobile Web to the Desktop tutorial
Samsung’s new S8 phone can be used desktop-style.
Ada Rose Edwards

How to Set CSS Margins and Padding (And Cool Layout Tricks) tutorial
Baljeet Rathi

CSS-Only Multi-Color Backgrounds (Using Clever Gradients) tutorial

Better Web Typography: A Free Web Typography Email Course tutorial
Matej Latin

Implementing System Fonts on — A Lesson Learned story
TLDR: “don’t use -apple-system at the head of a shorthand font declaration”
Stuart Frisby

Your Site's Body Text is Too Small opinion
Why website body text should be bigger, and ways to optimize it.
Christian Miller

Are you aware of errors that your users are experiencing? 🕵️ tools
Automatically detect and diagnose, and quickly fix, JavaScript errors affecting your users with Bugsnag.
Bugsnag  Sponsor

Griddy: A Live CSS Grid Wizard/Development Tool tools
Play with CSS grids and learn at the same time. This CSS grid ‘cheat sheet’ is also very similar.
Drew Minns

WebSlides: An Open Source System for Making HTML Presentations tools
José Luis Antúnez

Semantic UI: A Framework for Creating Responsive Layouts tools

SmartPhoto.js: A Responsive Image Viewer, Especially for Mobile code

PicoGL.js: Convenience Methods for the WebGL 2 Rendering Pipeline code

SVG Text Mask with a Video Fill demo
Dudley Storey

React-Powered Animated Page Transitions demo
Sarah Drasner