New to JavaScript — ES2022

Welcome to Syntax, a podcast with the tastiest web development treats out there. Today, we are digging into what is new in JavaScript in ES 2022.

We're gonna go through all the different stuff, a whole bunch of really exciting stuff. I'm mostly stoked about this new at method on strings and arrays, But there's a whole bunch of, like, handy stuff, so we'll go through it and explain what it is, why you might need it, and how you use it. Today, we are sponsored by 3 awesome companies. Re 1st 1 is Sanity structured content CMS. 2nd 1, LogRocket JavaScript session replay. And 3rd one, Auth rid. 0 is login and permission service for your applications.

With me, as always, is mister Scott Dalinski. Scott, You just moved into a new place. How is it? Hey,

man. It's awesome.

Every aspect of daily life feels a little bit better, but the best part is I have this Office here, I can come in and shut the door and record and not have dogs barking.

Yep. Rid That's just fantastic. Man, one of the low key unexpected things about this new neighborhood being so great is that there's Every single house is, like, children Landon and Brooklyn's age. We're we're, like, gonna go over to some neighbor's house today. They have a 2 and a 4 year old, and their next door neighbor a 2 and a 4 year old, and our next door neighbor has a 2 year old. It's like, man, there's just kids everywhere, which we're definitely not used to compared to where we used to live. So we're ready. We're excited for that. We're excited. The kids have some friends. The dogs are gonna have some friends. Everybody's gonna have some friends, and that's great for us. So we're at that stage in our lives. We gotta have some some kid friends going on here. Rid. Yeah. Kid friends is key. Kids ain't those friends.

We don't have a whole lot of kids in our neighborhood for that type of thing. And sometimes our kids see Kids on the street, and they're like, look. Other girls. Other girls. Yeah. What? What? Yeah. I know. What's neat is that we live kind of, like, Pinned in between 2 dead end streets so that we don't get any traffic. So it's like Oh, nice. We went from, like, a a one way street that was Extremely like, people speed on it and stuff. So it's like, you never felt safe teaching your kids how to ride the bike on the sidewalk even. It's like so now we're gonna be able to be out there. Everybody nobody uses the sidewalks. Everybody walks their dogs in the middle of the street because, nobody cars Drive by. So it's just great. Oh, man. I'm excited to, you know, just not be fearing for our life anytime we're in the front yard or something like that. So Did your dogs Freak out when you brought them to a new place? Yeah. They've been freaking out a little bit. And even, like, Lucy, she's our guard dog, and she, like, really likes To, you know, know where everybody is, she's definitely, like, getting her outpost set up, trying to figure out where to go, where to make sure she can have an eye on everybody.

It's very funny to see her, like, have to rework. Unfortunately, yeah, definitely a little bit of anxious anxiety going on with there. But everybody's everybody's settling in, And we're starting to feel like, you know, my office is still a mess here. Cables are everywhere, but nothing really settled. I recorded 8 YouTube videos the other day. So definitely very productive and settled into this office. Awesome. I'm stoked for you to have such a awesome space. And you painted it already? Rid Painted it painted it black. Yeah. You went with black instead of the level up blue? I guess it's not level up blue, but Yeah. We don't have a level up blue. You know, I could've got purple. My chair is purple. I have a vision, Wes, of this black wall, and Oh. It is not done. Furniture apparently takes forever right now, and we have no money because we just rid a house, but I'm gonna do, like, some neat stuff back behind me, and the the black will be the whole picture will come together. I even made a a diagram of what I wanted to look like in Figma,

Oh. Which is great. Yeah.

Oh, that's awesome. Well, we gotta hit up some of these, spun con companies. What is the one that sent me a chair? Rid. Autonomous. Yeah. Autonomous. Hook it up. I guess you have a nice desk and chair, though. You don't need that. Yep. So more like room and board or some of these fancy home goods Stores, hit me up. Yeah. Like, Restoration Hardware, can you please sponsor us? Yeah. Restoration?

Yeah. Any of those ones.

