Alex Carpenter

Page 3

• Sat, Jan 17, 2026

  21 Lessons From 14 Years at Google

  addyosmani.com

• Tue, Jan 06, 2026

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

• Mon, Dec 15, 2025

  How to target Safari with a CSS @supports media query

  wojtek.im

• Wed, Dec 03, 2025

  2025 Holiday Coffee Gift Guide

  ibrewmyown.coffee

• Tue, Nov 18, 2025

  RESILIENT—UI interview #002 with Hayden Bleasel

  www.resilient-ui.com

• Wed, Nov 05, 2025

  The Web Animation Performance Tier List

  motion.dev

• Wed, Nov 05, 2025

  RESILIENT—UI interview #001 with Dima Belyaev

  www.resilient-ui.com

• Thu, Oct 23, 2025

  Open demo in a new tab

  Preserve modal aspect ratio across viewport sizes

  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, Sep 28, 2025

  Open demo in a new tab

  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>

• Sat, Sep 20, 2025

  Dither plugin for TailwindCSS

  dither.floriankiem.com

• Fri, Sep 19, 2025

  ▲ Vercel Web Interface Guidelines

  vercel.com

  See also Rauno’s Web Interface Guidelines.

• Fri, Sep 12, 2025

  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, Sep 06, 2025

  Fixing folks list alignment one PR at a time.

  • midday/pull/606
  • billingsdk/pull/144
• Fri, Sep 05, 2025

  Two fantastic pieces of web inspiration:

  • operate.so
  • tempo.xyz
• Fri, Sep 05, 2025

  My shadcn/ui registry

  ui.alexcarpenter.me

  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.
• Tue, Aug 26, 2025

  A Clock That Doesn't Snap

  ethanniser.dev

• Tue, Aug 26, 2025

  What are OKLCH colors?

  jakub.kr

• Mon, Aug 25, 2025

  Open demo in a new tab

  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>

• Sat, Aug 23, 2025

  Silk

  silkhq.com

• Mon, Aug 18, 2025

  use-stick-to-bottom

  github.com