Concepts in Frontend Dev, page 26
React Hydration: Bringing Server HTML to Life
Hydration turns static, server-rendered HTML into a fully interactive React app. It's the core of Server-Side Rendering (SSR), where the client "wakes up" the initial HTML by attaching event listeners.
View Transitions API: Animate Between DOM States
The View Transitions API lets the browser handle complex animations between page states. It simplifies transitions in Single-Page Apps and, for the first time, enables them for Multi-Page Apps. The main footgun is forgetting it's a progressive enhancement.
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.
TypeScript: Type-Only Imports and Exports
Use import type to tell the compiler an import is only for type-checking and should be erased from the final JavaScript. This prevents tools like Babel from generating unwanted runtime code when compiling files in isolation.
React's SyntheticEvent: One Wrapper for All Browsers
React's SyntheticEvent is a browser-agnostic wrapper around native events, ensuring your onClick handlers behave identically everywhere. The main footgun: event objects are pooled for performance, so you can't access their properties in an async callback.
CSS Anchor Positioning: Beyond the Containing Block
CSS Anchor Positioning lets you tether an element to any other element, not just its parent. Use it for popovers or tooltips that automatically reposition to stay in view. The footgun is forgetting to explicitly name your anchor with anchor-name.
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.
Triple-Slash Directives: Compiler Hints in Comments
Triple-slash directives are compiler instructions inside comments, telling TypeScript about file dependencies. They're mostly seen in older projects or for global types, as modern import statements are preferred.
React Error Boundaries: Containing UI Crashes
An Error Boundary is like a try...catch block for React components, preventing a single UI crash from breaking your whole app. Use it to wrap components that might fail, showing a fallback UI instead of a white screen.
CSS Houdini: Extending the CSS Engine
CSS Houdini gives developers low-level access to the browser's rendering engine, letting you write your own CSS features. Use it to polyfill new CSS or define type-safe custom properties with @property, preventing invalid values from being silently ignored.
<ng-container>: Group Elements Without a DOM Footprint
<ng-container> is an Angular grouping element that doesn't render to the DOM. Use it to apply a structural directive like *ngIf to multiple elements without adding an extra <div> that could break your layout.
Module Augmentation: Adding Types to External Libraries
Module augmentation is like monkey-patching for types, letting you add definitions to external modules. Use it to add a user property to Express's Request object.
React's Concurrent Rendering: Interruptible UI Updates
Concurrent Rendering lets React pause and resume rendering, so a large update won't freeze the UI. It's like a chef pausing a big task to handle a quick order, ensuring the app stays responsive. This is key for features like Suspense.
CSS Combinators: Targeting by Relationship
CSS combinators target elements by their DOM relationship, not just class or ID. They let you select an element inside another (div p) or right next to one (h2 + p). This is key for styling nested menus or spacing adjacent items.
Angular's ng-template: Reusable UI Blueprints
ng-template defines a reusable UI blueprint that isn't rendered by default. Use it with ngTemplateOutlet to create configurable components, like passing a custom item layout to a generic list.
React Render Bailouts: Skipping Unnecessary Work
React's Performance Hooks let you 'bail out' of unnecessary re-renders by caching results. React reuses the cached output unless specific dependencies change, saving computation on expensive components.
Mobile-First Design: Start Small, Then Scale Up
Mobile-first design means building for the smallest screen first, then enhancing for larger ones. This ensures a solid baseline experience on phones, where most users are. The footgun is thinking it's just CSS, not a content-first strategy.
export = : TypeScript's CommonJS Export Syntax
Think of export = as TypeScript's version of module.exports. It replaces a module's entire export with a single value, like a class or function. It's used for compatibility with CommonJS modules. The footgun is mixing it with standard exports.
React Fiber: Making UI Rendering Interruptible
React Fiber treats rendering like a cooperative scheduler. It breaks UI updates into small, pausable chunks, preventing long, blocking tasks. This lets high-priority work like user input interrupt heavy rendering, keeping animations and gestures smooth.
PostCSS Preset Env: Write Future CSS Today
postcss-preset-env is like Babel for CSS, transpiling modern syntax into code older browsers understand. Use it to write features like nesting or color-mix() today. The footgun: it only polyfills Stage 2+ features by default; you must opt-in for more.
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