10 Nifty Browser APIs

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, the device that is

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/

session

session meaning when the browser or the tab has closed.

Digital Ocean Let's get ready to Syntax.

although, like, I can't imagine,

episode. 1st of being speech synthesis as in text to speech.

Text. So if you wanna be able to store, like, objects or numbers or anything like that, it's best to

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

actual receipts when I need to. And that's great because that makes sure that you oh, I I totally forgot about the like, code up a little serverless function

So if you store something in the session

I I think we talked about this in the past. Is is session storage shared amongst tabs? Because that's another,

goes away To have it turn on while I'm recording.

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 when you want to know when an element on the page changes, Into your user's computer, But somebody has made a very nice, So as you are speaking, it will stream results in. So if you think about Siri or Google 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.

and local storage. Local storage is probably the most commonly used one. It's a great key value store. You can only store, and you can stream in those results.

so that when you pull them out again, they will maintain objects that represent the grammars that will be understood by the current speech recognition.

So,

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 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 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, like, 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, 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 Yeah. As HTML five browser API. But, literally, it's I've been around for for 12 years,

Yeah. Where are they now?

you you know, if you

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.

and then just matching those up with, and then I tried converting, like, an iPad

session storage,

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 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, 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.

is really what it it comes down to. So when your session is over,

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.

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

In there, that is possible that somebody later is going to be using that But then his his wife was complaining. I always have to go and reboot it and, like, I don't know, like, a 10 a 100 He is like like $1,000 HTML file. Most of them need a local server to work because the permissions are tied and then you just you just run wire from the main light that API.

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 Paul Irish had a talk, like, a long time ago, and he is always a.

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.

Yeah. I'm in a good mood because That's good.

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, Digitized. What I'm gonna do is I'm just gonna connect them to this thing and then record it into QuickTime.

taste. With the tastiest web development treats out there today, we've got 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.

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, you might be hitting some and it has some support in Safari. There's, browsers to get on, like permission, 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.

We are sponsored by 3 awesome companies today, Prismic, the headless CMS With the GraphQL and REST API,

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?

is just how easily Electron?

I would probably call these vanilla But then there's also session storage. What's the difference between local and session storage, Scott? Session storage 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 I went down the other route, which is, 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.

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.

LogRocket, where you can you can speak to it, which is pretty fun.

JavaScript session replay, and FreshBooks cloud accounting. We'll talk about all of those awesome companies partway through the episode.

Looks like a spaceship when you open it. That's amazing. The the coolest thing about

yours has lights inside the freaking dishwasher? Yeah. I think we talked about this but

And, man,

Somebody

Oh, I'm doing good.

The dishwasher to me, which sounds stupid,

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.

This is the podcast Yeah. Yeah. I'm gonna run. Like, Is what what else would you run? Like, I'm going to run 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

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, But in this permissions API, the idea here that you could control Roll what user permissions, On your your file system.

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

a show for you on browser 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.

It's HDCP

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

and then have my monitors

Drill a hole in your in your ceiling,

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

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.

And I made a game that it was called,

and then run wire from likely, you already have a ceiling light.

digital content protection.

Talking with the oldies. Yes.

projectors. They're not going to upgrade that, but they need HDMI input.

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

And then it will fire off an end event once it thinks you're done talking, You've got,

you know, the only other way for me to do this was via FireWire.

John Myers built a real time chat app, and it's incredible.

and then you do have to buy 1, like, little strain relief thing at the actual hardware store.

Whatever framework you're using, because this stuff is just Basically, a lot of these APIs are just reaching and using system APIs.

And,

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, VHS's watch those with the resize observer. You can observe them with resize observer.

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

get the XLR 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, 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,

it just works so well. I think if you have any 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.

a SHIT developer y as you can where you're just kind of, like, Side projects nowadays where you're just like, I'm gonna

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?

or something like that. So And Okay. It's whatever you're saying to text.

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 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.

as long as it knows that you're recording or, like, could you figure out and you are So instead of creating a page is what it was called.

RCA to this box, and then I did HDMI 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

which is becoming less and less.

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

Mini DV camera, some some pirated

from lightning to HDMI,

And Netflix and Disney plus would not work unless I bought the official Apple one. So there's some special sauce 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

Sick.

is RCA 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.

