few experiments

Built to work through a problem end to end: colour science, CSS specificity, typography, reaction-diffusion, and more.

kern

The shared component and token layer every experiment here is built on.

  • React
  • TypeScript
  • Storybook
  • Design Tokens

specifi

Paste a CSS selector and see its (a, b, c) specificity, parsed by a from-scratch Selectors Level 4 engine.

  • CSS
  • TypeScript
  • Tokeniser
  • Recursive Descent
  • AST

hexicon

Paste a hex and get its perceptual name, nearest matches, and WCAG contrast. CIEDE2000 all the way down.

  • Colour
  • TypeScript
  • CIEDE2000
  • OKLCH
  • WCAG

gray-scott

A real-time Gray-Scott reaction-diffusion simulation, run off the main thread in a Web Worker.

  • Simulation
  • TypeScript
  • Web Workers
  • Canvas
  • Float32Array
coming soon

epsilon

Type a regex and watch it compile to an NFA by Thompson’s construction, state by state.

  • Regex
  • NFA
  • TypeScript
  • Thompson Construction
  • Automata
coming soon

loop

Paste JS and watch the event loop run it: tasks, microtasks and render steps, in order.

  • JavaScript
  • Event Loop
  • Simulation
  • Microtasks
  • Scheduling
coming soon

rivers

Greedy versus Knuth–Plass line breaking, side by side.

  • Typography
  • Algorithms
  • DP
  • Knuth–Plass
  • Line Breaking