What's New in Javascript

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

Welcome to Syntax. This is the podcast with the treats that are pretty tasty.

Today, we are gonna be talking about what is new in JavaScript. There's a whole bunch of new APIs that are coming to the browser, to Node, to ECMAScript, which is just the JavaScript language in general.

We got some really interesting stuff that is in proposal stage right now. Knowledge coalescing.

What does that even mean? Just some words. Really, really Scott of nuggets. These are things that you're, like, be able to use now or within, I bet, the next 6 months or so. So let's get on into it. Today, we are sponsored by LogRocket, which is online session replay, network activity, all kinds of interesting stuff that will show you what is going wrong with your website JS well as FreshBooks, which is online invoicing and accounting and expenses, all that good stuff. We'll talk about them partway through the episode.

With me, as always, is mister Scott Tolinski. How are you doing today, Scott? Hey. Yo. Hey. Yo. Hey. Yo. Hey. Yo.

I'm doing good.

Just hanging out. You know, everything in life right now is sort of breaking. My, you know, the handle broke off my microwave. The, dish my dishwasher JS not working.

The ice maker is not working.

Our dishwasher broke the other day too. What happened to your dishwasher? It's just not cleaning.

We've we've done quite a bit to check out why. You know, there's no clogs. We've run a lot of cleaning cycles. We've run run it with, you know, vinegar. We've done all sorts of things, and, it's just not working very well. All of the appliances were purchased, like, 2 owners ago in this house, so we Oh, yeah. They might be hitting that age where they're gonna have some problems, and I'm gonna have to start taking some things apart and figuring it out or who knows? I don't know. I don't wanna buy a new one, but Yeah. It might have to happen. They're old. We had ours

flood. We didn't clean out the I don't know. Somebody in our house is thinking that you can just put a a plate full of corn directly in the dishwasher, and that clogs the, like, the drain. And then it overflows, and there's a sensor in the bottom that's just 2 pins.

And when that those pins hit the water, it it can tell that there's been a leak. And we just, like, left it for, like, 2 2 days, and we're, like, put a heater on it. We're, like, it'll dry out, and it just didn't wanna, go Oh, no. Back. So, finally pulled it out and just tipped it over and drained it out, and it went back to being fine. But Hey. Appliance repair is very frustrating given how like, it's it's definitely possible to fix these things. Like, we've talked about that before, but it's the parts are often really expensive and They require frustrating. A lot of, like, like,

you know, getting your hands in there. I mean, we need to fix this. We need to, like, change the seal on our, dryer or washer, one of the 2. And it was so impossible.

It was like, oh, the seal's only $20, but the tool that they use to apply the tension band around the seal is, like, $90.

And it's like, well, I'm not gonna buy the tool for this one time use. So I saw a video that showed you how to do it with screwdrivers. And I had, like, several screwdrivers, and I'm, like, pulling them and trying to get the tension right on this thing. And, oh, my Node, I I think it was one of the only times where I've had to, like, set everything down, just step away, and, like, take 10 minutes to cool myself off because I was getting so angry.

I was so angry.

But, yeah, that's how things are going over here, man. I'm just generally working on some co working on some fun Svelte stuff, maybe we'll have to do an episode on. But let's get into some of this JavaScript because there is a lot of cool stuff that came in 2019, e s, e s 2019 and e s 2020 and, maybe some things beyond. We're gonna be talking about some of these basic features, but some more advanced stuff and some really interesting things. So I'm gonna kick it off with flat map.

Flat map is, basically map, but it allows you to return an array rather than a single value. And, typically, if you use map and you return an array, it's going to have an array within an array. You could think of it as like, okay, we're mapping over this thing. We've returned an array, and then you end up having array inception. Right? Because it's returning an array. Well, with flat map, the cool thing is is that it flattens that array just like it would sort of when you're returning an array from a function. And now in this example, let's say we had an array with 4 numbers in it. Right. And you returned an array with a number and a number times 2 instead of being array array array inside of an array, you get, let's say it's like 1, 2, 3, 4. You would get 1 and then 1 times 2 and then 2 and then 2 times 2, and then 3, and then 3 times 2, and then 4, and then 4 times 2, all within 1 flattened array rather than nested arrays.

Pretty cool. Oh, yeah. So that's just kind of a little convenience method around just first mapping and then taking your array of arrays and then running with the next one that we have here, which is just dot flat on the end. So there's a bunch of new methods or, like, object dot entries, object dot values, object dot keys.

All of these new methods will return to an array of arrays.

And if you want to get that into just a nice clean array so you can work with it, you need to flatten it. So the new dot flat method exists on all the arrays, and this is just another

