Notes - Alex Carpenter

That is the difference.

make your inline icons resilient to wrapping. avoid flex + items-center. vertically align SVG with height="1lh" and size with width. https://codepen.io/editor/alexcarpenter/pen/019ff69c-0252-7405-84c4-a61eff18d6ec

favorite resources on composition: Composition Is All You Need React Composition Patterns Just use children The “everything bagel” of components Quit Your YAP-ing

Agentic tool stack recently: herdr worktrunk plannotator.ai /plannotator-review has been such a big improvement to reviewing lots of agent written code recently.

active transform scale, I want to love you… I do, as its such a nice piece of feedback for pressed state. but we really need the ability to scale by px value. button:active { transform: scale(calc(100% - 6px)); }

A high-performance color library with extended support for modern color spaces including OKLCH, OKLAB, Display-P3, and more.

<svg viewbox="0 0 16 16" width="32">...

I’ve never been a fan of a seperate <IconButton /> component.

@property --scheme-probe { syntax: "<color>"; inherits: true; initial-value: white; } .card { --scheme-probe: light-dark(white, black); } @container style(--scheme-probe: black) { .swatch { border-style: dashed; /* any property */ } }

kizu.dev/anchor-positioning-experiments x.com/s3ththompson

Tailwind CSS v4 squircle (superellipse) corner utilities with visual radius correction.

Datavolve is a tiny, type-safe TypeScript library for versioning persisted client data, safely evolving old localStorage, IndexedDB, or JSON state to the current shape through forward-only transforms with zero dependencies in 258 bytes.

Migrating to CSS logical properties for RTL support, so layout, spacing, borders, and positioning mirror correctly across locales.

The Advanced Perceptual Contrast Algorithm (APCA) contrast calculator has officially left its experimental phase and is now available as a standard preference setting.

Put together an example shadcn/ui carousel component implementation with smooth scroll progress dot indicators.

Tint buttons based on their foreground color for :hover and :active states. button { --bg: transparent; --fg: currentColor; --am: 0%; background-color: color-mix(in srgb, var(--bg), var(--fg) var(--am)); color: var(--fg); &:hover { --am:…

One of the coolest uses of CSS anchor positioning I have seen.

Patterns for getting the best results out of coding agents like Claude Code and OpenAI Codex.

The interview gallery on ibrewmyown.coffee uses image carousels with pagination dots.

Dependency-free animated text component.

@nano_kit/store is a lightweight state management library inspired by Nano Stores and built around a push-pull based reactivity system.

Eliminate flash-of-incorrect-state for user preferences in React Server Component apps.

ESLint plugin that brings Flow’s Render Types to TypeScript via JSDoc.