Frontend Focus
Issue 313 — October 25, 2017
The story behind the CSS Grid spec, and the more than 20-year process that led to today.
Aaron Gustafson

Starts from the usual basics (title, charset, etc.) but works up to a significant number of meta and link tags useful in various situations.
Josh Buchea

The popular webdev tool Firebug surely inspired Chrome’s DevTools but has now reached end-of-life. Here’s a look back at what it brought us during its 12-year lifespan.
Jan Honza Odvarko

Get started with modern developers solution for charting and visualization. ZingChart is fully featured, integrates with popular JS frameworks, & has a robust API with endless customization options.
ZingChart   Sponsor

Ben Galbraith, leader of the Chrome Web Platform team, and Dion Almaer, Google Engineering Director, discuss the state of Chrome and the Web Platform today.
Google Chrome Developers

Addy Osmani runs through loading best practices for diagnosing and making real-world sites load ‘instantly’. Filmed at the Chrome Dev Summit 2017.
Google Chrome Developers

GitHub uses this for scanning for inaccessible elements within its interfaces during development.


In Brief

CKEditor 5 Rich Text Editor Released news
Frederico Knabben

Get FlexGrid, the best JavaScript data grid: Fast, flexible, no dependencies 
With no dependencies and a small footprint, Wijmo FlexGrid is built for speed and extensibility.
GrapeCity Wijmo  Sponsor

Alt-texts: The Ultimate Guide to 'alt' Attribute Text tutorial
Daniel Göransson

Building an Elegant Progress Ring with SVG tutorial
.. and then using it as a Web Component or in Vue or React.
Jeremias Menichelli

Animating a Blur Efficiently tutorial
Google Developers

My Approach to Using z-index tutorial
A recommendation to categorise all uses of z-index as either local or global.
David Gilbertson

Thoughts on Tabbed Interfaces tutorial
The art of creating an accessible tabbed component, and whether you should.
Inclusive Components

Screen Capture in Google Chrome tutorial
How to access the screen capture capabilities of Google Chrome from within a web app.
Phil Nash

How to Build a Grid Inspector tutorial
A fun little project that aims to leave you with a better understanding of how the devtools Grid Inspector tool works.
Dave Geddes

Detect Supported Audio Formats with JavaScript tutorial
David Walsh

Creating Component Variants with Scoped CSS Variables tutorial
Jonathan Harrell

Get Your Dream Job In Tech - Learn to Code at Fullstack Academy 
Fullstack Academy is the nation's leading coding school - Our graduates get hired at Google, Facebook and Amazon.
Fullstack Academy  Sponsor

A Look Back at the History of CSS story
Jason Hoffman

Building a Modern Mobile Media Experience video
Francois Beaufort and John Pallett review best practices for mobile web media, including playback controls, pre-loading, autoplay and offline.
Google Chrome Developers

Axis-Praxis: OpenType Variable Fonts in the Browser tools
A web tool for playing with Variable Fonts.
Laurence Penney

SVG Regular Polygon Generator tools
Varun Vachhar

SQIP: A SVG-based 'Low Quality Image Preview' Technique code
Generate tiny SVG-based placeholders on the server side.
Tobias Baldauf

Monopoly Board Created with CSS Grid demo
John Coppola