Frontend Patterns You'll Build Everywhere

A virtualised list keeps thousands of items scrollable while only the 10 to 20 rows you can see exist in the page: it works out the visible slice from the scroll position, positions those rows inside a full-height spacer, and measures rows whose height it can't know in advance.

40 min 6 code practice

Long collections arrive in pages: numbered pagination, a Load more button, or infinite scroll that fetches the next page when an invisible sentinel element comes into view; doing it right means cursors instead of offsets, one request at a time, de-duplication, an end state, retry on errors and bringing users back to the same place.

32 min 5 code practice

Scrolling is part of the UX you build: new pages start at the top, Back returns to where the user was, links and buttons scroll smoothly to the right place below sticky headers, a table of contents highlights the section in view, chats stay pinned to the newest message only when the reader is there, and modals stop the page behind them from scrolling.

32 min 4 code practice

A fast-feeling page loads what the user sees first and delays everything else: images below the fold load when they come near, placeholders and reserved space stop the page from jumping, skeletons show the shape of what's coming, rarely used components load on demand, likely next steps are prefetched, and non-critical work waits until the browser is idle.

29 min 4 code practice

A search box that suggests as you type waits for a pause before asking the server (debounce), cancels or ignores answers to old queries, caches results it has seen, highlights the matching text, and follows the ARIA combobox pattern so arrow keys, Enter, Escape and screen readers all work, with clear loading, empty and error states.

28 min 3 code practice

Live data reaches a React app in four ways: polling (ask on a timer), long polling (the server holds the request until something changes), Server-Sent Events (a one-way stream from the server) and WebSockets (a two-way connection); whichever you pick, the client must reconnect with backoff, merge updates into state without duplicates, and show presence and typing indicators that expire.

28 min 5 code practice

File uploads need a file input and a drop zone that validate type and size, instant previews through object URLs that are freed afterwards, a progress bar, cancel and retry; reorderable lists need pointer events for mouse, pen and touch plus a keyboard way to move items with spoken announcements.

33 min 4 code practice

Overlays float above the page, so they must escape clipping and stacking (portals or the browser's top layer), manage focus (trap it in modals, return it on close), dismiss predictably (Escape, outside click), position themselves next to their trigger without leaving the screen, and, for toasts, queue up, time out and pause while the user reads.

30 min 4 code practice

A resilient app keeps copies of data in layers (memory, localStorage, IndexedDB, the HTTP cache and a service worker), shows cached data at once and refreshes it in the background (stale-while-revalidate), updates the screen optimistically and rolls back on failure, notices when the network goes away, and saves drafts and queued actions so nothing the user typed is lost.

30 min 5 code practice

Themes are sets of CSS variables switched by one attribute on <html>; the app follows the system setting (prefers-color-scheme) unless the user picks light or dark, remembers that choice, applies it before the first paint so the page never flashes the wrong colours, respects reduced motion, and offers keyboard shortcuts and a command palette for power users.

28 min 4 code practice