6 or so New Approved and Proposed JavaScript APIs

Instagram, and TikTok, and social accounts. We've been posting, that is 293

Transparently a way to which is going to Two reverses in every browser. It's in every browser. Yeah. I know. I'm just, like, trying to pull these up on MDN right now. So

It's kind of interesting that they the length of items. Oh,

listening to the podcast and you can make it work right now Where you basically have a function you can you can

Reddit has been

every time I see it, I'm like, I should tell it never moves. I'm like, I should tell them like, You ever want to sell that thing? Like, let me know like that. That seems so cool

rid. All placard all over it. It's I've never seen anything like it. And I was like, Oh, no, if you want only the yeah, you would just you would just say give me the immutable array methods, which we have Previously, we mentioned on the show that it was called Import assertions, you don't necessarily know what the end looks like

went with it. Oh, and maybe this is the ECMAScript pattern matching. So the 1st champion, the person basically this is you get and you try to call a method directly on that.

squash third party apps to boost their numbers before their IPO. Yep. So it's like, hey. We're gonna boost we're gonna cut all the third party apps. Our app's gonna see a lot more downloads even though it it sucks big time. I mean, it's one of the worst apps. The desktop experience is brutal. Like, anytime they have, like, a It's brutal. Like a slideshow of images, Test coverage confirmed.

as a motorist, I very appreciate it because both with the static import as well as the dynamic import Syntax.

rid LED lights they have on there. Speaking of, safety in that regard, I

rid The car drive in Japan? Car cars are they drive on the left side of the road in Japan. So Yeah. Obviously.

undergoing some,

on, you know, college football or NHL or whatever, all in that stuff in one one place, sports,

you know, turbulent times. I don't know if you're you're up on any of the Reddit stuff, Wes. Is it the, like, API stuff? Or Yeah. They They basically pulled the Twitter and made their API prohibitively expensive for anybody to build anything on with honestly,

that is right hand drive and it's like has Canada Post is a promise can like when you return a promise and you store it in a variable, there's really only 2 things you can do. You can wait for the thing to be resolved And that will at the time will return to us the next question that has the most upvotes. Right. And then when we're done that one, maybe we'll call that next on that and it'll return

Called Artifacts, the, take until mouse up example we have. What it's doing is it says, okay. Take until mouse up Then,

it's

Or drop a review if you like this show.

but without I I couldn't I I I that's it. I I couldn't, like, really navigate in the menus, but you could Get into the menus. If we we Would you I wonder why it's not too sort too sorted.

and the image is like taken on an iPhone that cut the like bottom 30% off, and you have to click it And go to a separate page to see the entire thing. It's just Let me just tell you. And if you haven't used the actual the the actual native app for it, maybe you have. But the native app is so much even worse than the desktop experience, if if you can believe that. Yeah. It's garbage. I was Apollo for a long time. Yeah. And that's what I was using too. Either way, I really

like 4 or 5 bike rides, right, or more than that.

and there's rid. I see cyclists from so far away now when they have these things on, This is simply just matching

rid. Front and back lights as they're going. And I I actually I just threw a show as well when we were when I was planning the show is we'll do another fundamentals on decorators.

are so bright. You can see them from a mile away.

hit one of the menu buttons, it was just, like, all Japanese language, and I'm just like, oh, great. Rid. Get back to the menu that I wanna get to. I wonder why why are they in Japanese? Maybe it's cheaper to import

but just go on Amazon and take a look at all the different I'm not totally sure about that, and I think that will I think they're leaving it ready. Arrays are objects. So you are setting a property like you would set a property on an object

rid. 25 year old Subaru Kind of like an upsert You would just.

big fan of it. So I'll link up the one I have,

social channels. Beautiful. Thanks for tuning in. Catch you later. Peace. Peace.

And don't forget to subscribe in your podcast player Yes. Go ahead. Sorry. You can explain it. Yeah. So yeah. So observable events. This proposal adds in a a dot on method,

You know how far you are from the side of the road. But when you're when that completely gets reversed, I I found myself being like, I have no idea how close I am to the the guardrail or whatever on the left side, so I'll I'll I'll follow the midline more. But when there's somebody just walking in the middle of the night on on the side of the road, I was just like, oh my god. This is

no bike paths or anything like that. It's just rural roads, right? So I was like, we got to get you some like proper lights to be able to to throw them on your bike. So we have a generator Maybe there's going to be 8 people going through the deli before it's entirely done, But you have to serve 1 at a time before you do the next one. So the You know, you go to the deli, you take a number TypeScript is not going to yell at you. It's going to say, oh, yeah, you're accessing the 10th item. It's probably there. And there's a setting in your tsconfig you can do to change that. But it will allow you And then you just throw them on USB C charger

And they rid. An integer, which is Check them on out. You scoop up code syntax index of the array. You're allowed to do that because

Stressing me out. That was always very scary.

Clips from the show now. So it's

I think you could use it for driving in the dark, but that's not really what this is.

You can't get one from North America. Couldn't get one from North America and probably,

manage to accidentally

And you have what ends up being like a front page. There's even like a commenting system, although a lot of people aren't using the comments Currently, because it's still a a new app, but, man, this app rules. It's really well designed. It functions effortlessly.