Alright. Well, excited to hear more about that as you work on that. I'm not sure if we can do a whole show on it or not, but I'm very curious because you got a new monitor as well. And we won't talk about that too much, but I love talking about setups. Yeah. My new setup, I'll have to do a whole thing on a man. Yeah. It's gonna go under a great transition.

Rid Literally, the only thing that the movers broke in the entire moving process was they must have dropped my desk. And, you know, I had underneath my desk, Got the rack mount to rack all my stuff in. Yeah. Just totally demolished it. Just bent it all in. So it's like, I don't have my rack mount anymore. Rid. Put my stuffs on my desk.

Alright. Alright. Let's get into it. We're gonna talk about all the new proposals. These are things that are added to JavaScript, and read. I think all of these already work. At least I'm in Firefox. And because they are approved, they're added to the language. Rid. They have been sort of been cooking for sometimes a couple years already, so they are almost already in all the browsers or you've been polyfilling them Or you can probably fill them as well. So the first one is regex indices. So this is a new flag when you write a regex, which is the d flag. Rid. So you write a regex, and you do forward slash forward slash. And you know how you can use the g flag for find them all global or the I for case insensitive.

Of, and what are the other ones? I always just go to do you know regex one zero one? I always just go to regex one zero one.com, And regex is one of those things in my programming. It just makes my eyes gloss over every time.

So I usually need, GUI Oh, yeah. To help me build. So there's a whole bunch. There's g for global, m for multiline, I for insensitive, ring. Y for sticky, u for Unicode, and s four single line. Those are the JavaScript ones. And now we have d, which generates the indices

For a substring match. So what does that mean? Well, when you match something or or match multiple things in a regex, if you want to know where in that string rid. The things have been matched. This will now tell you where that starts. So if I say West Boss is a boss

and I rejects that for boss And I pass the d flag for indices, then it will tell me where the both instances of boss start and end. And that can be handy if you are replacing things or if you are most likely, my brain immediately went to if you're showing search results And you wanna wrap the Oh, yeah. Or highlight the things that have been searched? The characters? Yeah. The characters. Now you know exactly where you can start and end it. And that seems pretty handy. Yeah. It's great that it gives you the start and end. Yeah. It's just Yeah. More context that you can get from a match. You You know, regex is one of those things that it's never a ton of fun to work in. But, hey, if we get more context, more information, I'm all here for it. I would like to rid To think that I will remember this next time I need to do this, so, hopefully, I will remember that there's the now the d flag, and, hopefully, some of these sites rid There are little things as well to have this new tool in here. Okay. So this next one here is going to be a whole lot of stuff too for classes, which Many of these, we've been using in different sort of ways in the past. For instance, there was the private keyword that I I believe in TypeScript is just the word private or in Babble rid As Hao is always done it, but now you can get private methods and properties using the pound, which means that these values are going to essentially be private to inside of the class exclusively.

And if you wanted to return them, you needed to use, like, a getter and setter and or rid. Other just methods on that property to access those things, but you cannot access them directly

outside of the class. And we see this all the time in, Like React and Apollo, they have these, like, properties that's, like, underscore underscore underscore. Internal and don't use will be deprecated.

Rid. And the problem with that is sometimes people go rooting around and looking for access to the raw data, and they say, no. No. No. No. If you wanna be able rid that you have to use the APIs that are set in place, whether that is a method or a getter or setter or something like that. So rid. This is really handy for internal state and whatnot where you need to be able to store something inside of a class, but not have that publicly accessible unless you wanna then surface it. So you can service private data or private methods, but it just has to be done via a public one, which is without the pound in front of it. You've seen this before. People would prefix their methods and properties with, like, underscores, things like that, or you just use TypeScript

And use the private keyword, but no longer. We can just use the pound, which is a new syntax. Yeah. That's gonna take some getting used to. Like, it just kind of looks different. I'm so used to rid not having it there. So Yeah. That'll be one of those ones that you you just gotta let it, let it become part of your normal vision within JavaScript. Let it marinate.

Next one we have here is also on classes as class fields.

This may seem like, oh, didn't we have that 4 years ago, 5 years ago? And Yeah. That's because when React rid 1st rolled out class based. They went from create class to classes.

