Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Type-Safe DOM Selection in TypeScript
TypeScript knows DOM types but can't guarantee an element exists. Selecting an element returns `Type | null`, forcing you to handle the `null` case. This prevents runtime errors when your script runs before the DOM element loads.
TypeScript Utility Types: Don't Reinvent the Type
Utility types are pre-built functions for your types, transforming them without manual effort. Use `Partial<T>` for update functions or `Readonly<T>` for immutable objects.
History API: Change URLs Without Page Reloads
The History API lets you manipulate browser session history, enabling single-page app (SPA) routing without full page reloads. It's used to create "virtual" pages by changing the URL and state.
DOM Traversal: Navigating the HTML Tree
DOM traversal is navigating a family tree of HTML nodes. You move between elements using properties like `parentNode` and `nextSibling`. This is key for finding elements relative to a known start point.
DOM Manipulation: Treating Your Webpage Like a Live Object
The DOM is a live tree of your webpage's HTML. DOM manipulation is how JavaScript changes that tree—adding, removing, or updating elements. This is key for all interactive web development. The footgun: direct, frequent manipulation is slow.
The `document` Object: Your Page's API
The `document` object is the root of the DOM tree, representing the entire webpage in your script. Use it to find elements (`getElementById`), create new ones (`createElement`), or read page info. The main footgun: accessing an element before it's been parsed.
Zustand's `create`: A Factory for Global State Hooks
Zustand's `create` function is a factory for your global state. You define your state and actions, and it returns a custom hook to access them anywhere in your app, avoiding prop drilling. The footgun: `set` shallow-merges state by default.
React Fiber: Making UI Rendering Interruptible
React Fiber treats rendering like a cooperative scheduler. It breaks UI updates into small, pausable chunks, preventing long, blocking tasks. This lets high-priority work like user input interrupt heavy rendering, keeping animations and gestures smooth.
React's Concurrent Rendering: Interruptible UI Updates
Concurrent Rendering lets React pause and resume rendering, so a large update won't freeze the UI. It's like a chef pausing a big task to handle a quick order, ensuring the app stays responsive. This is key for features like Suspense.
React Error Boundaries: Containing UI Crashes
An Error Boundary is like a try...catch block for React components, preventing a single UI crash from breaking your whole app. Use it to wrap components that might fail, showing a fallback UI instead of a white screen.
Vercel: The Frontend Cloud Platform
Vercel turns your Git repo into a live, globally-scaled app. It's a CI/CD pipeline, server, and CDN in one, ideal for deploying Next.js apps with automatic previews for every PR.
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.
Next.js Loading UI: Instant Shells, Streamed Content
Next.js's `loading.js` shows an instant UI shell while streaming in server-rendered content. Use it for data-heavy pages to improve perceived performance. The footgun: a loading UI only wraps its own route segment and children, not parent layouts.
next/link: Fast, Client-Side Navigation
next/link is an enhanced `<a>` tag for fast, client-side page transitions, preserving the SPA feel. It automatically prefetches linked pages for instant loading.
Next.js: Pages Router vs. App Router
The App Router treats UI as a tree of components, while the older Pages Router treats it as a collection of separate pages. Use App Router for new projects to leverage layouts and Server Components.
cy.intercept: Control Network Traffic in Cypress Tests
cy.intercept acts like a programmable proxy in your Cypress tests, letting you watch, modify, or fake network requests. Use it to test loading states or error handling without a live backend. Footgun: intercepts are cleared before each test, not just once.
MSW: Mock APIs at the Network Layer
Mock Service Worker intercepts API calls at the network level using a Service Worker, so your app makes real requests. Use it for consistent mocking in development, testing, and Storybook.
Snapshot Testing: Lock In Your UI's Rendered Output
Snapshot testing catches unintended UI changes by comparing a component's rendered output to a saved 'golden' version. Use it to ensure UIs don't break during refactors. The biggest footgun is blindly updating snapshots, which can approve bugs as correct.
React Testing Library Queries: Find Elements Like a User
React Testing Library queries find elements by simulating how users see your UI, not by implementation details. Prioritize user-facing attributes like `getByRole` or `getByLabelText`.
Jest: The 'Batteries-Included' JavaScript Test Runner
Jest is a "batteries-included" JavaScript testing framework, bundling a runner, assertions, and mocking tools. It's a default for React apps but works for any JS project. The footgun is thinking it's only for React; it's a general-purpose tool.
Test Like a User: The React Testing Library Philosophy
React Testing Library's philosophy is to test components the way a user interacts with them, not by their internal implementation. This ensures refactors don't break tests. The footgun is querying by implementation details instead of what a user actually sees.
Jotai Derived Atoms: Computed State from Other Atoms
Think of a derived atom like a spreadsheet formula: its value is computed from other atoms. Use it for reactive values like a cart total from item prices. The footgun: the `get` in your read function is reactive, but the `get` in your write function.
Measure Component Render Costs with <Profiler>
React's `<Profiler>` is a stopwatch for your components, measuring render times programmatically. Wrap any UI tree to log detailed performance metrics on every update, helping you pinpoint slow renders. The footgun: It's disabled in production by default.
List Virtualization: Render the Window, Not the World
Virtualization renders only the visible "window" of a long list, not the entire dataset. It's essential for performance in feeds or tables with thousands of rows.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.