#424 — January 22, 2020

Read on the Web

Frontend Focus

Cleaning Up the CSS Cascade — A genuinely beautiful explanation to how browsers handle the cascade in Cascading Style Sheets (CSS). If you’re an expert, you might not learn much here, but it’s a resource worth passing on to others.

Amelia Wattenberger

Native Web Components Come to Microsoft Edge (Thanks to Chromium) — We mentioned in last week's issue how Microsoft’s Chromium-based version of Edge is now available, this also means that “all major evergreen browsers now support Web Components natively.”

Polymer Project

Clubhouse.io: Make 2020 Your Most Productive Year — Clubhouse is a collaborative home for software development that breaks down silos and brings creators together to ship value, not features. Now free for up to 10 users.

Clubhouse.io sponsor

▶  Writing CSS in The Year 3019 — A look at how topics such as progressive enhancement, accessibility, internationalization, and performance (as it relates to writing CSS) work today and how they may change.

Ire Aderinokun

Navigating The Web with a Gamepad — A thorough look at how you can navigate a page using a gaming controller (via the in-draft Gamepad API). Highlights how to move focus, use all the controller inputs and even provide feedback using the vibration motors.

De Voorhoede

Timeless Web Dev Articles — This is a great Twitter thread full of links to what folks consider to be timeless articles on web development. Plenty to dig into and add to your reading list.

Pavithra Kodmad on Twitter

HEAD: Everything To Go In Your HTML's head Element — From the basics up to a vast number of meta and link tags useful in various situations. We linked to this a year ago but it’s been updated over 2019 and remains a valuable resource.

Josh Buchea

Flow: A New Browser On The Block? — An interview with Piers Wombwell, lead developer of Flow, a new in-development browser that has a completely new multi-threaded rendering engine (with no relation to WebKit, Gecko, or Blink).

Peter-Paul Koch

💻 Jobs

Programmer - Research & Fidelity (United States) — Join our Research & Fidelity team and help shape the front end of our Rails apps and expand our suite of open-source JavaScript frameworks.


Senior Frontend-Focused Engineer in Munich — Do you love working with React, TypeScript, GraphQL, and working in a user-centred team? Then you're in for a treat. 🍪 Let's protect some businesses together. 🙌


Find a Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.


📙 Articles, Tutorials & Opinion

How We Built Picture-in-Picture in Firefox Desktop with More Control Over Video — A detailed behind-the-scenes look at the evolution of the Picture-in-Picture player for the Firefox Desktop browser.

Mike Conley, Emanuela Damiani (Mozilla)

Building a D3 Dashboard with React, Material UI and Cube.js — Uses Postgres for the database (though you can use another, if you prefer) with React and D3 on the front end.

Cube Developers

Learn WebAssembly with This Practical and In-Depth Book

Level Up With WebAssembly Book sponsor

Fines for EU Privacy Breaches (GDPR) Reach 114 Million Euros

Douglas Busvine

Microsoft Edge for Windows 10 Finally Delivers A Top-Class Browser — If you haven’t had chance to try out Microsoft’s new version of Edge yet, here’s a review outlining what to expect.

Zac Bowden

Google Sunsetting Support for data-vocabulary Schema — As of April 6, data-vocabulary markup will no longer be eligible for Google rich result features.

Dan Brickley & Moshe Samet (Google)

How to Turn a Procreate Drawing into a Web AnimationProcreate is an iPad drawing app.

Sarah Drasner

Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords

Elad Shechter

How To Self-Host Your Web Fonts

Kev Quirk

Copy to The Clipboard using JS and The Clipboard API

Catalin Rosu

🔧 Code, Tools and Resources

calcolor: Calculate Colors, Share Palettes — The author of this nifty tool has just written a thesis on the problems with common color models, and this web app came about following that research. It provides an alternative way to interact with digital color — Use it to preview/reference a single color, find its matching counterparts and tweak the color composition.

Timon Weber

Polypane 2.1: Edit All Your Panes At The Same Time — A new release of this (paid) developer-focused browser. Version 2.1 adds a nifty live CSS feature, a new meta information panel and rich snippet previews.

Kilian Valkhof

GooFonts: Google Fonts by Tags — This site has taken the 900+ available Google Fonts and tagged/grouped them all by keywords (such as cursive, corporate, magic, funny, etc).

Paulina Hetman & Sylvain Guizard

fitty: Makes Text Fit Perfectly — This lightweight JS package will scale up (or down) text so it fits perfectly to its parent container.

Rik Schennink

   🗓 Upcoming Events

Flashback Conference, February 10-11 — Orlando, USA — Looks at cutting-edge web dev, browser APIs and tooling, but adds how they’ve evolved from the past to the web of today.

Frontend Developer Love, February 19-21 — Amsterdam, Netherlands — Three full days of talks from 35+ global JavaScript leaders from around the world.

ConveyUX, March 3-5 — Seattle, USA — This West Coast user experience conference features over 65 sessions across three days.

W3C Workshop on Web & Machine Learning, 24-25 March — Berlin, Germany — Hosted by Microsoft, this free event aims to “bring together providers of Machine Learning tools and frameworks with Web platform practitioners to enrich the Open Web Platform with better foundations for machine learning”.