6 or so New Approved and Proposed JavaScript APIs

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes 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?

Hey. I'm pretty excited about this. Syntax is presented by century.

Io, the perfect place to see all of your 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 Solutions 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 that made your application go astray.

Test coverage confirmed.

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

when I'mI don't know, rid. When I'm not sure what to do is I like to just go through browser release notes and 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 And help you understand why, when

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 of vacation brain. So Oh, yeah.

If it feels like I'm, 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, not even thinking about JavaScript. So

Where did you go again? What was the the

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.

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

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, and I had to do that every day for all a whole week. And let me tell you, pulling out of the airport, 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, wipers when I went to hit the turn signal.

So on top of it, you're right about to make a a turn into 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 they had, like, roundabouts and stuff, but let me tell you by, like, day 2, It felt 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,

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 different keyboard or 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 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

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

that. All right, let's get into the let's rattle through what the methods are real quick. So we're going to hit promise. Withresolvers array and string at the immutable array methods, which we have touched upon before array grouping. And then this last 1, which is crazy observable events, which I saw this and I was just like, 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. To give you a quick rundown of what the different stages are, you have stage 0, straw man. Stage 1, proposal. Stage ready. To draft stage 3 candidate.

So the proposal is considered complete and ready for review, 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 unflagged 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.

And what this is, 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 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 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.

And if you want to control how or when a promise is resolved or rejected, The work generally needs to happen inside of the promise callback. So you have a new promise or you have an async function and And then all of the logic that needs to reject or resolve the promise needs to happen inside of that callback. So generally, you're passing all of the functions that need to do the work into it.

The flip side to that is promise. Withresolvers 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 Little switches 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, and this will allow you to pass the resolved and reject methods 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 route handler response into another function. So you can make it work right now Where you basically have a function you can you can out scope the resolve and reject like you can bump them out out of scope and return them as variables. And that's a people often call this a deferred, and this is what a lot of libraries currently already do. So this will allow you to do that natively with the with resolvers function. Wow. I think that,

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

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

Another really good example is they show this in the They had like a presentation for like, why does we need to add this is if you're working with streams, streams have events like on 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, 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 Straight up resolve reject method that you can use in any of your call boxes. Really nice. Yeah.

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

The at method, man, this is something if if you've worked in other languages, maybe like Python, Coming back to arrays in JavaScript will feel like accessing the correct properties is is a giant pain. So, 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 rid. Various, positions in an array with the same way that we have before, 1, Zero through whatever the index is, but also you can use negative numbers to work backwards from the, 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.

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

So 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 Again, which is now supported everywhere, so you can do it.

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

I got so much 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.

Why do we need a method to do that? Like, what's the point of that? So I'll answer that. Rid. It's first of all, it's cleaner, like literally every other method in way that you interact with an array rid. Is with of a method, except if you want to access a value, then you have to switch to square brackets, right? So like, yes, 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.

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 rid. An integer, which is 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 if I passed it like 1.9999, it's going to always rid. Convert it down to the integer, which is just 1.

And that's really nice because often you use Math. Random when trying to access an item from an array And you no longer have to put the math. Floor like that jumble of square brackets, math. Floor math. Random times whatever length.

That whole jumble of getting a random item is such a pain to me. Yeah,

totally. And, you know, I I guess on the the bloat conversation, you know, the only the only other way I would 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.

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 arrays are what everything in JavaScript is an object, right? That's why we have methods on a number, and that's why you can put properties on an array. So basically, if you have an array 1, 2, 3 And you say let's say you say const data equals 123.

If you say data Square bracket negative one equals, like, you're setting the negative one index of the array. You're allowed to do that because ready. Arrays are objects. So you are setting a property like you would set a property on an object on the array, and you're not actually adding an item to the array.

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

So the reason why they couldn't add a negative look up with the square bracket syntax is it's possible.

I I don't know why you would do this, but it's possible that somebody already has negative properties on their array.

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.

And that is true in TypeScript by default.

Accessing like if you have an array of 3 items and you access the 10th item and you try to call a method directly on that.

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 rid. Even if you know that it's there, it will always return the type number or undefined.

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 rid Return from the array before we go forward with it. That's interesting. Yeah. At least that,

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, mutable array methods Already that we use somewhat frequently like map, reduce, filter. Those are all immutable array methods. They return a new array.

But now we have some potential new ones.

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