reason why you don't have to load in, a Lodash or something like that, the utility library, because it's just built in. That seems to be a pattern with this modern JavaScript stuff, even, like, all the way back to Wes 6 and onwards.

Like, we've just been seeing a lot of the features that have been in Lodash being implemented in native JavaScript. It's funny. There's probably gonna be like, you don't need Lodash at some point because it is. It's like the most used utility library in JavaScript.

So at this point, probably no surprise that a lot of these things are being added to JavaScript itself. Did you see this Sanity keyword? Have you seen this infinity keyword in anything else before? I'll talk about it in a minute here, but I have not seen this in anything else personally. If you do an array dot flat and then you pass in the keyword capital I infinity, it does it every single nested layer deep. Because if you just do that flat and you have multiple nested arrays, it only flattens the 1st level. So if you use the infinity keyword, it flattens all of them. I didn't realize you could pass it infinity.

Yeah. Isn't that weird? You can obviously pass it as many levels deep as you want. Infinity is it's been a keyword in JavaScript forever. There's also negative infinity. I've never used it. Interesting. Yeah. No. Neither have I. I don't know What other why you would need it. Like like, if you need, like, the upper bound and the lower bound of something, they are true numbers. So you can say, like, ten is greater than infinity, then it will be obviously false. So I guess if you if you wanted to check if something was greater than I don't know. Yeah. Right? Yeah. Scott of good use cases for it. We just can't think of a interesting one right now. Well, this will be the use case where I finally use it, so

props.

Good.

Next 1 we have here is array dot from entries, and this is super interesting to me. I've I've used this Node 3 times already since it came out, and it only came out just a little while ago. I'll link up some tweets where I have some code examples.

And this is object Scott from entries, and what this allows you to do is you take an array of values, and it will turn them into an object. So, object dot keys, object dot values, and object dot entries, these will always return to you an array of values.

And, almost always, when I'm trying to change something about an object, I'll quickly pop it into an array, loop over it, and do what I need to do, and then I need to convert it back into an object.

And object dot from entries is this most helpful one. I've got a bunch of links in the notes to some examples that we have here, but even even something as simple as if you have a a string with, like, a comma and then you wanna split that comma, and then you need to loop over and turn it back into an object, Object. From entries is coming in clutch. Previously, you've had to use, reduce for something like that. And and that that's sort of another thing that I'm seeing with a lot of these new methods is that every time we come out with a new one of these methods, flat flat map Mhmm. From entries, they sort of the array dot reduce use cases that we we used to always go for, we don't go for them as often because, like, a rate dot reduce has always been this, like It's convoluted.

It's a tool that we reach for. Yeah. It's it's it's convoluted.

It's super helpful, and it's what we reach for when we need to do really anything, and there's not that built into JavaScript. Right. And now we have these custom built methods for it, and I much prefer those because the array dot reduce

tricks and kickflips that we do, they're hard to read. It's hard to parse. Yeah. Yeah. It is. It's hard to parse. And and I don't I never, like, look like, when I see a reduce in my code, like, I have to leave good comments on it because I come back to it. I'm like, okay. What is this doing exactly? Okay. Yeah.

Next 1 is going to be this is fairly, I don't wanna say benign, but this seems like pretty useful, which is trim start and trim end for strings. So you can now run a method, trim Scott or trim end on strings. And what that's going to do for you, it's going to remove the white space either in front of the string or the end of the string. A nice little thing there. You're not gonna have to remove it via, you know, whatever. Find this find the empty space and replace it with the nothing kind of tricks that we've done in the past.

Yeah. Because we have had trim in JavaScript forever.

It's just that if you only wanna trim one side of it, for whatever reason, maybe you are looping over some stuff and you need to include the space at the end of a word, but you wanna trim any spaces that are at the front of a word, then there you go. It's it's not like that. That's really it. It's not that exciting, but certainly helpful.

I'm so stoked about trim end. Yeah. Let me tell you.

Just go to full YouTube mode. Hey, guys. Today, we're gonna be talking about trim, and let's talk about this thing right here. Yeah. No. Okay.

Blasting it out. It's Yeah. Unreal. So useful. You wanna trim from the start, trim from the end. You wanna do both? You can do it. Them together? Yeah. You could do it. Node make sure if if you like that this kind of content, go ahead and just destroy that like button. Just push it so hard.

Destroy it.

Yeah. Classic YouTuber.

Function to string? Function to string. I don't know what this does. Does it just make your function a string? It does. It just Wes it sounds. So if you have a function and you would like to turn it into a string to do something with that string, maybe display it or something. I don't know why with the use cases for this. Maybe it is displaying code. Right? You wanna show off some code. Here's a function.

