Advanced concepts in Frontend Dev, page 3
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.
Media Queries: CSS That Adapts to the User's Device
Instead of one-size-fits-all CSS, media queries let your styles react to the user's device. They are used to change layouts for different screen widths, orientations, or display resolutions. The footgun is only testing for width, ignoring other factors.
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.
Intrinsic Web Design: Components That Style Themselves
Intrinsic Web Design lets components style themselves based on their container, not the whole page. Instead of just viewport media queries, use container queries to make a component adapt to a wide content area or a narrow sidebar, making it truly reusable.
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.
Typed Custom Events: Making Browser Events Type-Safe
CustomEvent lets you fire your own browser events, but its payload is any. Typing them means defining a specific shape for the event's detail property, turning a generic signal into a predictable, self-documenting API for your components.
useFormState (now useActionState): State for Actions
useActionState (formerly useFormState) lets you update state from an async Action. It returns the action's result, a dispatch function, and a pending status. Use it to manage form UI for loading states and validation messages from Server Actions.
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.
currentTarget vs. target: Who's Listening vs. Who Shouted
event.currentTarget is the element listening for an event, while event.target is the element that triggered it. This is vital for event delegation patterns. Be careful: currentTarget is only valid inside the handler and becomes null afterward.
React's useFormStatus: Read Form State from a Child Component
The useFormStatus hook lets a child component read its parent form's submission status without prop drilling. Use it to disable a submit button or show a loading spinner from within a reusable component.
React Refs: An Escape Hatch for DOM Manipulation
A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.
CSS `will-change`: A Performance Hint, Not a Magic Wand
will-change tells the browser which properties you'll animate, letting it optimize rendering ahead of time. Use it to fix jank in complex transitions, but never apply it preemptively—overuse wastes memory and can make performance worse.
Hardware Acceleration: Getting Smooth CSS Animations
Use the GPU for smooth CSS animations by sticking to transform and opacity. This avoids costly CPU work like layout recalculations, keeping frame rates high. The footgun is animating properties like width or left, which cause jank.
CSS transform-style: Let Children Live in 3D Space
The transform-style property decides if an element's children are flattened onto its 2D plane or share a 3D space. Use preserve-3d to create nested 3D objects. Beware: properties like opacity < 1 or overflow will break the 3D context and flatten it.
CSS Motion Path: Animate on a Curve
Think of offset-path as drawing a track for an element to follow. Use it for non-linear UI animations, like an icon following a curve. The footgun: the path itself doesn't cause motion; you must also animate offset-distance to move the element.
Scroll-driven Animations: Animate on Scroll, Not Time
Scroll-driven animations link an animation's progress to a scrollbar's position, not a clock. This is great for progress bars that fill as you scroll or elements that fade in as they enter the viewport. The main pitfall is confusing timeline types.
Promise Cleanup with .finally()
Promise.finally() is the try...catch...finally for async code, guaranteeing logic runs after a promise settles. Use it to hide a loading spinner or close a network connection without duplicating code in .then() and .catch().
Measure Component Render Costs with <Profiler>
React's <Profiler> is a stopwatch for your components, measuring render times programmatically. Wrap any UI tree to log detailed performance metrics on every update, helping you pinpoint slow renders. The footgun: It's disabled in production by default.
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.
ISR: Static Speed with Dynamic Freshness
ISR offers the speed of a static site with the freshness of a server-rendered one. It serves a cached page, then regenerates it in the background after a set time, making it ideal for blogs or e-commerce sites.
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