10 Nifty Browser APIs

Let's get ready to Syntax.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

This is the podcast taste. With the tastiest web development treats out there today, we've got a show for you on browser APIs.

I would probably call these vanilla Script or or web APIs, things that you can do in the browser that are neat and and what you would use them for. Or we should maybe we should call it Nifty.

That's that's a word we use. Ten nifty browser APIs that we're gonna go through today.

We are sponsored by 3 awesome companies today, Prismic, the headless CMS With the GraphQL and REST API, LogRocket, JavaScript session replay, and FreshBooks cloud accounting. We'll talk about all of those awesome companies partway through the episode.

My name is Wes Bos. I'm a developer from Canada. And with me, as always, is mister Scott Talinski. How are you doing today, Scott?

Oh, I'm doing good.

Feeling fine here, man. We got a dishwasher.

And let me tell you, I've never loved a dishwasher more.

I have been hand washing all my dishes for both the kids, and it takes me, like, an hour and a half every single night. And I've been doing now for, What, like, feels like 8 8, 7, 8 months, like, basically, since we moved into this house, and the dishwasher has finally arrived.

And, man, It feels good. It feels good that I am, like, able to actually put the kids down to bed with Kourtney instead of doing the dishes. So, Yeah. I'm in a good mood because That's good.

Yeah. That dishwasher you bought is unreal. This morning, I was unloading our dishwasher, and we hadn't turned the lights on. It was still kinda dark. And yours has lights inside the freaking dishwasher?

Looks like a spaceship when you open it. That's amazing. The the coolest thing about The dishwasher to me, which sounds stupid, is just how easily the drawers slide on it. Dishwasher drawers, those things be annoying. Right? They get hooked up. They get these these drawers are just, like, almost too smooth. It it's a shock. So, Yeah. I'm a fan of the the dishwasher. Let's just say that. So, yeah, I've been having a good good week here. It's been a been a good week for me. Dishwasher Talk.

Somebody tweeted that they like our podcast because we don't talk about olive oil for the 1st 10 minutes. And I was like, hold on. That's, yeah, actually something we'll probably do.

That is feels like something we might actually do. Pretty sure we've probably done that. I've been doing a lot of, like, outdoor landscaping work this weekend and stuff. Feeling that I cut a giant Tree down, by myself, and I did so for a tree that was next to a power line. It was grown up into the power line, and, It was already kinda leaning, and it was leaning so much that I was thinking, like, man, it would be really great if the wind would just do the the the rest of this job, You know, it it really knocked this thing down. And then we had a super windy day, and it didn't come down, but it just started leaning even more. I was like, you know what? I'm gonna take I'm gonna take care of this, and I'm gonna do it, I guess, as developer y as you can where you're just kind of, like, Taking it 1 step at a time. I have, you know, where I'd like it to end up, where I'd like it to go. And I cut the wedges like you see On YouTube, you cut the wedge and then the wedge, and would you know, a giant 20 foot some or 15 foot tall Free thing landed exactly where I wanted it. Wow. I'm

very impressed with myself. So That's that's good. That's I was, I I I watch a lot of, like, tree disaster where that falls on the house or something like that.

So did you get any hate? I I once a tree on Instagram, and, man, did I get a lot of hate from people? I there's we literally have thousands of trees on our property, and I got skinned alive for taking down a a perfectly fine tree that was going to rot.

Oh, yeah. Well, no. I I didn't get any hate, but if if if To preemptively get inside, this thing was gonna this thing was grown into the power lines. Whoever planted it It's a never have planted it there.

Yeah. It was already had a major lien. It was gonna come down on its own even though it was alive. Like, this thing was a disaster waiting to happen. The last thing I wanted it do was to fall on our patio furniture when I wasn't out there to fall on a kid or the dog or something. So, I took Matters into my own hand, and I I took this thing down. We also have a literal forest at our house, so, one of these trees is not going to make a difference here. Oh, man. Alright. Let's get into it. We got 10 for you here. Number 1 is something that's

probably a lot of you have used is get user media. Get user media is a browser API that allows you to tape. User media. 2 most common of those are going to be your user's webcam as well as Your user's microphone, and there are a whole bunch of other APIs that surround get user media That allow you to access multiple cameras at once. If you go to hair.westboss.com, I wrote a quick little app that Gets every single webcam that's available on your, on your computer and will display it. And I had I had no. I'm not lying. I had 9 webcams. Don't ask me why I have 9 webcams because I went searching through the box of cords.

But I had 9 webcams rolling all at once, and you can you can do it and get the name of the webcam.

If you're doing it on mobile, you can get whether it is a front or a back camera or I forget the the words that they use to describe Describe it. I even ran it on my car's head unit, and it detected the dash cam as a wheel cam. Yeah. I was very happy about that. It crashed After a while, and I didn't dig into why, but

kinda interesting. Is is your dash cam, like, integrated into the car?

No. The the dash cam is its own thing, but it it has a USB interface to power it and also to view. So the the the head unit that I bought has, like, an application for for reviewing the dash cam footage. So it it's smart enough to talk to, to talk to the actual to the USB dash cam, and I I'm assuming it's just the same stuff as a webcam.

Yeah. I mean, there's there's so much you can do With Get User Media overall. And I you know, even just, like, fun stuff. And I do feel like maybe some, like, fun projects are missing from people's Side projects nowadays where you're just like, I'm gonna take my my webcam feed. I'm gonna pipe it into a canvas. I'm gonna apply some effects to it.

Around with the pixels.

Mhmm. There's so much to be done there that's not just like building a Zoom competitor or something where you're utilizing the webcam for practical reasons. Totally. If you go to my I'll shamelessly plug my JavaScript 30.com course,

where we build lots of fun stuff with the webcam and we we apply. It's It's kind of fun because you can take the feed from a webcam. It's called source object. You dump that into a video element. And then once it's in a video element, it's essentially just a, Like a PNG or a JPEG, and you can then dump that into a a canvas element. And then from there, sky's the limit. Right? Yeah. You have access to every pixel.