There was no way to do, instance properties on it. So everybody just went ahead and used the babel polyfill, but now it's actually in the language, which means that we are allowed to rid. Specify properties on a class just when you define the class. And previously, you had to go into your constructor And say this dot state equals or this dot hobby equals. And and now what you can do is just straight away In the class, right alongside the rest of your methods, you can say hobbies equals or pound hobbies that would be private, rid. And every single instance of that class will be able to have its own property. Yeah. It is. We've been doing this for so long. It feels like rid Four iterations of React to go that we've been doing this. It's it's so funny. It's like, I don't know. We already moved past class components, and here we are. It's funny that when we got classes, there was a lot of like, oh, you can't do that. And, oh, you can't do that because we're we got classes, what, like, 4 or 5 years ago. ES 20 read. E s 6. Yeah. I don't remember. Yeah. E s 2015. That was e s 6. And it's taken

7 years for us to get the rest of the these values that rid People from other languages are probably like, yeah. Every class based language has these things. Yeah. I know. And now we have also static as well for things that aren't changed. Ready. What's up with static methods? So I I guess I don't know what makes a method static versus a normal method. A static method is a method that doesn't

Go down the prototype chain of every instance.

So if you think about Okay. Yeah. Yeah. If you think about, like, array dot rid From. Yep. You use capital a, array.

And if you wanna make an array, it's array dot from. That's a static method on the array. Every array doesn't have access to that because it's like a utility method. Right? You stick it on the thing. Yeah. And if you need it, you can access it on the mama class with the capital on the front. So that makes sense. So, yeah, basically, if you don't want something to be inherited when you do the whole prototype business. Yeah. Okay. Well, that that's neat. Static methods, we got them. Private static, we got all that stuff. So, yeah, I'm just naming off words here at this point. Private static methods. I'm rid Actually curious what a use case for that would be. Tweet us ads and texts. I don't know if you know. I don't use classes all the time, so I'm I'm not super into this type of stuff. I'm not either. What would a private rid Static method b. Yeah. Our Angular folks need to, let us know what's up. Angular folks, rise up. Yeah. I baby. Yeah.

So This episode is sponsored by one of our longtime sponsors here, which is Sanity. It's the perfect place to store all of your data and access it and modify it and have people rid. Happy to use it and update it. Wes, do you wanna talk about Sanity?

Yes. Sanity dot I o is a re Structured content CMS, they call themselves a unified content platform, and I'm really excited. They keep cranking out new stuff. I got an email from the the other day. They said, hey. Do you wanna see what we're working on? And I said, absolutely.

They are always rolling stuff out. You've heard us talk about them. Rid. One kind of cool thing that they just rolled out just a couple days ago is conditional fields. So if you want to rid. Conditionally add some fields based on previous data. You can now do that, and that's really, really handy because You only need to add a cell phone number to a person if their job type is remote. Right? Maybe that would be a a good example. So You have a drop down of the type. You have remote or in office. You click on remote, and then and then you can pop down some fields based on that being conditional. That makes ready. Really, really powerful, and I'm really excited to see that being added to their editor. Check it out. If you need to build a website, rid. Go to sanity.i0forward/ syntax and try it out on your you can use it with React or Svelte or literally anything, you name it. Insanity.ioforward/ syntax is gonna get you double the free usage tier. Thank you, Sanity, for sponsoring.

Thank you. Cool. Okay. Let's keep it moving here with some more. And, honestly, this is probably my favorite one out of all of these, which is top level await.

Rid Top level await allows you to use the await keyword within a file that's not within a function or method already. So, Therefore, we're so used to having these functions. Maybe you need a file to use await on at the top level. Rid. And what you would have done before would have done an async IFFY, which is a self invoking function

