Alex Carpenter

Latest

• Wed, Aug 12, 2026

  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

• Wed, Aug 12, 2026

  favorite resources on composition:

  • Composition Is All You Need
  • React Composition Patterns
  • Just use children
  • The “everything bagel” of components
  • Quit Your YAP-ing
• Wed, Aug 12, 2026

  Agentic tool stack recently:

  • herdr
  • worktrunk
  • plannotator.ai

  /plannotator-review has been such a big improvement to reviewing lots of agent written code recently.

• Tue, Aug 11, 2026

  Open demo in a new tab

  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));
  }

• Mon, Aug 10, 2026

  colordx

  colordx.dev

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

• Mon, Aug 03, 2026

  You Don't Have a Design System

  mattrothenberg.com

• Sat, Aug 01, 2026

  Open demo in a new tab

  <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".

• Sat, Aug 01, 2026

  Open demo in a new tab

  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;
  }
  
  .btn:is([data-shape="square"], [data-shape="circle"]) {
    padding-inline: 0;
    aspect-ratio: 1 / 1;
  }

• Wed, Jul 29, 2026

  Clever property usage to create a light-dark probe

  x.com/thomas_sweet

  @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 */
    }
  }

• Wed, Jul 29, 2026

  How to choose a UI font

  yeptype.com

• Tue, Jul 28, 2026

  CSS anchor positioning for sidenotes

  • kizu.dev/anchor-positioning-experiments
  • x.com/s3ththompson
• Tue, Jul 28, 2026

  OKHST: predictable color generation for user interfaces

  tenphi.me

• Sun, Jul 26, 2026

  Tom Sachs X Culture Slop interview

  thecultureslop.com

• Tue, Jul 21, 2026

  @klinking/squircle

  github.com

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

• Tue, Jul 21, 2026

  datavolve

  datavolve.psdcoder.dev

  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.

• Mon, Jul 20, 2026

  A collection of Tailwind CSS utilities for fading edges of scroll containers based on scroll position.

  twilson.net

• Sun, Jul 19, 2026

  Clerk components RTL support

  github.com

  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,
      marginInlineEnd: t.space.$1,
    })}
  />

  ESLint rule prevents physical left/right CSS from creeping back in.

• Wed, Jul 15, 2026

  APCA color contrast guidelines promoted to stable

  developer.chrome.com

  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.

• Tue, Jul 07, 2026

  Where to Find the Colors Your Screen Can’t Show You

  moultano.wordpress.com

• Wed, Jun 24, 2026

  Animating The Dialog Element Using View Transitions

  pqina.nl