our van.

Home or Alexa,

What a what a great thing that this has been for us to have in Yeah. In this world. Right? Just like with many of these other things like web components and whatever, it's not as good

These are all the APIs we are here to cover. I would say if you want to have a fun weekend 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

And Yeah. Like, as I'm installing them, you're just Putting in LED light bulbs. I'm like, these things are 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.

you can pass Yes. Prismic is a headless CMS 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.

you should

easy easy buy. My dad, 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.

fuchsia.

because

If you're like me and you have this kind of stuff and Yeah. You either wanna watch them or whatever,

can probably figure this out. It's pretty simple. Yeah. Shout out to LEDs.

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

except for grammars. What is grammars? was That's a possible security issue there too.

he I had to find him a VCR at a thrift store Script or or web APIs,

it's just so indicative of, you know, what kind of energy is going into them. You're just like, wow.

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, This includes both sessions 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 things like like notifications Phillips Hue to turn on that light And what's so cool about them is that you just have to get, like, a four Inch hole saw.

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.

Any monkey with a YouTube video

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

I cracked it open, and it's just a 100 watt light bulb.

have I put every color in CSS.

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 I don't know if we're we're there yet. Yep. I hear you.

Slim LED pot lights.

team, and then it will it'll also give you a,

a bunch of alternatives.

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, Friday.

talking with the oldies.

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.

Tap it off, and you don't need to put junction boxes in the ceiling of You've got taxes that need to be remitted.

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.

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

In record mode.

And there's, like, a there's, like, a number for how confident

out of her house, and he got a box of old

Elgato Cam Link, the Yep. The capture card that we have. And I've been converting all my DV tapes, which is just On YouTube, you cut the wedge and then the wedge, and would you know, a giant 20 foot some or 15 foot tall

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

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

Thanks everybody for tuning in. Catch you on 1.2 seconds and wait for the little bubble to pop up. Just do it

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,

because then you don't even have to think about it.

So I have

recently moved my grandma

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

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.

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 pretty safe, and there's a reason that's also one of the reasons why,

Oh. Attach through this and have all the XLR.

what recording your software if it is currently

I just, So wonderful. And if I have VHS tapes, which I do, is it all VHS player, which I do, that I wanna get sports content occasionally

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.

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,

it works super well in on, inside of Prismic, what you can do is you can create, You can obviously create people and users and 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.

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

is where you can catch all my stuff. We have a new course every single month.

2 cat 6

Literally, that's what I had to buy.

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

And put it in. But it's interesting.

Now I wanna do it. Yep. Now I wanna do I got a sick pick.

But they're just I just put them in so many different places. They're super cheap, super easy to get, Next one we have here is the resize observer API.

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.

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 That's that's a word we use. Ten nifty browser APIs that we're gonna go through today.

what language you're speaking, whether you want it continuous.

to my 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.

Yeah. We have, like, a kind of in this older looking

Whatever.

output HDMI, but the official Apple one did work. So I was pretty happy about that. Such dashboard so you can copy a coupon.

So I guess you just give it

low level employee to to go to a a projector conference and, like, Make sure you get that Ethernet.

opera, which is surprising we make this thing called the voice inator 5,000 You can make your component in whatever end framework you're using, Like, what's a good use case for that where you have 2 different tabs open to a permission, API is. What Prismic really doubles down on is this concept of slices, which I like to think of growth and marketing and things like that because you can put together Chrome, Edge,

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.

movies, and he's doing that right now. He I think he bought the same one, and I have I found a I have put these things in

On one end for the input, and the output is HDMI.

I think the alternative

FireWire 400.

To work with HDMI. And, like, these theaters have $50,000

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,

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,

everywhere.

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, 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

it. Yeah. I wanna get, like, a on air sign or learn a a thing or two, Try to build at least a little example in every single one of these APIs because

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.

Grammars are the property of speech recognition interface. It returns a set of collection

so

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 Lever. Clever, man. Passives. Yeah. Yeah. Like, You don't even have to oh, I forgot to turn it on. You know? Like,

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

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

I don't know. I think do not disturb is better because then you could also just flip that on it couldn't be any easier. Man, it's I I put it into our coupon So if you ever deploy any of these to a website, you must have a SSL certificate,

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,

