Frontend interview bank

Choose article when the content is complete enough to stand alone or be reused in a feed, search result, or another page. Choose section for a thematic part of the current document, normally with a heading that names that theme. Keep div when the wrapper exists only for layout, styling, measurement, or a script hook. The test is ownership, not appearance: a card shape does not automatically mean article, and a bordered block does not mean section. After composition, inspect headings and landmarks because an individually reasonable component can still create noisy page structure.

Choose a transition when another state mechanism already changes a property, such as a class, attribute, hover, or focus state, and you only need interpolation from the current value to the target. Choose keyframes when the effect owns an explicit timeline with intermediate stages, repetitions, alternation, or automatic start. A transition reacts to before-and-after computed values; an animation applies named keyframes through animation properties. In either case, keep business and accessibility state outside the animation so the interface remains correct when motion is disabled or canceled.

Start with the values the component must express. Finite states such as size, tone, and disabled usually fit extracted classes or data-attribute selectors. High-cardinality values can often use CSS custom properties without runtime rule generation. Choose a runtime engine only when live JavaScript evaluation provides a concrete benefit, then include its cache, client cost, server collector, CSP support, and upgrade path in the decision. Compare production assets and browser traces from the actual route rather than quoting another project’s bundle or timing numbers.

Client-side validation gives early, contextual feedback and prevents obviously invalid submissions, but it runs in an environment the user controls. Express basic rules with native HTML constraints, add only necessary cross-field or asynchronous checks, and connect errors to controls. The server treats every request as untrusted, parses the expected shape, validates the complete business contract, checks authorization and current state, and enforces concurrent invariants near the write. Shared schemas can reduce duplication, but the server never trusts a client flag claiming that validation passed. Validation also does not replace output encoding, parameterized queries, CSRF protection, or rate limiting.

A Sass variable is evaluated during compilation and disappears into the generated CSS. It can hold Sass maps, lists, colors, and unit-bearing numbers, and it can drive loops or functions. A CSS custom property remains in the stylesheet, participates in the cascade and inheritance, and can change with DOM state, media conditions, or JavaScript. Use Sass variables for build-time structure and finite generation. Keep theme values or component values that must vary after loading as custom properties, then inspect the output to confirm that var() survived compilation.

In CSS Animations Level 1, animation-fill-mode: forwards keeps the finished animation effect in the cascade; it does not write the final value into the element’s ordinary rules. Removing the animation name, changing cascade priority, or starting another animation can reveal the underlying value. Put durable open, closed, or completed state in a class or attribute rule, and use animation only for the transition between states. The trade-off is duplicated endpoint declarations, but JavaScript that waits for animationend to commit business state can stall when animation is cancelled or never generated.

In the Node 24 browser baseline, setCustomValidity(nonEmptyMessage) keeps a control invalid until code explicitly calls setCustomValidity(''). Clear or recompute the message whenever relevant fields change. For remote checks, debounce appropriately, associate each result with the submitted value or sequence number, and ignore or abort older responses so a slow rejection cannot overwrite a newer valid state. Server validation remains authoritative. The trade-off is extra state management; validating on every keystroke without ordering produces flicker, excess requests, and errors that describe a value the user no longer sees.

In the Node 24 frontend baseline, HTML owns content structure, native controls, links, and form semantics; CSS owns presentation and resilient layout; JavaScript owns state transitions and interaction the platform cannot express alone. Start with a usable document, then enhance it layer by layer and inspect the parsed DOM rather than template indentation. The trade-off is resisting framework shortcuts. A clickable div styled as a button still lacks keyboard and disabled behavior, while absolute positioning that matches one screenshot fails under zoom, long text, or narrow containers.

With the Node 24 browser tooling baseline, inspect the parsed DOM first because the HTML parser can repair invalid nesting. Then check matched and computed CSS, box layout, paint and compositing information, and finally the accessibility tree for exposed names, roles, and order. Network and console panels reveal failed resources or script exceptions. Each view answers a different question; a screenshot alone hides the mechanism. The trade-off is a layered diagnosis, while editing source blindly can fight parser repair, inheritance, or a missing resource instead of the actual failure.

