Pro VSCode Setups

Welcome to Syntax. Today, we got a show for you on Vercel Node. Scott and I are gonna detail, all the extensions, all of the keyboard shortcuts, all of the hot tips we have, and everything else related to Versus Node in general. We are sharing our entire screen with you for this one. So this might be one you wanna check out on YouTube or on Spotify so you can actually watch the video as well, but we'll do our best to describe it as well for anyone listening in just the audio.

Yeah. Yeah. We'll be talking all about our our just our our setups in general. So nothing, you know, should be excluded by not looking at the video. But if you wanna see what we're talking about, I think it's gonna be a very visual episode in that regard. And if you want to see all of the errors in your application, you'll want to check out Sentry at century.ioforward/syntax.

You can sign up today and get 2 months for free. Sentry is just a really incredible tool for not only tracking your performance, making sure application has no bugs, but even just seeing what goes wrong when something goes wrong because things go wrong all the time when we're coding. And you don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on to reduce entry.ioforward/ syntax. Again, we've been using this tool for a long time, and it totally rules. Alright.

Wes, how's it going, dude? Good. Good. I'm excited to do this episode. It's kind of fun that we get to to show everybody all of the the different parts of our our Versus Node. And I've got lots of tips and tricks, and I love talking about this type of stuff. So

let's get on on into it. Well, even before we get on into it, Wes, do you wanna share with the audience the little bug that we just found in our

recording software moments before that has to be That was a little bit. Maybe Randy can even cut in the laugh. So Scott and I are are using Riverside, and we're trying to to both share our screens. We're recording locally for high resolution, but we're also trying to like, I need to see what Scott's seeing and and vice versa. And we tried it, and it it worked with both of our screens. And then we just we just tried to use it, and we hit share screen, and it's like only 1 person can share at a time. So Scott's like, maybe it's a bug where we can both do it at once. So we both we did 3, 2, 1, and we clicked the button at the same time, and boom.

It worked. Alright. Yeah. Okay.

3, 2 2.

1.

That's amazing.

Wes just got lucky the first time. Oh, that's hilarious. Oh, that's so good. Oh, that's good. Yeah. It's so funny that we just got lucky the 1st time, and it we both must have just clicked it at the exact same time to to share our screen. But, yeah, that's that's super funny that because it works. It just you had to trick the system a little bit. Yeah. That's very funny. It's funny that it works. You know? Yeah. I'm sure it's a a limitation around

some sort of processing or whatever. Luckily, we both have good fat pipes of Internet, so it's probably fine.

Yes.

Speaking of that, let's talk about 1st and foremost, big question off the top here with Versus Node, There's 2 versions of Versus Code that you can use, the insider's build that updates very regularly or the regular build that updates not as regular, like once a month. Right? Yeah. And I wanna know. What do you use? Insiders or regular?

Yeah. So I run I run regular. However, I do keep track of features that are being added to Versus Code, and I'll often want to do a video on them, or I'll want to try them out before they they make it into stable. So I will I also run Insider's version as well, but it's not my day to day coding is is just nice and stable on the regular version. What about you?

Yeah. You know, I was running regular for a while, and there was something that you had posted very recently about how Svelte pages could be you can change the label format in insiders. API. Yeah. In the moment you posted that, I was like, alright.

I'm going back to insiders. I I was I was really annoyed with it just updating all the time. You Node, I like my updates, but it was updating so frequently. I was like, I can't keep up with this. Yeah. You know what? That that post alone made me reinstall Insiders and run it full time. So I'm currently running Insiders full time, but you never know. I I can change back and forth. And in fact, now that we have, like, syncing with built into Versus Code, which is a a great feature you should turn on, the ability to sync to GitHub.

Yeah. I I just I

you can pop back and forth, and it it's super easy compared to what they That's interesting. I never thought about that because I the reason I never was on Insiders is because it's like, oh, I don't wanna set this all up again. But now that I have syncing, it's it's no problem to sync those between the 2 versions and to a a whole bunch of other computers. So maybe I should try it because and let let's explain what that feature was JS if you have a route based application or sorry, folder based routing application, so Next. Js, SvelteKit, Nuxt, any of these things, you often find yourself with a whole bunch of page dotts or Mhmm. In Svelte, it's layout Scott Svelte or page dot Svelte. And your tabs, they will put the folder in the name, but you end up getting really loopy really quickly when everything is named exactly the same. Or if you have a bunch of index files in a Node JS project, this new one will allow you to write a bunch of rules and rewrite them what shows up in the tab, and it's gonna be a a game changer for anyone working on

folder based routing or file based routing. Well, I guess that even, like, really does a a nice job of segueing kinda naturally into the next one that I had here was that conversation led to many other conversations both in even in the the Svelte ambassadors discord, people were talking about your tweet, and then that led to the same discussion about tabs. I've always been someone that had my tabs visible in Versus Node all the time. Never even considered not having tabs visible.

The discussion was why you know, a lot of people were saying I haven't had tabs visible, and it's not a big deal.

And now I thought at first, it was like one of those ideas that somebody puts into your brain. You're like, no. Never. Can't you could not do that. I turned tabs off, and here I am. I'm not using tabs, And it's actually kind of sick.

Tabs is in Scott tabs or spaces, but tabs is in the little top tab at the top to see your open file. And you know what I gotta say? After turning tabs off, I don't really think I I miss it. I don't think I miss it. I I have breadcrumbs up top here that show me what file is open. Yeah. That shows me the full path of the file.

I still do split screen.

I don't really need tabs open. And usually, when I'm hunting for files, I'm always doing command p anyways to open up a file. And and that's almost even if I have the tab already open, I'm almost always doing that anyway. So I just turned off tabs once that discussion happened,

and I've left it off. I haven't I haven't really wanted it back on. Man, I it it really made me second guess myself because I was like, I need tabs. Like, I need if I'm working on, like like, for example, this part of Svelte where I have the transcripts. Right? Like, I might have an API folder. I might have a route handler open. I might have a button on the client side. So sometimes you'll have 3 or 4. If you're working on a feature, 3, 4, 5 different files open at once, and you say, alright. Like, that's my context for Scott of what I'm working in here. And I thought I need them open for that, but a lot of people are like, no. No tabs. I ditched them. So I'm gonna try it as well. I think the the most important thing here is that stop thinking about jumping through your application file by file and start thinking about jumping through your application of, a, where your edits are. So, like, if I'm right here, you can hit control minus, and that will jump to your last edit ESLint, and control shift minus will jump you back and forth. So instead of thinking, oh, I'll go back to that file, just say, oh, I'll go back to where I was just editing the actual file.

