Hasty Treat - Handy Utility Functions with Just

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toro Loco, Tolinski.

Welcome to Syntax in this Monday, hasty treat. We're gonna be talking about Handy utility functions via a library called JUST, j u s t. It's funny because when I was thinking about JUST, I was thinking about JEST and and all these other libraries that sound kind of just like this. But this is just j u s t, and we'll have a link in the show description.

Now my name is Scott Talinski. I'm a developer from Denver, Colorado. And with me as always is the Wes Boss.

Hey, everybody.

Hey, Wes. I'm excited about this episode because these are I love utility functions. I love neat little JavaScript things, and I love small code bundles. So that is all up in the alley of this one. So this episode is sponsored by 2 amazing companies. That's Sanity and LogRocket.

Now Sanity is the perfect place to store your data for your website. West, do you wanna talk about Sanity?

I do. Sanity dot I o is The structured content CMS for your application, it's really cool because it's a service. But all of the configuration, all of the The UI for entering in your data, the whole CMS, that's self hosted, and you have full control over all that. So it's kinda best of both worlds. It's like It works really super well like a service, but you can also if you need to, you have control over literally anything. You can put in your own React components Into the CMS. They have image transformation and face detection and all that stuff built in as well. It's not just a CMS. It's a It's a lifestyle, honestly. I think that the It's a whole thing. Yeah. Sanitation just put it on their front on the front of their website. It's a lifestyle.

Yeah. Yep.

Check it out on your next application or website you're building. Check out Sanity atsanity.i0forward/ syntax. That gets you double the free usage to your thank you, Sanity, for sponsoring.

This episode is also sponsored by LogRocket atlogrocket f. .Com. LogRocket is the perfect place to see all of your errors and exceptions happen in front of you. And I'm talking about in a video scrubbable replay that gives you the network Request the air log and so much more. Check it out at logrocket.comforward/syntax.

Sign up, and you'll get 14 days for free. This thing is seriously cool and one of those tools that you really have to give it a look. If you've never used a video

exception tracker like LogRocket before, Then now is the perfect time to see what it's like. It's so very cool. Alright. So before you can get into this, this just Library or just a bunch of functions that we wrote was written by Angus Kroll, who is also the author of a really funny book Called If Hemingway Wrote JavaScript.

And, basically, it's JavaScript.

But if it was written by Spear or Jane Austen or Hemingway or whatever.

It's pretty hilarious. I I've seen a a bunch of them that you can look at them online as well. I remember when this came out a couple years ago, but if you are the type of person who appreciates literature

as well as JavaScript, that might be something interesting to to look into. Which is funny because I thought he has a blog post here that I have linked in this show note called why I wrote to just the zen of dependency free modules, and I was just thinking, like, this is really well written, so he clearly knows knows how to write. Yeah.

So let's Let's talk about this. We we've linked to this library in the the show notes, which is just angus hyphen c forward slash just. And this is a library of 0 dependency NPM not modules that do one thing, a guilt free alternative to those bulky utility libraries.

So this came onto my radar just a couple of days ago, and I I had never heard of this, but it was introduced to me via Anthony Jones from the Svelte core team, and I was working and I was using Lodash, and he had heard the syntax episode where I was saying that I used An imported Lodash dot thing. Oh, I forgot what it was. Which one? Lodash dot merger. Who knows what it was? And he was saying, well, actually, those are are out, Like, they work, but they're out of date. They're not being maintained, and they actually include a very real vulnerability that existed. Now Now I don't know if this is the type of vulnerability that's, like, super dangerous or something I need to worry about personally, but it did make me think, you know what? This is a good alternative, and I should check this alternative out. And then when we looked into it a little bit more deeply, there was just a lot of things that Really spoke to me. So let's let's talk about just itself and what it is and why you might use it. Again, it's a zero dependency Library of utility JavaScript functions, and it they are all fully typed, so you have all of your your TypeScript Stuff in there, and they are tiny. In fact, if you compare them to the same size of different Lodash methods, which they do in a bit of a chart Here, they end up being very, very, very small. And so to me, I think that this is a good, good alternative.