that you would put the async keyword on, And then you could use await inside of that, but that's just extra stuff. Right? Extra stuff for no reason. It's a pain in the butt for no reason, really. So now we can use await at the top level of a file without it having to be inside of a function or a method, in aasting function or a method. And let me tell you, it's pretty dang handy if you ever have a you wanna import a thing and just have it execute. Hey, now you have the ability to do so with async and await. Yeah. It's It's just a way, not even async. It's just a way. I do this all time where Me too. Do you have a module where you need to fetch some data for that module to work? For example, I have a module where I need to fetch the most recent prices of, like, converting Canadian to US dollars. And before that, you'd have to have some sort of, like, initialize method Yep. Where when you require it for the 1st time, you have to initialize it and then return an instance from that because And it's such a pain. And now all I have to do is just at the top of my module, I can await that. And the very first time that I import that module, It'll go off and fetch that data from the thing. And the 2nd time you do it, it'll already be cached, so that promise will resolve immediately.

Rid. And then you can just access it inside of all of your method, and there's no weird ifies or blocks or anything weird like that. You just await it at the top level, and I'm So stoked to have this type of thing in your modules. Yeah. It's pretty neat, especially because, you know, if he's they just take up space. You know, it's just another one little extra thing. You got it indented, another layer. Now we just get rid of some of that noise, which is is very good for me. Next 1 we have here is ergonomic brand checked for private fields. This kind of goes back to the private stuff you're talking about in classes. So if you want to check if a private field exists in a class, ready. Value exists. So sometimes when we go through the new features, we just have really exciting ones. And then you also have, like, rid. 3 or 4 sort of supplemental ones, and these are just sort of, like, handy utilities that are used because we have the bigger feature rid That is there. Yeah. But this next one, I'm gonna let you take this one, but this is the one I am most excited about. So this next one is the at re

method that is going to be on all strings and arrays, which is going to allow you to get a value from an array ready or a string, and you might be thinking, wait a second. Can I do that with the flat brackets? But what's neat about this is that allows you to do things like the negative in index, which, if you're coming from other languages, this has been a a giant pain point in JavaScript for so long. Say I wanna get the last item of an index. What do you gotta do? You gotta say, give me the the the ray dot length minus, You know, 1, so I that way, I don't have an off by 1 error. So I'm getting kind of the last item and then or the total length and then minusing it by 1. What a giant pain in the butt Yeah. If you just wanna say give me the last item or the second to last item. Now to get the last item, you can use negative one just like any other gonna be really nice because it's just one of those little quality of life things that you always it's funny. I don't know how many times, but I always think I can do Negative one in the position and just have it work. I I just want it to to work that way. Yeah. We had so many people say I just tweeted this out as, like, a hot tip because It's pretty exciting.

And we had a lot of people say, why not just use negative one in the array? So I have a re Toppings example here. Const toppings equals pepperoni, cheese, mushrooms, and then just toppings square bracket negative one. Right? Just reference the last one. And rid. The reason why that both doesn't work and they can't make that work is because the thing about arrays is they are also, like everything else in JavaScript, rid. Objects. And if you ever hear someone say everything in JavaScript is an object, that means your array can, of course, have index values, but you can also just put random properties on an array. So including one of the properties on your array can be negative one. So rid. There may have been people that used negative one as a property on an array, so you can't use that rid to access index values. So if you wanna be able to access an index value from the end, you can use slice as well. That's what a lot of people have been using as well, but, rid. Mhmm. You can use dot at, and I like the way that this reads. I'm pretty excited about it. Just give me this at this position. This one rid Won't be too hard to remember because at least

the word kind of reads like a sentence for what you're doing. Yeah. Those are usually the ones that work well for me. I'm curious. If you have to reference the 2nd item of an array, would you still do square brackets, or would you use dot at? Yeah. And that's the whole thing Beyond getting the last item for an array or the second to last item or anything like that, what's the use case for where we're at? Yeah. It's just like a new method, but it's mostly, I think, the being able to reference it from the back end, but it kinda reads nice as well. Ready. Well, to be honest, if I want something that works the way that I want it to work, which is being able to access the end of the array with a negative one, Then you would almost say, like, alright. This is just the one to use. Now you use dot at instead of the brackets just to keep it all the same and standardized.

Rid But Yeah. Again, I don't know. The one reads perfectly fine right now, but, yeah, it's interesting idea. One more thing. We had a bunch of people on Twitter being like, what about using this with rid. Index of. Because index of, if it doesn't find the item Returns a negative one. Yeah. It returns a negative one. Rid. But, like, if you have the item the example was if I have a toppings, pepperoni, cheese, and mushrooms. And if you look for the index of ham, it returns negative one, rid Which if you pass that to this at returns mushrooms.