In Tailwind CSS 4.3.3, shared design values belong in @theme, which creates a vocabulary utilities and variants can reuse. Arbitrary values are appropriate for genuine one-off constraints, but repeated near-duplicates such as mt-[13px] and custom hex colors hide whether differences are intentional. Promote repeated values into named tokens or components and review the emitted cascade. The order of class text in HTML does not by itself decide which conflicting utility wins. The trade-off is governance overhead; forcing every experimental value into the theme can pollute it just as quickly as unrestricted arbitrary values.

The main axis comes from flex-direction, not from a fixed idea of horizontal layout. Row follows the writing mode’s inline axis, while column follows its block axis; reverse values swap the axis endpoints. justify-content distributes remaining space on that main axis. align-items and align-self position items on the perpendicular cross axis, while align-content distributes multiple flex lines there. First identify flex-direction, writing mode, and direction, then choose an alignment property. That avoids the common mistake of memorizing justify-content as horizontal and align-items as vertical.

flex-shrink distributes negative free space, but it does not override the item’s minimum size. The default main-axis minimum is auto and can resolve to a content-based floor, especially with a long unbreakable string or an intrinsically sized element. When the target reaches that floor, the item freezes and remaining reduction moves elsewhere; if every item is constrained, the line overflows. Inspect the item that owns the content, then set min-inline-size: 0 only when shrinking is intended and add an explicit wrapping, clipping, or scrolling policy.

An fr is a share of the grid container’s flexible leftover space, not a percentage of its full width. Fixed tracks and gaps consume space first, and flexible tracks divide what remains. A plain 1fr track also has an automatic minimum, which may use the min-content contribution of a long string or intrinsically sized child. When shrinking is genuinely allowed, use minmax(0, 1fr) for the track or min-inline-size: 0 on the item, then specify whether content wraps, clips, or scrolls instead of hiding overflow blindly.

Use a media query when the condition belongs to the browsing environment: viewport-level page structure, printing, color scheme, motion preference, or input capability. Use a container query when a reusable component changes because of the space its parent allocated. Before choosing either, check whether intrinsic Grid or Flexbox sizing can express the constraint without a discrete switch. The query coordinate system should match the thing that owns the decision. A card in a narrow sidebar on a wide viewport is the standard case where a viewport query gives the wrong answer.

Translate each prefix into the CSS condition it generates. An unprefixed utility is the mobile-first baseline, while md and xl apply from their minimum widths upward rather than naming device categories. Hover, focus-visible, disabled, dark, and motion-reduce add independent state or media conditions, and stacked variants require all named conditions. Test one CSS pixel on each side of every breakpoint, then test keyboard focus, touch input, reduced motion, and color mode separately. Also compare DOM, visual, and focus order whenever utilities reorder or hide content.

In CSS Grid Layout Level 2, grid-template-columns and rows define the explicit grid, while auto-placement or an item positioned beyond those lines creates implicit tracks sized by grid-auto-columns or grid-auto-rows. A leftover grid-column: 2 after the container collapses to one column can therefore create an unexpected second column and overflow. Inspect the grid overlay and item placement at every layout mode. The trade-off is convenient automatic placement; explicit child coordinates become brittle when templates change unless reset with the responsive rule.

In CSS Grid Layout Level 2, subgrid lets a child grid use the parent grid’s track sizing and line positions on the chosen axis. It is useful when repeated cards must align headings, content, and actions across rows even though each card has different content. The child still has its own grid items and can define the other axis. The trade-off is tighter layout coupling to the parent; use an independent nested grid when the component should size itself. A copied repeat() only looks aligned until parent gaps, track sizes, or content constraints change.

