New + Proposed JS APIs for 2024

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

Welcome to Syntax. Today, we've got new and proposed JavaScript APIs for you. These are things that are either there's a bunch of stuff here that are in the browser right now and you can use their approved.

They've passed all the stages. There's a bunch of them that are in stage 3.

So basically, when things get proposed to be added to JavaScript, They go through a whole bunch of stages. There's 0, 1, 2, 3, 4. And once it hits stage 3, they're generally in this to get in the browsers, and It's very unlikely that anything will change.

So we'll talk about a bunch of those sort of like what's coming up in the last couple of months.

And then I got a couple stage oners, which are just kind of dreams, things that are coming down, as well as a couple of little Things for HTML as well. A couple proposals.

You the general public is allowed to submit proposals for HTML. Ready.

So it's kind of interesting to look at which ones are getting traction and popular. So what are the pain points for developers?

How How you doing today, Scott? I'm wishing that we submitted a modern marquee tag considering the previous one has been deprecated.

There you go. Well We could just readd my key. There there is 1 proposal in here that has to do with Sentry.

So Sentry is error exception tracking. And a huge part of what Century does is they take in your source map.

And let's say you have a bug on online one because all of your JavaScript is minified and bad. You want to know where that bug is in your authored typescript that has been transpiled and compiled in a way. So, Sentry will take your source map and line it up with the actual authored code for you, which is really, really nice.

But from talking to a bunch of people at Century, That is a huge pain in the butt because source maps are somewhat nonstandard.

It's kind of the Wild West. There's lots of annoying little bugs with them. So one of the proposals we're going to talk about today is a standardized source map specification.

And if you take a look at who are some of the developers that are working on that, a bunch of them work at Century because You better bet they want to make their lives a bit easier. So check it out. Sentry. Io, and use a Kabuko Tasty treat. You want to figure out where your errors are going wrong in your authored code as well because they have source map support.

Ready. How was that as a a little, hat tip to century?

Oh, it was fantastic, Wes. It was lovely.

Right. Right on brand. Beautiful. Beautiful.

Let's get into this first one at the very top here we have, which is regex escaping.

Basically, it's the the the idea here is to fix the problems with escaping a string inside rid of a regular expression. Is this a problem that you've personally had, Wes?

It is, because when you want to write a regex.

You often have to put these forward slashes in front of periods, in front of spaces, in front of stars, especially when you're doing Unicode. Right. Rid. And it's so obnoxious to have to, a, write a regex in the 1st place and b, figure out that a period is part of the regex and not part of your sentence.

So case in point For this podcast, we have Flagr Audio, and, basically it's audio that we add to the end of every single ready. Podcast not for you, the listener, but for the transcription service. And then the transcription service will return the same pieces of things that Scott and I say.

Ready. And then I use those to match up the speakers on the Syntax website because Scott always says the same thing, and I always say the same thing. Now rid. The process of me trying to find out who is saying what is a regex because it's not always exactly the same. Sometimes it's rid slightly different. So I had to write a regex that has that sentence in it. But then you have to put You have to escape the whole thing, and it's kind of obnoxious. And some of them have question marks in them. Rid. So being able to just quickly escape a string before you throw it into a regex will be, nice. Rid This is not one of these, like, oh my gosh. Amazing. But Stop the presses. Especially the people that are working on these specs. Rid. Like, shout out to them that you're going deep into the regex spec and trying to make it better. We have another regex one coming a bit later as well.

Rid. Yeah. I like I said, I I typically can't even, like, study regex without falling asleep. In fact Yeah. Like, the moments of just talking about regex just now, I do feel like myself Getting a little getting a little sleepy. I can't control it.

There's something about it. Yeah. It's hard for me. Next we have here is the, intl

duration format method. So Intl is a name space, and JavaScript has tons of really handy little formatters.

Rid. Even if you aren't doing, internationalization, you just just have an English website. You still want to use these APIs because they're really handy for formatting numbers, formatting dollars and cents.

And now they have a duration format ready method, which will basically you pass it an object that has hours, days, minutes, weeks, seconds, nanoseconds, milliseconds.

