Frontend

Server Components vs Client Components: When Each Wins

Server Components are the new default; Client Components are for interactivity and state. The boundary between them is where most beginner Next.js bugs live.

State Management: Zustand, Redux, and Context Compared

Three options, three sweet spots. Zustand is my default for client state, Context for low-frequency tree-wide values, Redux only for the cases that earn it.

IntersectionObserver Batched With rootMargin

On a feed with 200 cards, creating one IntersectionObserver per card pushed our scroll frame to 14ms. This is the single shared observer with `rootMargin` prefetch and a batched callback that brought it back to 4ms.

The Accessibility Checklist I Actually Use on Every PR

Accessibility is not a separate phase. It is a short list of checks you run on every PR. Skip them and you ship broken code; run them and you do not.

Image Optimization on the Modern Web

Pick the right format, ship the right size, reserve the right space, and lazy-load below the fold. Most image perf wins live in the basics, not in fancy libraries.

Core Web Vitals Without the Buzzwords

LCP, CLS, INP measure three real user-felt experiences: load, stability, responsiveness. Treat them as field truth, not Lighthouse scores to game.

React useEffect: The Five Mistakes I Stopped Making

useEffect is for synchronizing with external systems, not for sequencing state. Five concrete mistakes I keep finding in PRs, with the fixes that replaced them.

The Frontend-Only Loop I Coach People Through

Five rounds I rehearse with frontend candidates: a DOM puzzle, a CSS layout, a state management drill, an accessibility audit, and a rendering performance question. JavaScript throughout, framework-agnostic where possible.

SSR, CSR, SSG, ISR: Pick the Right One

Four rendering strategies, four cost profiles. Pick by data freshness and personalization needs, not by which acronym sounds most modern.

Frontend Engineer Loop at a Design-Centric Company

A 5 round frontend loop at a design-centric Series C SaaS. The CSS round, the rendering round, the design-system round, and what each one was actually grading.

The Airbnb System-Fit Questions I Prepped

Free set: four coding questions I rehearsed for a marketplace company's frontend loop. Every prompt is grounded in a real booking-domain object, because the interviewers grade modeling choices as much as code.

JS Questions I Ask Senior Frontend Candidates

A 5-question screen I run on every senior frontend candidate. Each one has a junior answer that passes, a mid-level answer that almost passes, and a senior answer I am actually looking for.

Paste-Image-From-Clipboard Handler

When a user hits Cmd-V with a screenshot in their clipboard, we want to upload it as if they had drag-dropped. This is the 30-line paste handler I keep, including the Safari-only `clipboardData.items` traversal and a graceful HEIC fallback.

The 12-Column Grid I Keep, With Named Areas and Container Queries

I rewrote our marketing site grid three times before settling on this: a 12-column CSS Grid with named areas for the hero shape, container queries for the breakpoints, and custom properties for the gutter so designers can change one value.

useState Batching and the Stale Closure Trap

React batches state updates, and that interacts badly with closures over old state. The functional updater form fixes most cases, but knowing why is what saves the rest.

The Meta Frontend Loop Questions (2024)

Four utility-belt questions from a frontend loop at a large social platform in early 2024. They look like trivia but each one is graded on a specific edge case. Mine got me to round three.

A File Drop Zone Without a Library

The drop zone I keep instead of pulling in react-dropzone (60+kB minified): drag-over visuals, multi-file drops, folder uploads via DataTransferItem, and the Safari quirk where dragleave fires on every child enter.

The Browser Rendering Pipeline in Five Stages

Parse, style, layout, paint, composite. Knowing which stage your code blocks is what turns DevTools performance traces from noise into action.

Debounce, Throttle, and the Difference People Miss

Debounce settles, throttle paces. The visual difference, the canonical implementations of both (with leading-edge and trailing-call variants), and the three edge cases that bite hand-rolled wrappers.

Flexbox vs Grid: Pick the Right Tool

Flexbox is one-dimensional layout, Grid is two-dimensional. Most layout battles end faster when you pick the right one before you start writing CSS.