Notes - Alex Carpenter

Working on some updates to make it easier to theme Clerk components from your existing CSS variables.

type Cat = { kind: 'cat' } type Dog = { kind: 'dog' } type Pet = Cat | Dog function example(pet: Pet) { switch (pet.kind) { case: 'cat': return ...

let animationRange = [0, 62]; if (!

The Prettify helper is a utility type that takes an object type and makes the hover overlay more readable. type Prettify<T> = { [K in keyof T]: T[K]; } & {};

Automatic foreground color contrast based on the provided background color. button { --background: black; --foreground: color( from var(--background) xyz round(up, min(1, max(0, 0.18 - y))) round(up, min(1, max(0, 0.18 - y))) round(up, min(1,

Harmonizer is a tool for generating accessible, consistent color palettes for user interfaces.

it’s never just that simple

Also the companion tailwindcss-spring plugin.

Very nice scroll mask implementation using registered @ properties by Sam Becker.

Not uncommon to see folks add form submit handlers on the submit buttons click event vs on the forms submit handler.

Quick little improvement for wrapping highlighted text.

Quick little improvement for elements that render dark even in light mode and have overflow, force the color-scheme to dark to blend the native form controls a bit better. pre { color-scheme: dark; } View demo on Twitter.

Stop vertically aligning your checkboxes with center.

This was a fun layout challenge for some dashboard UI we’ve been working on at Clerk.

const tags = ["HTML", "CSS", "JavaScript"]; { new Intl.ListFormat("en-US").formatToParts(tags).map(({ type, value }) => { if (type === "element") { return <a href={`/${slugify(value)}`}>{value}</a>; } return value; }); } which retu…

.element { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease-in-out; } .element.open { grid-template-rows: 1fr; } References: How to animate an element’s height with CSS grid Animating CSS Grid (How To + Examples)

React Aria exposing state through the className is super handy.