Frontend Focus
Issue 326 — February 7, 2018
Explores the use of media queries in responsive design today, how they work alongside Flexbox and Grid Layout, and what’s coming in the future.
Rachel Andrew

Google Chrome will soon begin to block ads on some sites by default. Here’s a closer look at how it will work.
Daniel Aleksandersen

Firefox’s new JS debugger is pretty powerful, and will help you write fast, bug-free code.
Smashing Magazine

Frontend Masters
Master CSS Grid and Flexbox, the latest tools and tricks to layout beautiful, responsive web applications with less code.
Frontend Masters   Sponsor

Historical context on how CSS approaches/tooling have evolved to what we have today.
Peter Jang

A meaty first step in a series on creating a game built around the mechanic of React and Redux controlling SVG elements.
Bruno Krebs

We all want images to load fast: “Choosing the right image format, optimizing the quality and using responsive images are important tasks, but what can we do beyond that?”
Smashing Magazine

We linked to the code a few weeks ago but now the CTO of Basecamp and creator of Ruby on Rails shares his vision for an alternative to single-page client-side MVC apps.
David Heinemeier Hansson

The grid- prefix is no longer required for properties such as grid-gap and grid-row-gap, (although Firefox still needs it right now).
Manuel Rego on Twitter


In Brief

CSS Grid Layout Module Level 2: First Public Working Draft news
Level 2 expands Grid by adding ‘subgrid’ capabilities and aspect-ratio–controlled gutters.

How W3C is Fast-Forwarding Media Support on the Web news
François Daoust (W3C)

Welcoming Progressive Web Apps to MS Edge and Windows 10 news
Edge now supports Service Workers and push notifications.

Project Tracking, Teamwork & Client Reporting Like You've Never Seen Before  Sponsor

Get a Parallax Effect on the Cheap tutorial
It’s pretty neat just how simple this approach is.
Dave Rupert

Automatic Visual Diffing of Web Pages with Puppeteer tutorial
How to set up Puppeteer to automate both taking screenshots of your project and comparing them.
Monica Dinculescu

Hyperapp + Parcel = A Neat Way to Create Frontend Apps tutorial
Beat that JavaScript fatigue with a tiny Elm-inspired frontend library plus a new, no-config asset bundler?
Adam Boro

Three 'Superpowers' of the Flexbox Model tutorial
How flex-basis, flex-shrink and flex-grow work.
Maciej Nowakowski

Using the 'initial' Keyword in CSS tutorial
It can act something like a ‘reset’ for CSS properties.
Adam Laki

Counting with CSS Counters and CSS Grid tutorial
Cleverly using CSS Grid to work around a CSS counter limitation.
Preethi Sam

Five Things Episode 4: Five Things About RxJS in Angular, with Ward Bell video
In this episode learn how Angular uses RxJS and how RxJS helps with cloud development with Ward Bell.
Microsoft  Sponsor

CSS Best Practices: Scaling CSS in a Fast-Growing SaaS Startup story

A History of WaSP and Why Web Standards Matter story
Jason Hoffman

Frontend Frameworks: Custom vs Ready-to-Use Solutions opinion
Ivaylo Gerchev

30 Scalable and Customizable SVG Backgrounds for Web Pages tools
These are really neat.
Matthew Lipman

AccessLint Hooks into GitHub, and Comments on Your Pull Requests tools
AccessLint  Sponsor

Font Awesome Free 5 Now Available on GitHub tools
Fort Awesome

LCUI: A C Library for Building Desktop UIs with C, XML and CSS code
Like C? Like Web technologies? Here’s a lightweight way to marry the two if building small desktop apps.
Liu Chao