tezvyn:

🌐Frontend Dev

Frontend web development and UI engineering

498 bites

Vue, Angular & Svelte30 sec read

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.

Vue, Angular & Svelte30 sec 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.

Vue, Angular & Svelte30 sec read

How would you create a parameterized Svelte tooltip Action?

It tests your grasp of the Svelte Action lifecycle for reactive parameters. Answer: action takes node and parameter, returns update and destroy, bound as use:tooltip={text}. Using component events instead of the Action API, or omitting update, is a red flag.

Vue, Angular & Svelte30 sec read

What is a Svelte Action? Write a simple logging action.

WHAT IT TESTS: Whether you understand a Svelte action as a lifecycle function attached to a DOM node via use: and can write its minimal signature. ANSWER OUTLINE: Define a function receiving the node, log a message, and optionally return destroy.

Vue, Angular & Svelte30 sec read

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

WHAT IT TESTS: Convention-over-configuration tradeoffs. ANSWER OUTLINE: Contrast SvelteKit directory routes with Vue/Angular config routers; filesystem routing removes boilerplate but couples URLs to folders and limits dynamic registration.

Vue, Angular & Svelte30 sec 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.

Vue, Angular & Svelte30 sec 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.

Vue, Angular & Svelte30 sec 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.

Vue, Angular & Svelte30 sec read

How would you cache data between a list and detail view?

WHAT IT TESTS: Splitting server and client state, sharing cache from list to detail. ANSWER OUTLINE: Use nested keys so detail reads from list cache with staleTime to skip refetches.

Vue, Angular & Svelte32 sec read

Implement optimistic UI for a like button with rollback on failure

Tests state management and error recovery in async UIs. A strong answer mutates state instantly, fires the API in parallel, keeps a rollback snapshot, and reverts with a toast on failure. Red flag: waiting for the network or skipping revert logic.

Vue, Angular & Svelte30 sec 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.

Vue, Angular & Svelte30 sec read

How would you build a reusable Svelte validation action?

Tests Svelte action lifecycles versus inline logic. Strong answers describe a node function that attaches input or blur listeners, toggles classes or ARIA directly, returns update and destroy, and cite reusability.

Vue, Angular & Svelte30 sec read

Key differences between Template-Driven and Reactive Forms in Angular

This tests Angular form architecture tradeoffs. Contrast explicit synchronous reactive models with implicit asynchronous template-driven ones; assign reactive to scalable dynamic forms and template-driven to simple inputs.

Vue, Angular & Svelte30 sec read

Shadow DOM vs build-time scoping for third-party widgets

WHAT IT TESTS: Your grasp of style encapsulation tradeoffs in widgets. ANSWER OUTLINE: Shadow DOM gives true isolation but blocks global theming and complicates SSR; build-time scoping keeps theming and SSR simple but needs tooling.

Vue, Angular & Svelte30 sec read

How do _ngcontent and _nghost attributes enforce Angular style isolation?

WHAT IT TESTS: Angular's emulated encapsulation mechanics. ANSWER OUTLINE: unique component ID, _nghost on host, _ngcontent on template nodes, and CSS rewritten with attribute selectors to scope styles.

Vue, Angular & Svelte30 sec read

What is Angular's default style encapsulation mechanism called?

Tests if you know Angular's default view encapsulation. A strong answer names ViewEncapsulation.Emulated, describes the unique attribute selector rewrite, and warns that global styles still pierce inward.

Vue, Angular & Svelte30 sec read

How do Svelte Stores work and how do you create custom ones?

Tests Svelte store contract mastery. A strong answer defines the subscribe/unsubscribe interface, wraps writable() with custom set/update logic, subscribes via $ prefix or manually, and uses $store in templates.

Vue, Angular & Svelte30 sec read

How do you update Svelte arrays and objects to trigger reactivity?

This tests knowledge of Svelte 5 deep reactivity: $state wraps arrays in proxies so push and property mutations trigger updates. Mention $state first, then note legacy syntax needs reassignment. A red flag is claiming push never works in Svelte.

Vue, Angular & Svelte30 sec read

What is ngOnInit's purpose and why prefer it over the constructor?

Tests Angular lifecycle timing and input binding. Strong answer: ngOnInit runs once after inputs are initialized, but the constructor instantiates the class before bindings exist.

Vue, Angular & Svelte30 sec read

What's the difference between Angular property and attribute binding?

Tests whether you know Angular binds to DOM properties by default. [disabled] sets a DOM property; [attr.role] sets an HTML attribute. Use attribute binding when no DOM property exists, such as SVG attributes or role. Red flag: claiming they are equivalent.

Frontend Dev · Tezvyn