Everything in Frontend Dev, page 31
BEM: Scoped CSS Naming by Convention
BEM is a naming convention that scopes CSS classes like postal addresses, preventing specificity wars in component systems. It shines in large codebases with many developers. The footgun is deep element nesting, which bloats markup into unreadable strings.
CSS :has(): Query Parents and Previous Siblings
CSS :has() styles an element based on its children or later siblings, like highlighting a section with a featured card. Previously this required JavaScript. If unsupported, the whole selector block fails, so wrap it in :is() or use progressive enhancement.
Design System Dependency Update Automation
Automating dependency updates pushes design system releases to apps without manual pull requests. It matters when token changes must reach dozens of repositories at once. The footgun is automating bumps without visual regression, which silently breaks UI.
CSS-in-JS: Scoped Styles via JavaScript
CSS-in-JS lets components own their styles in JavaScript, generating CSS and injecting it into the DOM at runtime. It prevents global namespace collisions in component frameworks. The footgun is runtime overhead and bigger bundles.
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.
Nuxt Server Routes: Your Backend in a Folder
Nuxt Server Routes let you build a backend inside your frontend project. Create API endpoints by adding files to the server/api directory, which automatically get an /api prefix. The common footgun is forgetting this prefix difference with server/routes.
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.
Testing NgRx Effects: Isolate and Verify Side Effects
Test NgRx Effects by treating them as pipelines that transform action streams. Provide a source action and mock dependencies to verify the effect dispatches the correct success or failure action.
Angular Lazy Loading: Ship Less Code Upfront
Think of your app as an encyclopedia. Lazy loading only fetches the volume (feature module) you need, when you need it, instead of loading the whole set upfront. Use it for distinct sections like dashboards.
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.
Lazy Loading Routes: Faster Initial Loads
Lazy loading routes splits your app into smaller chunks, loading code only when a user visits a specific page. This drastically cuts initial load times for large SPAs. Just be sure not to use Vue's async components directly as route components.
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.
NgRx Selectors: Memoized Queries for Your State
NgRx selectors are smart, cached queries for your app's state. They use memoization to avoid re-computing derived data if the underlying state hasn't changed. This prevents needless re-renders.
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 Effects
NgRx Effects handle side effects, like API calls, outside of reducers and components by listening to the stream of dispatched actions and, when a matching action appears, running async work and dispatching a new action with the result.
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's `async` Pipe: Manage Observables in Templates
Angular's async pipe is a self-managing subscription for your templates. It unwraps values from Observables or Promises directly in your HTML, triggering updates on new emissions. It automatically unsubscribes, preventing the common footgun of memory leaks.
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.
<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.
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.
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