So the current status is, we have 2 reversed, 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 basically the all of these are going to have a counterpart that is rid. The mutable array method. So the reversed method, reverses an array in place and returns that same, 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 reorder without modifying the original, returning a new one. We also have to sorted, which is the same thing as, sort, Would you I wonder why it's not too sort too sorted.

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

they're all e d.

They're all e d. That's gonna be hard for me to remember where you have dot sort. Right? Dot sort dot to sorted.

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

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.

But there's just like Splice, there's also going to be 2 spliced, removes items, and dot width, will replace items. Now dot width is interesting because it doesn't Really follow the, dot dot with, but there isn't this isn't actually a replacement of a mutable array method like the others are. Rid. Yeah, I'm a big fan of these. The

the 2 spliced is kind of interesting because so often you simply just want to remove an item from an array like you've got a list of comments and somebody clicks delete on the third of 10 comments.

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 and give me the returned array from it. And then with 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, but with this new item in place x, y, or z. Yeah. And this largely

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

Like if we'll start to see ESLint rules to stop using like .reverse.

Yeah, because Like the reverse one is really tricky, because 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.

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

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.

Now it's in the backwards order. Right. And Many times in my career, I've been like, this is weird. It only works every other time. And it's oh, I was and it's because you're you're literally remutating the array every single time you call .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, You could be in trouble. I wonder

if we'll continue to see more of these because, yeah, we have spliced to spliced, sort to sorted, but We don't have a shift to shift.

We don't have a pop to popped.

Rid Yeah. Well, like like I guess like if you look at all the the ones that mutate, rid. You can use that at for shift and pop, and then the reverse sword splice. Removes the last. Oh, no, sorry. Not pop. You're right. Yeah, but no pop would be too spliced.

You would just.

Oh, no, if you want only the yeah, you would just you would just say give me the length of items. Oh, 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 Are enough to finally say, all right, we have a full set of

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

This one is Where where we at with the proposal on this one?

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

Yeah. So what this does is it will allow you to take rid. Maybe we should explain the problem of iterables to array. So if you have an iterable, an Iterable and a generator of returns in Iterable is something where 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 course, you should buy it to learn JavaScript.

We give the example of the deli numbers.

You know, you go to the deli, you take a number 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? The the deli doesn't know rid When they are done because as soon as somebody pulls a number, then that person is then added to the queue. So an iterable or generator 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, There will be no more next and it will say this interval is has been completed. Right. So that's that's nice if you want to be able rid. So by calling array. From and passing it to iterable, it will say like, I don't care. Just give me the whole 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 iterable thing here, but with asynchronous stuff, Generators can be asynchronous, meaning that you have to wait for the first one to complete before you do the next one. Rid. And you let's say we'll talk about the deli example as well.

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 array. From a sink will allow you to get an array of all the people who visited the deli, but it will 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? Why? What's the difference between that and like a promise to all or promise not all settled. And there's there's 2 reasons for that is first, promise not all does everything at once.

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

And then the thing about Iterable is you don't necessarily know what the end looks like until you get there.

Meaning that you might think, Okay, 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 things can be added to an Iterable 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, you have no idea.

You can't just say, Okay, there's gonna be 8 people today. You say I want an array of all the people, but 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.

Rid. I don't know if I'll use that all that often. A generator is not something I reach for, but in the case where rid. You don't know how many items there will be. That is certainly something that I would reach for.

Yeah. I think that's a the biggest thing for me is, like, when do I reach generators.

And then then I I would suppose I would have some of these problems. But I I guess I I just don't reach for That that flow often, and it's probably, 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

getting into some real world examples. Yeah. Like maybe if we if we were to build like a a real ready. Time question asker where we have a generator and people are continually submitting new questions and up voting those different questions.

So once we finish answering a question, we'll say, okay, iterable.next, 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 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 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

it it Kinda does exactly like what it sounds like. It it makes grouping your items in an array and iterables easier. So if you do object dot group by and then you re pass in an array.

You can then, in the same sort of callback flow that you have with anything 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 the end result is going to be an object where you have a key.

And if something fits into the key that is returned, it is put into an array as the property of that key. Okay? So a really good example that we have, I grabbed this straight from MDN, is if you were to have, you could group easily numbers in an array by even or odd. Right. You have an array that passes in 0 through, you know, let's say 0 through 6. Mhmm. And then you return 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.

So, basically, this is just a way built into JavaScript that allows you to, 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.

I really hope this makes it because this is probably like half the reduces that I write. Where I'm like, let's say I often will want to see how many people bought stickers by country, 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 And then you say, okay, well, if this person's country already exists in the accumulator, then take this person and push them into That array of the key in the accumulator.

