Design system principles

Consistency over creativity. Every decision should reduce cognitive load, not add to it. When in doubt, ship and iterate. We use an 8pt gri…

useDebounce hook

function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {
    const t = setTimeout(() => setDebounced(value…

Radix UI Primitives

Unstyled, accessible components for building high-quality design systems and web apps in React.

www.radix-ui.com/primitives

AI auto-categorisation on paste

When you paste content into Dump, use a small local model to auto-detect the dump type — note, code, or link — and suggest tags automaticall…

Drizzle + Postgres setup

import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';
import * as schema from './schema';

const queryClient = postgres(process.env.DATABASE_URL!, { m…

Product roadmap — Q3 decisions

Key outcomes from the roadmap session: • Mobile app deferred to Q4 — not enough bandwidth • Focus this quarter: core UX polish and performan…

CSS Grid — complete visual guide

The definitive visual reference for CSS Grid layout. Covers all properties with interactive examples.

css-tricks.com/snippets/css/complete-guide-grid/

Keyboard-first navigation

Every action should be reachable without a mouse: • Cmd+K → command palette • J / K → navigate between dumps • E → edit focused dump • D → d…

Optimistic UI with useTransition

'use client';

function DeleteButton({ id }: { id: string }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onCl…

Things to review before shipping

1. Accessibility audit — check tab order, ARIA labels, focus rings 2. Performance: LCP under 2.5s on 3G throttle 3. Empty states — every lis…