Intermediate concepts in Frontend Dev
Vue Single-File Components (SFCs)
Vue Single-File Components (.vue files) colocate a component's template, logic, and styling into one modular unit. This is the standard for building Vue SPAs and static sites, enabling scoped CSS and pre-compiled templates. Remember, SFCs require a build step.
TypeScript Type Inference: How It Knows Without Being Told
TypeScript's type inference deduces types so you don't have to annotate everything. It infers types from variable initializations and function returns. The main footgun is its 'best common type' for arrays, which can create an overly specific union type.
useState: Giving Components Memory
useState gives a component its own memory, letting it track information that changes over time. It's used for everything from handling form input to toggling UI. The biggest footgun: state updates are asynchronous and only apply on the next render.
Angular's Hierarchical Dependency Injection
Angular's DI is a tree of injectors mirroring your components. When a component needs a service, Angular walks up the tree to find the first provider. Use it to scope services to UI branches, but beware: providing at a component level creates a new instance.
Union Types: When a Value Can Be One of Several Things
A Union Type is an 'OR' for your types, letting a value be one of several options, like string | number. Use it for flexible function arguments or varied API responses. The footgun: you can only use properties common to all types until you narrow.
React Events: Pass, Don't Call
React handles user actions with event handler functions passed as props, like onClick={handleClick}. This is how you make buttons or forms interactive. The key mistake is calling the function (onClick={doIt()}), which runs on render, not on click.
CSS 'display': How Elements Occupy Space
The CSS display property defines an element's layout role: does it demand its own line (block) or share space (inline)? It's essential for everything from text flow to complex layouts with flex and grid.
Why Svelte Skips the Virtual DOM
Svelte skips the Virtual DOM, treating it as runtime overhead. It acts as a compiler, generating precise JavaScript to update the DOM directly. This avoids the 'diffing' step of frameworks like React, leading to smaller bundles and faster updates.
Conditional Rendering: Show UI Based on State
React uses plain JavaScript to decide what UI to show, which is essential for displaying loading states, errors, or user-specific content. The footgun: count && <Component /> will render a "0" if count is 0, not nothing.
CSS box-sizing: Predictable Element Sizing
The box-sizing property controls if padding and borders are added outside an element's width or carved out from inside. Using border-box makes layouts predictable, ensuring a width: 100px box is exactly 100px wide.
Lists and Keys in React
React turns arrays into UI with map, yet each child needs a unique key prop or you get console warnings. Filter first, then map. The footgun: forgetting keys or failing to include stable unique IDs in your source data.
Vue: Options API vs. Composition API
Options API organizes Vue components by property type (data, methods). Composition API organizes them by logical feature. Use Composition API for complex components with tangled logic or for creating reusable 'composable' functions.
TypeScript Interfaces: Naming the Shape of Your Data
An interface is a contract for an object's shape, caring what properties it has, not its class. Use it to define function parameters or API responses. The footgun: TypeScript allows objects with extra properties, checking only for the required ones.
CSS Pseudo-classes: Style Elements Based on State
CSS pseudo-classes style elements based on their state, not just their HTML structure. Use them for interactive states like :hover, form validation like :invalid, or structural position like :first-child.
TypeScript Function Types: Expressions vs. Signatures
TypeScript describes function shapes with type expressions or call signatures. Use a simple expression like (s: string) => void for callbacks. For functions with properties, use a call signature. The footgun: parameter names are required in type expressions.
useEffect: Syncing React with the Outside World
useEffect synchronizes your component with systems outside React's control, acting as a bridge to the browser or network. It's for data fetching or subscriptions.
CSS Positioning: Taking Elements Out of Normal Flow
CSS position lets you override the default document flow. Think of it as telling an element to ignore its neighbors and listen to top/left coordinates instead. Use it for overlays, modals, and sticky headers.
tsconfig.json: The Rulebook for Your TypeScript Project
The tsconfig.json file is the rulebook for the TypeScript compiler, defining which files to process and what rules to enforce. It's essential for setting strictness, module resolution, and output targets.
Thinking in React: Decomposing UIs into Components
Think of UIs not as one big page, but as a tree of reusable components. Start by breaking a design mockup into a hierarchy of pieces. The footgun is creating 'god components' that do too much; each component should have a single responsibility.
CSS Margin Collapsing: The Largest Margin Wins
Instead of adding up, vertical margins on adjacent block elements 'collapse' into one, taking the size of the largest margin. This explains why two paragraphs with margin: 1rem don't have 2rem of space between them. The footgun is assuming it's a bug.
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