Front End Development Case Studies & Practical Application 4 — Questions and Answers
Question 1: A progressive web app (PWA) works offline but users report stale content persisting for days after a deployment. What service worker strategy is misconfigured?
- The install event is not firing
- The cache-first strategy lacks a cache versioning or update mechanism; stale-while-revalidate or cache busting is needed (Correct answer)
- Push notifications are disabled
- The manifest.json is missing the start_url field
Correct answer: The cache-first strategy lacks a cache versioning or update mechanism; stale-while-revalidate or cache busting is needed
Cache-first without versioning never re-fetches updated assets; incrementing the cache version in the service worker forces old caches to be cleared on activation.
Question 2: A design system team publishes a React component library as an npm package. Consumers report duplicate React instances causing hook errors. The fix is:
- Bundle React inside the library package
- Mark React as a peerDependency and add it to the webpack/rollup externals config (Correct answer)
- Downgrade to React 16 in both projects
- Use React.lazy in the consuming app
Correct answer: Mark React as a peerDependency and add it to the webpack/rollup externals config
Listing React as a peerDependency and excluding it from the library bundle ensures both the library and the app share the same React instance.
Question 3: A government web portal must support users with low vision who increase browser font size to 200%. The layout breaks. The core CSS mistake is:
- Using relative units like em and rem
- Setting fixed pixel heights on containers that contain text (Correct answer)
- Using CSS Grid for layout
- Applying media queries with em units
Correct answer: Setting fixed pixel heights on containers that contain text
Fixed pixel heights do not scale with font size, so text overflows or is clipped when users zoom; using min-height with relative units fixes this.
Question 4: An analytics dashboard fetches a large dataset and transforms it on the main thread, causing 2-second UI freezes. The best architectural solution is:
- Increase the JavaScript heap size limit
- Offload the computation to a Web Worker so the main thread remains responsive (Correct answer)
- Use setTimeout to break the work into chunks
- Compress the dataset before fetching
Correct answer: Offload the computation to a Web Worker so the main thread remains responsive
Web Workers run in a separate thread, so heavy computation doesn't block the main thread's rendering and user interaction.
Question 5: A team discovers their CI pipeline takes 18 minutes to run end-to-end Cypress tests. The most effective way to reduce this without removing test coverage is:
- Run tests only on the main branch
- Parallelize tests across multiple CI containers using Cypress's parallel flag and a record key (Correct answer)
- Convert all Cypress tests to unit tests
- Increase the CI machine's RAM
Correct answer: Parallelize tests across multiple CI containers using Cypress's parallel flag and a record key
Parallelizing Cypress across multiple machines splits the test suite so total wall-clock time drops proportionally to the number of containers.
Question 6: A social media app's image feed causes memory to grow continuously as users scroll. The likely cause and fix are:
- Images are too large; compress them to JPEG
- DOM nodes for off-screen images are never removed; implement virtualization (windowing) to recycle DOM nodes (Correct answer)
- The app uses too many event listeners globally
- CSS transitions are applied to image elements
Correct answer: DOM nodes for off-screen images are never removed; implement virtualization (windowing) to recycle DOM nodes
Virtualization libraries like react-window render only visible items and recycle DOM nodes, keeping memory usage constant regardless of list length.
Question 7: A developer needs to display a live-updating stock ticker without polling. The server supports SSE and WebSockets. Which should they choose and why?
- WebSockets, because they use less bandwidth
- Server-Sent Events (SSE), because it is unidirectional server-to-client, works over standard HTTP/2, and is simpler for one-way data streams (Correct answer)
- Long polling, because it is the most widely supported
- GraphQL subscriptions, because they auto-reconnect
Correct answer: Server-Sent Events (SSE), because it is unidirectional server-to-client, works over standard HTTP/2, and is simpler for one-way data streams
SSE is ideal for one-way server-push scenarios like tickers; it reconnects automatically, works over HTTP/2, and avoids the overhead of bidirectional WebSocket protocol.
Front End Development Case Studies & Practical Application 4
A progressive web app (PWA) works offline but users report stale content persisting for days after a deployment.
What service worker strategy is misconfigured?