It's funny. Like, let's take a look here. So the just let's find one that I I'm using. I'm using just set, which in Lodash well, in Lodash, it's set. In just Safe set is a 108 bytes where Lodash is 19 30 bytes. Again, we're talking about bytes here, not kilobytes or megabytes or whatever, but some of them are a pretty substantial difference. Just the map values is 54 bytes compared to map values, which is 4,470 bytes. Again, bytes. But still, these are the types of functions you wanna add to your product or project. And like they say, they call them guilt free because you can really add them, And it's gonna be smaller than even just writing these things yourself.

So for me, this is the big, big selling point of this, But it's also the fact that it works with TypeScript and that it's easily modularized, as in you can import one of these things very easily Instead of having to import the whole library, you know, some tools I was mentioning, I was having some issues with that in the SM and Lodash, So this is really the perfect use case for me. So what I thought we would do in this episode is really talk about some of the use case for These types of things, whether that is Lodash or, no, just, is these types of tools that are utility functions. So One that I came across, let's say, it was the other day I was writing my my set code, and you might be thinking, why do I need one of these functions? Can I just do everything with arrays, reduce, whatever? But think about this. We had an object where we had an object, Some children array positions, and we had some dynamic values. So the object path for the the property we are trying to update Had a dynamic child value for the array. It had a dynamic property value coming in from a variable, and we were thinking, Well, how the heck do you update that property? How do you make sure you safely update that property? So that's where set comes into play because you could pass it in just String. You can dynamically craft that string. You can give it your object. You give it the path of that string. You give it its value. It sets the data for you. Perfect. Bingo. Bango. Don't have to worry about it. And so that type of thing would have taken me a little while to to Program out to figure out how to even write what would be probably a less performant, less good version of the same thing. So just simply being able to import

set here and use this like that. Saved me a ton of time and, again, guilt free because of how small these things are. Another one I'm a big fan of here is just the object type of. So if you want to know if something is a object or an array or a function or regex or a date or string, or number, any of those things, you can just reach for this tiny little function that tells you what it is. You might think, like, okay, Wes. But, like, why don't you just use Type of. Well, type of. If you type of an array, it gives you object because Yes. Arrays are objects. Right? So then you think, okay. Last, why don't you just use array dot is array? Well, like, that covers arrays, but, like, what about what about functions? Right? And what about async functions? They have a different type of. So all of that is just packed into, 15 lines of a single function called type up. What about null? Null is in there. Yeah. Yeah. What does type of null give you? Object. Oh, JavaScript is great. There's there's obviously reasons behind that, but it's funny just that it's not what you expect.

Right. So that's good. It's pretty cool if you have, like, a switch statement where you have to work with a a few different types of data. Like, if it's a Boolean or a String or an array.

Those are the 3 things that the user could pass in, and we have to do a switch statement to handle those things a little bit differently.

A lot of times, I do that with just a an array or a string, and this would be really handy in that case. Another great one is the just hyphen And then anything case, they have camel kebab or snake case. I use these all the time and just to change the case or something really easily, but we we often You know, you're trying to change a label from being something that comes in as all lowercase or whatever, and you want it to kebab. It gives you full control over whatever that is, And I've been working myself with a lot of code generator stuff, and this stuff has been endlessly handy in my code generator world here. Another good one is just compare, which a little while ago, we had an episode about tuples and records where These objects would be comparable. Because right now, if you have an object that has the same properties in it and you say, is this thing equal to this thing, you're gonna it's gonna say false, right, because it's not the same object. But With this, you're actually comparing the internals of the object. So if you say, hey. Compare this object to this object. It's going to look at the properties And see if the length so for arrays, if the length and sequence and values and properties are identical.