And if this person does not exist, then we will create a new array 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 dot rid. Country is equal to accumulator.country or a blank array.

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

It could be country, could be Even or odd as an example.

So map has it as well, which is really cool because a benefit of map is that A key in a map can be anything, not just a string. It can be an object.

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 an object with the key of product and country, and then I will group them by 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.

Yeah. And if you don't want to wait To use something that's very similar to this, Angus c jest, which is, a library that I use that has each of these things individually, there is a group My function that is 293 bytes, that functions extremely similarly to this. This is actually what I do instead of Trying to do it in a reducer or something fancy.

Yeah. Just to have it a little bit more readable for me. Yeah. Alright. Next up, it is observable events, which this one rid is really pretty interesting. And 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

I don't I couldn't find this on the list of the ECMA proposals, but I I was tweeted out just this morning from Guillermo from Vercel, And he said, this is really interesting. I hope it doesn't turn into another Smoosh, which is like Smoosh was a big upheaval of different ideas.

Yes. Go ahead. Sorry. You can explain it. Yeah. So yeah. So observable events. This proposal adds in a a dot on method, 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.

Basically, it it turns your event handling into Observables where you can subscribe and wait for things to happen.

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 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 with events as observables.

I really like this this API because you take your element, you can say on click And you can filter so like you can listen on everything and then you can filter for things that match what you want. Or if you were doing event delegation, 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.

Rid. But the one method that was on here that they're proposing is take until, which is, yeah, that's neat. Listen rid. For a mouse event, and then take until, which means basically unsubscribe once this thing happens.

And that is really handy when you need to subscribe in 1 event and then unsubscribe in another. Most common being drag start, drag end, Mouse move, mouse up. Like those are 2 different events, 2 different event handlers.

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.

Yeah, I agree. I think we should do a deep dive on observables. I think we should do a Dive on iterables, in iterables and generators. Yeah. I I'm down for all of those things.

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, the, take until mouse up example we have. What it's doing is it says, okay. Take until mouse up Then, 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 It's a really nice little snippet in this, but it also really gives an a good example of, maybe even not like subscribing, rid. But a way that you can interact with this stuff in a very real capacity. So really neat. Yeah. I think this is why

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

And the people that use it are rid. Are crazy about it, you know, like they absolutely love being able to declare their code and declare their event handlers like that.

So seeing these examples are super simple and I look at them, I go, Oh 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, but for multiple events. I think that's a kind of a cool way to put it. Like promise meets an event handler.

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

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.

It is Import attributes.

It was often something that was called.

Previously, we mentioned on the show that it was called Import assertions, rid. And basically, it solves the problem in Node, at least right now. If you're using ES modules in Node, You can't import anything other than a module, which means you can't import JSON. And that was something we were able to do with Node before.

You're able to just import JSON into your file. No problem.

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, which allows us to, import different types of data from URLs. Currently, the only one I can see is JSON and allow you to say import whatever from JSON with

type of JSON,

and I guess as the different parsers understand different types of imports, I can imagine WebAssembly might be another one, or Maybe even one day we'll be able to import 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 from a file.

Like that would be kind of cool to be able to do that with just an import statement straight up. Right?

So yeah. And that that's a feature that I use all the time in Vite is the raw imports.

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 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, You can go ahead and do that or if you want to import ROM markdown from a markdown file.

Yeah, and like you obviously you can do that with like file system. Read file and what But the import 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, both with the static import as well as the dynamic import Syntax.

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

There's a question in the proposal here is that we can you should more than just strings be supported as attribute value? So rid. It has an example of importing like a nested object of data.

I don't totally see rid. The use case for that, maybe if you needed to type it.

I'm not totally sure about that, and I think that will I think they're leaving it rid. Intentionally a little bit open so that if we do have more use cases down the road, then we'd be able to support them.

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

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

Oh, wow. Yes. What this API does. I just saw it. Okay.

Cool. The dot emplace method.

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

It's on a map. In place.

It's on a map in place.

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.

It is Kind of like an upsert for maps.

Oh, cool. Yeah. Okay. So you can you could say, all right, map. Inplace. You could give it a key and you pass it. You pass it in insert and an update method, meaning that if it does exist, it will run the update method. And if it doesn't exist, it will run the insert. This is currently stage 2. So kind of what was the name of the stage 2? Let me look that up real quick.

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.

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. 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, you would be able to have insert.

And yeah, I guess the benefit of that is that The emplaced method will allow you to chain methods on it, whereas an if statement would break up your chaining. Well,