And then you also pass it a locale. So English, French, Canadian, ready. French, France, Arabic, and it will format it in the format that you want. So there is short, long, Digital, which is like a digital clock or narrow.

And out the other end, you'll get something like 2 days and 22 minutes or.

Rid. Or I did an example with Arabic. I'll link it up in the in the show notes here as well.

And this is this is really nice. And rid. I immediately was looking at this API and I was like, this is really cool, but, like, you still have to pass it.

You still have to pass it an object with days, months, minutes. Like, you have to pass it the parts that you want. You could pass it 2 weeks and 6 seconds, and then it will format it in your local language in a nicely formatted sentence that you want.

And I was like, that's cool. But I want to be able to pass it like a time stamp. And for it to figure out those pieces for me, I don't want to have to do the math where, like, how many times have you done that math on the syntax website where you take a time stamp of seconds and you have to convert it into hours, minutes, seconds? You know, ready. So the input to duration format is the output of the temporal duration ready. API. So the temporal spec we'll talk about more in just a second is sort of the new data API in JavaScript. Rid. And there is a whole idea called a duration in temporal, and, basically, that output is the input to this. So it's gonna be it's It's all gonna work together.

Yeah. You know what? It feels like it's useful even if you're not doing internationalization just if you're working with time In general Yeah. Oh, yeah. Less dependency on data FNS to do normal stuff. Right? Next one here is going to be standardized Sourcemaps. Now this is the one that Sentry is involved in. It's basically sourcemaps revision 3 with the goals rid Of the 3rd revision of source maps being to reduce the overall size, to improve parse time memory consumption and download time, Support source level debugging allowed by directional mapping and support server side stack trace rid Deobfuscation.

Oh. So basically, you can imagine that, source maps, if you don't know, are basically a map rid to link authored JavaScript to deployed or compiled JavaScript.

Or, you know, potentially you have TypeScript. Right? Let's say you author your code in one way. You run it through a compiler.

Maybe it's, gaining Browser compatibility, maybe it's just taking it from TypeScript to JavaScript.

Either way, when re You have debugging tools, something like an error and exceptional handling service. You need them to be able to read And respond to the code, but also connect that directly to your source code. So that way it's not telling you there's an error on line 1, Column 8,000 whatever.

And actually have it take you to where the code is authored, so that you can fix and understand your code.

Making debugging generally incredibly easy comparatively.

Right? Yeah. So this revision 3 Is being developed by the people

who use and actually work with source maps probably more than anybody else rid. In an attempt to make that experience better for everybody. Yeah. So it's it's still ongoing. If you go to the source map RFC, there's a lot of, like, Suggestions. One of the kind of cool suggestions from Armin, who actually works at Sentry, is add the Add meta information about the generator into the source map, meaning that you could open a source map and see what who Who made this? Is this a TypeScript output? Was this a babble output? It would be nice. And also, I think that's really cool because then we would be able to parse that information and see, like, if you're on a website, you could usually rid.

A lot of times websites will make their source maps public, not their actual source, but their source maps.

Yeah. And if that is if that is true, you could see, rid What what's what tech are they actually using? Yeah. Which would be cool. I I'm sure, that would, make

some for some really interesting browser re Browser statistics, usage statistics overall. Yeah. Man, statistics. I can't say that. Like, you, you it's my specificity.

Next one we have here is structured clone. So this one was I had I known about this, and then I just, like, completely forgot about it. So on rid A past episode of Syntax, I said, man, I wish we had the ability to do deep copy. You know, like with with a spread You can do in JavaScript. You spread an object into another one that only copies the top level, the first level of properties.

And then if there's a nested object inside of that, it doesn't do a deep copy. It does a reference.

So you can run into trouble with the ability Or if you want to take a copy of it at a specific point in time and then that data changes, then you have, like, a sort of a sealed version of that.

Rid. And I said, oh, I wish we had this in JavaScript. Right? Like, we we kind of have it with JSON dot stringify and you parse it back in. But I totally forgot we have it. It's called structured clone. It just dropped in most of the in all of the browsers. Like it's only been in Chrome, Firefox, Safari for anywhere between 6 months to a year.

