Frontend Web Development Tooling, Performance & Deployment Flashcards

24 sample cards from the Tooling, Performance & Deployment deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. 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.

2. 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.

3. 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.

4. 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).

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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$.

11. 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.

12. 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.

13. 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`).

14. 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).

15. 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.

16. 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.

17. 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.

18. 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`.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

What this deck covers

Tooling, Performance & Deployment flashcards FAQ