Notes - Alex Carpenter

Tree structure using CSS anchor positioning

Sat, 04 Apr 2026 18:35:11 GMT

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

Nikhil Anand's personal website

Fri, 27 Mar 2026 18:49:41 GMT

Nguyễn Ngọc Ánh's personal website

Sat, 21 Mar 2026 12:31:11 GMT

William Jansson's personal website

Sat, 21 Mar 2026 12:29:03 GMT

Using Container Queries in a CSS Grid to Detect Truncation

Fri, 20 Mar 2026 12:37:14 GMT

Managing Context Windows with pi /tree: Branches, Summaries, and Subagent-like Workflows

Tue, 17 Mar 2026 11:19:43 GMT

Daniel Griesser's PI Config

Sun, 15 Mar 2026 23:53:02 GMT

The Anatomy of an Agent Harness

Wed, 11 Mar 2026 11:18:23 GMT

Agentic Engineering Patterns

Sun, 08 Mar 2026 13:19:33 GMT

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

React Grab

Sat, 07 Mar 2026 00:23:27 GMT

Smooth Dot Indicators with Embla Carousel and CSS color-mix()

Fri, 06 Mar 2026 13:43:22 GMT

The interview gallery on ibrewmyown.coffee uses image carousels with pagination dots. Standard pagination dots using Embla Carousel toggle between active and inactive, but I wanted them to respond to scroll progress: as you drag, the current indicator fades out while the next one fades in.

Implementation

Embla Carousel exposes scroll progress, making this possible:

const onScroll = (): void => {
  const snapList = emblaApi.scrollSnapList();
  const progress = emblaApi.scrollProgress();

  if (snapList.length < 2) return;

  let lower = snapList.length - 2;
  for (let i = 0; i < snapList.length - 1; i++) {
    if (progress >= snapList[i] && progress <= snapList[i + 1]) {
      lower = i;
      break;
    }
  }

  const upper = lower + 1;
  const range = snapList[upper] - snapList[lower];
  const t = range === 0 ? 0 : (progress - snapList[lower]) / range;

  dotNodes.forEach((_, i) => {
    if (i === lower) setDotProgress(i, 1 - t);
    else if (i === upper) setDotProgress(i, t);
    else setDotProgress(i, 0);
  });
};

As t interpolates from 0 to 1, a CSS custom property --dot-progress is set for each dot. This single value drives two animations: width expansion and color interpolation.

Width and Color

The dot width expands as you approach it:

width: calc(var(--spacing) * 2 + var(--spacing) * 3 * var(--dot-progress, 0));

And the color blends between two states using color-mix():

background-color: color-mix(
  in srgb,
  var(--color-neutral-600) calc(var(--dot-progress, 0) * 100%),
  var(--color-neutral-300)
);

This approach preserves contrast, keeping the active dot darkest and the inactive lightest. The browser handles both interpolations without additional JS overhead.

Hat tip to Derek Briggs for the color fade idea: “What if the current active indicator faded out the primary color during the drag and the next active faded in so that the most active item had the most contrast always?”

History of Software Design

Thu, 05 Mar 2026 19:20:10 GMT

How to implement beautiful shadow borders

Wed, 04 Mar 2026 16:25:34 GMT

Naz Hamid's personal website

Sun, 01 Mar 2026 16:25:34 GMT

Anton Repponen's personal website

Sun, 01 Mar 2026 14:30:41 GMT

ESLint complexity rule

Tue, 24 Feb 2026 20:50:52 GMT

Mon, 16 Feb 2026 16:48:22 GMT

Dependency-free animated text component.

Building Type-Safe Compound Components

Mon, 16 Feb 2026 13:21:11 GMT

@nano_kit/store

Sun, 15 Feb 2026 13:41:03 GMT

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

react-prehydrate

Sun, 15 Feb 2026 12:59:10 GMT

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

ASCII characters are not pixels: a deep dive into ASCII rendering

Sun, 15 Feb 2026 00:56:51 GMT

How I Use Claude Code

Fri, 13 Feb 2026 13:12:56 GMT

Digital hygiene

Thu, 12 Feb 2026 12:43:49 GMT

eslint-plugin-react-render-types

Wed, 11 Feb 2026 12:47:53 GMT

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

Wed, 11 Feb 2026 12:43:56 GMT

RESILIENT-UI SKILLS

Mon, 09 Feb 2026 15:49:31 GMT

npx skills add alexcarpenter/resilient-ui