Rid.

This is something It's more of just like a really good way to see it. So My wife does a ton of cycling up at our cottage,

that was, like, the scariest part And then that is rid. The mutable array method. So the reversed method,

USPS mail trucks that boot around. Yeah. I we don't I don't we don't really have those in Canada. But every time I go to the States, I'm like, how sick would it be to have a little mail truck to just rid. Rip around, put some off road tires on that thing. Oh, my God. I don't know how much fun that would actually be. I was going to say that.

rid.

$10 off. I'm gonna shamelessly plug the syntax,

ready. People who an iterable or generator let's say you say const data equals 123.

what is, like, very transparent

Have I can tell it which news sources I really don't want to see because sometimes it was giving me a lot of BuzzFeed. And I said, hey, please just don't Never give me anything from BuzzFeed because it was all garbage. Right? Yeah.

and it was all the menus were in Japanese, and it only spoke Japanese. And luckily, you know, I have Half a little Japanese. I took Japanese language in college,

And I have found this neat little app that's new Angus c jest, which is, a library that I use that has each of these things individually, there is a group My function rid. Various,

We should have him on the show. He's a good Twitter follow as well. Yeah. Interesting. Cool. Alright. Let's move into some sick pics. You got a sick pic for me? Like that would be kind of cool to be able to do that rid. It has an example of importing like a nested when I'mI and give me the returned array from it. And then with

I take from Reddit as in, like, where to find hyper specific news on various topics. I wanna find all of the news possible

But you can tweak it, and it it learns if I'm clicking on a lot of links about the Detroit Lions, it's Going to give me more information about the Detroit Lions.

rid. Mail trucks will method

are working on the proposal is Daniel Rosenwasser,

and it's an AI based news aggregate.

of driving in Anguilla on Bing on the left side of the road, And there's no sidewalks, and people just start walking on the side of the road wearing nothing reflective. Oh, okay. Nothing reflective. I I, like, already don't know how far I am From the left side of the road because it's impossible to judge, like Oh, yeah. Because you're on the other side of the car. Yeah. It feels so intuitive.

one of the lead devs behind TypeScript. So I bet that that this is it. Rosenwasser.

and it does so in a really nice way that learns your reading habits. So artifact, It's on a map in place.

Rid Head on over to syntax.fm

there is like this like

and

type of error a promise will reject with because right now it's a pain if a promise rejects you have stage 0, straw man. Stage 1, proposal. Stage ready. To draft but in the case where an object with the key of

Where you could be able to there was a proposal in TypeScript unsubscribe to take rid. Maybe we should explain the problem of iterables to array. So

rid. Or just assert it if you know for sure what type of error it will look like.

different use cases.

type unique product and country groups. And you don't have to do the whole song and dance of Does this exist in the reduced or anything like that? It's I I'm really excited about this one.

to be able to

Again, which is now supported everywhere, so you can do it.

end of the array. So if you pass in a negative one, it's going to give you the last item in the array. And this is definitely how arrays work in Python. And in Python, you're actually able to do brackets Negative one directly when accessing something.

1, Zero through whatever the index is, but also you can use negative numbers to work backwards from the, It'd be nice to Have something similar. I know I don't know if that's exactly what you're referring to because I'm not looking at that. I think it let let's look it up. Rust pattern matching. In Rust pattern matching, I mean, it it rid. Feels very much like

this at method is currently in all browsers. It's a node. It's in Deno. It's everywhere. And this thing allows you to access

in an array puddles everywhere. And it was it was, like, very treacherous. But, hey, I made it, and I feel really good about it. So Awesome. I can do anything now with JavaScript If I can do

I got so much

accessing the correct properties is is a giant pain. So,

Negative two is going to be the 2nd to last. So it's not just negative one. It's any negative number starts at the end and works backwards, making, You know, finding things in arrays or strings very, very nice. Yeah, there's a couple other like benefits to it because every anytime I tweet about it, I get a lot of people like,

in other languages, maybe like Python,

Yeah. Yeah. And I I love I love that.

Coming back to arrays in JavaScript will feel like I gotta I I gotta love this. And, you know, like you have mentioned in here, it even works With strings, you wanna grab the last character from a string. Mhmm. You do dot at negative one. And and likewise,

So

rid. You don't know how many items there will be. That is certainly something They had like a presentation for like, why does we need to add this is if you're working with what type of error a function throws Or type what

an ignorance part on my on my part. I just don't know when when the rid. Proper time to grab that stuff is maybe worthwhile doing a deep dive there and really events, which this one rid is really pretty interesting. And

that I would reach for.

then I I would suppose I would have some of these problems. But I I guess I I just don't reach for

So even though they're not available in any browsers, it looks like,

So,

actual development on them is is coming.

up resolve reject method that you can use in any of your call boxes. Really nice. Yeah.

Being more portable is the key sentence that unlocked this whole thing to me. Because when I was doing research for this, I I wanted The very most thing I wanted to ask you is,

The at method, man, this is something if if you've worked

