Notes // Alex Carpenter

Notes on engineering, developer experience, design systems, and agentic engineering.

Page 2

Fri, Feb 13, 2026
How I Use Claude Code

boristane.com
Thu, Feb 12, 2026
Digital hygiene

karpathy.bearblog.dev
Wed, Feb 11, 2026
eslint-plugin-react-render-types

github.com

ESLint plugin that brings Flow’s Render Types to TypeScript via JSDoc. Enforce component composition constraints like @renders {MenuItem} at lint time.
Wed, Feb 11, 2026
Matt Rothenberg's personal website

mattrothenberg.com
Mon, Feb 09, 2026
RESILIENT-UI SKILLS

www.resilient-ui.com
```
npx skills add alexcarpenter/resilient-ui
```
Fri, Feb 06, 2026
Building Bulletproof React Components

shud.in
Fri, Feb 06, 2026
A React trick to improve exit animations

barvian.me
Tue, Feb 03, 2026
Alexander Vilinskyy's personal website

www.vilinskyy.com
Tue, Feb 03, 2026
before-and-after

www.jm.sv
Thu, Jan 29, 2026
Composition is all you need.

www.youtube.com
See also vercel-composition-patterns
```
npx skills add vercel-labs/agent-skills
```
Wed, Jan 28, 2026
When life gives you lemons, write better error messages

wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f
1. Say what happened
2. Say why it’s a problem
3. Point out how to solve the problem
Mon, Jan 26, 2026

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.
Thu, Jan 22, 2026
Greppability is an underrated code metric

morizbuesing.com
Mon, Jan 19, 2026
Annotating for agents

benji.org
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