If that's in a totally separate file or if it's halfway down the current file, it doesn't matter. You're just jumping to wherever it is that you you're editing. Now if you wanna open something new, instead of thinking, what file is that in, think to yourself, what is that symbol? Right? So, like, if I'm going to look for, let's say, something like locals right here. You do a a pound in your command palette, and this will do a symbol lookup, and then you can do a sort of a fuzzy fetch.

I don't know why this is showing me my node modules in here. That's never the case, but you will be able to like. Here we go. Transcript IDs, transcript utterance IDs. I'm able to just jump to the specific variable function, CSS selector, export, whatever it is. Those are called symbols in in Versus Node, and just rewiring your brain to jumping to those values or doing the whole, like, click through to where like, let's say you use a function in a specific spot.

You could just click through to the actual definition

of And when you say click through, what are you doing to do that? Just for the hold down command.

Is it command? It's so funny that you command. Yeah. I don't even know what they are, but, that's not this is not a good example. Here we go. This is a function right here, generate AI show notes. Right? If I want to know where that is, you either open your command palette and type pound generate AI show notes, and that's going to jump you to the file where that was where that JS, or you just command click it or no. In my case, it's option click.

I have some different keyboard shortcuts, though, and then that will just click through and open up the actual file where that function is defined.

And now I find myself, oh, this is too many things open. Now I gotta manage the tabs that are open. Well, if you don't have tabs or or if they're at least hidden, maybe it doesn't matter.

Yeah. You don't even notice it. You know? And and just to even show how you might use some of these tips together, because I think these are some major tips for working contextually, right, especially in component based flow. Right? We see on my screen, there's a meta tag. I command click onto the meta tag. It takes me right to that component.

And then from there, like you said, you could do control ESLint minus or just control minus to go back, and that control minus takes me right back to where I was. So Yeah. You can command click, control minus. I wonder if there's a shortcut for going into the currently, like, cursor component. I'm sure there is with the keyboard. What is what is command click?

Go to definition is f Wes. So, yeah, you just hit f 12. Okay. I'm gonna change that. F Wes is kinda weird, but I'll I'll change it. I Yeah. I hated the f's for the longest time because it was the MAC buttons. Right? And then, yeah, I was like, you know what? These buttons are worth more to me than being able to turn the volume up and down, which I don't do all that often because I I actually have it right on my mouse to do that type of thing. Oh, that's the other tick thing. That command minus and forwards, so many people said they did the the buttons on their MX Master forward and back. Oh, that's good. Bound those to the spot. So I'm gonna try that as well. But, yeah, f 12 will will bring you to where the actual definition is, and then you can jump back with the command minus to where you last were. Yeah. That's that's actually fantastic because

I I don't use a mouse. So I I have to figure out another way to do that, whether it's like a gesture or my my, maybe that'd be fun to do a little gesture on there from one of my techs. F keys on on your keyboard? No. No. I'm saying to to remap them to a mouse clicker is what I'm saying. Oh, I see. I see. Yeah. Like, what what mouse are you using? Oh, you don't use a mouse? I use the trackpad. Yeah. I love the trackpad. Big trackpad fan.

Yeah. Like, 3 swipes. You could use better touch tool. When you are in Versus Node, you could do 3 swipes, unless you like to use 3 swipes to to do something else. Yeah. Let us know what you you settle on.

Yeah. I'd be interested.

Cool. That those are some really key tips. I I think those are some really pro tips because the one thing that I think that separates new developers from, like, really experienced developers is being able to jump around their editor. And that's one of the reasons why I think people really like things like Neovim or or some of these other ones. They they just get, like, the keyboard finger control to be able to go through their application and jump to words or jump to lines or duplicate or those types of things that are just effortless.

And and that's actually one of the things that I find a little bit annoying around the conversation about, you know, Neovim or Versus Code. It's like, man, you can do a lot of the stuff in in Versus Code without without sweat. You know? It's not like, Neovim is the only platform that can do many of the things it does.

There's even event mode in in Versus Node. So I don't know. Neovim people come at me if I'm saying something stupid, but, you know, I I find that you can you can get around files just as fast.

Yeah. You can do most of the stuff you you need to do this way.

Let's talk about something that I feel is underutilized by a lot of programs when I watch them, especially new programmers, and that is being able to move, select, and expand your your cursor. So let's say we're in this code right here and you wanna select, everything inside of it. I often see people just, like, hold down shift and then just, like, move their cursors around until they explicitly have what they want. But having your cursor be able to jump around as quickly as you can is a huge benefit. So being able to jump word by word is holding option and using your arrow keys is is really good. And, of course, you can throw a shift into the mix of any of these and change it from, just a move to a select.

Selecting by line, I often will do is is command l.

Jump to beginning of line and end of line JS command arrows.

I find that really nice.

If it's wrapped, you just hit it twice, and that will jump to the the actual beginning of the line, not the the wrapped beginning of the line.

So I often find myself doing that. Like, let's say I have this this right here, and I wanna select all 3 of these lines right here.

There's so many different ways, but I'll often just hit the command l l three times. I know there's some keyboard shortcut where you can select all 3 of them at once in Npm. You could probably do that Versus Node as well, but that's nice and fast for me. Or if you wanna select just to the end of the line, you hit your command shift arrow, and that will select everything there. You can select by scope, which is if you go into the selection here, you can find out what the keyboard shortcut for expand selection, or you can just open up your command palette and do the expand selection and see what the all of the expands are. So expand line, expand selection, or expand selection to scope. All 3 of those are really handy for being able to expand your selection. So if you're in here, you you run it once, that gives you that. You run it again, it'll give you that. Run it again. It'll just, like, keep going out further scopes. So whether it's your function with curly brackets or whether it's some HTML with with angle brackets, it will just kind of keep on growing, and I find that to be really handy rather than just taking your mouse and dragging it up to where you want it to go. Especially, like, when I taught in boot camp, we would have people that were not comfortable on their, like, trackpad, so they're just, like, really shaky at it, and then they would not select the f. And then I'm sure me hovering over top of them Oh, sure. Yeah. Didn't help as well. So those things are super key.

Yeah. Just getting it the general keyboard familiarity with your editor cannot be understated as a hack here. And I know that's definitely, like, a thing where if you're used to using your mouse, it feels like it's a little tedious to get used to. But there's almost kind there's so many, like, little keyboard things I use every day. Like, you can hold the option key to move a line up or down. Right? I do that all the time. Maybe I Me too. Maybe I misplay something, or maybe I'm just moving components around. I'm holding the option. I'm hitting the up and down key. Or maybe I have a line that I need to now duplicate.

