Frontend Focus
Issue 293 — June 7, 2017
Users can be reluctant to fill out forms, so make the process as easy as possible. Usability testing can help you find out how usable a particular form really is.
Nick Babich

Here’s what’s new in Chrome 59, including cross-platform Headless Chrome support (tutorial here) and Image Capture API support. There have also been DevTools updates, including code coverage reports and full-page screenshots.

A 40-min talk looking at the metrics and platform APIs that enable user-centric performance measurement and how devs can use this data to improve end-user experiences.
Shubhie Panicker and Philip Walton

Attend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July.
ForwardJS   Sponsor

Five supposedly ‘old-fashioned’ CSS practices that you may not need anymore (like using floats or grid libraries) and what you can use instead.
Ryan Oglesby

At this week’s WWDC, Apple announced support for WebRTC in Safari 11 on both desktop and iOS, as well as improved perf metrics tools and WebAssembly support.

Viewport units (e.g. vw, vh, vmin, vmax) have been around for a while, and are well supported. Here’s a look at various uses for them.
CSS Tricks

Introduced with the CSS Grid Layout Spec, the minmax() function “opens the door to us being able to write much more powerful and succinct CSS”.
Ire Aderinokun

The Chromium team have expressed an intent to implement an asynchronous cookie API, which is particularly useful for Service Workers.
Benjamin C. Wiley Sittler

Jobs Supported by

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

In Brief

Tracking Prevention Coming to Safari news
Safari to reduce cross-site tracking by limiting cookies and more.
John Wilander

Wake Lock API: An API to Let Webapps Keep a Device Awake news

What's The Stuff at the Top of an SVG? tutorial
Peter Nowell

Beautifully Animate Points with WebGL and regl tutorial
How to draw and smoothly animate 100,000 points in the browser.
Peter Beshai

How to Build Web Form Layouts With CSS Grid tutorial
Ahmad Shadeed

Locally Scoped CSS Variables: What, How, and Why tutorial
CSS Variables are super powerful, and scoping them locally makes them an even more powerful tool for clean, modular design systems.
Una Kravets

Non-Linear Interpolation in CSS tutorial
Mike Riethmuller

An Intro to Web Components (with Otters) tutorial
An introduction for absolute beginners.
Monica Dinculescu

Learn Flexbox in 10 Minutes tutorial
Justin Yek

Masking vs. Clipping: When to Use Each tutorial
Sarah Drasner

Why IT Consulting and Developer Services Companies Love Compose opinion
Software firms and app developers love using Compose to manage data for their clients – find out why.
Compose  Sponsor

Designer vs. Developer #1: Creating a Collaborative Environment video
Mustafa Kurtuldu (a designer) speaks to developer Jake Archibald about communication and the assumption that designers and developers sole role is to either make things look pretty or to be a cog in a machine with no soul.
Google Chrome Developers

Sandcat: A Lightweight Multi-tabbed Web Browser tools
Features include live HTTP headers, an extensible command line console and more.
Felipe Daragon

svgi: An SVG Inspection Tool tools
Ángel M Miguel

taxi-rank: A JSDom-Based Selenium Webdriver API code
Uses Zombie under the hood.
Forbes Lindesay

LQIP-Loader: Low Quality Image Placeholders (LQIP) for Webpack code
Zouhir Chahoud

$20 Free Credit on a new account. 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.
linode  Sponsor