With Media Queries Level 5, start from a layout that wraps and shrinks, then resize with representative long content and zoom until a concrete constraint fails. Place the breakpoint around that failure, expressed in a suitable relative unit, rather than naming a device such as “tablet.” Test just below and above it, plus narrow split windows, text expansion, and non-mouse input. The trade-off is breakpoints tied to content rather than design mockups. Width cannot reliably infer touch capability, and a future device catalog will not repair a brittle fixed layout.

A state value is a snapshot for the render that created the handler; calling its setter does not rewrite that running snapshot. Three calls such as setCount(count + 1) therefore enqueue the same replacement value. Passing c => c + 1 instead enqueues a pure updater, and React applies queued updaters in order to the pending state, so three calls add three. Use the updater form whenever the next value depends on the previous one. It does not make unrelated state updates atomic, so combine tightly coupled fields in one state object or reducer when consistency requires it.

useEffect should synchronize a committed component with an external system such as a subscription, timer, browser API, or non-React widget. It is not the default place for deriving render data or handling a click. Include every reactive value the setup reads so React can resynchronize when those values change. Cleanup must undo the corresponding setup using the old values: unsubscribe the same handler, clear the same timer, or abort the stale request. React runs cleanup before a changed effect is set up again and after removal, so setup and cleanup should form a repeatable pair.

React.memo compares each prop with Object.is by default, so a newly created object, array, or function is different on every parent render even when its contents look equal. Stabilize an identity only when it crosses a memoized boundary and profiling shows that skipping the child matters; moving constants out of render or simplifying props is often enough. A custom comparator must compare every prop that affects output and behavior, including callbacks, or it can preserve stale closures. Treat memoization as a performance optimization rather than a correctness guarantee, and confirm the result with the React Profiler.

The directive marks a module as an entry into the client module graph, so that module and the modules it imports can be shipped for browser execution. It does not turn every parent Server Component into a Client Component. Server Components may render Client Components, but values crossing that boundary as props must use React-supported serialization; functions are not ordinary serializable props unless the framework exposes them as Server Functions. Place the boundary around the smallest interactive subtree, keep data access and secrets on the server side, and inspect the production client graph because a convenient import can pull substantial code across the boundary.

A client can invoke the generated server endpoint with manipulated arguments, regardless of which button or form the application normally renders. The action must therefore authenticate the caller, authorize the specific resource and operation, parse and validate every input, and enforce business invariants near the write. TypeScript types and client validation do not survive as security controls at the network boundary. Return only the fields the client needs, avoid leaking internal errors, and make retry behavior explicit. Revalidation or redirecting is a post-write UI concern; it does not replace a transaction, idempotency protection, rate limiting, or CSRF defenses where required.

In a React 19 CSS-in-JS system, finite variants such as size or tone can map to stable extracted or cached classes. Mouse coordinates, progress, and arbitrary user colors may change every frame; interpolating each value into a rule can create an ever-growing set of near-duplicate classes and repeated style insertion. Keep the structural rule stable and pass the live scalar through a narrowly named CSS custom property. The trade-off is an inline value at the DOM boundary, but it preserves stylesheet reuse and lets the browser update without generating selector identities.

With React 19, the server must collect every rule used by the rendered tree, emit it before the matching markup becomes visible, and give server and client the same deterministic class identifiers and insertion order. The client then reuses the server sheet instead of duplicating rules during hydration. Test streaming boundaries, conditional rendering, multiple requests, and a clean client navigation. The trade-off is framework-specific integration and extraction work. A process-global mutable sheet can leak one user’s styles into another response, while nondeterministic hashes cause flashes and hydration mismatches.

Vue tracks dependencies at runtime. While an effect, computed getter, or component render is executing, reading a property through a reactive Proxy records a relationship between that property and the active effect. A later write through the Proxy triggers the effects registered for the affected key. This is why mutating the original raw object does not notify consumers of its Proxy, and why a branch that was not read is not yet a dependency. Debug the exact read and write paths rather than assuming the whole object is watched, and keep reactive access inside the execution you expect Vue to track.