We we bought,

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.

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 a list of words.

Taste.

Kind of this setup, but I can't get it into a way that

Safari old theaters Cool. Well, I'm I we should have a 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

to any of that stuff. That's the worst part about home automation stuff is that there's always, like,

And they said we would just buy, like, a dozen anytime you want.

your eyes will be opened.

Like a Sunday afternoon podcast of Figure out like, what I do is when I hit record, I hit f nineteen,

Short? No. No. Just joking. Level up tutorials.com

So it's like those that's a really fun one. Yeah. It doesn't work in Firefox, doesn't work in,

Yeah.

And in the example Opera Android, You would only be able to

goldenrod.

it, set up grammars,

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, 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, It's just a bummer that

and it also turns my computer into do not disturb mode.

Like, my buddy, we we were talking about flying my monitors, and he was like, yeah. You really wanna do is is

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

if you are talking to it, you see it's tape. It's changing what you think you're saying as you're talking,

but then I realized we had HDMI,

The course that would we just released is on exploring browser APIs. The course before that was on Supabase and Remix where we,

I found this to be one of the more frustrating,

and, show.

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 HDMI to RCA, Then the video itself gets smaller. And if you need to trigger, Yeah. With

then the prompt comes and says, would you like to give this website, 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/

your data pieces to components.

I'm trying previously.

like, I'm visiting homedepot.com, No. They they fixed that, obviously, but that was a frustrating thing.

40 different pages

You have no API in most cases. In in the clipboard notification pushing WebMidi, you do.

At Home Depot.

And occasional support in Firefox.

Mapping

server side stuff And then get a little more closer when you ask for access. So yeah. Come on, Home Depot. Come on, the instead of explicitly turning it on and off,

exciting is that So,

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, for after the redesign. So, yeah, get in now while you still can.

but I can't have it.

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.

WebView for Android.

that feels like something you should have. But the red is Firefox and Safari

Like, do you wanna give us access to your webcam?

exist or even check to see their status of directly from JavaScript in the browser.

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

Can be abused, so they had to, like, tie pop ups to real clicks.

And let me tell you, this is one of those APIs that

I'm not willing to divulge as Carrot dangles where it's just like, well, I really want that carrot, 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, 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,

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

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 So on Windows, there's

and, like, that's frustrating that you should be able to to remember. Oh, yeah. This is having access to

I find this this very frustrating Yeah. And I so I got one of those HDMI to RCA,

you could use the the the permissions API to prompt the user ahead of time to get Oh, Scott. My kids are learning the wipe sequence right now. That's that's a good one.

the the permissions API has really bad support. So you're like, oh, yeah. I'm gonna use the permissions API 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

I I included it in here to let you know that it it exists, It's been a breeze. It was $15.

because if somebody says no 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 Talk in shop offices 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/

So, yeah, permissions API.

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 Feeling fine here, man. We got a dishwasher.

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.

programmatically, 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,

Access to query permissions or just to see their status,

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

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.

Yeah. I remember I mean,

So I don't know. There's support for Chrome, Chrome and Android,

On,

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

over the place. And,

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,

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 The speech synthesis is not supported in store them as JSON, can you

So

Is very frustrating, especially on mobile. So, like, what a lot of apps do episode at some point. It's it's I love talking about this stuff.

You access the geolocation, the permission of the thing. Because typically what happens like, let's go to say, You want to access geolocation.

tape. You cannot. So yeah.

Ios, Safari, obviously, Around with the pixels.

But that you should be very cautious when using it because the support is all 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?

is they will first pop up a, I know.

yeah.

awesome. So they say generate growth by And that's awesome for how do I change the piece or the yeah. Yeah. Yeah. What is it? The cog icon. Scroll through a list of 40 apps,

For which APIs are supported here. And to me, this seems like a no brainer for

And what's interesting about the permissions API is that

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

tape. Data back in CMSs. Why aren't you so cool like, one of our sponsors today, Prismic? 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?

You guys know what a headless CMS is. You know what a GraphQL

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

very impressed with myself. So That's that's good. That's I was,

going to rot.

Free thing landed exactly where I wanted it. Wow. I'm 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.

I I I watch a lot of, like, tree disaster where that falls on the house or something like that.

I got skinned alive for taking down a a perfectly fine tree that was