Every pixel.

Yeah. Yeah. And I think there's a lot there's a lot of potentials there. Alright. The next one here is going to be, an API that is newer, and it's one of my I just did a a course as well. I don't, you know, didn't want this to be a plugasode, But let's do it. I'll plug a sode I'll plug a sode my course sode is, the latest course I've done is about browser API specifically, which is one of the reasons why I wanted to do this episode. My brain's still in the space. And one of the APIs that we did in our course on level up tutorials was for the file system API.

And the file system API is you might be thinking, well, I can upload things already to the web. What do I need the file system API? Well, the file system API is Gives you access to reading files, reading directories, writing to files.

And in under 40 lines of code, In our course, we built an SVG editor. As in you click a button, you select your SVG file, It populates a text area with the SVG code. You can modify it, then you click the save button in browser, and it Saves the file to your local file system.

It doesn't download a new one, which is what many of these currently things the the previous, You know, crop of file editors or those types of things would do in that situation. Right? It doesn't download a ZIP or anything like that. It straight up saves the file On your your file system.

And even on top of that, we build, like, a little directory browser in in no lines, like 50 lines of code where you can Click through directories, go home, open up a file, check out what the file is. And all of this works really stinking well. What what happens is basically you you have a file picker, so you have a function that's show file picker.

That that file picker opens up the native file picker. You can either select a file or a directory based on you can also get a directory picker as well.

You you get access to what's called the handle in or an array of handles. The handle will either be a type of file or a type of directory, then you can choose to go into that directory. Now you have that directory handle. You can then see all of the the file handles inside of that directory handle. And at any given point, You can select a file, modify it, and as long as you have that file handle, which is included in any of the things you're grabbing, you can then Save that file. And the only thing that's going to pop up is a little permissions thing on the the browser to say, hey. This thing's trying to read your write to your file system. Do you want to do that? You just say yes. So it's it's really way easier than you might expect. I mean, I'm talking, like, under 40 lines of Vanilla JS to to get a basic file editor going. Yeah. The they're like the biggest issue with the file system API is compatibility.

But if you're building, like, if you You wanted to, like, take your hand at trying to build, like, you know, fun project like the file explorer using, what's the one, Electron? Electron. Yeah. I could think of Express and Tori, and I'm like, it's not Express.

If you wanted to build an Electron app, then you know you're shipping Chrome. Because this thing is really only supported in Chromium based browsers, and it has some support in Safari. There's, Mostly has support in Safari. I I you know, some of the things are a little bit tougher in Safari. There there's a little bit more red there than what you might expect. In fact, I don't think there's right right support at all in Safari. But if you're using Chrome In a Chromium based anything, then you can utilize this to do some really, really fancy stuff.

No Firefox, no Internet Explorer, obviously.

Some small Safari support. But yeah. Chrome? Yeah. That's where it's at.

That's kinda cool. And it that's not as big of a deal, I Don't think as you might think it is, because a lot of the use case for file system APIs is if you're working in, like like we said, electron application.

And in that case, it's it's literally only running in in a Chrome environment.

It's it says on MDN, it says the interface will will not you access to the user's file system instead. You have a virtual drive within the browser sandbox. If you want to gain access to the user's file system and need to invoke the user, Example, by installing a Chrome extension, the relevant Chrome API can be found here. So it looks like you can use it in Firefox, but it is only is read only, and it isn't like a sandbox.

Mhmm. I'm not sure how you would eventually get that out of Firefox. And that's it's a tricky thing because as soon as you cross that bridge from being in a sandbox of the browser Into your user's computer, then you open up a world of potential issues and security issues where You can access your users' files. Right? There's a reason why websites have been pretty safe, and there's a reason that's also one of the reasons why, the iPhone never wanted to do Flash because that's a third party thing that is running locally on your device. It's not running in the browser. It's running on your computer, and it can access your whole computer's file system.

That's a possible security issue there too.

Yeah. What's that Windows file that it was like a common troll back, and then they just say delete system 32 or whatever it was on. Yeah. You you could have a delete system 32. Yeah. Let's do one more for our our ad break, and that's geolocation. This one's been around

For a very long time, for some reason, I still think of this as a as a new browser API Yeah. As HTML five browser API. But, literally, it's I've been around for for 12 years, and geolocation is navigator.geolocation., and you can get a couple things. You can watch the current position, And that will tell you when the user's location is updated. You can get just you can just get the location once. That's good for, like, if you have a map or something like that and you just wanna, Instead of having to ask a user to type in their postal code, you can just automatically zone them in. Although, like, let's Talk about that for a second. Isn't it annoying when you go to a website right away and the first thing it asks you is, can I have access to your location? It's like, no. No. For what? And then, like, later on, you're like, oh, because you wanna find the closest store to me. Like, ask me that When I want to find that. Right? Not because I'm gonna say no, and it's gonna block it. It's it's very hard to get regular users to unblock Those geolocation things, once they've blocked it, because it's it's kind of a weird UI in in your browsers, especially on mobile. Yeah. I was on

Home Depot Home Depot web website last night. Who I was thinking of. Yeah. It's funny that you mentioned that because I was just on I was Home Depot last night, And I opened Home Depot, and it's like, where are you? What are you doing right now? Who are you with? And I'm just like, I'm not willing to divulge At Home Depot.

And and it's it's so weird how it it makes you feel a little uncomfortable when it prompts you. Yeah. Have it prompt you if you're if you wanna do, like, select your store, then let it prompt you. But don't don't prompt me when I just open the website. That's And and the the other thing about that is,

like, I'm visiting homedepot.com, and that's for the American. But it it tells that I'm the closest Home Depot to me is in Niagara Falls, which is true. It's right across the border. But I haven't yet given it access to my location. So I think you can get pretty close Yeah. With server side stuff And then get a little more closer when you ask for access. So yeah. Come on, Home Depot. Come on,

tape. Data back in CMSs. Why aren't you so cool like, one of our sponsors today, Prismic?

