Intermediate concepts in Frontend Dev, page 5
Typing NodeList vs. HTMLCollection in TypeScript
NodeList can contain any node (elements, text, comments), while HTMLCollection only holds elements. TypeScript forces you to handle this. Use querySelectorAll for a NodeList, or getElementsByTagName for an HTMLCollection.
Handling File Uploads in React
Treat a file input like a remote control for the browser's file picker. React can't hold the file data directly in state, but it can grab a reference to the selected file and send it to a server using a FormData object.
CSS Keyframe Animations: Multi-Step Motion Control
Think of CSS keyframes as a flipbook for your UI. You define styles at specific moments, and the browser animates between them. It's for multi-stage sequences, like loading spinners, where simple transitions fall short.
The FormData API: From HTML Forms to Typed Objects
FormData serializes an HTML form into key/value pairs for fetch. In TypeScript, its main footgun is that get() returns a generic string | File | null, requiring you to validate and cast the data before using it safely.
Debouncing vs. Throttling in React
Debouncing waits for a pause in events before acting; throttling fires at a steady rate. Use debounce for search bars to avoid API calls on every keystroke, and throttle for scroll handlers to prevent lag.
CSS Cubic-Bezier: The Art of Animation Pacing
A cubic-bezier function defines an animation's speed curve, controlling its acceleration and deceleration. It's used in CSS to make UI motion feel natural. The footgun is mistaking presets: ease accelerates more sharply than the symmetrical ease-in-out.
animation-fill-mode: Hold Styles Before and After Animation
The animation-fill-mode property prevents the jarring "snap" back to an element's original state after a CSS animation. Use forwards to hold the final state or backwards to apply the start state during a delay.
CSS 3D Transforms: Adding Depth to the DOM
CSS 3D transforms treat flat elements like objects in a 3D space, adding depth with properties like rotateY and translateZ. Use them for card-flip animations or product carousels. The footgun: forgetting to set perspective on a parent makes 3D look flat.
CSS `perspective`: Creating 3D Depth
The CSS perspective property sets a 'camera' distance for 3D-transformed children, creating a sense of depth. Use it on a container to make elements appear to recede into the screen. The main footgun: a smaller value creates a *more* dramatic effect.
The Promise Constructor: Wrapping Old Callbacks
The Promise constructor turns old callback-style functions into modern promises you can await. Use it to "promisify" APIs like setTimeout that don't return promises. The footgun is wrapping already-promise-based code, creating unnecessary complexity.
TypeScript Generics: Writing Functions That Adapt to Types
TypeScript generics create functions with type placeholders, capturing an input's type to inform the output's. This is vital for reusable components that work on various data types.
React DevTools Profiler: Find Performance Bottlenecks
The React Profiler records how long components take to render, helping you find performance bottlenecks. Use it to diagnose slow interactions and see which components re-render too often.
List Virtualization: Render the Window, Not the World
Virtualization renders only the visible "window" of a long list, not the entire dataset. It's essential for performance in feeds or tables with thousands of rows.
Angular's Reactive Form Classes: FormControl, FormGroup, FormArray
Reactive forms build a data model in your code, not the template. Use FormControl for one input, FormGroup for a set of fields like a login form, and FormArray for dynamic lists. The main footgun is forgetting to import ReactiveFormsModule.
Typing `fetch` Responses in TypeScript
The fetch promise resolves to a generic Response, not your typed data. You must first parse the body with .json(), then assert the type of the resulting data. This is essential for all API calls.
Bundle Analysis: An X-Ray for Your App's Weight
Bundle analysis is an X-ray for your compiled JavaScript, showing which libraries contribute to your app's final size. Use it to diagnose slow loads by finding large or duplicated dependencies. The footgun: focus on gzipped size, not raw size.
Next.js SSG: Pre-render Pages for Maximum Speed
Next.js's Static Site Generation (SSG) pre-renders pages into static HTML at build time, serving them instantly from a CDN. It's ideal for content that rarely changes, like blog posts, ensuring top performance. The main pitfall is serving stale data.
SvelteKit Form Actions: Server-Side Logic for Forms
SvelteKit Form Actions link HTML forms directly to server-side code, handling submissions without client-side boilerplate. They're perfect for logins or registrations and work without JavaScript.
Tree Shaking: Shipping Only the Code You Use
Tree shaking is a build step that eliminates unused code from your final bundle. Bundlers like webpack use it to shrink JavaScript files by removing functions you import but never call.
SMACSS: A Naming Convention for CSS Scalability
SMACSS organizes CSS into five categories to prevent spaghetti code. It's a naming convention and thought process, not a library you install. It's used in large codebases where teams need a shared vocabulary for styling 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