And what it allows you to do is you give it an object or an array or something like that, and it will take a deep copy of it. It will clone all of the values all the way down the tree, ready. And then it optionally provides an API where you can use transferable objects, which means that, Okay. I want to take a copy of this, but I have this like 1 massive array of data that came from, like, when you get into working with Canvas ready. Or you work in you work with 3 d or any of this stuff. You often have these arrays that are just massive, like hundreds of thousands, if not millions, of pieces of data in those arrays.

And for you to make a copy of that would be huge. Right. Because it would take up more memory in your browser. It can be slow. So sometimes you want to say, I want to take a copy, but I I want a copy of everything but this, like, massive array because I don't need to copy that. So you can transfer things, meaning that you can just point by reference on some specific properties.

And then the rest of the properties, you take a deep clone of.

Next one up here is temporal, which rid Temporal is something you may have heard us talking about numerous times on this podcast.

The the hook for 10 the temporal API is that it fixes is the JavaScript to date API by kinda starting over, giving us a lot better controls. Basically, once temporal's here, re You're not really going to need a lot of the date time tools that we've been using.

In fact, I worked Quite a bit with some of these polyfills to get used to this API.

But it does feel like it's one of those APIs that is taking a while. Now it is rid A big proposal.

There's a lot here.

So it's not surprising that it's it's taking a long time here. But what is the status? Well, I've actually linked to a Chrome status in which they're implementing it. The status according to the proposal rid. Is basically the process is kind of done for it, but there is no completely rid. Test passing, working implementations of it in any browser.

So they're working on it, But it's not even behind a flag anywhere, really. It's not usable to any complete extent.

It's one those ones that you're just gonna have to sit and wait on. And I actually thought it was kinda interesting, Wes. There's a a line in this where it says, In the next t c 39 meeting, we'll announce that the IETF process is finished.

And hopefully, at the same time, we'll announce that we've rid Have completed test coverage for all normative changes up until now. West, do you know what the IETF

process is? So I went digging. I was like, rid. What is going on? Like, what's the holdup? And apparently, IETF is a standards organization, and they were waiting For a standards organization to standardize string formats used for calendar and time zone annotations.

So If you right now, if you have a time stamp, you will sometimes see on the end, you'll see a plus, like 0:four whatever. And that little plus will show you the offset from UTC.

Now that's a standard that's been around for a long time.

There is a new standard for calendar and time zone annotations, which will show you time zone like Toronto time zone, Asia, Tokyo, read. As well as the calendar, because I guess, like, different countries have different calendars. Right? And that is really cool. So part of Temporal was for 2 years, they were sort of just waiting on the standard to pushed through.

And it looks like as of a couple of weeks ago, that has been approved that standardization.

So I'm hoping that means that we're gonna start seeing it in all the browsers. But also another kind of cool thing is I went looking at the spec rid. And there there is,

I think, somewhat of a newer polyfill for it that is 16 k. Well, rid. Let me tell you. It's newer than the first one, but it's new enough or it's old enough that I used it on level up tutorials when we did our launch. Okay. So I I've used both of these polyfills, And they both worked fine, but the the 1 polyfill was prohibitively large. So, having a a 16 k polyfill, Much more palatable, but probably something,

you're just gonna wanna use for fun anyways right now. You don't think you don't think you'd throw that in? So it looks like, ready. A couple of months ago, as of 09/12/23.

So that would be September 12, rid. Just 2 months ago, as of recording this, they had refactored the entire thing. And it is 16 ks is tiny.

Rid. Yes, in my opinion, especially because you can only load that if you need it. Right. Like Most newer browsers, once they have it, won't need to to to load it.

But being able to use the entire thing It's amazing. You probably that that huge polyfill you're thinking of was probably part of the intl polyfill because intl Polyfills require. That's why Node is the Node download is so big, like 30% or something like that of the Node download is just The Intl library that has things like how do you say days? What's months in Arabic? What is rid. Nanoseconds in French, and base pretty much for that for all formatting of lists, dates, Numbers and currencies.

