Concepts in Frontend Dev, page 18
Svelte Preprocessors: Write in Any Language
A Svelte preprocessor is a translator, converting code like TypeScript or SCSS into plain JS and CSS before compilation. This lets you use advanced tooling in .svelte files. The footgun is forgetting to configure it, leading to syntax errors.
sessionStorage: Tab-Specific Browser Memory
sessionStorage is temporary browser memory isolated to a single tab. Use it to save state within a single user workflow, like form data. The footgun: unlike localStorage, this data is *not* shared between tabs, even for the same site.
'use client': The Boundary Between Server and Client
'use client' marks where server-only rendering ends and browser interactivity begins. Use it for components with state (useState), effects (useEffect), or event listeners (onClick), enabling them to run in the browser.
The HTML <template> Element: Inert, Reusable Markup
Think of <template> as a blueprint for HTML. It holds markup that's invisible and inactive until you need it, perfect for creating reusable chunks like list items that you can stamp out with JavaScript.
Angular AOT: Compile Before the Browser
Angular's AOT compiler converts your app into efficient JavaScript during the build process, not in the browser. This means faster rendering and smaller bundles, as the compiler itself isn't shipped.
Storing Objects in Web Storage: The JSON Step
Web Storage only stores strings. To save complex data like objects, you must first serialize them with JSON.stringify(). This is essential for persisting user settings or session info.
Next.js Extends `fetch` for Server-Side Caching
Next.js extends the standard fetch API to control server-side caching and revalidation. In Server Components, pass options like next: { revalidate: 3600 } or tags to manage how data is cached. This extension is server-only and ignored in browsers.
HTML Slots: Making Web Components Customizable
The <slot> element is a placeholder inside a Web Component, letting you inject your own markup. It makes components flexible, like a card with customizable header and body sections. The footgun: content without a slot attribute goes to the default slot.
Vue's v-once: Render Once, Then Ignore
Use v-once to render a part of your template exactly once. After the initial render, Vue treats it as static content, ignoring future data updates for that element and its children. This is a performance optimization for content that never needs to change.
HTTP Cookies: State for a Stateless Web
Think of a cookie as a server's nametag for your browser. Since HTTP is stateless, this nametag helps the server remember you across requests for logins, shopping carts, or personalization. The main footgun is security: always use security flags.
CustomEvent: Sending Custom Data with Events
CustomEvent lets components communicate without direct coupling by firing custom-named events. It's like a private broadcast system for your app. Use it for a child component to signal a parent, passing data in the detail property. Don't forget detail!
Vue Async Components: Defer Loading Until Needed
Vue async components defer loading a component's code until it's rendered, speeding up initial app loads. Use them for heavy components not needed right away, like modals or admin panels. The footgun is a blank UI if you don't handle loading/error states.
IndexedDB: A NoSQL Database in Your Browser
Think of IndexedDB as a NoSQL database in the browser, built for large structured data that localStorage can't handle. It's ideal for offline apps or caching large assets. The footgun: browsers can evict your data, so it's not permanent storage.
generateStaticParams: Pre-building Dynamic Pages in Next.js
Think of generateStaticParams as a build-time guest list for your dynamic routes. It tells Next.js all possible parameters (like post slugs) upfront to pre-render static pages. The footgun: it only provides params, not the page data itself.
Shadow DOM: A Private Bubble for Your Components
Shadow DOM gives a component a private bubble, keeping its styles and structure isolated from the main page. This is key for building reusable Web Components and microfrontends.
Angular's OnPush: Faster Apps by Doing Less
OnPush tells Angular to only re-render a component when its inputs change or its own events fire, not on every global event. It's a key performance boost for large apps, but mutating an input object directly won't trigger a re-render, causing a stale UI.
IndexedDB Object Stores: Your Browser's NoSQL Table
An IndexedDB Object Store is like a NoSQL table in your browser, holding JavaScript objects by key. Use it for offline data like to-do lists or cached API responses. The main footgun: you can only create stores during a database version upgrade.
List Virtualization: Rendering the Viewport, Not the Dataset
List virtualization renders only the visible slice of a huge dataset, keeping your app fast by maintaining a tiny DOM. Use it for long lists or infinite scroll feeds.
IndexedDB Transactions: The Gatekeepers of Data
An IndexedDB transaction is a short-lived container for all database operations, ensuring data integrity. Use it for any read or write. The main footgun: transactions auto-commit if idle, so you must queue all requests synchronously without waiting.
Dynamic Functions in Next.js
Using functions like cookies() or headers() forces a Next.js page to be rendered dynamically for each request. This is key for personalized content or pages depending on search params.
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