Intermediate concepts in Frontend Dev, page 2
Vite Config: The Control Panel for Your Build
Think of vite.config.js as a dynamic script, not a static file. It lets you programmatically change your build based on context, like serving for development versus building for production.
SvelteKit Adapters: Bridge Your App to Production
A SvelteKit adapter is a power plug for your app, making your universal build fit a specific deployment target like Vercel or a Node server. You configure it based on your host, like adapter-static for static sites. The footgun is forgetting one entirely.
Vite's Plugin System: Extending Dev and Build
Vite's plugin system extends its dev server and build process, leveraging Rollup's mature ecosystem. Use it to add framework support or handle custom assets. The footgun is forgetting to control execution order with enforce, causing compatibility issues.
DOM Manipulation: Treating Your Webpage Like a Live Object
The DOM is a live tree of your webpage's HTML. DOM manipulation is how JavaScript changes that tree—adding, removing, or updating elements. This is key for all interactive web development. The footgun: direct, frequent manipulation is slow.
DOM Traversal: Navigating the HTML Tree
DOM traversal is navigating a family tree of HTML nodes. You move between elements using properties like parentNode and nextSibling. This is key for finding elements relative to a known start point.
Custom Hooks: Package Component Logic for Reuse
A custom hook packages stateful logic (like useState and useEffect) into a reusable function. Use one when multiple components need the same logic, like tracking online status for a status bar and a save button. Footgun: Names must start with use.
@font-face: Ship Custom Fonts with Your CSS
@font-face lets you use fonts not installed on a user's machine by telling the browser where to download them. It's how you get custom brand fonts on a website, but be wary of the performance hit from downloading large font files.
Browser Object Model: The Browser's Unruly API
The Browser Object Model (BOM) is the collection of non-standard APIs browsers expose for interacting with the browser window. Unlike the standardized DOM, its implementation is up to each vendor, creating a major cross-browser compatibility footgun.
The useReducer Hook: Predictable State Updates
useReducer is a state machine for your components, managing complex state changes predictably. Use it when state logic is complex or the next state depends on the previous one, like in a shopping cart.
CSS Gradients: Dynamic Images from Code
Think of CSS gradients as dynamic images generated by the browser, creating color transitions without a separate file. Use them for backgrounds and buttons. The default direction is top-to-bottom, but a 0deg angle is counterintuitively bottom-to-top.
Event Bubbling vs. Capturing: The DOM's Two-Way Street
An event fired on a nested element travels in two phases: first down from the root (capturing), then back up (bubbling). This is how all DOM events work, like clicks.
React's useCallback: Cache Functions, Not Just Values
useCallback gives you the same function instance across re-renders, as long as its dependencies are stable. This is key for optimizing child components with React.memo or preventing useEffect from re-running.
CSS box-shadow: Creating Depth and Elevation
box-shadow fakes depth by casting a shadow from an element's frame. It's used to elevate UI like cards and modals or create inner shadows for pressed states. The footgun: omitting the color causes it to inherit the parent's text color, not black.
The JavaScript Event Loop: Asynchronicity on a Single Thread
The event loop is a queue that lets single-threaded JavaScript handle asynchronous tasks without blocking. It processes callbacks from Web APIs like fetch or setTimeout one at a time. The footgun: setTimeout(fn, 0) doesn't run instantly, just next.
useMemo: Cache Expensive Calculations in React
The useMemo hook caches a function's return value, preventing slow calculations from running on every render. Use it to skip heavy data filtering unless its inputs change. The main footgun is a missing dependency, which leads to stale, cached data.
CSS text-shadow: Adding Depth and Legibility to Text
The text-shadow property adds depth to text, like casting a shadow from a light source. Use it for subtle emphasis, letterpress effects, or to make text readable on busy backgrounds. The footgun: not setting a color, as browser defaults vary widely.
Smooth Animations with requestAnimationFrame
Sync your code to the browser's repaint cycle for smooth, efficient animations with requestAnimationFrame. Use it for any visual change over time, like moving an element or running a game loop.
Stacking Multiple Backgrounds in CSS
Think of CSS backgrounds as a stack of transparent sheets where the first image listed is on top. This lets you layer logos over gradients or combine patterns without extra HTML. The footgun: the first image in the code is the frontmost on screen.
Handling Basic DOM Events in Svelte
Svelte handles DOM events with on:eventname syntax in your markup, linking elements to functions in your script. This is for user interactions within a component, not for parent-child communication. The footgun is confusing this with custom component events.
Vue Slots: Projecting Content into Components
Think of a Vue slot as a picture frame: the child component defines the frame, and the parent provides the picture. This is used for reusable layouts or buttons where the structure is fixed but the content is dynamic.
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