Astro 3.0 Released — This new version of popular web framework / site generation system Astro claims to be amongst the first to support the View Transitions API — making transitions possible without rolling out a SPA. This release also includes image optimization improvements, optimized built outputs, and more. Repo here.

Astro

Browse Websites by What Fonts They Use — If you’re looking for inspiration or the ways in which a particular font has been used, this is a handy resource.

Bertrand Bruandet

Headless CMS with AI Capabilities, That’s Kontent.ai — Streamline your code and scale with ease using Kontent.ai. Generate TS types from your content model, use CLI for maintenance tasks, and leverage rich text resolvers to map React components easily. And finally, use AI to generate and improve content.

Kontent.ai sponsor

A Review of Browser Video Players — Browsers each provide built-in video players for the <video> element. Here, Adrian runs some tests to see how they compare from an accessibility point of view.

Adrian Roselli

How Layout Position Impacts Three Big Web Performance Levers — An interesting performance study from Shopify that looked at three common issues that impact on layout position — namely lazy loading images above the fold, asynchronous loading of CSS needed for elements above the fold, and not prioritizing the fetch of the the Largest Contentful Paint (LCP) image.

Sia Karamalegos (Shopify)

Laying Out Dots on Dice using display:flex & Pseudo Classes — A neat problem to solve here: How to display the proper number of dots on the faces of dice.

Maciek Fitzner

Towards HTTPS by Default — Chrome is expanding its ‘HTTPS-First Mode’ in an effort to help keep safe users who run into the “stubborn 5-10% of traffic” that has remained on HTTP.

Joe DeBlasio (Google)

Where to Put Focus When Deleting a Thing — When deleting something Adrian notes that you should “generally move focus to the prior equivalent control or its grouping container”.

Adrian Roselli

Latency Is the New Outage — Learn the basics of Frontend application performance monitoring to see (and fix) slow faster. Join us for a live AMA.

Sentry sponsor

Why Does Email Development Have to Suck? — A relatable explainer on why things are the way they are when it comes to email and what things can help ease the pain.

Hristiyan Dodov

Adapting Illustrations to Dark Mode — Shares a quick way to make any illustrations on your site look good in both light and dark mode.

Simon Farshid

UI Skeleton Gallery: SVG Loader UI Elements for Design Wireframes & Mockups — As explained in the FAQ, “A skeleton element is a UI element or screen that doesn’t contain actual content but instead offers a low-fidelity page wireframe before content completely loads.”

BrandBird

Feature Flags That Devs Actually Want to Use — DevCycle makes it easy to create and manage flags at scale, maintain an organized codebase, and stay on top of tech debt.

DevCycle sponsor

tw2panda: An Online Tool and CLI to Migrate Code from Tailwind to Panda CSS — Panda is a type-safe CSS-in-JS solution we featured a few months back. You can try the online tool here or install locally to use the CLI. Also offers a VS Code extension.

Alexandre Stahmer

🎸 SVGuitar: Create SVG-Based Guitar Chord Charts — You can experiment with it in this live demo.

Raphael Voellmy

Video Thumbnail API: Get Thumbnail Images from Public Video URLs — Enter a public video URL along with a time in seconds to grab a thumbnail at the closest frame. Also usable via a GET request using the API.

Tim Bennetto

SVG Shapes: A Collection of 100+ Customizable SVG Shapes — Choose any shape in the gallery then customize the color using a solid fill or gradient of your choice.

Anup Aglawe