Yeah. Well okay. So you say, would you not ship this? You're you're asking somebody Who did ship this? So, like, would I ship it? Yeah. I mean, I did. And, I'd I'd do it again, but, I guess I'm speaking for, like, most people. Right? Only just because it's not stage 4 yet.

It's not I don't know. Yeah. It's not in any browser yet. It's not I don't know. It still It can change. Premature to me. Yeah.

That said, I did ship it, and I did enjoy using it, and I don't regret that. So Yeah. I am I'm itching to use this thing. We've been talking about it. The 1st episode we did on Temporal was

a while ago, October

2020.

Right. Yeah. So here we are 2 years later, and we still it's a little bit of it in Safari. Rid. And, obviously, there's there's a lot to it, and this is it's probably gonna be the best day API ever. You know? It's it's gonna be like ready. Flexbox and grid is the best layout engines out there.

Temporal is going to be the best API library, and you're going to be in other languages being rid. Damn.

I wish I had that nice

date library that I had in JavaScript. Yeah. And you know what? Let me tell you. There is a learning curve because We're so used to our our our JavaScript date times in LA stuff, but, like, what you get into with temporal, and and we'll take a lot to talk about this, is you end up having these exact time types versus calendar dates. And then you have things like a plain date time, a plain date, a plain time, a plain month, plain year, zone date, time, time zones, count I mean, there's rid A lot of stuff here. And to get from one thing to another thing, there is, like, a bit of a conversion to the point where I was even re You you think, like, here we have this the the the best date API ever and is fantastic, but I found myself already Writing a utility library to take it from one thing to another thing so I didn't have to pass it through 2 different conversions. Alright. I need a, Whatever. I need an instant from a plain date or whatever. What do I do? How do I do that? So when this comes about, rid Somebody's gonna make a butt ton of money on a course that is understanding

the temporal API because it's a big old thing. I I think I just said this. I was talking to someone on Twitter about this. The intl and the temporal APIs, they are so powerful, but they still feel very rigid, don't they? Rid. Like, I still think we're going to have a library of wrappers around these things that are just, like, super simple Time ago, you know, and you pass it, a temporal date stamp, and it will it will figure all that out for you. I have the,

rid The basis of one of those already started because I need it yeah. Get plain date from instance. Get plain date from epoch. Get date. Re Date is on or before. I wrote all these functions here, so, maybe I can, push those open source somewhere, and we can get started on one.

Rid. Next one we have is fine last and fine last index. So this is something that has it's no longer in any stages.

Basically, it is finished, and it is shipped. And it is in all the browsers as of Firefox 104, rid Safari Safari is always the one I check on. 154. Yeah. It's so it's it's in all the browsers, and you can polyfill it very easily. But, basically, what this would allow you to do ready. Is to find the last instance of something in an array or find last index. So if you've ever wanted to let's say you have rid. A list of tweets and you want to find the last one that mentioned a specific episode or find the last one that mentioned Scott. Re usually what you would do is you would have to flip the array around or sort the array first and then find the first one, but this will allow you to Just find the last instance of it. So basically it will search from the end of the array backwards.

And if you have a very large array ready.

That can be performance, be a performance consideration.

And if you don't have a very large array, it's just kind of nice rid. Because, again, also reversing an array, we have APIs coming for that, but reversing an array is mutable, meaning that if you call reverse on it, then you've just You literally just reverse the array.

And if you're using it somewhere else that that is like rendering it on the page, then Those items will be flipped around as well. It's just kind of a pain.

Yeah. You have to duplicate, then reverse. Exactly.

Yeah. Totally. Re Next one here is JSON modules, which is part of the import import assertions proposal, which allows you to import Within JavaScript, different types of files.

And so this is really nice because it'll allow you to, it'll allow you to specify that you are going to import with an assert keyword. You assert brackets type JSON.