Well, now you can take your function, run that to string, and it's going to give you a formatted string of your function, exactly as it sounds.

Is it just the function name or all the code inside of it? The code inside of it. The whole thing. Next Node we have here, and this is not new at all, but this is something I've said many times in the past and and many people have told me JS that objects and their keys have no order.

Mhmm. So if you've ever added items to an object, you'll look at them, and they you say, oh, that looks like they're going in order at which I put them in.

And then somebody comes around and says objects cannot guarantee order.

And I've said that many times probably on this podcast, and I learned that that is untrue.

Object keys do have order, and here is the order that they go in. First, they go based on ascending integers. So if you have a key on an object that is a number, which is weird, but you can do it in JavaScript, then they will go in whatever order from ascending order. So, 1, 2, 3, 4, 5. Then string keys, this is most likely what you're using. So anytime you add a new key that is just a word or we can say property. If you add a property to your object, they will be guaranteed in insertion order, meaning that in the order that which you add the properties to an object, their order will always be maintained, and that is guaranteed as of Wes 6, which is kinda interesting.

And then symbols go at the end. Uh-huh. So object order kinda is guaranteed, which is nifty. Maybe you can abuse it and stop using arrays.

Yeah. I never use arrays for very much. I mean, other than, like, collections and whatever. No. I never use no. I never use an array. Never. No. Of course not. So with all of these features, you're gonna be able to blast off and and, write some really fancy Node. And just like one of our sponsors today JS LogRocket, also blast off whenever your code is bad. And what I mean by that is what LogRocket does is it captures video of your users making mistakes. Now it doesn't turn on their webcam and and show them, you know, freaking out about your website, but what it does is it gives you this session replay, they call it. And the session replay is so cool because it shows you in a scrubbable time line the user committing a bug. They click on something, the site breaks. It turns purple. It turns upside down. It turns into a tomato. Whatever happens, well, LogRocket is going to capture that in a scribble video with the network requests and all those console logs and errors and Redux store stuff that you don't get anywhere else. So if you want to stop guessing why your bugs happen, head on over to log rocket.comforward / syntax, and what you're gonna get is 14 days for free. So check it out. It's, super easy to set up. Just drop in some code, and next thing you know, you're gonna be seeing and watching in horror as users commit atrocities on your website.

So let's get into Wes 2020.

ES 2020, and I think it's starting off with a big one. And by a big one, I mean, Big Ant.

Big ant was my rap name in university. That's pretty good, Rodney.

Thick ant.

Wes.

That's okay. Big Ant? Yeah.

What is Big Ant? Wes, okay. So let me tell you let me tell you about BigInt because this is not something I've ever really had a huge problem with, but I know people who deal with large numbers have been asking for big int for a long time. Node, typically in JavaScript, the upper limit for a number is what is it? It's something funny. It's let me find it. Let me find it. Thousands. It's it's in 1,000.

So the, default number only goes up to 2 to the 53rd power minus 1, which is a big old number.

But sometimes people need to work with big old numbers, and I don't need to personally. But maybe there's a time where I need a big old number. And so they 2, if you would need that numbers larger than that, which is a crazy large number, then you're going to get to go ahead and use the big int. Now big int is a function or it's an object that, allows you to represent very large numbers.

So those of you who are working with big numbers, maybe you've hit that limit, and you've been like, wow. Why why this why is this math not working? You're gonna wanna go ahead and check out BigInt because it all it does is basically allows you to use numbers that are larger than that upper limit in JavaScript.

You know what I I ran into the other day? I thought this was really funny, is that I was using Twitter's API, and Twitter gives an ID to every single tweet. Mhmm. Like, the 1st tweet was probably 1.

A second tweet was probably 2.

And for the longest time, that was fine. And, at some point, the number of tweets exceeded the amount that this number that you were talking about, and Twitter's API sends you the ID of the tweet. And then if you try to take that number and display it as a string, it's wrong. Interesting. The right one. So Twitter's API solve that by just sending the ID as an a secondary property called ID underscore s tr.

So they send it as a string as well, and that's what you need to use, if you wanna link to a specific tweet. Cool.

Yeah. I thought that was kinda inter we had the same problem with, syntax.

I so so stupidly numbered the podcast as, like, podcast 1. Like, I thought it was, like, so cool numbering our podcast starting with double 0.

