JS Nation

JSNation 2024

This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.

You might not need as much JS as you think to accomplish common UI patterns with these new native browser APIs. Dive into new and future CSS, HTML and JS APIs that make our code leaner and faster to ship.

Install Nothing: App UIs With Native Browser APIs

Scott Tolinski 

JSNation 2025

Alba Silvente, Fullstack Engineer at Servlug, discusses unlocking web extension power with Vue. Shows demo features and AI API usage. Talks about building extensions, standards, structures, open-source tools, and practical use cases. Explores the simplicity and benefits of web extensions for customization, automation, and time-saving. Mentions varied functionalities like translation, JSON formatting, and form filling using extensions. Exploring form-filling extensions and building web extensions with Manifest V3 and Vue. Understanding the structure and components like pop-up and sidebar pages. Discussing manifest.json for defining extension details, background JavaScript in service worker context, and creating popup and sidebar pages. Discussing the importance of different contexts for popup and sidebar pages, customization with various JavaScript frameworks, and utilizing content scripts to interact with web pages. Communicating with content scripts, configuring settings via the options page, and extending web extensions with various functionalities like overriding home pages, bookmarks, history, and adding options to the context menu. Communicating with browser APIs for web extensions using packages like WebExtension Polyfy and webext. Storing data in web extensions efficiently with specialized storage areas. Simplifying communication between components using the WebX Bridge package for seamless browser API interactions. Using Vite and WXT frameworks for web extension development. Implementing preference configuration and communication flow between components for efficient web extension creation with WXD. Defining items in local storage for preferences and using composable for shared components in web extensions development. Using extension storage for web extension synchronization and integrating AI APIs for text analysis. Exploring Content Script Actions, Background API Communication, and Extension Deployment.

Do you want to automate daily manual tasks or explore extending browser functionality? This talk has you covered; we’ll break down how to build Web Extensions from scratch – covering architecture, state management, Manifest V3, best practices and tools to bring your ideas to life! 🚀

Building Web Extensions With Your Favourite Framework

Alba Silvente Fuentes

Anton Zaldinov, senior software engineer, discusses challenges in third-party script development, emphasizing the importance of defensive coding, performance, debugging, and security. Strategies include adapting to privacy changes, efficient script loading, encapsulation, and thorough testing for reliability and security.

As third-party script developers, we constantly work in environments we don't fully control. We must handle unexpected issues introduced by different browsers, quirky customizations made by the primary developer team, and security restrictions we can't easily bypass. In this introductory-level session, I will share first-hand experiences and practical guidance derived from building and deploying third-party scripts to improve your team's confidence and workflow efficiency.

Third-Party Scripts: Surviving the Wild West of the Web

Anton Zalaldinov

Hemant emphasizes mastering web standards and the collaboration among various organizations. Different groups like WhatWG, ECMA, IETF, Unicode, and IANA manage specific IT standards. Participation in standards organizations varies in cost. Joining W3C, Ecma, or IETF can aid in web standards development. Engaging in global discussions and contributing test cases are crucial. Community involvement drives web standards evolution towards innovation and inclusivity. Understanding the proposal stages and future trends in web standards is essential for developers.

Discover how you can shape the future of the web by contributing to web standards! In this talk, we’ll explore the process of creating and evolving web technologies, the role of standards organizations, and how developers of all levels can get involved. Learn practical steps to contribute your ideas, collaborate with global communities, and ensure the web remains open, accessible, and innovative for everyone.

Contributing to Web Standards

Hemanth HM

Speaker introduces a side project involving JavaScript and iconic car recreation at JS Nation. Nico, a frontend developer, explains the concept of KIT from Knight Rider and its human-like features, emphasizing the use of machine learning in building it. Using Transformers.js involves defining tasks and models, with options like Whisper for transcribing speech to text and Kokoro.js for text to audio conversion. Adding intelligence through LLMs enhances the capabilities of the pipeline. Models small enough to run on device, allowing browser usage using LLM library. Creating engines and new conversations, streaming replies with added tokens for efficiency. Implementing Kit reasoning process for problem-solving and fun in learning and building using LLMs.

In the TV series Knight Rider, the concept of an intelligent car was pure sci-fi. Over 40 years later, we now have the tools to bring it to life - purely in the browser. This talk explores combining AI techniques like RAG and function calling with advanced browser APIs (e.g., WebBluetooth) to create a browser-based AI agent with personality, memory, and autonomy, powered by WebAssembly and WebGPU - fully offline and privacy-preserving!

