Frontend Focus Issue 361: October 10, 2018

#361 — October 10, 2018

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.

Microsoft

⚛️ 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.)

CNet

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.

Uber

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.

Hired

📘 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