Skip to content

Alex Carpenter

User Interface Engineer at Clerk

Links ¬

Archive of interesting links.

The Founder of The James Brand Everyday Carry Essentials

youtube.com

Been such a big fan of Ryan and what he has done with The James Brand over the years. Very cool to see what he carries and his philosophy.

Building a Multi Brand Design System with Tailwind: Tips, Tricks and Tradeoffs

thinkmill.com.au

Magic UI

magicui.design

UI library for Design Engineers built with React, Typescript, Tailwind CSS, and Framer Motion.

Promises From The Ground Up

joshwcomeau.com

Migrating from Radix to React Aria: Improving Accessibility and UX

argos-ci.com

Concise explanations accelerate progress

stephango.com

If you want to progress faster, write concise explanations. Explain ideas in simple terms, strongly and clearly, so that they can be rebutted, remixed, reworked — or built upon.

CSS Triggers

lab.skk.moe

Push and Pull

kellanem.com

Emotionally durable design

appropedia.org

The Basics

registerspill.thorstenball.com

The Cascade

csscade.com

A blog about the past, present, and future of CSS by Robin Rendle.

Johannes Llingebiel's personal website

johannesklingebiel.de

The Ejection Site

ejectionsite.com

I love highly specific nerdy sites like this. Discovered via Best Made Co. newsletter.

RKRN Bookcase

rkrn.kr

Nicolas Solerieu's personal website

slrncl.com

Alexander Sandberg's personal website

alexandersandberg.com

Simone Silvestroni's personal website

minutestomidnight.co.uk

Johnny.Decimal

johnnydecimal.com

A system to organise your life

Kieran Parker's personal website

kprkr.co

Write code that is easy to delete, not easy to extend.

programmingisterrible.com

Good code is easy to delete.

auto-grid utility

9elements.com

.auto-grid {
  --max-column-width: 100% / var(--auto-grid-max-columns, infinity) - var(--auto-grid-gap);
  --column-width: max(
    var(--max-column-width),
    min(var(--auto-grid-min-size, 10rem), 100%)
  );
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
  gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, 1rem)) var(
      --auto-grid-gap,
      1rem
    );
}

Animate element's height with grid-template-rows

stefanjudis.com

#TIL you can animate an element’s height with CSS grid.

.disclosure {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
}

.disclosure.open {
  grid-template-rows: 1fr;
}

Katherine Yang's personal website

kayserifserif.place

spin-delay

github.com

Smart spinner helper for React, to manage the duration of loading states.

The open/closed React component

twitter.com

A component that is based on the open/closed principle, which states that “software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification”.

JollyUI

jollyui.dev

shadcn/ui compatible react aria components that you can copy and paste into your apps.

react-accessible-treeview

github.com

A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.

Use Zod to parse env variables

twitter.com

Easing Functions Cheat Sheet

easings.net

See also Raycast Easings extension.

The Fifty-Fifty Split and Overflow

ryanmulligan.dev

#TIL about contain: size; CSS

CSS :has() Interactive Guide

ishadeed.com

Chase McCoy's personal website

chasem.co

Shadow Stack

twitter.com

Linus Rogge's personal website

linusrogge.com