And at a certain point, if you wanna parse int, you wanna parse, like, a string Deno zero one into, number 1, then that's fine. But I think once we hit, like, episode 130 or or 98 or something like that, like, it stopped because of, like, being Bos base 10 or something like that. I remember going through it down a rabbit hole, and I had to redo every single episode Right. In real numbers. So don't use leading zeros or big numbers if you know you're gonna go over that. Interesting. Those are some,

lessons from the the trenches here.

Yeah. Next Wes have here is Nullish Coalescing, which is a very interesting name. I thought this is pretty cool. This is cool. I like this one. You can start to use.

So if you want to use the or trick in JavaScript to fall back to a value so let's say you wanna store a variable called score, and you say the score is equal to the user dot score value or ten. Like, that's the default value. Mhmm. And and what that will do is it will check if the user has a score value.

And if they don't have a score value, it will fall back to 10. That's why we always use the the pipe. Like, pipe pipe is the or operator in JavaScript.

The downside to that is that the pipe operator doesn't check for null or undefined values. It checks for falsie values, which the falsie values are Scott, put you on the spot. What are all the falsie values?

Node, undefined, 0.

Empty string.

False.

I think that's it. Wow.

You're very cool about that. I would've panicked.

So those are all those values equate to false in JavaScript. They're that's why we call them falsie. They're good enough to be false.

But if the user's score was 0, that would actually equate to being a falsie value, and then it would just default their score to 10, which is not what you want. Right? Right. Or if somebody's last name was nothing like Cher in my JavaScript, of course, we use Teller from Penn and Teller Yes. And Cher.

We use that to define the difference between null and undefined because Teller's last name is null because he explicitly got rid of his last name, and Cher's last name is undefined because she doesn't have a last name. She's just there's just no it's never been set. She was born a Cher.

So if you wanna check if something is either null or undefined and not an empty string, not false, and not 0, then you can use this new operator, which is question mark question Yarn, and we can say, so the score is equal to the user dot score question mark question mark 10 or 10. So if the user score is null or the user score is undefined, then fall back to 10. And I think you should probably start using this in everything JS I've certainly hit this bug before where Yeah. Anywhere where you're not using numbers or whatever. Yeah. Yeah. Yeah. So cool. Pretty cool.

That is really cool. And it's funny. It's got a scary name. I think it throws people off. But we got some really nice question marks and new syntax in 2020. And another, excellent question mark syntax JS, optional chaining, which is something that I've been using for quite a bit through Babble and through whatever. And, thankfully, TypeScript added it because optional chaining is one of the greatest features for me.

Because, typically, what it does is is if you have an object with objects inside of it, right, And maybe you're unsure of the data that's coming in. So let's say you have a user who has an address, who has a street Node, And maybe that street name, you're not sure if that street name is or you're not sure if the address itself is even there. So if you were to write user dot address dot street name and address did not exist, the whole thing would break because you cannot use property of undefined. We've all seen that error. Cannot find street or cannot use access street of undefined. Whatever. We get that error all the time. And so, typically, a solution to this would be like, if user and user dot address, then check user dot address dot street. Right? Whereas with optional chaining, you can just use a question mark here before the dot. So it now is user Wes mark dot address Wes mark dot street or whatever. And you will no longer have those errors because if at any point any of those properties does not exist, the whole thing JS going to short circuit and return an undefined for you, Therefore, allowing you to do some really nice if statement checking to say, like, if this question mark dot this question mark dot that exists, then do this thing and you don't have to worry about your code breaking. I use this constantly, especially with data that you're not sure if it's going to be, existing or not. So this is this is a big one for me. I love the optional chaining.

Unreal. It's like this is probably, like, the best thing in this entire Node. Yes. This optional chaining, it makes so many places where I've had this. You check for the 1st property, and if that's there, then you check for the 2nd property. And if that's there, you check for the 3rd property. It's such a pain, And this is already added to Babel preset ENV, which is what Gatsby uses. It's what Next. JS uses.

It's what most things use. So you can already start to use this without having to do

custom Babel configs. And it's in in TypeScript too, so t s people. That's so good. I'm a big fan of this. It's so good. What did Julie do before optional training? Because I used, primarily Lodash has. I don't know if you use Yeah. Has. I would use Lodash has, or I would just kinda

bite and chew and and write out the entire and, and, and, and. Yeah. Usually, I would just do the secondary because I didn't feel like installing Lodash.

I wanna kill the build and install it and restart it, so I just kinda did it. And, I'm so happy that this is it. The one thing that I want to say for this is it also works with arrays, and the syntax is a little bit funky. So if you want to check if something is in an array, like, you wanna check for the 2nd item of an array, you do the array Wes mark Scott square bracket and then the index of it, which is weird because you usually don't have to put a dot before you you reference something in an array. But in this case, you use both the dot and the square brackets to reference the array value.

