Easy concepts in Frontend Dev, page 5
SvelteKit's `load` Function: Pre-fetch Data for Pages
Think of SvelteKit's load function as a gatekeeper for your page, fetching data *before* it renders. It's used to grab data from an API or route params, like fetching a blog post. The footgun: load in +page.js runs on both server and client.
Sass Variables: Compile-Time Constants for CSS
Think of Sass variables as compile-time constants for your styles. You define a value once (e.g., $brand-color) and reuse it, ensuring consistency. They're perfect for theming colors and fonts.
Test Like a User: The React Testing Library Philosophy
React Testing Library's philosophy is to test components the way a user interacts with them, not by their internal implementation. This ensures refactors don't break tests. The footgun is querying by implementation details instead of what a user actually sees.
Sass Nesting: Write CSS That Mirrors Your HTML
Sass nesting lets you structure your styles like your HTML, avoiding repetitive selectors. Use it for components with clear parent-child relationships, like a navbar's list items. The footgun is over-nesting, which creates bloated, overly-specific CSS.
Jest: The 'Batteries-Included' JavaScript Test Runner
Jest is a "batteries-included" JavaScript testing framework, bundling a runner, assertions, and mocking tools. It's a default for React apps but works for any JS project. The footgun is thinking it's only for React; it's a general-purpose tool.
CSS Minification: Smaller Files, Faster Sites
CSS minification vacuum-packs your stylesheets, removing whitespace, comments, and unused code to shrink file size. This automated build step improves performance by reducing network transfer size.
Client-Side Routing: No More Full Page Reloads
Client-side routing fakes page navigation. Instead of fetching new HTML from a server, it just shows or hides components already loaded, making transitions feel instant. This powers single-page apps (SPAs).
React Testing Library Queries: Find Elements Like a User
React Testing Library queries find elements by simulating how users see your UI, not by implementation details. Prioritize user-facing attributes like getByRole or getByLabelText.
Autoprefixer: Stop Memorizing CSS Vendor Prefixes
Autoprefixer lets you write modern CSS and automatically adds vendor prefixes like -webkit- during your build. It's a standard part of frontend toolchains, ensuring styles work across browsers.
RouterLink: Client-Side Navigation in Angular
RouterLink is Angular's replacement for <a> tags, preventing full page reloads in a Single-Page App. Use it on any element to navigate between views. The common footgun is using a standard <a href="...">, which reloads the page and loses application state.
Jest Matchers: Asserting Values in Your Tests
Jest matchers are assertion functions that check if a value meets a condition. You use them with expect() to verify function outputs, object properties, or promise states.
Programmatic Navigation: Changing Routes with Code
Instead of a user clicking a link, you trigger navigation from your JavaScript. This is useful for redirecting after an action, like a successful login. The main footgun: params are ignored if you also provide a path—use a named route instead.
Indexed Access Types: Look Up a Property's Type
Indexed access types let you look up a property's type on another type, like Person['age'] yielding number. Use them to create new types from existing ones, like getting an array element's type with MyArray[number].
Design Systems: Stop Reinventing UI Components
A design system is a shared library of reusable UI components and rules, acting as a single source of truth for designers and developers. It ensures a consistent look across apps without rebuilding common elements.
Component Library: Your UI's LEGO Box
A component library is a box of pre-built UI LEGOs. Instead of building a button from scratch, you grab the official one, ensuring consistency and speed. It's essential for scaling design across teams.
Next.js: Pages Router vs. App Router
The App Router treats UI as a tree of components, while the older Pages Router treats it as a collection of separate pages. Use App Router for new projects to leverage layouts and Server Components.
Angular Services: Your App's Shared Toolbox
An Angular service is a shared toolbox for your app. Instead of components building their own tools (like an HTTP client), they request a single instance from the dependency injector.
next/link: Fast, Client-Side Navigation
next/link is an enhanced <a> tag for fast, client-side page transitions, preserving the SPA feel. It automatically prefetches linked pages for instant loading.
Angular Custom Pipes: Transform Data in Your Templates
An Angular custom pipe is a reusable formatting function for your templates. Use it for common display transformations like currency or date formatting, keeping your component logic clean. Footgun: Avoid slow logic; pipes run often and can kill performance.
Next.js Route Groups: Invisible Folders for Routes
Route Groups are invisible folders for your Next.js routes, letting you organize files without changing the URL. Use them to apply a specific layout to a set of pages, like a marketing section vs. a user dashboard.
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