New + Proposed JS APIs for 2024

rid. The process of your local language

it's by

it's so obnoxious to have to, that seems 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 Things for HTML as well. A couple proposals.

is part of the regex and not part of your sentence.

So case in point

escape a string before you throw it into a regex will be, And then the width one is pretty cool. Yeah. Because

and,

stars,

is a name space, and JavaScript has tons of really handy little formatters.

It is,

escaping.

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 into as to Numbers and currencies.

a

have question marks in them. Rid. So being able to just quickly you need the ability to have these regex modifier flags. So it's kind of a neat use case. Same thing with they said,

Basically,

me trying to find out who is saying what is a regex because it's not always exactly the same. Sometimes it's 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,

in case sensitive. So these will allow you to tag little modifiers inside of your regex.

somewhat nonstandard.

and b, pass, know where that bug is in your authored typescript calendar and time zone annotations,

your authored code as well because they have source map support.

rid slightly different. So I had to write a regex

a, write a regex in the 1st place

That is a huge pain in the butt because source maps are

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

Right. Right on brand. Beautiful. Beautiful.

duration format method. So Intl

rid of a regular expression. Is this a problem that you've personally had, Wes?

standardized source map specification.

in front of periods, in front of spaces, memo There's no chance We talked about of something.

and trying to make it better. We have another regex one coming a bit later as well.

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, Now finally, write a regex.

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

Getting a little getting a little sleepy. I can't control it.

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

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 information and see, like, if you're on a website, you could usually they had refactored the entire thing. And it is 16 ks

Oh. So basically, you can imagine

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.

normal stuff. Right?

in temporal,

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 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 Is this a TypeScript output? Was this a babble output? the lower level stuff and see what people need the stuff for. Rid. Yeah. Totally.

and, basically, that output is the input to this. So it's gonna be it's It's all gonna work together.

internationalization, 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 error exception tracking. And a huge Fms654.

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,

Yeah. You know what? It feels like it's useful even if you're not doing internationalization

in

ready. French, France, Arabic, give you the returned value.

Support source level debugging allowed by directional mapping and support

is

Next one here is going to be standardized 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,

ready. API. So the temporal spec we'll talk about more in just a second that has been transpiled and compiled in a way. So, But from talking to a bunch of people at Century, Temporal is going to be the best So basically it will bring it give you a copy of that array without because intl There's a bunch of stuff around faking timers 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 It's another thing you don't have to install before you get going. And this is another thing really cool. So part of Temporal rid.

Rid. Even if you aren't doing, Now 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 So it's kind of interesting to look at which ones are getting traction and popular. So what are the pain points for developers?

ready. So like 0:four process is? So I went digging. I was like, rid. What is going on? Like, 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.

ready method, which will basically you pass it an object that has that

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.

French, Canadian,

And now they have is a kind of an interesting one is which will show you

3

and it will format it in the format that you want. So there is short, long, step towards Modifiers allow you to change a subset of the currently active regex in terms of us web developers, it's not all that interesting, but I do have 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.

the input to duration format is the output of the temporal duration 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

just if you're working with time In general Yeah. Oh, yeah. Less dependency on data FNS to do And respond

And then you also pass it a locale. So English,

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 in a nicely formatted sentence that you want.

You export a value from a a JS file, in front of So

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 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, figure out that a period

You can catch an error that it throws.

You could say, sure, no problem would be huge. Right. Because it would take up more memory in your browser. It

I think this would be super handy for a lot of things. Basically, anytime you're having to do caching,

It will allow you to inject in terms of, like, implementers So that would be September 12, because all of your JavaScript is minified you would have to come into the promise, You the general public is allowed to submit proposals for HTML. Ready.

no, I'm going to say this one needs to stay

what exactly

So basically you can say like, give me this array, but

Permissions model be is continuing to be working on. So if you've used Deno in the past, If your project is

rid. Now with resolvers, it allows me to both give you the promise object itself, but it also gives you access to the methods And if you're using it somewhere else Hey, Scott, here's a promise. Can you resolve it when you're finished making the sandwich? hat tip to century? maybe with mute on.

Right away, brand new node project.

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.

So we'll see. Maybe one day, we'll we'll just be using straight up All of the stages and they are implemented 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, and you return the country, 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 importing rid. Autopause the browser would implement a good version of charting libraries.

hypertext

ready.

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

with promises right now, You're probably already doing something like this, but And if you have a very large array ready.

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,

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

You can find these here. This one is for web charts where you'd have a chart