Yeah. That's interesting.

You gave me a great idea by saying kill build. I'm going to now write, a new alias or something.

Kill build. Kill build that just just that just deletes the build.

Kill build. Oh. That's pretty dumb. Kill build should kill it, delete your package lock, delete your node modules, delete your Yarn lock Yeah. And re npm install, and then start it again. Done. I'm gonna add that to my my code base. That sounds great.

Next, we have promise Scott all settled.

We talked about this one. We did a entire episode on the new promise methods.

There There's a couple of new ones. This one is part of ES 2020.

This will resolve when all of them are either resolved or rejected, which is different than promise dot all because promise dot all will resolve. If one of them is canceled or one of them JS rejected, then the whole thing is over. Mhmm. So if you wanna, like, wait for everything to finish, then you can use promise to all settled.

Yeah. That sounds fun. Just another option there for our promises.

Next one is going to be dynamic import. Now dynamic import is something that is going to be super useful to a lot of people. What it does is it basically allows you to import a module and return a promise. So instead of importing the module at the top, what we're able to do is to import this thing and then wait for it to load. And then when it loads, alright.

This is super useful in things like code splitting. You can use dynamic imports to say, alright. I'm going to import this section of my website, but only when it's needed. So when it's needed, then, the import happens. Like, let's say you have a I'm gonna use this in a React content. So let's say you have a Node page, and then you have maybe a forward slash tutorials page. And on that forward slash tutorials page, there's a whole bunch of code here. You don't want all that stuff to import and load and whatever at that time so you can dynamically import it. That way, when they click the route,

then it then imports that code. It's basically just a perfect improvement, and it can be used for things like tree shaking and all sorts of nice stuff. So I I use this in Vercel up tutorials myself. I don't know if you use dynamic imports at all, Wes. Yeah. I do. Especially for, like, even just something as simple as, like, loading in some data, like a list of countries. Mhmm. There's no need to put that list of countries in your build. Just require it with the dynamic import syntax before you go ahead and render out a list of countries in that drop down. And then the 2nd time you render it out, that dynamic import, it's it's promised Bos, so it will just resolve immediately because it's been cached and downloaded already.

Yeah.

Next up, we have string Scott match all, and there's another one. Where's I don't see it in here, but it was, string dot replace all. It's right below it. What's odd is that replace all is still in stage 3.

Oh, is it? Yeah. I've I've already been using it in Oh, yeah. I've actually I had to put a polyfill in node,

just to get it, but I love it. Yeah. Replace all is is stage 3, but match all is in. So I don't know why, but, yeah, related.

Replace will replace multiple instances if you use a regex, and that's kind of annoying because Wes. If you have, like, a variable that you wanna replace, then you have to write an external regex and pass it in via reference. Replace all will allow you just to pass a string of what you wanna replace, and then the 2nd value is what you wanna replace it with. And then there's no getting into regexes. And one less regex that I have to write is very welcome by me. I know. I was doing some regex in this weekend, and

I always regret when I have to do it. I use I always, like, almost every single time and I don't know if you're you're familiar with the regex Node zero one, I believe, is the site. Regexone01.com.

Let me check that out. Make sure that's the website I'm thinking of. Yes. Regxone01.com.

I always have to go to this site. I paste in my my test strings, and then I write my regular regular my regular my regular expressions in here. Now the cool thing about this site, shout out to this site, is that they give you a quick little reference here. So if you need to, like, look up and search for, like, okay, I wanna reverse this or I wanna do this or whatever, it gives you all that nice little reference there. And, of course, you can change it to JavaScript, Python, Golang, whatever. So this site is fantastic.

I'm a big fan. I use,

regexr, r e g e x r. It looks like exactly the same thing. It's from Grant Skinner who was big in the Flash world even before JavaScript.

Yeah. Skinner.

But they're so helpful because you can look at, like, commonly used regexes. Oh, this is cool. Yeah.

And you can save your own.

Because, like, it's like find everything but numbers or find phone numbers or or match URLs, things like that. I like this. I like I like this.

Cool. So next Node is going to be a big one, and this is Global This. Now Global This, I know there was, like, a lot of talk around the naming of whatever they should name a Global This.

This JS one that I kind of ignored, even though I shouldn't have ignored because I have so many perfect use cases for this. So globalist comes in handy when you're working on code that's going to run-in many different places. You could think of it as like, alright. In the browser, you know, the globals are put on the window. Right? But what about Node? Right? And if you're writing code that needs to run on the browser and the window or, I mean, the sorry, the browser and the server, then all of a sudden you have to do this whole business where you're checking to see if it's the window or if it's the global or whatever. Now we have access to global this, which basically is a standard way of accessing the global object itself across environments.

