Quiz: Which API for This?
Pick the Right Tool
Knowing individual APIs is step one. Knowing which API to reach for when faced with a real problem is what separates senior engineers from everyone else. Each scenario below describes a production requirement — your job is to pick the best Web Platform API to solve it.
Think through each one before revealing the answer. The explanations cover why the correct answer wins and why the alternatives fall short.
Scenario 1: CPU-Heavy JSON Parsing
Your dashboard receives a 15MB JSON payload from an API. Parsing it with JSON.parse blocks the main thread for 200ms, causing visible jank.
Scenario 2: Offline Form Submission
Users need to submit expense reports from the field where cellular connectivity is unreliable. Submissions must not be lost.
Scenario 3: Real-Time Collaborative Drawing
Multiple users draw on a shared canvas simultaneously. Strokes must appear instantly for the drawing user and sync to others within 100ms.
Scenario 4: Image Compression in the Browser
Your photo upload feature needs to compress images client-side before uploading, reducing a 10MB JPEG to under 1MB. Processing must not freeze the UI.
Scenario 5: Persistent App State Across Sessions
Your single-page app needs to store the user's draft documents, preferences, and read history. Some users have 500+ drafts. Data must survive browser restarts.
Scenario 6: Scroll-Linked Progress Bar
You want a reading progress bar at the top of your blog that fills as the user scrolls down the page. It must be smooth even when JavaScript is blocked.
Scenario 7: Running FFmpeg in the Browser
Your video editing tool needs to transcode video clips client-side. FFmpeg is a C library. Users expect real-time progress updates.
Scenario 8: Cross-Tab Authentication State
When a user logs out in one tab, all other open tabs of your app should immediately reflect the logout.
Scenario 9: High-Performance Data Visualization
Your analytics dashboard renders a scatter plot with 100,000 data points. Points need hover interactions (tooltips). The chart must pan and zoom smoothly at 60fps.
Scenario 10: Smooth Entry Animations on Scroll
As users scroll down your marketing page, sections should fade in and slide up when they enter the viewport. The animations must be smooth regardless of JavaScript load.
How Did You Do?
These scenarios cover the core decision-making skills for Web Platform APIs. The pattern is consistent: pick the API that does the job with the least main-thread involvement. Workers for computation, service workers for network control, compositor-driven animations for visual effects, IndexedDB for storage.
If you got 8+ correct, you have solid API selection instincts. If any tripped you up, revisit that topic — the explanation tells you exactly what mental model to refine.