What’s New in Web Development

Episode Summary

Executive Summary: The episode surveys major upcoming web platform changes: new Promise combinators, native lazy loading, CSS Houdini, subgrid progress, ES modules in browsers and Node, PWA installation in the Play Store, scroll snap, aspect-ratio support, and CSS nesting. The hosts emphasize a recurring theme: browsers are absorbing common framework/library patterns, reducing code and improving performance.

Main Topics: Promise static methods: Discussion of Promise.allSettled and Promise.any, how they differ from Promise.all and Promise.race, and why they help handle multiple async operations more flexibly. Native lazy loading for images and iframes: Chrome’s new loading="lazy" attribute for images and iframes is framed as an important browser-native performance win that replaces common third-party lazy-load libraries. CSS Houdini: Exploration of Houdini’s paint worklets and custom painting via JavaScript/Canvas, with examples like custom checkboxes, borders, tooltips, and gradients. Subgrid status: Update on CSS subgrid progress in Firefox and why it matters for aligning nested grid content without extra wrapper hacks. Native ES modules in browser and Node: Browsers gaining module support via type="module" and Node moving toward package.json type-based module resolution instead of forcing .mjs everywhere. Progressive Web Apps in the Play Store: Trusted Web Activities allow PWAs to be published in Google Play, provided they meet technical and performance requirements. CSS quality-of-life features: Scroll snap, smooth scrolling, aspect-ratio, and nesting are presented as practical additions that remove JavaScript workarounds and make layouts more expressive.

Key Arguments: Browsers should own common capabilities like lazy loading, scrolling behavior, and layout alignment because they can deliver them more efficiently than app code or libraries. Promise.allSettled and Promise.any fill important gaps in async control flow by handling success/failure combinations without custom boilerplate. Native lazy loading is a major performance improvement because it reduces initial page weight and can progressively enhance existing markup. CSS Houdini could become a major new creative surface for developers willing to learn Canvas/math, enabling custom visual effects previously impossible in CSS. Subgrid and aspect-ratio solve real layout problems that currently require hacks, making HTML/CSS cleaner and reducing extra wrapper elements. The Node modules update is significant because it preserves good ES module syntax while avoiding the unpopular mandatory .mjs approach. PWAs are moving closer to first-class app distribution, with TWAs already used by major products like Twitter Lite and Instagram Lite.

Data Points: Promise.allSettled stage: Stage 4 - The hosts note that Promise.allSettled is effectively finalized and likely to ship. Promise.any stage: Stage 1 - Promise.any is described as early-stage but likely to move forward due to its proposal author and use case. Lazy loading browser support: Chrome feature launch - Native loading="lazy" is discussed as arriving in Chrome with graceful fallback support. Subgrid timing: Potentially sooner than 2020 - Jen Simmons suggests Firefox work may land earlier than initially expected. Node modules rollout: package.json type field - The new approach uses a package.json type property to choose CommonJS or ESM behavior. UC Browser for Android usage: ~3.5% global usage - Mentioned as a notable browser still needing support for ES modules. PWA performance requirement: 80/100 Lighthouse score - Trusted Web Activities need to meet a performance threshold for Play Store eligibility. TWA examples: Twitter Lite, Google Maps Go, Instagram Lite - Cited as existing Play Store apps using Trusted Web Activities. Subgrid episode reference: Episode 109 - The hosts point listeners to a prior episode on CSS Grid Level 2 / Subgrid. Conference timing: Last conference before baby break - Wes says Jamstack Conf New York is likely his last conference before taking time off for the new baby. Workshop length: A couple hours long - Scott describes a bad workshop that ran for a few hours and relied on an API instead of teaching the technology. Workshop size: 60-some people - Scott describes the intimate wedding attendance, though not a technical data point.

Pivotal Quotes: "“The browser taking over something that it should be taking over.”" — Wes: On native lazy loading for images and iframes replacing library-based solutions. "“I would kill to have a filter grungy.”" — Scott: Expressing excitement about the creative possibilities of CSS Houdini paint worklets. "“The browser developers are learning from the best things of what we do.”" — Wes: On CSS nesting and other features being adopted from preprocessors and common frontend practice.

Implications: The web platform is absorbing many patterns once handled by libraries and preprocessors, which should improve performance, reduce dependencies, and simplify code. Developers who learn these emerging features early may gain a strong advantage.