Use ref when the state is a primitive, may be replaced as a whole, or should move through composables without losing a stable reactive wrapper. JavaScript reads and writes its value through .value, while templates usually unwrap it. reactive returns a Proxy for an object and is convenient when callers mutate a stable object shape. Replacing that variable with a new raw object breaks consumers of the old Proxy, and destructuring primitive properties loses the Proxy access that performed tracking. Use toRefs when destructured properties must stay linked, and avoid mixing raw objects and proxies as identity keys.

Use computed for a value that can be derived purely from other reactive state. Vue tracks the getter’s dependencies, caches the result, and reevaluates it when those dependencies invalidate it. Use watch when a change must cause a side effect such as a request, persistence, logging, or an imperative API call, and name the source explicitly. Copying one reactive value into another with watch creates two sources of truth, extra timing questions, and possible loops. For a filtered product list, return it from computed; for saving the selected filter to storage, watch the filter.

Register invalidation cleanup as part of each watcher run, create an AbortController for that run, and abort it when the watched source changes before the request completes. The result handler should also commit only the response associated with the current source. When using onWatcherCleanup, registration must happen during the synchronous part of the callback, before any await; the callback’s onCleanup argument is another supported route. Watchers created synchronously in setup are tied to component teardown, but a watcher created later inside a timer is not automatically owned in the same way and should be stopped explicitly.

In universal rendering, setup can run on the server to produce HTML and again in the browser during hydration. A direct $fetch in setup can therefore repeat the request and give the two renders different data. useFetch and useAsyncData coordinate the server request with keyed state, serialize the result into the Nuxt payload, and let the client reuse it while hydrating. Choose $fetch for an event-driven request such as form submission, not for initial SSR state. Keep keys and options consistent, handle pending and error states, and exclude sensitive or unnecessarily large data from the client payload.

Field data tells you what real users experience across devices, networks, routes, caches, and interactions; aggregate it by useful cohorts and watch distributions rather than one average. Lab testing gives a controlled, repeatable trace that helps reproduce a slow cohort and attribute time to network, scripting, rendering, or layout. Neither replaces the other: a fast local trace can miss weak devices, while a poor field metric does not identify the responsible code by itself. Start from a user-visible regression, reproduce it under representative constraints, change one bottleneck, and verify both the trace and the field trend.

Place a boundary around code that is large, independently reachable, and not required for the first useful view, such as a route or an optional editor. A dynamic import creates an asynchronous dependency boundary, but every chunk adds discovery, request, scheduling, parsing, and failure overhead. Very small chunks, shared dependencies duplicated by configuration, or a fallback that shifts layout can erase the gain. Measure initial bytes and execution, later navigation latency, cache reuse, and behavior on request failure. Prefetch only likely next paths, and keep loading and error states functional rather than hiding the delay behind a spinner.

With width descriptors, srcset lists available files and their intrinsic widths, while sizes describes the image slot width under the page’s media conditions. The browser combines that slot estimate with factors such as device pixel ratio and chooses a suitable candidate before full layout is known. An inaccurate sizes value can therefore download an unnecessarily large image even when CSS later renders it small. Use picture when the source or crop itself must change, not merely for resolution switching. Keep src as a fallback, provide intrinsic width and height to reserve space, and test actual requests at representative viewport widths and pixel densities.

A good island contains a coherent interaction and the smallest state that must run in the browser, while surrounding content remains useful server-rendered HTML. The boundary is not free: each island may add an entry point, runtime code, serialization, scheduling, and coordination work. Splitting two controls that constantly share state can cost more than hydrating them together. Choose the loading trigger from user need—immediate, visible, idle, or interaction—and preserve a functional fallback before JavaScript arrives. Test keyboard use, state handoff, slow loading, and one-island failure, then compare shipped and executed JavaScript with a coarser boundary.

