A top-down tour of Next.js: start from the mental model of the framework as a whole, then drill into the concepts that actually shape how you build with it.

A field guide to the modern frontend ecosystem — the frameworks, tools, standards, and patterns worth knowing about, so you can tell the durable signal from the passing noise.

I am building a design system, and the part I keep coming back to is not the components. It is the hundred or so named decisions underneath them. Design tokens are the twenty percent of a design system that decides whether the other eighty holds together, and the part of them you actually have to understand fits in one careful read.

Caring isn't just a nicety, it's a productivity multiplier.

This is the first of a series of posts about the most common mistakes in Frontend development. This is the most common mistake I see in React projects.

This post explains what the Single Responsibility Principle (SRP) is and why it's important for React components. It shows how putting too much code and too many tasks in one component can lead to messy, hard-to-maintain apps.

Cookies are tiny key–value blobs with rules. Chrome enforces those rules rigorously: where the cookie applies (domain/path), when it’s sent (request matching + SameSite), how it’s protected (Secure/HttpOnly), and how long it survives (expiry/eviction). This post walks through the full lifecycle, browser behavior, sharp edges, and production patterns—with TypeScript examples.

• Use server-set, Secure; HttpOnly; SameSite=Lax cookies for auth.
• Scope deliberately with domain and path; avoid accidental overlaps.
• Understand SameSite (and partitioning) for cross-site flows.
• Keep cookies small, few, and purposeful.

The Compound Component Pattern has become a popular approach in React for building flexible, reusable components. You'll often see it in two flavors: separate exports (<SelectTrigger />) or dot notation (<Select.Trigger />). But like any pattern, it comes with significant trade-offs. Let's explore both sides.

When you need to inspect, modify, or replay HTTP(S) traffic, few tools are as powerful and flexible as mitmproxy.
It's open-source, scriptable in Python, and works seamlessly as a man-in-the-middle proxy.

A guide for macOS developers who want to use Claude CLI without installing Node.js globally. The post demonstrates how to set up a local Claude CLI installation using mise for Node version management, configure a shell function in .zshrc for easy access, and solve the common issue where Claude CLI loses the current working directory context. This approach keeps your global system clean while making Claude CLI available from any project directory.

Astro is a web framework that sends plain HTML to the browser and adds JavaScript only to the few parts of a page that need it. This post explains how its engine works, the ideas behind it, and how it compares to Next.js, Gatsby, Eleventy, Hugo and the others.