10 Nifty Browser APIs

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.

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.

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.

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

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

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

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,

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.

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

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,

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

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?

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.

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.

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.

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

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.

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

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,

Yeah. Me too. And,

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.

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?

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

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

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

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,

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.

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.

Talking with the oldies. Yes.

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

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,

a SHIT show.

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 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, if you have, like, an easy bake oven, you you want the cup.

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

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,

Make sure you get that Ethernet.

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.

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

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

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.

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.