What's New in Javascript

Episode Summary

Executive Summary: Wes and Scott discuss a grab bag of emerging JavaScript and browser APIs, emphasizing practical use cases: animation with Pop Motion/POSE, scroll and element visibility via Intersection Observer, responsive components with Resize Observer, media and text generation with speech APIs, and browser-native payments and localization tools. They also cover the state of ES modules in Node, BigInt, experimental face detection, and a standout coding font. The episode frames these tools as powerful but often still evolving, with polyfills and experimentation required.

Main Topics: New animation tooling with Pop Motion/POSE: Scott recommends Pop Motion and its React-oriented Pose API for declarative animation states like open/closed, better mount/unmount transitions, and flexible animation control beyond traditional CSS transitions. Browser observer APIs for visibility and size: Intersection Observer and Resize Observer are presented as efficient, browser-native solutions for detecting when elements enter the viewport or change size, enabling scroll-triggered actions and element-query-like behavior. MDX and componentized Markdown: The hosts discuss MDX as a new loader that lets developers embed JSX components directly inside Markdown, making docs, READMEs, and blog posts far more reusable and dynamic. Native browser APIs for payments, localization, and speech: Payment Request API, Intl.NumberFormat, speech recognition, and text-to-speech are highlighted as ways to replace custom code with standardized browser capabilities that improve UX and reduce complexity. JavaScript platform evolution: Web Animations, BigInt, Face Detection, and ES modules in Node: The episode surveys experimental and emerging platform features, noting that browser support is uneven, polyfills are often needed, and Node’s ES module transition remains contentious. Practical developer tools and ergonomics: The episode ends with a sick pick for the Dank Mono coding font and a Ring Pro doorbell recommendation, illustrating the hosts’ interest in tools that improve daily workflow and home automation.

Key Arguments: Declarative animation libraries like Pop Motion/POSE can greatly simplify complex UI motion, especially mount/unmount and state-based transitions. Intersection Observer is preferable to manual scroll listeners because the browser is better positioned to know what is on screen and can do so more efficiently. Resize Observer supports a shift away from viewport-only design toward component-based, element-driven responsiveness. MDX unlocks reusable components inside Markdown, solving a long-standing limitation for blogs, docs, and content systems. Browser-native payments and tokens can reduce security risk by keeping credit card data out of developer-controlled systems. Intl.NumberFormat and toLocaleString eliminate the need for fragile custom currency-formatting regexes. BigInt addresses the long-standing limitations of JavaScript’s number precision for large integers. Speech recognition and text-to-speech are powerful, low-code APIs that can create playful or highly useful interactions. ES modules in Node are still evolving, and the .mjs extension is seen as awkward but necessary during the transition. Experimental APIs like face detection are worth exploring because they can enable useful, fun projects and help shape future standards.

Data Points: Conference dates for Fluent: June 11th to 14th - O'Reilly Fluent Conference timing mentioned in the sponsor segment Conference location: San Jose Convention Center, San Jose, California - Fluent Conference venue Pop Motion/Pose project usage: Level Up login system rebuilt using Pop Motion Pose - Scott describes adopting the library in a real project Web Animations API browser support: Safari: not so good; iOS Safari: definitely not so good; Firefox: full support; Chrome: partial support; Edge and IE: totally red - Support status described verbally during discussion of the API Face detection test result: Detected all family faces, eyes, and mouth - Scott’s experiment with the Face Detection API on a family photo Text-to-speech voices on Chrome on Mac: About 60 different voices - Scott notes voice availability on OS X via Chrome Text-to-speech voices on Windows/other: Only 3 or 4 voices - Comparison with Mac voice options Coding font price: 40 pounds (about 55 USD) - Dank Mono pricing at the time of recording Operator Mono price: 200 bucks - Comparison point for the new coding font BigInt proposal stage: Stage three - BigInt noted as an ES proposal in progress Rough timeframe for Node modules work: Well over a year - Scott describes how long the Node modules working group has been working on ES modules Conference discount: 20% off with code syntax - Fluent Conference promotional code

Pivotal Quotes: "who knows better than the browser what elements are actually on the page?" — Scott: Explaining why Intersection Observer is a better fit than manual scroll-position checks "the ideal world we would have no JavaScript involved in how our things look" — Scott: Discussing Resize Observer as a stopgap until CSS element queries become native "the browser or native to the device. And then it will say, Do you want to give your billing information and your shipping information to this website?" — Wes: Describing how the Payment Request API simplifies checkout into a native flow

Implications: Listeners should expect more powerful, standardized browser features that reduce custom code and improve UX. But many are still experimental or unevenly supported, so polyfills, testing, and progressive enhancement remain essential.