Skip to content
Journal

Architecture

15 posts
  1. The Senior Frontend Engineer's Field Guide: Building an Enterprise Next.js 16 and React 19 Application From ScratchA hands-on, command-by-command build of an enterprise Next.js 16 and React 19 application, with every config flag, cache directive, security boundary and TypeScript pattern explained and empirically verified against the real 16.3.6 build — for a senior frontend interview with a week to prepare.ArchitectureReact94 min
  2. The Senior Frontend Engineer's Field Guide to Advanced CSS and Tailwind v4A verified, hands-on tour of CSS for senior engineers: the rendering pipeline, cascade layers and the counterintuitive !important inversion, subgrid, container queries, :has() as a state machine, the Popover API, scroll-driven animations, and Tailwind v4's Rust engine — with a real capstone app built, tested, and debugged in a live browser.CSSArchitecture42 min
  3. The Senior Frontend Engineer's Field Guide to the DOM and JavaScript Engine InternalsA hands-on, verified tour of what actually happens between your JavaScript and the pixels on screen: the rendering pipeline, live vs static collections, the event loop's real ordering guarantees, layout thrashing, Web Components, and a working virtualized 100,000-row data grid — built and checked in a real browser.JavaScriptDOM41 min
  4. The Senior Frontend Engineering Blueprint, Part 7: Building a Linear-Time Query Language ParserEvery product with a power-user search box eventually needs a real query language, and reaching for new RegExp(userInput) is how you end up hand-rolling a vulnerability. Here is a filter-query DSL built from a sticky-regex tokenizer, a recursive-descent parser, and a recursive Zod schema — with a ReDoS stress test to prove the O(N) claim.JavaScriptArchitecture11 min
  5. The Senior Frontend Engineering Blueprint, Part 5: Edge Proxies, Auth.js Credentials and a Server-Side Data Access LayerA redirect from the edge feels like security, but an attacker can skip it entirely by calling your Server Action directly. Here is the request pipeline Next.js 16 actually runs, a Credentials-based Auth.js v5 setup with Prisma and RBAC, and the data access layer that is the only boundary that actually holds.ArchitectureEngineering13 min
  6. The Senior Frontend Engineering Blueprint, Part 4: Virtualising 50,000 Rows Without Losing AccessibilityRendering 50,000 DOM rows is a real performance problem, and virtualising them away is a real accessibility problem if you stop at the transform. Here is a generic VirtualList built from scratch, with the ARIA contract most implementations skip.ArchitectureReact10 min
  7. The Senior Frontend Engineering Blueprint, Part 2: Server Components, Server Actions and Optimistic UIPart 2 of an eight-part build: where the Server/Client boundary actually goes, static pages that still regenerate themselves, the static-shell-plus-streaming-hole trade-off, and a webhook handler that verifies its own signature correctly.ArchitectureReact12 min
  8. The Senior Frontend Engineering Blueprint, Part 1: Docker, Strict TypeScript, and a Real Prisma Data LayerMost 'add a database' tutorials stop at new PrismaClient() and quietly ship a connection-pool leak the first time someone edits a file in dev. Part 1 of an eight-part series builds the foundation properly: Docker Postgres, a genuinely strict tsconfig, branded types, and a Prisma layer with cursor pagination and real transactions.ArchitectureTypeScript8 min
  9. Context Window Engineering: Compaction, Retrieval and Why Long Sessions DegradeA million-token window did not solve the problem, it moved it. Attention is not uniform, irrelevant context actively costs accuracy, and the skill that matters now is deciding what an agent is allowed to see.ArchitectureAI8 min
  10. Swift 6 Strict Concurrency and Kotlin Multiplatform: Two Ways to Not Have a Data RaceSwift 6.2 inverted its concurrency defaults — main actor by default, escape on purpose — and it changed migration from a slog into something tractable. Meanwhile KMP shares the logic that would otherwise be written twice. Here is how the two fit together.SwiftConcurrency6 min
  11. Local-First Sync Engines: CRDTs, SQLite and Where the Write Boundary GoesOffline-first is not a caching problem, it is a distributed systems problem you moved onto a phone. The real decision is not which CRDT library — it is where writes become authoritative, and every sync engine answers that differently.ArchitectureEngineering8 min
  12. Next.js in 2026: The Flight Wire Format, Cache Components and Tag InvalidationReact Server Components do not send HTML and they do not send JSON. Here is what actually goes over the wire, how Cache Components replaced three separate flags, and the invalidation race that a single-argument `revalidateTag` used to hide.ArchitectureReact8 min
  13. React Native's New Architecture: JSI, Fabric and the Bridgeless TurboModuleThe bridge is gone — removed outright, not deprecated. What replaced it is a set of C++ abstractions with real performance characteristics, and a new generation of native modules that compile straight to JSI bindings.ArchitecturePerformance7 min
  14. Deterministic Multi-Agent Orchestration: Escaping the Infinite ReAct LoopAutonomous coding agents fail in a predictable way: context poisoning inside a freeform reason-act loop. The fix is not a better prompt — it is a finite state machine with programmatic gates, scoped tool access per phase, and automatic rollback.AutomationArchitecture9 min
  15. Cracking the Staff & Architect Frontend Interview: The Battle-Tested PlaybookStaff and architect interviews are not coding tests — they are risk-assessment conversations. Here are the seven technical pillars that decide the outcome, with the mechanics underneath each one.JavaScriptArchitecture19 min