You shift option up or down, and now you just duplicate that. And you can create several of those. So, like, those kind of shortcuts for me are things That's a nice one. Yeah. I use those all the time, and there's so many little things like that that you really only like, once you get them in your muscle memory, you can manipulate the text to your fullest extent without having to copy and paste all the time.

Yeah. Oh, I always would just hit command shift d to duplicate the pnpm, but I like I like yours of being able to hit the arrow of which direction you want it to go.

Yeah. And it helps because after you duplicate it, you can release the shift key and keep the option key held down and then move the one you just created.

Oh, I like that. Yeah. That's something I I use somewhat frequently. Another one I use quite a bit is putting cursors on every single line. So say, for example, I have all of these components right here and I want to add a prop to every single one of them. What I'll often do is I'll just select all of the lines that I want, and then I'll hit command ESLint l, and that puts a cursor on every single line. And then I don't know if we need to be talking about multiple cursors here in in this thing, but then you can go ahead and actually type your prop value that you want. And often, I'll find myself, like, using multiple copy paste as well for that. So, like like, for example, these theme maker player toaster loading hockey's, maybe I wanted to add, like, a label to each of those that says show the and then I'll put it there. And then maybe I want it to be, like, lowercase.

You know, you can you can have a lot of fun with those types of things and multiple cursors without having to click and add them pnpm every single time.

Oh, yeah. Isn't that like that's like you're holding your key down. You have to click exactly where you want the cursor, and then you click it in the wrong spot. Like Yeah. Oh, you're you're you're toast. You gotta start again. I think you could remove it.

Who knows if you actually can remove it? Yeah. You know? That's one one of those things that doesn't actually work the way you want it to ever. Yeah. It's too frustrating.

Yeah. Let's talk about some more interface stuff beyond you know, obviously, keyboard shortcuts. We could go all day on that, and maybe that's worth an episode of its own. But let's talk about inter inter interface stuff. Sidebars, you can now have multiple sidebars in Versus Code. You can have 1 on the left or the right. What are you doing for your sidebars?

So I switched a couple of months ago to the files on the right because, like, I don't keep my files open very often. I usually close it, especially when I'm, like, recording a tutorial, unless it's important to show the user.

Like, that's the other thing. There's there's coding, and then there's doing tutorials where you need to provide context for which file you're in and and where you are in inside of that file.

So I'll just pop open the sidebar as I need it, and I moved it to the right sidebar purely because I like the idea that it doesn't shift the code over when you need it. It hasn't been like a game changer for me. I wouldn't say I love it, but it's, yeah, it's on the right side. I I like it, but it's not been a a game changer for me. I very rarely use the sidebar unless I'm, like, hunting for something in, in one of these, like like Svelte or Next. Js Wes it's all routes based. I find I still like to see the layout in Versus Code.

Yeah. And I I'm mostly the same way. That's, being able to, like, be able to control your sidebars and know what's open, when, or, like, how to open, let's say, version control, command shift x, or command shift Wes x's extensions. I'm sorry. Not version control. For me, I changed my version control to hyper g for git. You know? That's my mnemonic.

You can change these things, by the way. That's a that's a whole thing. You can change the extensions to to make more sense. I forget what the version control Node actually was because it didn't make sense to me. But command Command e Command shift g.

Yeah. Command shift g. I don't know. I do command shift e for my files. I do keep my files on the left here. I do frequently hide it. Command b hides that. I keep my searching on the right. So searching on the right, files on the the left, and I'm almost always turning those off and on for me and keeping it just as the text file whenever I'm working.

Yeah. I I kept the everything else on the on the left so far, partially because sometimes I do want to have the version control, sometimes the search, although I've got a tip on the search coming up or the debug. I kinda like that. Or the the timeline is is really handy. If you if you don't know this, this is a hot tip on itself.

If you goof something up in between Git commits, Versus Node has your back. So if you accidentally save over something, close the tab, but you didn't get committed because, a, you maybe don't have a a repo or or you're just in between git add, git commit, the timeline will save your button. You'll be able to roll it back, which is is really nice. So I've been keeping that on the left and then my sidebar on the right. Not not super

opinionated about either of them, but it's kinda nice. It just ends up being the way that you end up working. Right? Is the way that you get used to it. I do use the the version control panel now more than I do the command line for me.

I use it almost a 100% of the time just because I have, like, little things like commit and sync. So, you know, I all I have to do to commit something and have it push up to whatever branch I'm working on JS I just type the name of the commit message, then I do command enter, and that commits it and then pushes it up automatically. So it's, like, very, very fast to do that for me. I I don't have to run multiple commands to get something to go into the origin where I I just need it to go. I'm always I you know, git push origin main or git push origin branch name or just git push origin whatever, like, just gets old every time. So Totally. Being able to commit and sync is is really good. Commit and sync is good too because it will pull down changes that you've done if we're working in the same branch, not just Yeah.

Push up.

You can customize that to be commit and push as well if you just want commit and push.

It's also that's also why I like Versus Node over something like a a Neovim.

It's because I I want a little bit of a gooey. You know? Yeah. I I'm like a I like the terminal. I love flying around in there. But even with my terminal, I use warp. I like warp because it gives you a bit of a gooey for I could click on the branch name if I want. Right? Like, I don't want it as just text. Just text is not enough. So Versus Node does have like, there's buttons that you can click if it's something that you you don't use all that often. You can hover over top of it and figure out

what they do. So big fan. And not only just the not being texting, I don't have to configure it to get this functionality. It came out of the box this way. Yeah. And I I got a job, man. My my job can't be my text editor. I'm sorry.

Sticky headers.

Do you have you been using this? So sticky headers is this idea that when you are nested inside of something let me open up, like, a function here. Yeah. So I got this transcript chron handler. As soon as I'm inside of that, it will lock it to the top. And then as like, I'm inside of another scope here if not allowed. Right? It'll lock those to the top and and go, and I've been finding that extremely handy for both really long functions as well as when I'm inside of, like, a really nested, HTML and I want to know what am I actually inside of, you know, I could just go up to click it, especially, like, I was working on, like, a Tailwind site where the the wrapper had, like, a bazillion classes on it. Mhmm. And I could see those as I was editing something a lot lower in the thing, and I was like, this is really nice. And if if you're looking at my screen right now, you probably say that's way too big. I have this I have this way bigger just for recording sake. I don't find it takes up too much space, and I've been really happy with it.

I also use the the sticky here, the sticky headers. And like you said, it's really handy for HTML.

