Frontend Web Development Tooling, Performance & Deployment Syllabus

What is the purpose of a lockfile (package-lock.json, yarn.lock, pnpm-lock.yaml)?

It records the exact resolved versions and integrity hashes of every installed dependency (including transitive ones), ensuring reproducible, deterministic installs across machines and over time.

In semantic versioning (`MAJOR.MINOR.PATCH`), what does each part signify?

MAJOR increments for incompatible/breaking API changes, MINOR for backward-compatible new features, and PATCH for backward-compatible bug fixes.

In an npm version range, what is the difference between `^1.2.3` and `~1.2.3`?

`^1.2.3` allows updates that do not change the leftmost non-zero digit — i.e. `>=1.2.3 <2.0.0` (minor + patch). `~1.2.3` allows only patch updates — i.e. `>=1.2.3 <1.3.0`.

What is the difference between ES Modules (ESM) and CommonJS (CJS) module systems?

CommonJS uses `require()`/`module.exports`, is synchronous, and is the traditional Node format. ESM uses `import`/`export`, is the standard for browsers and modern Node, supports static analysis (tree-shaking), and can load asynchronously.

What is 'tree-shaking' in the context of bundling?

Tree-shaking is dead-code elimination that removes unused exports from the final bundle. It relies on the static structure of ES Modules (static `import`/`export`) to determine which code is actually reachable.

What problem does a module bundler solve?

A bundler resolves the dependency graph of many source modules and combines them into optimized output files, handling transpilation, minification, asset handling, and code splitting so browsers load fewer, optimized files.

What is code splitting, and why is it useful?

Code splitting breaks a bundle into smaller chunks that are loaded on demand (e.g., per route or via dynamic `import()`), reducing the initial payload and improving load performance.

How does Vite differ from Webpack during development?

In dev, Vite serves source over native ES modules using esbuild for fast, on-demand transformation with no full bundling, giving near-instant startup and HMR. Webpack bundles the whole app up front, which is slower for large projects. For production, Vite bundles with Rollup.

What is Hot Module Replacement (HMR)?

HMR updates modules in a running application in the browser without a full page reload, preserving application state while reflecting code changes instantly during development.

What does Webpack use 'loaders' and 'plugins' for?

Loaders transform individual files/modules as they are imported (e.g., transpiling TS, handling CSS or images). Plugins hook into the broader build lifecycle to perform wider tasks like bundle optimization, asset injection, or environment definition.

What is Babel used for?

Babel is a JavaScript transpiler that converts modern JavaScript (and JSX/TypeScript syntax) into backward-compatible versions so code runs in older browsers/environments, using presets (e.g., @babel/preset-env) and plugins.

What is esbuild, and why is it fast?

esbuild is a JavaScript/TypeScript bundler and transpiler written in Go. It is extremely fast due to being compiled to native code, using parallelism, and minimizing passes over the source, making it 10–100x faster than JS-based tools for many tasks.

What is the difference between transpilation and polyfilling?

Transpilation converts new syntax into equivalent older syntax (e.g., arrow functions to `function`). Polyfilling adds runtime implementations of missing APIs/features (e.g., `Promise`, `Array.prototype.includes`) that syntax transforms cannot provide.

What is the difference between a linter and a formatter?

A linter (e.g., ESLint) analyzes code for bugs, anti-patterns, and style/quality rule violations. A formatter (e.g., Prettier) automatically rewrites code layout (spacing, quotes, line breaks) to a consistent style without judging correctness.

What is ESLint and how is it configured?

ESLint is a pluggable static-analysis tool for JavaScript/TypeScript that flags problematic patterns. It is configured (e.g., in `eslint.config.js` or `.eslintrc`) with rules set to 'off', 'warn', or 'error', plus plugins, parsers, and shareable configs.

Why are Prettier and ESLint often used together, and how is conflict avoided?

ESLint enforces code quality while Prettier handles formatting. To avoid overlapping/conflicting formatting rules, tools like `eslint-config-prettier` disable ESLint's stylistic rules so Prettier owns formatting.

What is unit testing, and what is a common tool for it in JS?

Unit testing verifies the smallest isolated pieces of code (functions/modules) in isolation from dependencies. Common JS tools include Jest and Vitest.

How does Vitest differ from Jest?