But, like, if you already have the string of the thing you're looking for, then why are you rid. Why do you need to reference it via its index? Right? And, like, I don't know about you, but once we had dot find find index includes,

I haven't used Index. Io in a long, long time. I've I've sort of went away from that. Yeah. I haven't either. I I actually did just need to use it the other day. Rid I was about to say the same thing. Yeah. I agree with you, but I just used it, like, 2 days ago to do I was, like, manipulating some data for some charts, which never that much fun, but I've been using Pancake, which is a Rich Harris library for Svelte, and it's, like, it's kind of an experimental library. Man, ergonomics on there are pretty neat. What is it for? The charts.

SVG charts and the s v it's really neat. I like it. There's, like, no docs on the So you kinda gotta look at the examples that they have to figure out what's going on in it, but, I've just been goofing around, and I really like it. I'm into that. Rid Yeah. Well, if you start messing around too much with this index stuff, you're eventually gonna hit an object that doesn't have some properties in it. Maybe it's rid. Threw up a bug, and maybe that bug's gonna pop up on your video replay service. I'm talking about log [email protected] Forward slash syntax.

That's the place you're gonna wanna be because LogRocket has a really amazing service. What they do is they give you a video rich. Grubbable replay with the console log network tab, all that and more. Even your Redux stuff, you're using Redux. And LogRocket is one of those services, again, That you don't realize that you're missing it until you try it because, again, what it does is it gives you when your users have a bug on the site, it gives you a session replay. You could scrub. You can find that bug. Re You can make it fixed, and then you can see that it's no longer happening. So check it out. Logrocket.comforward/syntax, where you'll get 14 days for free.

Thank you, LogRocket, for sponsoring Syntax. Okay. So next up is the West has editorialized this one and wrote the word ready. Handy in here is the handy has own method. I've seen a lot of chatter about the has own method on Twitter, But I don't necessarily

have a use case for it. West, do do you have a use case for this? Yeah. So if you need to check rid. If an object has a method or a property, what happens in regular JavaScript is if that property doesn't exist On that object, it goes up the prototype chain and checks its parent, checks its parent, checks its parent. Mhmm. Rid. So that could be a problem if you wanna check if that object actually has the property or or the method not anywhere up the property. So we have something in JavaScript. It's Dot has own property, and you can call that on each of the objects.

But what seems to happen is a lot People wanna have, like, a shorthand hand. That's what I call it handy, a little method for that. So this is a static method. Here, we're going back to what static methods are. Rid. Is object dot has own? Mhmm. And you just pass it 2 things. You pass it the object you wanna check and the property, which is a string that you wanna check ready for. So you just say Mhmm. Object dot has own.

You pass it Scott and you pass it the string of hobbies, and that will check that rid. Scott has his own hobbies, and it doesn't go up the prototype chain and find Scott's dad's hobbies or something like that. That's very funny would go up the prototype chain to find my dad's hobby. That's very funny.

Going back to my, JavaScript fundamental teaching here. Rid I love it. I love

it. It's actually really funny. So this is a replacement for something like Lodash has, Which I have used quite a bit before in the past. I used Lodash has, but once we got optional chaining, I pretty much always use Lodash rid Has to prevent that sort of Yeah. Property does not exist on object bug. Right? But once we got optional chaining, I just started throwing question marks into my code left and right, and that's kind of rid Eliminated that as a a need for me. So I personally might not use this still and just might use optional chaining to do this type of thing still. But, again, rid. I would be interested in seeing, like, what's a use case where optional chaining fails here that this succeeds. The optional chaining will still still looks up the prototype chain, rid. Which is sometimes what you want because if it doesn't exist on this object, but the parent has, like, a default, then it will grab that value. So it's Sometimes what you want, but if you need to check if it's just that instance has it, but not up the prototype chain. Again, this is just not something I hit every day. Gotcha. I I see what you're saying now. Interesting.

