Alex Carpenter

Latest

• 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

• Sun, Jun 14, 2026

  How's Linear so fast? A technical breakdown

  performance.dev

• Tue, May 26, 2026

  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
• Sun, May 24, 2026

  Better fluid sizing with round()

  ishadeed.com

• Sun, Apr 26, 2026

  Open demo in a new tab

  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% 0.033 256.848);
  }

• Sat, Apr 04, 2026

  Tree structure using CSS anchor positioning

  lab.chsmc.org

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