I I find it to be really handy for nested CSS as well. It works there too. Anything that you might lose contact context with because you're several indentation layers deep, Really just a a nice and easy setting.

Just, you know, one click to turn that on. I do wish that you could hover over top of the things and get the types. Like, right here, if I hover over top of my request, it gives me the types. Right? Same with, like, locals. But now doesn't do it if it's sticky.

If I hover over it here, I don't get that. So I would like that because that's that's a common use case. I wanna know what's the type of my arguments.

Yeah. That's interesting. Click it, and it'll go up. But I don't wanna do that.

Well, you can, and that's what they'll tell you.

Activity bar. What is the activity bar? I always get those confused. Which one is the activity bar? Yeah. The activity bar is

these right here. So you'll often see them on the left hand side of people's editors with all the buttons down the side, and I immediately hid that. I was like, that's that's too big. You know? And I'm not giving up that much space for a bunch of buttons, and you should try to memorize the shortcuts for the ones that you use most often. Like Totally. Command ESLint x is for the extensions.

G is for your Git.

The sidebar is I don't even know what the the file finder is. I just use command b because it's on the other side. Right? Or command shift b.

Now I'm goofing them up. Whenever I try to do them in front of people, I'm like, what is the extension? It's just part of my hands. There we go. Yeah. Command option b opens and closes that. But they recently allowed you to put the activity bar up top, which is really nice. That's what these little icons are. There's a little setting. And in the next version of Versus Node, which is gonna be the March release, by the time you're listening, this will be out. They're gonna let you put it at the bottom of the sidebar as Wes. So

big fan of that. I I just don't yeah. I think the thing is is just memorize the the shortcuts you need for the panels that you have open the most, and that's it. I I hid that thing, like, day 1, and I've forgotten about it. Oh, yeah. To me, like, when I see that open, it's usually people who haven't memorized the panels or need to click on it to see what it is. But I think it's worth your time to memorize those because, you know, I do. I close and open those

very frequently while I'm working. Yeah. I don't know if clicking to do that is the the right way. Every now and then, I have, like, a I have, like I wanna go to the GitHub chat. You know? And I don't know what the extension is for that, so I like to just be able to click on or or see pull requests in in here. Right? It's nice to be able to to

to hunt around and see what features are there. I'll tell you what I do for that. I do the command shift p and then just start typing.

That's a thing. If you do command shift p, these are commands for the editor itself or functionality within the editor. I'll even do Git commands in here. I'll delete a file I'm working on. Let's say I started working on a file and I'm abandoning it. You can just delete it straight from here.

Yeah. I I think I use end up using that if it's something, like, fuzzy for me. Like, I'm not quite positive what it is. Yeah. I just like like, try try open up,

pull requests.

Oh, yeah. So GitLens you were talking about GitLens, or you wanna do version control?

GitHub pull request. Maybe you don't even have I don't even know what this. Yeah. I do not have GitHub, whatever the GitHub extension is. Do I have it? Sometimes I don't even know what is GitHub pull request. Oh, yeah. It's an extension called GitHub pull request. And if you like, if you type that in there, like, let me type in pull requests.

There's a bazillion and, like, I don't know which one. I'm not going to read through all of those.

Yeah. To there we go. View. Oh, maybe I should say view.

But I I I guess you're right. You I mean, you could also just memorize that extension or set it to something that you could memorize.

You just gotta type view and then type the the thing you want, and the fuzzy factual fuzzy fat fuzzy finder will find it for you.

Yeah. I think the thing is here is that we all probably have, like, weird quirks in how we use our text editor that are not optimized. It's very funny, like, the the kind of language that people use when either you're not optimized with your text editor in certain ways or, like, it's so funny. CJ CJ did some videos and, like, the comments on it are really funny sometimes. Like, people will say, he used Node. Opinion disregarded.

Like, I guess, like, what he just edited a file really quick. He can't use nano. Like, he doesn't have not everything has to be whatever you use, you know, or how you do it. So, just keep that in mind. It's all personalized. It's your thing. It's like setting your your car seat in the position you want your car seat to be in. It's it's up to you. Let's talk about, like, what we in general show or hide. I've mentioned that I show and hide tabs. I show and hide the activity bar. But I also hide the search bar at the top. And I pretty much I hide the mini map typically.

So you can see mine is pretty bare bones. I do show breadcrumbs because I like that path.

And you'll even notice that mine in particular now granted I'm zoomed in here, so it it doesn't typically look this large if you're wondering that, you know, do I have eyesight problems? I'm typically at about like this as far as zoom level goes. But in general, I hide most things, and then I go a step further using an extension we'll talk about later to hide even more stuff. So I I'm definitely a minimalist type when it comes to hiding things in here despite the fact that there's, like, a 1,000,000,000 things in this bottom bar below.

Yeah.

I what do I hide? I hide the mini map for sure.

I don't hide the this, like, top bar right here, which I'm just looking at it being like, do I use that? I don't think I use this for anything. But every now and then, I do use the these buttons right here where you can switch the profile. So I have a Scott Tips profile that has a different, profiles are really cool. So instead of having specific folder based settings, you can just have profile. So, like, if you're like, alright, well, I like the code at this when I do Python, and it has these settings, these extensions, this color scheme. But when I'm coding JavaScript, I like to do this. You can just switch between profiles with that, and I have, like, a really stripped down version for recording my hot tips because then it it takes all the line numbers and all the whole bunch of all the crap out of there. It's just just the code highlighting.

Are you saying you stripped down for your hot tips? I stripped down for my hot tips. Yep. Yep. Tune in, folks.

Yeah. I think that's that's all I hide. I would like to hide a little bit more. I sometimes get annoyed at the the gutter right here, but I do realize that the gutter is necessary anytime you're doing any debugging

or line breaks and things like that. Yeah. I wouldn't mind making it smaller. I think you can do that with Yeah. Some extensions.

Renaming.

One kind of hot tip I've got for you is use the rename variable. So often if you like let's say I have this allowed variable here. Often, what I'll see people do is they'll just select both of them, and then the rename JS allowed. Right? And and that's okay, but often, you'll find yourself have, like, a comment or, like, another variable, like, const cool allowed.

Or maybe it's being used across multiple files.

Exactly. And if you just, like, find that, you'll see it'll sometimes catch the wrong thing. So it's important to instead of just selecting them and typing them JS you use f two or right click rename symbol.

There we go. Or change all occurrences. That will do it across all the files, and this will just rename it in your specific scope.