Streaming can send a useful shell and Suspense fallbacks before slower content is ready, improving progressive display without making the underlying work disappear. Once response headers and bytes have been committed, however, the server can no longer change the HTTP status in the normal way. Critical authorization, redirects, and shell-level failures must therefore be resolved before streaming starts; later boundary failures need an in-stream or client recovery path plus server logging. Choose boundaries around meaningful loading states, abort abandoned renders, respect stream backpressure, and measure first content as well as completion and hydration. A faster first byte alone does not prove a better experience.

It should remove or replace non-essential movement while preserving content, state feedback, focus order, and task completion. Use the prefers-reduced-motion media feature to select an intentional alternative for each effect; do not assume one global near-zero-duration reset is safe. JavaScript must not require transitionend or animationend to commit state, because a disabled or ungenerated effect may produce no useful end event. Test both media settings, including rapid repeated input, and confirm that a spinner or entrance motion is never the only way important information is conveyed.

They reorder flex items visually but do not rewrite the DOM. Reading order for non-visual presentation and sequential keyboard focus normally continue to follow source order, so a user may see controls left to right while Tab moves through them in another sequence. The safest fix is to make source order match the content and task logic, then use layout that preserves it at each breakpoint. Reserve visual reordering for decorative or semantically independent items and verify the result with keyboard navigation, a screen reader, both text directions, and an unstyled view.

Each control needs a visible label and requirements that users can discover before making an error. When validation fails, provide concise text that identifies the problem and its repair, connect it with aria-describedby, and set aria-invalid on the control. For long forms, add an error summary whose links focus the corresponding controls, then move focus predictably after submission. Do not rely on color, placeholders, or repeated live-region announcements while the user types. Finally, test failure, correction, and resubmission with a keyboard and screen reader, including dynamic fields and server-returned errors.

Start with the element whose built-in contract matches the task. A button already has a role, sequential focus, keyboard activation, disabled state, form behavior, and browser styling for platform modes. Adding role=button to a div changes only the exposed role; it does not implement those behaviors. Use ARIA to supply a missing name, state, or relationship when native HTML cannot express it, and only where ARIA in HTML permits it. Then verify the computed name and role, keyboard path, focus visibility, and state changes in a real browser.

Begin with the parsed DOM, not the screenshot or template indentation, because the HTML parser may repair invalid nesting. List headings, landmarks, forms, and interactive elements, then inspect computed names, roles, and states in the accessibility tree. Use only the keyboard to follow skip links, navigation, disclosures, dialogs, and form submission while checking focus order and visibility. Automated rules catch duplicate IDs, missing names, and invalid ARIA, but they cannot judge whether labels and reading order fit the task. Finish with a screen-reader pass through the critical path and keep repeatable checks as regression tests.

In the Node 24 baseline, a link should retain an href and a form an action, method, labels, and server validation before JavaScript adds faster navigation or inline feedback. This preserves the core task during slow loading, script failure, assistive use, and direct requests. Insert untrusted text with textContent, not innerHTML, because enhancement does not relax the XSS boundary. The trade-off is maintaining a baseline path alongside richer interaction; making JavaScript the only entry point turns one bundle or runtime error into total loss of the task.

In the HTML Living Standard, section, article, and other sectioning elements do not cause mainstream browsers to expose an automatic nested heading outline. Choose h1 through h6 from the document’s actual hierarchy, keep levels understandable when CSS is removed, and do not reset every nested section to h1. A section generally needs a real theme and heading; a layout wrapper can remain a div. The trade-off is maintaining heading levels during composition, but visual font size is not semantics and CSS can style any correct level.

Under Media Queries Level 5 and CSS Containment Level 3, Flex order, grid coordinates, and dense packing can change visual placement without changing DOM reading or sequential focus order. Put content and controls in the task’s logical source sequence, then create wide and narrow layouts that preserve it. Container queries should react to a component’s available inline size, but they do not authorize semantic reordering. The trade-off may be a less dramatic composition. Verify keyboard, screen-reader, unstyled, and both-side-of-boundary behavior because screenshots cannot expose an order mismatch.

