Install Nothing: App UIs With Native Browser APIs

Rate this content
Bookmark

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.

Scott Tolinski
Scott Tolinski
31 min
13 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to Browser APIs and Demos

Short description:

Hey, how's everybody doing? I am the co-host of the Syntax Podcast. We're doing a lot over at Syntax. Today, we'll be looking at real demos using HTML, CSS, and JavaScript. These demos showcase new or underutilised browser APIs. No frameworks or build steps required. After showing each API, I'll provide a ship score. I have many demos for this talk, available on my website too.

♪♪♪ Hey, how's everybody doing? Whoo! Sick. Cool. Hey. What's up? My name is Scott Talinsky. I am the co-host of the Syntax Podcast. It's a podcast I do three times a week with Wes Boss. We talk about JavaScript. It's pretty sick. I'm also an executive producer over at Sentry where I get to work on Syntax full-time. In fact, we're doing a lot over at Syntax right now, beyond just the podcast. We have a YouTube channel and a lot going on on the website, so check it out at syntax.fm.

So, what am I going to be talking about today? Well, we're going to be taking a look at some real demos, and all of these demos run entirely on HTML, CSS, and JavaScript. There's no frameworks, nothing, no build steps. These are going to be looking at new or potentially underutilised browser APIs, some of which you've probably seen before, some of which maybe you haven't, and maybe you didn't know you were able to use them today. So, again, all of these demos, they can be loaded directly into Chrome, no build, no framework.

In addition to that, after I show you a new API, I will be giving it a ship score, and that ship score is either going to be you should check it out now, something you should be aware of, you should try it now because it is really coming down the pipe, or you can ship it. You can ship it today. I have a lot of demos, and another QR code for you. I have so many demos for this talk, I couldn't fit them all in the slides, and not only that, I didn't want to spend too much time on the code itself. So I'm going to breeze through a lot of the code, but we're going to talk a lot about the APIs themselves. I will have this available at the end of the talk too, so I'm going to tab forward. You can find it on my website, Tolin.ski as well.

2. Using the Dialogue Element for Modals

Short description:

Have you ever built UIs like modals, menus, mobile navs, drawers, or slideshows? We often reach for JavaScript frameworks to create them. But another option is to use browser APIs. Let's start with the dialogue element, which allows you to create modals with minimal JavaScript. It provides accessibility features and works with React, Vue, and other frameworks. The dialogue element is supported by 96% of browsers, making it a viable choice for shipping your project.

Have you ever built any of the following UIs? A modal, a menu, a mobile nav, a drawer, a slideshow? I would imagine so. These are the types of things that we build all the time, right? Typically, if you're building one of these things, you might reach for your JavaScript framework, right? Me personally, it's really easy to have a state variable and just toggle that state variable, throw a little animation on it, and the next thing you know, you have a modal, right?

But, you know, another thing we might do is head to npm install and bring in who knows what into our application. It could be anything. The first one I'm going to talk about is modals, alerts, and dialogues. The first demo we have here is just a basic modal. This is using the dialogue element in HTML. You can see it is still using JavaScript. In fact, most of these demos will still use JavaScript. We're just going to be using less JavaScript, and so all we're doing here really is some query selectors and calling show modal. Next thing you know, we have a modal. What's so cool about this is it applies a nert to your page so you don't have to do the overflow hidden trick to prevent scrolling. It also gives you keyboard shortcuts so you can hit escape to close it, but in addition to that, it captures your focus so you can start typing right away. All of these accessibility things that we would typically have to code ourselves. But not only that, we hardly have to write any JavaScript to get this working. You can use these techniques exactly with React, Vue, Solid, anything, you can use these techniques, right? It's not beholden to vanilla JS. The dialogue element. Could you ship the dialogue element today, and are you shipping the dialogue element today? Yes. This thing is available in 96 per cent of browsers.

I didn't tell you this, but each time we get a ship it, I'm going to have a break-dancing gif. This guy is the Olympic representative for the Netherlands in the Paris Olympics 2024. This is your Olympic representative. He's really good. All right. So you might have seen 96 per cent, thought, all right, 96 per cent, not 100, but a lot of these things are never going to get to 100, and if you see something 96, 95, anywhere in there, as long as it's supported by the big three, you can imagine that it's most likely shippable. Many of these things have polyfills if you need to support further back. I would imagine a lot of you are shipping Grid today. Grid only has 97.25 if it's unprefixed. Prefixed, even 97.7. Getting into that 97, 96 per cent range is pretty good. So if we wanted to animate this, we could bring in web animations API, or WAPI, and if we open this, you can see we get a nice little animated dialogue.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
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!
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
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.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
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.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
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!
Web Push Notifications Done Right
JSNation 2023JSNation 2023
11 min
Web Push Notifications Done Right
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.
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
JSNation Live 2021JSNation Live 2021
34 min
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
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.

Workshops on related topic

Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
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.