🌐 Frontend Dev

In Vue 3, what problem does Teleport solve?

This tests DOM hierarchy and CSS stacking context. A strong answer covers how Teleport moves markup to a target like body to escape ancestor transforms and z-index ceilings trapping fixed modals. Red flag: claiming it is only for cleaner HTML.

What is the click event's type and how to reference the button?

Handler receives a MouseEvent. Use event.currentTarget for the attached button, since event.target may be a nested child.

Primary roles of BrowserRouter, Routes, and Route, and basic route setup

Tests v6 routing hierarchy. BrowserRouter provides history; Routes picks one match; Route maps path to element. Wrap Routes in BrowserRouter with nested Route elements for / and /about. Red flag: omitting the router or confusing Routes with Switch.

Implement fluid typography from 16px to 24px across 400px–1200px in one declaration?

This tests clamp() fluency for viewport-relative type scaling without media queries. A strong answer states clamp(16px, calc(16px + 8 * (100vw - 400px) / 800), 24px) and explains the slope math. A red flag is multiple media queries or calc() without clamp().

How would you create a custom *appDelay structural directive?

This tests Angular rendering internals. A strong answer covers: TemplateRef as the embedded template, ViewContainerRef as insertion anchor, and a setter that creates the embedded view after a delay. Mention OnDestroy cleanup.

Strategies to type querySelector results as HTMLInputElement

Tests whether you know safe ways to narrow querySelector's Element or null to HTMLInputElement. A strong answer compares type assertions with generic querySelector calls, and insists on null checks. Red flag: asserting without runtime validation.

Why use Link over <a> for internal navigation?

This tests client-side routing vs full page reloads. A strong answer covers click interception, History API URL updates, and route prefetching. A red flag is claiming Link is purely stylistic or identical to a plain anchor.

Using CSS Grid, how do repeat, auto-fit, and minmax create responsive columns?

Tests intrinsic sizing and responsive tracks without media queries. A strong answer gives repeat(auto-fit, minmax(250px, 1fr)), noting repeat generates tracks, auto-fit collapses empties, and minmax sets a floor with fractional growth.

Vue 3 ref() vs reactive(): differences and when to use each

Tests Vue 3 Composition API reactivity primitives. Strong answer: ref() wraps any value in a .value wrapper and is the recommended default; reactive() returns a proxy accessed directly. Red flag: saying ref() is only for primitives or omitting .value entirely.

How do you type-safely check an LI click and read data-id?

Tests TypeScript narrowing with DOM event delegation. A strong answer uses closest to walk up from event.target, checks result with instanceof HTMLLIElement, then reads dataset.id. Red flag: casting event.target directly without handling nested child elements.

Implement a protected /dashboard route in React Router

Tests declarative route guards versus imperative redirects in React Router 7. Strong answer: reusable ProtectedRoute wrapper with Navigate replace, auth state above Routes, and role checks.

How do you trigger a CSS transition? Provide two methods.

Set transition on the element, then change a property via :hover or by toggling a class with JavaScript.

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.

Programmatically create and append a div in TypeScript

Tests TypeScript DOM typing and safe element creation. Strong answers name HTMLDivElement and Document, use createElement plus classList.add and textContent, then append. Red flag: innerHTML for text or avoiding specific types.

How do you create a dynamic route like /products/:productId in React Router?

Tests React Router v6 dynamic segments and useParams. A strong answer declares path="products/:productId" on a Route, then extracts productId with useParams in the component. Red flag: using v5 props.match.params or manual URL parsing instead of the hook.

Why is animating transform preferred over top or margin-left?

Grasp of the rendering pipeline and frame rate. A strong answer says transform skips layout and runs on the compositor, while top and margin-left force layout and drop frames.

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.

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.

Compare Pages Router and App Router file-based routing conventions and capabilities

Tests your grasp of the folder-as-route paradigm shift. A strong answer notes that Pages files are routes while app folders are segments requiring page.js, and cites layout.js, loading.js, and error.js as nested primitives.