Frontend Focus
Issue 323 — January 17, 2018
A great introduction to the concepts around lengths, units, and content-based sizing with layouts based on Grid and Flexbox.
Rachel Andrew

An introduction to HTML’s new dialog element for adding native modal boxes.
Keith J. Grant

A well presented, visual guide to what different CSS properties do.
Jeremy Thomas

Linode Cloud Hosting
Get a Linode server up and running in seconds. Simply choose your plan, distro and location and you’re ready to deploy your server. Get $20 credit on a new account.
Linode Cloud Hosting   Sponsor

An update to a benchmark for modern web app responsiveness that simulates user interactions upon a basic app. 2.0 better reflects the frameworks, tools, and patterns in wide use today.

Muted autoplay will be fine, but for audio to play some conditions must be met. Only in Chrome Canary for now, but if you use autoplaying videos you need to be prepared.
Google Developers

Works with GitHub Flavored Markdown (GFM) but can be extended with your own extensions. Supports all major browsers (IE10+). GitHub repo.
NHN Entertainment


In Brief

Frontend Developer Love Conference 15-16 Feb Amsterdam ❤️ news
Frontend Developer Love  Sponsor

How To Make a Drag-and-Drop File Uploader With Vanilla JavaScript tutorial
Joseph Zimmerman

'display: contents' is Coming tutorial
Manuel Rego Casasnovas

Small Tweaks To Make a Huge Impact on Your Site's Accessibility tutorial
CSS Tricks

Decorative Letter Animations with anime.js and Charming tutorial
Some fun shape and letter animation experiments.
Mary Lou

Simplifying the Apple Watch Breathe App Animation with CSS Variables tutorial
This goes amazingly deep on the CSS.
Ana Tudor

Keeping Users Engaged Through Better Front End Performance tutorial
Pantheon  Sponsor

Recording Video and Audio in Browser using the Web Media API video
Tim Ermilov

Zigzag Image–Text Layouts Make Scanning Less Efficient opinion
Nielsen Norman Group

Building a Mind-Controlled HTML5 Video story
Alex Castillo

Hey Meta: Website Meta Tag Checker and Builder tools
A tool to quickly check and (re)build some of your meta tags.
Igor Štumberger

CSS Cheat Sheet: A Quick Go-To Reference for CSS Goodness tools
Adam Marsden

Optimize Web App Performance with Datadog tools
Collect and alert on real-time metrics from your web applications and infrastructure. Start a free trial.
Datadog  Sponsor

canvas-area: Lightweight HTML Container Element for Canvas Elements code
Stefan Goessner

Crooked Style Sheets: How Pure CSS Can Track You on Web Pages code
It’s either a tutorial or a warning, depending on your inclination.
Jan Böhmer

webshot-factory: Web Screenshots at Scale Based on Headless Chrome code
Ashish Shubham

InfiniteGrid: Arrange Card Elements Infinitely on a Grid Layout code
GitHub repo.

Instagram.css: A Set of Instagram-style Filters Created in Pure CSS code
Yan Zhu

CSS Background Patterns Found on CodePen code
Freebie Supply

KaTeX: Fast Math Typesetting for the Web code
Easy-to-use library for TeX math rendering on the web.
Khan Academy