Posts Tagged ‘JulianBurr’
[NDCMelbourne2025] A Look At Modern Web APIs You Might Not Know – Julian Burr
As web technologies evolve, the capabilities of browsers have expanded far beyond their traditional roles, often rendering the need for native applications obsolete for certain functionalities. Julian Burr, a front-end engineer with a passion for design systems, delivers an engaging exploration of modern web APIs at NDC Melbourne 2025. Through his demo application, stopme.io—a stopwatch-as-a-service platform—Julian showcases how these APIs can enhance user experiences while adhering to the principle of progressive enhancement. His talk illuminates the power of web APIs to bridge the gap between web and native app experiences, offering practical insights for developers.
The Philosophy of Progressive Enhancement
Julian begins by championing progressive enhancement, a design philosophy that ensures baseline functionality for all users while delivering enhanced experiences for those with modern browsers. Quoting Mozilla, he defines it as providing essential content to as many users as possible while optimizing for advanced environments. This approach is critical when integrating web APIs, as it prevents over-reliance on features that may not be universally supported. For instance, in stopme.io, Julian ensures core stopwatch functionality remains accessible, with APIs adding value only when available. This philosophy guides his exploration, ensuring inclusivity and robustness in application design.
Observing the Web: Resize and Intersection Observers
The first category Julian explores is observability APIs, starting with the Resize Observer and Intersection Observer. These APIs, widely supported, allow developers to monitor changes in DOM element sizes and visibility within the viewport. In stopme.io, Julian uses the Intersection Observer to load JavaScript chunks only when components become visible, optimizing performance. While CSS container queries address styling needs, these APIs enable dynamic behavioral changes, making them invaluable for frameworks like Astro that rely on code splitting. Julian emphasizes their relevance, as they underpin many modern front-end optimizations, enhancing user experience without compromising accessibility.
Enhancing User Context: Network and Battery Status
Julian then delves into APIs that provide contextual awareness, such as the Page Visibility API, Network Information API, and Battery Status API. The Page Visibility API allows stopme.io to update the browser title bar with the timer status when the tab is inactive, enabling users to multitask. The Network Information API offers insights into connection types, allowing developers to serve lower-resolution assets on cellular networks. Similarly, the Battery Status API warns users of potential disruptions due to low battery, as demonstrated when stopme.io alerts users about long-running timers. Julian cautions about fingerprinting risks, noting that browser vendors intentionally reduce accuracy to protect privacy, aligning with progressive enhancement principles.
Elevating Components: Screen Wake Lock and Vibration
Moving to component enhancement, Julian highlights the Screen Wake Lock and Vibration APIs. The Screen Wake Lock API prevents devices from entering sleep mode during critical tasks, such as keeping stopme.io’s timer visible. The Vibration API adds haptic feedback, like notifying users when a timer finishes, with customizable patterns for engaging effects. Julian stresses user control, suggesting toggles to avoid intrusive experiences. While these APIs—often Chrome-centric—enhance interactivity, Julian underscores the need for fallback options to maintain functionality across browsers, ensuring no user is excluded.
Native-Like Experiences: File System, Clipboard, and Share APIs
Julian showcases APIs that rival native app capabilities, including the File System, Clipboard, and Share APIs. The File System API enables file picker interactions, while the Clipboard API facilitates seamless copy-paste operations. The Share API, used in stopme.io, triggers native sharing dialogs, simplifying content distribution across platforms. These APIs, inspired by tools like Cordova, reflect the web’s evolution toward native-like functionality. Julian notes their security mechanisms, such as transient activation for Clipboard API, which require user interaction to prevent misuse, ensuring both usability and safety.
Streamlining Authentication: Web OTP and Credential Management
Authentication APIs, such as Web OTP and Credential Management, offer seamless login experiences. The Web OTP API automates SMS-based one-time password entry, as demonstrated in stopme.io, where Chrome facilitates code sharing across devices. The Credential Management API streamlines password storage and retrieval, reducing login friction. Julian highlights their synergy with the Web Authentication API, which supports passwordless logins via biometrics. These APIs, widely available, enhance security and user convenience, making them essential for modern web applications.