Writing

Notes, played

Pieces on how interfaces are made, each one something to play with, not just read: every idea shown with a demo.

  1. CSS

    Every way to make a layout responsive

    Media queries, container queries, fluid type, flexbox, grid and the units under them: each one played across a width you drag, and when to reach for which.

    1. 01Media queries
    2. 02Container queries
    3. 03Fluid type
    4. 04Flexbox
    5. 05Grid
    6. 06The units

    Read it →

    01 · 9 min

  2. AI

    The Markdown files of the AI era

    CLAUDE.md, AGENTS.md, DESIGN.md, skills and memory: the files a project now keeps for its AI tools, who reads each one, and how to write a good one.

    1. 01Who reads what
    2. 02CLAUDE.md and AGENTS.md
    3. 03DESIGN.md
    4. 04Skills
    5. 05Rules and memory

    Read it →

    02 · 12 min

  3. Motion

    A guide to easing and springs

    How a timing curve turns time into progress: the named curves, cubic-bezier() you can drag, springs and their physics, what happens when a move is interrupted, and which one to reach for.

    1. 01The named curves
    2. 02cubic-bezier()
    3. 03Springs
    4. 04Interrupted
    5. 05Springs in CSS
    6. 06Which one, when

    Read it →

    03 · 11 min

  4. UI

    The interface guidelines, played

    Rauno Freiberg's Web Interface Guidelines, every rule built twice: once without it and once with it, side by side, so you feel the difference instead of reading about it.

    1. 01Interactivity
    2. 02Typography
    3. 03Motion
    4. 04Touch
    5. 05Performance
    6. 06Accessibility
    7. 07Design

    Read it →

    04 · 14 min