Yes. Prismic is a headless CMS that is going to make your websites awesome. So they say generate growth by Rapidly creating strategic on brand pages, assemble them with reusable website selections AKA slices. So You guys know what a headless CMS is. You know what a GraphQL API is. What Prismic really doubles down on is this concept of slices, which I like to think of Mapping your data pieces to components.

So instead of creating a page on, inside of Prismic, what you can do is you can create, You can obviously create people and users and food. You can create all your different data types. And then With those, you can you can assemble them together and be like, okay.

Let me have a user and a food. And then you that that could be a slice, And and then you can make a slice in Prismic.

You can make your component in whatever end framework you're using, React or Svelte or Vue or Next or Nux or whatever it is.

And it's really cool because then you can click Together all of those slices into a page via the Prismic UI. They give you a whole. You just log in immediately, have a UI. You don't have to create any of that stuff yourself.

And that's awesome for growth and marketing and things like that because you can put together 40 different pages By just taking your existing data and snapping it together. So check it out. It's really good both from, like, the UI, also from, like, a developer point of view. I've built a couple of sites in it myself. Prismic.i0forward/

syntax. Thank you, Prismic, for sponsoring. Next one that we're gonna be talking about is the permissions API. Wes, have you Have you really taken a gander at the permissions API at all?

I'm trying to remember. Oh, yeah. This is having access to things like like notifications and

the clipboard and whatnot, being able to figure out if you are allowed Do something before you go forward with it. Is that what it's for? Yeah. It is for that. But, you know, it it's funny because the permissions API is only supported by a couple of Notable APIs, the clipboard API, the notifications, the push API, and WebMidi, which is WebMidi's kinda its own trouble thing.

And what's interesting about the permissions API is that the the permissions API has really bad support. So you're like, oh, yeah. I'm gonna use the permissions API to check to see if I have permission to do this thing. But I also have Check to see if the permissions API even works at all in the current browser. Or, even then, there's, like, ways that it's, like, implemented differently. So for instance, you could use the the the permissions API to prompt the user ahead of time to get the permission of the thing. Because typically what happens like, let's go to say, You want to access geolocation.

You access the geolocation, then the prompt comes and says, would you like to give this website, Yeah. You know, the location of your firstborn child, and you say yes.

But in this permissions API, the idea here that you could control Roll what user permissions, exist or even check to see their status of directly from JavaScript in the browser.

And let me tell you, this is one of those APIs that I I included it in here to let you know that it it exists, But that you should be very cautious when using it because the support is all over the place. And, I found this to be one of the more frustrating, like, Carrot dangles where it's just like, well, I really want that carrot, but I can't have it.

So yeah.

I find this this very frustrating on the web because if somebody says no to a permission, You have no API in most cases. In in the clipboard notification pushing WebMidi, you do.

But in the rest of them, you have no recourse to fix that, and that can be frustrating for your user. No. I don't wanna give you access to my webcam, and then I go, oh Oh, you needed it my webcam because I need to take a photo of my driver's license or whatever. You know? And and then trying to tell the user how to undo that Is very frustrating, especially on mobile. So, like, what a lot of apps do is they will first pop up a, Like, do you wanna give us access to your webcam? And then they'll they'll have, like, their own UI that says yes or no. And if you say yes, then it'll pop up the users because you only have 1 same with on the iPhone. You really only have 1 shot to ask a user for access to that. And then, Like, I'm I feel like I'm pretty technical, and sometimes I'm just like, oh, freaking how do I how do I change the piece or the yeah. Yeah. Yeah. What is it? The cog icon. Scroll through a list of 40 apps, and, like, that's frustrating that you should be able to undo that, programmatically, it's I don't know. Because that's also frustrating because then it could be misused. Right? Like, someone could just be constantly popping it up. Like, you'd have to, like, It's it's sort of like ad blocking and pop ups. Like, pop ups have their their a good use case, but they are also Can be abused, so they had to, like, tie pop ups to real clicks.

You know? And it's I never remember. That was a big problem. We had pop up blockers.

Yeah. I remember I mean, I I I watch, some some pirated sports content occasionally On, some websites that I don't I I pop ups are just, like, constantly flying in your face, especially on on, iOS. Like, I just So here's a good instance. They they black out all the Colorado Avalanche games in Denver if you don't have Comcast.

And it's like, to watch My local hockey team, I have to go to a a shady website. I have to open it and then get 8,000 pop ups blasted in my face and And close them all, or it opens new tabs on the iPad. And it's just like, yeah, man. Pop ups are still an issue for me. Oh, man. That's crazy.

So, yeah, permissions API.

That's one of those ones. Like, do you think it's gonna get better? Like, what is this still being worked on? Will eventually the permissions API support

all of the ones that we're talking about today? I hope so. In in you know what is at least exciting is that Chrome, of course, our champion Chrome.

For anybody who wants to say, you know, Chrome taking over the web, whatever, just look at the support for stuff like this. They have nothing but green check marks For which APIs are supported here. And to me, this seems like a no brainer for browsers to get on, like permission, Access to query permissions or just to see their status, that feels like something you should have. But the red is Firefox and Safari and, Ios, Safari, obviously, WebView for Android.

So I don't know. There's support for Chrome, Chrome and Android, And occasional support in Firefox.

It's just a bummer that this kind of same pattern emerges all the time, But I would hope so. It does seem like some of it some of them still have little experimental flasks next to the name, and some of them I have little trash cans and exclamation points. But in in my experience, like, the permissions API was the one that I was like, man, it would be really great if I could use tape. You cannot. So yeah.

Next one we have here. I'm gonna let you take this one because I know this is your baby. And this is not something I've used directly. I've used Stuff that uses a web animation API, but not something I've used directly. And I'm just looking at I love some of my favorite Times are just looking through docs on MDN being like, wow. This is a whole different world. So web web

Animations API. Tell me about it. Yeah. The web animations API is basically a way to construct animations with JavaScript and without having to really, dive into CSS animations or transitions.

