Alex Carpenter

User Interface Engineer at Clerk

Bookmarks ¬

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