Skip to content
tezvyn:

🌐Frontend Dev

Frontend web development and UI engineering

310 bites

Test yourself: Top 30 advanced Frontend Dev interview questionsMultiple choice, with the correct answer and why it is correct on every question. Free, no sign-in.

Advanced everything in Frontend Dev, page 6

Implement IntersectionObserver in TypeScript for lazy-loading images
advanced2 min read

Implement IntersectionObserver in TypeScript for lazy-loading images

Tests precise DOM typing and observer lifecycle. A strong answer types the callback as receiving IntersectionObserverEntry[], narrows entry.target to HTMLImageElement, swaps data-src to src, and calls unobserve.

How would you use DocumentFragment to optimize adding 1,000 list items?
advanced2 min read

How would you use DocumentFragment to optimize adding 1,000 list items?

Tests DOM reflow/repaint costs and off-DOM batching. A strong answer: create a DocumentFragment, build the 1,000 nodes off-DOM, then append once to trigger a single reflow. Red flag: claiming it saves memory or confusing it with innerHTML batching.

advanced2 min read

What is the polymorphic this type in TypeScript?

This tests polymorphic this for type-safe fluent APIs. A strong answer defines this as the current instance type, implements CSSBuilder methods that return this for chaining, and notes subclass preservation.

advanced2 min read

Difference between abstract class and interface, with scenario

Tests if you know when shared state or constructor logic justifies single inheritance. A strong answer contrasts erased interfaces with base classes, then names a scenario requiring enforced initialization.

advanced2 min read

How would you model fetchItem's return type with generics and conditional types?

Define base and extended Item, return T extends true ? ExtendedItem : BaseItem, and overload the plain boolean case.

advanced2 min read

Build a typesafe ApiRoute type using template literal types

Tests type-level string composition with template literals. Good answer: define a Resource union, interpolate it into /api/v1/ paths, then union with the /{id} variant. Red flag: suggesting runtime regex or plain string instead of literal types.

Explain Shadow DOM, encapsulation, and event propagation
advanced2 min read

Explain Shadow DOM, encapsulation, and event propagation

Tests Web Components encapsulation and event retargeting. A strong answer covers shadow root/host/boundary, CSS scoping, open versus closed modes, and retargeting where events appear to come from the host element.

Offload CPU-intensive work to a Web Worker and explain communication.
advanced2 min read

Offload CPU-intensive work to a Web Worker and explain communication.

This tests main-thread blocking and worker messaging. A strong answer covers: new Worker(url), moving logic to a worker file, sending data via postMessage(), and receiving results via onmessage. A red flag is suggesting DOM use or shared memory from workers.

advanced2 min read

What is a type predicate? Write a custom type guard for User.

Tests if you know a type predicate is a compile-time narrowing hint requiring runtime validation. Great answers define parameter is Type, validate every User property, and demonstrate narrowing. Red flag: omitting runtime checks or using as casting.

advanced2 min read

Create a generic getProperty using generics and keyof

Whether you can constrain a generic key with keyof and return the exact property type. Use T for the object and K extends keyof T for the key, returning T[K].

Runtime Response Validation with Schema Libraries
advanced2 min read

Runtime Response Validation with Schema Libraries

TypeScript types evaporate at runtime, so a fetch response typed as User[] can be null or malformed. Schema libraries like Zod give static types and runtime guards from one contract. The footgun is using as instead of parse, silently reintroducing crashes.

Kent C. Dodds Fixes Accidental Monorepo with Workspaces
intermediate2 min read

Kent C. Dodds Fixes Accidental Monorepo with Workspaces

Kent C. Dodds consolidated four deployable apps into a proper npm workspace, deleting three nested lockfiles and adding minimal Nx caching. The migration exposed hardcoded paths and invalid package aliases that broke production once Node enforced package…

Cloudflare Sandboxes Cut Container Heartbeat Plumbing
intermediate2 min read

Cloudflare Sandboxes Cut Container Heartbeat Plumbing

Kent C. Dodds replaced Cloudflare Containers with Sandboxes, deleting heartbeat and shutdown logic for his FFmpeg pipeline. PR #729 uses one-shot exec() inside the existing queue worker, cutting deploy surface and eliminating long-lived service orchestration.

Kent C. Dodds Adds SQLite FTS5 to Vector Search
intermediate1 min read

Kent C. Dodds Adds SQLite FTS5 to Vector Search

Kent C. Dodds added SQLite FTS5 to Vectorize embeddings after semantic search missed exact matches like "React Testing Library." The hybrid pipeline uses Reciprocal Rank Fusion. If your search fails on API names, add BM25 backup, not bigger embedding models.

intermediate1 min read

Vercel Connect replaces env tokens with runtime OIDC

Vercel Connect Public Beta replaces static env tokens with short-lived, task-scoped credentials exchanged at runtime via OIDC. Agents request least-privilege access per job instead of holding long-lived shared secrets, eliminating manual rotation when…

intermediate2 min read

Vercel ships AI Gateway, Workflow SDK, and Sandbox for agents

Vercel Agent Stack unifies hundreds of models, durable workflows, and isolated microVMs for production agents. One endpoint routes across providers, checkpoints resume failed runs, and sandboxes isolate unreviewed code.

intermediate2 min read

Vercel Ship 2026: agent stack, eve framework, and microservices

Vercel Ship 2026 unveils open-source eve framework and Vercel Services for microservices July 1. Vercel is repositioning as agentic infrastructure with Connect credentials and expanded Python backends. Evaluate if your next agent deploys here instead of AWS.

Next.js 16.2 brings 67-100% faster server Fast Refresh
intermediate2 min read

Next.js 16.2 brings 67-100% faster server Fast Refresh

Next.js 16.2 Turbopack brings Server Fast Refresh to Node.js, cutting reload times 67-100% and compile times 400-900%. Only changed modules reload, not whole chains. WASM Workers, SRI, and dynamic import tree shaking land; upgrade to cut dev latency.

Next.js 16.2 adds agent-native dev tooling
intermediate1 min read

Next.js 16.2 adds agent-native dev tooling

Next.js 16.2 bundles version-matched docs with create-next-app, hitting 100% on framework evals versus 79% without. Browser errors now forward to terminal and a dev server lock file prevents agent confusion. Upgrade if you use AI coding agents.

Next.js 16.2 ships stable Adapter API for all platforms
intermediate1 min read

Next.js 16.2 ships stable Adapter API for all platforms

Next.js 16.2 ships a stable Adapter API co-built with OpenNext, Netlify, and Cloudflare. The typed build contract lets any platform target full framework fidelity using the same public hooks Vercel uses. Stop reverse-engineering build output.

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