914: 5 Upcoming + Next Gen JavaScript Features  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 914: 5 Upcoming + Next Gen JavaScript Features - Category: #podcasts - URL: https://share.snipd.com/episode/4668d26d-fc0c-4897-85cc-b6d078944457 ## Document Notes ## Highlights - **Struggle Backwards Learning Style** - Wes Bos coined "struggle backwards" meaning to learn by diving in and solving problems. - This approach resonates with many developers learning JavaScript progressively. Transcript: Wes Bos Add to JavaScript. And they go through the different stages. And as they move along, some of them are stage zero, they're just wacky ideas that'll never happen. And then some of them are stage two to 2.7, I guess, is the stage now, three, four, and then we actually have them in the browser. So there was last week, there's a whole bunch of new proposals that have moved forward and looking like they're going to make it. So we're going to talk a little bit about what they are and where they would help you out and kind of what you can look forward to um as well as like give you a chance to anytime any of these New features come out you always get these guys that are like well that that api sucks or why do we need this now's your chance uh you're a why guy now's your chance to take part of the standards Process and uh and and stop it before it's too late so uh let's get on into it oh i forgot to introduce you scott how you doing scott oh i'm a why guy uh you're doing doing good man i've never Scott Tolinski Heard of why guy before that's hilarious i just made that up yeah oh let me just tell you folks we did a we did a live show in denver and wes was a part of a panel and the guy could not stop coining New terms to the point where people were buying domains in the audience as he was talking he was just like we put we put uh chocolate on a pizza and call it treatsa and everybody's like oh Wes Bos Treatsa come on or fail backwards struggle backwards backwards people are asked like the same question all the time is like should you learn the basics before you get into deep and you Know and i was like ah i don't really believe that like like i learned jQuery and then i learned JavaScript i learned a lot of people are react and then they learn regular JavaScript and A lot of people are now ai programming vibe coding and then they're gonna they're gonna learn how to actually code properly um once they have that and it's it's i i just off the top of my Head i was like this is called struggling backwards meaning like you just get into it and then you realize you hit a problem and then you have to like struggle through it and learn how this Stuff actually works and everyone's like and then like the rest of the panel is like, I really, I really agree that you should struggle backwards, you know? And I was like, guys, I just, I just made that up. That's not like a thing that we have. And then someone bought the domain name. Scott Tolinski Yeah, it's great. There wasn't even another one too. I was, I was just like, I was in the audience and I was just like, God, he's doing it again. And every time you got called on for something, I was just like, that is another term coin. So, Wes, your brain is fascinating ([Time 0:00:14](https://share.snipd.com/snip/6eefcbfa-ddd6-4397-a16d-ee8fbe2da9fb)) - **Sentry's Debugging Power** - Using Sentry helped them catch an error from an API credit shortage. - New Sentry features like root cause analysis streamline debugging recurring issues. Transcript: Scott Tolinski Actually, that's not true. I do. I check it all the time. And my website works absolutely fine because of that century is it's the perfect place to, to make sure that your application is working. And it does so in a wonderful way by really giving you all of the data. There's even a neat AI feature that helps you fix the problems because you know that error logs and dumps can just be like, it can be a steamy dump. I'll tell you that. And Sentry allows you to click a button and it allows you to parse that in a nice way. It allows you to then connect it to potentially logs or see exactly what happened in a session replay. We have an error on the syntax site, Wes, that has happened 12 times a day for who knows how long because there's 20,000 events of this. Or 2,000 events of this. What's there? Your credit balance is too low to access the Anthropic API. Oh, shoot. Wes Bos We got to fix that. I know. Not 20,000. Oh, yeah, actually, no, we have a cr yeah we have a cron the way that that works is every five minutes it checks if there's something that needs to be generated like an ai summary and then It pings the anthropic api so it's it's probably happening every five minutes for it stopped working may 27 Okay. So we probably have like eight shows that are getting pinged every five minutes. And something happened with the Anthropic API. I think we either have to update it or the card ran out or something. The card ran out. Our credit balance is too We also decided that those AI summaries were not very good because we have Randy now. And we're just going to stop putting the ai summaries in there because randy's summaries are better there's also a new feature in here in this error which shout out to century here because Scott Tolinski You know it's a cron job like are you checking your logs to whatever to see if a cron job failed or passed i'm sure you might notice it stopped working or something like that but now we can See that this has happened 2,000 times since May 27th and we can take care of it. There's also a new feature here called Sear, which is in beta. ([Time 0:03:01](https://share.snipd.com/snip/7432972b-36cf-4fe7-ac8a-d0485b2859cf)) - **Import Defer Optimizes Performance** - Import with defer downloads modules but defers execution until use, improving app performance. - This balances immediate import and lazy loading for better CPU efficiency. Transcript: Wes Bos All right. So we're going to go through all the different proposals and kind of where they're at. The first one we have here is import module with a defer on it. This is kind of interesting. So right now with the script tag, if you pop a defer on the script tag, what will happen is the browser will download the JavaScript from that tag, but it will wait until the end to actually Go ahead and execute it. And the proposal for module defer is that you can, like, I guess, like, if you're thinking about performance on a website, maybe we'll step back a bit. There's a couple things you can do to make your app more performant, right? You can not download all of the JavaScript that is needed until you actually need it. And that's like lazy loading, right? And you can dynamically require in JavaScript. But the other part of JavaScript is not just loading or downloading the actual JavaScript. It's actually executing. It's the browser needs to parse out the entire JavaScript so that it understands what the methods are and everything. And if there's any code that needs to be run right away when that thing is required or imported, then that will run. And that execution takes up CPU and it can make your app slower. So we have immediate importing and immediate execution. That's just a regular import. We have lazy loading, which is a dynamic import. And now we are going to get it at a stage 2.7, which is deferring the import, meaning that it will download it right away, but it will not execute it until you call or until you use that code Inside of there so simply just pop a defer on the import statement so it's import defer whatever and then you wait until it will the browser will simply just wait or the javascript runtime Will simply wait until you actually need to use that code before it actually executes it which can it can be expensive like i've had some i've had some code like on a cloudflare worker That took every time you instantiated the object it took quite a quite a long time right it turned out to be a bug but if you have some very big code you might not want that happening immediately On import you might want to wait until you actually need it and if you ever actually end up needing it yeah alongside that as well there's another one for adding the deferred to re-exports Which is when you import and export something in a single line, there's another proposal which will allow you to add the deferred value to those. ([Time 0:05:37](https://share.snipd.com/snip/da4906e0-aff3-48c1-993e-e7626570e162)) - **Robust Random Namespace Added** - JavaScript's new random namespace offers 22 methods for advanced randomness. - It provides utilities like weighted choices, shuffling, and step-based numbers beyond Math.random. Transcript: Scott Tolinski About colors? It's black and white. Next one here is the random namespace and functions. This one is stage zero, championed by Tab Atkins. Man. So the general idea here is that, even read this first paragraph historically JS has offered a very simple API for randomness math.random which we've all used it's a function that returns A random value of uniform distribution from now we know what random is I love that the way these things are written to be so formal. I'm such an informal person. Wes Bos This whole spec authoring thing is a world of its own. I know. Scott Tolinski I asked, I know this is stupid, but I asked Chad GPT to write, Courtney, a thank you for my salad in a formal way. And it was like, dearest wife, thank you so much for this yummy salad. And I did say you needed to use the word yummy in it. And she was like, who wrote this? You didn't write this. Oh, man. Yeah, obviously ChatGPT wrote it. It sounds the most ChatGPT thing ever. Side note, double side note. Do you have people in your life that use ChatGPT in text messages and emails and it's like very bad? Wes Bos My kid's teacher just started writing her emails and like there's double emojis at the end of every sentence and that's like dead giveaway you the m dash everyone is a dead giveaway that You're using unfortunately because i'm a m dash enjoyer i probably don't use it in the right ways but uh the double emoji in like a tweet or at the end of a sentence it's a dead giveaway that You're using chat gpt to write it and it's it's annoying um it's annoying i guess it makes more sense because you can just like do a quick bullet list of what needs to happen and then they You feed it in and it makes this like flowery email but it's just i feel like i can smell it a hundred miles away when, when somebody is using AI to write these things. It's weird. Scott Tolinski It's very weird. Yeah. I don't like getting them. All right. Back to random. Random is a, it's most importantly, a new name space for randomness within JavaScript. Random dot. Wes Bos And there's 22 methods on there. Scott Tolinski 22 things which is hey that's pretty cool so some either one of them is listed as random as the random method so are you going to say random dot random yes well random dot random is going Wes Bos To be the like existing random that we already have. It's not very exciting. Scott Tolinski I'm just wondering if that's the way that... Wes Bos Yeah, random.random. Super random. But the rest of them are for doing a random number between X and Y, a random number with a step. So you could say, give me a random number between 2 and 3 with a step of 0.1. It might give you 2.1, 2.2, 2.3. But there's also methods for random arrays. So you can shuffle an array. You can grab a random item from an array. You can say, give me three items from this array and repeat them if you hit them multiple times or don't. I've written that many times. You have a list of people's names. You want to grab three people. You shouldn't have the same person twice. But then some cases you do want it, right? So it's taking that all into account. Random weighted, where you can weight certain items more than others, which is kind of cool. There's a whole thing for random distribution. It seems like the ultimate random toolkit. And I hate ([Time 0:09:28](https://share.snipd.com/snip/b8a915b2-c94b-4c45-91c3-013126e9822e)) - **Seeded Random for Predictability** - Seeding random enables deterministic results for predictable, repeatable testing. - Games and applications can recreate consistent random states using shared seeds. Transcript: Scott Tolinski Yeah, I love it. Wes Bos One thing that comes along with this proposal is another proposal for a seeding algorithm. And the idea with seeding something that is random is you want them to be predictably random every single time. So if you've ever used like a faker.js or any one of these APIs that creates random names or random cities and whatnot, when you're writing tests for those, you often need those values To be the same every single time because if there are random values every time, your tests would never pass. So by seeding something with random, you'll know that you'll get the same value every single time that you call it. So if I call random dot random, it's always going to with a certain seed, it's always going to give me 0.4 every single time that I call it in that instance. But then I call it again, it's going to give me that same number. So it's predictably random, which in my case, I've only needed that for testing. Have you ever need predictably random in anything else? I guess if you need to be able to reproduce a list. If you need to reproduce a list. Without saving it. So you have a list of names. Could save the seed yeah and then you could derive the random list the same way every single time without having to save the order of yeah yeah it's it's that does make that you save you Scott Tolinski Know what would make sense about that every every year we do you know like football squares and i have to do them like randomly and since i'm the one doing randomly nobody uh trusts that I'm going to a lot of people trust me because i do it every year and i'm always fair about it but like i want to have some verification that i didn't just pull these out of my ass so i just take Like a screenshot of them after i do it but like if you could share links with the seed uh that seed would provide a proof that uh that exists as a thing that we did yes you could share the seed Wes Bos Yeah you so you would randomly generate a seed and then that seed would then be shareable and then anybody else on their own accord could then derive the random values from that in the Way that you're saying so yeah or just load it as a plus there's probably no way for you to generate the seed because they're always long numbers i mean it would be tough to work backwards Scott Tolinski From a seed yeah i'm sure there's ways you could do it but like like i think about like minecraft has seeds. So if you create a world that's really cool and you want somebody else to be able to then be able to create that same world on their own, so it's not like you're joining the world, but it's Like recreating it, they do that via a seed. Oh, yeah. A lot of games use seeds in that way. Wes Bos Interesting. Yeah, I guess you could just come up with seeds until you found one that was your name first and then share that seed. Of course. So the world is not totally solved yet. ([Time 0:15:27](https://share.snipd.com/snip/c6cffdba-1e51-4fda-9b07-9d7e4c6b5420)) - **Array.fromAsync for Async Iterables** - Array.fromAsync converts asynchronous iterables into arrays. - It is useful for operations like asynchronous directory traversal and stream processing. Transcript: Wes Bos Next one we have here is array.fromasync. So you know array.from will take an iterable. And let's take a sec for explaining an iterable. An iterable in JavaScript is a piece of data or data structure that can be iterated over. It can be looped over, right? And obviously, arrays are probably the most simple or the most common one. But there's many other types of data in JavaScript that can be looped over, right? You can loop over objects with a for of, you can loop over strings and get every single character. Maps and sets can be looped over. Node lists are if you query select or something, that's not an array, that's a node list. And then probably the biggest one is like generators. If you have a generator function, you can loop over those. And every single time that you loop you get the next item from the generator so iterables can also be asynchronous meaning that you can await inside of them and when you have any in a synchronous Iterable you sometimes want to simply just convert all of them into an array of their end values. And similar to how sometimes you want to simply wait for like promise.all and wait for all of the items to be resolved. If you want to do them all in synchronously, if you want to asynchronously run them, but you want them to run in series, then you may want to use the array.fromasync. And what that will do is it will take an iterable, which has async values in it, and then it will spit out just a straight up array of all the end values in there. So that will be anyone that's not something I run into all of the time. But certainly in like tree walking, a lot of times in node.js you're doing directory traversal you're searching for something you don't necessarily know how many items there will Be in that iterable because you haven't reached the end of it that is a very handy use case for iterables and generators and this array.from a sync will be nice. And working with streams as well, I think this will be really helpful for as well, Rick. ([Time 0:18:32](https://share.snipd.com/snip/5c03a783-02ce-4330-94a3-6784e959c15d)) - **Upsert Simplifies Map Operations** - Maps will soon support upsert-like get-or-insert to simplify value initialization. - This reduces boilerplate when tracking counts or initializing entries in collections. Transcript: Wes Bos Other end. Neat. Upserts. We've used upserts for many, many years. When have you used an upsert? Scott Tolinski You know what? I use an upsert mostly in database stuff. Yeah, me too. An upsert, what it does is it updates the record if it exists and it inserts it if it doesn't exist. That can save you doing a simple conditional saying, does this thing exist? If it does, then do this. Otherwise do this. So an upsert can turn that into one line, which is typically how I'm using it. Some people don't like upserts, but I, to they don't bite me I don't I don't know I've never had them bite me yeah so much of my coding is simply checking if something exists and if it exists Wes Bos Then I want to update it and if it does not exist I want to then create it with that value so this proposal here is for adding up cert to maps and week maps. And the most common use case will be when you're like counting through items. And the first time that you encounter a key, like let's say you're you're looping over a list of clothing, and you get shirt, shirt, pants, right? The first time you hit shirt, you check, have I started counting shirts yet? No, okay, now create a key called shirt and set it to zero. Then you hit it again, okay, well now it exists, so I'll grab the value out and then I'll increment it by one and then et cetera, et cetera, right? The method name here is called get or insert, which will basically say, get me this value, or if it is not there, then insert it. And the first or the second argument to the method is going to be the default value. And that will be so many times you have to check if it's there. I do all this wacky shorthand to say like if it's there or not. So it's just another nice little one. It will not be added to arrays or no, arrays doesn't make sense. It's not added to objects because you should probably be using a map. Anytime you're doing any sort of dictionary or collection work, maps are kind of underused. And I think one of the big reasons is because ([Time 0:20:54](https://share.snipd.com/snip/8ebb90e9-0ff6-4d46-85ca-f04569ca4e54)) - **Clamp Enters JavaScript** - Math.clamp constrains a number between lower and upper bounds. - Having it natively avoids repeated userland implementations and aids animations and calculations. Transcript: Scott Tolinski Yeah uh the next one here is clamp i love wes has a note says scott you love clamp and css i do love clamp scott's always clamping everything here and there yeah insert the uh i love lamp i Love clamp for sure. Clamp is wonderful. And what is clamp? And honestly, which is very odd, I thought clamp was already in JavaScript. It turns out I've always just been writing an implementation of it every single time. No, clamp is in CSS before. We got clamp in CSS before we got it in javascript yeah you're right it's a function that constrains a value between an upper and a lower bound so basically typically it it takes a number It takes a minimum and it takes a maximum in css these are in a different order but hey you take a number a minimum a maximum. And what that does is say like, all right, this can be useful if you have like an animation that needs to happen from zero to 100. And you're providing it a value of 120 or something like that. And this is going to make sure it doesn't go above that upper bounds. And likewise, you go less than zero, it's going to return zero. So it's going to keep it in between these two bounds. Yeah, this is endlessly useful for animations. For for math, you see it a lot. And they say, see the p5 js demo, you see it a lot in stuff like p5. Again, when you're working with numbers, and you need to constrain them to different times. So yeah, this this exists everywhere. There's a ton of user land implementations, right? There's clamp inside of low dash three JSP five phaser, like anything like that uses clamp. And I've written my own clamp a number of times because it's not not that tough. Wes Bos But the one liner, right? Scott Tolinski Yeah, now we got client proposal in javascript which is at stage two and i think there's no reason why this shouldn't just be uh just rocket shipped into javascript because yeah why do We need all these user land implementations though ([Time 0:23:12](https://share.snipd.com/snip/3ac3f23f-318f-4931-adc9-9afc2c20245a)) - **Embrace Native JS Utilities** - Using native methods like clamp improves code simplicity and consistency. - Implementing random functions in the browser improves performance for heavy computations. Transcript: Wes Bos When we got it even in css a question i often get whenever I post about these things, specifically the random one, are people like, why do we need this? Like, why are we adding all this stuff to the language? And like, why not just import a module? In some cases with the clamp one, people will be like, why not just write a one-liner where it's like math.max? And I hate writing one-liners. You have to have like a utils folder, youpm install like i have a one-liner npm package that's installed like a hundred thousand times a week and just because it's it's annoying to have To do that um but with the like random one if you're shuffling an array of 20 000 items right and i don't want to do that in javascript you know who's very fast at moving around data pointers? The lower level APIs that the browser is written in. So certainly is a performance thing when you get into very large functions and doing lots of complicated math in random land. And then simply things like Clamp where it's a one-liner. It's just so much simpler to have it built right in. And that seems like a standard lib thing that every language should have. It's a low-hanging fruit. It exists everywhere. Just give it to us in JavaScript. What else? CSS is clamp. C Sharp has clamp. C++. Rust. Kotlin. Dart, Ruby, Elm, Python. Does Python ([Time 0:25:18](https://share.snipd.com/snip/4e3ed6c8-3d71-44ab-a351-e270f04f5670)) - **Anker Max Charger Travel Win** - Scott's Anker Max multi-port USB-C charger solved his travel charging issues abroad. - It supports multiple devices with high wattage and shows real-time power draw on a display. Transcript: Scott Tolinski Yeah 140 watt and then 140 watt and then a 40 watt and then a usb a normal usb on there and this thing has this is a charger with a screen. It's the Anker Max USB-C charger, four port, multi-device, fast charging, advanced GAN power, adapted intuitive tech controls for MacBook, iPhone 16 series, Samsung Galaxy, Pixel, And more. It's Anker. It's very nice. It has a little screen on it that shows you how much each device is drawing. It is awesome. So I have this one, which I sick picked years ago. Wes Bos It's the Exynos Pro. And whenever you're unsure if a device is charging or if it's charging fast enough or whatever, being able to see the actual draw on the thing, I have a couple of cables that have it built In. It's so, so key to tell if something is dead or not. Especially if you have an iPad. I've fixed a few iPads in the past. And by watching the wattage spike and go down, you can tell if it's short-circuiting. So that's so good to be able to see the actual pull. Yeah, great you like that you don't even need to carry around a macbook charger anymore if you have one of those and they're smaller and they fits in your you just put it in your bag and you're Scott Tolinski Charging for all your gear including your laptop when you're traveling this is specifically why i bought it because when i was in barcelona i brought a bunch of chargers and half my cables Didn't work. And then I realized, oh, I only brought one international adapter. So therefore, I have one international adapter and I got one thing I can plug into it. I can charge one thing at a time. So I got this to load up my stuff for my Amsterdam trip. And yeah, shout out to Anker, always making the good stuff. Wes Bos That's great. Are you full USB-C in your whole life? Scott Tolinski Yeah. I've been lamenting it. I have one old iPad that the kids use that uses the crappy iPhone. Wes Bos I got this recently ([Time 0:30:53](https://share.snipd.com/snip/f005665b-699a-4cae-b5af-b2f4053f4e02))