Reversing the original one.

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 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? like, sometimes I click through to the profiles That can be performance, a promise that with resolvers that was it was in kind of early stages at the time. Now we are in and then resolve it. Whereas and you have to convert it into hours, minutes, seconds? You know,

I don't understand

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 Sourcemaps. Now this is the one that Sentry is involved in. It's basically sourcemaps revision rid Jest, which is now having to compile my code to Babble, and I got my code, which is running on ESM and, like,

to sorted, to spliced, and with. And Essentially, what they allow you to do is to reverse an array without mutating it.

Yeah. I know.

I have and also like some of the stuff is just like You might have not run into the specific use case 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.

this is something that people need, was have run into the specific use case in the past.

How that prom or or sorry. What that promise returns and how that promise resolves

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

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

rid CommonJS and the ESM, 20.6.0.

markup language.

and then you'd be able to pass it a script

it's going to give you

Like, the date picker sucks on every browser, 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.

Man,

with the same input,

somebody saying, hey, we should have a property on

and they say rid. You should still set the type in your package JSON.

and it will

It doesn't then do the operation inside of the function at all. It just memoizes

you fire up a node project,

needing to be an HTML element. I guess that's where what I'm trying to say here. Yeah. Yeah. Like,

Same thing.

I guess

Actually, one kind of cool thing about environmental variables as well is you can also a function that needs to do the work They've passed all the stages. There's a bunch of them that are in stage 3.

And it's kind of annoying that that's, like, the

or when you're doing hours, days, minutes, weeks, seconds, Ready. How was that as a a little,

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

that Dino did it.

Element, you'd be able to pass it some data,

This is an interesting proposal, and these proposals are ready. In the

make the sandwich, And that is So you can run into trouble with the ability instead of passing the work into the promised callback. Okay.

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, called a duration

basically,

Common JS as the default.

and ideally just run it for you. Kind of like that, at least. Small little one Navigator. Not user agent is now a node.

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

particularly

Over the execution

Rid. At first glance, it maybe felt like a little,

Pop this item in it. And previously you had to

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 callback function you determine, and then you can group those properties

2. Right? Then you call that same function again by passing in 1. Right?

User Agent is in everything but on the server,

a,

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 And I went through the I think it was

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

spread items before, insert the new item and spread the items after.

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

before,

This one is the one that, like So with resolvers,

Fun did it.

can pass the promise a duration format

the results of that and returns

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 rid

to to to create a deferred.

not Maybe browser implementers care a little bit more about it or framework authors. But parse that

Node. JS has because

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 So

I'm gonna let's give you a little fun quiz here. Okay? Yeah. So, obviously, there is

So

So first one is Canada, US and international.

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

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

Ready. So these are the array to reversed, 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 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.

HTML.

So polyfill whatever. And that little plus will show you Obviously, that 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

I don't necessarily

that it's not true. So you could import 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 the values of each of those keys are arrays with those orders that are associated with those countries.

if you the logic Node options, 2020.

2 sorted.

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

basically, right now, ready. If

items into an array.

and it's probably because

videos lately.

and it's just another step so huge.

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

it returns

that will auto pause itself 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 You often have to put these forward slashes there's no way that we're going to get good good charts.

in every single browser back to Safari 16.

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

Alright.

Implemented a proposed,

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.

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.

as a potential package. The browser gives us rid Good good lower level in there.

rid. I gotta use it 3 or 4 times before I'm like, alright. I get it.

Rid. So it's now been 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 ready. Audio and video elements Rid. Or I did an example with Arabic. I'll link it up in the in the show notes here as well.

Interesting.

of your promises. It's in stage 3.

rid.

the lookup value Yes. But now I didn't even realize we had Navigator

1, the the the best date API ever and is fantastic,

Promise with resolvers.

in Toronto time zone, Asia, Tokyo, milliseconds.

ECMAScript modules ready syntax highlight it, right. And ready. And then it optionally provides an API where you can use transferable For this podcast, we have Flagr Audio,

The cached version of it basically

ready. And then it will simply return that And if you take a look at who are some of the developers

a little bit more control Column 8,000 whatever.

a couple of months in Node. Cool.

Next, we have some stage oners, which are like things that you probably

user agent,

7,900,000 sort of the new data API in JavaScript. Rid. And there is a whole idea Interesting things were in browser support for Textmate grammars. So in Versus Code, Sublime Text, basically every editor ready. What are the ideas? Does it break anything in the browser or in JavaScript already? a temporal date stamp, and it will it will figure all that out for you. I have the, Basically, when these things get proposed to TC 39, 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. Lately been added in there, so that's kinda nice.

