Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Angular Universal: Hybrid Rendering for Faster Apps
Angular Universal enables hybrid rendering, letting you choose where each page is built: on the server (SSR), at build time (SSG), or in the browser (CSR). This improves load times and SEO. The footgun is misconfiguring routes, negating performance gains.
SSR Hydration: Bringing Static Pages to Life
Hydration attaches JavaScript interactivity to a static HTML page sent from a server. It's used in Server-Side Rendering (SSR) frameworks to make the initial fast-loading page interactive.
Svelte Transitions: Declarative UI Animation
Svelte transitions are declarative animations for elements entering or leaving the DOM. Use `transition:fade` on a modal or `crossfade` for items moving between lists. The footgun: they only run on mount/unmount, not on general state changes.
Declarative Route Configuration in Vue
Declarative routing maps URL paths to components like a switchboard. You define a list of routes, and the framework renders the correct view when the URL changes. This is standard for SPAs.
Angular Route Resolvers: Fetch Data Before Navigation
An Angular Route Resolver pre-fetches data, ensuring it's ready *before* your component renders. Use it to load critical data for a route, like a user profile, to avoid showing a loading spinner. The footgun: a slow resolver blocks navigation entirely.
NgRx Store: Reactive State Management for Angular
NgRx Store is a centralized database for your Angular app's frontend state, providing a single source of truth. Use it in large apps to manage complex, shared state like user sessions. The main footgun is overusing it for simple, local state.
Angular Template Reference Variables: A #handle for Elements
A template reference variable is a handle to a DOM element or component within your template. Use the `#varName` syntax to grab an input's value or call a child component's method. Its scope is limited to the template where it's defined.
Svelte's `bind:`: Two-Way Data Binding Made Simple
Svelte's `bind:` turns one-way data flow into a two-way street, letting child elements update parent state. It's essential for syncing form inputs without manual event handlers. The footgun: an invalid number input yields `undefined`, not 0.
Svelte's Reactivity: A Compiler, Not a Library
Svelte achieves reactivity at compile time, not runtime. It's a compiler that turns your component files into efficient, imperative JavaScript that updates the DOM directly, skipping the virtual DOM. The footgun: reactivity only triggers on assignment.
Angular NgModules: Organizing Legacy Code
Think of an NgModule as a shipping container for related features, bundling components, directives, and pipes. You'll find them organizing code in older Angular apps.
ISR: Static Speed for Dynamic Content
Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.
Angular: Run Code Only on Browser or Server
Angular Universal runs your app twice: on a server and in a browser. Use `isPlatformBrowser` to run code only where it's safe, like accessing `window` or `document`, to prevent your server-side render from crashing.
Universal Rendering: Server-First, Client-Interactive
Universal Rendering sends a pre-built HTML page from the server for a fast load, then adds interactivity on the client. It's the default in frameworks like Nuxt for better SEO, but the footgun is writing code that crashes on the server by assuming a browser.
Static Site Generation: Pre-built Pages for Speed & Simplicity
Static Site Generation (SSG) pre-builds every page of your site into static HTML files, instead of generating them on-demand. This makes sites incredibly fast and cheap to host on a CDN, perfect for blogs or docs. The footgun: build times grow with site size.
Server-Side Rendering: Your App's First Paint Matters
Server-Side Rendering (SSR) sends a fully-formed HTML page from the server, not a blank one. This speeds up the first paint and helps SEO. The footgun is assuming it's always faster; it increases server load and can delay interactivity.
Vue Single-File Components (SFCs)
Vue's Single-File Components (SFCs) bundle a component's template, logic, and styles into one `.vue` file. A build tool compiles this into browser-readable JS and CSS, turning your template into optimized render functions.
Vue's Virtual DOM: Efficient UI Updates
Vue keeps a JavaScript copy of the UI (the Virtual DOM) in memory. When data changes, it compares a new virtual tree to the old one and efficiently updates only the changed parts of the real DOM, avoiding costly full re-renders.
Svelte Testing Library: Test Components Like a User
Test Svelte components like a user would use them. Svelte Testing Library interacts with the rendered DOM, not internal state, to verify behavior. This avoids brittle tests tied to implementation.
Cypress Component Testing: Test in a Real Browser
Cypress component testing mounts your UI components in a real browser, not a simulated DOM, so you test them exactly as users see them. Use it for faster feedback on individual React, Vue, or Angular components.
Unit Testing Vue Components with Vitest
Think of it as a two-part system: Vue Test Utils mounts your component in a virtual environment, and a runner like Vitest executes the test and reports pass/fail. Use this to verify a component's logic in isolation.
Partial Hydration: Interactive Islands in a Static Sea
Partial hydration makes sites faster by treating interactive UI as "islands" in a sea of static HTML, loading JavaScript only where needed. It's ideal for content-heavy pages. The biggest challenge is managing state between these isolated interactive islands.
List Virtualization: Rendering the Viewport, Not the Dataset
List virtualization renders only the visible slice of a huge dataset, keeping your app fast by maintaining a tiny DOM. Use it for long lists or infinite scroll feeds.
Vue's v-once: Render Once, Then Ignore
Use `v-once` to render a part of your template exactly once. After the initial render, Vue treats it as static content, ignoring future data updates for that element and its children. This is a performance optimization for content that never needs to change.
Vue Render Functions: Trading Templates for JS Power
Render functions trade Vue's declarative templates for the full programmatic power of JavaScript. Use them for highly dynamic components where logic is too complex for templates. The footgun is losing template optimizations and readability for imperative code.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.