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
Development
Development is the broadest category in my writing, so it works as the main archive rather than a narrow subject label. It brings together implementation notes and technical decisions, with delivery lessons from across the rest of the site.
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.
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.
Retention Theatre: Why Companies Lose Good Engineers Whilst Pretending to Listen. Retention Theatre: Why Companies Lose Good Engineers Whilst Pretending to Listen
Retention theatre explained through surveys, recognition schemes, pay, autonomy, trust, workload, management quality, and why strong engineers still leave.
Why Transformation Programmes Fail After the Slide Deck. Why Transformation Programmes Fail After the Slide Deck
Why transformation programmes fail after the slide deck, covering ownership, governance, operating‑model change, vendor fragmentation, and delivery reality.
Building an LRU Cache in TypeScript: Hash Map and Doubly Linked List in Practice. Building an LRU Cache in TypeScript: Hash Map and Doubly Linked List in Practice
Build an LRU cache in TypeScript with a hash map and doubly linked list, then compare it with a simpler JavaScript Map implementation and O(1) operations.
Product Engineers and Software Engineers: What's the Difference? Product Engineers and Software Engineers: What's the Difference?
My view on product engineers and software engineers: how the remit differs, why organisational support matters, and what we need to learn after release.
The Consultancy Rescue Loop. The Consultancy Rescue Loop
Consultancies can unblock stalled programmes, but without ownership transfer and internal capability growth, rescue work becomes recurring dependency.
The Deadline Debt Nobody Tracks. The Deadline Debt Nobody Tracks
Deadline debt explained as hidden rework, incidents, technical debt, quality loss, and recovery cost when teams compress quality without recording trade‑offs.
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.
The Engineering Capability Trap. The Engineering Capability Trap
Outsourcing can accelerate delivery, but if it replaces internal ownership, companies lose platform knowledge, leverage, and the ability to change safely.