Frontend Focus
Issue 242 — June 1, 2016
The CSS foundation of the BBC’s popular sports site is under 9kb. This in-depth review looks at the performance decisions behind their approach to CSS.
Shaun Bent

Lea Verou noticed in the latest HTML specs that ‘slider’ controls have many cool features that aren’t widely implemented, so she’s produced a polyfill for one.
Lea Verou

A 17 minute talk looking at things like CSS modules, variables, custom selectors and tools to let you use them right now.
Christian Vuerings

Frontend Masters
Learn how to build functional, reactive web applications in Angular 2 with a Redux inspired library, @ngrx/store and observables from Rx.js.
Frontend Masters   Sponsor

Used for ‘preformatted text’ like code listings, the ‘pre’ tag throws up some special formatting concerns you need to consider.
Chris Coyier

“We have creative directors and design directors, but we don’t seem to have any front-end directors. And maybe we should.”
Jeffrey Zeldman

At Render 2016, Google’s Jake Archibald stressed the importance of getting Web content rendered ASAP and some of the new Web technologies that can help.
Jake Archibald

Positioned grid items have some special features, explained in this handy post that’s ideal for any working with CSS Grid already.
Manuel Rego Casasnovas

A look at responsive design patterns such as mega dropdown navigation, content grids, maps and charts, and responsive art direction.
Vitaly Friedman

Jobs Supported by Hired.com

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

In Brief

Make Dashes in HTML Comments No Longer Cause Parsing Errors? news
Tweaks being considered for WHATWG’s HTML standard.
WHATWG

Progressive Web App Dev Summit 2016 (Amsterdam, NL) news
Two days of talks, labs and access to the Chrome engineers to discuss the future of the web.
Google

Rangle’s Online Angular 2 Training: Now Free rawurl course
Master RESTful API's, ES6, TypeScript and more with the experts who developed the Angular 2 debugging tool, Augury. Attend remotely or in person as it suits the needs of you and your team.
RANGLE.IO  Sponsor

Single Character Transforms with CSS and JS tutorial
A look at how to animate individual characters using CSS animations.
Simon Codrington

Make Your Own Responsive SVG Graphs and Infographics tutorial
Alex Walker

Building Animated Covers for Video with Sprites tutorial
A large JPEG sprite sheet proves more efficient than an animated GIF.
Kawandeep Virdee

CSS Coding Techniques tutorial
Tips for writing better, easier-to-maintain CSS code.
Belén Albeza

5 Ways to a Sticky Footer tutorial
Chris Coyier

A Walk Through an Effective Way to Debug CSS tutorial
Ben Frain

Ways You Can Tell The Browser How To Optimize tutorial
The CSS will-change and contain properties, and responsive image attributes.
Chris Coyier

SVG in Motion video
Sara Soueidan

What's New in Chrome 51 for Developers video
3 minute video on Intersection Observers, Passive Event Listeners and the Credential Management API.
YouTube

5 More Awesome New Mozilla Technologies opinion
Tofino, AFrame, Dev Toolbar, Platform Status, and pdf.js.
David Walsh

Stop Painting and Have A Meaningful Interaction with Me opinion
“Time to First Meaningful Interaction” seems more useful than merely how quickly bytes arrive to the browser.
Dion Almaer

The Aural UI of HTML Elements tools
A large demonstration of how various HTML elements are rendered in audio by screen readers.
Steve Faulkner and Léonie Watson

A Collection of Web Safe CSS Font Stacks tools
CSS Font Stacks

Flex Layout Attributes (FLA) tools
Two custom HTML attributes (layout and self) you can use as shortcuts for flexbox style layout direction.
ProgressiveRed

ClosestColor: Analyzes Your CSS for Close Color Matches tools
Instead of adding yet another color to your CSS, find the closest existing one to reuse.
ClosestColor

Lightning fast SSD hosts for your HTML5 project rawurl tools
Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use code HTML520 for $20 credit.
Linode  Sponsor

WebGazer.js: Democratizing Webcam Eye Tracking in the Browser code
Brown HCI Group