Frontend Focus
Issue 277 — February 15, 2017
A simple, practical example of how CSS variables (supported in all major browsers except Edge) can lead to looser coupling and better code when JS needs to interact with CSS.
Sérgio Gomes

A significant change for one of the most used developer sites in the world. This post digs into the changes made and how they performed during A/B testing.
Stack Overflow

What is the performance reality of embedding external assets directly into pages or stylesheets? The conclusion is ‘Base64 still feels like a huge anti-pattern.’
Harry Roberts

Get real-time crash alerts and collect detailed diagnostics so you can fix errors for your users. See deminified stacktraces with support for sourcemaps. Cut through front-end noise so you can efficiently assess the impact of errors. Learn more.
Bugsnag   Sponsor

The Web Speech API provides the ability to voice-enable your website by using the SpeechRecognition and the SpeechSynthesis interfaces.
Aaron Gustafson

Some of the ideas currently in discussion at the W3C regarding the Selectors Level 4 Draft.
Arturo Campos

Essentially a list of 113 HTML elements which link to pages explaining their use and the attributes they support, if any. There’s a similar reference for CSS too.
Jeremy Thomas

Covers basic HTML, CSS, the box model, flexbox, floats, etc. Suited for beginners but I found the flexbox page a good primer on its own.
Interneting Is Hard

Jobs Supported by

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

In Brief

Editor's Draft of CSS Timing Functions Level 1 news

Achieving 60 FPS Mobile Animations with CSS3 tutorial
Jose Roasario shares tips for animating elements in mobile contexts.

A Basic Introduction to CSS Attribute Selectors tutorial
e.g. [href$="5555"] for links to URLs ending in ‘5555’.
Tiffany Brown

Front-end ♥ npm; npm ♥ you 
Bring npm to work to unblock collaboration, quit reinventing the wheel, and build amazing things.
npm, Inc.  Sponsor

Exercises in Flexbox: Simple Web Components tutorial
Zviad Sichinava

Creating a 'Rollover' Map of the US with SVG and JS tutorial
Chris Coyier

CSS Grid Layout Terminology, Explained tutorial
Ire Aderinokun

HTML Canvas Cheatsheet tutorial

HTML5 for the Mobile Web: Browser Forms and Input Types story
An overview of new form controls, how they look, behave and are supported on various mobile browsers.
Ruadhán O'Donoghue

CSSO: A CSS Minifier with Structural Optimizations tools
Sergey Kryzhanovsky

A Collection of 180 Curated CSS3 'Web Gradients' tools

Create data-intensive, feature-rich web and mobile apps with Sencha Ext JS tools
Learn how to design, develop and test data-intensive web apps that run on desktops, tablets, and smartphones with Sencha Ext JS
Sencha, Inc.  Sponsor

ScrollDir: Leverage Vertical Scroll Direction in CSS Via a Data Attribute code
Dollar Shave Club

SVGO: A Node-Based Tool for Optimizing SVG Files code
A long standing project but still getting frequent updates.

Rythm.js: Make Elements On Your Page 'Dance' code
A funny effect but warning: music autoplays.
Benjamin Plouzennec

Sticky-Kit: jQuery Plugin for Sticky Elements code
Attach elements to the page when the user scrolls.

Fluid Paint: A WebGL-based Painting Experience demo
A browser-based WebGL painting simulator. Code.
David Li