And you just hit f two, and you can rename that to is allowed. And then if you hit shift enter, it will show you a preview, and you can check and uncheck what is needed and then go ahead and apply those changes. So that's been huge for me because Versus Node knows about your symbols. Versus Code knows what's a variable and what's a function and and and where they are. It knows the whole graph of your your code base where things are imported and exported.

And if you're doing your find and replaces via simply text find and replace, you're gonna run into issues sooner or later. Yeah. Definitely a

a highly used thing for me. Anytime I'm renaming anything, it's almost always via that way. Unless, of course, it's just like a string that's used somewhere in one place. You know? Just real quick. Yeah. Variable or function. Yeah. Absolutely.

Let's talk about some extensions that we like and use.

We're gonna go through just Node all of them because, you know, there's a ton of extensions that I use that are probably not that interesting. But, Wes, you have text pastry here? I've never heard of that one. Man, this one's the best. So let's say you have some HTML,

and you Scott a, like, you got a bunch of items. Right? This is just Emmet. Right there, I just TypeScript item times 10. Right? And I expand it, and I have 10 items. Now often what I'll find myself needing is I need to add a 1, 2, 3, 4, 5, 6 to all of them. Right? So what I'll do is I'll select them all.

I'll give myself my multiple cursors. I'll go in there. I'll type item, and then I'll open up my text pastry, and I'll find the one to x. They also have 0 to x, and you could do custom, like, 2468 or start at a1000 and jump a 100 each time. But I'll often just use this 1, 1 to x, and hit enter, and it will insert 1, 2, all the way up to 10. And I find that to be super handy. I use that all the time, especially, like, when I am working with, like, content in, like, markdown, I'll often have, like, an h two tag that says, like, chapter, and then I'll go in here and just say chapter 1, chapter 2, chapter 3, and it will just Scott increment itself. So text patiary, it was it was a Sublime Text plug in for a long time, and somebody remade it. And I I probably use it once or twice a day.

Yeah. That is fascinating. I've never seen that. I I should also say one more thing because everyone's gonna comment. I know in Emmett, you can also do this item, and you could give it also give it a class of item dollar sign, and then you can give yourself 10 of those. That will also do the same thing. Right? So that is item dollar will be replaced. You can also do dollar dollar dollar, and that will give you, dollar dollar bills y'all. That'll give you leading zeros.

Emmet is is super handy. However, I often find myself in the case where I'm not writing HTML from scratch.

I'm editing it. And I say everywhere I want a cursor, I wanna insert a a number.

You know, one that we've both talked about using a lot is better comments.

Better comments is something that, you know, I I just I I like comments. I like my visual of anything.

But even, like, I I do use to dos. I know some people think to dos are not great. But I use to do. And this thing recognizes when you write to do colon in all caps that it turns it a different color. Or if you have an exclamation point, it turns it red.

Or just if you're writing maybe params for JS doc, it includes those as being their own color. So for me, I definitely really like better comments. And this is one that I I've turned on a long time ago. It has 6 and a half 1000000 downloads, and I have not turned it off. I do see one called even better comments, but I don't even know what could even be better here. So

I have extended better comments to add my own, which is really nice. So I, you can do question mark. I think question mark is built in. It's built in. Yeah.

What did I add? I added star.

I added method. So when I'm doing my my courses, I'll often say solution, and I want them to be highlighted a little bit differently so it's clear. Or if I have, like, method, yeah, method 1, use a store. Right? And it none then it will style it a little bit differently.

And, also, that's really handy for screenshots if I'm tweeting it. And then I also have this one where it's forward slash forward slash and then a dot. That gives me white text, and I find that to be a little bit more readable when I'm sharing a screenshot with somebody. So I have a little keyboard shortcut where I hit 3 forward slash.

It will give me this dot and then, gives me white comments. So it's so good. And the Node, like, even awesome thing about better comments is if you comment a comment let's say I have a comment that says that, and then I select all of this and comment it Scott, commenting a comment will now show you that you've you've done that twice, and it's very clear to me that, okay, This is a comment that I have commented out. So if you have a whole bunch of code, you're commenting out entire function, that will help you through that.

Yeah. That's that's neat. Auto rename tag is Node that we both use.

Auto rename tag allows you Wes you're you're working in HTML. It's wild. There's a lot of things to scroll before you get to see it here. Okay. When when you're changing a tag name in HTML, it changes the starting and ending tag, which is something that we're working in HTML.

That's, you know, that's just how it is all the time whether it's Svelte or React or whatever. This works in all of that. So, you know, no no issues there. So you can just straight up open let's say here, I have a main tag. If I wanna change this main tag to a div, I just change it to a div, and it changes both the the start and the stop.

Pretty simple. It should always work like that. Yep. It saved me so many times in React world or or literally anything with components where you rename 1. And you can use, like, the f two to rename something, but I just prefer to just type it like I I normally would. So Yeah. That's the the key there.

I use Node called the change case. So if I have some text highlighted here, you can see, like, this is a kebab case right now. You can do change, and you can have it be camel case, or you can change it to snake case. Oh, yeah.

And that just changes it quick and easy. You don't have to do it manually, which is something I feel like a lot of people probably do. You can even just type kebab or whatever. Yeah.

Wes I installed is permute lines, so unique, reverse, and shuffle.

I'll often have, like, a log dump or a bunch of data that I'm working with or like, let's say I took a dump of all of don't clip that.

Let's say I took a dump of every single T shirt that was sold in a specific day, and it's like medium, medium, medium, large, large, medium, medium, medium. I'll often just wanna say, like, okay. Let's just see the unique versions of of each of those. So if there's a bunch of those, I'll just select it all, and I'll type unique and boom.

Or if you want to reverse a whole bunch of lines, you can. Obviously, that's not the all that good for HTML, but I do find myself, maybe even if you have an array of items and you wanna switch it because you don't wanna reverse it in JavaScript, it can be really handy to just select them all and then hit, reverse and boop. It'll reverse them for you. That didn't work because my cursor was on the wrong line.

There we go. Yeah. I look at an extension called file utils, which Yes. You know what's funny that, like, the the file when you're in the the sidebar here and you click on a file, I know there's there's commands too for file details.

But, like, there's so many things that are not here that you'd expect to be here. And Yeah. To the point where I I don't even know what the defaults are, I just remember that, like, oh, JS it, like, duplicate wasn't there or something? So now it just expands the the options that you have with various files. And I don't know if that's what does allows me to delete yeah. It is. So if I look at file utils, delete, I can delete the current file I have open. I use that somewhat frequently. If I'm just hacking on something and maybe perhaps I'm abandoning it, or changing directions, I'll delete it. I use that so much. It's it's wild to me that you can't delete a file without installing this. You have to go into the sidebar and and hunt with it with your mouse. I know you can use your keyboard shortcuts as well, but

