Frontend Focus
Issue 315 — November 8, 2017
An exhaustive list of all the elements you need to have/test before launching your site.
Brandon Morelli

A step-by-step how-to for smooth transitions from one shape to another.
Ana Tudor

A detailed look at what it takes to create a responsive, accessible table.
Adrian Roselli

GrapeCity Wijmo
With no dependencies and a small footprint, Wijmo FlexGrid is built for speed and extensibility.
GrapeCity Wijmo   Sponsor

Learn about selectors both new and old that you can use to style form inputs based on requirement, validity and more.
Jonathan Harrell

Rather than code our own country selectors all the time, could the HTML standard take care of things?
Terence Eden

Version 1 has just been released and it uses Chrome Headless under the hood.
Addy Osmani

Addy Osmani chats with Rob Dodson, a developer advocate on the Chrome team, about his workflow for accessibility testing.
Google Chrome Developers

A new zero-dependency chart library with elegant, responsive SVG output. Offers bar, line, and GitHub-style heatmap options so far.
Prateeksha Singh


In Brief

W3C Designates WebRTC 1.0 Feature Complete news

Call for Review: HTML 5.2 is a W3C Proposed Recommendation news

Release Notes for Safari Technology Preview 43 news
Jon Davis

Which Technologies Do the World’s Leading Video Developers Use? 
Get the 24 page report on current video technology usage and planned usage for 2018.
Bitmovin  Sponsor

The Contrast Swap Technique: Improved Image Performance with CSS Filters tutorial
Una Kravets

The CSS attr() Function Got Nothin' On Custom Properties tutorial
Chris Coyier runs through some use cases for using the attr() function to read data.
CSS Tricks

Understanding The Vary Header tutorial
Andrew Betts

Using SVG As Placeholders: More Image Loading Techniques tutorial
José M. Pérez

Bypassing Browser Security Warnings with Pseudo Password Fields tutorial
Don’t do this, but be aware of the problem.
Troy Hunt

How Payment Methods Work in The Payment Request API tutorial
Eiji Kitamura

Basic Debugging from the Chrome DevTools Console tutorial
Michał Witkowski

High-Performance Service Worker Loading tutorial
Ensure you’re getting the best performance out of your service worker implementation.
Google Developers

$20 Free on a new Linode account 
Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.
Linode Cloud Hosting  Sponsor

Webpack Monitor: A Tool for Monitoring Webpack Optimization Metrics tools
A configurable Webpack plugin that captures relevant stats on production builds, and offers an analysis tool to help better understand bundle composition.
Jon Roach, Gordon Yu, Balal Zuhair

Orion Icon Library: A Collection of Over 4,000 Free SVG Vector Icons tools

Managing Font Loading CSS Was Painful — Not Anymore tools
Introducing the postcss-foft-classes plugin.
Zach Leatherman

PaperCSS: The Less Formal CSS Framework code