Vitest is a Vite-native test runner with a Jest-compatible API, using Vite's transform pipeline and ESM support for fast execution and shared config. Jest is a mature, standalone framework with its own transformer (babel-jest) and larger ecosystem, historically CJS-oriented.

In testing, what is the difference between a mock, a stub, and a spy?

A stub returns predefined responses for calls; a spy records how a function was called (arguments, call count) while optionally calling through; a mock is a preprogrammed object with expectations about how it should be used. Jest/Vitest `fn()` and `spyOn` cover these roles.

What is the guiding philosophy of React Testing Library (RTL)?

RTL encourages testing components the way a user interacts with them — querying by accessible roles, labels, and text rather than implementation details (like state or internal methods) — so tests remain robust to refactors.

In React Testing Library, what is the difference between `getBy`, `queryBy`, and `findBy` queries?

`getBy` returns the element and throws if not found (sync). `queryBy` returns the element or `null` if not found (useful for asserting absence, sync). `findBy` returns a Promise that resolves when the element appears (async, for elements that render later).

What is end-to-end (E2E) testing?

E2E testing validates complete user flows through the full running application (frontend, backend, and integrations) in a real or headless browser, verifying the system behaves correctly from the user's perspective.

Compare Playwright and Cypress for E2E testing.

Playwright runs across Chromium, Firefox, and WebKit, supports multiple languages, parallel multi-tab/multi-context testing, and runs out-of-process. Cypress runs in-browser (primarily Chromium-family, plus WebKit/Firefox), offers a strong interactive test runner and time-travel debugging, and is JS/TS-only.

What are the three Core Web Vitals and what does each measure?

LCP (Largest Contentful Paint) measures loading performance; INP (Interaction to Next Paint) measures responsiveness; CLS (Cumulative Layout Shift) measures visual stability.

What is the 'good' threshold for Largest Contentful Paint (LCP)?

An LCP of $\leq 2.5$ seconds (measured at the 75th percentile of page loads) is considered good; $2.5\text{–}4.0$ s needs improvement, and $> 4.0$ s is poor.

What is the 'good' threshold for Interaction to Next Paint (INP)?

An INP of $\leq 200$ ms is considered good; $200\text{–}500$ ms needs improvement, and $> 500$ ms is poor (measured at the 75th percentile).

How is Cumulative Layout Shift (CLS) calculated, and what is the good threshold?

Each layout shift score is $\text{impact fraction} \times \text{distance fraction}$; CLS is the largest cluster (session window) of such shift scores. A CLS of $\leq 0.1$ is good, $0.1\text{–}0.25$ needs improvement, and $> 0.25$ is poor.

What is lazy loading, and how is it enabled for images natively?

Lazy loading defers loading of offscreen resources until they are needed (e.g., near the viewport), reducing initial load. Native image lazy loading is enabled with the `loading="lazy"` attribute on `<img>`/`<iframe>`.

Name three common asset optimization techniques for faster page loads.

Minification (removing whitespace/comments), compression (gzip/Brotli), image optimization (modern formats like WebP/AVIF, responsive `srcset`), plus bundling/code splitting and caching. Any of these reduce transferred bytes or requests.

What is a CDN and how does it improve performance?

A Content Delivery Network is a geographically distributed set of edge servers that cache and serve content from locations near users, reducing latency, offloading the origin server, and improving availability.

What is the difference between the HTTP `Cache-Control` directives `max-age`, `no-cache`, and `no-store`?

`max-age=N` allows caching for N seconds. `no-cache` allows storing but requires revalidation with the server before reuse. `no-store` forbids caching the response entirely.

What is the difference between a cache 'hit' and 'miss', and how does revalidation (ETag) work?

A hit serves content from cache; a miss requires fetching from origin. Revalidation uses validators like `ETag`/`Last-Modified`: the client sends `If-None-Match`/`If-Modified-Since`, and the server responds `304 Not Modified` (reuse cache) or `200` with new content.

What is Lighthouse and what categories does it audit?

Lighthouse is an automated tool (in Chrome DevTools, CLI, or PageSpeed Insights) that audits a page and scores categories: Performance, Accessibility, Best Practices, and SEO (historically also PWA).

What is the difference between lab data and field data in performance measurement?

Lab data comes from controlled synthetic tests (e.g., Lighthouse) in a fixed environment, good for debugging. Field data (RUM / CrUX) is collected from real users' devices and networks, reflecting actual experience used for Core Web Vitals assessment.

