Interview questions in Frontend Dev, page 20
Governance for design system contributions
A clear intake and proposal step, review by core maintainers plus design, and criteria covering accessibility, API consistency, tokens, tests, and docs.
How does Svelte surgically update the DOM without VDOM?
Tests VDOM overhead vs compile-time optimization. A strong answer explains that Svelte compiles reactive dependencies into direct DOM API calls, skipping tree creation and diffing. Red flag: claiming VDOM is slow because the DOM itself is slow.
Get canvas 2D context and draw a filled circle
This tests Canvas API coordinates and context acquisition. A strong answer selects the canvas, calls getContext("2d"), uses path functions for circles, sets color style, and fills. A red flag is ignoring the top-left origin or using SVG instead.
What is NextResponse.json() and how does it differ from standard Response?
NextResponse.json() auto-serializes and sets the application/json header; standard Response needs manual JSON.stringify and headers.
Driving and measuring design system adoption
Lower friction with migration paths and great docs, incentivize over mandate, and measure adoption via package usage, component coverage, and code analysis.
Implement virtual scrolling for a large list in Vue
Tests DOM cost awareness and viewport culling. Strong answer: mount only visible nodes plus overscan, recycle DOM on scroll, and preserve total scroll height with a spacer. Red flag: suggesting pagination or naive v-for without keys.
Write a TypeScript async/await function that requests webcam access and handles errors
This tests async/await error handling for getUserMedia and stream attachment. A good answer uses try/catch, sets video.srcObject, and branches on NotAllowedError and NotFoundError. A red flag is omitting catch or using src instead of srcObject.
GET caching in Route Handlers and how to opt out
Tests App Router GET Route Handler caching and dynamic opt-outs. Hit: export const dynamic = 'force-dynamic', revalidate = 0, dynamic APIs like cookies(), and unstable_noStore(). Red flag: confusing this with Pages Router API routes, dynamic by default.
Zone.js and change detection optimization in Angular?
Zone.js wraps async (timers, events, HTTP), triggering change detection after each; use runOutsideAngular when external libraries fire high-frequency events.
A federated design system governance model
Let the product team own the component as maintainers, with the core team setting standards, reviewing against a checklist, and owning the platform and tokens.
How do you create a smooth Canvas 2D loop with requestAnimationFrame?
Tests render pipeline timing. Outline: queue rAF per refresh; derive delta from timestamp for frame-rate independence; recurse each frame; cancel via cancelAnimationFrame. Red flag: claiming rAF locks 60fps, ignoring timestamp, or setInterval is fine.
How do you create a dynamic API route and access its parameter?
This tests Next.js routing conventions and dynamic parameter extraction. Create /api/products/[productId]/route.js, export a GET handler, and read productId from params. Red flag: mixing App Router params with Pages Router req.query.
Declaring and scoping CSS custom properties
Declare with --name, read with var(), :root makes it global while a class scopes it locally.
How do you architect Svelte stores to minimize WebSocket re-renders?
Tests Svelte store granularity and subscription semantics. A great answer splits the monolith into domain stores, uses derived selectors to isolate slices, and leverages readable stores to encapsulate the WebSocket source.
Which video event signals completion, and how do you track playback time?
Tests HTMLMediaElement events and UI performance. Answer: use ended for replay; read currentTime on timeupdate but throttle updates or use requestAnimationFrame. Red flag: setInterval polling, currentTime===duration checks, or unthrottled state writes.
How do you handle multiple HTTP methods in a single route.ts file?
Tests App Router Route Handler REST conventions. A strong answer exports named GET, PUT, DELETE handlers using NextRequest and NextResponse.json, plus 405 for unsupported methods.
CSS logical properties versus physical properties
Logical properties map to flow direction not fixed sides, padding-inline-start follows text direction, benefit is automatic RTL and vertical support.
What is the fundamental difference between unit and component tests?
Isolation levels in frontend testing. Unit tests verify single functions or composables with mocked dependencies; component tests verify mounting, rendering, and interaction and pull in more code.
Explain the roles of vertex and fragment shaders in WebGL
Vertex shaders write gl_Position per vertex; fragment shaders write gl_FragColor per pixel.
How do you read headers and search params in a Route Handler?
Tests fluency with the Web Standard Request API in Next.js App Router. A strong answer uses request.headers.get() for headers and request.nextUrl.searchParams for query params, avoiding Express-style req.query or req.headers.authorization.
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