Now the the thing that's interesting about the web animations API Is basically you create the animation, and then you get access to essentially play, pause, reverse, update, Playback rate, those types of things as if it was like a a movie.

So unlike, like, CSS transitions where you're giving a transition or CSS animations where you're Just attaching an animation to it. Simply creating the animation, like, doesn't do anything.

You have to create the animation and then tell it to go. So you you would be able you'd wanna do that on some sort of Like, we we did it in our Gatsby course, like, on page route. We had a an animation fire.

But yeah.

You you would have to have some kind of event that that triggers this animation or it's just straight up JavaScript so you could have it, Call after you're defining it. And the web animations API is kind of known as being good be because you You don't have a to to use very simple terms here, it's good because you don't have to have a library for it. But it's bad in terms of, Just like with many of these other things like web components and whatever, it's not as good as what the tools are in the Various browser frameworks like Framer Motion, way better.

And, Salt Animation's way better. But actually, in comes A library from the creator of Framer Motion is called Motion 1.

And I would actually recommend checking this out in addition to the web animations API.

Because what this does is it's basically like it's just basically saying, yeah, the the API It's kind of cumbersome for creating animations with the web animation c I API.

And what if we just made it nice? And since it's using browser APIs, what you end up Having is a very small library compared to, you know, a Framer Motion type of deal, and it works in everything. Framer Motion just uses JavaScript

apply CSS properties? Yeah.

And interpolate spring values, things like that. Okay. Yeah. Yeah. Not just, but yeah. Obviously. Okay? Yeah. Because you have to and flip animations, those types of deals as well. So this is going to maybe do less than what Framer Motion would do, But it's gonna work with everything, and the library size is going to be way smaller.

And it's also a very cute website.

Westy, you might like this deep blue and yellow and black. I'm into that. Yep.

Wow.

I I I should say, I don't necessarily think, like, The web animations API being frustrating to use is necessarily a bad thing because there's a lot of stuff in the browser That is just a primitive, and it's meant to be built on top of. And then there's other stuff that's, like, you just use straight up, like Fetch.

Fetch you could you can build stuff on top of Fetch, but you can also just use it straight up, and it's a very ergonomic, to just use directly.

Whereas, like, maybe something like the Web Animations API or some of these other audio APIs that we've we've worked on, they can be very frustrating to work on.

But somebody has made a very nice, like, kind of layer on top of it. Yeah. Totally.

Next one we have here is the resize observer API.

This is one of my favorites. I've been talking about this one in Converse Talks for a while. I use it on my own website.

Basically, when you want to know when an element on the page changes, its width or height or I believe just with their high or no. Where else also where it is on the where it is on the API or sorry. Where it is on the browser.

You can watch those with the resize observer. You can observe them with resize observer.

This is really handy because previously, You would only be able to listen for the window to be resized.

And if, for example like, The example I always gave in my conference talk is if you have a video player on the left and you have a list of videos on the right and the list of videos you can make smaller or larger depending on On your personal preference, then when you make the that when you make the list of videos wider, Then the video itself gets smaller. And if you need to trigger, a bunch of media a bunch of JavaScript, kind of like media queries, but for individual elements. Right? We talked about what's the container queries? Yeah. It's kind of like container queries, but in JavaScript, where you can programmatically wait for something to change, and it can be used for all kinds of stuff. If you want to know is an element currently on the screen or not, If you wanna do something like scroll in or play a play a video once somebody has scrolled into view or pause a video when somebody scrolled away from it, That can be very helpful API.

Yeah. We use it actually. I made a, Svelte heads out there. I made a Svelte action a for container queries that just assigns classes based on the browser width. But let me tell you, I mean, this is like no lines of code. We have a new resize observer.

And then inside of the resize observer, we're just looking at the current node. We're getting its bounding client rect.width.

We have its width, and then we're able to check its width and then change classes based on the dimensions that you've provided in an array.

And it was really easy. I mean, the whole thing is less than 20 lines of code. And, I mean, that goes to show you that resize observer is a pretty viable method Or doing this kind of thing. It it can be you don't wanna go, overboard with it because it it can be a bit hefty, I think, performance wise. But We we use it on every single one of our cards in a giant grid of cards and don't notice a huge issue with that. So Yeah. I've Never ran into issues with resize observer, and I think that's because

the alternative was checking every 300 milliseconds, checking if it changed.

And in this case, the browser the browser knows when elements are on the page or off the page, and the browser knows when elements are bigger or smaller because it's literally painting them to the to the browser. So Who better to tell you when something has changed than the device that is

painting the rectangles to the browser? If you're playing with any of these APIs, you might be hitting some some browser errors.

And a good solution for staying on top of that type of thing, maybe Maybe perhaps you've tried to use the permissions API and it's saying, hey, this don't work, and it broke your thing. Well, you might wanna check out a service like Log Rocket. Because LogRocket is going to give you a video, a scrubbable video replay of what exactly happened that that broke your site, how it happened, the error logs, and all that. So let's say you try to access the permissions API. It's not supported in your browser. Well, it's gonna you're you're gonna be able to see exactly what the user saw when you tried to maybe request their Missions or check the permissions, and then there's an error or something didn't work. You're gonna be able to see exactly what that user experienced.

And not only that, but has added a bunch of new features and tools around just making your users have a better time on the applications that you're writing, The websites that you're creating because we can now not only stop guessing why bugs happen with scribble video replays, but we also Get to see how customers are engaged with the site. So they have new convert, engage, and retain features as well with heat maps and Data driven design decisions. So check it out at logrocket.comforward/ syntax sign up, and you'll get 14 days for free. Thank you, LogRocket, for sponsoring.

Alright. Next one here is the clipboard API. The clipboard API is kind of what it sounds like. You have copy. You got paste. You can copy and paste images and stuff like that. There's a little bit more to it in terms of, like, what's supported in what browser.

But if you're talking basic Reading, like, copying of text.

Copying text is pretty much supported everywhere.

