Building Accessible Modals, Drawers, and Popovers in React
How to build accessible modals, drawers, and popovers in React, with focus management, portals, dismissal rules, and the semantics each pattern needs.
Articles
Front‑End Development
Front‑end development is where product intent becomes the interface people actually use. My writing approaches it as engineering rather than surface decoration, with attention to browser behaviour and code that remains accessible, fast, and safe for a team to change.
Building Accessible Modals, Drawers, and Popovers in React. 
Choosing Where State Lives in React: Local State, Context, URL, Cache, or Server. Choosing Where State Lives in React: Local State, Context, URL, Cache, or Server
Choose where React state should live, comparing local state, context, URL state, server data, cache state, mirrored values, and ownership questions.
Turning Lighthouse Findings into a Credible Engineering Roadmap. Turning Lighthouse Findings into a Credible Engineering Roadmap
How to turn Lighthouse findings into a credible engineering roadmap, separating signal from noise and scores from real user impact teams can act on.
Using useTransition and useDeferredValue to Keep React Interfaces Responsive. Using
useTransitionanduseDeferredValueto Keep React Interfaces ResponsiveuseTransitionanduseDeferredValueexplained with search, filtering, pending states, and how to keep React interfaces responsive under heavy work.
Profiling React Re‑Renders Before Reaching for useMemo. Profiling React Re‑Renders Before Reaching for
useMemoProfile React re‑renders before adding useMemo, using DevTools, render reasons, prop identity, state placement, context updates, and list strategies.
Stale Closures in React: Why Handlers, Effects, and Timers Read Old State. Stale Closures in React: Why Handlers, Effects, and Timers Read Old State
Stale closures in React explained through renders, handlers, effects, timers, refs, dependency arrays, why callbacks read old state, and how to fix them.
Debugging Hydration Mismatches in React and Next.js. Debugging Hydration Mismatches in React and Next.js
Debugging hydration mismatches in React and Next.js, including common causes, repeatable fixes, and how to stop server and client renders drifting apart.
AI Search Readiness is Not Protocol‑First. AI Search Readiness is Not Protocol‑First
AI search readiness starts with crawlable pages, rendered HTML, semantic structure, content quality, and safe action boundaries, not protocol‑first thinking.
Lessons from Running Next.js Pages Router at Scale in 2026. Lessons from Running Next.js Pages Router at Scale in 2026
Lessons from running Next.js Pages Router at scale in 2026, including governance, performance discipline, and why older patterns sometimes still make sense.
How to De‑Risk a CMS Migration Before the Real Migration Starts. How to De‑Risk a CMS Migration Before the Real Migration Starts
How to de‑risk a CMS migration before the real move starts, by testing workflows, content assumptions, integrations, ownership, and technical contracts early.
When Sass Colours Break After a Next.js Production Build. When Sass Colours Break After a Next.js Production Build
Diagnose Sass colours that survive compilation but break in Next.js production CSS when minification creates invalid mixed‑unit legacy rgb() values.
Mastering Server Components in Next.js. Mastering Server Components in Next.js
Mastering Server Components in Next.js, including client boundaries, data fetching, caching, streaming, and the mistakes that make App Router code messy.
Converting Objects to Query Strings and Vice Versa. Converting Objects to Query Strings and Vice Versa
Converting objects to query strings is essential for handling URLs in JavaScript. Here, I explore encoding, parsing, and managing query parameters in Next.js.
HTTP Cache Validation with ETag and Last-Modified. HTTP Cache Validation with
ETagandLast-ModifiedETagandLast-Modifieddrive conditional HTTP requests and 304 responses. See how precedence, weak validators, CDNs, and cache policy affect revalidation.
Best Practices for Managing Environment Variables in Next.js. Best Practices for Managing Environment Variables in Next.js
Best practices for managing environment variables in Next.js, so secrets stay server‑side and deployments do not freeze the wrong values at build time.
Production Observability for Next.js: Instrumentation, Logs, and Release Debugging. Production Observability for Next.js: Instrumentation, Logs, and Release Debugging
Approach production observability in Next.js with contextual logs, traces, release markers, client errors, cache signals, build visibility, and business data.
Faceted Navigation SEO in Headless Commerce: Filters, Canonicals, and Crawl Control. Faceted Navigation SEO in Headless Commerce: Filters, Canonicals, and Crawl Control
Error Handling in JavaScript with try, catch, and finally. Error Handling in JavaScript with
try,catch, andfinallyGo beyond basic try/catch in JavaScript with finally, custom errors, async error handling, testing, user‑facing failures, and defensive‑code traps.