Advanced everything in Frontend Dev, page 10
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.
Headless Components: Separate Logic from UI
A Headless Component separates a component's logic from its UI, providing the 'brain' without the 'looks'. Use it for complex elements like dropdowns that need consistent behavior but different visual styles. The footgun is assuming it's a drop-in UI.
Vue Router: Controlling Scroll Behavior
In a SPA, the browser doesn't manage scroll position; scrollBehavior is your manual override. Use it to scroll to top on new pages or restore position on back/forward. The footgun is forgetting savedPosition, breaking native back-button behavior.
Router History vs. Hash Mode: URL Style and Server Setup
Router history mode determines your SPA's URL style. History mode uses clean URLs (/users) but needs server setup, while hash mode uses a hash symbol (/#/users) and works out-of-the-box.
Vue Route Animations: Animating Page Changes
Animate between pages by wrapping your router view in a <transition> component, giving your SPA the feel of a native app. This is used for sliding or fading effects during navigation.
SSR Hydration: Don't Re-render, Reuse
Hydration tells your client-side app to reuse the HTML sent by the server instead of wastefully re-rendering it. This prevents UI flicker in Server-Side Rendered apps and improves load performance.
XState: Predictable UI State with State Machines
XState treats UI logic as a formal state machine, making impossible states impossible. It's ideal for complex components like multi-step forms or data fetching UIs. The footgun is overusing it for simple boolean toggles, which adds needless boilerplate.
Optimistic UI: Assume Success for a Faster Feel
An optimistic UI assumes an action will succeed, updating the interface instantly instead of waiting for the server. This makes actions like liking a post or adding to a cart feel instant. The footgun is failing to revert the UI when the server reports an.
Zod: TypeScript-First Schema Validation
Zod creates a single source of truth for your data's shape, providing both runtime validation and static TypeScript type inference from one definition. Use it to parse API inputs or form data, ensuring data is correct and typed.
Angular Custom Validators: Beyond Built-in Rules
Custom validators let you define your own business logic for form inputs. Use them to check for unique usernames via an API or enforce complex password rules. The main footgun is forgetting async validators must return an Observable or Promise.
Shadow DOM: Encapsulating Styles and Structure
Shadow DOM walls off a component's HTML and CSS from the rest of the page. Like a browser's <video> player, its internal controls are isolated, preventing your site's CSS from breaking them.
Svelte Derived Stores: Reactive Values from Other Stores
A Svelte derived store is like a spreadsheet formula for your state. It listens to other stores and automatically computes a new value whenever they change. The footgun is trying to write to it—it's read-only; you must update its sources instead.
Pinia: Vue State Management That Feels Like Components
Pinia makes global Vue state feel like a component's local data. Create small, independent, type-safe stores for sharing data like user sessions or settings, avoiding complex prop drilling.
Vue Watchers: Running Code on State Changes
Vue watchers are tripwires for your data. When a specific piece of state changes, a watcher executes code, like fetching data from an API. Use them for side effects, not for deriving new values. The footgun is using a watcher where a computed property would.
Svelte's `{@html}` and `{@debug}`: When to Use Them
Svelte's {@html} and {@debug} offer powerful but risky escapes. {@html} renders raw HTML strings, while {@debug} acts like a debugger statement in your markup. Use them for trusted content and dev-time inspection.
Vue Dynamic Components: Swap Components on the Fly
Use Vue's <component :is="..."> element to render different components based on a state variable, like swapping views in a tabbed interface. The footgun: components are destroyed on switch; use <KeepAlive> to preserve their state and avoid losing user…
Angular: Dynamic Component Loading
Programmatically create and render components anywhere in your app, not just where you've hardcoded them. Use it for dynamic dashboards or modal dialogs. The footgun is forgetting to manually destroy components, which leads to memory leaks.
Angular View Encapsulation: Walling Off Your Component Styles
View Encapsulation walls off a component's CSS to prevent styles from leaking in or out. By default, Angular emulates a Shadow DOM to scope styles, but you can change this. The footgun is using None to fix a style, creating global CSS conflicts.
Svelte Slot Props: Child Informs, Parent Renders
Svelte slot props let a child component pass data up to its parent's slot. This is key for reusable list components where the child provides data for each item, but the parent controls the rendering. The footgun: the let: directive goes on the component tag.
Vite's Dependency Pre-Bundling
Vite's dev server pre-bundles dependencies to accelerate local development. It converts CommonJS modules to browser-native ESM and merges packages with many files into one, preventing massive HTTP request chains.
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