And the caveat is that no Internet Explorer. Who cares? Right? But if you wanna just straight up copy and paste or copy not copy and paste, but copy text, It's as easy as really just saying navigator.

Clipboard.readtext, and then you just pass in some text there, And it returns a promise. That's it.

And it's pretty amazing. That's so great. In fact, I I've been using this a lot. I made a video that you don't need a browser dependency for this. But not only can you read text, you can also write text as well. And when you go to write text, let's say you have an event, you have a paste button.

The paste API for this does require more permissions than the copy one because copy just copies to your clipboard. Right? Paste It's kind of a little bit more invasive if you're thinking about it. Right? Like, what if you had your bank details in your in your clipboard and and then the website's looking at your paste? They can't just look at whatever is in your clipboard without you accepting it.

So with Right Text, when you go to use it, it's gonna fire off a permission to say, hey. Just Trying to access your clipboard. You just say yes, and then it goes through.

And you can you can actually do media and stuff with this too, which is less supported. But But if you're trying to get into just basic copying text and, navigator. Clipboard.readtext,

it couldn't be any easier. Man, it's I I put it into our coupon dashboard so you can copy a coupon.

Yeah. Me too. And,

It's great because, like, you can programmatically copy not just the text that's in there, but it says you can use the coupon coupon for 20% off, $10 off, you know? And it was like, I didn't even have to make a function for it. Just on in an inside an onclick handler.

There's no pen scene. Nothing for it. Not even a function. One one thing I wanna know is, like, can you tell if there is something in Someone's clipboard, because, like, I love that on the iPhone app where it you copy, like, a a one time password and you go back and it says paste From clipboard? I'm like, yes.

That's exactly what I was gonna do. I don't wanna have to hold it for 1.2 seconds and wait for the little bubble to pop up. Just do it

for me. Yeah. You you could. You just read you just, you just read text. I think I've I think I've several times in this past minute Stop the word read with write. So if I did that and you're Yeah. These are. What I would say. Well, what's going on? Yeah. Okay. Well, Either way, yes, it can absolutely read your text with permission. Oh, read text. You're right. Yep.

And it can, it but it will prompt you first. So it will come up with a little browser prompt to say, hey. This thing's trying to read what's in your clipboard.

And then after it reads that, then it can Check to see if it or you could check to see if it is a specific type of thing. Whatever. Matches 6 characters. They're all numbers. Like a bank account.

Could I, yeah, copy this? Beautiful.

Next one we have here is the web storage API.

This includes both sessions session session storage, and local storage. Local storage is probably the most commonly used one. It's a great key value store. You can only store, Text. So if you wanna be able to store, like, objects or numbers or anything like that, it's best to store them as JSON, so that when you pull them out again, they will maintain their structure and their types and and and whatever.

But then there's also session storage. What's the difference between local and session storage, Scott? Session storage

goes away is really what it it comes down to. So when your session is over, then your session storage is gone, where local storage is going to stay there. So, basically, session meaning when the browser or the tab has closed.

So if you store something in the session And the the API, the interface is the same way as storing in local storage. It's just the word session storage and send. But if you store something in session storage, Then close the tab, that thing is gone.

So, you you know, if you I personally don't use session search for anything, so I'd be really interested And I wonder what, like, the use case, is there, Ben?

Yeah. I think, like, what would be very useful is, Like, people at the library are are using the same computer over and over again. Like, you shouldn't be sticking stuff. Even cookies, you shouldn't be sticking stuff In there, that is possible that somebody later is going to be using that that possible login. Right? And I think I think most libraries have, like, a whole wipe sequence that will do wipe it, but not all of them. Right? So that's a good use case. Yeah. They got a they got a wipe sequence.

Yeah. I think we talked about this previously.

Oh, Scott. My kids are learning the wipe sequence right now. That's that's a good one.

I I think we talked about this in the past. Is is session storage shared amongst tabs? Because that's another, although, like, I can't imagine, Like, what's a good use case for that where you have 2 different tabs open and you are different? I hate that one. It's like Like, PayPal used to be this way. You open something in new tab, it's like log in. Like, no. Oh, god.

No. I wanna view this transaction as secondary tab. It's no longer that way ever get more, but Famous.

Yeah. Where are they now? No. They they fixed that, obviously, but that was a frustrating thing.

There's still websites like that where it's like, you cannot open this in a new tab. Why not? So web storage, kind of an interesting one. I use it Quite a bit in my courses just as a way to store data locally.

It's kinda like a little database, and you can just stick stuff in there and Maintain or even even if you seem to temporarily put something, some you're you're filling out a form and somebody refreshes that page, you could Store the data in local search and stick it back in the form. So before we get into the last 2, let's talk about one of our sponsors, which is FreshBooks. Now FreshBooks,

Cloud counting. Wes, do you wanna talk a little bit about cloud accounting with FreshBooks? I do. FreshBooks

is the best way To run your business's accounting. You've got invoices you need to track. You've got expenses.

You've got taxes that need to be remitted.

You've got, Projects that you are billing to different clients. You're trying to track time. You're they could track kilometers now if you're driving for it.

All kinds of awesome stuff. I specifically, one thing I've been using recently is importing all of my expenses directly from the credit card, and then just matching those up with, actual receipts when I need to. And that's great because that makes sure that you oh, I I totally forgot about the Digital Ocean this month. You know? You're not gonna miss any of that stuff, and that's key when you're trying to lower your taxable income. So FreshBooks Really helps you with that. Check it out. Freshbooks.comforward/

syntax. 30 day free trial. No credit card required. Thank you, FreshBooks, for sponsoring. Thick. Alright. Let's get into the last 2 that we wanted to cover in this episode. 1st of being speech synthesis as in text to speech.

And this is 1 another one. You know, it's actually a common theme for me in these browser APIs. They're all way easier with the exception of a couple of them than you might expect.

