Interview questions in Frontend Dev, page 21
Native CSS nesting and the parent selector
Nest rules inside a block, descendant selectors combine implicitly, & references the parent and is required for compound or pseudo-class joins.
What is Angular's TestBed and when would you use it?
Say createComponent returns a fixture with no immediate binding, so await fixture.whenStable before asserting DOM.
Use MediaRecorder to capture a canvas stream and download as WebM
Tests MediaRecorder lifecycle and blob assembly. Answer: canvas.captureStream() into new MediaRecorder with video/webm, start(), collect chunks via dataavailable, stop(), then build a Blob and object URL for download.
How would you use Next.js Middleware to protect /api/admin/* routes?
Match /api/admin/:path*, read the secure cookie, validate the token, return 401 or proceed.
When container queries beat media queries
Media queries react to viewport, container queries react to a parent's size, ideal for reusable components; set container-type on an ancestor then query it.
How do you test emitted events using Vue Test Utils?
Tests Vue Test Utils event inspection. Strong answer: mount, trigger('click'), then check wrapper.emitted('increment') for the payload array. Remember it returns an array of arrays, one per emission.
In WebGL, what is the difference between attributes and uniforms?
Tests per-vertex versus per-draw-call data flow. Attributes vary per vertex from buffers; uniforms are constant per draw call. Cite vertex positions as attributes and an MVP matrix as uniform.
How do you implement response streaming in a Next.js Route Handler?
This tests Web Streams API mastery in Next.js. Strong answer: create a ReadableStream with TextEncoder, return it in a Response, and cite AI chat or large JSON as use cases. Red flag: suggesting Node res.write instead of standard Web Streams.
WebRTC signaling: SDP, ICE, and the signaling server
Peers exchange SDP offer and answer describing media via an out-of-band signaling server, then trade ICE candidates to find a network path using STUN and TURN.
Styling a parent with the :has() selector
:has() matches an element that contains or relates to a given selector, enabling upward styling; figure:has(figcaption) targets captioned figures.
How do you mock an async service call in an Angular component test?
This tests Angular unit isolation and HTTP mocking. A strong answer covers HttpTestingController setup, flushing a mock response, asserting UI changes, and notes mocking avoids flaky networks. Red flag: using real HTTP calls in unit tests.
How to securely set and read httpOnly cookies in Route Handlers
This tests cookie security across the App Router. A strong answer covers setting httpOnly, Secure, SameSite via NextResponse in a Route Handler, reading with cookies() later, and why document.cookie cannot access it. Red flag: client-side JavaScript access.
First compilerOptions to set after tsc --init
Enable strict for full type safety, set target and module to match the runtime, and choose outDir/rootDir or moduleResolution; each tightens checks or aligns output.
Why Oklch beats HSL for color variations
HSL lightness is not perceptually uniform so equal steps look uneven, Oklch keeps perceived lightness consistent across hues, giving predictable hover and palette scales.
How do you test a Svelte component updates a writable store?
Import the store with the component, render, await fireEvent.click, then assert the store value.
What are the benefits of next/image over a standard img tag?
Tests knowledge of Next.js image infrastructure. Strong answers mention automatic optimization, lazy loading, blur placeholders for layout shift, and responsive srcset. Red flag: calling it a zero-impact wrapper or a styling component.
Building a container-query-driven card component
Declare a wrapper container with container-type, query it with @container, restyle the card's internal grid by container width, optionally use cqi units.
Describe the role of a spy in testing with a framework example
This tests whether you know a spy records calls without replacing original implementation. A strong answer defines the tracking role, picks a concrete Vue or Angular handler, and asserts with toHaveBeenCalled.
What is tsconfig strict, and which sub-flag to relax for legacy?
Tests strict as a master switch and migration pragmatism. Strong answers name strictNullChecks or noImplicitAny as the first to relax in legacy code, trading null-safety for fewer errors. Red flag: disabling strict entirely instead of a targeted sub-flag.
What is Next.js Middleware and a real-world auth use case?
This tests request interception before a route renders. A good answer defines Middleware as pre-request code using NextRequest and NextResponse, often on the Edge Runtime, with auth redirects as an example.
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