First Batch of Color Fonts Arrives on Google Fonts — You can customize color palettes, add gradients, and more with the rather fancy COLRv1 font binary vector format. Google Fonts now has nine new typefaces that you can use, or just play around with to get an idea of what this expressive technology can enable.

Sarah Daily

Discover New HTML Elements & CSS Selectors — Join Jen Kramer for this detailed video course on intermediate HTML and CSS techniques, covering semantic HTML, inheritance, specificity, the cascade, and more. You'll also get a hands-on look at using new selectors such as :has(), :is(), and :where().

Frontend Masters sponsor

Total Blocking Time: A Short and Sweet Guide for Happier Users — Any delay longer than 50 milliseconds and visitors can sense that a page is 'unresponsive.' Tracking and reducing such delays is vital to avoiding a poor experience. “Blinking takes approximately 100–400 milliseconds. That’s fast, but it’s two to eight times longer than most people will accept when interacting with a rendering web page.”

Ben Schwarz

JavaScript APIs You Don’t Know About — Ok, it’s a bold headline — plenty of you will have at least heard of these, but it’s nonetheless a decent roundup to catch up on where the web platform is. Covers APIs like Page Visibility, Web Sharing, and the Broadcast Channel API.

Smashing Magazine

Why the type="number" Input is the Worst Input — Think that web form has got your number? If you used input type=”number”, you may be surprised to find that it doesn’t.

Jared Toporek

Smooth and Simple Page Transitions with the Shared Element Transition API — This API allows page transitions within single-page apps, and is available as an origin trial now.

Jake Archibald

'React I Love You, but You’re Bringing Me Down' — An opinionated React thought piece. This time, though, the author gets creative checkpointing the progress (or lack thereof) of React over the years in ‘mix tape’ style with plenty of code and memes sprinkled in for good measure.

François Zaninotto

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut — The best issue tracking software is one that software developers are actually happy to use.

Shortcut (formerly Clubhouse.io) sponsor

Experimenting with WebTransport — A new(ish) API offering low-latency, bidirectional, client-server messaging. It's a bit more flexible than WebSockets and runs over HTTP/3. Browser support is very patchy so far, alas.

Jeff Posnick

Which Fonts to Use for Your Charts and Tables — Sans-serif or serif typefaces? Lining or oldstyle figures? Narrow or wide? With lots of examples, we can see which fonts work best for data visualizations.

Lisa Charlotte Muth

Theatre.js 0.5: Hackable Motion Design for the Web — Can be used both programmatically and visually to animate 3D objects created with things like Three.js, React Three Fiber, HTML/SVG, or even to ‘animate’ variable values. v0.5 introduces 3D scene editing and complex keyframing. Docs and GitHub repo.

Theatre.js Project

mediaquery.style: A Quick Reference for Useful Media Query Syntax Snippets — Includes seven common media query snippets, with explanations, for those who occasionally forget the exact syntax (all of us, no? 😆)

Adrian Payne

Seamlessly Add Chat and Activity Feeds to Your Applications

Stream sponsor

Core Web Vitals Check: Bulk Test Core Web Vitals Scores for Up to 500 Pages — This tool gives you three different ways to test: a single URL, a list of URLs for bulk checking, or you can enter a keyword to test the scores of the top 50 sites that appear on Google for that keyword.

experte

Vanilla: A Simple, Extensible CSS Framework — Includes a responsive grid, some useful patterns and utility classes, and its composability allows you to only include what you need. From the team behind Ubuntu.

Canonical