So, you you think, you know, it was really easy to make them the Mac talk a long time ago. You know, that was always a fun thing. You pop up and text it and you make the Mac say, better, happier, you know, radio head thing or whatever. Yeah. But You could do this in the browser so easily, and it definitely is one of those ones that you can get some use case out of. Me, personally, I built a, I built a dance app, And I wanted to I wanted the dance app to shout different dance moves at me while I was dancing so that I I, like, didn't know what was coming up. It was sort of, like, randomized. Right? So I get a big old array of all my dance moves, and then every, like, 20 seconds, it will shout at me like a new thing to do. So that way I can get used to doing things in different orders and patterns. And it was so easy to just hook up and to get this going in absolutely no time. And you could do even more than just, hey. Here's a a text.

Click play and have the speech. You could change the pitch. You can change the voice.

You can change the speed. You can do anything you want. And in my course, What we do is we just have, like, a text input box you can type in, you click play, you can tweak it that way. And it you'll see very quickly just how simple it is to get text to speech. But, Honestly, I would I was one of those ones I was shocked as, like, it feels

just too easy to do it. You know? Feels too easy. Yeah. I've I use them in my JavaScript 30 course, and I recently put out a tweet with speech synthesis in it. And It literally fits into a tweet to be able to speak something to the user.

It's unreal how quick it is. There's different voices that you can get. The max ports way more voices. So, a lot of these APIs are just reaching and using system APIs.

So on Windows, there's I don't know. What whatever, Microsoft Bob or whatever the voice is on on that. And then there's, like, 15 There's, like, 15 voices on on there. You can also change the pitch and tone of the actual voice so you can make it sound like a chipmunk.

And, we made we I'm just gonna keep plugging my own course. JavaScript thirty, it's free. I don't I I'm not I'm not making money off this thing, but, we make this thing called the voice inator 5,000 Where you can type in what you want. You can change the rate, so how fast it goes in the pitch.

It's really, really fun. I love Those ones. And that's also a really good one. If you're new to coding, that's one you should try because, like, how empowering is that? In Six lines of code. You all of a sudden have something speaking back to you. Yeah. For real. It

is fun. It's also just straight up fun. I'm glad you gave yours a fun name because that's That's part of what makes it nice. Exactly. It's a,

a very well supported API. I'm just looking at the The speech synthesis is not supported in Opera Android, WebView Android, and Internet so, like, nowhere where you'd probably wanna use it. Everywhere else, it is extremely well supported, which is really good. The next one we have here is speech recognition, and this is the opposite. So it's it's text to speech, not not speech to text.

And this one will take your microphone

feed. It's speech to text, not text to speech.

Yes. What did I say? I I think the opposite of that, but I also might have just heard the opposite.

Okay. It's whatever you're saying to text.

So it will recognize what you are saying, And it's really good because, you can pass it, set up grammars, what language you're speaking, whether you want it continuous.

So as you are speaking, it will stream results in. So if you think about Siri or Google Home or Alexa, if you are talking to it, you see it's tape. It's changing what you think you're saying as you're talking, and you can stream in those results.

And then it will fire off an end event once it thinks you're done talking, team, and then it will it'll also give you a, a bunch of alternatives.

And there's, like, a there's, like, a number for how confident It thinks it is. I forget what it is. It'll tell you how confident it is in the words that you're saying.

And I made a game that it was called, the web speech colors game where you have I put every color in CSS.

Blue, green, red, pale goldenrod yellow is actually a CSS color.

Yeah. And you have You try to say all of them as fast as you possibly can. And as you say them, it won't bam, bam, bam, like, knock them off. And it's like a little game, where you can you can speak to it, which is pretty fun.

So it's like those that's a really fun one. Yeah. It doesn't work in Firefox, doesn't work in, opera, which is surprising because it works super well in Chrome, Edge, Safari pretty much across the board, except for grammars. What is grammars? Grammars are the property of speech recognition interface. It returns a set of collection objects that represent the grammars that will be understood by the current speech recognition.

So I guess you just give it a list of words.

And in the example of in the example of things that they're doing. They're passing it goldenrod.

They're passing colors. So I wonder if they took my example when they're writing the docs for this. That's awesome. Woah. Woah. Yeah. Wow. Cool. Cool. We got a cool maybe I get to the bottom of that one. Knows. I'm not gonna take credit for that one, but maybe, because some of them were hard to say. If you wanna say magenta Or khaki or fuchsia.

Ghost white. That's a cool one. Maybe you don't recognize it. You're saying fuchsia was Very fun. Yeah. I I did I I tripped on it because, Paul Irish had a talk, like, a long time ago, and he is always a.

Gotta love Paul Irish. Yeah. But yeah. Cool. We should have him on the show.

He's got stories to tell, I bet. That'd be awesome. If we wanna talk old web stuff, like Yeah.

It seems like that's perfect.

Like a Sunday afternoon podcast of talking with the oldies.

Talking with the oldies. Yes.

Go ahead. Love that. We called it talking with the oldies. I'm sure people would appreciate that.

These are all the APIs we are here to cover. I would say if you want to have a fun weekend or learn a a thing or two, Try to build at least a little example in every single one of these APIs because your eyes will be opened.

And it's it's also a nice, like, little refresh from doing, like, stuff from, like, fetch data from an API, loop over it, display it in whatever Whatever framework you're using, because this stuff is just HTML file. Most of them need a local server to work because the permissions are tied to a origin, like a .com or local host.

And, also, we just say most of these will not work on HTTP.

So if you ever deploy any of these to a website, you must have a SSL certificate,

but they will work on local host because local hosts And SSL certificates are just increasingly common now and increasingly easy to use. So It's almost hard to not have an SSL certificate these days. So It is. Yeah. It's a that I mean, that's very accurate. Cool. Well, that should do it for our browser APIs. There's just an endless amount more. If you want more information on browser APIs, take Wes's, JavaScript 30 course, take my exploring browser APIs course, real world practical examples for all that good stuff. So now is the part of the show we're gonna get into sick picks.

Sick.

Yeah. Sick picks. I have a sick pick, Wes.

Yeah. That is it's a little box here that I got, and it's $15.