Rid. Now you know that when you are importing from JSON, you're able to access the object directly from JSON just as if you would using rid Typical loaders. You might be thinking, hey. I can already do this, or maybe I'm in a system that can do this. And typically, like, right now, that's being done through, just straight up, the the build step, whatever you have, whether it's a Webpack loader or whether it's Vite or something like that. You can import JSON into those those libraries, but it's usually through a plug in or a system that you're doing. So this would allow you to do this in straight up rid JavaScript without having to, do any sort of compilation to import data.

This one is in stage 3 currently.

Yeah. It's It's kind of weird that I always found that odd that we had it in Node common JS. You could just import JSON.

Yes. But now you once you moved to ESM, that was one of the kind of annoying parts where you couldn't just import JSON. You had to rid. Either rename it to a JS file and export it as an object, or you had to, like, we use file system APIs to read the file instead. So ready. Nice to be able to simply just straight up import it. While I was researching this, it seems like there's also support for CSS modules in Chrome already, rid. Which I didn't even realize that was like a browser spec. I just thought CSS modules was like a like a thing like style components. You know, it's just a way we We can write our CSS, but it's not true. So you could import classes from a CSS file. Yeah.

The closer we get to, like, the Vite implementation of just, like, importing anything into your JavaScript, I think that's gonna be really nice. Yeah.

Yeah.

Next one we have here is regex modifiers.

This is another regex one to add on to the first one we had.

Modifiers allow you to change a subset of the currently active regex ready. Flags within a sub expression. What does that mean? So if you have a regex and you want to match a specific case of something.

Right now it's kind of tricky to say, like, okay, I want the 1st part to be case insensitive and the 2nd part to be case sensitive. So these will allow you to tag little modifiers inside of your regex.

And I went through the Basically, when these things get proposed to TC 39, somebody does like a presentation and they always have a slide deck that will show ready. What are the ideas? Does it break anything in the browser or in JavaScript already? And then More interesting to me is like, what are the use cases like? Who's asking for this? And they some of the Interesting things were in browser support for Textmate grammars. So in Versus Code, Sublime Text, basically every editor uses these TextMate grammars to highlight pieces of code. So if you have some code, it will use a TextMate thing to ready syntax highlight it, right. And in order to do that in the browser, you need the ability to have these regex modifier flags. So it's kind of a neat use case. Same thing with they said, evaluating JSON data Without having to execute code. So if you want to match some stuff on JSON without having to Maybe you're not allowed to loop over some data, or maybe it's performance intensive.

So this is another one of those things that probably you, the listener, won't After running to it all that often, but it's kinda neat to take a peek behind the lower level stuff and see what people need the stuff for. Rid. Yeah. Totally.

Next 1 is something that you might actually use, which is array grouping, which is a method on the object, Which would say which is a method on object itself. So you could do object dot group by. You pass in an array, And then it gives you access to a callback where you get access to the individual one. So that way you could easily say, is this thing, let's say, even or odd? And then you would return a string from this callback.

That string or property that you return from this callback ends up being the property that it then becomes grouped by. So what you're essentially doing is it's a function or a method that you pass an array in to group that array by whatever callback function you determine, and then you can group those properties together inside of that array. You know, it it's the type of thing that's just gonna be like, what do what do we use to do group by right now? We use a Anges C Just. You use a reduce.

You might you might go straight to a low dash or something like that, but, it's gonna be nice and easy. This also is going to be map read group by you can group an array into a map as well. You know what I use this for all the time is stats on

When I do stickers, I need to group the orders by country and group them by the number of stickers people have ordered because it's different amount of stamps. So I have Canada, US and international.

And then Inside of those, I have 1 pack, 3 pack, and 10 packs. And Mhmm. I have to write this massive reduce rid That basically goes over, and you have to check if you have the key. That's always the most annoying thing to me with reduces. You gotta check if that thing exists. And if it doesn't exist, you got to create an empty array and push the item into there. This is going to make it a 1000 times easier where you can simply even just grouping orders by country. You loop over the array and you return the country, and it will give you an object where all the countries are the keys And all of the values of each of those keys are arrays with those orders that are associated with those countries.