Building Bulletproof React Components

Fri, 06 Feb 2026 12:50:48 GMT

A React trick to improve exit animations

Fri, 06 Feb 2026 12:50:26 GMT

Alexander Vilinskyy's personal website

Tue, 03 Feb 2026 13:43:34 GMT

before-and-after

Tue, 03 Feb 2026 12:06:47 GMT

Composition is all you need.

Thu, 29 Jan 2026 12:21:29 GMT

When life gives you lemons, write better error messages

Wed, 28 Jan 2026 11:47:36 GMT

Say what happened
Say why it’s a problem
Point out how to solve the problem

Mon, 26 Jan 2026 19:34:05 GMT

TIL you can slow down animations in Chrome DevTools.

Press cmd+shift+p (or ctrl+shift+p on Windows/Linux), then search for “animations”. An Animations panel will appear at the bottom of DevTools where you can adjust the playback speed to 100%, 25%, or 10%. All animations on the page will now run at the selected speed.

Greppability is an underrated code metric

Thu, 22 Jan 2026 21:17:27 GMT

Annotating for agents

Mon, 19 Jan 2026 17:28:08 GMT

21 Lessons From 14 Years at Google

Sat, 17 Jan 2026 13:17:52 GMT

Tue, 06 Jan 2026 22:02:58 GMT

CSS only scroll fade example that I implemented on ibrewmyown.coffee:

@supports (animation-timeline: scroll()) {
  @property --fade-left {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }
  @property --fade-right {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  .scroll-fade {
    --fade-distance: 40px;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--fade-left),
      #000 calc(100% - var(--fade-right)),
      transparent 100%
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    animation:
      fade-in-left 1 linear both,
      fade-out-right 1 linear both;
    animation-timeline: scroll(x self), scroll(x self);
    animation-range:
      0% 12%,
      88% 100%;
  }

  @keyframes fade-in-left {
    from {
      --fade-left: 0px;
    }
    to {
      --fade-left: var(--fade-distance);
    }
  }

  @keyframes fade-out-right {
    from {
      --fade-right: var(--fade-distance);
    }
    to {
      --fade-right: 0px;
    }
  }
}

How to target Safari with a CSS @supports media query

Mon, 15 Dec 2025 13:03:15 GMT

Easiest method for targeting Safari with CSS and Tailwind in 2025.

2025 Holiday Coffee Gift Guide

Wed, 03 Dec 2025 12:49:22 GMT

Discover the best coffee gifts for the holidays—espresso machines, drippers, brewers, and bean subscriptions that coffee lovers will actually use every day.

RESILIENT—UI interview #002 with Hayden Bleasel

Tue, 18 Nov 2025 13:30:55 GMT

Australian Design Engineer who loves working on open source software for the web.

The Web Animation Performance Tier List

Wed, 05 Nov 2025 15:20:46 GMT

RESILIENT—UI interview #001 with Dima Belyaev

Wed, 05 Nov 2025 12:52:09 GMT

Staff front-end engineer based in Amsterdam, working on AI assistants at Shopify.

Preserve modal aspect ratio across viewport sizes

Thu, 23 Oct 2025 12:20:33 GMT

This is one of those that feels like it should be easier than it ends up being, but here is where I landed at to ensure a modal image preserves its 3/2 aspect ratio no mater the viewport width/height.

.modal {
  aspect-ratio: 3 / 2;
  height: min(calc(100vh - 2rem), calc((100vw - 2rem) * 2 / 3));
  margin: auto;
  position: relative;
}

See it in action on I Brew My Own Coffee.

Sun, 28 Sep 2025 13:44:13 GMT

It’s always felt weird using opacity for disabled buttons for situations where its not placed on a solid background.

In this alternative approach I am using color-mix to create a similar disabled effect without the opacity.

<button
  class="bg-[color-mix(in_srgb,var(--color-blue-500)_50%,var(--color-background))] text-[color-mix(in_srgb,var(--color-white)_50%,var(--color-background))]"
  disabled
>
  Hello world
</button>

Dither plugin for TailwindCSS

Sat, 20 Sep 2025 12:39:55 GMT

▲ Vercel Web Interface Guidelines

Fri, 19 Sep 2025 12:23:59 GMT

See also Rauno’s Web Interface Guidelines.

Fri, 12 Sep 2025 22:19:56 GMT

I’ve been fortunate to work with some amazing people over the years and a couple of those folks are open for new opportunities. Scoop them up.