No more worrying about whether or not the window exists or whatever. You can just use global this rather than window or dot global or whatever you need to use based on your environment.

Fantastic.

I'm I'm, I'm super into this one. Yeah.

You're super into this one. I like it. Oh, I'm super into global this one.

Next one we have here is module namespace exports.

So we've had the syntax import star as whatever from a specific utility, but we've never had the similarly named export value.

So if you want to import and export something immediately but you wanna do that as, like, a sub object, you can use this new syntax, which is export star as utils.

So, basically, sorry. Let me read the whole thing first. Export star as utils from utils.js.

So what that will do is you import everything from a module, and then you wanna export it immediately. We we've had that, but the as utils part is new, meaning that you can import everything from a module and then export it out, but as a single named value, which is, in this case, utils.

Yeah. I don't know. At first glance, I didn't know if I would use this, but I I do use export asterisk from blank a lot. So maybe I would use this as well to sort of bundle up some of these into, like, an object. Right? Yeah. Interesting.

Yeah. Like, I Wes, if you wanna, like, put them in their own well, I don't know. We'll see. I we'll see in, like, 6 months if I've ever used it. I I don't think I would, but it's there.

There's a chance I'm gonna use it. There's there's a there is a definitive chance. Alright.

Next, we want to talk about something that there is a chance of you using as Wes. And that's I'm talking about FreshBooks here. It's the freshest sponsor we've got. Yeah. Sanity was more on FreshBooks JS Wes.

FreshBooks is a small business accounting software that makes billing painless if you Sanity to spend less time on the books.

This is a pretty common thing that I hear from people who are running their own business or running their own show for a while, and they say, like, I got a job because I'm sick of doing the, like, the business side of it. I just wanna be a developer, and, totally, I hear you on that. And the one tool that makes me able to do that is FreshBooks, cloud accounting, all of your invoices, all of your expenses, all of your time tracking, everything that you need, reports of how you're doing, profit and loss, tax summaries, how much do you owe on whatever local taxes in your area. You wanna check it out, freshbooks.comforward/ syntax, 30 day unrestricted free trial. Make sure you use syntax in the how did you hear about us section. Thanks so much to FreshBooks for sponsoring.

Awesome. So now we're going into some, browser stuff. I am interested, in some of these because I am a little bit less up on the browser things than I am on the JavaScript features. So this first one you have is share Scott share navigation dot share.

Now what is what is this about?

So, like, all of the apps on your phone, they all have, like, that little arrow where you can share it. You can airdrop it. You can text message it. You can save it to your your photos, and that for a specific piece of content is sometimes hard to do in a specific web page. So navigator.share is going to be a new API that will allow you to share different pieces of content. It's still experimental.

It's still not totally implemented in all the browsers, which is a bit of a bummer. It looks like Safari and Chrome for Android and Bos are the only ones that support it. And then there's another API, which is navigator.canshare

Mhmm. Which is just a,

returns a Boolean whether you can or cannot share it. So do these use the

the default browser or like the like the mobile default share menu? Like, is that what it is? It's, like, popping up the mobile share menu?

Yeah. Like, that's that's the whole thing about navigators.

Navigators how you tap into the environment that your website is running on. So navigator.getusermedia gives you access to the camera of your device. Mhmm. Navigator.geolocation gives you access to the GPS of the device. So if you wanna be able to access the device's share features, that's what this API is for. And I'm on these because it means less apps and more fully featured websites that aren't as they're, like, not as good as as the app. You Node? We we see that a lot. This is another step towards that. I wonder what it does on desktop. I don't do much, like, desktop click sharing things,

especially on Windows Mac. I have no idea what that looks like, to be honest.

I actually use it quite a bit to send stuff air I I use AirDrop a lot or send something to there's also, like, in Sketch, you can share to cloud app. So it'll, like, automatically upload it, and then you don't have to do the whole, like, export it and then upload it. So, like, just, basically, it's an open standard of sharing data between 2 things. And if that works, then the everything sort of is just, like, weaved in a little bit more simply. Yeah. So I use it in Sketch quite a bit. It's built into OS X. So It's built in well.