Let’s Build K.I.T.T. With JavaScript

Nico Martin

Speaker's involvement in Temporal proposal and TC39 meetings for JavaScript standardization. Date conversion challenges faced in development. Addressing time zone discrepancies with Temporal to prevent bugs. Exploration of Temporal types and design philosophy. Usage of Java's time zone serialization in JavaScript Temporal. Challenges in implementing Temporal proposal and its transformative potential in ECMAScript.

This is the story of how I almost spent a night on the street — because of JavaScript's Date object! We'll dive in and try to understand why that happened, and how to prevent it. Luckily coming soon to a browser near you is Temporal, the JavaScript built-in API that makes this kind of mess-up a thing of the past.

Temporal: The Curious Incident of the Wrong Nighttime

 Philip Chimento

Thomas Steiner discusses AI in Chrome, language detection, translation, and summarization using Chrome APIs. He troubleshoots slow performance with the Summarizer API and introduces the Prompt API for text formatting. The development of a multimodal image detector, model interaction enhancements, and utilizing image recognition for prompt responses are demonstrated. The exploration of multimodal conversations with the Prompt API, seamless conversations with PWA, and cross-browser compatibility for Chrome APIs are highlighted.

In this talk, Thomas Steiner from Google Chrome's AI team dives into the various built-in AI APIs that the team is currently exploring. First, there's the exploratory Prompt API that allows for free-form interactions with the Gemini Nano model. Second, there are the different task APIs that are fine-tuned to work well for a particular task like translations, language detection, summarization, and writing or rewriting. After introducing the APIs, the final part of the talk focuses on demos, applications, and use cases unlocked through these APIs.

AI Right in the Browser With Chrome’s Built-in AI APIs

Thomas Steiner

JSNation US

JSNation US 2024

Hello, JS Nation! Today, I'll show you how I created gamified karaoke using Web Speech API. The Web Speech API has two parts: speech recognition and speech to text. It was originally built for karaoke but can also be used for forms and dictation. There are some quirks with the speech recognition API, such as limited microphone input and variation in implementation and privacy concerns across browsers. The speaker demonstrates how to implement speech recognition in a karaoke application and tests its error matching capabilities. Other interesting points include voice interface design considerations and the value of engaging in fun and unproductive side projects.

Voice interfaces surround us daily, helping us with some tasks. But let's forget productivity for a second and experiment with our voice on the Web. We will look at the current state of the Web Speech API, explore its potential in Karaoke, and have some fun!

Unlocking Fun Experiments: Exploring the Web Speech API

Ana Rodrigues

Hi there. I'm Teodor, a web developer building Proxima, an open source analytics platform. In June 2021, a wildfire burned down a huge area near my house in Athens. I had an idea to build a low-cost, open, and accessible device to monitor and alert authorities of fire outbreaks. JavaScript is event-driven and perfect for IoT applications. DeviceScript is a versatile framework for writing code targeting IoT development boards. We can expand device functionality by adding sensors for temperature, humidity, gas, and flames. We can establish a mesh network using Painless Mess for wider coverage. LoRa can be used for off-grid emergency setups. AI and ML techniques can be applied for failure forecasting and running inference on the device. The VALS BME 688 gas sensor can improve detection accuracy. USC team is working on a model to predict high wildfire danger areas. Innovation thrives at the intersection of ideas and technology.

The devastating wildfires that ravaged Europe in 2023, burning an area the size of London, highlight the urgent need for improved fire detection and reporting systems at scale.  In this talk, we will explore how JavaScript and widely available electronics can be combined to create a low-cost, cheap and effective wireless fire detection system. We will deploy this system in a wild forest in Greece and utilize AI models to predict where the next blaze could be sparked.

The Roof Is on Fire?

Theodore Vorillas

Hi, I'm Tony Alisea, a developer with over 25 years of experience. CSS won in the 90s due to its separation of structure and presentation, cascade concept, and powerful selectors. JavaScript developers fell out of love with CSS when they started using frameworks to construct the DOM. Instead of looking at the DOM holistically, we began to think in terms of componentization. CSS has continued to grow and add extraordinary features, such as CSS nesting and cascade layers. CSS layers give more control over the layering of CSS styles. Container queries allow us to respond to the size of the container instead of the viewport. The has pseudo class enables selecting parent elements. CSS is now more component-friendly and improves the user experience.