like, really, what does this solve? Like, what problem does this solve? And and that really succinctly, I think, gets to the heart at it. So, rid Really neat stuff here. I I Yeah. It it's it's funny when proposals like this show up, I I instantly go, okay. I've lived my whole life without something like this. Why do I need Yeah. Why do I need this? Why would I ever need it? It definitely does seem like to help with ergonomics a bit rid. And I'll have that, especially around promises.

rid. It's that's kind of annoying because then you have to put the stream inside of the promise and it's a little bit messy. So just being able to have You're able to just import JSON into your file. No problem.

they show this in the Rid. And the way that we've done that is basically we would create a new array. You would spread all of the items before it and then spread all of the items after it. And then you would have this new array which you could pass to to set state, right? So 2 splice will allow you to say, all right, Remove this item or remove items 2 through 5 write. Where I'm I'll go immediately and log in the show note that we have for the upcoming episode. But this one I was just kind of I was deep into it with TypeScript. I was like, oh,

streams have events like on this is so much better where you simply just say rid Object dot group by, you pass it an array, and then from that, you simply return whatever you want the key to be.

Cool. Well, let's talk about dot at, the at method.

on data on end on start on error. Right. And if you want to convert, if you want to resolve or reject on any of those events, You can go ahead and do that or if you want to import ROM markdown in Node, at least right now. If you're using ES modules in Node,

Another really good example is And it's kind of a pain sometimes, but you can just add a little question mark on there that will explicitly force you to say, let me check that that item is actually what was the name of the stage 2? Let me look that up real quick.

that. All right, let's get into

definitely, I'm gonna say, iffy at large parts of it, and we got we got caught in, like, Thunderstorm on, like, the day that we are furthest away. So I'm it's like pitch black and storming, and there's Oh. Giant hydroplaning That that flow often, and it's probably, SUV,

array and string at

stage 3 candidate.

the let's rattle through what the methods are real quick. So we're going to hit promise. Withresolvers Oh, that's, that is wild. I can't imagine having to do that. Yes. Also, our our Car was a Mazda,

array grouping. And then this last 1, which is array of the key in the accumulator.

crazy observable in TypeScript like you can do it with JSDoc,

on, like, a switched car on the other side of the road, I'm sure we can figure out a keyboard. In an area rid. That was pretty underdeveloped. You know? Their, their roads were errors

promise not all then we will create a new array Are enough to finally say, all right, we have a full set of I would love to be able to import raw text. Yeah, like if you think like what are some use cases for that? Well, if you wanted to import like a bio from somebody and put it in or Little switches an object, right? That's why we have methods Meaning that you might think, Okay, is a bit nicer because it becomes part of the dependency tree and it allows you to see where things go and you can If something is very large in your dependency, you can see exactly so the import assertion or import. Sorry, I keep calling import assertion. That's what it was. Import attribute will allow you to import JSON straight away,

until you get there.

as you are doing work. So you don't necessarily know what the end of it looks like. So if you want to convert that to an array, So once we finish answering a question, we'll say, okay, iterable.next,

wait for each of those 8 people to go through

and they will do them 1 after another. And the at first, I was like, what? rid. Is with of a method, Yeah. So what this does is

or promise not all settled. And there's there's 2 reasons for that is first,

there probably will be 8 people at the deli. And just before you're serving the 8th person, Someone comes and grabs the new ticket. Now you have 9. So the this,

This is one after another, right? It's concurrent.

will allow you to get an array of all the people who visited the deli, but it will if you have all of the functions that need to do the work into it.

as the property of that key. Okay? So a really good example that we have, I grabbed this straight from MDN,

where you have a key.

You can then, in the same sort of callback flow that you have with anything type of JSON,

numbers in an array by even or odd. Right. You have an array that passes in 0 through,

is if you were to have, of vacation brain. So Oh, yeah.

whether or not rid. The number is even or odd. You could just return a string even or odd, and then it's going to put the even numbers into The even array, the odd numbers into the odd number array if, of course, the conditional that you wrote actually checks to make sure that they're even or odd.

you could group easily

you know,

group items in an array, which is something, You know, we kinda have to do fairly frequently. And usually, I'm I'm reaching for something like Lodash Yeah. Or, just to do this for me. So having this in JavaScript is going to be a nice little add on.

the end result is going to be an object positions

easier. So if you do object dot group by and then you re pass in an array.

like filter or any of that stuff. So what it returns here is the key for the object in which it will be stored. So So, basically, this is just a way built into JavaScript that allows you to, stage 3. Looks like they're actually moving. I saw an issue in decorators saying that The Firefox as of 4 days ago, I don't know how long it's been in work, but it looks like Firefox is currently implementing decorators.

pattern matching, Which is stage 1. That's the one I I posted in the show notes here. Yeah. There was something else.

a super powered switch statement. Yeah. Where you can get a little bit fuzzy with it. You can match a couple properties.

Pattern matching.

Reasons why TypeScript said no, we're not going to add the ability to type errors to TypeScript.

And I think this would be a really nice thing. So this was one of the rid When they are done because

ECMAScript

And here are 3 or 4 things that will make that easier in the future.

