The Truth About CSS Selector Performance — Did you know that certain CSS selectors are faster than others? This article explains, outlining the ones that are important to keep an eye on for performance, and shares how a new tool in Microsoft Edge can help you measure the impact.

Patrick Brosset

Top Front-End Tools of 2022 — Louis takes a look at the most useful frontend tools for CSS and JavaScript developers that were most popular last year (and will hopefully help speed up your development workflows).

Louis Lazaris

Dynaboard: The Pro-Code Web App IDE Made for Developers — Build high performance public and private web apps in a collaborative — code forward — WYSIWYG environment.

Dynaboard sponsor

Optimizing the Image Element LCP — Largest Contentful Paint (or LCP) is both a major web performance metric, and ranking factor. Here, Eloïse provides an overview of the best practices for the integration and optimization of an LCP image.

Eloïse Martin

Why Not document.write()? — We’re often told not to use document.write(), but… why?! Harry digs in, noting that it “guarantees both a blocking fetch and a blocking execution, which holds up the parser for far longer than necessary”.

Harry Roberts

Discovering the Capable Web — What advanced web capabilities does your browser support? Just how Fugu is your browser? Thomas explains Project Fugu and a set of new APIs — ”a cross company effort to close gaps in the web’s capabilities, enabling new classes of applications to run on the web”.

Thomas Steiner (Chrome Developers)

Priority Hints and Optimizing LCP — Priority Hints are used to indicate to the browser the relative priority of a resource. Here, web performance expert Kevin takes a deep dive into how you can go about improving your Largest Contentful Paint by using fetchpriority.

Kevin Farrugia

Free Website Speed Test: Does Your Site Meet Google's Core Web Vitals? — Get an in-depth technical analysis of your site and learn how to make it fast. Rank higher in Google & deliver great UX.

DebugBear sponsor

Using :is() in Complex Selectors Selects More Than You Might Initially Think — Because selector matching happens from right to left, you might end up with more matches than you expected.

Bramus Van Damme

A History of Web Browser Engines from 1990 to Today — An interesting overview and timeline of browser engine marketshare over the past ~33 years. This was last updated in October of last year, but we haven’t shared it here in the newsletter before.

Alphonse Eylenburg

SSSVG: An Interactive SVG Reference — A handy visual and interactive SVG reference. Quickly look up how to define SVG shapes, transforms, masks, patterns, gradients, text and more.

Sébastien Noël

Lazy Brush 2.0: A Library for Smooth Pointer Drawing — Allow your users to draw smooth curves and straight lines with your mouse, finger or any pointing device. This long standing library has just migrated to TypeScript and gained a new ‘friction’ option to customize the feel. GitHub repo.

Jan Hug

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

contrast-ratio: A Tool to Calculate the Contrast Ratio Between any Two Valid CSS Colors

Lea Verou

Ripple UI: A Collection of Tailwind Components and Utilities — A nice collection of 20+ customizable components with support for dark mode out-of-the-box. Includes good documentation and examples for each component.

Mauricio Siu

Accessible Color Palette Generator: Beautiful WCAG-Compliant Colors — Includes a gallery where each pair of colors follow WCAG 2.1 AA based on a contrast ratio of 4.5:1, or you can generate a pair from a single color of your own.

Venngage