Frontend Focus
Issue 251 — August 3, 2016
Some creative (and fascinating) thinking about the future of the Web and how it might not require a browser at all. If you want to be challenged by your thoughts over what the Web is, read this.
Paul Kinlan

An incredibly thorough tutorial covering reflections with CSS and building a specific effect based on them. Packed with code and demos.
Ana Tudor

Static site generators have been in fashion for a while now, but how well can they cope with team development, thousands of pages, or other real world scenarios?
Stefan Baumgartner

Frontend Masters
Brian Holt (Netflix) tackles some big topics in just five hours: Algorithms and Big O Analysis, Recursion, Sorting, Data Structures and Functional Programming.
Frontend Masters   Sponsor

A look at your options of giving the user the impression that content is loading, be it via progress indicators, placeholder layouts or lazy loading.
Kenan Yusuf

Practical recommendations crafted from usability testing, field testing, eye tracking and complaints from disgruntled users.
Nick Babich

Battery status indicators are being used to track devices, say researchers from Princeton University.
Alex Hern

Jobs Supported by

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

In Brief

Bootstrap 4 Alpha 3 Released news
An overhauled grid, updated flexbox mode, a new font stack and plenty of bug fixes.

Fast and Smooth Web Video on Android with Chrome 52 news
Big improvements for video on the latest mobile Chrome.

Microsoft Edge Goes From 0% to 100% HTML Accessibility Score in 1 Year news
Based on the work at
Steve Faulkner on Twitter

What’s Next for Multi-Process Firefox news

W3C Invites Implementations of Mixed Content news

Komodo IDE: The Best IDE for Web and Mobile Developers rawurl tools
Web & mobile devs get all their favorite frameworks, languages, and tools in one cross-platform, polyglot IDE
ActiveState  Sponsor

Precedence in CSS (When Order of CSS Matters) tutorial
“Assuming specificity is exactly the same, order does matter. Styles declared later win.”
Chris Coyier

3 Weird SVG Browser Inconsistencies tutorial
“With SVGs you always need to cross-browser test”, says Una Kravets.
Una Kravets

How To Create A Responsive Drum Machine tutorial
..using Web Audio, SVG and Multitouch.
David Rousset

Create a 3D Panorama Image for the Web with A-Frame tutorial
David Walsh

Visual Regression Testing with PhantomCSS tutorial

Mastering Responsive Web Design: The Dos and Don'ts tutorial
Stephen Moyers

Editing Images in CSS: Filters tutorial
Using CSS filters to achieve high-contrast, blurred or brighter versions of particular images on your site.
Monty Shokeen

How to Throttle Web Scroll Events tutorial

A Look at CSS 'Writing Mode' tutorial
“The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.”
Ahmad Shadeed

High Performance SVGs tutorial
Tips for optimizing SVGs before putting them online.
Sarah Drasner

Key Moments in Web Page Loading video
A quick look at the meaning of ‘time to first paint’ and how long it takes for a page to be truly useful.
Google Chrome Developers

Are You Writing 'Legacy' CSS Code? opinion
Jim Newbery

Hover Is Dead, Long Live Hover (on the Web) opinion
“the mouse hover has become largely unreliable”
Jordan Staniscia

Type Anything: A Simple Typography Tool to Test Online Font Combos and Metrics tools

CSS Stats: A Web Tool to Visualize and Show Stats About Your CSS tools
Adam Morse and Brent Jackson

67 Open Source Modal Window Plugins for the Web code
I’m not a fan of these but sometimes they have a use.
Julia Chen

React Interpose: Using CSS Variables in React Components code
Adam Timberlake

How to find and fix the slowest code in your .NET application rawurl
Find bottlenecks in your code or database & boost performance with new ANTS Performance Profiler 9. Try free
ants performance profiler  Sponsor