For objects, if the length, names, values of properties are identical, so not the sequence. But it works with functions, primitives, arrays, and objects. Really, really neat and a nice little equals method for objects and arrays, which is something that I think a lot of new developers think that should just be there. Right? I know a lot of new people would come to objects. Is this the equal to the same as this one? Yeah. And it would say false, and you'd be like, I don't know why. Yeah.

They're they're the same.

Yeah. There's so many little handy ones on here, and you might be saying, okay. Like like, why do you need this? And I sort of look at these and say, this is kind of the NPM install of the equivalent of the Stack Overflow copy paste, Meaning that these are tiny, little functions.

Most of them are 5 to 25 lines long. Some of them are a little Little longer. They're handy as hell. They're battle tested.

So, like, you might write a little function to do something, but you don't necessarily catch all the edge cases. But If we have these that are used by a large population of people, they're gonna be a little bit more battle tested, and you're gonna find all the little weird edge cases that are are in there. Totally.

Which is endlessly good because yeah. I mean, it's endlessly good because they're gonna be more performant. They're gonna be smaller, stronger, whatever than you could possibly be writing yourself, and you don't have to write it yourself. You don't have to think about it. You don't have to have that brain compute power. So, I mean, if people are are obsessed with having everything written by hand, you know, which, you know, I understand the appeal to that. I don't know if this necessarily applies to me. These almost feel like things that should be in the language themselves already, and they're just helping you out. It's like a just a little little bud giving you a high five saying, I got you. No worries. You know what I thought would be a a kind of a fun I say fun in terms of things I like to do

is all of these have test cases. They have TypeScript types, but they also have test cases inside of them. So what would be cool is if you were trying to get better at writing just JavaScript Is you could take all the tests for each of these and just ever maybe 1 a day

and try to you run the tests and they will all fail. So then you go ahead and write the function and try to pass all the tests. Oh, yeah. Try to implement this thing yourself without looking at the actual answer, and if you need help, you can go to the answer because These are great 5 to 50 line pieces of code, and that probably would be would come up in in an interview. Yeah. I mean, that almost seems like a whole service you could run just like here. Run through the, you know, because in in Rust, has this really great I forget what it's called right now, but they had this really great library that you install, and that's really what it is, where it's just a series of code CSF. And the tests already exist, and it it gives you the repo, and it says make make these tests pass. And you just go through 1 by 1. You run the in the file. Once that one runs, you move to the next file. They're all sequential and whatever, and that to me was a great exercise in getting better at Rust Code. I'm I'm blanking on the name of it right now, but it was so good to have something like that because it is very real world, and you get used to writing tests in that way that You do in the real world. I believe that is it, so check it out and just Install it? Just install it. Install it. Yeah. Just give it a try. Just install it. You know what? I know devs from Nike listen to this podcast, and I guarantee they use this library. If they don't, they better get on it. Yep. Just just do it. Okay. A lot of jokes there. But, yeah, I I think this is great. Give us a a ring on on Twitter. We're always out there on Twitter. If if there is any particular just functions that you think Are your favorites? You're saying this is my favorite just function. I want I want the whole world to know. Please let us know what your favorite functions are And why? It does seem like there's a ton of great ones. Just debounce it. Just memoize it. Wow. I could just go on and on. Again, I love me some utility functions, and this looks like to be the best. So as always, this is Syntax, and we will catch you In the Wednesday episode, where we are talking, pot I think it's a potluck episode, isn't it, Wes? Sure is. Excited for that one. Sure is as we're approaching our 400th episode, which we're gonna be doing a 400th episode celebration, but it's not gonna be on the 400th episode, and that's okay.

That's okay with me. It's because of Halloween and the spookiness. We couldn't really air this Yeah. Spooky episode after. So we will have the That's 400 celebrations sometime after 400.

That's cool. May these spooky stories are are are definitely well worth it. Cool. So we will see you on Wednesday for a lovely potluck. And then after that, it's Halloween and spooky stories. Peace. CSF.

Peace. Head on over to syntax.fm for a full archive of all of our shows, and don't forget to Drive in your podcast player or drop a review if you like this show.