Frontend Focus
Issue 316 — November 15, 2017
A major update that’s “over twice as fast as Firefox from 6 months ago, built on a completely overhauled core engine.” It’s time to revisit Firefox if you haven’t recently.
Mark Mayo

A frontend developer from Spotify looks at several approaches to showing something in place of an image before that image loads.
José M. Pérez

Kendo UI
Kendo UI—the premium JavaScript UI component library for jQuery, Angular, React, and Vue, is pleased to announce full support for the new Angular 5 release. Kendo UI combines the power of feature-rich components with easy integration.
Kendo UI   Sponsor

Despite the latest edition of CSS: The Definitive Guide dwarfing earlier ones, Eric Meyer suggests CSS is not any more complex than it was, just more capable. The book’s out now.
Eric Meyer

Apple and Microsoft are shipping WebAssembly support in the new versions of Safari and Edge, so all 4 major browsers can now run code compiled to the super-fast wasm format.
Judy DeMocker

Mozilla’s major reboot of Firefox came out yesterday — here’s an accessible look at the work that went into its retooling.
Lin Clark

What element queries are and where community consensus currently finds itself amongst developers and standards working groups.
Dennis Gaebel


  • Web Client EngineerJoin a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more. DISCOVERY DIGITAL MEDIA
  • Senior Front End Software EngineerApply now for this job on Indeed Prime and you’ll also be considered for similar jobs at leading companies for free. Esurance in partnership with Indeed Prime

In Brief

Firefox Quantum 57 for Developers news
A more practical list of things you need to be aware of in the latest Firefox release, including Firefox’s new CSS engine, Stylo.

Be a Full Stack Expert. Learn MongoDB Free in M001, MongoDB Basics course
MongoDB University courses are free and give you everything you need to know about MongoDB.
mongodb  Sponsor

The Contrast Swap Technique: Improved Image Perf with CSS Filters tutorial
Una Kravets

Go Beyond console.log with the Firefox Debugger tutorial
Mozilla Hacks

Cross-Origin Communication with postMessage tutorial
Adam Laki

Creating a TripAdvisor-Style Text input Highlight Effect tutorial
A line under the text field highlights as you type more text.
Petr Gazarov

A Cute Way to Highlight Images Lacking 'alt' Attributes tutorial
Matt Smith on Twitter

Flexbox and Grids, Your Layout’s Best Friends tutorial
Debunking myths around Flexbox and Grid, and showing you the power of these two technologies working together.
Eva Ferreira

Creating a Loading Placeholder with Sass tutorial
Using animation to simulate loading text content.
Lee Robinson

6 CSS Code Smells tutorial
Robin Rendle

Designing Grids video
This talk delves into grid design theory and makes it applicable for today’s web.
Mark Boulton

Analyzing Your Page's Layers with Chrome DevTools' Layers Panel video
Google Chrome Developers

Should We Stop Using Google's Font Service and Self Host? opinion Google can change how fonts look on the fly.

Monitor, Analyze, and Optimize Web App Performance tools
Start collecting and correlating real-time metrics from over 200 technologies in minutes. Try it free.
Datadog  Sponsor

Tailwind: A Utility-First CSS Framework for Rapid UI Development code
Adam Wathan, Jonathan Reinink, et al

Shards: A UI Toolkit Based on Bootstrap 4 code