> Markdown version of [/videos/281-web-apis-you-might-not-know-about?t=1576](https://www.wearedevelopers.com/videos/281-web-apis-you-might-not-know-about?t=1576). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Web APIs you might not know about Why rely on bloated NPM packages when modern browsers can do the heavy lifting? Discover hidden native Web APIs that handle cross-tab communication and barcode detection effortlessly. - **Speakers:** Sasha Shynkevich - **Event:** JavaScript Congress - **Published:** November 24, 2021 - **Duration:** 43:53 - **URL:** https://www.wearedevelopers.com/videos/281-web-apis-you-might-not-know-about ## Summary Frontend development traditionally relies heavily on third-party libraries and complex workarounds to achieve advanced functionality. However, modern browsers have quietly introduced a wealth of powerful, specialized Web APIs that natively extend HTML, CSS, and JavaScript. By tapping directly into these built-in browser features—ranging from device hardware access to cross-tab communication—developers can significantly reduce application payloads, minimize external package dependencies, and build richer, more resilient user experiences. The web platform now seamlessly handles capabilities that previously required heavy external tooling. For instance, the Broadcast Channel API enables seamless data transfer between tabs and iframes entirely off-server, while the offline-capable Barcode Detection API natively parses QR codes. Designing accessible mobile UIs is drastically improved by the Visual Viewport API, which accurately detects true mobile page zoom versus layout viewport constraints. Furthermore, developers can leverage interactive capabilities like the Vibration API for haptic device feedback, or the Presentation API for native screen mirroring across unified networks. Adopting native APIs provides a profound advantage in performance and consistency, though varying browser support necessitates a strategy of progressive enhancement. Crucially, client-side security is also evolving natively; the emerging HTML Sanitizer API aims to robustly strip unsafe code from user-generated content without risking poorly maintained NPM packages. By prioritizing official W3C web standards over arbitrary third-party polyfills, engineering teams can create highly performant ecosystems, utilizing built-in mechanisms like the Performance API for precise debugging and IndexedDB for comprehensive client-side data management. **Keywords:** web api standards, native browser functionalities, progressive enhancement strategies, cross-tab broadcast channel api, native barcode detection, haptic feedback vibration api, visual viewport mobile scaling, native html sanitization, client-side web security frameworks, performance api debugging capabilities, third-party library reduction, web platform hardware access, indexeddb local storage management, server-sent communication events, native contact picker api ## Chapters 1. **Understanding web APIs as native browser extensions** (01:39) — An overview of web APIs as standard extensions to HTML, CSS, and JavaScript. 1. **Exploring document object model and style APIs** (03:27) — Using the visual viewport API for zoom detection alongside other modern DOM capabilities. 1. **Managing data transferring and networking web APIs** (09:35) — Using the broadcast channel API to communicate between tabs and optimize network payloads. 1. **Handling media interactions with modern browser APIs** (13:57) — Detecting QR codes natively and managing screen states with media-focused web APIs. 1. **Integrating physical hardware interactions through device APIs** (19:52) — Adding physical feedback to applications using the vibration API and accessing connected devices. 1. **Securing applications with data management browser APIs** (26:16) — Sanitizing user-generated content and accessing native device data like mobile contacts. 1. **Evolution of web standards and native implementations** (35:03) — The importance of adopting native web standards over third-party polyfills and libraries. ## Related Moments - [Expanding browser capabilities with modern web APIs](https://www.wearedevelopers.com/videos/289-pwas-in-2021) (from "PWAs in 2021") - [Identifying and exploring upcoming web API concepts](https://www.wearedevelopers.com/videos/316-explore-new-web-features-before-everyone-else) (from "Explore new web features before everyone else") - [Expanding web capabilities to rival native applications](https://www.wearedevelopers.com/videos/225-the-state-of-the-web) (from "The State Of The Web") - [Enhancing core browser security with the native HTML Sanitizer API](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More") - [Exploring native core APIs and web standard support](https://www.wearedevelopers.com/videos/1278-getting-started-with-deno-in-production) (from "Getting Started with Deno in Production") - [Recognizing the expanding potential of modern web-based applications](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA") ## Related Articles - [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet) - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [HTML Media Elements and How to Use Them: <video> and <audio>](https://www.wearedevelopers.com/magazine/668-html-media-elements-and-how-to-use-them-video-and-audio) - [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering) ## Related Jobs - [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda** - [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda** - [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda** - [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**