Personal site article research, September 2026
Scope
This note records the source-backed editorial decisions used to rebuild the personal site's technical essays. The public articles remain the primary artifacts. This page preserves the research boundary and the shared implementation rules.
Editorial contract
- Start with a concrete artifact, failure, observation, or implementation result.
- Explain the mechanism before extracting a general principle.
- Use headings that state what the section explains.
- Put a working component beside the claim when interaction or geometry is central.
- Show repository-local source beside the rendered component.
- State the conditions, failure modes, and verification method for technical guidance.
- Keep playful language attached to an already legible artifact.
Source-specific decisions
UX laws
The supplied screenshot contains twenty numbered rows and nineteen unique entries because Postel's law appears twice. "Minimize target distance" is derived guidance related to movement models such as Fitts's law rather than an independent named law. The article classifies the list as empirical models, perceptual principles, memory findings, and system aphorisms. Each entry is presented as a bounded hypothesis with a falsification condition.
Local process cleanup
Vite can move to the next open port unless strictPort is enabled. This convenience can hide multiple surviving servers. Node documents that sending a signal and setting subprocess.killed does not prove termination, that shell parents may leave child processes alive on Linux, and that PID reuse makes stale targeting unsafe. The article therefore uses inspect, signal, and verify as the cleanup contract.
Alternate visual readings
The Startup School photograph supports a literal record and an animate alternate reading. Research on pareidolia and animate-form perception supports the narrower claim that ambiguous structure can receive an animate interpretation quickly. The product method keeps the observation, interpretation, and interaction mechanics separate.
Visible construction
CSS Grid defines gutters as spacing between tracks, and CSS Backgrounds and Borders defines painting areas for each box. The design system uses those primitives to assign one owner to each shared edge and to create seams and corner notches from one ground layer. Rendered-output audits check doubled strokes, self-stacks, missing seams, and insufficiently visible seams.
Ordered dithering
The dither article treats a Bayer matrix as a deterministic threshold order. It separates ordered dithering from error diffusion and noise thresholding, defines the color-space choice, and keeps semantic text outside destructive raster effects. The live specimen uses a repository-local 4 by 4 matrix and exposes resolution, bias, and polarity.
Verification contract
- Every article route remains within a 390-pixel viewport.
- Interactive specimens hydrate before controls become active.
- Source panes contain the implementation mechanism being explained.
- Reduced-motion states preserve complete information.
- Light-mode article specimens use paper and ink tokens rather than full-section black backgrounds.
- Axe WCAG A and AA checks have no reported violations on the UX-law and visible-construction routes.