Interview questions in Frontend Dev, page 22
Performance concerns with the :has() selector
:has() forces upward and forward style invalidation on DOM changes, broad subjects are costly; mitigate by scoping the subject, avoiding deep or universal arguments, and limiting dynamic…
How would you diagnose and optimize slow Angular component tests?
Tests Angular test economics and runner overhead. Strong answers profile with Vitest, swap Karma for jsdom/happy-dom, mock services, and reduce TestBed recompilation via targeted imports.
How would you use tsconfig.json to enable shorter path aliases?
This tests TypeScript module resolution. A strong answer sets compilerOptions.baseUrl, maps paths like @/* to src/*, and warns bundlers need matching aliases. A red flag is omitting baseUrl or claiming paths alone changes runtime resolution.
How do you enable basic i18n routing in Next.js?
This tests your knowledge of the built-in Pages Router i18n configuration in next.config.js. A good answer exports an i18n object with locales array, defaultLocale, and optionally localeDetection.
Testing shared Vue components: unit, a11y, visuals?
Unit tests (Vitest/Jest) for logic, accessibility tests (axe, Pa11y) for ARIA/keyboard, visual regression (Percy, Chromatic) for rendering.
How BEM tames specificity and !important
BEM names block, element, modifier as flat single classes, keeping specificity low and equal, removing the need for deep selectors and !important.
What problem does esModuleInterop solve for CommonJS imports?
Tests CommonJS-to-ESM interop. A strong answer covers: default imports for CommonJS modules; runtime helpers checking __esModule and wrapping exports; and implicit allowSyntheticDefaultImports. Red flag: claiming it is purely type-level with no emit impact.
Where Next.js Middleware executes and Edge Runtime limits
Tests your grasp of Edge Runtime constraints. Middleware runs at the Edge before route matching, with no Node.js APIs, require, Buffer, or dynamic eval, only Web APIs. Red flag: treating it as Node.js and suggesting fs or npm packages.
What design tokens are and why they matter
Tokens are named, platform-agnostic design decisions stored centrally, enabling consistency, theming, and one-place updates.
What is the Virtual DOM's role during a Vue state update?
Tests your grasp of Vue's reactive render pipeline. A strong answer: state change triggers a new virtual DOM tree; runtime diffs it against the old tree to apply only necessary real DOM updates. Red flag: saying virtual DOM updates browser DOM directly.
How do modern build tools handle TypeScript vs tsc?
Separating transpilation from type checking for speed. Great answer: fast native tooling strips TS per-file on demand via native ESM; browser loads only visited modules; tsc/ts-loader check/bundle the whole graph upfront.
Full Route Cache vs Data Cache and per-fetch cache control
Tests App Router's dual caching layers. Full Route Cache stores rendered HTML and RSC payload at build time; Data Cache stores raw fetch results across routes. Control a fetch with cache and next.revalidate options.
Transforming tokens for multiple platforms
A transformer like Style Dictionary parses JSON, applies platform transforms, and renders formatted outputs (CSS vars, Swift, Kotlin) via configured platforms.
Why is Svelte called a 'disappearing framework'?
Tests whether you understand compile-time versus runtime-heavy frameworks. A strong answer says Svelte compiles components to vanilla JS at build time, shipping a tiny runtime instead of a reconciler or virtual DOM. Red flag: claiming there is zero runtime.
How would you structure TypeScript code and exports for effective tree-shaking?
Tests ES module semantics and sideEffects for library authors. Great answers: emit ESM, set sideEffects:false, avoid stateful barrel files, and preserve import syntax. Red flag: saying ESM alone guarantees tree-shaking without mentioning side effects.
How to structure translations and load locale content in App Router
Tests App Router i18n architecture with next-intl. Answer: locale-prefixed routes, JSON message files with ICU syntax, and next-intl APIs consumed in Server Components. Red flag: using client-side locale state instead of integrated routing.
What isolatedModules enforces and why bundlers need it
IsolatedModules forbids features needing cross-file type info because Babel and esbuild compile each file alone; const enums, certain re-exports, and namespace tricks are flagged.
Versioning and distributing token updates safely
Publish tokens as a semver package, bump major on breaking changes, deprecate before removing, communicate via changelogs and migration guides.
How is a Vue template compiled into a render function?
Map v-if to ternaries, v-for to array map, and events to onXxx props.
Explain how next/image's sizes prop works for responsive performance
This tests your knowledge of the browser responsive image algorithm. The sizes prop declares the rendered width at each breakpoint so the browser can select the smallest adequate srcset candidate.
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