The dev server serves and transforms modules on demand for a fast feedback loop, while vite build creates an optimized deployment graph with emitted chunks, asset URLs, environment replacements, and a configured browser target. Those are different execution paths, so development success does not prove correct production resolution, base paths, lazy chunks, or server behavior. Run the actual build and serve its output in a production-like environment. Test direct navigation, dynamic imports, CSS and public assets, environment variables, and supported browsers. Keep type checking as a separate gate when the project relies on TypeScript, because transformation alone is not a full type check.

A loader transforms matching module resources as Webpack builds the dependency graph. Rules select files, and a loader chain passes transformed content and metadata from one loader to the next. A plugin hooks into the wider compiler and compilation lifecycle, so it can coordinate tasks such as asset generation, optimization, environment injection, or reporting across the graph. Use a loader when the job is fundamentally “turn this imported resource into a module”; use a plugin when it needs compilation-wide context or emits and modifies assets. When debugging, confirm rule matching and loader order separately from plugin hook timing.

Treat Webpack-compatible configuration as a migration aid, not proof of identical behavior. Inventory entry points, resolution aliases, loaders, plugins, dev-server behavior, cache settings, public paths, and every output consumed by deployment or another package. Migrate a representative production target first, checking Rspack’s current compatibility documentation for each extension. Compare emitted files, source maps, CSS order, dynamic chunks, runtime behavior, and warnings under clean and cached builds. Then test HMR and CI on the supported Node version. Benchmark only after correctness, using repeated cold and warm runs with the same machine, inputs, and cache policy.

Prove that the application’s actual graph is supported, not merely that a starter project runs. List custom Webpack configuration, loaders, plugins, module formats, CSS behavior, aliases, monorepo boundaries, and production deployment requirements, then map each item to current Turbopack support. Exercise development startup, edits across representative dependency paths, HMR state preservation, error recovery, clean production builds, and runtime chunk loading. Compare correctness before speed, and collect traces for slow or memory-heavy cases. Keep a documented rollback path until CI, preview, and production monitoring show equivalent behavior for the routes users depend on.

A cached task is correct only when its key represents every input that can affect its declared outputs. That includes source files, dependency versions and lockfile state, configuration, tool versions, relevant environment variables, command arguments, and outputs from upstream tasks. Missing an input produces a fast stale hit; including timestamps or broad unrelated directories destroys reuse. Define task boundaries and outputs explicitly, normalize the execution environment, and separate secrets from cacheable artifacts. Verify with clean builds and deliberate input changes, restore into an empty workspace, and use content hashes rather than modification times wherever the tool permits.

In Dart Sass 1.104.0, @use loads a module once and accesses its public members through a namespace, while @forward defines what a library entry exposes. Configure !default variables with with (...) on the first load; later loads reuse the configured module and cannot silently reconfigure it. Legacy @import and global built-ins are deprecated and create global-name and duplicate-output problems. The trade-off is explicit namespaces and load order. A hidden transitive load can make later configuration fail, so keep configuration at clear entry points.

Dart Sass 1.104.0 compiles mixins at every include site, loops into one rule per iteration, and nested selectors into expanded selector chains. A short SCSS file can therefore emit large, high-specificity CSS. Build the real entry points, inspect emitted selectors and declarations, compare compressed artifact size, and test cascade behavior in representative pages. Prefer placeholders, shared classes, or bounded maps when reuse is real. The trade-off is less locally convenient abstraction; reviewing only source line count misses duplicated output and nesting that becomes difficult to override.

Tailwind CSS 4.3.3 scans source files as text and generates static CSS for complete candidates it recognizes; it does not execute JavaScript template strings such as bg-${tone}-600. Map each allowed tone to a full literal class, or declare a bounded source when classes come from external content. Verify the production build because development files may accidentally contribute candidates. The trade-off is less arbitrary runtime composition. Safelisting broad patterns inflates CSS, while a dynamically assembled class can work in one environment and disappear from the deployed artifact.