Ten Tips for Better CSS Transitions and Animations — An engaging and practical look at the things learnt about crafting transitions and animations on the web. Good, sound tips here.

Josh Collinsworth

🔡 Modern, System-Based Font Stacks — System font stack CSS snippets organized by typeface classification for every modern OS if you want the truly fastest fonts available with no downloading or layout shifts.

Dan Klammer

Headless CMS with World-Class TypeScript Support — Kontent.ai is the leading platform for modular content. Streamline your code using TypeScript SDK, CLI, Rich text resolver, and strongly typed model generator. Scale with no problems when your project grows. Have you seen our UI?

Kontent.ai sponsor

SPA View Transitions Land in Chrome 111 — The View Transition API (currently only in Chrome) allows animated page transitions within single-page apps, and will later include multi‑page apps. This could save a lot of work.

Jake Archibald (Chrome Developers)

“Design First, Then Build”: Let’s Bury This Myth Forevermore — Waiting to build your mobile or web app after all the mockups and designs are complete is an increasingly obsolete model. This post presents an alternative approach.

Roman Shamin & Travis Turner

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions — CSS trigonometry functions are now in the latest versions of both Firefox and Safari. Here Mads looks at what can be done with these new CSS mathematical powers, by way of a cool working clock demo.

Mads Stoumann

Inspiring Web Design and UX Showcases — A showcase of unique web design collections hoping to dispel any feeling that all sites look the same. Some neat stuff here.

Cosima Mielke

Relative Rounded Corners — If you’ve got a rounded corner on both the outside and inside of an element, both with the same value, it can look odd. This post digs into the math and shares a formula to get 'relative' rounded corners, along with a CSS utility to apply to your projects.

Andy Bell

How to Change Favicon Upon Switching Browser Tabs — Originally inspired by Astro, you can see the concept at work on notepad.js.org

Amit Merchant

Rendering Patterns for Web Apps: Server-Side, Client-Side, and SSG Explained — A good explainer of the different options available in many Jamstack frameworks. It even dives into differed rendering (ISR), islands and streaming SSR as well as the pros and cons of each rendering method.

Germán Cocca

Beautiful and Mind-Bending Effects with WebGL Render Targets — Learn how to use WebGL Render Targets to create post-processing effects, optical illusions, and transition effects in React Three projects.

Maxime Heckel

Embetty 4.0: Show Third Party Embeds Without Compromising Privacy — Tweets, and Facebook, Video or YouTube thumbnails (see demo here.) The privacy comes from using a proxy server you host yourself.

heise online

MiniSearch: Small In-Memory Fulltext Search Engine for Browser and Node — The strength of this solution is that the data from which it fetches is stored locally, thus allowing it to work offline and has good performance. Here's a live demo.

Luca Ongaro

css-variable: A Tiny Treeshakable Library to Define CSS Custom Properties in JS — Compatible with popular CSS-in-JS libraries like Emotion, styled-components, Linaria, etc., and it boasts better CSS minification and smaller virtual DOM updates, among other features.

Jan Nicklas

Tuple, a Lightning-Fast Pairing Tool Built for Remote Developers

Tuple sponsor

Finder 3.0: CSS Selector Generator JS Library — Given an element, it produces the shortest possible selector that reaches (solely) that element. If you want something like this in the browser, Selector Gadget has been one of our must have extensions for years.

Anton Medvedev