Frontend Focus
Issue 318 — November 29, 2017
A deep exploration of creating accessible menus for the Web, starting from defining exactly what a menu even is.
Smashing Magazine

A really neat look at a technique for using CSS and data attributes to create annotated ‘wireframe’ views of Web page elements.
Eric Meyer

Get expert database support immediately so that your applications aren’t crippled by database downtime. Percona Support ensures your database has cost-effective, enterprise-class support from the most trusted team of experts in the business.
Percona   Sponsor

The what, why, and how behind using a library for efficient ‘scrollytelling’ that uses IntersectionObserver in favor of scroll events.
Russell Goldenberg

Christian explores “the issue of the web not moving fast enough for people and clinging on to seemingly terrible ideas from the past”.
Christian Heilmann

Mitch takes a close look at PWAs on Android devices and explains how we can pave the way for a new era of ‘browserless’ web browsing.
Smashing Magazine

Stands for First, Last, Invert, Play. It's a technique for animating DOM elements smoothly.
David Khourshid

A golden-oldie set of pros, cons and helpful tips spanning the various ways of loading Web fonts on your site.
Zach Leatherman


  • Software Engineer – Web Clients, ReactJS+ReduxJoin a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more! Discovery Digital Media
  • Software Engineer Indeed Prime is a free service that helps engineers secure top offers from leading companies.  Indeed Prime

In Brief

HTML Media Capture Now a W3C Proposed Recommendation news
An HTML form extension for accessing a device’s media capture features via a file upload control.

Bruce Lawson on Editing The W3C HTML5 Spec news
Also explains why there are both WHATWG and W3C HTML specs.
Bruce Lawson.

Building A Simple To Do Web App with Stitch, React, and MongoDB tutorial
This short tutorial will get you started with MongoDB Stitch.
mongodb  Sponsor

Better Date Formatting with the 'time' Element tutorial
Adam Laki

Common Responsive Layouts with CSS Grid tutorial
Some common responsive website layouts to copy, edit, and mess around with.
Jo Franchetti

Monitoring Unused CSS Using The Power of the DevTools Protocol tutorial
Johnny's Dev Blog

Web Animation API: Unleashing The Power of CSS Keyframes in JS tutorial
JavaScript Kit

Rendering Performance From The Ground Up video
An easy to understand introduction to performance concerns when rendering in the browser.
Martin Splitt

Can Firefox Quantum Regain Mozilla's Browser Market Share? opinion
Amos B. Batto

On the Growing Popularity of Atomic CSS opinion
Ollie Williams

SuperTinyIcons: 81 Popular Web Service Icons in Tiny SVGs tools
Minuscule SVG versions of common site and app logos.
Terence Eden

Set Up A Netflix Style Streaming Service for Any Device or Platform tools
The Bitmovin Player has a unified config, UI and API to deliver a perfect experience anywhere.
Bitmovin  Sponsor

nanocal: An AirBnB-Style Date Range Picker code
Live demo here.

UPNG.js: Now Even Better PNG Minification code
6x faster than before and creates better palettes for dithering.

Literally Canvas: An HTML5-Based Drawing Widget code

Infinitown: An 'Infinite Town' WebGL Experiment demo
Little Workshop