Concepts in Frontend Dev
Vue: The Progressive Framework Philosophy
Vue's progressive philosophy means you can use as little or as much of it as you need. Use it for a single interactive widget, or scale it up to a full SPA with official libraries.
TypeScript Type Annotations: Defining Your Data's Shape
Type annotations are contracts for your data, telling TypeScript what to expect from variables and functions. You'll use them for primitives like string or number, and for arrays like string[].
React Components: Your UI Building Blocks
Think of React Components as custom, reusable HTML tags you create with JavaScript functions. Use them to build everything from buttons to page layouts, speeding up development.
CSS Cascade: How Browsers Resolve Style Conflicts
The CSS Cascade is a tie-breaking algorithm that decides which style rule applies when multiple rules target the same element. It resolves conflicts between browser defaults, user styles, and your CSS.
Angular: The 'Batteries-Included' Framework
Angular is a 'batteries-included' framework, providing a complete, official toolkit for routing, forms, and more. This is ideal for large teams needing consistency, but its opinionated nature means fighting the framework if you prefer different tools.
TypeScript's Basic Types: The Building Blocks
TypeScript builds on JavaScript's primitives (string, number, boolean) by letting you explicitly declare a variable's type. This is the foundation for catching errors early. The main footgun is confusing tuples [string, number] with flexible arrays.
JSX: Putting HTML Inside Your JavaScript Components
JSX is a syntax extension that lets you write HTML-like markup directly inside your JavaScript files, keeping UI logic and structure together. It's the standard way to define a React component's output. The footgun is that JSX is stricter than HTML.
CSS Specificity: The Browser's Tie-Breaking Rule
CSS Specificity is the browser's tie-breaking system for conflicting styles. Think of it as a score: an ID is worth more than any number of classes, and a class is worth more than any number of elements. The footgun: using !important to win.
Svelte: A Compiler, Not Just a Framework
Svelte is a compiler that turns your component files into efficient, imperative vanilla JavaScript at build time. This avoids shipping a large runtime, leading to smaller bundles. The footgun is thinking of it as just a runtime; its power is in the build step.
React Props: Arguments for Your Components
Think of props as arguments for your UI components, letting you pass data from a parent down to a child. You use them to customize a component's appearance or behavior, like passing a user object to a ProfileCard.
CSS Box Model: Every Element is a Box
Every HTML element is a box with layers: content, padding, border, and margin. This model dictates how elements take up space and align, forming the basis of all CSS layout. The footgun is the default sizing, which adds padding *outside* the set width.
Why Angular Relies on TypeScript
Angular uses TypeScript to build large, scalable apps with confidence by enforcing structure through static types. This is key for its dependency injection and component architecture, ensuring pieces fit together.
React Fragments: Group Elements Without a Wrapper
React Fragments let you group multiple elements without adding an extra <div> to the DOM. Use them when a component needs to return adjacent elements, like table cells (<td>).
CSS Inheritance: Styles Flow Downhill
CSS inheritance is like genetics for web elements: children inherit styles like color and font-family from their parents. This is why setting a font on <body> styles a whole page.
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.
CSS Selectors: How to Target HTML for Styling
CSS selectors are like addresses for your HTML, telling the browser which elements to style. They're used to apply everything from colors to layouts. The main footgun is specificity: an overly specific selector can be difficult to override later.
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.
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