Together with  Dynaboard logo

#​576 — January 18, 2023 | Read on the web

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


📙 Tutorials, Articles & Opinion

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

▶  Working with WebXR and Three.js — A short series of YouTube videos on the basics of creating VR and augmented reality experiences using Web APIs.

Mohit Kumar Toshniwal

Not Everyone's Currently Building for The Web, But Probably More People Should
Thomas Steiner

Building a Color Palette with CSS: Three Methods
Rahul Chhodde

Six Common SVG Fails (And How to Fix Them)
Mariana Beldi

🔧 Code, Tools & Resources

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 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.


🧑‍💻 JOBS

Software EngineerStimulus is a social platform started by Sticker Mule to show what's possible if your mission is to increase human happiness. Join our engineering team.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.