You know what? You wouldn't have to do that if you used Figma because it's all in the cloud by default. So there you go. Yes. I need to need to get myself some Figma. You do. You gotta check out I'm doing a course on Figma this month, so I'm, like, super into it right now. They have these, like, auto layout things where when you type in a button, the button automatically resizes itself. That's so cool. And they just added links into Figma documents. So now you can link from one thing to another. So when you click on it, it links you somewhere else so you can make links. And then that's gonna be great because it's like you can it's it's perfect for the design system stuff that I'm I'm doing right now. So yeah. Yeah. I have been saying next big design project I have, I'm doing it in Figma. You're gonna love it, man. You're gonna love it. It's fantastic.

Yeah. I can't wait.

This next one is a Node API. It's called Async Hooks, and this is just, it's a experimental API, so it might not even get anywhere. But as far as I can see and understand what it is, it's sort of like event listeners for different points in a callback's life. Mhmm. So the the example that they have is, if you use create server Deno Node or use f s dot open, that's to open a file. These things, they start, they run, and they they close. And if you wanna be able to listen for different points in that, API's life cycle, Much like React has mount and unmount and update, you'd be able to to hook into those things. So when something connects, you can do as far as from reading the docs, that's what I can understand it is.

It's likely this is more of a a library author thing, but I thought it was kinda interesting to mention as well. Totally. And I would keep going with these. I'm I'm interested.

I don't know. I don't know any of these.

Oh, that's fine. Oh, this is a really cool one. It's the pipeline operator. Oh, yeah. Been around for for a long time. So you've got 3 functions that all do something. Like, you've got a capitalized function, you've got a yell function, and you've got a personalized function or something like that. And if you want to run all of those functions with a piece of content, use you have to wrap them around each other. We've all done this before. So if you wanna, like, add, then multiply

Mhmm.

Then format into into money, then you find yourself wrapping format money in multiply in add. Right? And if you wanna figure out what happens, you have to sort of start in the middle and work your way out to understand what order is happening.

So the pipeline operator will allow you just to take a value and pipe that into this is very much like gulp. Remember gulp piped everything? That was the best. Yep. Pipe. Pipe. Pipe. So you just take a value. You pipe it into a function, and then you can just chain your piping values Node after another. And the the syntax for that is pnpm, close angle bracket, which is pretty pretty cool. I hope that this comes in. I don't use it all the time, but I think there's a lot of people that would. Yeah. I I guess with, like, map filter reduce, we already Scott get this piping layout, but that's just because each of them return an array, and then we're able to do that because the prototype has the method on it. But as soon as you get into the situation where you have your own method that's not on the array prototype, then you have to, like, save it in a variable and then throw it into your own function. So this will allow you to have that nice chaining map filter reduce and then also throw in your own functions, which would be pretty nifty. Pretty Sanity.

I wanna see where is it at It's

stage. I don't know if it is even stage, is it? Oh. Stage

Node proposal. Yeah. I think this has been around for a while. Yeah. 2 years ago.

So I don't know if it'll ever make it, but I it'd be pretty cool to get it. Yeah. Could just be in limbo like decorators forever and ever.

Next up is is top level await, which I think a lot of people are awaiting.

Top level await is yeah. I know. I know. I know. I know.

Node, typically so, like, if we wanna use a single await, right, then we would have to do so in a function. We have to create an asynchronous function. But, like, let's say you have some code that's just running in a module, and you're like, oh, well, I need this code to be asynchronous. You'd have to use promises. You'd have to use I mean, I know asyncs using promises under the hood. You'd have to use callbacks, whatever. It's a little bit different. But now we'd be able to use await in a file without having it be wrapped in a function, simply by declaring how do you actually declare? Is it just do you just do it? Yeah. You can just use it, and you can use it at the top of or anywhere in a module. Yeah. Is it just any like anywhere anywhere? I thought you had to declare something to make this happen this way, but it looks like no. It looks like it just does it, which you could use for things like imports. You could just await and import,

at the top of file. That's pretty cool. Yeah. The people always said for a long time, like, isn't that a foot gun, something that you can can hurt yourself for? And the response to this is that top level away doesn't block sibling files. So if you are awaiting something inside of a module, other modules that are running are not blocked by that. So you're not actually blocking anything. You're just awaiting that that specific module.

And there's a couple other things. Yeah. I will link to the blog post here. I don't think it's, totally our wheelhouse to to totally explain it all, but check it out. There's a really good post on v eight Scott dev that explains why we now have access to that. Even just something like like I said, like a like a list of countries.

If you need a list of countries before that module runs, previously, you'd have to, like, export a function that says get countries, and then you'd have to await that inside of your your loading functions. Now you can just await it at the top of your module, and, obviously, that will take a little bit longer the 1st time your module Node. But for a lot of people, that's totally fine to to do.

Yeah. Cool. Hey. I like this. So, I don't have everything else. Do you have do you have any more?

