Concepts in Frontend Dev, page 21
Playwright: E2E Tests That Aren't Flaky
Playwright makes E2E tests reliable by automatically waiting for UI elements to be ready. Use it to test critical user journeys across Chrome, Firefox, and WebKit. The footgun is using brittle CSS selectors instead of user-facing locators like getByRole.
CSS :focus-visible: Smart Focus for Accessibility
:focus-visible is a smart focus ring that only appears when needed, like during keyboard navigation. This lets you style accessible focus indicators for keyboard users without showing an outline on every mouse click.
Shared Workers: One Background Script for Multiple Tabs
A SharedWorker is a single background script shared across multiple tabs or windows from the same origin. Use it to manage a single WebSocket connection or sync state between pages. The footgun: each tab must call port.start() on its own message port.
WAI-ARIA Authoring Practices: The Cookbook for Accessible Components
Think of WAI-ARIA Authoring Practices as the official cookbook for accessible web components. It provides patterns for widgets like tabs or accordions, ensuring they work with assistive tech.
Vue's Virtual DOM: Efficient UI Updates
Vue keeps a JavaScript copy of the UI (the Virtual DOM) in memory. When data changes, it compares a new virtual tree to the old one and efficiently updates only the changed parts of the real DOM, avoiding costly full re-renders.
Transferable Objects: Zero-Copy Data for Web Workers
Transferable Objects move resource ownership between contexts, like threads, instead of copying data. This enables fast, 'zero-copy' transfers for large memory blocks. Use it with postMessage() to send an ArrayBuffer to a Web Worker.
ARIA Live Regions: Announcing Dynamic Content
ARIA live regions tell screen readers about content that changes without a page reload, like a notification banner. Use aria-live="polite" for most updates and assertive only for critical alerts.
Vue Single-File Components (SFCs)
Vue's Single-File Components (SFCs) bundle a component's template, logic, and styles into one .vue file. A build tool compiles this into browser-readable JS and CSS, turning your template into optimized render functions.
Background Sync API: Send Data When the Network Returns
The Background Sync API lets your app defer work until the network is back. You register a task, and the browser wakes your service worker to run it when connectivity returns. Use it to reliably send data submitted while offline, like form posts or chat.
Next.js Runtimes: Edge vs. Node.js
Choose your server environment in Next.js: a fast, limited Edge function or a powerful Node.js backend. Use the Edge for low-latency tasks like auth checks; stick with Node.js for its full API set and heavier computation.
Focus Trapping: Guiding Keyboard Users, Not Caging Them
Focus trapping intentionally confines keyboard navigation to a component, like a modal. It's a feature, not a bug, when used to prevent users from interacting with the page behind an overlay.
Web Push API: Engage Users When Your App is Closed
The Web Push API lets servers send messages to users even when your site is closed. A service worker receives these pushes, making it ideal for notifications. The main footgun: the subscription endpoint is a secret key that must be protected.
Handling CORS in Next.js API Routes
CORS isn't a global config; it's a per-route response header. To allow cross-origin requests to your API, you must manually set headers like Access-Control-Allow-Origin in your Route Handlers, including handling preflight OPTIONS requests.
The Accessibility Tree: The DOM for Assistive Tech
The accessibility tree is the DOM's sibling, built for assistive tech. Browsers derive it from your HTML, exposing each element's name, role (e.g., 'button'), and state (e.g., 'checked') to screen readers.
HTMLMediaElement: The Remote Control for Browser Media
HTMLMediaElement is the shared "remote control" API for <audio> and <video> tags, letting you programmatically play, pause, and seek. Use it for custom players or syncing animations. Footgun: Browsers often block autoplay, so never assume it will work.
Next.js Draft Mode: Previewing Static Content
Next.js Draft Mode bypasses static pages to preview unpublished content from a headless CMS. It's for content editors who need to see changes live before publishing. The footgun is security: a leaked secret token exposes all draft content.
Component Scaffolding: Automate Boilerplate, Enforce Consistency
Component scaffolding automates creating files from templates, ensuring new components start with the correct structure. Instead of copy-pasting, run a command to generate the component, its styles, and tests.
Angular Ivy: The Tree-Shakable Compiler
Angular's Ivy engine compiles components like separate puzzle pieces, making apps smaller and faster. This enables effective tree-shaking for smaller bundles and faster rebuilds.
Canvas 2D Context: The API for Drawing on the Web
The Canvas 2D Context is your digital paintbrush and ruler for drawing on a web page. You get this object from a <canvas> element to draw shapes, text, and images for data visualizations or simple games. The key footgun: it's a state machine.
Next.js `next/image`: Stop Shipping Giant Images
The next/image component is an automated image pipeline, not just an <img> tag. It resizes, optimizes, and serves modern formats like WebP, improving load times. The footgun is forgetting to provide width and height, causing layout shifts.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles