(untitled)
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
Notes - Alex Carpenter
Notes on engineering, developer experience, design systems, and accessibility.
Latest posts
(untitled)
favorite resources on composition: Composition Is All You Need React Composition Patterns Just use children The “everything bagel” of components Quit Your YAP-ing
(untitled)
Agentic tool stack recently: herdr worktrunk plannotator.ai /plannotator-review has been such a big improvement to reviewing lots of agent written code recently.
(untitled)
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)); }
colordx
A high-performance color library with extended support for modern color spaces including OKLCH, OKLAB, Display-P3, and more.
You Don't Have a Design System
(untitled)
<svg viewbox="0 0 16 16" width="32">...</svg> <svg viewbox="0 0 16 16" height="32">...</svg> Setting only width or height scales the icon along that axis. Along the other axis, the icon centers itself in whatever space its container gives it via the default preserveAspectRatio=“xMidYMid meet”, instead of stretching to fill it. Helpful for aligning icons with text with height="1lh" .
(untitled)
I’ve never been a fan of a seperate <IconButton /> component. Finally landed on what feels like a nice naming scheme. <button shape="square"> <Icon /> </button> <button shape="circle"> <Icon /> </button> Shape supports default | square | circle options where square and circle both removes the inline padding and sets the aspect-ratio to 1/1 . .btn { height: 2rem; padding-inline: 0.625rem; }…
Clever property usage to create a light-dark probe
@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 */ } }
How to choose a UI font
CSS anchor positioning for sidenotes
kizu.dev/anchor-positioning-experiments x.com/s3ththompson
OKHST: predictable color generation for user interfaces
Tom Sachs X Culture Slop interview
@klinking/squircle
Tailwind CSS v4 squircle (superellipse) corner utilities with visual radius correction.
datavolve
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.
A collection of Tailwind CSS utilities for fading edges of scroll containers based on scroll position.
Clerk components RTL support
Migrating to CSS logical properties for RTL support, so layout, spacing, borders, and positioning mirror correctly across locales. <Box sx={t=> ({ marginRight: t.space.$1,// [!code --] marginInlineEnd: t.space.$1,// [!code ++] })} /> ESLint rule prevents physical left/right CSS from creeping back in.
APCA color contrast guidelines promoted to stable
The Advanced Perceptual Contrast Algorithm (APCA) contrast calculator has officially left its experimental phase and is now available as a standard preference setting. APCA replaces the legacy AAA/AA contrast guidelines with a modern perceptual contrast model optimized for modern displays and text rendering.
Where to Find the Colors Your Screen Can’t Show You
Animating The Dialog Element Using View Transitions
How's Linear so fast? A technical breakdown
(untitled)
Put together an example shadcn/ui carousel component implementation with smooth scroll progress dot indicators. Demo: https://shadcn-ui-carousel-dots.vercel.app Code: https://github.com/alexcarpenter/shadcn-ui-carousel-dots
Better fluid sizing with round()
(untitled)
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: 10%; } &:active { --am: 20%; } } .blue { --bg: oklch(48.8% 0.243 264.376); --fg: oklch(1 0 0); } .neutral { --bg: oklch(92.9% 0.013 255.508); --fg: oklch(27.8%…
Tree structure using CSS anchor positioning
One of the coolest uses of CSS anchor positioning I have seen.
Nikhil Anand's personal website
Nguyễn Ngọc Ánh's personal website
William Jansson's personal website
Using Container Queries in a CSS Grid to Detect Truncation
Managing Context Windows with pi /tree: Branches, Summaries, and Subagent-like Workflows
Daniel Griesser's PI Config
The Anatomy of an Agent Harness
Agentic Engineering Patterns
Patterns for getting the best results out of coding agents like Claude Code and OpenAI Codex.
React Grab
Smooth Dot Indicators with Embla Carousel and CSS color-mix()
How I implemented smooth carousel pagination indicators that respond to scroll progress
History of Software Design
How to implement beautiful shadow borders
Naz Hamid's personal website
Anton Repponen's personal website
ESLint complexity rule
<TextMorph />
Dependency-free animated text component.
Building Type-Safe Compound Components
@nano_kit/store
@nano_kit/store is a lightweight state management library inspired by Nano Stores and built around a push-pull based reactivity system.
react-prehydrate
Eliminate flash-of-incorrect-state for user preferences in React Server Component apps.
ASCII characters are not pixels: a deep dive into ASCII rendering
How I Use Claude Code
Digital hygiene
eslint-plugin-react-render-types
ESLint plugin that brings Flow’s Render Types to TypeScript via JSDoc. Enforce component composition constraints like @renders {MenuItem} at lint time.
Matt Rothenberg's personal website
RESILIENT-UI SKILLS
npx skills add alexcarpenter/resilient-ui