Frontend Focus
Issue 257 — September 14, 2016
A ton of examples for taking relative units beyond just font sizing, including building an entire page of elements sized in %, em, and rem units.
Ahmad Shadeed

A look at nine tools you can hook up to Dropbox to streamline the process of creating and hosting static websites (particularly for prototypes).
Cosima Mielke

“A PWA is functionally defined by the technical properties that allow the browser to detect that the site meets certain criteria and is worthy of being added to the homescreen.”
Alex Russell

Linode's SSD hosts are the perfect environment for any HTML5, CSS, and Javascript media. Meet your website's demands with a lightening-quick cloud host offered at competitive pricing. 99.9% uptime and 24/7 support.
Linode   Sponsor

It’s 2016, Rich Fink reminds us. Webfonts have blossomed (60% of the Alexa top 1 million sites use them). Surely no one would argue for a return to system fonts? Wrong.
Richard Fink

A library that uses the User Time API and measures things in your web app, annotates the DevTools timeline, and reports the results to Google Analytics.
Eric Bidelman

An in-depth dive into some of the technical details of using color on the web.
Sarah Drasner

We had CSS1, and CSS2. We even had CSS2.1 and we then moved onto CSS3 – or did we? This post is a quick explanation of how CSS is versioned today.
Rachel Andrew

Into IoT and the Web? If you like playing with cutting edge, user-facing tech, you should check out Web Bluetooth.
Uri Shaked

Jobs Supported by

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

In Brief

Where Things Are At In The CSS Grid Layout Working Draft news
A few things have changed in the latest draft of the Grid Layout module.
Nitish Kumar

Polymer 2.0 Preview news
The goal is to take advantage of native, v1-level Shadow DOM and Custom Elements APIs.
Polymer Team

Microsoft Working on Bringing WebVR to Edge news
WebVR makes it easier to build immersive VR experiences for the Web.

Visual Studio Code Introduces iOS Web Debugging news
You can now debug JS running on iOS devices directly from VS Code.

CacheQueryOptions Arrive in Chrome 54 news
Good news for Cache Storage API users.

Two free weeks of JavaScript training: React Native, Async, GraphQL rawurl course
Learn from Google, Twitter and Netflix alums about Event Loops, React, Flux, Async Coding & Front End DevOps
ForwardJS Courses  Sponsor

A Look at 8-Digit Hex Color Codes tutorial
The extra 2 digits are for alpha transparency.
Chris Coyier

How to Translate from DOM to SVG Coordinates and Back Again tutorial
Craig Buckler

Content Security Policy, Your Future Best Friend tutorial
Why Content Security Policy (CSP) is important and what you need to be aware of when configuring it.
Nicolas Hoffmann

A Guide to Browser Scroll Animations tutorial
Brian Rinaldi

MinMaxing: Understanding vMin and vMax in CSS tutorial
Dudley Storey

Fancy SVG Letter Animation with anime.js tutorial
Mary Lou

Building a responsive HTML5 app? Learn the must-know techniques with this whitepaper rawurl tutorial
If you're a HTML5/JS dev, responsive web design is or will be a requirement in the near future. This whitepaper will give you the must-know on responsive web.
Progress  Sponsor

The Colors Used by the Ten Most Popular Sites story
Goes deeper into Web color than you’d expect from the title alone.
Paul Hebert

Redesigning a Seven-Level Navigation System: A Case Study story
Marko Dugonjić

Is Web Programming a Series of Hacks on Hacks? opinion
A very busy discussion on Hacker News.
Hacker News

The Job of a Web Designer is Changing (And That's Good News) opinion
Paul Boag

granim.js: Create Fluid and Interactive Gradient Animations code
Demo page.
Benjamin Blonde

pageAccelerator: A Very Light Solution to Load Web Pages Faster code
An agnostic library that uses ajax and pushState to deliver a faster navigation experience.

The 'Stranger Things' Intro in CSS demo
An impressive CSS recreation of the intro to this summer’s biggest Netflix show.
William O'Beirne