I'm gonna take I'm gonna take care of this, and I'm gonna do it, And and it's it's so weird how

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, Playback rate, those types of things as if it was like a a movie.

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 And let me tell you what I did with this thing. I I did my

and there are a whole bunch of other APIs that surround get user media I don't know. What whatever, Microsoft Bob or whatever the voice is on on that. And then there's, like, 15

take my my

I wrote a quick little app that Gets every single webcam that's available

tape. User media. 2 most common of those are going to be your user's webcam Peace. Peace.

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

And the file system API Click play and have the speech. You could change the pitch. You can change the voice.

That allow you to access multiple cameras at once. If you go to hair.westboss.com, on the web Prismic.

Every pixel.

as well as

webcam feed. I'm gonna pipe it into a canvas. I'm gonna apply some effects to it.

on your,

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 and then you just pass in some text there, And it returns a promise. That's it.

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

kinda interesting. Is is your dash cam, like, integrated into the car? then your session storage is gone, where local storage is going to stay there. So, basically, for me. Yeah. You you could. You just read you just, it's a little box here that I got, and it's $15.

But let's do it. I'll plug a sode I'll plug a sode my course sode is, It's as easy as really just saying navigator.

to talk to the actual to the USB dash cam, and I I'm assuming it's just the same stuff as a webcam.

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 And in that case, it's it's literally only running in in a Chrome environment.

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, 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 Rapidly creating strategic on brand pages, assemble them with reusable website selections AKA slices. So 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,

probably a lot of you have used is get user media. Get user media is a browser API that allows you to

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, The paste API for this

Your user's microphone, It's unreal how quick it is. There's different voices that you can get. The max ports way more voices. So,

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 and you can get them in the common one is 4 inch. You can get them in 6 and 8 inch as well.

because a lot of the use case for file system APIs is if you're working in, like like we said, electron application.

and geolocation is navigator.geolocation., the web speech colors game where you It thinks it is. I forget what it is. It'll tell you how confident it is in the words that you're saying.

That's kinda cool. And it that's not as big of a deal, I Don't think as you might think it is, and

and you can get a couple things. You can watch the current position,

Yeah. What's that Windows file that it was like

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, 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.

cross that bridge from being in a sandbox of the browser

Instead of having to ask a user to type in their postal code, you can just automatically

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

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 its width or height or Oh, it could be close to the best.

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, apply CSS properties? Yeah.

zone them in. Although, like, let's Talk about that for a second. Isn't it annoying when you go to a website

within the browser sandbox. If you want to gain access to the user's file system and need to invoke the user, a very well supported API. I'm just looking at the React or Svelte or Vue or Next or Nux or whatever it is.

Firefox. And that's it's a tricky thing because as soon as you

You can access your users' files. Right? There's a reason why websites have been And, also, we just say most of these will not work on HTTP.

For a very long time, for some reason, I still think of this as a as a new browser API So it will recognize what you are saying, And it's really good because,

that's a third party thing that is running 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.

the iPhone never wanted to do Flash because 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.

Mhmm. I'm not sure how you would eventually get that out of

then you open up a world of potential issues and security issues where

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.

right away

Like, we we did it in our Gatsby course, like, on page route. We had a an animation fire.

like, kind of layer on top of it. Yeah. Totally.

compared to, you know, a Framer Motion type of deal, and it works in everything. Framer Motion just uses JavaScript Salt Animation's way better. But actually, in comes A library from the creator of Framer Motion is called Motion 1.

and then tell it to go. So you you would be able you'd wanna do that on some sort of

as what the tools are in

I I I should say, I don't necessarily think, like,

And interpolate I I I watch, it's just basically saying, yeah, the the API

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.

And it's also a very cute website.

Because what this does is it's basically like And then inside of the resize observer, we're just looking at the current node. We're getting its bounding client rect.width.

where you're giving a transition or CSS animations where you're Just attaching an animation to it. Simply creating the animation, And,

Call after you're defining it. And the web animations API is kind of known as being Me too. I'm I'm all about it. Alright. Thanks for tuning 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 So unlike, like, CSS transitions 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 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 He's got stories to tell, I bet. That'd be awesome. If we wanna talk old web stuff, like Yeah.

You have

