Frontend Focus
Issue 280 — March 8, 2017
CSS Grid support is in the now public Firefox 52 and coming in the next Chrome release too. Eric Meyer is excited about the possibilities. Rachel Andrew has similar opinions. Want to get started? There’s lots of useful links here.
Eric Meyer

Are you using the best development tools? Is your CSS compilation complicated? A look at the lay of the land based on Ashley Nolan’s Front-End Tooling Survey.
Craig Buckler

Learn everything about the CSS Grid Module in this illustrated guide with practical examples & demos.
Hui Jing Chen

2017 predictions for the key and rising JavaScript libraries and frameworks and JS’s New Frontiers in this whitepaper.
Progress   Sponsor

A look at key innovations including CSS Grid support, an improved responsive design more, and ES7 async/await support. Prefer a complete list? Enjoy the developer release notes.

Create sounds right in the browser with the Web Audio API. This post does a good job of starting with the basics and showing off some demos.
Greg Hovanesyan

In just 7 minutes, Alon Zakai, originally the creator of the Emscripten LLVM-to-JavaScript compiler, explains what WebAssembly is all about.

For the past few weeks there has been lots of talk about HTML headings in web standards circles. This insightful piece takes a very deep dive into the nature of HTML document outlines.
Amelia Bellamy-Royds

Safari 10.1 introduced the ‘Reduced Motion’ Media Query, a declaration that lets developers “create styles that avoid large areas of motion” for users that prefer that.
Eric Bailey

Jobs Supported by

  • React Developer at X-Team (Remote)We're looking for a developer with an extensive knowledge of React and Javascript. We are 100% remote and we provide the funding needed to help you achieve your goals and grow. X-Team
  • Front-End JavaScript Engineer (f/m) - Contentful (Berlin)As our front-end engineer, you'll work on a modular user interface where API design and application architecture are the main challenges. contentful
  • Software Engineer, Web - Zürich, SwitzerlandCentralway is seeking an experienced programmer to come and join the team. The right candidate will be responsible for building and maintaining high performance web applications with cutting-edge technologies. Centralway Numbrs

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

In Brief

'Web Annotation' Now A Web Standard news

Why I Love Element Queries and You Should Too tutorial
What makes element queries powerful and how you can get started using them with the EQCSS plugin.
Tommy Hodgins

Building Web Extensions Because You Can tutorial
Benjamin Young

Using the Block-Element-Modifier (BEM) System in CSS tutorial
Tiffany Brown

How to Create A Spinning Loading Image with CSS Only tutorial
Web Tricks

Squash bugs quickly tools
Eliminate issues faster with automatic anomaly detection, intelligent alerts, and end-to-end, real-time monitoring. Try for 14 days free.
Datadog  Sponsor

An Interview with CSS's Creator on Printing Web Pages story
Håkon Wium Lie talks about CSS printing, its history, and Prince (an HTML to PDF converter).
Tony Osbourn

How We Built EQCSS & Why You Should Try Building Your Own Polyfills Too story
Tom Hodgins

DRM in HTML5 Is A Victory for The Open Web, Not A Defeat opinion
The W3C’s decision will keep the Web relevant and useful.
Peter Bright

The Benefits of Learning How to Code Layouts with CSS opinion
Jen Simmons

14 Must Know Chrome DevTools and Console Tricks video
14 quick tips in 10 minutes with Wes Bos.

Previewing Mozilla's WebAssembly Explorer video
A look at a new tool to help developers understand and experiment with WebAssembly.

A 7 Minute Video Introduction to CSS Grid and the Firefox Grid Inspector Tool video
Jen Simmons

3 Websites for Generating SVG Patterns tools
Chris Coyier

SQL Source Control: track each change to your SQL Server database tools
Get a full history in your source control system. See who made changes, what they did & why. See how.
Red Gate  Sponsor

Gutenberg: Modern Framework to Print The Web Correctly code
A sort of ‘base stylesheet’ for printing Web documents beautifully.
Fabien Salathe

Interactive Millenium Falcon WebGL 3D Model demo