Yeah. It's funny. Like, JavaScript's getting to a spot now where there's so many new things to it, and you might not use it rid Literally ever. Or sometimes you might use it every single day. It's just different types of code and and libraries and whatnot. Actually, the proposal from this, which is rid From Jamie Builds says, today is very common, especially in library code, to write code like this. And It says the has on property. So this happens a lot more in library code where you are inheriting and then extending

all kinds of things rid to give to the end user. Totally. That makes much more sense. Okay. Next one is here is the class static block, Which is kind of like a static property, but it's a block of code where it allows you to run some code before creating an Optional static property in initialization.

So this is basically again, it's a block of code. This is code that runs. Rid And it's so funny. Whenever I hit things like this, I'm like, why would you use this over the constructor? Right? This is a static block of code rid. That gets run after the constructor.

Right? Is that correct? Yeah. So the way I understand this is that if you want to have a static rid Property or a static method on a class, the way that you do that is you just write static has owned or static Yep. Get hobbies or something like that. And you are basically always declaring that. But if for some reason you needed to conditionally apply those static properties Mhmm. To that class, ready. You would have to do that after the fact, which is kind of annoying because you you declare a class, and then later you have to go back and and add or remove them. So what this will allow us to do is you can do a try catch or an if statement. So you basically a static curly brackets, then you can do a whole bunch of logic in there. And based On that logic, you can apply or not apply new static properties. And it looks like also, if you have, like, multiple static properties, you could

rid Do a bunch at once. Interesting. If this show has made it apparent or not made it apparent, I do not work with classes very often.

Yeah. It's funny. Myself included as well. I don't do a whole lot of class based code. It's funny. Like, lots of libraries are written this type of way, and I know the Angular scene is very popular in this way, so it's nice to see all these features being added. It's rid Starting to bring JavaScript classes up to par with a lot of the other languages that have all the features. Yeah. It says the inspiration

4. This one comes from static constructors in c sharp or static initializers in Java, neither of which things I have used before. You're not a big c sharp guy, Scott? No. No. No. You know, I took, c plus plus in high school. I took c plus plus rid at a community college when I was in high school, and that, like, passed me into engineering 103 or something at U of M, which is ridiculous because There's no way that that class would be worth that same thing for Washtenaw Community College. There is no way.

Rid. I got to like, you got to pick a a number of electives when I was in university, and I took all the computer science electives I could because I I wasn't in computer science. Rid. And one of them was like a c, and I I remember the pain that was trying to allocate memory for a Tic Tac Toe app. And Dude, we did a Tic Tac TOE app 2. Yeah. Yeah. Like, what a awful introduction to programming. It's not that hard. Yeah. JavaScript

need that. I took the class with my friend, and, he's very smart. So what we did is we split up every assignment, cut each assignment in half. So he did every other assignment, and I did every other assignment, and then we both got over a 100% in the class because we just did half the work and just shared the work. That's what we were paying for, that kind of education. That's awesome. What else should you pay for, Scott? Well, you know what? One of the hardest problems a modern programming software, authentication.

So you might wanna be paying for a service that can handle authentication for you along with A whole ton of really awesome features. I'm talking about Auth0.

Wes, do you wanna talk about Auth0? Secure access for everyone, but not just anyone.

I did. If you wanna integrate authentication, logins, permissions, log in with Twitter, Facebook, all that type of stuff, re It is both really hard.

And I also I saw a tweet thread this weekend that also advocated for using a service to do your login versus doing it yourself because of similar to why we use Stripe for credit cards because rid. I don't wanna touch that stuff. The stakes are too high for goofing that stuff up. I don't wanna handle credit cards, and rid. I don't wanna handle people's passwords and private keys and Facebook login codes and permissions and all that stuff. I wanna leave that to the rid. And that's where auth o comes in. They provide the login, the access, and permissions for your application. You can integrate it into literally any that you've done. I've done it with a React application.

I've done it with a server side node back end.

They support pretty much everything you would imagine.

So check it out at I've got a pretty cool URL for you.

A zero dot t o. So a zero dot t o forward slash syntax.