In Chrome DevTools Performance profiling, what does the Flame Chart / main-thread track show?

It visualizes call stacks over time on the main thread, showing which functions ran, how long they took, and where long tasks, scripting, rendering, and painting occur — used to find bottlenecks like long tasks blocking interactivity.

What do the letters in WCAG's POUR principles stand for?

Perceivable, Operable, Understandable, and Robust — the four foundational principles under which all WCAG success criteria are organized.

What are the three WCAG conformance levels?

Level A (minimum), Level AA (addresses major barriers; the common legal/target standard), and Level AAA (highest, strictest). Each higher level includes all criteria of the lower levels.

What is the WCAG minimum contrast ratio requirement (AA) for normal text?

A contrast ratio of at least $4.5:1$ for normal text, and at least $3:1$ for large text (about $18\text{pt}$, or $14\text{pt}$ bold) under WCAG 2.x Level AA.

How is the WCAG contrast ratio between two colors defined?

$$\text{ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$ where $L_1$ is the relative luminance of the lighter color and $L_2$ that of the darker color; it ranges from $1:1$ to $21:1$.

What is the purpose of ARIA (Accessible Rich Internet Applications)?

ARIA is a set of roles, states, and properties added to HTML to make dynamic content and custom UI widgets more accessible to assistive technologies when native HTML semantics are insufficient.

What is the 'first rule of ARIA'?

If a native HTML element or attribute with the needed semantics and behavior already exists, use it instead of repurposing an element and adding an ARIA role — i.e., prefer native semantics over ARIA.

What is the difference between ARIA roles, states, and properties?

Roles define what an element is (e.g., `role="button"`, `role="navigation"`). Properties define characteristics (e.g., `aria-label`, `aria-required`). States define current conditions that can change (e.g., `aria-expanded`, `aria-checked`, `aria-disabled`).

What does `aria-live` do, and what are its common values?

`aria-live` marks a region whose dynamic updates should be announced by assistive tech. Values: `off` (no announcement), `polite` (announce when idle), and `assertive` (announce immediately, interrupting).

What is the difference between `aria-label` and `aria-labelledby`?

`aria-label` provides an accessible name via a string directly on the element. `aria-labelledby` sets the accessible name by referencing the id(s) of other visible element(s) whose text becomes the label.

What does `aria-hidden="true"` do?

It removes an element (and its descendants) from the accessibility tree so assistive technologies ignore it, while it remains visually present. It should not be applied to focusable/interactive elements.

What is a merge commit and how many parents does it have?

A merge commit is the commit created by a non-fast-forward merge; it records the combined result and has two (or more) parent commits — one for each branch being joined — preserving branch history.

What does `git stash` do?

It temporarily shelves (saves) uncommitted changes in the working directory and index, reverting them to a clean state; the changes can be reapplied later with `git stash pop` or `git stash apply`.

What is the difference between `devDependencies` and `dependencies` in package.json?

`dependencies` are packages required at runtime by the shipped application. `devDependencies` are needed only during development/build (e.g., test runners, bundlers, linters) and are excluded when the package is installed as a dependency of another project.

What is minification and how does it differ from compression?

Minification rewrites source code to be smaller (removing whitespace, comments, shortening names) while keeping it valid. Compression (gzip/Brotli) is a reversible byte-level encoding applied during transfer and decompressed by the browser. They are complementary.

What is the difference between integration testing and unit testing?

Unit tests verify a single isolated unit with dependencies mocked. Integration tests verify that multiple units/modules work correctly together (e.g., a component with real child components or a service hitting a real database), covering their interactions.

What does the 'testing pyramid' recommend about test distribution?

It recommends many fast, cheap unit tests at the base, fewer integration tests in the middle, and a small number of slow, expensive end-to-end tests at the top — balancing coverage, speed, and maintenance cost.

Why does the order of `dependencies` in Webpack matter less than the module dependency graph?

Webpack builds output from the dependency graph starting at entry points, following `import`/`require` statements, not from listing order. It resolves each module once and includes only what is reachable from the entry, then applies optimizations like tree-shaking.

What is the purpose of source maps in a production build?

Source maps map minified/transpiled bundled code back to the original source, enabling meaningful debugging (readable stack traces, breakpoints) in DevTools even though the shipped code is transformed and compressed.