WOFF 1.0 at 16: The Format That Made Web Fonts Work — Did you know @font-face was adopted into CSS2 in 1998? But it sat largely unused amid fights over licensing, obfuscation and DRM. Chris Lilley, PNG co-author and author of W3C's 1996 case for fonts on the web, explains how the deadlock broke with the “entirely DRM-free” format we know and love.

Chris Lilley (W3C)

Your Chart is Waiting on the Database, Not the DOM — The render is instant. The query behind it isn't. TimescaleDB extends Postgres so dashboards query live data at scale, no pipeline to keep in sync. Hypertables, columnar compression, continuous aggregates. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

∞ To infinity and Beyond, in CSS — e, pi, infinity, and NaN are all widely supported constants accepted in CSS math functions, and Adam runs through several ways going to infinity can improve your designs.

Adam Argyle

The Launch of CodePen 2.0 — CodePen has been a reliable piece of web development infrastructure for 14 years and now the experience has gone 2.0 with an all-new editor, and lots of goodies for paid users like the ability to quickly deploy pens to a CodePen subdomain.

Chris Coyier

When You Need To Make a Triangle, Think Conic Gradients — conic-gradient() is more flexible than you might imagine! You can make pie segments, ray bursts, or triangles, and use transitions on them too.

Chris Coyier

Measuring Component Performance with the Container Timing API — Chrome's origin trial for the Container Timing API lets you tag a DOM region with a containertiming attribute and track each contentful part as it paints. It won't tell you when a component is finished, though.

Harry Roberts

When and What Should You Actually Log? — The difference between logs that help you debug and logs that just cost you. Get tips here.

Sentry sponsor

Paint the Static Image First, Fetch the Animation After — Andy's elaborate animated banner weighs half a megabyte, so now a static AVIF paints first with the animated SVG only fetched on screens big enough to do it justice.

Andy Clarke

Handling Concurrency on the Web with Web Locks API — A practical walkthrough of stopping multiple tabs from racing each other, thanks to the widely available Web Locks API.

Cesar Contreras

The Core Web Vitals Thresholds You Trust Might Be Wrong — RUM data from ten retailers suggests Google's 2.5s 'good' LCP threshold is too lenient, with optimal engagement arriving between 100ms and 1 second.

Tammy Everts

Stolen Buttons — One designer's hobby is 'stealing' buttons from the sites they visit. It's quite the collection and certainly reflects the current design zeitgeist. There's a browser extension if you want to make your own similar hoard.

Anatoly Zenkov

Canvas UI: A Creative Canvas and WebGL Component Library — An open source, framework agnostic library of cutting edge HTML-in-Canvas and WebGL components you can copy and paste. This has received a lot of kudos on social media this week.

David Haz

Building an AI Workflow UI in React? Start With JointJS — A real data model, polished UX, and performance that scales with your canvas. Skip months of building.

JointJS sponsor

🌐 MapLibre GL JS 6.0: Interactive Vector Maps for the Web — A WebGL-powered library for rendering interactive vector tile maps. Version 6 goes ESM-only, requires WebGL 2, and lands broad performance gains. Release notes and a v5 to v6 migration guide.

MapLibre

Markdy: Like Mermaid but for Animations and Motion — Instead of writing animations in CSS or JavaScript, you use a simpler language focused on core animation concepts (akin to Mermaid with diagrams). The examples are neat.

Hoang Yell

KaTeX: Fast Math to HTML Typesetting for the Web — Based on Donald Knuth’s TeX, KaTeX provides a no-dependency way to rapidly render TeX math expressions in a predictable manner, regardless of environment. The sandbox demo page shows off how smooth it is.

Emily Eisenberg and Sophie Alpert

Dither It: An Online Image Dithering Tool — Drag in an image and play around with settings, palettes, and more to get the vibe you want. Josh W. Comeau recommended this tool on Bluesky recently, and his thread has much better examples than my attempt above… 😅

Alex Harris