#361 — October 10, 2018

Read on the Web

Frontend Focus

Start Performance Budgeting — A review of performance budgeting, the metrics to track, trade-offs to consider, plus budget examples. “For success, embrace performance budgets and learn to live within them..”

Addy Osmani

Custom Elements Now 'In Development' on Microsoft Edge — Not a lot to see here, but Edge is the last major browser to get on board with custom elements. Shadow DOM is being worked on, too.


⚛️ New Course: Complete Intro to React, v4 — Learn to build real-world applications in React. Much more than an intro, you’ll start from the ground up all the way to using the latest features in React 16+ like Context and Portals. We also launched a follow up course, Intermediate React.

Frontend Masters sponsor

Use Cases for Flexbox — A look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at, especially now that we have CSS Grid too?

Rachel Andrew

How I Remember CSS Grid Properties — A method to remember the most common CSS Grid properties. “This will help you use CSS Grid without googling like a maniac.”

Zell Liew

Firefox to Support Google's WebP Image Format — Now Apple’s Safari is the only major holdout, since Edge now supports it too. (Caution: CNet has annoying autoplaying ads.)


Understanding the Difference Between grid-template and grid-auto — It pays to understand the difference between implicit and explicit grids. grid-template properties adjust placement on an explicit grid, whereas grid-auto properties define an implicit grid’s properties.

Ire Aderinokun

💻 Jobs

Sr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Work on Uber's Open Source Design Language — We're developing Base UI, a new React component library for web applications at Uber and beyond. Join our team.


Join Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.


📘 Articles & Tutorials

How to Use the Animation Inspector in Chrome Developer Tools — A rundown of which animation dev tools are available in Chrome, how to access them, and what they can do for you.

Kezz Bracey

How One Invalid Pseudo Selector Can Equal an Entire Ignored Selector — Did you know that “if any part of a selector is invalid, it invalidates the whole selector”? Thankfully things are beginning to change.

Chris Coyier

Create a Serverless Powered API in 10 Minutes

Cloudflare Workers sponsor

Moving Backgrounds Around According to Mouse Position

Chris Coyier

Adaptive Serving using JavaScript and the Network Information API — Serve content based on the user’s effective network connection type.

Addy Osmani

Writing a JavaScript Tweening Engine with Between.js — This developer decided to try their hand at writing their own tweening engine.

Alexander Buzin

The Ultimate Guide to Proper Use of Animation in UX

Taras Skytskyi

Let a MongoDB Master Explain Users and Roles

Studio 3T sponsor

Getting Started with WordPress's New Gutenberg Editor By Creating Your Own 'Block' — Gutenberg is a new content editor coming to WordPress 5.0.

Muhammad Muhsin

▶  Chrome 70: What’s New in DevTools

Kayce Basques (Google)

CSS Floated Labels with :placeholder-shown Pseudo Class

Nick Salloum

Bad Practices on Birthdate Form Fields

Anthony Tseng

🔧 Code and Tools

CSS Stats: A Web Tool to Visualize and Show Stats on the CSS Sites Use

Morse, Jackson and Otander

Automated Visual UI Testing — Replace time-consuming manual QA and catch visual UI bugs before your users do. Get started with our free 14-day trial.

Percy sponsor

Hover.css: A Collection of CSS3 Powered Hover Effects — For use on all sorts of page elements like links, logos, buttons, and more. Demos here.

Ian Lunn

a11y-dialog: A Very Lightweight and Flexible Accessible Modal Dialog


Baffle: A Library for Obfuscating then Revealing Text

Cam Wiegert

WorkerDOM: The DOM API, But For Inside Web Workers — Still a work-in-progress.

AMP Project