it's so nice to be able to delete a file from the command palette.

Oh, delete all left, delete all right. That one's new.

What else? Oh, rename, I find really nice. Move.

So rename will just let you rename the actual file. I often use that just to quickly copy paste the name of the current file. Like, if I'm in an SVG file and I want to copy paste the name of it, I'll just I'll just hit rename, and then I'll just copy paste that. Or move is also really nice, and that will give you the entire path of it, and you can just go ahead and type the files. And if you type a folder that does not exist, it will make that for you, and it will update your imports throughout all of Versus Node. Just like if you move a file in Versus Code, it'll say, hey. You imported this in 6 files. Do you want me to update those imports? And it will do that for you. Yeah. Super handy.

Use this all the time. Another one I use is sort JSON objects, allowing you to sort a JSON object by various ways, like alphabetically or things like that. That's something I like to have because it's like, hey. If I if I have, like, let's say, a schema and it is alphabetical and then I'm then working on it in my my code base, I kinda want that all to be in the same order just JS, like, a, I don't know. Yeah. That an OCD type of thing, I guess, I suppose. And and, you know, being able to sort Scott a JSON object can be really nice sometimes.

That's nice. SQLite viewer, I am a big fan of that as well. You just click on Wes. SQLite. You did a video on it. You click on SQLite database, and Bos just opens it up, gives you a nice little GUI for working with it and seeing what's in there. I use that a lot where I'm just like, did that work? Like, the 1st time you you're saving something to a database, it's like, did that work? Like, the 1st time you you're saving something to a database, did that work? There's lots of database GUIs out there, but being able to do it right from Versus Code is awesome.

And I like this one because it is lightweight. It's not like a full on editor. It's just a viewer. And, again, I'm you could rename this one, did that add to my database? Because that is what I'm using it for. Did my my query succeeded? Okay. Did it actually add to the database? Check it. Alright. It did. Code spell checker is Node that we use to give us actual spell checking. It's super annoying because it finds a lot of I mean, it finds legitimately misspelled words for me all the time, which is great. I have spelling issues. I'm dyslexic. All kinds of things. Right? So for me, yeah, I gotta have this type of thing. In the same regard, it, like, never finds my last Node, so I have to add it to my dictionary or, like, what? We work in code and there's so many fake words in what we're doing that aren't in the dictionary. So I feel like I'm constantly adding fake words to this thing or code words to this thing. And it can get annoying. But hey. You know, the longer you work with, the bigger your dictionaries end up. Then, yeah, you just you just take those from computer to computer. You never you know?

I have, I I gave Randy ours because he edits the show, and he writes the the markdown notes. So I gave him my massive dictionary of all of the words that I've I've done over the years and added to it, and that gives you there's gotta be, like, a whole bunch of maybe even C Pnpm already does this, has dictionaries of, like, common computer words that are not real words.

Maybe that's a a good thing to talk into.

Yeah. Last 1 here is APC, which this JS, to me, a really cool extension for those of you who like to tinker. And it's definitely a tinkerer's delight.

It it basically gives you ability to customize things that you cannot customize typically.

And you can even write CSS to customize things within the electron application of Versus Code because Versus Code is an electron app. So you can you can do things from you'll notice I have all kinds of things hidden and maybe perhaps my file explorer JS much more barren than a lot of people's.

Or you'll notice that I've changed the font here. I've been able to change the label fonts for things. And that's all being done through APC, which is again, it's a really cool extension.

APC customized UI plus plus.

And when you install this thing, it can feel a little overwhelming. And I've mostly gotten some of my config from other people's configs. But you can do things like hide the title bar. You'll see I don't have a title bar. It doesn't say Visual Studio Code up top here.

You can you can tweak endless amounts of things. APC font Sanity. I'll show you mine in just a second here. You can choose the font family based on each individual pane. You can select, all kinds of things. You can load custom CSS.

And let me show you mine here so I can you can get an idea about some of the stuff I'm doing. So one thing I did is I set the APC header to height 36.

For the APC Electron, I have the title bar hidden and have it inset. I've then moved to the traffic bar or the traffic lights up top here so that way they actually go to the top left.

Inside of my style sheet, which is stuff I'm doing with CSS, I'm hiding the title label h two. I'm hiding the title actions, the editor actions.

Yeah. I'm choosing my font family, which is the same font that I have, m d I o.

Just all kinds of little things here and there, and I think that's it. Just to just to give it a little bit more. A little tweak. A little tweak. Yeah. Just give it a little bit more mind. Hide things that you can't normally hide and and all that stuff. So APC, for those of you who like really even more customization, it's, super cool.

Man, I I wrote a whole Versus Node injector because, like, I wanted this as well. I want a custom control over the tabs.

And the way that it works is that there's an electron HTML file somewhere on your computer, and you can inject CSS and JavaScript into that. So I wrote a WebSocket that would do live reload so I don't have to reload it. If if you don't know, you can just go to help toggle developer tools and you get access to all of this code in here, and you can just inspect element and find the selectors on all the the things that you want.

But I didn't it is APC, does it do like, do you have to restart every single time you make a change, or does it do it live? Oh, that's a great question. I don't know. I set mine up a while ago. My biggest qualm with my thing is that I have to run this. Every time Versus Node updates, I have to run this process, and it injects it into the the file, and it's just like, it's not gonna work. And the other CSS files that I there's, like, another custom CSS extension I tried, and it controls all these warnings. You don't? Check it out. I just changed my font to Georgia. Oh, okay. Yeah. And I'm gonna move to this. This looks awesome.

Hot reload. Yeah. Having, like, the font fixed font for your tabs and sidebar instead of a serif font sans serif font, huge.

Just makes it look more cohesive. It is totally cosmetic and pointless, but it just it's nice. It's not pointless. Looks good.

Yeah. Theme, I'm using the Syntax FM theme. It is hardly been downloaded. We don't tell anybody about it. I made it a little while ago, and, you know, I slowly tweak it here and there. In fact, I'm even working on a new version that JS gonna be a little bit less straight black. So you'll see it has really low download numbers. We don't talk about it. So if you wanna use the same theme that I'm using, it's the syntax f m theme. I also have a level up tutorials theme on here too that I I really like to use for a long time. But I am I am making a new theme that I'm calling syntax Sanity, which is a little bit less high contrast. It's a little bit, you know, not like 0 blacks. I know that can irk some people. Yeah. Oh, I like the full black.