Rid. Thank you, Auth0, for sponsoring. It's pretty funny. This makes sense, but you can sign up for Auth0 with your GitHub account, Which they probably use off 0 to log you in with so that you can have a a little example right there. Oh, that's fun. Ready. Alright. That is e s 2020 in a nutshell. That's all the stuff that's been added to it. I'm looking forward to what rid Pops up in ES 2023.

Lots of class stuff. The at one is pretty cool as well. Top level await.

Very, very excited to have that as part of the spec and to slowly see it show up in all the different

JavaScript libraries that we're using. Rid Yeah. These aren't, like, gold star features, but they're all star worthy. Happy to have them. Totally. You know what? I think the next big one that's going to come that's going to change everybody's Life in terms of programming in JavaScript is gonna be the temporal API, which is currently at stage 3. Yes. Dude, you know what? So I've been polyfilling and working in temporal because it's like I I gotta get used to it. I gotta really understand it. And boy, howdy, is it cool. You have the concept of, like, dates and times that are tied to time zones, and then there's also plain dates and times, which are not tied to anything.

Rid So it's really super easy if you wanna say, like, give me right now today's date. I know it's easy in normal new date, whatever, But then you're connected to a time zone. Right? Yeah. It gets all very, very hairy. Anybody who's worked in daytime for any amount of time. But, like, for instance, We just have, you know, a get todays date temporal instance function that is temporal dot plain date Dot from, and then you pass it in a string of the date, whatever. It gives you the date. Or you can do temporal dot now dot plain date re ISO and and get that, and you can just do dot day, dot month, whatever, and they're not mysterious.

They work as you'd expect them to, read. And it feels very nice compared to, like, the standard JavaScript date functions where you're just like, I don't feel confident rid With these numbers that it's giving me, I do not respect the the data it's giving it because I do know if I can trust it. So it's been very nice. I really like working in it, And, I can't wait until it's doesn't have to be polyfilled anymore. Let's move into some sick picks. Do you have a sick pick for me today? Sick. Rid Sick, sick, sick, sick, sick. I have a sick pick. It's been so long that I've been saving up some sick picks. I'm I'm going to sick pick a smart lock rid that I got for my office, and I liked it so much. I got it for our backdoor as well. This is the Ultra Lock, re Spelled Ultra, l o q, and I got the Ultra Lock. Oh. I think it's called the U Bolt Pro. Let me double check. Yes. This is the U Bolt Pro, and it's not the most attractive smart lock on the market. I'm just gonna say that. It kinda looks a little futuristic y, But it has a fingerprint reader. It also has a number pad, and it flips down to do a key thing. So we used to have the Yale one, which is done by Google, The Nest Lock? Yeah. And that one, if the battery's dead, you're toast. Can't get into the house.

This one, you have flipped down and it has a keyhole, so you can use the keyhole if you want. Rid But it also has the thumbprint one, which, like, let me tell you, there's something really great about entering your home from a thumb pad when you're you know, you your hands are full or whatever. You can just Push it on there, and it it auto locks, so you can have your doors automatically lock after 5 minutes and those types of things. There's even a mode where you can Shake your phone at the lock and have it unlock. It's really pretty neat, and you know what? It was easy to install, and the the app is really nice and Simple. They're not trying to do too much with it, and, overall, I've been very impressed. We needed some deadbolts, and these things have been really, really nice for us. And I like that there's more features rid Then the other smart lock deadbolts that we had had in the past, and you can assign temporary keys and things like that. Well, the temporary keys is rid is key for you got a contractor or a cleaner or something coming over, and you need to be able to give them access to it. Yeah. Here, this key is only gonna last for an hour. You can get in, rid Do your thing, get out, whatever, and then that so I've been very impressed with this lock. It it's funny because it it's its own brand. You don't wanna Trust something, but the lock aspect of all this stuff is sourced from slang or whatever.

Schlog. Schlog.

Rid It's a it's a source from Schlong, and, it's very excellently made because it's flying. Maybe I should save this question for our rid Smart home episode. But did you take all of your smart stuff with you? I always wonder that when you sell a house, it's part of the house. Right?