Rid. It also works with maps as well, so you don't even have to use a, like, a string key. You could use, like, we talked about on the map show, anything.

Anything. Yeah. And this is in, it's in Chrome. It's in Firefox. It's in Edge. And it just landed in Safari technical preview. But this is one of those things where you don't have to don't get your tweet already about how Safari is new IE, because you can polyfill this in, like, 20 lines of code.

It was automatically polyfilled in Core.

So don't whine about this because it's something you can use today

in all of the browsers, and it is re Super handy. People just be saying stuff wise. I you know, since doing these TikToks Oh, yeah. And some of the comments have been, like, wild. Somebody says, rid. Firefox breaks more websites than IE 6. No. What? Who what are you talking about? No. It doesn't. No. It doesn't. You were. Rid. Yeah. People just say stuff. Yeah. People are mean online. Sometimes I see especially,

like, sometimes I click through to the profiles of people that say mean things. And, like, usually, it's like a like a someone's burner account. But sometimes it's like like clearly just somebody with their full ass name And Yeah. Pictures of their family. And it's like, you're really just being a jerk on the Internet, like, un rid like this. And I I get it. You can talk you can talk crap about Firefox. That's fine. But sometimes people get real personal as well. Yeah. Somebody that they thought I was being too

taking too much time between words, and they were really upset about it.

That's okay. I kept him talking. I just kept on asking him questions. Yeah. He showed his ass. Next one we have here is array the new array methods, which allow you

to create immutable versions of them. We did a whole show on these so you can go back and listen to that. But I'm here to tell you that they are past All of the stages and they are implemented in every single browser back to Safari 16.

Ready. So these are the array to reversed, to sorted, to spliced, and with. And Essentially, what they allow you to do is to reverse an array without mutating it.

So basically it will bring it give you a copy of that array without Reversing the original one.

2 sorted.

Same thing.

If you don't want to sort the original Ray right now, you have to make a copy of it first. This will just give you an immutable version of that to spliced. Same idea. And then with the width one is pretty cool. Yeah. Because It will allow you to inject items into an array.

So basically you can say like, give me this array, but Pop this item in it. And previously you had to spread items before, insert the new item and spread the items after.

These are much welcomed additions to the array prototype. Yeah. My name is Wes Boss, and I'm here to say you can use these in your array.

I like it. Wow.

Yeah. I know.

Promise with resolvers.

This one is the one that, like So with resolvers, basically, it's going to give you a little bit more control Over the execution of your promises. It's in stage 3.

I don't necessarily understand when I'm going to be using this. Do do you have a good handle Randall on this one in particular, Wes. Yeah.

We did a whole show on this. Mhmm. I still don't. It's like for me, it's like There we go. Yeah. If you go back to syntax.

Fms654.

We talked about a promise that with resolvers that was it was in kind of early stages at the time. Now we are in a much later stage. So the idea here is that When you get a promise that is returned to you, you can do 2 things with that. You can wait for it to resolve, or You can catch an error that it throws.

And if you the logic as to How that prom or or sorry. What that promise returns and how that promise resolves is always done inside of the promise callback.

And if you wanna be able to if you wanna give somebody a promise, like, if if if I went to Scott and said, Hey, Scott, here's a promise. Can you resolve it when you're finished making the sandwich? You could say, sure, no problem with promises right now, you would have to come into the promise, make the sandwich, and then resolve it. Whereas rid. Now with resolvers, it allows me to both give you the promise object itself, but it also gives you access to the methods that allow you to resolve or reject a specific promise. So you can pass the promise into a function that needs to do the work instead of passing the work into the promised callback. Okay.

Man, I don't know why some of this stuff is hard for me to get my head around. But Yeah. For some reason, when we get into the weeds and stuff like that, it it is it's rid. I gotta use it 3 or 4 times before I'm like, alright. I get it.

These are often called deferreds. So you may have used a library in the past to to to to create a deferred.

I have and also like some of the stuff is just like You might have not run into the specific use case before, but I certainly have run into the specific use case in the past.