Rid and this specifically was one of them. Yeah. But I I just trying to find the proposal. All I can find is except if you want to access a value, then you have to switch to square brackets, right? So like, yes,

Yeah. Whenever these things come out, There's everybody always goes, well, why didn't they call it this? Oh, yes. There's always a reason. Yes. But there there often is some sort of like, oh, I didn't think of that. Yeah. I'm not I'm not, saying they did the wrong thing here. I'm saying my brain is gonna have a hard time remembering the e d here.

I guess it's probably a language thing, but that's Yeah. They're all My name is Scott.

where you have dot sort. Right? Dot sort dot to sorted.

But there's just like Splice, there's also going to be 2 spliced, removes items, and dot width, Not being able to do that in JavaScript has always bit me because it's like, oh, I I just wanna do that. And and now we can do it with dotat

So,

but there isn't this isn't actually

I'm gonna I'm gonna, like, I can predict myself writing to sort here all the time.

a replacement of a mutable array method like the others are. Rid. Yeah, I'm a big fan of these. The

the, dot dot with,

they're all e d.

will replace items. Now dot width is interesting because it doesn't Really follow

And the people that use it are

declare their code and declare their event handlers like that.

So seeing these examples and this will allow you to pass the resolved and reject methods rid. To give you a quick rundown of what the different stages are,

you know, grab the the client y and then reduce

there's a reduce to check to see essentially if The mouse has gone the highest it's ever gone in a y position at any point while the mouse was down. So it

rid. One thing I never got into was the whole observable RX JS type of thing.

maybe even not like subscribing,

It's a really nice little snippet in this, but it also really gives an a good example of, I know that's not what we're we're talking about explicitly, but it in Rust is like one of the nicer things in Rust.

rid. But a way that you can interact with this stuff It It has been giving me all of the things that

but for multiple events. I think that's a kind of a cool way to put it. Like promise meets an event handler.

in a very real capacity. So really neat. Yeah. I think this is why

Yeah. I think this is really neat. We put a couple of code snippets in in the show notes, one of which again shows you that filtering, one of which shows you the take until it mouse up. This one's actually really neat because it,

meaning that if it does exist, ESLint rules to stop using

you would or maybe it was the match statement. You could say when it matches And yeah, I guess the benefit of that is that The emplaced method will allow you to

Stage 2 is a draft and more detailed proposal with clear syntax and semantics, as well as an initial specification. So like this is just kind of an idea that's been proposed.

be able to

Yeah. Just to have it a little bit more readable for me. Yeah. Alright. Next up, it is observable

that functions extremely similarly to this. This is actually what I do instead of Trying to do it in a reducer or something fancy.

to say, I don't know if this proposal is even in a stage. Would you call the stage 0, or is this even proposed yet officially? Is in addition to specific content made for those channels, we're also gonna be posting little snippets from our shows. And, rid. You know, if you wanna just get a little bite sized treat here in your social feed about something web dev, maybe you can't sit down and listen to a whole episode, Check out the, syntax.fm Yeah. If you've been waiting for decorators, I know I have. I've been wanting to use them, but just I don't I don't want to use them until till they're in now. Yeah.

bytes,

Yeah. And if you don't want to wait To use something that's very similar to this,

an iterable, have insert.

We give the example of the deli

course, you should buy it to learn JavaScript.

where things can be added to an Iterable on their array.

an Iterable and arrays are what everything in JavaScript is it's

numbers.

a generator of returns in Iterable

that's So you could say, all right, show me people who bought 1 sticker pack by country. Or not. Sorry. How many sticker packs by country? You could just return

another function. So

out scope the resolve and reject like you can bump them out out of scope and return them as variables. And

the way you described it as letting you You pass it into the work.

route handler response into rid. The use case for that, maybe if you needed to type it.

to your or portable triggers to your promise that you then you can then pass those functions into other things. So the way that I think about it is Currently, you have to pass the work into a promise, but I I was tweeted out just this morning from Guillermo from Vercel, drag start, drag end, array. From a sink events, which I saw this and I was just like,

will return the promise, But it will also return the resolve and reject methods for you so that you can you sort of have these like portable

We don't have a pop

and give me the the rid. Okay, so yeah. If you have 5 items, you say, give me 4 forward, right? So maybe you just don't need it. Yeah, maybe it's just a simplifying thing. I don't think so. I think like these 4 were Even or odd as an example.

to popped.

and then

too spliced.

Rid Yeah. Well, like like I guess

have in iterables and generators. Yeah. I I'm down for all of those things.

if we'll continue to see more of these because, yeah, we have spliced to spliced, anywhere else would be the giant pain. But, yeah, it it was funny. Yeah. So in rural areas,

sort to sorted, but We don't it's really thin. So you could probably vertically walk From one direction of the island to the other if you wanted to spend that time. But it was neat. We we rented a car.

like if you look at all the the ones that mutate, the reverse sword splice. Removes the last. Oh, no, sorry. Not pop. You're right. Yeah, but no pop would be

a shift to shift.

browser release notes I I don't know why you would do this, but it's possible different objects in a single go.

and

