Frontend Focus
Issue 325 — January 31, 2018
Using variable fonts (now supported across multiple browsers) in a real production context can be tricky. Here’s how studio Clearleft achieved it for a new conference website.
Richard Rutter

Recreating layouts is a great way to learn new frontend technologies, and recreating GitHub’s famous contribution graph is an interesting task.
Ire Aderinokun

The rise in frontend complexity stems from an increased diversity of clients, a higher quality bar, and huge market growth.
Kevin Ball

Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. Get your free copy.
Progress   Sponsor

An overview of the concepts and techniques involved in running test scripts against browsers using WebDriverJS on Windows 10 and Microsoft Edge.
Smashing Magazine

Smashing Magazine’s founder Vitaly Friedman on crafting flexible responsive design systems using the latest web technologies.
Vitaly Friedman

The next version of IndexedDB, an API for working with a client-side database of records holding simple values and hierarchical objects.


In Brief

Safari 11.1: Service Workers, Payment Request API, and more news
A few compelling new features in the latest Mac and iOS browser.

WCAG 2.1 Now A W3C Candidate Recommendation news
The latest Web Content Accessibility Guidelines (WCAG).
Andrew Kirkpatrick

Enter The 'Dragon (Drop)': Accessible List Reordering tutorial
Dragon Drop is a drag-and-drop list reordering module that works well with screen readers and other assistive technology.
Harris Schneiderman

Serverless Development with Node.js, AWS Lambda & MongoDB Atlas tutorial
mongodb  Sponsor

Choosing Web Fonts: A Beginner’s Guide tutorial
Google Design

Phone Number Links and Accessibility tutorial
Styling phone numbers on different clients while following WCAG 2.0 guidelines.
Matt Smith

The Building Blocks of Web Workers and 5 Cases for Their Use tutorial
A way to run JS in background threads in the browser.
Alexander Zlatkov

The Compact Guide to Web Maintainability: 200 Tips and Resources tutorial
Jens Oliver Meiert

How to Style a Form with Tailwind CSS tutorial
Nick Basile

Building a Modal Component with Vue.js tutorial
Filipa Lacerda

What's New in Chrome 64's DevTools in 3 Minutes video
Google Chrome Developers

Why Your Site is Slow 
Pantheon  Sponsor

Debugging CSS Performance with Chrome’s Profiling Tools story
How a tricky problem was analyzed using Chrome’s tools.
Dan Roberts

A Tale of Two Rooms: Understanding Screen Reader Navigation opinion
Ryan Jones

Please Stop Using 'Local Storage' opinion
Why you should stop using it to store session data.
Randall Degges

Challenges for Web Developers opinion
Paul Kinlan shares some of the challenges he believes developers now face every day.
Paul Kinlan

Why Japanese Web Design Is (Still) the Way It Is opinion
Doug McGowan

Bulma: A CSS Framework to Consider in 2018 opinion
Mat Writes

Get the Best, Most Complete Collection of Angular UI Controls: Wijmo tools
Wijmo’s dependency-free UI controls include rich declarative markup, full IntelliSense, and the best data grid.
GrapeCity Wijmo  Sponsor

Clippy: A CSS 'clip-path' Maker Tool tools
Bennett Feely

purgecss: A Tool to Remove Unused CSS tools
Full Human

Sockette: The Cutest Little WebSocket Wrapper code
A 339 byte wrapper around WebSocket that auto reconnects if the connection drops.
Luke Edwards