Sat, 06 Sep 2025 19:33:30 GMT

Fixing folks list alignment one PR at a time.

Fri, 05 Sep 2025 12:58:10 GMT

Two fantastic pieces of web inspiration:

My shadcn/ui registry

Fri, 05 Sep 2025 12:31:49 GMT

I’ve been slowly working on my own shadcn/ui registry while learning more about the whole component distrubution setup at work. So far I have the following components:

<InfoList />
A list component with support for items, headers, and icons slots.
<InlineText />
An inline text component with an icon slot that wraps perfectly with the text.
<PricingTable />
A pricing table component with support for monthly/yearly pricing.

A Clock That Doesn't Snap

Tue, 26 Aug 2025 15:34:53 GMT

What are OKLCH colors?

Tue, 26 Aug 2025 15:32:27 GMT

Mon, 25 Aug 2025 12:39:17 GMT

Another use case for absolute positioning elements within inline text to support hanging punctuation.

Supports varying sizes of text, without the need for custom negative text indent values.

<p class="relative inline-block">
  <span class="absolute right-full">“</span>Lorem ipsum dolor sit amet
  consectetur adipisicing elit. Iste officia quasi fugiat, dolores ab nam
  repellendus voluptate”
</p>

Silk

Sat, 23 Aug 2025 17:53:44 GMT

Native‑like swipeable sheets on the web

use-stick-to-bottom

Mon, 18 Aug 2025 21:20:03 GMT

A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages.

Mon, 18 Aug 2025 18:56:44 GMT

Ensure the trailing icon never orphans itself on to a new line. Paired with the icon alignment technique I shared last week to vertically center it.

<p class="relative inline-block pr-[1.25em]">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, ducimus
  <span class="absolute ml-[.25em] inline-flex h-[1lh] items-center">
    <Icon name="arrow-up-right" class="size-[1em]" />
  </span>
</p>

Picked this tip of from John Phamous some time ago.

How to properly align icons within list items

Thu, 14 Aug 2025 19:49:05 GMT

My current favorite approach to building bullet proof icon alignment within list items. Ensures icons are always vertically aligned to the first line of text, and ensures the icons do not shrink when text wraps to two lines.

<ul>
  <li class="flex gap-2">
    <span class="flex h-[1lh] items-center">
      <Icon class="size-[1em] flex-none" name="badge-check" />
    </span>
    List item 2 that is longer than the others and wraps to two lines
  </li>
</ul>

With this approach, you can apply a font size to the list item, and the icon will scale accordingly.

We shipped a shadcn/ui registry

Wed, 13 Aug 2025 20:34:12 GMT

npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json

This single command will install:

App layout with ClerkProvider and theme integration
Sign-in and sign-up pages with catch-all routes
Clerk middleware for route protection
Header component with authentication buttons
Theme provider for dark/light mode support

Wed, 13 Aug 2025 12:10:08 GMT

For when <mark /> elements wrap to multiple lines, use box-decoration-break: clone; to render each fragment with their own specified border, padding, and margin.

mark {
  box-decoration-break: clone;
  padding-inline: 0.25rem;
}

Wed, 13 Aug 2025 11:54:31 GMT

Using background-repeat: round; to get that repeated dot background to fit perfectly across differing viewport widths.

div {
  background-image: radial-gradient(red 1px, transparent 1.3px);
  background-size: 24px 24px;
  background-position: 0 0;
  background-repeat: round;
}

Tue, 05 Aug 2025 23:26:48 GMT

Had a quick chat with Hamed about the recent work we have done to improve the customization of Clerk UI components. Watch it on YouTube.

Tue, 29 Jul 2025 12:25:58 GMT

Your component library ships bundled CSS via CSS-in-JS. You want folks to opt in to being able to toggle between light/dark mode but you don’t know how they are handling toggling between light/dark.

Use CSS var toggle hack?

/* Component library styles */
:root {
  --dark-mode: ;
}

button {
  padding: 1rem;
  background-color: var(--dark-mode, white) black;
  color: var(--dark-mode, black) white;
}

/* User styles turn on dark mode */
.dark {
  --dark-mode: initial;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dark-mode: initial;
  }
}

This gives the user the ability to enable dark mode based on how they have their app configured. @⁠media query, class, data-attr, etc.

They can even be very targeted on which components this is enabled for.

shadcn/ui theme compatibility is now available

Wed, 23 Jul 2025 15:44:32 GMT

