The Secret Library

A personal library of the tools, snippets, and notes I use as a web designer. It grows; it is never done.

Browse the shelf Explore the brain Explore the tree
Read the book See the index

Who keeps it

I'm Mathias Sætersdal, a web designer in Bergen. I have a bachelor's degree in digital culture from the University of Bergen and a master's in interaction design from NTNU.

Say hi: mathias@saetersdal.no

Why it exists

This is a personal library of design references: tools, articles, snippets, and notes I use when building interfaces.

It holds two kinds of entry: things I wrote myself, and links out to other people's work with my own notes attached. Every entry has a category, a type, and optionally tags and links to related entries.

It is built for me first. I kept losing the same references between projects and got tired of re-finding them. It is public because a public list is easier to keep honest than a private one, and because the accessibility patterns documented here are the same ones this site is built with.

It is never finished. Entries get revised in place, not replaced, and each one carries a growth status: seedling means rough, a first pass I haven't checked yet. Growing means usable — I rely on it, but it hasn't been fully verified. Evergreen means settled — I stand behind it and only touch it again if something changes. The seedling/growing/evergreen terms come from Maggie Appleton's digital gardens.

How to read it

One JSON file, five views of the same data. Pick a view based on what you're trying to do, not the other way around.

The views

The five views Five labelled panels in a row — shelf, index, brain, tree, and book — each with a one-line note on when to use it. Shelf Browsing by category Index A sortable table of all Brain Seeing what connects to what Tree Seeing the subjects as a whole Book Reading straight through
Shelf
Browsing by category.
Index
Scanning everything as a table, sortable.
Brain
Seeing what connects to what.
Tree
Seeing the subject areas as a whole.
Book
Reading straight through.

Anatomy of an entry

Every card, row, node, and page is the same underlying entry, just rendered differently. Here's what one is made of:

Anatomy of an entry An enlarged entry card with lines calling out its eight parts: title, category, filter or type, status shown as a three-step scale, summary, tags, related entries, and backlinks. → ← Title Category Filter / type Status seedling → growing → evergreen Summary Tags Related entries Backlinks

How to find something

How to find something A branching diagram: knowing exactly what you want leads to search or the index; knowing roughly the area leads to the shelf or the tree; wanting to explore leads to the brain; wanting to read leads to the book. What are you looking for? Know exactly what you want Know roughly the area Want to explore Want to read Search Index Shelf Tree Brain Book

Every entry has a status: seedling means rough, growing means usable, evergreen means I stand by it.

Borrowed from

  1. Andy Matuschak's working notes — stacked note panels; publishing rough notes publicly.
  2. Quartz — the connected-node graph view on the web.
  3. Forked My Brain (Nicole van der Hoeven) — a live garden organized for an outside reader.
  4. bookmarks.design — the categorized grid behind the shelf view.
  5. Tom Critchlow's wiki — the sidebar structure and the /canon idea of a short list you return to.
  6. frontend-dev-bookmarks (dypsilon) — the reference taxonomy, flattened to one level plus tags.
  7. Maggie Appleton's garden — the seedling/growing/evergreen stages and the garden idea itself.