If if I'm going dark mode, I want that.

Yeah. I I use cobalt too. This is a theme I made, I don't know, probably 12 years ago, and I've been loving it ever since. I do every now and then think, ah, maybe I should make another one. You know? Maybe something a little bit more purple. Maybe something with a little little darker blue.

So I'm often tempted into doing that things, but I've just so many little tweaks I've put in over the years over, like, HTML attributes, HTML angle brackets. And I often look at people's themes. I'm like, that that theme doesn't have the the fine grain detail. Like, look at this look at this right here. Style is is yellow, colon's white, the CSS variable is mint equals this white, and then the string inside of here is a different green. You know? Like, there's Mhmm. There's a lot to that. And if I were to switch that to another theme, see, like, it's it's washed out. There's blue and there's brown.

And, obviously, there's a lot more themes out there. It seems like Node Owl is the most popular one that a lot of people use, but Yeah. I'm a big fan of Cobalt too.

Yeah. You know what? I'll show you the, let's see. How do I do? Theme, color theme, level up. Yeah. So this is the level up I think this is a really gorgeous theme myself. Yeah. I like that. Yeah. It it's it's a level up tutorials colors. I do have a syntax level up tutorials one that's like a hybrid of both our brand colors, and then I have a light level up tutorials one and then, like, a crazy one that I call syntax cyber that I never finished. But, yeah, I am maybe new. I should just use this one. It's a gorgeous theme. Yeah. I am working on, like I said, the Sanity one, which is gonna be a little bit, like, more yellows, a little bit more, I don't know, less reds and stuff that the syntax one currently is. Font, I'm using MDIO, which is the brand font we use for syntax.

It's a monospace font with ligatures and all that good stuff. So the ligatures in MDIO are a little bit different where, like, you don't have necessarily the same type of ligatures. They they adjust, but they're Scott, like, they're not combining characters in the same way. They're taking up less space. They're doing or they're they're they're they're adjusting without, you know, making, let's say, the arrows indistinguishable from a normal arrow.

Oh, yeah. That's I always hated the the ligatures being added to it because it looks like like the arrow. It looks like you actually put an arrow in your Node, and, like, I I kinda get that. And I I have a bit of a unique use case, I guess, when I'm showing newbies how to Node, and they need to know that. But I've never been a fan of the ligatures. So I've been on operator mono for many, many years. I just finished up my my latest course, so I'm gonna switch it now, I think, because

always good to to try something new, and there's so many cool coding fonts out there in the last 3 or 4 years. Yeah. There's so many. And Node even just, like, not even coding fonts, just monospace fonts in general that you can use and and look good.

I have some last minute tricks here.

These are these are things that one of them is definitely a Chrome extension, but it's it's called wrap console log simple. And I have it set up to be command l. So if you have any anything selected, you can customize this. But if you have anything selected, I do command l, and then all it does is insert a a console log below with a label of what the variable name is, comma, the variable.

I use this a 100 times a day if I'm logging anything out.

Anytime I'm logging anything out, just whatever my cursor's on command pnpm. And and my muscle memory is so baked in to do that. It it really super good. Another Node is split and move is a keyboard shortcut I have set up. Typically, when you split a window, what it does is it duplicates that window and has it open then twice. So let's say in a typical way that I might split, let's say, this file.

If I were to do that, I don't know if it I don't know what the shortcut even is for that. What it would typically do is open that file twice. I don't want why would you ever want that? So I have mine set to be hyper Wes, and what it does and this is the setting that's the setting itself is move editor into next group. That's the setting. And you'll do hyper s, and you can see what it does is it splits it and then moves it into the next group in 1 fell swoop. That way, I have whatever the other files open here. So let's say, again, I'm working on multiple files. I'll just split it. It moves it open. Next thing you know, I have 2 columns open with 2 different files. Way faster to me.

I'm gonna put you on to Node something I just realized, and that is the search editor. So if you're searching for things in your project, the sidebar search is decent. But if you want, like, a little bit more of a comfy UI, you can open up it's called the search editor, new search editor, and you can search for something like transcript, and you get all your your regular search tools here.

You can also do the whole find and replace that you can in the sidebar. Pnpm you just now your search is is in the actual editor, and you could just kinda scroll through it. And if you wanna say, alright, for cell JSON, you know, you just click on it and it will peek, open it up, and then, like, oh, okay. I like that. I want to open it up. So you hit control and click it. I feel like that's that's a better UI than having to go into the tiny little sidebar Yeah. For that type of thing. Like, how often do you, like Yeah. Oh. I I think I like the the look of this better. But, like, can I It's itty bitty? You're right. Can I put the search as its own tab? You know? Give me this UI in this experience, I think.

So Interesting. Yeah. Pretty exciting.

Yeah. One last thing. I did a TikTok on this. I did a video or whatever. Turn off import cost. Import cost is a plug in that so many people have installed.

It JS, like, you know, on a 1000000000 YouTube videos, they're like, here are all the plug ins you need to install, import cost. It has 6 0.3 or 3,600,000 downloads.

Do not install this. Uninstall this. This thing besides, you know, the functionality is iffy whether you even need it or Scott, you should probably be able to check to see, what the size of the, packages you're installing. It shows you the size of your packages next to the import is what it does. This thing is number 1 culprit for slowing down your Versus Code. I I went into, like, profiling my extensions, and I found this thing is wildly, resource intensive.

So if you don't need it, which I gotta say you probably don't, really get rid of it. I I find it's it sped up my editor and increased my battery life like crazy, which is wild because I'm using in, you know, an M1 MacBook Pro or whatever.

Is this thing was still slowing me down. So, yeah, get rid of it. That's wild.

Yeah. That's that's always a frustrating thing to hear. People are like, maybe it's got to slow, and then there's there are tools to figure out if it is an extension. Is that how you found that, or did you just randomly turn it off and and realize it's way faster?

I I ran there's, like, a thing you can see, like, the process time or something within extensions. I forget it is. I googled it at at that moment and found that that was the number Node culprit. So I I found it through seeing what was taking up the most usage.

Oh, yeah. That's that's good because it's. Yeah. Versus Node is pretty fast for me and it's always frustrating to hear that it's slow. Obviously, having a fast computer helps, but, also, it can be those those extensions that just gobble up all your resources.

Yep. Cool.

You know what? I I think we can save the AI stuff. We've had a lot of episodes Yeah. On Copilot and Codium. Those are both great options. We had Node folks on the show. It it was really cool. I use that one all the time. Last thing I do wanna say because I know we're gonna get comments about this is Zed is a new Rust based editor. It's only Mac right now. People might be wondering what our thoughts are on Zed. I know, Wes, you haven't really dove into it. This is Zed. I,