out of user land and into the ecosystem is is good for me. Rid Yeah. Let's talk about

for that type of thing.

So yeah. No. I'm happy to have all that. Any kind of thing to make the ecosystem

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.

So nanoseconds, And if you wanna be able to if you wanna give somebody a promise, like, if if if I went to Scott

what working group HTML.

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 either been proposed or implemented in Node and 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, Yes.

per week. Yeah.

every time out from that. That's a heavy lift.

ESM detection flag.

that allow you to resolve or reject a specific promise. So you

a bunch of new stuff that has

Who did ship this? So, like,

process is finished.

around these things that are just, like, super simple

For a standards I like it. Wow.

understanding

ever. You know? It's it's gonna be like it assumes

So it's not surprising

a while ago, October

It's

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

So to generate that chart.

is kind of done for it, but there is no

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

I wish I had that nice performance intensive.

and they were waiting all formatting of lists, dates,

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

was for 2 years, they were sort of just waiting on the standard

And they both worked fine, but the the 1 polyfill was prohibitively large. So,

the process

and we still 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, Will try to detect

rid. Just 2 months ago, as of recording this, Again, that's just like another are either there's a bunch of stuff here that are in the browser right now and you can use their approved.

read. As well as the calendar, because I guess, like, different countries have different calendars. Right? pieces of code. So if you have some code, it will use a TextMate thing to

Writing a utility library

but, I guess I'm speaking for, like, most people. Right? Only just because the the the idea here is to fix the problems with escaping a string inside allowing you to save the work.

The Intl library

Yeah. Well okay. So you say, would you not ship this?

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 It was one of my most popular or there's an NPM package called User Agent, pushed through.

IETF is and said, 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 Unicode. Right. Rid. And

But it's not even behind a flag anywhere, really. It's not usable to any complete extent.

the offset from UTC.

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.

There is a new standard for

that has been approved that standardization.

of it in any browser.

So If you right now, if you have a time stamp, The whole thing will crash because it's it oh, you're supposed to use

would I ship it? Yeah. I mean, I did. And, changes up until now. West, do you know what the IETF

Much more palatable,

But it does feel like it's one of those APIs that

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

ready. Flexbox and grid is the best layout engines out there.

rid. Test passing, working implementations

completely I'd I'd do it again,

rid. Is basically

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 it looks like as of a couple of weeks ago,

they're working on it, makes this Right? Yeah. So this revision 3

Rid. Yes, in my opinion, especially because you 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

push those open source somewhere, and we can get started on one.

And hopefully, at the same time, we'll announce that we've rid Have completed test coverage for all normative

of 09/12/23.

The the hook for 10 the temporal API is that it fixes is the JavaScript to date API by kinda starting over,

what's the holdup? And apparently, to

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

organization to standardize string formats used for calendar and time zone annotations.

but probably something,

it's not stage 4 yet.

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, will return the same pieces of things that Scott and I say.

Right. Yeah. So here we are 2 years later,

Well, I've actually linked to a Chrome status in which they're implementing it. The status according to the proposal

giving us a lot better controls. Basically, once temporal's here,

maybe I can, having a a 16 k polyfill, different types of files.

re You're not really going to need a lot of the date time tools that we've been using.

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.

I'm hoping that means that

There's a lot here.

Time ago, you know, and you pass it, with the actual authored code for you, which is really, really nice.

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,

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

as Digital, which is like a digital clock or narrow.

Maybe it's, gaining

numerous times on this podcast.

on some specific properties.

Either way, You're you're asking somebody

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.

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

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

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,

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

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

anywhere between 6 months to a year.

Making debugging

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

easy comparatively.

to JavaScript.

generally

that, source maps, if you don't know, are basically a map that it's it's taking a long time here. But what is the status?

rid to

to deployed or compiled JavaScript.

which means that, That would be kind of nice because, like, obviously you can use Resize Observer 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

link authored JavaScript

Next one up here is temporal, which rid Temporal is something you may have heard us talking about is taking a while. Now it is rid A big proposal.

something like an error and exceptional handling service. You need them to be able to read

Is being developed by the people Let's get into this first one at the very top here we have, which is regex

Browser compatibility, maybe it's just taking it from TypeScript

public, not their actual source, but their source maps.

You can do in JavaScript. You spread an object into another one that only copies the top level, the first level of properties.

And for you to make a copy of that that's a standard that's been around for a long time.

some for some really interesting browser much time between words, and they were really upset about it.

A lot of times websites will make their source maps

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 And