Whereas, like, maybe something like the Web Animations API or and and, yeah, have it Yeah.

The web animations API being frustrating to use is necessarily a bad thing because there's a lot of stuff in the browser food. You can create all your different data types. And then With those, you can you can assemble them together and be like, okay.

Now the the thing that's interesting about the web animations API Is basically you create the animation, It's kind of cumbersome for creating animations with the web animation c I API.

play, pause, reverse, update, Yeah. You know, the location of your firstborn child, and you say yes.

dive into CSS animations or transitions.

the

than what Framer Motion would do, But it's gonna work with everything, and the library size is going to be way smaller.

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

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, to a origin, like a .com or local host.

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,

Various browser frameworks like Framer Motion, way better.

to just use directly.

some of these other audio APIs that we've we've worked on, they can be very frustrating to work on.

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,

like, doesn't do anything.

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

Wow.

And then after it reads that, then it can to create the animation

It's great because, like, you can programmatically 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, My daughter's easy bake oven broke, No. The the dash cam is

Yeah. Me too. And, 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 Yeah. We use it actually. I made a,

tell if there is something in Someone's clipboard,

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.

for

That's exactly what I was gonna do. I don't wanna have to hold it for want.

There's no pen scene. Nothing for it. Not even a function. One one thing I wanna know is, like, space that you want to modernize and you already have a ceiling light, and the first thing it asks you is, can I have access to your location? And then you just throw that in the ceiling, and that counts as the junction box.

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

copy not just the text that's in there, but it says you can use the coupon coupon that's, when you make the to store data locally.

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,

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.

Next one we have here is the web storage 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, their structure and their types and and and whatever.

Could I, yeah, copy this? Beautiful.

to reading files, reading directories, Yeah. Sick picks. I have a sick pick, Wes.

And

You you get access to what's called the handle

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

No Firefox, no Internet Explorer, obviously.

Mostly has support And a good some websites that I don't I I pop ups are just, like, constantly flying in your face, especially on on, It seems like that's perfect.

It doesn't download a new one, which is what many of these currently things the the previous, an API that is newer,

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, hot, the old ones. It's like the amount of heat That they generate,

what's the one, I guess, Yeah. That is

Electron. Yeah. I could think of Express and Tori, and I'm like, it's not Express.

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 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?

writing to files.

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 But yeah.

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.

is 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

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,

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,

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

listen for the window to be resized.

Reading, is compatibility.

Svelte heads out there. I made a Svelte action a for container queries that just assigns classes syntax sign up, and you'll get 14 days for free. Thank you, LogRocket, for sponsoring.

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.

overboard with it because it it can be a bit hefty, I think, 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.

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

checking every 300 milliseconds, checking if it changed.

some browser errors.

You can

Yeah. It's kind of like container queries, but in JavaScript,

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 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 and none of the apps worked because of copy protection.

And it was really easy. I mean, the whole thing is less than 20 lines of code. And, Chrome, of course, our champion Chrome.

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.

But if you're talking basic

then

a bunch of media a bunch of JavaScript, kind of like media queries, but for individual elements. Right? We talked about 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,

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, like, Go ahead. Love that. We called it talking with the oldies. I'm sure people would appreciate that.

what's the container queries?

when you make the list of videos wider,

painting the rectangles to the browser? If you're playing with any of these APIs,

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.

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.

This is really handy because previously,

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.

like, copying of text.

Copying text is pretty much supported everywhere.

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

to the user.

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? and then you get access to essentially even then, there's, like, ways that it's, like, implemented differently. So for instance, 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.

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.

which is really good. The next one we have here is speech recognition,

so, like, nowhere where you'd probably wanna use it. Everywhere else, it is extremely well supported, 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 that is going to make your websites

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,

Android, and Internet pretty much across the board, that hits the Phillips Hue API. And, like, you can you not make buttons on the stream deck Do whatever you

WebView

with speech synthesis in it. And It literally fits into a tweet to be able to speak something

and this is the opposite. So it's it's text to speech, not not speech to text.

happier, you know, radio head thing or whatever. Yeah. But You could do this in the browser so easily,

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,

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.

Where you can type in what you want. You can change the rate, so how fast it goes in the pitch.

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 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.

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 I have been hand washing all my dishes for both the kids, 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 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 this one will take your microphone