In a world of components written in JavaScript, CSS became a second-class citizen. But forget the memes. In this talk Tony shows how modern CSS can be a JavaScript developers best friend, saving coding time, and avoiding the kinds of styling problems that use to plague JS devs and have resulted in a myriad of competing CSS abstractions, which may not be so necessary any more.

It’s Time to Fall in Love With CSS (Again)

Tony Alicea

Today's Talk explores modern and secure streaming on the web, covering topics such as segmentation, media source extensions, dash protocol, and encryption/decryption with encrypted media extensions. The MP4 format is discussed, including atom structure and fragmentation. The use of the MPEG-DASH streaming protocol to fragment files and create a dash manifest is explained. Content protection and playback are handled through media source extensions, decryption components, and the creation of decryption keys. A demo is conducted to showcase the preparation, encryption, and playback of encrypted content. The importance of segmentation, media source extensions, encryption, and digital rights management in ensuring smooth and secure content distribution is emphasized.

Media streaming is ubiquitous... We listen to our favourite songs while running, or sitting on the train. We are absorbed by audiobooks written by our favourite authors. We watch TV series or movies with our family and friends. Media streaming is everywhere.. Nowadays, with the increasing number of devices and content, providers must keep pace and provide the most efficient and smooth playback to all users, no matter where they are, no matter what devices they use. They also have to stay compliant, so that no content can be distributed without producers' consent and knowledge. In this talk, we are going to learn how to stream media on the Web. We will learn about the common technologies such as segmentation, adaptive bitrate (ABR) and DASH protocol used to provide an efficient and smooth playback. We will look into details of how decrypting licensed content works thanks to Encrypted Media Extensions (EME). Last but not least, we will see all of these in action, during the demo, at the end of the presentation. If you are interested in learning how the world's biggest streaming companies stream their content, join me for this session.

Modern & Secure Streaming on the Web

Katarzyna Dusza

The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!

In this talk, we will explore how the Browser Rendering API can automate browser tasks, freeing developers from repetitive manual work. We will begin with an overview of Cloudflare Workers and how they enable running JavaScript at the edge. Then, we will discuss browser automation in detail, covering how to interact with the DOM, fill out forms, and scrape data from web pages. We will showcase real-world examples of how browser automation with Cloudflare Workers can improve the user experience of web applications, increase productivity, and automate tasks, such as generating screenshots and PDFs of web pages, testing web applications, and running performance audits. At the end of this talk, attendees will gain a better understanding of how to use the Browser Rendering API to automate browser tasks and take their web development skills to the next level.

Automate the Browser With Workers Browser Rendering API

Gift Egwuenu

Node Congress

Node Congress 2024

The Talk discusses the development of the Jam browser extension, which is a bug reporting tool. It explores the challenges of messaging between different execution environments within a browser and the need for message chunking to overcome size constraints. The Talk also explains how the development team rebuilt the system using a TCP/IP network stack approach, which allowed them to solve messaging difficulties similar to networking problems. The benefits of this approach include a smoother rollout, simpler debugging, and a focus on feature development without worrying about messaging constraints.

Engineering problems often repeat themselves in places you wouldn't expect. Sometimes the best solution has already been invented, in a different corner of the software engineering domain. In this talk, we show how and why we mirrored the TCP/IP network stack to solve a communication problem between different components of a browser extension.

Building a Network Stack for our Browser Extension

Cyrus Roshan

React Summit US

React Summit US 2023

This Talk explores how to use browser and web APIs to enhance React applications, covering categories such as Fetch API, Device APIs, Storage APIs, Audio and Video APIs, and Shape API. It explains how web APIs are implemented in React applications and suggests using native JavaScript functions or NPM modules like React Speech Recognition. The Talk demonstrates the use of Battery and Face Detection APIs in a React application, including features like getting battery percentage, live coordinates, and speech-to-text functionality. It also mentions the possibility of creating augmented reality face filters with the face detection API. The conclusion highlights the availability of resources on Mozilla docs and a GitHub repository for further learning and code samples.