And help you understand why, when yeah, I think I want that. Rid. So, yeah, good. I'm glad we're on the same page. I'll start with the first one, which is promise. With resolvers. This is currently in stage 3 rid. Are crazy about it, you know, like they absolutely love being able to like CSS selector. Yeah, I was gonna say, yeah, maybe even CSS one day. If you think all the interesting imports we have in like Vite land, right? Like you could just import text raw text in way that you interact with an array Next one we have. I'm just looking for You can't just say, Okay, there's gonna be 8 people today. You say I want an array of all the people, but Really, really cool app. I've been enjoying it quite a bit. Awesome. I have a sick pick today for all the cyclists dot emplace I don't totally see

the list of different proposals, both in the W3C see as well as in ECMA. And you can kind of just like see like, oh, what's going on? What are what are people thinking about? Or like like, what are some things that maybe slipped by me and are are now already in browsers and approved. So we've picked out 6 different ones for you today, and we're going to kind of go through them

off off the bat, you know, useful enough. Maybe not something I will, I'll go nuts on right away, but I'll be happy to have it. Yeah. I'll be happy to have it as a standardized way instead of just doing it from Vite, you know. There said, array reversed. So that's a muted mutable version as in it modifies the current array, but to reversed is an array method that does the same thing. It reverses

There's a question in the proposal here is that we can you to be able to get something like that. Same with the little on the array, and you're not actually adding an item to the array.

But the import a people often call this a deferred, Now that it finally seems like it is coming to the language, let's do a whole show explaining what they are. We have a stable API now. So

it's basically the

And, actually, what is the status of these? What's the current? Let me look up these in browser.

potential new ones.

all of these are going to have a counterpart

So the current status is, we have 2 reversed, let's say 0 through 6. Mhmm. And then you return

reverses an array in place and returns that same, reorder without modifying the original, returning a new one. We also have to sorted, which is the same thing as, sort,

mutable array methods Already that we use somewhat frequently like map, reduce, filter. Those are all immutable array methods. They return a new array.

that that's a kind of obnoxious thing that it it helps with there. Let's talk about the immutable array methods because,

you know, we we love our array methods. We've had several,

But now we have some

like .reverse.

oh, I was and it's because you're you're literally remutating the array every single time you call like something that has a decimal place in it, and it will always floor it. Sorry, pass it a float. A float is something that has decimals and an integer is a whole number.

So first of all, you could just use to add negative one. I know it's good.

Like if we'll start to see method. And if it doesn't exist, it will run the insert. This is currently stage 2. So kind of

.reverse or same with like .pop. Sometimes you want to grab the last item off an array. Rid. Pop is pretty good. But if you care about that data, you're literally removing it from the array. And if you need to access it again later,

Yeah, because Like the reverse one is really tricky, because

Now it's in the backwards order. Right. And

Saves you from having to create copies and then modify those copies. Now you can just do that all in one fell swoop. Exactly. And I'm often wondering That sounds like Yeah, I agree. I think we should do a deep dive on observables. I think we should do a Dive on iterables, Io, the perfect place to see all of your

You could be in trouble. I wonder and then take until, which means basically rid. Intentionally a little bit open so that if we do have more use cases

of working immutably until you Find yourself in one of those weird situations where the array has been modified.

So I've always erred on the side of

immutable wherever possible.

And for the most part, it has made me a much happier developer. I think next 1 we have here is a radar from a sync.

Yeah. I don't give me credit for that one because I pulled it straight from the proposal,

And we couldn't do that in ES modules because that was not part of the spec, right? But now we have this thing called import attributes, And then the thing about Iterable is It was often something that was called.

which allows us to,

it solves the problem and then unsubscribe in another. Most common being Pattern matching, meaning that you could take your error and you could say if it

URLs. Currently, the only one it's unknown, right? Because you don't know what type of error is going to be thrown and you have to write a type guard You can drive on the right side of the road, but you can get right to the mailbox. You can drive right up and put it in. And, at our cottage, There will be no more next and it will say this interval is has been completed. Right. So into the work. That's really handy. Like if you have like a route handler and you have a method that returns something, you can keep your your logic inside the route handler instead of having to pass the like jeep or something like that to a don't know, rid. When I'm not sure what to do is I like to just go through That

I can see is JSON and allow you to say import whatever from JSON with mouse with my left hand or something like that. You know, like, oh, I could never get used to it. But If you can learn to drive

It is And then you say, okay, well, if this person's country already exists in the accumulator, an item from an array like you've got a list of comments and somebody clicks delete on the third of 10 comments.

but I thought it was a nice little, nice little encapsulation of that rid. That distinctly. All right, next one we have here, and this is the 7th. I know we said 6 earlier on, but I realize I would like to add this one as well.

You can't import anything other than rid. Not a big deal. Like all of us can probably figure that out, but it's kind of nice, right? The negative access one is massive, especially like, oh, you say, oh, I'll just Do like items. Length minus 1.

attributes.

Import extremely bright Yeah. I'm looking at it. This looks similar to what I remember. Rid. I should have I should have wrote the link down when I saw it. But usually when I stumble upon this type of stuff, I'm like, Oh, this is going to be good for syntax.

It could be country, could be It's on a map. In place.

that I object of data.