We shipped a new Clerk theme based on shadcn/ui that styles Clerk’s components according to your shadcn/ui theme.

Write like you talk

Mon, 21 Jul 2025 12:37:45 GMT

Here’s a simple trick for getting more people to read what you write: write in spoken language.

Chase McCoy's personal website

Fri, 18 Jul 2025 12:18:50 GMT

Jonas Brinkhoff's personal website

Fri, 18 Jul 2025 12:16:47 GMT

Building your ideas with Claude Code and Figma MCP with Dan Hollick

Fri, 18 Jul 2025 00:57:35 GMT

Agentic Engineering

Fri, 18 Jul 2025 00:49:48 GMT

Software development is changing and we find ourselves at a convergence. Between the extremes of technological zealotry (“all code will be AI-generated”) and dismissive skepticism (“AI-generated code is garbage”) lies a more practical and nuanced approach—one that is ours to discover together.

Clerk CSS variables are now available!

Tue, 15 Jul 2025 19:21:54 GMT

Theme your Clerk components directly from your CSS files where your design tokens live – no more CSS-in-JS required.

:root {
  --clerk-color-primary: #6d47ff;
}

We learned from our own experience: the variables appearance option had limited adoption because it was hard to integrate with existing design systems. Even we had to use workarounds with elements prop + Tailwind classes in our dashboard.

Now you can theme components where your tokens are already defined. Plus we’ve improved variable naming and added new ones like colorRing, colorMuted, and colorShadow for more flexible theming.

What's the "Geometry" of Colours?

Fri, 11 Jul 2025 14:55:45 GMT

culori

Tue, 08 Jul 2025 12:36:45 GMT

A comprehensive color library for JavaScript.

That boolean should probably be something else

Wed, 02 Jul 2025 12:42:00 GMT

apcach

Tue, 01 Jul 2025 11:23:59 GMT

JS color calculator for composing colors with consistent APCA contrast ratio.

keyux

Fri, 27 Jun 2025 11:36:28 GMT

JS library to improve keyboard UI of web apps

On moving from implicit to explicit coupling

Tue, 24 Jun 2025 12:49:00 GMT

Sat, 21 Jun 2025 11:59:56 GMT

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

Generating a color palette using relative color syntax and color-mix.

:root {
  --brand-color: oklch(49.1% 0.27 292.581);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-color: oklch(54.1% 0.281 293.009);
  }
}

<ClerkProvider
  appearance={{
    variables: {
      colorPrimary: "var(--brand-color)",
    },
  }}
/>

Handle all potential cases in a switch statement

Wed, 18 Jun 2025 12:08:25 GMT

type Cat = { kind: 'cat' }
type Dog = { kind: 'dog' }
type Pet = Cat | Dog

function example(pet: Pet) {
  switch (pet.kind) {
    case: 'cat':
      return ...
    case: 'dog'
      return ...
    default:
      pet satisfies never
  }
}

Tiny polyfill for CSS scroll driven animations

Wed, 18 Jun 2025 12:04:20 GMT

let animationRange = [0, 62];

if (!CSS.supports("(animation-timeline: scroll())")) {
  let [start, end] = animationRange;
  let animations = header.getAnimations();
  let onScroll = () => {
    // Calculate animation time based on percentage of animationRange * duration.
    let time =
      Math.max(0, Math.min(end, window.scrollY - start) / (end - start)) * 1000;
    for (let animation of animations) {
      animation.currentTime = time;
    }
  };

  window.addEventListener("scroll", onScroll, { passive: true });
}

The Prettify Helper

Wed, 18 Jun 2025 11:55:18 GMT

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];
} & {};

Wed, 18 Jun 2025 11:43:51 GMT

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, max(0, 0.18 - y)))
  );

  background-color: var(--background);
  color: var(--foreground);
}

via blog.damato.design

Evil Martions Harmonizer

Mon, 26 May 2025 16:25:57 GMT

Harmonizer is a tool for generating accessible, consistent color palettes for user interfaces. Using the OKLCH color model and APCA contrast formula, Harmonizer helps you create color palettes with consistent chroma and contrast across all levels and hues.

never just

Wed, 14 May 2025 13:10:48 GMT

it’s never just that simple

CSS Spring Easing Generator

Fri, 02 May 2025 11:32:39 GMT

Also the companion tailwindcss-spring plugin.

useMaskedScroll hook

Thu, 01 May 2025 12:19:09 GMT

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

