Easy 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.
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.
Scaffolding a Vite Project with `create-vite`
Use create-vite to instantly generate a new web project with your chosen framework. It's the fastest way to start a Vue, React, or Svelte app without manual setup. The footgun is forgetting you can pass a --template flag to skip interactive prompts.
ng new: Your Angular Project Starter Kit
The ng new command is your starter kit for any Angular project. It scaffolds a complete, runnable application with a standard folder structure and dependencies, letting you skip manual setup.
SvelteKit: From Zero to Dev Server
Spin up a new SvelteKit app with npx sv create. This command scaffolds a project, prompting you to add tools like TypeScript. Then, npm run dev starts your dev server. The key footgun: forgetting to install dependencies before starting the server.
Vite's HMR API: Manually Controlling Hot Reloads
Vite's HMR API lets a module handle code changes without a full reload. While frameworks usually manage this, you can use it for custom tooling. The footgun: forgetting to wrap HMR code in if (import.meta.hot) will crash your production build.
The `window` Object: Your Browser's Global Scope
Think of the window object as the global stage for your JavaScript. It represents the browser tab and holds all global variables and APIs like fetch and setTimeout. You use it constantly, often implicitly.
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