this is probably like half the reduces right hand drive because

Under that key and push them into it. And it's like I saw on Twitter the other day someone's like, what does this mean? Where it's like basically like accumulator

you know? And then what I'll have to do is I'll have to say, okay, this is an array of 100 customers. You loop over every single customer Maybe even one day we'll be able to import And different keyboard or rid. It'd be fun to work on, I think. Alright, shameless plugs. Westboss.com/courses.

And if this person does not exist, touched upon before you call it and you say .next and it will give you the 1st item and you want the 2nd item, you say .next. And I always give in my Beginner JavaScript.com and it's because, like, LEDs have gotten so good. So this is a set of front and back Led lights I'll answer that. Rid. It's first of all, it's cleaner, like literally every other method.

like, let's say I often will want to see how many people bought stickers by country,

is equal to accumulator.country I don't I couldn't find this on the list of the ECMA proposals, and you pass it. You pass it in insert and an update method, product and country, and then I will group them by that they have different flashing patterns. There's a red one for the back and a white one for the front. Right. Just the car.

rid. Country

or a blank array.

A key in a map can be anything, not just a string. It can be an object.

I really hope this makes it because

dot does everything at once.

then take this person and push them into

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

Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking about Six new JavaScript

APIs approved and proposed. Some of these are currently in browsers. Some of them are coming to browsers, and some of them, Well, who knows if they're coming or not, but they have been proposed. My name is Scott Talinski. I'm a developer from Denver. With me as always is Wes Bos. What's up, Wes?

or plug ins. Right? You you have to have a Babel plug in for it or a Vite plug in or something, or perhaps Vite just does it for you.

Yeah. This is fascinating. 1 I would love to see, get some some progress here because, you know, in any given system, you start to import things like JSON. You're almost always reliant on The bundler,

should more than just strings be supported as attribute value? So it was a nice sort of concise syntax that you could just it was really neat to be able to do that. The human brain can figure that stuff out. That's that's That's what makes me want to, like, try weird stuff, like a for what it is, but I was looking up some something So the reason why they couldn't add a negative look up Straight rid. You can use that at for shift and pop, $20 for a set of 2. The USB C charge

But it'll be nice to not to have to to even think about that and have it be a a standard. That'd be nice. Here's here's one for you, a bonus 8. I'm gonna I'm gonna

down the road, then we'd be able to support them.

Rid. But the one

math. Floor math. Random times whatever length.

going to always rid. Convert it down to the integer, which is just 1.

a number 10 for me as well? Now that we Solutions Observables where you can subscribe and

do you have a a,

just assuming that we have, keep going here. Okay. Let's let's see what we got here. I will be talking about decorators. Decorators are So yeah. And that that's a feature that I use all the time in Vite is the raw imports.

chain methods on it, whereas an if statement would break up your chaining. Well, getting into some real world examples. Yeah. Like maybe if we if we were to build like a a real ready. Time question asker

such a pain to me. Yeah, that I've been noticing quite a bit lately is that a lot of cyclists have once this thing happens.

you know, the only the only other way I would

totally. And, you know, I I guess on the the bloat conversation, And if something fits into the key that is returned, it is put into an array with the same way that we have before, methods to work rid. Mutably with arrays. That's great. Yeah. I think moving forward, you know, some people, they they don't truly understand the benefit

like This to be any better is just to be able to use the negative values in the bracket syntax that we already had exist. Yes.

So if I passed it like 1.9999, You could listen for a click on the body and then like filter down for the actual elements that you want. I would make event delegation really easy. You can map over it and then finally subscribe to events.

to do that? Like, what's the point of that? So

Why do we need a method

which is a little bit better than and nothing but you probably still should type guard it.

a redirect property. Then, You know, it's that one. And you can it's just like obviously you can do that with an if statement right now. But

And they eventually closed it because there were some proposals in the future for

then it will run the update

match an object. And then if that's the case, then you can go ahead and

looks like this, which is, yeah, that's neat. Listen rid. For a mouse event, are super simple and I look at them, I go, Oh

And there was a proposal someone said like, hey, let's rid. Add the ability to type quickly

Do what you want with that specific error. This is not specific to errors.

and Who knows if we're going to we're going to see it go anywhere, but I was just kind of sometimes I like to go through the ones that are either denied or rid to to juice them up. So I was LEDs have improved so many different areas, import different types of data from

And, we actually got the island up to Saint Martin for a day, so that was pretty neat. We just took a little ferry, which was an adventure all its own. And you know what? It's a really small island. You could you could probably, for a full archive of all of our shows.

City, town, country called? The country was Anguilla,

and it's a Caribbean island. It's by Saint Martin, Saint Barth's, Kind of that that sort of, area.

Where did you go again? What was the the rid. Are very early on because people are kind of just throwing stuff at the wall to see what works. So in this case, you would instead of you having to check if something exists and then go ahead and set it, That whole jumble of getting a random item is Rid. But like what a lot of people do is that they're like, oh, I'll just reverse it and grab the 1st item because I don't know how many items are are in your right. Right? But reversing it, Well, literally any other method that needs that list of blog posts. Now it's reversed and you run it again.

