Bookmarks

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.