Bookmarks ¬

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

A system to organise your life

Good code is easy to delete.

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

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

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

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

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

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

See also Raycast Easings extension.

#TIL about contain: size; CSS