A hands-on series about building a web application from absolute zero. Starting with a blank HTML file, each issue adds one deliberate layer—semantic structure, typography, accessibility, offline capability—until a fully functional Progressive Web App emerges. Not to replace modern frameworks, but to understand them from the inside out.
In an age of AI-generated scaffolding and “vibe coding,” we’ve stopped understanding how our tools work. This hands-on series builds a web application from absolute zero—starting with a blank HTML file and crafting custom solutions for state management, a virtual DOM, and server-side rendering—not to replace modern frameworks, but to replace blind reliance on them with the durable, unshakable intuition that comes from knowing what’s inside.
This post establishes the five “Principles of The Void”—a manifesto for intentional creation where every file, line, and dependency must justify its existence. It documents the first concrete step of the series: creating the project’s stark foundation with a single directory, a raw HTML file embedding the first zine, and a surgical CSS reset that touches only the five elements actually used, silencing the browser’s defaults to achieve a predictable, minimalist baseline.
The OS wants to negotiate our fonts through layers of smoothing until every letter looks like a compromise. This post rejects that negotiation entirely, establishing an intentional typographic identity for the Void Reader by sourcing a bitmap font and configuring it for pixel-perfect rendering—the first act of deliberate aesthetic control in the project.
A div is a lie of omission—it holds content but conveys nothing about it. This post makes the case that semantic HTML is not extra work but a different kind of work, encoding meaning directly into the document structure so that the page is navigable by landmark, legible to assistive technology, and coherent to anything beyond a human eye scanning a screen.
We are guests in the user’s browser—we don’t repaint their walls without asking. This post gives the reader direct control over their experience, building a CSS-only settings system: a sliding drawer, a theme toggle, adjustable text size and line height, with no JavaScript and no runtime cost. The Siren’s Call whispers to reach for an event listener; instead, we learn the grammar of the platform.
If you can’t read it offline, you don’t truly possess it. This post crosses the first real threshold of the series—introducing JavaScript not as interface logic but as infrastructure—by implementing a Service Worker that intercepts network requests and serves the entire reader from a local cache, making the application functional with no connection at all.
Before sailing further, we stop and take stock. This post is a honest reckoning with what Part 1 built—a semantic, accessible, typographically intentional, offline-capable reader—and what it still can’t do: persist settings across reloads, manage more than one zine, link between issues, or scale its markup without growing unwieldy. The checkmarks are real, but so are the failures, and the failures are the fuel for Part 2.