10 Nifty Browser APIs

Episode Summary

Executive Summary: The episode is a practical tour of 10 browser/Web APIs that let developers do surprisingly powerful things with vanilla JavaScript, from camera/mic access and file editing to clipboard, storage, speech, and resize handling. Scott and Wes emphasize that many are easier than expected, but browser support and permissions can be inconsistent, so understanding compatibility and security tradeoffs matters.

Main Topics: Media capture with getUserMedia: Explains how browser APIs can access webcams, microphones, multiple cameras, and even capture feeds into video/canvas for pixel-level effects and creative side projects. File System Access API: Discusses reading directories/files and saving changes directly to local files from the browser, enabling small file editors and explorers with very little code, mainly in Chromium-based browsers. Geolocation and the Permissions API: Covers location access patterns and the frustration of asking for permissions too early, plus the limited and inconsistent support of the Permissions API across browsers. Web Animations API and higher-level animation tools: Describes programmatic control over animations (play, pause, reverse, playback rate) and how libraries like Motion 1 build on browser primitives for a better developer experience. Resize Observer and element-driven responsiveness: Highlights Resize Observer as a way to react to element size changes, enabling container-query-like behavior and responsive UI logic without polling. Clipboard, web storage, and speech APIs: Surveys clipboard read/write, local/session storage for persistence, and speech synthesis/recognition for text-to-speech and speech-to-text interactions. Sponsors, tools, and practical developer workflow: Interwoven ad reads promote Prismic, LogRocket, and FreshBooks, with a recurring theme that real-world API experimentation benefits from observability, CMS flexibility, and operational tooling.

Key Arguments: Browser APIs can unlock powerful features without heavy libraries, often in surprisingly few lines of code. Support and permissions vary widely, so feature detection and browser compatibility checks are essential before depending on these APIs. The best use cases are often creative side projects or targeted product features, not just replacing framework abstractions. Some APIs are primitives intended to be wrapped by nicer libraries, while others are ergonomic enough to use directly. Security and user trust are central: file access, clipboard, geolocation, and camera permissions must be requested carefully and at the right moment. Modern browser features work best over HTTPS or localhost, and many capabilities are strongest in Chromium-based browsers.

Data Points: Number of browser APIs discussed: 10 - The episode explicitly frames the show as covering 10 nifty browser APIs. File System API demo size: Under 40 lines of code - Wes says a basic SVG editor was built in under 40 lines using the File System Access API. Directory browser demo size: About 50 lines of code - He describes a small directory browser built in roughly 50 lines. Webcam count detected on one machine: 9 webcams - Scott says his app detected nine available webcams on his computer. Resize Observer action size: Less than 20 lines of code - Wes says a Svelte container-query-like action using Resize Observer was under 20 lines. LogRocket free trial: 14 days - Ad read offers a 14-day free trial for LogRocket. FreshBooks free trial: $32 / free trial, no credit card required - Ad read mentions FreshBooks with a free trial and no credit card required, plus a $32 reference in the promo copy. Main beachhead browser support: Chromium-based browsers - The File System Access API is emphasized as working best in Chrome/Chromium environments.

Pivotal Quotes: "I mean, I'm talking like under 40 lines of vanilla.js to get a basic file editor going." — Wes Boss: Describing how powerful the File System Access API can be for building a local file editor. "Who better to tell you when something has changed than the device that is painting the rectangles to the browser?" — Wes Boss: Explaining why Resize Observer is useful for element-based responsiveness. "It feels like something we might actually do." — Scott Tolinsky: Reacting to the idea that the show could spend 10 minutes talking about olive oil, reflecting the podcast's casual banter.

Implications: Developers can build richer, more native-feeling web experiences with small, direct APIs—but only if they plan around permissions, HTTPS, and uneven browser support. The biggest opportunity is creative, lightweight functionality built on browser primitives.