Alex Carpenter

Latest

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

• Fri, Mar 27, 2026

  Nikhil Anand's personal website

  nikhil.io

• Sat, Mar 21, 2026

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

  anh.ng

• Sat, Mar 21, 2026

  William Jansson's personal website

  williamjansson.com

• Fri, Mar 20, 2026

  Using Container Queries in a CSS Grid to Detect Truncation

  v0-css-container-query-test.vercel.app

• Tue, Mar 17, 2026

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

  stacktoheap.com

• Sun, Mar 15, 2026

  Daniel Griesser's PI Config

  github.com

• Wed, Mar 11, 2026

  The Anatomy of an Agent Harness

  x.com/Vtrivedy10

• Sun, Mar 08, 2026

  Agentic Engineering Patterns

  simonwillison.net

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

• Sat, Mar 07, 2026

  React Grab

  www.react-grab.com

• Fri, Mar 06, 2026

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

  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?”

• Thu, Mar 05, 2026

  History of Software Design

  historyofsoftware.org

• Wed, Mar 04, 2026

  How to implement beautiful shadow borders

  x.com/PixelJanitor

• Sun, Mar 01, 2026

  Naz Hamid's personal website

  nazhamid.com

• Sun, Mar 01, 2026

  Anton Repponen's personal website

  repponen.com

• Tue, Feb 24, 2026

  ESLint complexity rule

  eslint.org

• Mon, Feb 16, 2026

  <TextMorph />

  torph.lochie.me

  Dependency-free animated text component.