And let me show you here. I have I don't know about you, but I have a ton of old either VHS or mini DV or DV tapes, Stuff that's never gonna get transferred it translated elsewhere. And this little $15 box is RCA On one end for the input, and the output is HDMI.

And let me tell you what I did with this thing. I I did my Mini DV camera, RCA to this box, and then I did HDMI to my Elgato Cam Link, the Yep. The capture card that we have. And I've been converting all my DV tapes, which is just So wonderful. And if I have VHS tapes, which I do, is it all VHS player, which I do, that I wanna get Digitized. What I'm gonna do is I'm just gonna connect them to this thing and then record it into QuickTime.

It's been a breeze. It was $15.

If you're like me and you have this kind of stuff and Yeah. You either wanna watch them or whatever, you know, the only other way for me to do this was via FireWire.

FireWire 400.

I mean, you would not believe how difficult it is to get FireWire 400 into a modern MacBook Pro. It is just about impossible. So this thing really saved my bacon. And if you're out there like me with a bunch of old media, yeah, $15, easy easy buy. My dad,

recently moved my grandma out of her house, and he got a box of old VHS's From, like, family movies, and he's doing that right now. He I think he bought the same one, and I have I found a he I had to find him a VCR at a thrift store And put it in. But it's interesting.

I went down the other route, which is, our van.

I didn't realize our van had HDMI in, So I just thought our fan had like, what is that? RCA? The the 3 Yeah. Are they or composite composite? Whatever.

Yeah. And I so I got one of those HDMI to RCA, and then I tried converting, like, an iPad from lightning to HDMI, HDMI to RCA, and none of the apps worked because of copy protection.

They because they're like, no. No. No. You're you're trying to stream this and, like like, capture the output on an analog device. Right? And they said, no. No. No. You're not allowed to do that. So but then I realized we had HDMI, and a lot of the Lightning to HDMI adapters didn't work. They still said, no. No. No. You can't do that. You can't output HDMI, but the official Apple one did work. So I was pretty happy about that. Such

a SHIT show.

I know.

It's HDCP is what it was called.

High bandwidth digital content protection.

And Netflix and Disney plus would not work unless I bought the official Apple one. So there's some special sauce Going on inside of that. There's some sauce in there. Some sauce. I I talked to a bunch of people on Twitter about it as well, and they were like, I have converted a bun there's, like, There's always people on Twitter that have, like, worked in different industries and, like, some people that worked on retrofitting old theaters To work with HDMI. And, like, these theaters have $50,000 projectors. They're not going to upgrade that, but they need HDMI input.

And they said we would just buy, like, a dozen off of Amazon, and random ones would work and random ones wouldn't work. And we don't know why, But, like, I would buy 3 of the same ones, and once you found one that worked, you return the rest. It's crazy. As a projectionist,

as a former projectionist, Wes, I actually went to a projection conference and all that stuff. I got to, you know Oh my gosh. You can know that. Yeah.

I they They, like, made me blog about it when I went there too. My boss was like, can we get some blog posts? I'm like, nobody's gonna read this blog. This blog doesn't even like, we made a blog for a, low level employee to to go to a a projector conference and, like, kinda I'm not even gonna write, like because I don't know why they made me do a blog about it, but I had to do a blog.

Either way, we had those things, situations where, like, we had, like, a giant rack of all sorts of inputs and outputs that would go to the projector. And there would be situations where, like, yeah. If you had this 1 DVD and it doesn't work in this player, just try it in the next one. And if it doesn't work in that player, try it in the next one. And, like, I mean, there were so many weird things like that where you just had weird kind of tech mysteries where it would work or not work. So bizarre.

I got a sick pick.

Slim LED pot lights.

I have put these things in Very many of places. So what these are are these tiny thin like, they're, like, less than like, probably about less than half an inch thick, and you can get them in the common one is 4 inch. You can get them in 6 and 8 inch as well.

And what's so cool about them is that you just have to get, like, a four Inch hole saw.

Drill a hole in your in your ceiling, and then run wire from likely, you already have a ceiling light.

Like, I'll give an example. In my office at the cottage, I put I put, like, a fan light combo in there. It's just not bright enough. It's just like 1 light was not enough in there. So what I'm doing is I I drilled 2 more holes and got 2 of these. They're super bright LED lights, and then you just you just run wire from the main light Tap it off, and you don't need to put junction boxes in the ceiling because the it comes with a junction box. So If you put the wire in this box, you it comes with these little clips. You just push it in, and then you do have to buy 1, like, little strain relief thing at the actual hardware store.

And then you just throw that in the ceiling, and that counts as the junction box.

And they're like $8 at $8 a light. You can get them in all kinds of different colors. I got 1 on my desk right here that I'm testing because I'm not sure what color I want for my new office. I'm not sure if I want, like, a Super white, bright one or if I want, like, a bit of a warmer feel.

But they're just I just put them in so many different places. They're super cheap, super easy to get, And, it just works so well. I think if you have any space that you want to modernize and you already have a ceiling light, Any monkey with a YouTube video can probably figure this out. It's pretty simple. Yeah. Shout out to LEDs.

I just, Yeah. We have, like, a kind of in this older looking chandel not a chandelier. It's not a chandelier, but, like, a light fixture above our kitchen table. That's one of the ones with, like, the candle the gold candle Style lens that are lame. And I didn't buy, like, the little I didn't buy the little flamey ones, but I bought just straight up LEDs.

And Yeah. Like, as I'm installing them, you're just Putting in LED light bulbs. I'm like, these things are so hot, the old ones. It's like the amount of heat That they generate, it's just so indicative of, you know, what kind of energy is going into them. You're just like, wow.

What a what a great thing that this has been for us to have in Yeah. In this world. Right? We we bought,

Like, a couple of years ago, we bought a new thing for our one of our powder rooms, like a overhead light, and we put these beautiful, like, Incand just before Canada banned all these incandescence, we put these, like, beautiful round bulbs in them. And, like, you walk in there The with the door closed, they're like, it's hot in here from the lights. Like, how much is this costing me to run Right. All these LEDs or all these incandescence? So We've in Canada, you it's very hard to buy a incandescent light anymore unless you have, like, a very special use case, which is becoming less and less.