A lot of times around WebSockets or when you're doing streaming of data, re It's really nice to have access to all 3 of those things where you can listen for it to finish, but you can also resolve or reject it as you need it.

Interesting.

Next, we have some stage oners, which are like things that you probably be holding your breath for. They might never show up. These are just things that people have proposed. Right? And this first one I thought was really interesting.

Rid. At first glance, it maybe felt like a little, scary, but it's not scary at all. It's proposed to function memo to memorize or basically cache results of the function given that with the same input, the function essentially doesn't even run the body of the function. So let's say You have a function and you pass in the number 1, and it always returns 1 plus 1. Okay? So 1 plus 1 is equal to 2. Whatever. You Pass in 1, it returns 2. Right? Then you call that same function again by passing in 1. Right? It doesn't then do the operation inside of the function at all. It just memoizes the results of that and returns The cached version of it basically allowing you to save the work.

I think this would be super handy for a lot of things. Basically, anytime you're having to do caching, It's like an in memory cache to memo wise, essentially the results of a function. And if you're the type of person who writes in a functional style, You know, single input, single output type of deal, no side effects. Mhmm. This is going to be super handy. But if you do have a side effect in inside of that function, it could get a little scary. Right? Rid. Yeah, definitely. Because it won't rerun. Right? It will just

give you the returned value.

If you're into memoization or if you're doing stuff Where the output of a function is performance critical.

You're probably already doing something like this, but ready.

Hey, it'd be kind of cool to have it have it totally baked in. And the way that it works is you take a function and you just write your functions normally, right? And then you take that function you called memo on it, and that will return you a new version of that function that then memo wise is it's returned values. So if you're adding 1 plus 1, it's only ever going to do the heavy lifting of adding those two numbers together once, ready. And then it will simply return the lookup value every time out from that. That's a heavy lift.

Yes.

I went through the list of other stage wonders, and none of them really caught my interest. There's a lot of, like, lower level stuff, which is not Maybe browser implementers care a little bit more about it or framework authors. But in terms of, like, implementers in terms of us web developers, it's not all that interesting, but I do have a bunch of new stuff that has either been proposed or implemented in Node and HTML.

So first one is Node. JS has Implemented a proposed, ESM detection flag.

So basically, right now, ready. If you fire up a node project, it assumes Common JS as the default.

So Right away, brand new node project.

You export a value from a a JS file, The whole thing will crash because it's it oh, you're supposed to use type of module or m j I or or, yeah, MJS.

And it's kind of annoying that that's, like, the the default is, like, the new way of coding ECMAScript modules is not the default rid Because of backwards compatibility.

So this new flag, which I assume they're trying it out because it might become the default in future versions of Node.

Will try to detect If your project is an ESM project or your project is CommonJS and they say rid. You should still set the type in your package JSON.

But, again, like, if you're just firing something up, it's such a I call those these things paper cuts rid. It's like it shouldn't have to happen. And it's one of those frustrations where people go, oh, my gosh. And you see a lot of the stuff read. Being implemented in Node right now because I think I think a lot of people are praising Fun and Deno and all these other JavaScript run times rid And saying, like, finally, they're solving these problems for us. Yeah. And then notice, like, yeah. But Yeah. But That's not the way it should be. You're just doing it. Yeah. Yeah. Give it to us. So this will not solve the problem of importing rid CommonJS and the ESM, all the hurdles that you hit with that, that's not what this is. This is simply just if you have a project Haven't defined it as common JS or ESM. It will try to figure it out by sniffing your code and ideally just run it for you. Kind of like that, at least. Small little one Navigator. Not user agent is now a node.

Again, that's just like another step towards rid Your code not breaking? JavaScript Yeah. Not breaking. Right? Like, if you're if you if you are running some code, whether it runs in the browser, whether it runs on the server, rid. Having a user agent available to you is good, and you don't have to have some package that It's called like a guarantee there's a node package or there's an NPM package called User Agent, and it will rid tell you if you're on node or if you're on a browser, and now you don't have to do that. You'd simply get a user agent whether you're in the browser or you're in node. Okay, Wes. I'm on yeah. I'm gonna,