This lightning talk explores how you can enrich your React projects with Web APIs. From handling data to interacting with browser features, attendees will gain insights into leveraging the power of Web APIs for an enriched and efficient React development experience to highlight the out of the box capabilities offered by Browsers.

Beyond JavaScript: Maximizing React With Web APIs

Shivay Lamba

React Advanced

React Advanced 2023

This talk explores hidden web APIs for communicating between iframes and web workers. It discusses the disadvantages of a naive messaging approach and introduces the message channel API as a solution. The speaker also presents a library called message-channel-shake that simplifies message channel implementation. The talk covers various technologies like React, broadcast channel, and transferable objects.

Delve into the world of Web API's - MessageChannel and BroadcastChannel. Explore how these powerful APIs facilitate seamless communication in web workers, iframes, and across tabs. Join us as we uncover the techniques to enhance web interactions and unlock new possibilities. Discover the key to smoother collaboration and improved connectivity in your web projects!

Harnessing the Power of Messagechannel and Broadcastchannel

Daniel Jakobsen

JSNation 2023

This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.

High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!

Pushing the Limits of Video Encoding in Browsers With WebCodecs

Akash Hamirwasia

Let's talk about web push notifications and their benefits. Web push notifications have higher opt-in and click rates compared to traditional methods. The web push API should be used responsibly, with subscription requests initiated only after explicit user action. Improve engagement by using emojis in notifications. Connect with the speaker on LinkedIn for more information about the web push API.

Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.

Web Push Notifications Done Right

Maxim Salnikov

The Chrome Face Detection API is part of the bigger shape detection API and includes text detection and barcode detection. Enabling the API is as simple as opening a specific URL and enabling the experimental feature. The API provides features like detecting faces and processing landmarks, rendering glasses on faces, and applying face filters. It can handle multiple faces and images in videos, but performance depends on hardware and device processing speed. The API is currently in progress and feedback is being requested for potential production capabilities.

In the fast pacing space of social media apps, some functionality could also be used for web applications. I am going to show you how you could use the feature flagged Face Detection API in Chrome. With a demo, we will explore the possibilities to implement face filters in your future projects. With the webcam access of a device, we add glasses by processing a video feed and using it for fun, finding that sweet spot where fun and learning come together.

Create AR Face Filters With the Chrome Face Detection API

Jorrik Klijnsma

JSNation 2022

Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.

Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.

WebHID API: Control Everything via USB

Nikita Dubko

MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!

MIDI in the Browser... Let's Rock the Web!

Jean-Philippe Côté

This Talk introduces the Web Bluetooth API and its role in bridging the gap between browsers and peripheral devices. It covers how to interact with devices using the API, explores creating BLE devices like a buzzer and a small car, and discusses the limitations and availability of the Web Bluetooth API. The Talk also highlights the potential of the Web Audio API for hardware development and mentions the current lack of support for the Web Bluetooth API on iOS devices.

The WebBluetooth API finally closes the gap between the browser and devices around us. And that suddenly opens up a rabbit hole, in which we inevitably encounter a few hurdles - the story of a frontend developer dipping his toes into the IOT world.

WebBluetooth – the Missing Link

Node Congress 2022

Luca, a software engineer at Dinoland Inc., works on the open source Dino CLI project and the cloud compute offering called Dino deploy. They contribute to web standards work for Dino. The Workshop covers writing a utility library that works in Deno, Node, and the browser, utilizing Deno's tooling and enabling publishing to npm. It also includes topics like setting up Deno in VS Code and PowerShell, creating a JSON parse stream, testing, formatting, setting up CI pipelines, making code work in Node, transpiling, and publishing to npm. The Workshop explores automation with CI/CD and Git hooks, using Denobundle for browser compatibility, and importing from CDNs.

This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Writing Universal Modules for Deno, Node and the Browser

Luca Casonato

React Summit

React Summit 2020

React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.

There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualising Front-End Performance Bottlenecks

Richie McColl

JSNation Live

JSNation Live 2021

Service workers provide resilience and make sites faster by intercepting requests and responses, caching assets, and providing fallbacks. They can be used to show critical information when a site goes offline, cache pages for offline access, and improve performance. Service workers can also be used to build multi-page apps with more resilience and less complexity. Caching API responses and gradually adding more complex features are recommended when adopting service workers. Single-page apps are not always the best choice, and different approaches fit different use cases.

Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#browser api