Last 1 I had here is that Safari has finally introduced resize observer, and that's a big one. Like, I had to pull in a polyfill the other day for Safari. But now that Safari has resize observer, everyone has resize observer, and that's huge for all the cool stuff that we wanna do with resize observer.

And then, also, we talked about this before, but Edge now runs on Chromium.

So that is good for

JavaScript, we think. And did you see do you see somebody from Microsoft close, like, a a super old Chromium bug that's, like, existed for some time. So No. I think Node everybody was rejoicing about that. I didn't actually know what the bug was. But, like yeah. Hey. If that makes everything better, then that's I'm cool with that.

Yeah. At least for, like, me as, like, the JavaScript developer who wants to use new things, that's good. Yeah.

Whether that's good or not for the diversity of the browser landscape, that's a whole another Right. Whole another thing, but I don't know. I'm pretty pretty stoked on it. Yeah. Absolutely.

Should we get into some sick picks?

Let's get into some sick picks.

Do you have any sick picks for us today, Wes?

I'm gonna sick pick. I I sick picked this a couple years ago, but I often like coming back to things after having them for however long and seeing how they go. And this is the DEWALT oscillating multi tool, otherwise known as the tool that I I always talk to my wife. I'm like, we need to get the in here.

And this is a little tool. You slap a battery in it, and you put, like, these little blades on the end. And it's the perfect tool for cutting out little pieces of wood or trim or cutting off a nail or flush cutting something.

My friend referred to it as the get out of jail free tool, Mean that when you can't get a tool in a specific place or you need to cut something in a weird angle or I just trimmed a bunch of spray foam insulation in my office with it. That's fun. And, like, it was so so handy for this the little tool that it is. You can buy it, like, hundreds of different kinds of little blades for it on Amazon.

I bought like a little blade kit and some of they have like sanding ones and they have metal cutting ones and they have really thin ones for cutting just little pieces of trim off. So check it out. It's called the the you don't have to get the DeWalt one. That's just like you buy whatever color batteries you have. What? All brands have this multi tool, and they all take the same

size of blades, which is really good. Oh, that it that is good. Yeah. Alright. I'm gonna stick pick something fun here. It's gonna be a code project. That's fun. Right? Usually, we do all sorts of, like, actual things, but this is going to be a code project, and that's sapper.

I'm, sick picking sapper because I've been using it to do my new website, which is like I it's just slapdash. It's thrown together. By the time you see this, it might even be a little bit better. But I was just figuring, you know, my my previous site was from, like, 2013 or something. It still said I worked in Dearborn, Michigan.

It was very out of date. So I was like, you know what? Screw this. I'm gonna, I'm just gonna do something new here. I'm just gonna start throwing things together and not care if it really runs, you know, or it looks great or whatever. And sure enough, I decided to pick Sapper because I thought it was interesting to try. Now Sapper is sort of the Next JS analogous, for Svelte, and it is really super cool. My my entire site let's see what my entire site is because it, like, you can load this as a Node app or you can do static generation for these things. So my entire site JS, let's see, 60 k b total transferred.

It loaded in 100 milliseconds.

So it's pretty dang quick. It's pretty small. There's, like, no framework. The thing functions really nicely. And you get all of the awesome stuff from Svelte. Like, I'm using the built in Svelte animation library to do these really neat transitions on on my pages, which let me tell you, it's such a breath of fresh air to have the animation library baked in because it's opinionated. It does everything correctly. You don't have to struggle with a whole bunch of different knowledge or interface. Everything just works really well. So I'm going to Scott out to Sapper, and statically generate me a gorgeous site.

And, it was a lot of fun to work in. So check it out if you are interested in building something fast, that you need to be fast, and you need it to be easy, Sapphire is pretty cool.

Awesome.

We're going to shamelessly plug our courses now. Mine are available at Wes Bos .comforward/courses, which, hopefully, by the time you listen to this, I should have my my new website live, and that's my new course page as well. So check it out.

Use coupon code syntax for $10 off any of my courses, and they were likely also still be on sale due to the current pandemic situation.

Holler. Yes.

And my courses are at leveluptutorials.comforward/pro.

Sign up to become a pro today, and you'll get access to, well, just a ton of premium content that I've been releasing over the years. And what I do is I release a new video series every single month. The video series that's coming this month is on design systems within Figma. So if you're interested in learning about design systems, if you're a developer and you wanna pick up some design knowledge, a little warp. Check it out. It's gonna be really cool. A lot of fun.

Alright. Thanks so much for tuning in, and we will catch you on Monday.

Peace.

Peace.

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.