Frontend Focus
Issue 302 — August 9, 2017
Now a W3C Candidate Recommendation, the HTML 5.2 spec defines the second minor revision of HTML. A few things are up for potential deprecation including the ‘menu’ and ‘dialog’ elements.
W3C

The history of all the languages which almost became CSS and the development of the styled web.
Zack Bloom

Component IO
Avoid back-and-forth changes to website content by enabling anyone on your team to make changes themselves. Component IO is a modular CMS that easily integrates with any website & allows even non-technical teammates to make edits without learning new tools.
Component IO   Sponsor

Mozilla is preparing to outmanoeuvre Google’s Chrome browser, beginning with the release of Firefox 57 in November.
Stephen Shankland

Some guidelines to improve the accessibility of your site from color choices through to helpful tools and HTML element choices.
Eva Ferreira

Firefox on Windows is the first desktop browser to support the new WebVR standard (with macOS support ready now in Firefox Nightly).
Mozilla Hacks

grid-gap properties are changing in favour of more generic gap, column-gap and row-gap properties.
Rachel Andrew

Jobs Supported by Hired.com

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

In Brief

CSS Containment Module Level 1: W3C Recommendation news
W3C

W3C Launches a WebAssembly Working Group news
Bradley Nelson

Service Worker Support Coming to Safari news
Initial implementation steps in Safari appear to be taking place.
Maxim Salnikov

Companies Are Losing Web Accessibility Lawsuits news
The ‘Americans with Disabilities Act’ means companies cannot discriminate.
Lainey Feingold

Critical CSS & Webpack: Automatically Minimize Render-Blocking CSS tutorial
Anthony Gore

The new front end: building experiences for devices, Facebook & mobile tutorial
The final blog post in a series examining technologies that are driving the development of modern web and mobile applications.
MONGODB  Sponsor

If You Hate FOUT, 'font-display: optional' Might Be Your Jam tutorial
Your options to avoid showing a ‘Flash of Unstyled Text’.
Chris Coyier

6 Ways to Detect Chrome Headless tutorial
If you want to detect bots, perhaps.
Antoine Vastel

Focusing on Focus tutorial
Mouse and keyword handle focus differently, and the behaviour can change depending on what browser you use. Chris runs through why that matters for accessibility and offers a solution.
Chris DeMars

Keyboard-Only Focus tutorial
Another look at :focus variation between browsers.
Roman Komarov

Are You Concerned About Accessibility? tutorial
How to educate developers on creating accessible websites.
Daniela Matos de Carvalho

Solving CSS Versioning Conflicts tutorial
How New Relic’s engineering teams solve CSS versioning conflicts.
Javier Sánchez-Marín

A Designer’s Guide to Flexbox and Grid tutorial
Jon Yablonski

Using CSS to Detect and Count Prime Numbers tutorial
Crazy but fun. Demo here.
xieranmaya

The Flash Games Postmortem video
Kongregate’s John Cooney looks at the immense history of Flash games.
Game Developers Conference

After a 23-Year Wait, WebVR Ships Today story
The tale of the history of VR on the Web.
Sean White

Web Maker: How I Built a Fast, Offline Frontend Playground story
Kushagra Gour

Resolving CSS Gridlock opinion
Matthias Ott

A CSS Grid Highlighter for Chrome tools
Adem Ilter

DisplayJS: A Simple, Lightweight JS Framework for Building Ambitious UIs tools
Arthur Guiot

Analyze web app performance in real time tools
Collect custom metrics from your servers, dbs, and 200+ techs. Start visualizing and alerting in minutes.
Datadog  Sponsor

JPNG.svg: Combine PNG Transparency with the Compression of a JPEG tools
A drag and drop tool that compresses large transparent images.
Stephen Shaw