Whimsical Particles
Field manuals.
Long-form, bilingual, diagram-first guides to how software actually works — one subject at a time.
First editionEN / 中Rendered at the edge
The manuals.
- 01Whimsical Animations奇趣動畫實戰手冊Lush web animation from first principles — easing, polar motion, and dispersion, then the magic of SVG: shapes, paths, the viewBox, masks, and self-drawing lines.
- 02Domain-Driven Design領域驅動設計・模型驅動設計的構成要素・實戰手冊Work through the building blocks of a model-driven design — layered architecture, associations, entities, value objects, services, modules, aggregates, factories and repositories — then watch them meet in one cargo-shipping system, all in PHP you can run in the page.
- 03CRDTs from Scratch從零打造 CRDT 同步引擎・實戰手冊Build a local-first sync engine the way Mini-Instant does — hybrid logical clocks, op-logs, and convergence, byte by byte.
- 04OXC from Scratch解剖 OXC・用 Rust 從零打造 JavaScript 工具鏈・實戰手冊Rebuild the Oxidation Compiler one pass at a time — arena, hand-written lexer and Pratt parser, linter, transformer, codegen — and read the real OXC alongside.
- 05Mini Base UI迷你 Base UI・從零打造無頭元件庫的內部機制・實戰手冊Rebuild a headless component library from scratch — the store, render delegation, portals, Floating UI positioning, hover intent, focus trapping, and the full component set — reading the real Base UI and Floating UI alongside.
- 06Floating UIFloating UI・讓浮動元素永遠落在對的位置・實戰手冊Master the anchoring engine behind every tooltip, popover and dropdown — computePosition and the twelve placements, offset, flip, shift, size, arrow, hide, autoUpdate, virtual elements, and the React hooks layer — one live playground at a time.
- 07Mini Floating UI迷你 Floating UI・從零打造浮動定位引擎・實戰手冊Build the floating-element positioning engine by hand — rects and coordinate spaces, placement algebra, the middleware loop, collision handling and autoUpdate, then the advanced machinery: the platform seam, clipping, arrow & size, virtual references, and a mini React layer.
- 08LLM SystemsLLM 系統・實戰手冊Rebuild the language-model stack from tokenization and transformers through parallelism, scaling, inference, evaluation, data, and alignment—with interactive instruments throughout.
- 09A Coding Agent from Scratch解剖 Pi・用 TypeScript 從零打造 Coding Agent・實戰手冊Rebuild the Pi agent harness one subsystem at a time — the streaming LLM protocol, the agent loop, coding tools, JSONL tree sessions, compaction, a differential-rendering TUI, and extensions — and read the real Pi alongside.
- 10Data Structures Before the Database打造資料庫之前・Rust 資料結構暖身手冊A beginner bridge into the database manual — values, vectors, search cost, recursion, graphs, trees, invariants, B+ trees, bytes, and pages, with a live Rust lab in every chapter.
- 11A Database from Scratch用 Rust 從零打造資料庫・實戰手冊Rewrite the classic db_tutorial in safe Rust — from a tiny REPL and statement compiler to durable 4 KiB pages, linked leaves, recursive search, and multi-level B+ tree splits.
- 12SQL from Scratch用 Rust 從零打造 SQL 引擎Continue the mini database above the B+ tree — tokenize SQL, build an AST, resolve a schema, choose scan or lookup plans, execute typed rows, explain errors, and persist the result.
- 13Browser Engineering in Rust用 Rust 從零打造瀏覽器・實戰手冊Build one browser from response bytes to DOM and style trees, layout boxes, raster pixels, navigation, forms, security, tasks, compositing, accessibility, embeds, and dependency-correct incremental rendering.
- 14Advanced Browser Engineering in Rust進階瀏覽器工程・以 Rust 實作Continue the same browser through caching, complex selectors, text runs, flex and grid, decoded pixels, DOM dispatch, a typed VM, microtasks, authority-checked IPC, tiled compositing, DevTools, and independent conformance oracles.
- 15Browser Runtime Engineering in RustEnglish-first draft · 繁中翻譯將於英文定稿後進行Surround the completed renderer with deterministic scheduling, bounded protocols, streaming services, transactional navigation, frame groups, brokered authority, crash recovery, scene replay, BFCache, and causal traces—then render the recovered page.
- 16Reading the Real Browser讀懂真正的瀏覽器・實戰手冊The companion to the three Rust series above — no crate, just the real source. Ten chapters reading Chromium/Blink, cc, V8, and Servo/Stylo alongside the honest crate-scale boundary each one replaces: process isolation, RenderingNG, the cascade at scale, text shaping, full Flexbox/Grid, GPU tiling, V8/SpiderMonkey, the network stack, DevTools, and how a real engine proves itself correct.