Intermediate concepts in Frontend Dev, page 14
Semantic vs. Primitive Design Tokens
Semantic tokens give meaning to raw values so components bind to intent, not hex codes. They let you rebrand or theme by changing aliases, not component code.
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.
Memoizing Selectors: Avoid Needless Re-renders
Memoized selectors prevent needless re-renders by caching derived data. A selector for a filtered list will only re-run its logic if the original list or filter criteria change, not on every state update.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
Angular Schematics: Blueprint Robots with Rollback
Angular Schematics draft changes on a virtual file tree before touching disk. Use them to generate components, enforce standards, or run automated migrations. Never write directly to disk inside a schematic or you break atomic rollback.
Zustand's `create`: A Factory for Global State Hooks
Zustand's create function is a factory for your global state. You define your state and actions, and it returns a custom hook to access them anywhere in your app, avoiding prop drilling. The footgun: set shallow-merges state by default.
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Svelte Logic Blocks: Template Control Flow
Svelte logic blocks are compiler directives disguised as HTML comments that branch, loop, and await inside templates. You write {#if}, {#each}, and {#await} directly in markup.
Svelte Keyed each: Identity, Not Index
Svelte keyed each blocks track list items by identity, not index. Without a key, reordering or filtering leaves component state attached to the wrong DOM position. Using the array index as the key silently defeats the purpose and preserves the bug.
React Reconciliation: The Virtual DOM Diff
React diffs a lightweight in-memory tree against the next render to apply only surgical changes to the real DOM. It fires on every state or prop change. Missing keys in lists force React to rebuild more nodes than needed, destroying performance.
Tiered Token Architecture in CSS
Tiered tokens layer CSS variables as raw values, semantic aliases, and component bindings. Use them when one rebrand must update hundreds of elements. The footgun is skipping aliases and binding hex codes directly to components, locking you into manual…
Observable: Angular's Push-Based Data Stream
An Observable is a lazy push collection that emits values over time. Angular uses it for HTTP and events, letting components react instead of polling. Forgetting to unsubscribe leaks memory and keeps destroyed components alive.
Rules of Hooks: Call Order Is Sacred
Hook calls must keep the same order every render because React maps them to state by array index. Only call hooks at the top level of React functions. Break the order and React desyncs, producing stale state or crashes.
Auto-Generated Changelogs for Design Systems
Automated changelog generation turns structured commits into release notes without hand editing. It rescues teams when design systems ship frequent token or component updates. The footgun is that sloppy commits produce useless logs so discipline beats tooling.
Apollo Client: GraphQL as Reactive State
Apollo Client turns your GraphQL API into reactive state that components read like a local cache. It shines when multiple views share overlapping data, but teams often footgun by sending one massive query instead of letting the cache normalize fragments.
Server vs. Client Components in Next.js
Next.js forces a render boundary. Server Components generate HTML without sending JavaScript, while Client Components ship JS for interactivity. The footgun is importing a heavy library into a Server Component via a child, bloating the client bundle.
Cross-Browser Testing Automation
Rendering engines disagree, so your CSS may break in Safari while Chrome looks fine. Automation runs your UI across real browsers in CI to catch visual drift early. The footgun is testing every pixel, which breeds brittle suites that teams eventually ignore.
Testing SvelteKit load Functions
A SvelteKit load function consumes a request event and returns page data. Unit test it by mocking the event object in Vitest, not by mounting the page. Never test it through component rendering, because load runs before the component initializes.
BEM: Self-Documenting CSS Class Names
BEM turns classes into a mini filesystem: Block__Element--Modifier. It prevents CSS collisions in large React codebases where many teams share a global stylesheet. The footgun is turning every nested tag into an element and creating comically long names.
Private NPM Registry for Internal Packages
A private registry hosts packages so teams npm install internal design systems like public dependencies. It matters when you split a monolith into shared libraries. The footgun is skipping scoped names and auth, which risks leaking code to the public registry.
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