Frontend Focus
Issue 320 — December 13, 2017
“Understanding what a BFC (Block Formatting Context) is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.” If you’ve ever wondered what overflow: auto actually does, you need this article..
Rachel Andrew

A look at the thorny issue of integrating modern CSS Grid layouts into an existing design system, (and how you’ll reap the benefits of leaner, more maintainable markup to boot).
Stuart Robson

The responsiveness happens in a single CSS Grid-related property, namely grid-template-columns coupled with the auto-fit keyword.
Per Harald Borgen

Percona's webinar walks through scaling situations, the steps needed to deploy a sharded cluster: from a single instance to a sharded environment. Common mistakes/pitfalls a company encounters when scaling its database – and how to avoid such situations.
Percona   Sponsor

In this introductory article, Parcel’s creator explains how it solves key problems with existing bundlers like Browserify and Webpack: performance and complex configs.
Devon Govett

“At some point every developer accidentally makes a bad release of an asset with a long cache lifetime. There is a way back.”
Andrew Betts

Supported in all browsers, CSS counters provide a way to control number values in generated content. Here’s a look at three use cases.
Adam Laki

“Frontend engineering once again evolved at a feverish pace in 2017. Here’s a list of the most notable events of the past year.”
Trey Huffine


In Brief

Google Shuts Down The Chrome Web Store Section news
Google says Progressive Web Apps are the future of app-like webpages.
Ars Technica

WebXR Is Going to Bring VR and AR to The Masses. Here’s Why. news
What was WebVR 2.0 has now officially become WebXR.
Owen Williams

The Way the WHATWG Works Is Improving news
Slightly dry, but significant news for day-to-day work on Web standards.

Creating a Calendar Layout with CSS Grid tutorial
Jonathan Snook

The 'Blur Up' Technique for Loading Background Images tutorial
Elegantly going from a 40x22 pixel preview up to a full photo.
Emil Björklund

Building a Voice-Activated Movie Search App Powered by Amazon Lex, Lambda, and MongoDB Atlas (Part 1) tutorial
This post includes a Lex overview, demo scenario and data layer setup.
mongodb  Sponsor

How To Iterate Your Way to a Winning Content-Driven Website tutorial
Smashing Magazine

Automating Your Accessibility Tests tutorial
A reminder to carry out regular accessibility testing, and pointers on how you can automate it.
Seren Davies

Measuring Actions with the User Timing API tutorial
Includes a neat live example.

Mutating Web Content using DOM Ranges tutorial
Andrea Giammarchi

Popular CSS Button Hover Effects Explained tutorial
Dynamic Drive

Font Awesome 5 Released: The Popular Web Icon Set and Toolkit tools

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

Specificity Visualizer: Analyze CSS Selector Specificity tools
Paste in your CSS and get a bird’s-eye view of selector specificity - particularly handy for ensuring larger style sheets work efficiently.
Francesco Schwarz