Interview questions in Frontend Dev, page 17
Shadow DOM encapsulation vs CSS Modules
Shadow DOM creates a separate tree blocking selectors both ways, CSS Modules only rename classes, and global styles need explicit bridges.
How do you manage router scroll behavior and history position restoration?
Use scrollBehavior to return savedPosition on popstate and top: 0 on new navigations; handle hash anchors and async delays.
Explain IndexedDB transactions and readonly vs readwrite modes
Every operation needs a transaction; readonly allows concurrent readers, readwrite is exclusive; they auto-commit when idle.
Recommended App Router pattern to fetch shared data once for child routes
Tests App Router layout constraints and request deduplication. Answer: wrap the user fetch in React cache, call it from layout and child Server Components, and let Next.js deduplicate. Red flag: layout prop drilling or getServerSideProps.
Associating a label with a form input
Explicit association via for and id, implicit by wrapping the input, and why this gives screen readers an accessible name and larger click target.
How do you implement a data-fetching Composable in Vue 3?
Write useFetch accepting a URL, exposing data, loading, and error refs, then return them.
Write an IndexedDB add function with transaction error handling
Tests IndexedDB request-transaction lifecycle and event-driven error propagation. Answers open a transaction, call add(), and wire onsuccess/onerror on the request plus onabort/onerror on the transaction. Red flag: ignoring onabort or duplicate-key throws.
How do nested layouts work in the App Router?
Tests nested layout composition and state persistence in the App Router. Good answers explain root wraps dashboard wraps page, dashboard state survives child navigation, and only the page segment rerenders.
Managing focus in an accessible modal dialog
Move focus in on open, trap Tab within the dialog, close on Escape, and restore focus to the trigger on close.
How to create a singleton Angular auth service
Tests Angular dependency injection and singleton scope. Strong answer: use the Injectable decorator with providedIn set to root for an application-wide singleton, then inject it into components.
How do you add a new index to an existing IndexedDB store?
Tests production schema migration discipline. Bump the integer version in open(), handle onupgradeneeded before onsuccess, use event.oldVersion for incremental changes, and guard against duplicate index creation.
What are Parallel and Intercepting Routes? Describe a photo gallery modal scenario.
This tests App Router layout composition and URL-state. A strong answer defines @modal slots and intercepting (.) routes, explaining modal overlays that preserve page context. Red flag is proposing global state or portals over file-system conventions.
ARIA roles for an accessible tab interface
Tablist contains tabs, each tab uses aria-selected and aria-controls, panels use role tabpanel with aria-labelledby, and arrow keys move between tabs.
What is a Svelte Action? Write a simple logging action.
Define a function receiving the node, log a message, and optionally return destroy.
How do you query IndexedDB products by price range?
Tests IndexedDB indexing and range query APIs. You need a price index created in onupgradeneeded, then IDBKeyRange.bound(50, 100) with index.getAll or openCursor. Red flag: fetching all records and filtering in JavaScript.
Server Component fetch vs. client-side SWR or React Query
Tests App Router cache boundaries and hydration costs. Strong answers weigh server TTFB and bundle savings against client interactivity, mutations, and background refetching. Red flag: defaulting to client fetching everywhere and ignoring waterfalls.
Announcing status messages with ARIA live regions
Use a live region with aria-live polite or role status, ensure it exists in the DOM beforehand, and insert text to trigger announcement.
Would you use a Service or a custom Pipe for currency formatting?
Choose Pipe for declarative syntax; implement PipeTransform with transform(value, ...args); use Intl.NumberFormat; register standalone.
Why access IndexedDB exclusively from a Web Worker?
Tests whether you know IndexedDB in workers keeps the main thread free from serialization and transaction overhead, while recognizing that postMessage copying and request-response coordination add real architectural complexity.
Key difference between Server and Client Components in Next.js?
Tests App Router rendering boundaries. A strong answer contrasts server-only execution against browser interactivity, choosing Client Components only for state, effects, or events.
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