The History of CSS — Jay Hoffman returns for another instalment in his excellent web history series, this time looking at the backstory of CSS. The series so far has covered things such as search, browsers, web design, and more — all are well worth a read. Oh, and there’s also an audio version of this narrated by Jeremy Keith if you fancy.

CSS-Tricks

The Humble <img> Element and Core Web Vitals — Images have always been a key part of the web (well, since HTML 2.0 anyway ;-) — they communicate ideas instantly, but they are also a lot heavier than text to load. As such, it’s essential to get loading and displaying them right. Here's an excerpt from Addy’s new book on the topic (also, check a free PDF preview).

Addy Osmani

Nail the Fundamentals of Web Performance — Join Todd Gardner for an in-depth course on all things web perf. You’ll learn about new core web vitals metrics, such as cumulative layout shift, and how to improve them.

Frontend Masters sponsor

New WebKit Features in Safari 14.1 — We mentioned this release in passing in last week’s issue, but here’s a blog post from the WebKit team outlining what’s new — such as Flexbox Gap support, individual CSS transform properties, the Paint Timing API, WebM support, and more.

Jon Davis

How to Create Actions for Selected Text With the Selection API — Click, drag, release: you’ve just selected some text on a webpage — a selection menu pops up with some options for what you may want to do next. Here’s how to make one.

Preethi Sam

Performance-Testing the Google I/O Site — Another solid performance review from Jake here, this time looking at how the Google I/O site fares on a 3G mobile connection. (Spoiler: It’s rather slow)

Jake Archibald

The State of CSS Cross-Browser Development — Thoughts on why cross-browser development is better today than ever before, and a look at what issues still remain.

Ahmad Shadeed

Trouble with Remote Pair Programming? Download Revelo’s eBook — The future of work is here. Prepare yourself and your team for remote pairing.

Revelo sponsor

Understanding Design Systems: Designing Component APIs — “Designers that understand how component APIs work can make more meaningful decisions when defining a component”

Eduardo Ferreira

Iconic: A Free Set of 'Do-what-you-want' Pixel-Perfect Icons — 150+ SVG icons. Requires login to download or copy the code and the icons are searchable and categorized.

James M & Orman C

CQFill: A Polyfill for CSS Container Queries — In case you were wondering, Container Queries have no browser support yet except Chrome behind a flag. Related: Bramus Van Damme takes a look at how it works here.

jonathan neal

A Better Way to Build Internal Tools

Retool sponsor

CSS Filters Generator: A Live Playground for CSS Filters — This online tool lets you easily generate cross-browser CSS to modify hue, saturation, brightness, contrast, etc. using CSS filters. Upload your own image or use the example.

Michael Bollin

Eva.js: A Frontend Game Engine for Creating Interactive Game Projects — Includes components that are ready to use out-of-the-box and it uses PixiJS for performant WebGL rendering. Try it in this live playground.

EVA

QuickSnippets: Categorized Code Snippets Sourced from Tweets — Nicely laid out, searchable, and categorized for easy filtering. Note that the snippets are generally in images, so not the most accessible, but it’s a nice selection.

QuickSnippets

Font Subsetter: A Fast and Easy to Use Font Subset Generator

orthosie