Data System Papers — Distilled

Distilled study guides for 33 foundational data-systems papers referenced by the Data Systems Development Timeline, from Codd 1970 through Flink 2.0 in 2025. Every page was written after reading the paper's source PDF end to end — the mechanism sections, the evaluation, the limitations — not from an abstract or a second-hand summary.

66 paper pages (33 × two languages) plus two catalogues.

View

• English — https://datasystem.school/data-system-papers-distilled/
• 繁體中文 — https://datasystem.school/data-system-papers-distilled/zh/index.html

What's here

Path	Purpose
index.html	English catalogue — search, era filter, category filter
zh/index.html	Traditional Chinese catalogue (same behaviour)
papers/<slug>.html	One distilled paper, English
zh/papers/<slug>.html	The same paper, Traditional Chinese
styles.css	Shared stylesheet — Neo-Brutalist Blueprint, low-contrast variant
favicon.svg	Site icon, shared with the timeline and landing page

No build step, no dependencies, no JavaScript framework. Each page is plain HTML against one stylesheet; the only script is the filter/search on the index, the language selector, the sidebar scrollspy, and the two collapse toggles below.

Narrow screens

Both of the site's persistent chrome bars fold away on small screens, on the same mechanism the timeline uses — a grid whose single row animates between 0fr and 1fr, so the height transitions without a hard-coded max-height.

• Index, ≤980px. The sticky filter bar would otherwise stack search, two selects, a Reset button and the chips row into four full-width lines and eat most of a phone screen. They collapse behind a Filters toggle, leaving the sticky bar one line tall, and the language switch moves up beside the toggle so it stays reachable while the filters are shut. Above 980px the toggle is hidden, the rows are always open, and the switch moves back onto the chips row. A deep link (?q=…&era=…&cat=…) opens the panel on load, so a filtered list never looks unexplained — instantly, not animated, so the sticky bar is at its real height before the browser works out where an #era-N anchor lands.

• Paper pages, ≤1080px. The sidebar is lifted above the prose with order: -1 — the TOC is what you want at the top of a long paper, and it trails the body in source order only so the desktop grid can put it in the right-hand column. It collapses behind an On this page / 本頁目錄 toggle, which is pinned to the top of the screen so it stays in reach at any scroll depth; the panel hangs off it absolutely and floats over the prose rather than displacing it. Tapping a link, tapping outside, or pressing Escape closes it.

  The single column is flex rather than a one-column grid, because a grid item's sticky travel is capped at its own grid area — a row exactly as tall as the item, so it would never move — and align-self goes back to stretch, since the desktop rule pins it to start to let the sticky column hug its content. Keeping the panel out of flow is also what makes the links land: while it sat in flow, closing it on tap pulled ~480px out from above the target mid-scroll, and every jump overshot by about a screen and a half.

Getting back to the catalogue

A paper's breadcrumb reads Papers Distilled / 2000s / <title>, and the era in the middle is a real parent: it links to ?era=2000s#era-2, which lands on the index with the era filter already applied and scrolled to that band, so you get the era's papers and nothing else. The index reserves the sticky bar's height as scroll-padding-top — measured from the bar, not assumed — so the band clears it instead of tucking in underneath.

The filter's history.replaceState has to carry location.hash through. It runs on load, so writing a bare ?… there stripped the fragment before the browser ever scrolled to it, and every era crumb quietly landed at the top of the index.

Page anatomy

Each distilled paper follows the same eleven sections, so papers are comparable side by side:

1. In one breath — the whole paper compressed to a paragraph
2. Before this paper — the world it landed in
3. The problem — what was actually breaking
4. Core ideas — the contributions, and why they work
5. How it works — the mechanism, concretely enough to implement from
6. What the paper showed — measured numbers and proved properties
7. Limits and trade-offs — conceded by the authors, and found later
8. What it became — the descendant systems
9. In the paper's words — verbatim quotes with section citations
10. Vocabulary — terms as this paper uses them
11. On the timeline — the matching milestone, and its DDIA chapters

Language

The URL decides the language and nothing redirects on load, so a shared link always opens in the language it points at — same rule as the timeline. Switching languages also writes the dss_lang localStorage key that the landing page reads, so a choice made here carries across the site.

The Chinese pages are a parallel version, not a literal translation: same facts, same structure, same section ordering, written idiomatically in Traditional Chinese with Taiwan technical vocabulary. Proper nouns and settled technical terms (B-tree, LSM-tree, Paxos, MapReduce, MVCC, WAL…) stay in English, as they do in practice.

Design

Same visual vocabulary as the landing page and the timeline — cream paper, hard 2px borders, offset shadows, Space Grotesk + JetBrains Mono — but deliberately lower contrast, because these pages are read for twenty minutes rather than scanned for twenty seconds:

• ink is warm charcoal #3a362e, never pure black — 11.7:1 on the cream, against 12.6:1 on the timeline and 16.4:1 on the landing page
• borders are muted stone #8e887a, never ink-coloured
• offset shadows sit at 14% opacity, so they read as depth rather than glare
• the accent blue and red are desaturated so they don't vibrate against the cream, and the four tint fills stay inside a narrow luminance band (10.7–11.0:1 with ink on top, so no section reads as louder than its neighbours)

Contrast is lowered within the WCAG AA budget, not below it. Body text (11.7:1), secondary text (6.4:1), the small mono micro-labels (5.0:1) and links (5.6:1) all clear AA for normal-size text; borders clear the 3:1 non-text minimum. The one place this site is darker than the timeline is --muted2: the timeline's #8a8578 reaches only 3.4:1, which is short of AA at the 11px sizes those labels use, so it was taken one notch down to #726d5f.

Source PDFs

Each page links the exact PDF it was distilled from, and that PDF is always the authority. Paper text and figures remain the copyright of their original authors and publishers; nothing from the papers is reproduced here beyond short quoted lines under fair use.

Local preview

python3 -m http.server 9999

Then open http://localhost:9999/.

License

MIT for the distilled text and the site itself.