Yeah. I I Have you? I've dove into it quite a bit. Yeah. I've been I've had it installed for, I don't know, probably a year now. And every now and then, I dip into it. Most recently, someone asked me to make my theme for it, but they are not allowing external themes just yet.

They do now, which JS, a new Bos. And in fact, that's one of the reasons why I started using it since very recently.

In fact, what you're looking at is the syntax Sanity theme that I had mentioned that I'm working on. This is syntax tasty inside of Zed, which check it out. I think this is a pretty cool looking theme. And this is a little bit more yellow. There's some there's some colors I wanna change on it still, but this is the the, tasty theme. And it is in zed, and it's it's custom.

And, yeah, that's it right now. But I I think for me, I started using it once it added Svelte support.

Yeah. They're still working on Emmet support, which is coming. So those are, like, the big things for me. And you know what I gotta say? It it it's good. You know? There there's some things that I I miss from my Versus Node setup, and I'll continue to use both of them. I'm much faster and better with Versus Code. But, you know, there's a lot of nice things about Zed too, and maybe we can do an episode in the future diving into Zed setups once we have a little bit more further along. You know, it is Mac only right now. And I Everything good is.

Yeah.

Who cares? It's supposed to be a collaborative But people often wonder why you use that. It's like a very collaborative editor. They have, like, multiplayer baked in, and it's supposed to be fast. I mean, those are the the 2 big things. And,

yeah, it's built in Rust. I foresee this zed becoming popular as people switch to Biome, o x c.

Like Yarn of the reason why a lot of people love this code is that it's integrated with all their tooling.

And once it works, like, you just pray that it it doesn't stop working. You know? So I don't know. As this tooling changes, as it gets easier, I I can I can see this getting a little bit more popular?

Yeah. Yeah. It's it's nice. It's pretty. Works well.

Let's get into sick pics and shameless plugs here. I think that's enough for Versus Node stuff for today.

Let us know. Leave a comment if you're on YouTube. We love comments on the YouTube channel. It's the best way to get a hold of us or to to share with us. If there's extensions that you're using, that you really like that maybe we missed that we haven't thought of, let us know what you're using. We wanna hear about it. So sick picks. I'm gonna sick pick a light bulb, which, if you if you've been in the light bulb game at all, you'll know that, you know, LED bulbs occasionally have weird issues with dimming flicker rates or refresh rates or anything like that. I watched a bunch of light bulb YouTube and found the Philips Ultra Definition flicker free bulbs to be the best. And let me tell you, they're not, like, crazy expensive or anything. They're just they're not smart bulbs. They're just LED bulbs.

These are the only bulbs I'm buying. I have a lot of LED dimmers in my house and stuff, and, you know, they they can get a little obnoxious and there there's no and there's no flicker. They work really well. So these are the only bulbs I'm buying from now on. So the Ultra Definition Phillips bulbs.

Oh, yeah. I went down that route as well when we bought our house. I was looking for a bulb that was both bright and warm Mhmm. And dimmable.

And the options there are very, very slim.

And if you buy cheap bulbs, like you said, it's just pain in the butt. So I we had to replace a bunch of these, like, halogen ones with LEDs, but they're still the old halogen. What is it called? A g u ten socket and, Phillips.

They weren't cheap. I think we spent $100 replacing bulbs in 1 room. Jeez. And I was like, brutal, but feels good. There's my my wife is huge on color temperature of of bulbs.

I like my dimming things. My house to look like a cave at 7 and 8 PM, and, my wife hates that. She she'll well, she'll come in and turn the lights on full blast. I'll be like, you know what? I'm I'm trying to turn my my internal levels down here. I'm trying to, like, really wind down. Let's just, like, make it look like a a dark cave. Oh, we have that in the morning. I my wife, like, sits in the dark with, like, 1 lamp on, and then I just come in. I'm just like,

like, the whole house turns out. I'm like, let let me see.

I don't know how you walk around in the dark like this. The sunshine.

Oh, my sick pick is gonna be this is something that I sick picked a while ago, but a lot of people seem to be picking it up again on Twitter. I'm really excited about it, and it's just shoe boxes Yeah. For cords.

And I know Scott did it, and

I have a hole. I'm not sure if you can see it or not. To be clear, they're not act they're not they're not shoe Bos. Like, you buy your shoes in a cardboard Bos, they are plastic Yes. Boxes. Yeah. Plastic

boxes the size of a shoe. They're called you can get them at Home Depot for, like they're often on sale for, like, a dollar. Super cheap. And I put every single type of cord in its own box, and I have, I don't know, probably 20 of them. Mhmm. And when I need a cord, I just go to the display or audio or, Wes splitters or led lights and, like, so much better. These things I I did all of my cords about 2 years ago, and I'm so happy with it. And then I did our whole medicine cabinet because, like, Node of the kids is sick. You're looking for Advil, and you're like, damn it. Where is it? And where's the puffer? You know? So now we have them all nice and categorized. And then I also did all the kids' Lego because we have tons of Lego, and the kid would just dump it on the ground.

And then you need, like, a shovel to clean it up. And, like, we were like, put it on a blanket, and then we can at least do it. So now we sorted it into just colors, and the kids just open 7 or 8 of these little boxes. Oh, man. And then they they you can see everything because it's clear, and then they just pick out the stuff they want. And it's not, like, a huge mess to clean up after every time they use it. I have a question for you.

Yeah.

How how likely is it that they actually put them in the the right color container when they're Deno, and how good are they at doing that? Because my son just well, Legos everywhere. Like, Legos everywhere, and and getting him to pick it, you would say, alright. Now it's time to pick up your Legos. He goes, oh, but it's so much. And you're like, yeah. I know. But we got them out. You know? Yeah. We're we're only about 2 weeks in, and so Yarn, it's going good. I gave them all $3

to and they took, like, an hour and a half, and they sorted the entire bin. And they thought that was super fun because it they categorized them.

So so far, it's going good. Node of my kids is the type that will always do it, and the other 2 are are probably are gonna wane on it. But if if if, like, every 6 months or so, you gotta gotta redo it, it's fine as long as it's a little

easy easy to get at. Nice. Cool. Well, shameless plugs. Head on over to syntax.fm.

Sign up for the newsletter.

Sign up to our YouTube channel. We are

everywhere. So, that's all I got. Alright. Thanks, Eric, for tuning in. Catch you later.