Like, if you have, like, an easy bake oven, you you want the cup.

Literally, that's what I had to buy.

My daughter's easy bake oven broke, And I cracked it open, and it's just a 100 watt light bulb.

And, like, it is this is the bulb. Here. Yeah. I had a creepy crawlers. I know all about that.

Oh, it could be close to the best.

Yeah. But luckily, you could still buy a 100 watt light bulbs because they're considered, like, work lights, Which makes no sense because you can get a 1000 times brighter LED light for working than a than a light bulb. But I think a lot of people have these old There it's, like, super thick. But luckily, I could find a 100 watt light bulb, and we're cooking again. Hey. I got a, you know, quick before we wrap up here.

I I saw that you were talking about on your your new office. It'd be really nice to have, like, an outdoor light that said that you were recording out of your Yeah. Office.

So I have Kind of this setup, but I can't get it into a way that is that interesting or nice. I wanna hear maybe what you or the audience has to think about this. I have a Hue, Phillips Hue light bulb that is red on the outside of my door, and it isn't like a little light fixture. And it works as red, but I have not found a good ergonomic way To have it turn on while I'm recording.

Like, I have this you know, what actually be really great is I have this the stream deck, which is just a little macro pad. I would love just to work on there, but you can't, like, connect any of that stuff to any of that stuff. That's the worst part about home automation stuff is that there's always, like, A gap there where I'm like, I just wanna connect this. So if anyone out there has a good idea on how to connect Phillips Hue bulb to a hardware button, Let me know. You've got to be able to,

like, code up a little serverless function that hits the Phillips Hue API. And, like, you can you not make buttons on the stream deck Do whatever you want.

Yeah. I don't know. You know? So here's my idea. Cutting out like this is so weird. Yeah. That's okay. I think it sounds okay.

I think the instead of explicitly turning it on and off, you should Figure out like, what I do is when I hit record, I hit f nineteen, and it also turns my computer into do not disturb mode.

So you could write something on your computer that constantly checks if you are in do not disturb mode. And if you are in do not disturb mode, then ping Phillips Hue to turn on that light because then you don't even have to think about it.

Lever. Clever, man. Passives. Yeah. Yeah. Like, You don't even have to oh, I forgot to turn it on. You know? Like, as long as it knows that you're recording or, like, could you figure out what recording your software if it is currently In record mode.

I don't know. I think do not disturb is better because then you could also just flip that on anytime you want.

Now I wanna do it. Yep. Now I wanna do it. Yeah. I wanna get, like, a on air sign and and, yeah, have it Yeah.

Figure on air. Yes. I'm trying to run by Jesse. That's a good my my new office, I'm trying to think about what wiring I wanna run everywhere.

So I didn't think of that. Now that now that you said, I'm in.

Make sure you get that Ethernet.

Yeah. Yeah. I'm gonna run. Like, Is what what else would you run? Like, I'm going to run 2 cat 6 Ethernet to my desk. Mhmm. You think that's enough? And And then I'm going to try I'm going to run an empty tube

into the utility room so that I can fish. I'm like, you wouldn't need to run fiber to your desk ever, would you? No. No. No. No. No. Yeah. We have fiber connected in the house and then Ethernet. Yeah. Trying to think about, like, what else would you run, like, I think. Was me and I was doing it from scratch, I would I would, like, get XLR and then have my monitors Oh. Attach through this and have all the XLR.

Like, my buddy, we we were talking about flying my monitors, and he was like, yeah. You really wanna do is is get the XLR It through the walls, and I was like, I'm not gonna do that. But then Is is How would you pipe that into your computer, though? Because you gotta come back For your computer. Well, you just the way professional studios have it is they just have an outlet, like an XLR outlet on the wall.

So you would have like, let's say they were want being flown from the ceiling, you would have XLR plugs into the ceiling, and then that's into the walls, and then an XLR outlet.

Oh. So you can hang a microphone from the ceiling.

You can do any of that. Yeah. When I I well, he he specializes in, like,

recording studio design. So it's a little bit different of an application, but still Yeah. You know. Oh, that's not a bad idea. I thought, like, The longest time I'm like, I would love to put my entire rack in a separate room. Yeah. But he does that. Freaking thunderbolt. Like, Linus Tech Tips did this. He he put a server in a server room, and he ran 1 thunderbolt cable to his monitor.

But then his his wife was complaining. I always have to go and reboot it and, like, like, it doesn't it doesn't work as good as you think it's gonna You know? And I'm like, I don't know if it's if we're there yet. And, like, a thunderbolt cable that's, I don't know, like, a 10 a 100 He is like like $1,000 or something like that. So I don't know if we're we're there yet. Yep. I hear you.

Cool. Well, I'm I we should have a Talk in shop offices episode at some point. It's it's I love talking about this stuff.

Me too. I'm I'm all about it. Alright. Thanks for tuning

in. And oh, no. We got a shamelessly plug. Westboss.comforward/courses.

Buy a course. Gotta get a free one. You name it. Support me or Scott. And, obviously, those are just mine. Scott, how will we support you? Yeah. Don't support me or Scott. Support me and Scott.

Short? No. No. Just joking. Level up tutorials.com is where you can catch all my stuff. We have a new course every single month.

The course that would we just released is on exploring browser APIs. The course before that was on Supabase and Remix where we, John Myers built a real time chat app, and it's incredible.

And then in before that, we had a a course with me doing Svelte three d. So if you like, all of this and more, check it out, level up tutorials.com, and you can get in. We're gonna we're doing a huge redesign right now. So, if you get in before the redesign, you can keep that price, for after the redesign. So, yeah, get in now while you still can.

Yeah.

Thanks everybody for tuning in. Catch you on Friday.

Peace. Peace.

Head on over to Syntax dot f m for a Full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.

Taste.