Wed, 30 Apr 2025 12:04:10 GMT

Not uncommon to see folks add form submit handlers on the submit buttons click event vs on the forms submit handler. The problem is this prevents users from being able to fill out the form and submit it solely from the keyboard.

<form>
  <button onClick={handleSubmit} />
</form>

Instead, apply the handleSubmit function to the form onSubmit handler. This ensures the form can be submitted when the user hits the return key.

<form onSubmit={handleSubmit}>
  <button type="submit" />
</form>

If for whatever reason your button needs to live outside of the form element, likely in a dialog situation, you can ensure the same functionality by passing the forms id to the button via the form attribute as shown below.

<form id="contactForm" onSubmit={handleSubmit}>
</form>
<button form="contactForm" type="submit" />

Adaptive dotted pattern

Sat, 19 Apr 2025 11:29:11 GMT

The Wet Codebase

Sat, 19 Apr 2025 11:24:05 GMT

OKLCH in CSS: why we moved from RGB and HSL

Fri, 18 Apr 2025 12:02:53 GMT

Fri, 18 Apr 2025 11:59:33 GMT

Quick little improvement for wrapping highlighted text. Make use of box-decoration-break: clone; to ensure elements fragments break across lines.

mark {
  box-decoration-break: clone;
}

View demo on Twitter.

Thu, 17 Apr 2025 12:18:43 GMT

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.

Wed, 16 Apr 2025 12:45:17 GMT

Stop vertically aligning your checkboxes with center. Instead use baseline to keep it aligned with the first line of the label text.

label {
  display: flex;
  align-items: center; // [!code --]
  align-items: baseline; // [!code ++]
}

Tue, 15 Apr 2025 12:20:41 GMT

This was a fun layout challenge for some dashboard UI we’ve been working on at Clerk. The structure of the layout contains your typical sidebar and content elements that live side by side.

Simplified markup example of what we are working with:

<div class="header"></div>
<div class="nav"></div>

<div class="layout">
  <div class="sidebar"></div>
  <div class="content">
    <div class="data"></div>
  </div>
</div>

The data element is a large table which i’ve hard coded to cause an overflow that needs to be able to scroll vertically and horizontally but we wanted to make sure that its scroll bars were always within the viewport.

To accomplish this we can make use of contain: size; to ensure the content overflows within its container and not cause the page to need to scroll.

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  width: 100%;
  height: 56px;
}

.nav {
  width: 100%;
  height: 56px;
  position: sticky;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
}

.sidebar {...}

.content {
  overflow: auto;
  contain: size;
}

/* This is simply to cause an overflow to demonstrate the table size */
.data {
  width: 200vw;
  height: 200vh;
}

View the demo CodePen here.

Create a list of links from an array using Intl.ListFormat with formatToParts

Tue, 15 Apr 2025 00:50:41 GMT

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 returns the following markup:

<a href="/html">HTML</a>, <a href="/css">CSS</a>, and
<a href="/javascript">JavaScript</a>

Animate height from 0 to auto

Mon, 14 Apr 2025 16:41:36 GMT

.element {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
}

.element.open {
  grid-template-rows: 1fr;
}

References:

Write code that is easy to delete, not easy to extend

Mon, 14 Apr 2025 00:14:22 GMT

Naming things in design systems–and why it’s the worst

Sat, 22 Mar 2025 23:25:15 GMT

Sanding UI

Tue, 25 Feb 2025 23:26:08 GMT

Wed, 19 Feb 2025 21:37:34 GMT

React Aria exposing state through the className is super handy. Here we’re using the placement returned to define a Tailwind CSS variable which we can then use in Motion to define its animation direction. View sandbox example here.

<TooltipTrigger isOpen={open} onOpenChange={setOpen}>
  <Button>Trigger</Button>
  <AnimatePresence>
    {open ? (
      <MotionTooltip
        className={({ placement }) =>
          cx({
            "[--y:4px]": placement === "top",
            "[--y:-4px]": placement === "bottom",
          })
        }
        offset={6}
        initial={{ opacity: 0, y: "var(--y)" }}
        animate={{ opacity: 1, y: 0 }}
      >
        Content
      </MotionTooltip>
    ) : null}
  </AnimatePresence>
</TooltipTrigger>

The "everything bagel" of components

Mon, 17 Feb 2025 23:21:04 GMT

Just use children

Thu, 05 Dec 2024 23:25:15 GMT