to us the next one, right. It's sort of just this, like, little thing that you can dip into.

You can also just do that with like a sort the array and

it it Kinda does exactly like what it sounds like. It it makes grouping your items in an array and iterables

and people are continually submitting new questions and up voting those different questions.

where rid. So by calling array. From and passing it to iterable, it will say like, I don't care. Just give me the whole that's that's nice if you want to be able But you kind of care about them together, right? You want to start it. Yeah, yeah. This is such a nice API. I can't wait. I hope that this makes its way in. I also added an entire show on Like a fundamental show on explaining what observables are because I think that would be helpful for the listeners.

Get the data out of it, but it's kind of nice to be able to have an API where you just say .next.next.next.

And we could also put it into an array ready once the whole thing is done with from async. Alright. Next 1 is array grouping, which is currently in stage 2. And this makes it just and this is one which is cycling safety,

Basically, it it turns your event handling into

wait for things to happen.

upheaval of different ideas.

Observables turn event handling, filtering, and termination into rid. Splice it, declarative flow that's easier to understand and compose than today's imperative version,

which is like Smoosh was a big maybe like, okay, your error has a message

of which I did see a little bit of conversation about if dot on was the right thing to call this, of course. This proposal adds a dot on method to event Target that becomes a better version of add event listener.

Mouse move, mouse up. Like those are 2 different events, 2 different event handlers.

And that is really handy when you need to subscribe in 1 event

method that was on here that they're proposing is take until,

A lot of people are asking that, like, why rid Can't why like, why did they have to do make a new method instead of adding negative one to erase syntax? And and do you know the reason why? I had to look it up. No. I actually don't, which is why I wanted to broach this topic. Yeah. So from a file.

negative And you say like error event handler stuff

Square bracket negative one equals, like, you're setting the negative one

that somebody already has everything and then you can filter for things that match what you want. Or if you were doing event delegation,

And by doing that, it would break backwards compatibility. So unfortunately, we were not able to do that. And adding the dot at method allows us to do that negative lookup. Wow. Well, that's interesting. Yeah. No. I I was rid. Having that exact thought, why can't you just augment the language? Right? Interesting. Andrew Luca, I follow him on Twitter. He's probably good follow. I am Andrew Luca On Twitter, he said it's more type safe and I was like, oh, that's interesting.

on a number, and that's why you can put properties on an array. So basically, if you have an array 1, 2, 3 is The flip side to that is promise. Withresolvers

with the square bracket syntax is it's possible.

So you can add literally any properties to an array without adding items to the list of things.

a lane that your your body's telling you not to not to do this turn. Then you go to get the turn signal and the wipers start going. You're like, oh, shoot. That turn you might want to be able to use these things. Yeah. Well, I I'm really excited. I I'm coming back from a rid. Vacationeers, so I'm feeling nice and refreshed, but I also have a little bit

and I had to do that every day for all a whole week. And let me tell you, pulling out of the airport, German for Rosenwasser or something. Wassen Rosenwasser? Yeah. I think that's a the biggest thing for me is, like, when do I reach generators.

So on top of it, you're right about to make a a turn into

My fight or flight, you know, is like firing on all cylinders. Like, do not do this turn, like, which direction you in the And the stocks are switched, so you're either you're hitting the I'm always hitting the,

they had, like, roundabouts and stuff, but let me tell you by, like, day 2, It felt

I got to drive on the left side of the road With a car with the steering wheels on the right side of the car, it's annoying. I'm I've been a Reddit user for a long time. It's annoyed me to no end. So I'm I'm just saying, like, you know what? Maybe I'll find some place new to get my news.

fine doing that drive. Really? Like, I I think it took a couple of days, and then by the by the time I left the trip, I was feeling very confident in that. It it was just a it was a wild experience. And honestly,

wipers when I went to hit the turn signal.

but with asynchronous stuff, Generators can be asynchronous, meaning that with .then or await, or you can pass it to promise all, promise all settled, or you can wait for the thing to reject, right? Like once you actually have a promise in a variable, that's the 2 things that you can

let's say we'll talk about the deli example as well.

iterable thing here,

is really nice in that case because you can simply just say .next, and it will tell you who is next. And at a certain point in time,

you have to wait for the first one to complete

and and you sort of wait for your your number Should be called, and then every time that somebody is free, they push the button and the number goes up. Right? And then once you get to 99, it goes back rid To to 0 and goes through the next one one hundred numbers, right? a module, which means you can't import JSON. And that was something we were able to do with Node before.

list of 8 items and I just want it as a regular array so I can do regular array of with it. I don't necessarily care about the whole And he said, this is really interesting. I hope it doesn't turn into another Smoosh,

as soon as somebody pulls a number, then that person is then added to the queue. So

the 2 spliced is kind of interesting because so often I'll have it so you could do. I think it was with a switch statement streams, that is true in TypeScript by default.

It's pretty cool as well because often if you have an array and you need to update an item, you have to do the same thing. Grab the ones before, put the new updated item in, and then grab the ones after. So .with will allow you to say, all right, give me this array, Oh, wow. Yes. What this API does. I just saw it. Okay.

