Delicious

Maple Mono: Open source monospace font with round corner, ligatures and Nerd-Font icons for IDE and terminal, fine-grained customization options. 带连字和控制台图标的圆角等宽字体，中英文宽度完美2:1，细粒度的自定义选项 - subframe753...

When it comes to new CSS capabilities you don't have to avoid using them because there's not much browser support. Lean into progressive enhancement instead. It'll cover a lot of cases for you.

An underdog media query, resolution queries, comes to the rescue here in defining radial gradients that don't blur or get the jaggies.

Sleek, modular open source JavaScript file uploader

— The personal website of Sara Soueidan, inclusive Web UI engineer

Collection of 100+ stunning UI components free and open source built with Next.js, React, Tailwind CSS, and Motion.

Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.

Learn how to implement post previews in Astro for headless WordPress using the HWP Previews plugin. This guide covers WPGraphQL, authentication, and ensuring a seamless content creator experience.

CSS custom functions are a gamechanger. Here are 5 really useful examples.

The whole point of auto-fit and auto-fill is that you aren't saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

How I added a complete newsletter system to my static Astro site using Cloudflare KV, Resend, and MDX - no external CMS required.

Web Developer based in London

Design systems are more than style guides: they’re made up of workflows, tokens, components, and documentation — all the stuff teams rely on to build consistent products. As projects grow, keeping everything in sync gets tricky fast. In this article, we’ll look at how smart tooling, combined with automation where it makes sense, can speed things up, reduce errors, and help your team focus on design over maintenance.

Make accessibility rules easy with this color palette generator for complex design systems.

Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have scroll-driven animations in CSS, which is free from the main-thread blocking that can plague JavaScript animations.

Using modern CSS units and math functions

Hyvector - Your friendly vector editor

scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

Create harmonious color patterns with Oklchroma, a powerful OKLCH-based color scale generator for designers and developers.

I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.

A plain-language guide to WCAG accessibility standards. Friendly explanations that make accessibility easier to understand, one criterion at a time.

How to serve high-quality, vertical and horizontal video variants and break free from platforms like YouTube

Apply lo-fi effects to your images and videos: dithering, halftone, gradients, patterns and more. Free, no sign-up required.

Focus trapping is about managing focus within an element, such that focus always stays within it. The whole process sounds simple in theory, but it can quite difficult to build in practice, mostly because of the numerous parts to you got to manage.

Accessibility and boldness are the key focus in Olivia King’s customised typeface for the publishing giant.

Defining terms for design tokens.

A look at what happens when you add a whole list of transforms to an element, and how that interacts with `animation-composition`.

Generate beautiful color palettes for your design system.

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.