Intermediate interview questions in Frontend Dev, page 10
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.
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.
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.
Architecting multi-brand, dark-mode theming
Tier tokens into primitive, semantic, and component layers; components consume semantic tokens; themes swap by remapping semantic-to-primitive on a scope like data-theme.
Compare Angular Zone.js and Vue 3 Proxy reactivity
This tests update granularity. Contrast Vue 3 Proxy tracking, targeting only affected components, with Angular Zone.js patching async APIs to trigger top-down dirty checking across tree. Vue binds deps at render; Angular compares values each cycle.
Clickable card: div onClick versus anchor tag
Use an a tag for navigation; it is focusable, keyboard-activatable, announced as a link, and supports open-in-new-tab; a div onClick loses all of that without manual ARIA work.
The role of Storybook in a design system
Storybook renders components in isolation across states, serving as living documentation, a development sandbox, and a base for visual and accessibility testing.
Tokens as a single source of truth pipeline
Define tiered tokens in standardized JSON, transform per platform with a build tool, publish versioned packages, and automate in CI.
Contributing a new component variant
Align with maintainers first, follow guidelines, implement with API and tokens, add stories, docs, and tests, then open a PR for review.
How do you globally add a property to a third-party ButtonProps interface?
Tests TypeScript declaration merging and module augmentation. A strong answer uses a .d.ts file that declares the same module and interface name to merge the missing property globally. Red flag: suggesting edits inside node_modules or local wrapper types.
Hydration: SSR HTML to interactive app?
Server renders HTML, client JavaScript bootstraps and attaches event listeners (hydration), mismatch occurs if server HTML differs from client render.
Delivering an urgent design system hotfix
Branch from the released tag, apply a minimal fix, add a regression test, ship a patch version, then forward-port to main.
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