but with this new item in place x, y, or z. Yeah. And this largely Apparently lasts like 10 hours, which is And what this is, often either convert a And you no longer have to put the math. Floor like that jumble of square brackets, And

you simply just want to remove anger from people being like this is bloat, Wyatt, like, why can't this just like we already have square brackets to access indexes on raise.

You can actually get, Codecov integration here to make sure that all of your code has been properly tested and covered so that You won't be shipping a bug next time you ship any sort of code. So check it out at century. Io. Use coupon code tasty treat, all one word, rid. All lowercase to get 2 months for free. All right. Well, let's get into it. One thing I like to do

that needs to reject or resolve the promise needs to happen inside of that callback. So generally, you're passing if you like, let's say you had a list of blog posts and you're like, Okay, I want to grab rid. The most recent one, but they're listed chronologically.

The work generally needs to happen inside of the promise callback. So you have a new promise or you have That sucks. And if you don't know the length ahead of time because you are Let's say you had a function called Get Items and you want to get the last item from Get Items because it's the most recent. You can just say Get Items dot at negative one. You don't have to store it in a variable first so you can reference its length. Right. That's that's really nice. You can pass it

do. I guess you could also cancel the promise as well.

Can you? No, you can't because no, there's there's no method on it. So you can only wait for it to resolve or reject.

that made your application Yeah. I, I would love this little with keyword. That's really super nice. I think it it looks like something I would love to use. Yeah. But, again, you know, just being JSON

Errors, exceptions, and anything that's going wrong or perhaps even right with your code. You can do performance metrics. You can do profiling, but you can also See every issue that your application's having at a glance. You can solve these problems using Sentry's own tools to be able to dive in further, even getting potentially You could think of it as one of those apps that is is kind of like, you know, an RSS Speed app or anything like that. But in practice, it completely replaces Reddit for me. I tell it what topics I want to to

from AI, which really feels like a superpower when you do it. There's also even session replay so you can see visually what happened You cause the errors They're all e d. That's gonna be hard for me to remember If it feels like I'm, Yeah. There it's an interesting world that We'll tweet it out. Because, I mean,

go astray.

It is So the proposal is considered complete and ready for review, Many times in my career, I've been like, this is weird. It only works every other time. And it's I don't necessarily know how many people there are going to be coming through. So I only once that is done, you can you return to me an array of that. So array from sync will do that for you.

Oh, cool. Yeah. Okay. So you can you could say, all right, map. Inplace. You could give it a key

for maps.

Cool. The

I don't know. It allows you to put something in the map at a certain spot.

I don't know. I have no idea.

In place is this a what what type of data is this on? Emplace.

Accessing like if you have an array of 3 items and you access the 10th item

rid Return from the array before we go forward with it. That's interesting. Yeah. At least that, And if you want to control how or when a promise is resolved or rejected,

rid. Even if you know that it's there, it will always return

the type number or undefined.

which often requires nested calls to add event listener And hard to follow callback change. And I think that really succinctly puts it. This gives you a much more structured

way of working Yeah. You know what? This is actually really interesting. So, you know,

with events

as observables.

and I guess as the different parsers understand different types of imports, I can imagine WebAssembly you have no idea.

with just an import statement straight up. Right? rid. And basically,

might be another one, or this API because you take your element, you can say on click And you can filter so like you can listen on

This one is If you say data unflagged who is And that's really nice because often you use Math. Random when trying to access an item from an array

what? Should we use this? Probably I don't know. Yeah. I'm gonna say, I don't know. I have no idea if we should use this. Yeah. It's, like, It's probably gonna be fine, but it might not be. It also uses a generate or or can be used in, like, generator functions, and that's like a whole world to me that I'm I'm still out on.

Where where we at with the proposal on this one? The the deli doesn't know

It's in Firefox and Safari already. It's already shipped. Stage rid Yeah. It's in stage 2, but it's been shipped in Firefox and Safari. So That's impressive. So, like,

CSS is a big one. If you want to literally inline some CSS in a style tag and import it as a raw text from a file, yeah, I've I've needed to do that many times. You have a really cool note here, which is that they're like Promises, Why? What's the difference between that and like a promise to all an async function and And then all of the logic Hey. I'm pretty excited about this. Syntax is presented by century.

from a markdown file.

Yeah, and like you obviously you can do that with like file system. Read file and what I really like this

Rid. I don't know if I'll use that all that often. A generator is not something I reach for, Probably a lot. Like, before you do the next one. Rid. And you

not even thinking about JavaScript. So Space, whatever. Anything you could possibly want,

Struggling here? Well, I'm probably not struggling. I'm feeling really good, but, you know, you know how it is sometimes you get back. It takes a bit to get back into it. Yeah. It does. Yeah. I've been hanging out on the beach,

including extensive testing and implementation feedback. So like Once it hits stage 3, the browsers generally start to put it in the browser, sometimes even ship it So map has it as well, which is really cool because a benefit of map is that

And you can just try it out. And that's kind of like the last chance to say like, Oh, we missed something major, but almost nothing pops up at stage 3 and then stage 4 is totally finished. So stage 3 is like, I mean, we're going to get it, you know.