Frontend engineering
Solve React and Next.js problems, design accessible interfaces, and choose useful server and client boundaries.
Showing 13–20 of 20 articles
Diagnose mobile horizontal scrolling without hiding the overflow
Find the element causing mobile horizontal scrolling by measuring bounds and intrinsic sizing, then fix width, wrapping, or containment at the responsible layout boundary.
Keep a modal accessible when content loads asynchronously
Keep async modals usable by preserving focus, dialog naming, keyboard access, and meaningful announcements as loading content becomes success or failure.
Design loading and error states for a page with several API calls
Design multi-request pages around independent resource states and explicit dependencies so partial failures, empty data, retries, and stale responses remain understandable.
Fix a form that submits when a toolbar button is clicked
Fix accidental form submissions by inspecting native button types, form ownership, and keyboard behavior before rewriting React handlers or validation state.
Diagnose an effect that loops only after a seemingly harmless edit
Diagnose React effect loops by tracing state writes and dependency identities, then separate event work, derived values, and external synchronization.
Prevent an older API response from overwriting a newer search result
Prevent stale search results by making only the current request eligible to update data, errors, and loading state, while cancelling obsolete work where supported.
Fix stale state in asynchronous React handlers
Fix stale React state in delayed handlers by distinguishing captured snapshots, queued updates, request inputs, and the latest values needed for asynchronous completion.
Find the reason a React component keeps rerendering
Trace React renders to state, props, context, and parent updates, then profile their actual cost before choosing state placement or memoization as a fix.
Explore topics
Subscribe to Newsletter
Get the latest articles and updates delivered to your inbox.