More in Frontend Dev — page 11
Validate matching Vue passwords: computed property or watcher?
WHAT IT TESTS: Whether you derive state or watch imperatively. ANSWER OUTLINE: Use a computed boolean for caching and dependency tracking; reserve watchers for side effects only. RED FLAG: Using a watcher to sync a match flag, wasting cycles and causing bugs.
Bind an input to a variable and validate with reactivity
Tests Svelte reactivity: connecting DOM state to validation logic. Good answer: `$state` for the variable, `$effect` to run validation when it changes, cleanup if needed. Red flag: using effects where event handlers suffice or creating infinite loops.
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.
How does Vue v-model work syntactically under the hood?
Tests if you know v-model is syntax sugar over prop and event pairs. Strong answers map text to :value/@input, checkboxes to :checked/@change, selects to value/@change, and note JS state wins. Red flag: calling it magic or true two-way binding.
How do you bypass Svelte's scoped styles to target global elements?
Tests Svelte style encapsulation escape hatches. Strong answer: :global() syntax for elements and classes, plus risks like leaky side effects and specificity wars. Red flag: external stylesheets or inline styles as the primary solution.
How does Vue's v-bind() CSS function work in style blocks?
Tests Vue SFC CSS transforms and browser primitives. Strong answer: Vue compiles v-bind() to scoped CSS custom properties, letting reactive values work with pseudo-selectors and media queries.
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.
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.
How do CSS Modules differ from Vue scoped CSS?
This question tests build-time versus compiler style isolation. CSS Modules export a hashed class mapping object; Vue scoped CSS adds unique data-attributes. You bind templates via $style.myClass or an imported object. Red flag: claiming both use attributes.
What deep selector pierces Vue scoped styles, and why use it cautiously?
This tests Vue scoped CSS encapsulation. Use :deep() to target child internals from a scoped block, but it breaks encapsulation and creates brittle coupling. A red flag is recommending deprecated /deep/ or unscoped global styles.
Compare Angular's three ViewEncapsulation modes and give a use case.
This tests style isolation tradeoffs. Emulated scopes CSS with unique attributes, ShadowDom uses native shadow roots, and None disables scoping. Switch to ShadowDom for strict boundaries or None for global themes.
How does Svelte scope component styles during compilation?
WHAT IT TESTS: Knowledge of Svelte's compile-time CSS encapsulation. ANSWER OUTLINE: The compiler adds a unique attribute to component elements and rewrites selectors to target it, isolating styles. RED FLAG: Claiming scoping uses runtime JS or shadow DOM.
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.
What attribute scopes styles to a Vue component?
This tests knowledge of Vue's style encapsulation. Add the scoped attribute to the style tag; Vue adds a unique data attribute to elements and selectors. A red flag is suggesting manual BEM or claiming scoped styles never affect child components.
Implement auto-cleanup reactive logic in Vue's Composition API and Svelte
WHAT IT TESTS: Binding streams to lifecycles without leaks. ANSWER OUTLINE: Vue pairs onMounted with onUnmounted or watchEffect cleanup; Svelte uses $store auto-subscription or onDestroy.
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.
Fundamental difference between Vue computed and watcher with examples
Tests derived state vs side effects in Vue reactivity. Computed returns cached derived value; watch executes callback on mutation. Example: computed filters list; watch fetches data when ID changes. Red flag: watch for template state or computed for async.
Explain Angular default change detection, zone.js, and OnPush
Deep knowledge of Angular's automatic vs explicit change detection. Explain zone.js monkey-patching async APIs to trigger default checks; contrast with OnPush requiring immutable inputs, async pipe, or markForCheck.
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.
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.