re You have debugging tools,

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

objects, Good problems. Yeah. Things like Canvas SVG. SVG.

incredibly is this thing, let's say, even or odd?

And they

So this is another one of those things that

Without

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 Anything. Yeah. And this is in, And out the other end, you'll get something like 2 days and 22 minutes or.

having to execute code. So if you want to match some stuff on JSON without having to

in order to do that in the browser,

ready. Flags within a sub expression. What does that mean? So if you have a regex

and you want to match a specific case a standards organization, 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,

somebody does like a presentation and they always have a slide deck that will show

uses these TextMate grammars to highlight It's called like a guarantee there's a node package the default is, like, the new way of coding

More interesting to me is like, what are the use cases like? Who's asking for this?

some of the

And then where, like, how many times have you done that math on the syntax website where evaluating JSON data 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 Maybe you're not allowed to loop over some data, or maybe it's

probably you, the listener, won't After running to it all that often, but it's kinda neat to take a peek behind This is another regex one to add on to the first one we had.

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.

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

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,

And then you would return a string from this callback.

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

When I do stickers,

I need to group the orders by country and group them by the number of stickers people have they are because you can polyfill this in, like, 20 lines of code.

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, server side stack trace rid Deobfuscation.

don't get your tweet already about how Safari is new IE, I You can pass those flags via environmental variables.

ordered But being able to use the entire thing 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.

like, most of the in all of the browsers. Like it's only been in

technical preview. But this is one of those things where you don't have to an ESM project or your project is CommonJS

it's in Chrome. It's in Firefox. It's in Edge. And it just landed in Safari So basically, when It would be nice. And also, I think that's really cool because then we would be able to

orders by country. You loop over the array

because it's different amount of stamps. So I have is not the default rid Because of backwards compatibility.

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 In fact, I worked Quite a bit with some of these polyfills to get used to this API.

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,

You might you might go straight to a low dash or something like that, but, whatever

too

Inside of those, I have 1 pack, 3 pack, and 10 packs. And Mhmm. I have to write this massive reduce

taking it'll allow you to specify

don't whine about this because it's something you can use today Welcome to Syntax. Today, we've got new and proposed JavaScript APIs for you. These are things that and use a Kabuko Tasty treat. You want to figure out where your errors are going wrong downloads

Next 1 is something that you might actually use, which is array grouping, which is a method on the object,

It was automatically polyfilled in Core.

where you can simply even just grouping it will prompt you first before you are able to do that type of thing. That rid is awesome because is always done inside of the promise callback.

and it will give you an object where all the countries are the keys And all of one So

un but I certainly

to create immutable versions These are often called deferreds. So you may have used a library in the past to is tiny.

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

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

This one is in stage 3 currently.

And so this is really nice because it'll allow you to,

be a performance consideration.

to,

with an assert keyword. You assert 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

that you are going to import

using

rid Typical loaders. You might be thinking, hey. I can already do this,

Within JavaScript, just straight up,

And if you don't have a very large array, it's just kind of nice rid. Because, again, also reversing an array, in

Rid. Now you know that when you are importing from JSON, you're able to access the object directly from JSON

Yeah. Totally. Re Next one here is JSON modules, which is part of the import import assertions

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.

or maybe I'm in a system that can do this. And typically, like, right now, that's being done through,

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 you will sometimes see on the end, you'll see a plus,

just as if you would

do any sort of compilation to import data.

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

brackets type JSON.

Basically, it is finished, and it is shipped. And it is in all the browsers as of Firefox 104,

proposal, which allows you to import

and bad. You want to And

Sentry will take your source map and line it up Chrome, Firefox, Safari for A lot of times around WebSockets on online

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

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.

And let's say you have a bug when you want to from Armin, who actually works at Sentry, is add the

deprecated.

So Sentry is backwards.

is they take in your source map.

part of what Century does

things get proposed to be added to JavaScript, type of module or m j I or or, yeah, MJS.

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

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.

There you go. Well We could just readd my key. There there is 1 proposal in here that It's amazing. You probably that that huge polyfill you're thinking of was probably part of the intl 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 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 rid. And there there is,

has to do with Sentry.

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, you take a time stamp of seconds And then the rest of the properties, you take a deep clone of.

I think that's gonna be really nice. Yeah.

Next one we have here is regex modifiers.

Yeah.

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.

implementation of just, like, importing anything into your JavaScript, forward to especially when you're doing If you try to access the network, you try to access the file system,

classes from a CSS file. Yeah.

The closer we get to, like, the Vite 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