Easy concepts in Frontend Dev, page 3
TypeScript: Typing Function Inputs and Outputs
Think of function types as a contract defining what data goes in and what comes out. This is core to TypeScript, ensuring functions are called correctly. The footgun is relying on return type inference, which can hide bugs if logic changes unexpectedly.
Typing React Component Props with TypeScript
Use TypeScript to define a 'contract' for your component's props with an interface or type. This catches bugs by ensuring data passed to a component has the correct shape. The footgun: files with JSX must use the .tsx extension.
TypeScript Classes: Blueprints for Typed Objects
A TypeScript class is a blueprint for creating objects, adding type safety to JavaScript's object-oriented patterns. Use them for core data structures like a User. The main footgun is forgetting to initialize properties, which strict mode flags as an error.
Global vs. Component CSS in React/Next.js
Treat CSS like any other module. Import global styles (like resets or Tailwind) once in your app's entry point. For component-specific styles, import a CSS Module file directly into your component to keep styles scoped and prevent conflicts.
The @media Rule: CSS for Different Screens
The @media rule is like an if-statement for your CSS, applying styles only when conditions like screen size are met. It's the core of responsive design, creating different layouts for mobile, tablet, and desktop.
The Viewport Meta Tag: Your First Responsive Step
The viewport meta tag tells mobile browsers not to fake a desktop screen. It sets the page width to the device's width, enabling responsive design. It's essential for any modern site. The footgun: disabling user zoom (user-scalable=no) harms accessibility.
Vue Lifecycle Hooks: Running Code at the Right Time
Vue lifecycle hooks are your cues to run code at specific moments in a component's life. Use onMounted to fetch data or onUnmounted to clean up timers. The main footgun is that hooks must be registered synchronously during setup, not in an async callback.
Fluid Layouts: Adapting Content to Any Screen
A fluid layout makes content flow to fill its container, preventing horizontal scrollbars. It's key for responsive sites that work on any device and for accessibility. The footgun: without constraints, content can become unreadably wide or awkwardly cramped.
Angular Component Lifecycle Hooks
Angular's lifecycle hooks are callbacks for a component's life events: creation, updates, and destruction. Use ngOnInit for one-time setup after inputs are ready, and ngOnChanges to react to input changes. The footgun: don't use the constructor for setup.
Flexible Images: More Than Just `max-width`
Flexible images adapt to the device by providing different resolutions or crops. Use srcset for high-DPI screens and <picture> for art direction. The footgun is relying only on CSS max-width; this forces mobile users to download unnecessarily large…
Svelte Lifecycle: Mount, Destroy, and Tick
Svelte 5 simplifies the component lifecycle to just two events: creation (onMount) and destruction (onDestroy). Use onMount for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.
Svelte's Reactive Assignments with `$: `
Think of Svelte's $: as a magic label that automatically re-runs code when its inputs change. It's used to create derived values, like $: sum = a + b. The footgun: the compiler only tracks direct dependencies, not those hidden inside function calls.
Type-Safe DOM Selection in TypeScript
TypeScript knows DOM types but can't guarantee an element exists. Selecting an element returns Type | null, forcing you to handle the null case. This prevents runtime errors when your script runs before the DOM element loads.
Accessing data-* Attributes with `dataset`
The dataset property is a live map of an element's data-* attributes. It automatically converts HTML data-user-id to element.dataset.userId in JS, perfect for storing state. The footgun: name conversion is lossy; HTML attributes are always lowercased.
FormData: Package Form Data for HTTP Requests
The FormData API is a digital shipping container for your form's data, packaging input into a format HTTP requests understand. Use it to send forms, including files, with fetch() without manually setting headers.
CSS Transitions: Animating State Changes
CSS transitions turn abrupt style changes into smooth animations. Instead of a button's color snapping on hover, it fades gracefully. Use this for visual feedback on state changes like :hover or when adding classes with JavaScript.
Vue Scoped CSS: Keep Your Styles Local
Vue's Scoped CSS prevents styles from leaking out of a component. It adds a unique data attribute to your component's HTML and rewrites CSS to target it, ensuring styles only apply locally.
CSS 2D Transforms: Move, Rotate, and Scale Elements
CSS transforms let you move, rotate, scale, and skew elements without affecting the document's layout flow. Use it for UI animations like hover effects or modal pop-ups.
Svelte Scoped Styles: CSS That Can't Leak
Svelte styles are like house rules; they only apply inside that component and don't affect the neighbors. This is the default for any <style> tag in a .svelte file, preventing CSS conflicts.
pointer-events: Making Elements Click-Through
The pointer-events property makes elements invisible to clicks and hovers, letting events pass through to what's underneath. Use it for decorative overlays on clickable content or to temporarily disable buttons.
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