Easy interview questions in Frontend Dev, page 6
Which Web API offloads expensive work from the main UI thread?
Cite Web Workers, instantiate new Worker(url), and communicate via postMessage and onmessage.
Why design systems use Sass or PostCSS
Sass adds variables, nesting, mixins, and functions for reuse; PostCSS transforms CSS via plugins like autoprefixer.
What is a Service Worker's role and key PWA capability?
Tests understanding of the Service Worker as a network proxy and its core PWA benefit. A strong answer states it intercepts requests as a proxy and enables offline use via granular caching. Red flag: confusing it with Web Workers or DOM manipulation.
Packaging a design system as an npm dependency
Publish to an npm registry, with package.json holding the version, entry points, and dependencies, and version it via SemVer.
Vue computed vs method: performance difference and when to choose each?
This tests Vue reactivity caching. Answer: computed caches and reruns only when reactive deps change, while methods run each render. Choose computed for derived data; methods for events/args. Red flag: saying computed is always faster or passing arguments.
How do you lazy-load a route in Vue or Angular?
Tests route-level code splitting. Strong answers mention dynamic imports in Vue Router or Angular loadChildren and highlight a smaller initial JS bundle. Red flag: confusing this with image lazy loading or claiming it speeds up runtime navigation.
Documenting a single UI component
Purpose and when to use, a props API table, live examples of variants and states, accessibility notes, and do and don't guidance.
Create a basic GET API endpoint in Next.js App Router
Tests App Router backend conventions. Create route.js in an app segment, export async GET with NextRequest and return NextResponse; route.js isolates the endpoint from page.js. Red flag: citing pages/api or raw Node res objects.
How do you programmatically play, pause, and dynamically set a video source?
Your grasp of HTMLMediaElement's imperative API and the play() Promise. Query the video, attach play() and pause() to buttons, and set src or swap source children then call load(). Treating play() as synchronous or changing src without load().
How do you parse JSON body in a POST Route Handler?
It tests whether you know Next.js App Router Route Handlers use the standard Web Request API. Call await request.json() inside the POST function; handle errors with try-catch and return a 400 for invalid JSON.
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.
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.
Declaring and scoping CSS custom properties
Declare with --name, read with var(), :root makes it global while a class scopes it locally.
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.
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.
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.
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.
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