Concepts in Frontend Dev, page 19
CSS :host: Style a Web Component from Within
The :host pseudo-class lets a web component style itself from the inside out. Use it inside a shadow DOM to apply styles to the host custom element, making components self-contained. The key footgun: it only works inside a shadow DOM; it has no effect in.
JavaScript Bundle Analysis: Seeing Your App's Weight
Think of it as an X-ray for your compiled JavaScript, showing which libraries take up the most space. Use it to diagnose slow load times by finding large or duplicated dependencies.
Choosing the Right Client-Side Storage
Client-side storage turns the browser into a mini-database for faster loads and offline access. It's used for remembering user preferences or caching assets.
::slotted(): Style Content Passed into Web Components
The ::slotted() pseudo-element lets a Web Component style external content passed into its slots. It's how a component's internal CSS can style the "light DOM" elements it receives.
IndexedDB Indexes: Fast Queries in the Browser
An IndexedDB index is like a book's index, letting you quickly find records by a specific property without scanning the entire dataset. It's essential for fast queries on non-primary keys, like looking up a user by email.
CSS ::part(): Style Inside a Web Component's Shadow DOM
The ::part() pseudo-element lets you style specific elements inside a web component's Shadow DOM. It's a contract allowing consumers to theme designated "parts" of a component without breaking encapsulation. The main footgun: it only styles one level deep.
Angular's ChangeDetectorRef: Manually Triggering Updates
Angular's ChangeDetectorRef is your manual override for change detection. Use it when updates from outside Angular's zone (like third-party libraries) don't refresh the UI. The footgun is overuse, which can mask performance issues or cause lifecycle errors.
IndexedDB Cursors: Iterate Large Datasets Efficiently
An IndexedDB cursor is a pointer for walking through records one by one, avoiding loading a whole dataset into memory. Use it to efficiently process large browser databases.
Next.js Route Segment Config
Think of Next.js Route Segment Config as per-route dials for runtime, caching, and timeouts. Use it to run a specific API route on the Edge for speed or increase the timeout for a data-heavy page. The footgun: settings don't cascade to child routes.
Storybook: A Workshop for UI Components
Storybook is a workshop for UI components, letting you build and test them in isolation without running your entire app. It's used to develop component libraries, document design systems, and test hard-to-reach states.
Svelte's Legacy immutable={true} Optimization
The immutable={true} option was a contract with the Svelte 3/4 compiler: you promise to never mutate data, and it uses fast referential checks for updates. It was a performance boost for immutable patterns.
IndexedDB Versioning: The 'upgradeneeded' Gatekeeper
IndexedDB uses a version number to manage schema changes. Incrementing the version in indexedDB.open() triggers a special upgradeneeded event, which is the only context where you can create or modify object stores and indexes.
Partial Prerendering (PPR): Static Speed for Dynamic Pages
Partial Prerendering serves a static page shell instantly, then streams in dynamic parts. It's like getting a pre-built house frame immediately, with custom rooms delivered and slotted in as they're finished.
Form-Associated Custom Elements: Your Own Inputs
Make your custom elements behave like native inputs within a <form>. This lets them carry a value, be validated, and submit with the form. Use it for custom widgets like tag inputs. The footgun: its state won't submit if you don't call setFormValue().
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.
Cache API: Manual Control Over Network Responses
The Cache API is a key-value store for network requests you control directly, unlike the browser's automatic HTTP cache. Use it in service workers for offline support or to pre-cache app assets.
Constructable Stylesheets: Share Styles, Not Bloat
Create and share CSS in JavaScript without duplication. Constructable Stylesheets are ideal for theming multiple Shadow DOM components from a single source; updates to the sheet propagate to all consumers. A key footgun: @import rules are ignored.
Angular Unit Testing: Jasmine & Karma
Jasmine is your testing script (expect(a).toBe(b)), while Karma is the stage that runs it in a browser. This is Angular's default stack for unit testing components and services to ensure they work in isolation.
Manipulate Browser History with pushState and replaceState
Make a single-page app feel like a multi-page site. pushState changes the URL without a full page reload, creating a new browser history entry. This is essential for SPAs to enable shareable links and a working back button.
Next.js Route Handlers: One File, Multiple Methods
Think of a Next.js Route Handler file as a dedicated API endpoint. You handle different HTTP requests by exporting functions named GET, POST, DELETE, etc. Use them to build API routes for form submissions or to fetch data for client-side components.
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