No. I didn't. I asked on Twitter, and that's basically what they said. If it's, like, locked in, then you gotta rid. Leave it. Yeah. So we left our Ring doorbell Yeah. Which is fine. The Ring doorbell was a battery powered one. So Yeah. The new house, I got to get the one that was wired. And then what else? What else? The wye sprinkler controller that I just bought, I had to leave, but they had a Rachio one here, which is a little bit better anyways. So I've heard that one. That one's a little bit more expensive, but it doesn't require you to pay monthly if you want all the fancy features.

Yep. And so far, it's been good. There's been nothing nothing bad about it. I actually did take the smart bulbs. I took all of the hue bulbs because those are bulbs.

Okay? Yeah. Nobody even knew they were there. Nobody knew it. I'm thinking if we ever sell our house, I'm thinking before we put on the market, I'll go through and take all the light switches out. That's what you do. That's the And, unfortunately, I just flat out didn't think about it. No. I was just like, oh, yeah. Okay. All that stuff's out there, so we gotta leave it. Nice. This one looks good. Rid. A couple years ago, we did all new deadbolts for ours, and we needed, like, 4 or 5. So we ended up just going with the dumb keypad. Had. Yep. And it's great because I I haven't used keys in years. Just beep beep beep beep beep beep beep beep. I think, like, one day, I would like something that's a bit more smart because ours can do rid Codes, but you have to, like, get the manual out and No. Figure out how to do it. I'm like, I just prefer it's an app. So this one looks pretty nifty. Yeah. It's been a good so far. And I post a photo of it, me using it on Instagram. Everybody's like, what's that lock? It's the ultra lock. What the lock? I am going to rid. Sick pick. Something I think I sick pick probably 3 years ago, and this was before I even had 3 kids. It's Magna Tiles or Picasso Tiles. They're great. Rid. And these are just square blocks with magnets in them, and the kids use them to build cars and hours and literally anything that their imagination can come up with. And we bought them when we had our 1st kid, and now we are on our 3rd kid. And I was looking at them this morning, and they are. Ready. They use them all the time, and Yeah. It's amazing how much fun they have with them. And I was like, we've bought them for a couple friends who've had kids. It's a really good gift rid For somebody because it's it helps their mind. It's not just another silly toy. It's kinda like Lego, but you can start using them. Like, my kid just turned 2, rid. And he's he's already building lots of stuff with them. So check them out. Magna Tiles and Picasso Tiles, they're interchangeable.

We have some of both, and they they all ready. Together. So we bought a couple big sets. Big fan of them. They're definitely like, I don't know. They're just such a good creative toy. Yeah. Our kids really love them. Alright. That's it. Shameless plugs? Yeah. We gotta do shamelessly plugs. I'm gonna shamelessly plug the latest course on level up tutorials is all about learning web components.

If you don't know anything about web components, this is the course for you because we build them from scratch without any libraries and without even any build tools. We're just writing JavaScript the browser for the most part, and it's really, really neat to see how all these things work. You get a good foundational knowledge about how to build some real world Web components, we build, like, a tab component that has full keyboard accessibility.

We build, like, counters and stuff like that with different attributes and props To allow them to work differently based on the types of attributes you're you're passing into them and observe and watch those attributes. We talk about CSS scoping and all those awesome things. So check it out rid. At level up tutorials .com, you could sign up to become a pro today. Sign up your entire team, and you can get your whole team under one billing. Rid It's really pretty neat, and we have a new course every single month. Next course after this one is going to be on Prisma rid. From a Prisma expert. More info on that in the next syntax, so check it out. I'm going to shamelessly plug all of my web development courses. You can check the list out. Rid. Westboss.comforward/courses.

I have a bunch of paid ones, a bunch of free ones. I've got one on e s 6 for everyone that has been ready for some of the new stuff in JavaScript. So if you're listening to a lot of the class based stuff that we have today, what are getters and setters and rid. Private methods and all that. Check it out. E s six dot I o, and there's a whole bunch of other ones. Use coupon code syntax. That'll get you $10 off any of the courses that I have. That's it. Thanks 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.

Rid.