lainlog

A blog of long-form engineering essays on software and AI, each paired with interactive widgets embedded in the post.

Live at lainlog.com.

Posts

• The function that remembered — how a function outlives the scope it was born in.
• The browser stopped asking — real-time apps didn't teach the server to speak first; they taught the browser to stop hanging up.
• Why fetch works in curl but the browser blocks it — the server answered; your browser is holding the response back from your JavaScript.
• How Gmail knows your email is taken, instantly — the pipeline behind "already taken" before your finger lifts.

Features

• Bespoke interactive widgets in every post — run, step, adjust.
• Dark and light themes (auto-follows OS; togglable).
• Mobile-first layout with fluid type and responsive widgets.
• Server-rendered Open Graph covers per post.
• Unique-reader counter on the homepage, rendered as a dot-matrix glyph.
• RSS feed at /rss.xml, sitemap at /sitemap.xml.

Stack

• Next.js 16 (App Router) · React 19 · TypeScript strict
• Tailwind CSS v4 (CSS-first @theme)
• motion
• Shiki + shiki-magic-move for syntax-highlighted code
• IBM Plex Serif + Sans + Mono, via next/font
• GoatCounter for privacy-respecting analytics
• Deployed on Vercel

Running locally

pnpm install
pnpm dev

Optional env vars (.env.local)

• GOATCOUNTER_API_TOKEN — when set, the homepage fetches the live reader count.
• READER_COUNT_MOCK — override the reader count in dev (e.g. READER_COUNT_MOCK=12483) without hitting the API.

Project layout

app/          Next.js App Router routes (home, posts, RSS, sitemap, OG images)
components/   Reusable UI — nav, prose, motion, widget shells, code blocks
content/      Post manifest (titles, slugs, dates, hooks)
lib/          Hooks, utilities, site config, analytics

Design

See DESIGN.md — the single source of truth for tokens, palette, typography, and motion.

Author

Built by An Anonymous Engineer.