Creating a World-Class Code Playground with Sandpack — A couple of months ago we featured the release of CodeSandbox’s Sandpack, a toolkit for creating your own ‘live code editor’ components. Josh Comeau shows off how to actually use it to good effect to boost your blog posts, documentation, etc.

Josh W Comeau

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

Creating Halftone Patterns with CSS — Looks at how to recreate a dotted, halftone style image effect using vanilla CSS, including the radial-gradient() background-image property. Quite a cute approach.

Michelle Barker

A First Look at the 'Websites and Software Applications Accessibility Act Bill' — The U.S. Congress recently introduced a new bill to ensure digital accessibility for websites and applications. Here, Ben takes a look.

Ben Myers

When Life Gives You Lemons, Write Better Error Messages — So, what makes a good error message? The Wix team attempts to offer clarity on that — they’ve recently edited thousands of error message prompts to ensure they are all inclusive, helpful, and aid the overall user experience.

Jenni Nadler

From Development to Real Users: How to Create a Web Performance Story — An engineer at Spotify shares how having good tooling in place can help you measure, monitor, and identify key moments in a user’s journey, and take appropriate action for impactful results.

Vinicius Teixeira Dallacqua (Spotify)

Marketing Notifications Suck and Everyone Toggles Them Off — Make sure important and transactional notifications get delivered with Courier. Get a Demo.

Courier.com sponsor

Using Web Components with Next.js (or any SSR Framework) — A current shortcoming of web components is that they lack support for server-side rendering. This means that, in JavaScript frameworks, the code to make Web Components work doesn’t run until hydration occurs. This post looks at a potential solution to this (with some significant caveats).

Adam Rackis

"Why We're Breaking Up with CSS-in-JS" — A software engineer shares what originally attracted them to the idea of keeping CSS and JS together, and why they (along with the rest of their team) have decided to shift away from it.

Sam Magura

The Wasted Potential of CSS Attribute Selectors — A long-time BEM user muses on treating attribute selectors on par with classes “as first-class citizens”.

Elise Hein

Introduction to WebC for Single File Web Components — A new single file web components tool by Zach Leatherman (creator of popular SSG Eleventy) for serializing custom elements at build time. It aggregates component-level CSS and JS, allowing devs to keep their styles/scripts together with the markup as single file components (the way you may be used to if you work with frameworks such as Svelte or Vue). ▶️ Here's a quick crash course video on how to use it.

W. Evan Sheehan

whyframe: Develop Components in Isolation Inside iframes — This could be useful if you’re building some kind of documentation that needs to demonstrate interactive components in an isolated example on the page.

Bjorn Lu

Shortcut Brings Product and Engineering Together. Try It for Free

Shortcut (formerly Clubhouse.io) sponsor

Selection: A Library to Enable Visual Selection of DOM Elements — For example, if you want users to be able to drag a box around various elements they want to select. Touch device friendly. Has wrappers for use with React, Preact and Vue too.

Simon Reinisch

Intl Explorer: A Way to Learn and Experiment with the ECMAScript Internationalization API — Supported by all major browsers, the Intl object provides access to the ECMAScript Internationalization API, a suite of functions for language sensitive string comparison, number formatting, and more. This site provides an interactive way to learn about how it operates.

Jesper Orb

Tailwind Color Picker: A Chrome Extension Color Picker that Copies the Closest Tailwind Equivalent Color — Note: It's a Chrome extension though isn't on the extension store just yet..

Hassan El Mghari

svg-path-morph: JS Library to Smoothly Interpolate Between Variations of SVG Paths

Anders Brams

Pokemon Deckz — A neat demo showing a collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards. Repo here.

Simon Goellner