I'm gonna let's give you a little fun quiz here. Okay? Yeah. So, obviously, there is a, user agent, rid node package. Yep. Shoot. I'm sorry. There's there's there were several of them, so never mind. I was gonna say, how many times is this downloaded A week, but there's a few different ones, so never mind. I just found 1. Universal user agent,

7,900,000 downloads per week. Yeah.

Obviously, this is something that people need, and it's probably because User Agent is in everything but on the server, and it's just another step forward to rid.

I didn't even realize we had Navigator in on note as well, but there's a couple of other properties on there. Built in. Env file support is now in Node. This is really, really nice. So if you have a Env file sitting on your machine, you can now pass a flag when you're starting up your note process, and it will parse and put those values into your environmental variables.

It's another thing you don't have to install before you get going. And this is another thing that Dino did it.

Fun did it.

Now finally, noticing.

Alright.

Fine. We'll add it. Do you know what version of Node that arrived in? It was in It was one of my most popular

videos lately.

I think it was 20.6.0.

Rid. So it's now been a couple of months in Node. Cool.

Actually, one kind of cool thing about environmental variables as well is you can also pass, Node options, which I think is kind of cool. So, you know, if you want to run Inspect on Node, like you want to run the Dev tools so you can open Chrome and put breakpoints in and see your console logs.

You can pass those flags via environmental variables.

And That's really cool because you can now based on your environment, you can turn on and off the inspect flag in your environmental variables.

Permissions model be is continuing to be working on. So if you've used Deno in the past, If you try to access the network, you try to access the file system, it will prompt you first before you are able to do that type of thing. That rid is awesome because if you're running random scripts on the Internet, you should just give it full access to your entire file system and Yeah. We all do. And be able to to send it. So, it's just continuing to be a work on. I'm very happy about that and say as well as well as the test runner. I just every time a new node version comes out, I take a look at the notes. Yep. And there's almost always new test runner features in there.

There's a bunch of stuff around faking timers rid. Lately been added in there, so that's kinda nice.

So we'll see. Maybe one day, we'll we'll just be using straight up

node test runners. Yeah. Yeah. That that's cool with me as long as it works with e s m watch it well. Right? You know? That was the biggest thing. It's like I got my rid Jest, which is now having to compile my code to Babble, and I got my code, which is running on ESM and, like, So yeah. No. I'm happy to have all that. Any kind of thing to make the ecosystem out of user land and into the ecosystem is is good for me. Rid Yeah. Let's talk about HTML, hypertext markup language.

This is an interesting proposal, and these proposals are ready. In the what working group HTML.

You can find these here. This one is for web charts where you'd have a chart Element, you'd be able to pass it some data, and then you'd be able to pass it a script to generate that chart.

I guess I don't understand particularly what exactly makes this needing to be an HTML element. I guess that's where what I'm trying to say here. Yeah. Yeah. Like,

that seems so huge.

Yeah. Web charts is a markup concept for data visualization such as charts and infographics.

There's no chance that the browser would implement a good version of charting libraries.

Like, the date picker sucks on every browser, So there's no way that we're going to get good good charts.

Yeah. You know, like, they're going to implement some half ass version of it, And then it's going to be, oh, yeah, we have standard charts. But no, I'm going to say this one needs to stay as a potential package. The browser gives us rid Good good lower level Good problems. Yeah. Things like Canvas SVG. SVG.

You know? Yeah. Even just divs if you wanna do bar charts. Right. Dibs are pretty good. Yeah. Yeah. I know.

Hey. I don't I don't see it.

I don't see it, to be honest. But,

rid. Autopause is a kind of an interesting one is somebody saying, hey, we should have a property on ready. Audio and video elements that will auto pause itself as you for example, if you want to Scroll down as you intersect with the viewport. So if you got a video that's in the viewport and it autoplay maybe with mute on.

And then as you scroll away, it will mute itself.

That would be kind of nice because, like, obviously you can use Resize Observer for that type of thing.

But that seems like a really low level primitive that the browser should implement because the browser knows when