do you have a a, a number 10 for me as well? Now that we 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 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.

So even though they're not available in any browsers, it looks like, actual development on them is is coming.

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

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.

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 different use cases.

Next one we have. I'm just looking for for what it is, but I was looking up some like error event handler stuff Where you could be able to there was a proposal in TypeScript to be able to type what type of error a function throws Or type what type of error a promise will reject with because right now it's a pain if a promise rejects you get 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 rid. Or just assert it if you know for sure what type of error it will look like.

And there was a proposal someone said like, hey, let's rid. Add the ability to type errors in TypeScript like you can do it with JSDoc, which is a little bit better than and nothing but you probably still should type guard it.

And they eventually closed it because there were some proposals in the future for Pattern matching, meaning that you could take your error and you could say if it looks like this, then I'll have it so you could do. I think it was with a switch statement or maybe it was the match statement. You could say when it matches this, maybe like, okay, your error has a message and 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 it was a nice sort of concise syntax that you could just quickly match an object. And then if that's the case, then you can go ahead and Do what you want with that specific error. This is not specific to errors.

This is simply just matching different objects in a single go.

And I think this would be a really nice thing. So this was one of the Reasons why TypeScript said no, we're not going to add the ability to type errors to TypeScript.

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 ECMAScript pattern matching, Which is stage 1. That's the one I I posted in the show notes here. Yeah. There was something else.

Yeah. There it's an interesting world that We'll tweet it out. Because, I mean, Pattern matching.

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.

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

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

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.

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, It's kind of interesting that they went with it. Oh, and maybe this is the ECMAScript pattern matching. So the 1st champion, the person basically this is ready. People who are working on the proposal is Daniel Rosenwasser, who is one of the lead devs behind TypeScript. So I bet that that this is it. Rosenwasser.

That sounds like German for Rosenwasser or something. Wassen Rosenwasser?

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?

Yeah. You know what? This is actually really interesting. So, you know, Reddit has been undergoing some, 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, what is, like, very transparent Transparently a way to 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, 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 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.

And I have found this neat little app that's new and it's Called Artifacts, and it's an AI based news aggregate.

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

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.

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.

It It has been giving me all of the things that I take from Reddit as in, like, where to find hyper specific news on various topics. I wanna find all of the news possible on, you know, college football or NHL or whatever, all in that stuff in one one place, sports, Space, whatever. Anything you could possibly want, and it does so in a really nice way that learns your reading habits. So artifact,

Really, really cool app. I've been enjoying it quite a bit. Awesome. I have a sick pick today for all the cyclists listening to the podcast and This is something that I've been noticing quite a bit lately is that a lot of cyclists have extremely bright rid. Front and back lights as they're going. And I as a motorist, I very appreciate it because rid. I see cyclists from so far away now when they have these things on, and it's because, like, LEDs have gotten so good. So this is a set of front and back Led lights 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.

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

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

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, and there's 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 $20 for a set of 2. The USB C charge Apparently lasts like 10 hours, which is like 4 or 5 bike rides, right, or more than that.

And then you just throw them on USB C charger rid to to juice them up. So I was LEDs have improved so many different areas, and this is one which is cycling safety, big fan of it. So I'll link up the one I have, but just go on Amazon and take a look at all the different

rid LED lights they have on there. Speaking of, safety in that regard, I that was, like, the scariest part 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.

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 Stressing me out. That was always very scary.

Oh, that's, that is wild. I can't imagine having to do that. Yes. Also, our our Car was a Mazda,

SUV, 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, 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 manage to accidentally 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 rid The car drive in Japan? Car cars are they drive on the left side of the road in Japan. So Yeah. Obviously.

You can't get one from North America. Couldn't get one from North America and probably, anywhere else would be the giant pain. But, yeah, it it was funny. Yeah. So in rural areas,

rid. Mail trucks will often either convert a jeep or something like that to a right hand drive because 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 is like this like rid. 25 year old Subaru that is right hand drive and it's like has Canada Post rid. All placard all over it. It's I've never seen anything like it. And I was like, 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 to be able to get something like that. Same with the little 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.

Probably a lot. Like, rid. It'd be fun to work on, I think. Alright, shameless plugs. Westboss.com/courses.

Check them on out. You scoop up code syntax

$10 off. I'm gonna shamelessly plug the syntax, Instagram, and TikTok, and social accounts. We've been posting, rid.

Clips from the show now. So it's 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

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

Rid Head on over to syntax.fm for a full archive of all of our shows.

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

Rid.