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 3

Angular 21.1 ships with Signal Forms debounce patterns
intermediate2 min read

Angular 21.1 ships with Signal Forms debounce patterns

Angular 21.1 ships with minor fixes. Signal Forms tutorials now show debounced async validators to cut wasted backend API calls. Migration guides for the modern Control Flow syntax are available for apps still on legacy structural directives.

intermediate1 min read

Vue 3.4 Cuts Build Times 44%, Stabilizes defineModel

Vue 3.4 cuts SFC compile times 44% and doubles parser speed while stabilizing defineModel for v-model. The refactored reactivity engine skips redundant computed triggers, reducing re-renders. Upgrade requires Volar 1.8.27+ and matching toolchain versions.

intermediate1 min read

VitePress 1.0 replaces VuePress for docs

VitePress 1.0 replaces VuePress, powering docs for Vite, Pinia, and Vitest. It serves static HTML for SEO, then hydrates into a Vue 3 SPA with sub-100ms edits. Migrate legacy VuePress docs or choose it for new content sites.

intermediate1 min read

Vue 3.5 cuts reactivity memory 56%, adds lazy hydration

Vue 3.5 drops reactivity memory 56% and large arrays up to 10x faster with no breaks. Stable reactive props destructure kills withDefaults boilerplate, while lazy hydration and useId() fix SSR pain points.

Compare SSR, SSG, and ISR trade-offs in meta-frameworks
advanced2 min read

Compare SSR, SSG, and ISR trade-offs in meta-frameworks

What it tests: matching rendering modes to build time, freshness, and scale. Outline: contrast SSR per-request cost with SSG fast CDN delivery but stale content and long builds, then show ISR as lazy regeneration post-deploy.

advanced2 min read

Explain patch flags and static hoisting in Vue 3's compiler

Tests your grasp of compiler-informed virtual DOM optimizations. A strong answer covers patch flags as bitmap hints for dynamic bindings and static hoisting as extracting static nodes to skip diffing. Red flag: claiming Vue 3 removes the virtual DOM.

How does Svelte compile count += 1 into DOM updates?
advanced2 min read

How does Svelte compile count += 1 into DOM updates?

Tests if you know Svelte reactivity is compile-time via runes, not runtime proxies. Good answer: $state marks reactive vars; runes are compiler hooks; compiler emits DOM-sync code. Red flag: describing useState or VDOM.

How would you diagnose and optimize slow Angular component tests?
advanced2 min read

How would you diagnose and optimize slow Angular component tests?

Tests Angular test economics and runner overhead. Strong answers profile with Vitest, swap Karma for jsdom/happy-dom, mock services, and reduce TestBed recompilation via targeted imports.

How do you architect Svelte stores to minimize WebSocket re-renders?
advanced2 min read

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.

Explain Svelte Action update and provide a reactive CSS example
advanced2 min read

Explain Svelte Action update and provide a reactive CSS example

Tests Svelte actions beyond initial mount. Strong answers explain update re-runs when parameters change, give a CSS custom properties example, and contrast with destroy. Red flag: suggesting the action re-runs from scratch or using reactive statements.

advanced2 min read

When would you provide an Angular service at the component level?

Tests Angular DI scoping beyond singletons. A strong answer picks stateful reusable widgets, explains providers create one instance per subtree, and notes cleanup on destroy. Red flag: claiming this is for performance without mentioning state isolation.

advanced2 min read

How would you design useCounter to support shared or independent state?

Tests your grasp of scope in Vue composables. Great answers contrast module-level refs for global singleton state against function-level refs for per-instance isolation, and explain tradeoffs.

advanced2 min read

How do you manage router scroll behavior and history position restoration?

Use scrollBehavior to return savedPosition on popstate and top: 0 on new navigations; handle hash anchors and async delays.

Contrast SvelteKit file-system routing with Vue/Angular router configs
advanced2 min read

Contrast SvelteKit file-system routing with Vue/Angular router configs

Contrast SvelteKit directory routes with Vue/Angular config routers; filesystem routing removes boilerplate but couples URLs to folders and limits dynamic registration.

What is the purpose of an Angular Resolve guard vs ngOnInit?
advanced2 min read

What is the purpose of an Angular Resolve guard vs ngOnInit?

Tests routing lifecycle timing and UX state management. Strong answers: Resolve blocks activation until data returns; ngOnInit renders first then fetches, causing flicker.

Build a reactive data-fetching utility with Svelte stores
advanced2 min read

Build a reactive data-fetching utility with Svelte stores

Tests store composition for async data fetching with caching and auto re-fetch. Strong answer: readable for lifecycle, derived's set callback for race-safe fetches, writable for private inputs. Red flag: exposed internals or missing cleanup.

Differentiate client state from server state and their tools
advanced2 min read

Differentiate client state from server state and their tools

This tests whether you recognize server state as async, remote, and cacheable versus local synchronous client state. A strong answer contrasts ownership and lifecycles, mapping Pinia to UI state and Vue Query to fetched data.

advanced2 min read

How would you architect a multi-step Svelte wizard with Stores?

Tests state isolation and validation orchestration across wizard steps. A solid answer uses a centralized store with step slices, derived validity stores, and pre-navigation guards. Red flag: unrelated per-step stores or validation only on final submit.

advanced2 min read

How do you structure components and state for a dynamic Vue form?

This tests your design of normalized reactive state for dynamic Vue forms. A great answer uses a flat item array with stable keys, row components or scoped slots, and schema-driven validation. Red flags include mutating by index or using array indices as keys.

Implement an async Angular validator with HTTP and PENDING feedback
advanced2 min read

Implement an async Angular validator with HTTP and PENDING feedback

Tests Angular async validator lifecycle and HTTP race conditions. A strong candidate returns an Observable from AsyncValidatorFn, lets Angular set PENDING automatically, debounces input, and binds control.pending in the template.

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