The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!

and Wes Bos. Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Today, we've got a fundamentals episode for you. So in the past, we've done episodes on JavaScript fundamentals, server side fundamentals, CSS, HTML and CSS fundamentals.

And then today, we're gonna be covering sort of the rest of the stuff, the leftovers, things like bash and terminal fundamentals, text editor fundamentals, regex, OS basics, Googling, navigating GitHub. These are just things you should know as a developer, your sort of base skills when you're learning and then sort of getting into to web development. With me, as always, is mister Scott Tolinski. How are you doing today, Scott? Oh, you know I'm doing okay.

I rooted my phone Oh, man. Or my I geobroke it, so to say, my, yeah, my Bos device. You and I have had discussions about this, about it maybe potentially not being worth it, being a big hassle, about me soft breaking just about every Android phone I've ever owned. Sure enough, when the jailbreak came out for 13.5, I went for it, and it was very easy. Very easy. It went nice and quick, and now I have a bunch of Android features that I missed. It's very nice. Like, one of the cool little things I did with it is I fixed the face unlock. Because on Android, face unlock works where that if you hold the face up, it automatically does the swipe up thing for you and just takes you right to your home screen. Oh. You use an Bos device, you know, it's pnpm extra swipe. And it always annoyed me so much because the the Pixel phone just did a little bit nicer, and it was so fast and easy. And so that's one of the little little tweaks I added is just take me right to the home screen. I don't need to go do that extra swipe up motion. Why don't you do that? So I've been working on my phone a Scott, adding When did this come out? Oh, very recently. And, dude, it is easy. I'm excited about this. Yeah. I I installed some plug in into Apple Mail. I clicked the button. I clicked another button. I installed an app. And next thing you know, I got access to hundreds of tweaks, and I got a whole new icon set. And it looks like an entirely different device. And you know me, I'm I'm missing my Android. So, like, being able to add some of those features back really has improved the experience for me. It seems a little ridiculous, but I've been loving it. That's great. I'm gonna do that as well. I have an old iPhone here that I run jailbreak on, and it's not my daily driver, but just a couple little things. I've played around with it for a while, and there hadn't been a a jailbreak for

a while as far as I can tell. Is this one of the jailbreaks where if you reboot it, you have to do it again?

No. No. I've rebooted. It's been fine. It's been rock solid, man. I haven't had any issues whatsoever. So and not to say I won't considering I just did this, but, you know, it's so far so good. Fingers crossed, everything's been fine. And, again, it's on the latest OS, so I I didn't lose any cloud functionality or any of my backup stuff or everything's worked fine. I haven't had a single app tell me

it can't work. That's great. Awesome. Well, today, we are sponsored by 2 awesome companies. First Node is Sanity, which is your structured content CMS, and Sentry, which is your error and exception tracking. We'll talk about them partway through this episode.

Let's get on into it. You wanna grab the 1st fundamental there? Yeah. So the 1st fundamental is to simply get better at typing. Believe it or not, we work in an industry where typing is a very important skill, and it's funny that some people never take the time to improve their typing skills. I remember one of the very first things that Courtney and I did, we we first started. You might not Node, my wife and I met each other at work. We, took, like, a programming test against each other for some or not a programmer. She's not a programmer. Our typing test against each other just for fun. And I absolutely thought I was going to crush her because I'm like, I I do programming stuff. I'm on the computer all day. I'm gonna type like crazy. Man, she is good at typing. That is for sure. And so never underestimate just how good your typing skills can be. I would like to know if there's any I mean, if you just Google typing online, there's, like, a ton of different sites that will will teach you typing. I learned from Mario Teaches Typing, which is a fantastic that was in the the late nineties or early nineties, sorry, not late nineties, where Mario did not complete the level unless you typed correctly.

I've pasted in Node called keybr.com, which looks like it's pretty good at least to telling you where to keep your hands, how to get basic skills typing, and

learn these skills. Trust me. They're they're well worth investing in that time. I'm very curious now if I'm a fast typer or not. Should we pause and take a 1 minute typing test to see how many words per minute we are? We should do that. Okay. So go to typing test .com.

Are we doing text or sentences or words? Let's just do 1 minute text. 1 minute text. Okay. Alright. Ready?

Go.

Oh, no.

Oh, man. That was brutal. Oh, yes.

That was hard.

That was hard. Let's see. How many words per minute did you do? I don't know if I did very good. I'm on my Keychron k k one. I'm blaming it on the keyboard. It's a classic my controller came unplugged argument here. My my typing speed was 52 WPM with 3 errors and an adjusted speed of Node WPM. Oh,

so I did 61.

But You killed me. 16 errors. 16. So 45.

Oh, man. Look at me. A little bit more accurate.

I was just flying thinking, like, it was more about the getting the words done, but I didn't realize.

Deno, like, honestly, I feel like I'm faster when I'm typing what I'm thinking, but

kinda interesting. I don't I don't know if that's very good or not. I have no idea. And and sure enough, that test probably says, who knows about your programming skills? Because part of the reason why I'm fast at programming is I can do letter, letter, tap, letter, letter, tap, letter, letter, tap, you know, whatever to get my audio completion going.

And, like, you think, oh, it's funny, but even like, I've taught boot camps and a lot in the past. And one of the big things we see is, like, do people have keyboard skills? Because you just can't keep up. And I think that goes for a lot of kids too who don't necessarily spend time on keyboards anymore because they're spending all their time on iPads. Mhmm. Like, we don't know what the future of programming will look like, but I certainly think it's a a good skill to have. What's funny is that we play this game on the Jackbox with pnpm parents. I've talked about this before. We play it, like, during quarantine here. We've been doing playing this game, and in one of the games, there's, like, a typing game. But since you're all on your mobile devices, you're doing basically a typing test on mobile devices. And one of the things that I've learned is that when you type with the auto correction, at least for me like, I use a swipe keyboard. Yep. I don't know. Yeah. Me too. But I use a different keyboard. Yeah. And it it remembers your words. So I'm almost, like, just tapping the the auto suggestions over and over and over again rather than that that's how I type fast on the iPhone. That's true. Okay. So let's get into the the next one, which is bash and terminal skills because these Yarn skills will really, really, really go a long ways.

Absolutely. And you don't need to be a, like, a terminal master like those hacker movies, but there's a couple, like, sort of basic things you should do is is Wes am I in the terminal? So you know that your computer has a directory structure, and you can move among that directory structure with simple commands. And we're not going to list them all here, but just being able to create folders, move into folders, rename folders, delete folders.

I would say there's probably, like, 10 or 15 different commands. Those are all the ones that you need to know in order to sort of move around whatever terminal you're using, whether that's on on Bos using the built in terminal on Windows. What's really popular now is WSL, which is Windows subsystem Linux. I would go as far to say, like, people who are learning terminal on Windows don't even go and don't even learn bash, which is the terminal on Windows because Windows now gives you a Linux like terminal on Windows, and that will match anyone who's on OSX, that will match anyone who's on Linux, that will match Wes SSH into a server.

You'll be able to to do your very basics there. And likewise, I I have the message here that we you should probably learn how to SSH.

SSH is one of those skills that I found myself using all the time, whether it's SSH ing into my NAS drive or SSH ing into a DigitalOcean Vercel or whatever. SSH ing allows you to basically, jump into the terminal of another computer

somewhere else, another server somewhere else, and utilize your command line skills in an entirely different server. That way, you don't have to always be relying on visual interfaces to get things done. I had to do that the other day. I was trying to adjust something on my router, and there was no UI for it. The solution is you just SSH into it. If the Linux box at the end of the day, you find the setting you want, I tweaked it, rebooted the thing right from the terminal, and you get out. And I was like, man, what a great skill to have is and and if you don't know, like, I Wes, Scott just said, SSH allows you to,

log in to another computer via the command line. Yeah. And I I just you know, here's a little pro tip for those of you who has a have a NAS drive. If you're moving things around like, let's say you're moving files around within your NAS drive, SSH ing into your drive and using the MV to move things is way endlessly faster than using something like finder. Really? It's like it's like 10 times faster. It is endlessly faster.

Wow. That's a hot tip right there. I saw you tweet about that. Did you end up using our sync to move files or what? What I ended up doing was just connecting directly via Ethernet and then

making sure that connection

was specifically the Ethernet established connection, and that ended up being faster than our sync. Oh, awesome. Other things you should know is very basic VIM skills because if you're on a server, you SSH into a server, you need to edit a file. There's sort of, like, 2 ways to do it. You can either go and grab a GUI program like Cyber Duck or Transmit or FileZilla, and that will allow you to visually traverse directory structures. And then you can find your file, right click, open in, And what that does is it actually downloads a local copy and then reuploads that every single time that you make a change. That's great in a lot of use cases. I do that when I need to, like, use my editor, like Vercel Node, but I want to edit the file live on the server.

But often you're in there. You just need to, like, change a dotenv file. Like, you need to config an environmental variable. And if that's the case, you have to use the built in editors, which is usually VI, Vim, or what's the other one? Nano Mhmm. Is on your server. And you don't need to know how to use a whole Scott, just enough to edit a file, move around, paste, save the file, and quit. Yeah. Right. Exactly.

Because there's so many times where that's the fastest method, like, oh, you're in this server or whatever. You have to change this thing. Well, how do I do it? Well, okay. Just pop into VIMV, whatever, change it, get out. Exactly. And it's it it's pretty simple. Just it's just understanding that there are

different modes. There's insert mode and Is that what it's called? VIM has 6 modes, normal, visual, insert, command line, select, and execute or e x. So I only know normal and insert mode and how to get in and out of those 2 different ones. I did years ago, I I used Vim for a few months. I knew a lot more, but I've since forgotten it all. The next one will be knowing

about ZSH and or Phish or using something like OhMyZSH with your ZSH.

Now these are are some tools that you're going to see a lot of people on maybe YouTube or coding videos that you're watching. You're gonna maybe look at their command line and say, hey. Why is their command line look all fancy? Maybe has some interesting colors or emoticons or additional information about GitHub repositories.

And these types of tools, I personally have been using OhMyZSH.

I was using Phish before, but I I've moved back to OhMyZSH with These types of tools can really enhance your experience just by giving you more information.

There's all sorts of amazing plugins to either add auto completion or all kinds of things to your command line to just make you feel a little bit more supercharged.

This is not something that you should wait on doing. It may seem like it's only for advanced users to pimp out their shell, but I always tell my beginners to do it because the command line is very confusing.

It's often the colors are are weird. The fonts are small.

You don't know where you are. And if you can just make it look a little bit nicer and get that nice prompt telling you where you are and and what the status of your Git repo is, then it makes the terminal a lot less scary. And, I have a free course, command line power user.com, which is basically my answer to how do you get that cool terminal and what are you doing to move around so quickly. Yeah. Right. Next up, we have text editors.

There's pnpm endless amount of sort of tricks and things you can do in a text editor, but at the very basics, you should get comfortable with the command palette. So most text editors will have a keyboard shortcut that you can hit, and that will bring down a list of different commands.

And not every command in your editor will be available via right click or via the context menus.

So what you have to do is you have to look for that, and, also, it's it's much faster. So pop down the command palette and sort of search for the thing that you want. And, also, while you're doing that, Scott text editors will also tell you what the keyboard shortcut is for that. So take a moment to, like, look up this keyboard shortcut for that. People always ask me, like, hey, Wes. Like, how do you know Node remember these keyboard shortcuts, or how do you know what they are? And I'm like, it literally says in the command palette beside the thing that you wanna do and just, like, look it up the 7th time. And 8th time you'll remember. Yeah. There's it's true. Right. There's search. Use that search. Find the thing you wanna learn. Pick it and just make sure you stick to it. And don't be afraid to change them either. Sometimes people like Totally. They'll they'll get to a keyboard shortcut, and they'll be like, I'm never gonna remember that 8 keys I have to press to do this thing. Well, if it's a thing you need to do often,

I remap all kinds of keyboard shortcuts whether or Scott, for me, I even hooked up the, like, fast console log plug in to use command l. What is command l? I actually don't even remember what command l was originally, but for me, command l now does a console log with a label on it. Hey. That's nice. If I wanna do removing a line, it's command shift l. Okay. Remove ESLint, command shift l. Again, I don't even remember what these basic ones were, but these are things that I I do all the time. And your brain is gonna work differently than the author of the software's brain or maybe the whatever popular Vim keyboard shortcut packages. Right? But at the end of the day, these are your keyboard shortcuts, and it doesn't really matter if you set them up the way you want them. It's not like you can't take that stuff with you. So I I really configure mine pretty heavily. Another really cool thing is I use this click through to source. We we use so many imported files nowadays in JavaScript. Right? Wes whether it's a React plug in or, you know, a a a file that references another file that imports another file. If you hold down on Mac, if you hold down the command key and you hover your mouse over a given variable or value, it tells you where that variable or value is defined by just simply clicking on it. And if it's in another file, it will even open up that other file and take you right to the definition. I use this all the time. There's also a go to definition command, but I, honestly, for some reason,

my mouse habits die hard for me. So Yeah. The click through to me is is much more used than the go to command or go to selector or go to symbol. They they call it a glitch. I think that is a huge one because, like, one of the hardest things when you're first learning to program is, like, how do I know where to edit this thing, or how do I know where to look what this function does? And, of course, you can search it, but sometimes you search it and you find every instance of where it's used. So by clicking through, it will then just bring up the definition right for you. That's a good one. Yeah. Very true. Multiple cursors, this is a huge time saver, just being able to hold down whatever key it is and click through the multiple cursors, how to assign multiple cursors via the keyboard on Versus Node, it's command l l. Actually, that's funny that you said command l because command l selects the line, I think, unless I had remapped that.

And then command shift l will put a cursor on each line. And Node little hot tip I have with that is if you have things in your clipboard like, if you have 7 things in your clipboard and then you have 7 cursors on your editor and you paste them, it's not gonna paste the 7 things 7 times.

It's going to paste the first thing on the 1st cursor, the 2nd thing on the 2nd cursor, and that

that superpower. People always ask me about that one. Yeah. Multiple cursors. One of my favorite Wes a Textmate. Was that the old one? Yep. That was the first one that had it. Textmate. That was one of my favorite things about moving to Textmate. When I finally did that, I was like, oh, wow. What have I been what have I been doing? There's also being able to do the find and replace effectively in addition to find and replacing across files.

Both of these are are skills, and they might seem very basic on the surface. Right? Find, replace. But there's all sorts of additional things that you can add, whether it's matching the case, whether it's replacing the case or preserving the case, as in if you every time you see the word dolphin and you wanna replace it with parakeet, whether or not that's capital p or lowercase p or whatever, you wanna be able to make sure that you can find all lowercase versions, all uppercase versions, all ones that are either just a single word or part of another word. And being able to use those skills effectively is very important. And not to mention, this will go along with another one, but there's some regex patterns that you can use too that will make you a really good find and replace master. But that's that's kind of getting a little bit maybe into a little bit pro pro skill territory for find and replace. But just being able to really navigate whether a whole word, part of word, those type of things in find and replace will make you a much better navigator throughout your programs. Speaking of regex, you don't need to be a regex master No. Just to know fundamentals, but you should know what they are and how to find the one that you need.

So a large portion of my career was basically just asking people, how do I match this specific thing? How do I match an email address? How do I match a phone number? How do I match the character o r d dash and then any number of characters and numbers between 46 long. So just things like that, being able to know that when you need to match something that is not exactly there in JavaScript, meaning you don't have the tools available to you, then regex is often a good use case for that. Yeah. Right? And I I like this site, regex 1. Were you the one who recommended this before? I recommended the RegExpert.

Okay. And I recommended the regex 101.

In the time between, we said that Node I found this regexone.com, and regexone has a really good interactive tutorial that honestly gives you just enough. Right? It doesn't I don't think its goal is to make you into a regex master. But in my opinion, I went through this little tutorial just for fun to see what it did, and it was pretty great, the basic skills that you want, you know, how to how to select specific text strings and all all the things that will make you a more effective regexer.

I Wes, regex is the Node technology that is very difficult for me to learn every single time. I had a have a Regex book, and I swear I can't tell you what page 12 says because I fall asleep at page number 11 every single time I try to read it. I just Sanity, keep my attention when learning regex, so any interactive tutorials make it much nicer.

So if you're learning regex, this is a sponsored transition, by the way, if you're learning regex, you're probably gonna write some code that breaks while you're learning it. And you're gonna wanna make sure you keep track of all of those errors and exceptions. And to do that, you're probably going to be using one of our sponsors, and that is Sentry at century.io.

Now Sentry is the error and exception handling tool that is really it it's our tool that we use over here at Syntax. I I personally have been using Sentry myself for a long time. Highly recommend it. It's definitely a service that keeps my business up and running because it allows you to do some really great things besides just keeping track of all of your bugs. You can set up alerts. You can attach those bugs to specific releases to track regressions easily.

I have my API and my front end on 2 separate deploys here, so I can keep them separate. And if an issue pops up with either of them, for instance, I'm looking at 1 right Node, here's this issue that has popped up a couple of times here. And I can see very clearly that it's attached to my source map. And I can see that this is an error specifically on one of my mutations files, and it is looks like it's a bug that we introduced somewhat recently here. So what I can do is I can click this link GitHub issue.

I can have it create an issue for us in GitHub directly, and then I can go attach it to myself to let everybody know that, hey. I'm gonna be, fixing this problem now that I have a little bit more idea of what's going on here. So this is some of the the key ways that I use century.

Io in my own personal business here. Node gonna head to century. Io. Use the coupon code tastytree, all lowercase, all one word, and you are going to get 2 months for free. Century.

Iotastytreat.

Okay.

Let's keep it rolling here. We have so many of these things. Next step is going to be the operating system basics because, hey, we spend a lot of our time in these operating systems, and it's funny just how many people aren't comfortable doing a lot of intermediate things within their operating system, things that maybe, you know, general users will never need to do. So what are what are some of these key skills that you think you need to have within your operating system, Wes? I think switching windows, switching through multiple instances of a window. If you have 1 app, you wanna switch to your browser. If you have multiple tabs open, if you have multiple versions of that window, just being able to quickly cycle and switch through those via the keyboard. The amount of times I see people

who drag the window out of the way to find the window that is underneath and then drag it back over. It drives me crazy seeing that because it's it's so inefficient, and you think like, oh, it's not a big deal. But, like, if you spend 5 seconds moving a window, you do that every every couple of minutes, that adds up really, really quickly. So just knowing what the keyboard shortcuts are to switch between apps, to switch between multiple windows of a single app, so if you've got 2 windows of Chrome open and then also if you've got 5 or 6 different tabs open, how do you switch to the 3rd tab without having to click it or cycle through them? If you use macOS,

you're missing a key feature that I think makes it really easy to navigate through some of your windows that both Linux and Windows have, which is the ability to quickly and easily snap windows to, various positions, whether that's full screen or top or left or right. You Node, I have a lot there's, like, a ton of the utilities to do this. I use one called Spectacle, I believe, and I have some keyboard shortcuts Scott up. If I'm in a window and I wanted to snap to the half of the screen on the left, I just hold option and hit the left arrow. And, likewise, if I wanted to snap to the other side, I hit option and go to the right. If I want it to be in a perfect 16 by 9 ratio for recording, I hit option r for recording. You know, it's like little things like this that can make your life so much easier. Your hands never leave the keyboard. Your windows just snap exactly where you want them to be. It looks like there's a couple of new tools out here for this. I haven't used either of these, but one is called Tiles, one is called Magnet. They look like they're pretty neat, and they're all trying to emulate sort of the behavior that exists in Windows. This needed to get baked into macOS, like, 5 years ago.

Totally. I I'm I'm so surprised that it doesn't exist yet. I use a combination of carabiner, which remaps my caps lock key to be a hyperkey, which is I should just do that. Yeah. The hyperkey presses shift, control, option, and command at once because, like, you have 4 modifier keys, shift, control, option, command. And then you can make modifiers based on any combos of those, but there's unlikely any keyboard shortcuts that are pressing all 4 of those plus r or something. Mhmm. So, hyperkey will remap caps lock to that, and then you can Node, like, things like hyper r or so I have hyper. All the arrows will snap my windows up and down, and carabiner remaps it. And then I use better touch tool to snap them and move them from monitor to monitor. Oh, that's what you used JS better, better touch tool.

Maybe 4 or 5 years ago, I tried them all, and this was, like, the best one at the time. And I still like it, and it's it's just I don't wanna, like, switch it. It it works just fine for me. I'm sure there's other good ones out there. Yeah. But that's just kinda what I settled on then, and it's working. So don't mess with it. I think the reason why I liked mine so much is because I can get the snap to 16 by 9 really quickly. Yeah. If any of them else have that, then, yeah, I'm not exactly super thrilled with mine. I'm not sure if BetterTouchTool has that. I think we should get the guy who made BetterTouchTool on the podcast because he's just, like, they're just always it's he just built this Mac app and has millions of features.

And, like, I'm always curious. Like, first of all, how do you keep building this thing and not get burned out? And second of all, how do you like, it works with the Magic Mouse and the Touch Bar and the trackpad, keyboard shortcuts and Siri remote and gestures. Like, there's so many features in here. And, like, whenever a new OS comes out, like, how do you test it all? Oh, gosh. There's just so much to it and I'm so many questions I have. That gives me major anxiety. Totally. Totally. Like, this thing is it's so low level too. And, also, like, if there's an issue with, like, the trackpad driver, like, you know, you can't just tweet out, is anyone having trouble with the trackpad pad driver? Because, like, you're one of the very few people in the world that makes it happen like this.

So it's kinda interesting.

Those are well worth your time to to learn. Definitely.

Unzipping files.

It's one thing we see a lot on Windows is that when you I don't know if this is still true or not, but if you have, like, a folder and you unzip it, it, like, makes a double folder. Like, if you have, like, a a zip file called Wes, and then inside that you have a folder called wes, Then it gives you 2 folders, and that was a huge source of confusion when I was teaching because you'd have double folder levels, and then the files wouldn't be where people would expect them. File organization, we've talked about this on the podcast before, so I won't talk about that. But just being, like, having good file hygiene, I talk about a lot being able to know where the files are on your computer, where you should put them, a place for everything and everything in its place.

Totally. You know what? I I think Wes should add on here is using, like, the, like, Alfred type tools. I know there's one that exists for Linux. I don't know what exists like this for Windows, but Alfred JS tool for me for at least macOS to be able to quickly open Yeah. Applications and set up workflows and do all sorts of things. It's a definitely key component of my workflow, especially because it it does so many things like allowing you to just take your hands off of the mouse and use the keyboard specifically.

Searching for files. One thing that I hate on OS X is the finder. If you wanna search for a file It's rough.

It never works. Like, I remember being able to search for, like, star Scott TXT on Windows, and that little dog would wag his tail and look for it.

And that was, like, probably, like, 15 years ago, and it still is not as good on OS X. And there are a couple tricks you can do in the search where you can add multiple modifiers and search by type or search in files, but it's not apparent

how that works. So spending some time figuring that out is well worth it. Yeah. I have, like, some saved filter searches. Like, I have one that just gives me all of the most all of the ScreenFlow files on my computer and then sorts them by newest to oldest. So that way, if I'm ever looking for a ScreenFlow file specifically, I don't have to go pawing through everything. Oh, that's a great idea. Yeah. It's it's been nice. Let's switch to the next one, which is googling.

How to Google Wes? It seems like a funny thing to do, but often, my wife will ask me, like, can you just Google this? Because I can't find what I'm looking for. And then I'll start googling, and she always laughs. She's like, you're so good at googling.

There are some some things you can do to become a better Googler. Like, what are some of your tricks?

It's a skill that is a practiced skill in my mind, but just knowing simply what is an ineffective search. Like, if I wanted to search for something on Gatsby. Right? You wanted to say, like, Gatsby, this is happening or whatever, like error with Gatsby. What I would do is I would start with the error, Copy and paste the error. Remove any sort of, like, your own file system stuff. Just paste the basics of the error and see what comes up. Then if nothing comes up, start and say maybe, like, the behavior. But another thing people tend to tend to do is maybe not realize just how many terms there are with the same word. Like, oh, Gatsby. Okay. There's the great Gatsby. There's Gatsby this or Gatsby that. That's totally unrelated to our industry.

Gatsby, JavaScript, this. Like, Gatsby, React, blank. You Node, just adding some of those additional qualifiers in can help. If I'm searching for something and I'm getting a lot of bad results and results that I I don't wanna see, I think what was the Node? I I was asking a question the other day on my end. It was about Apex domains.

And I wanted to know something specifically about Apex domains in c names, and every single result that came up on the 1st page Wes talking about load balancing. I don't I'm not worrying about load balancing right now. I'm I wanna know about DNS.

So I I used one of the Google operators, which is the minus, and I did the minus load balance, and it removed all of those load balancing things. I can add DNS in there, and it just reduces the clutter. So, man, it's a lot of practice in terms of, like, knowing what's effective and knowing what's not effective, seeing what's effective, and then getting some of those skills, like the operators and and skills of of actual technical things that exist in Google. I feel like you're the type who has, like, explicit Google tips. I like to use date searching a lot. So if you search for something on Google, you don't have to know any keywords or anything, but there's a tools drop down. You click on tools, and that will allow you to filter

for a specific date range. So more often than not, like, let let's say I'm looking for an issue with Apollo, and Apollo 3 just came out and I'm googling for the issue. Well, there's, like, 4 or 5 years worth of Apollo before then that I need to then filter out because that is not the library that I'm working with. So, you know, okay, well, Apollo just came out, let's say, 2 months ago. It's not even out at time recording, but let's just say it came out 2 months ago. Then I can filter my listings for things that were posted in the last 2 months. I remember I found a blog post about something x, y, and z, and it was about a year ago. So then you wanna search in 2019. You can limit it to 2019. That's not gonna show any new stuff that would have come up, and I find that to be super helpful to gauge when stuff was posted. Oh, yeah. Can you imagine getting, like, a bug with your React hook, and then you Google something about React and all of the areas that pop up on Google are from, you know, like, 2017?

And you're just like, oh, well, that's not that's not gonna be accurate.

Another one I like to use if I'm looking for opinions is I'll just add the word Reddit onto there. Now you gotta be careful with Reddit because definitely people, they definitely have the good opinions occasionally, but what you want is you want a wide variety of opinions. You want a lot of people with personal experience, and that's often a good place to see people talking about their personal experience and opinions with thing. But that said, there is this sort of, like, hive mentality over there. And if you're not paying attention, you can definitely get bad information just as much as you're getting good information there.

Absolutely. Reddit is the best. Take it with a grain of salt because you could be getting bad information. But in my experience, especially once you get into the much more niche subreddits, you'll find a lot more really helpful information. I find some of the bigger ones, web dev and whatnot, a lot of good people in there, but there's a lot of bad opinions and Sanity people in there as well. So Mhmm.

Take that with a grain of salt. Yeah. Right. Exactly.

Next section is gonna be talking about GitHub. We, as developers, spend a lot of time around GitHub, specifically because that's where so much code lives and hosts issues and all those things. So some of your skills are going to be simply just learning how to GitHub itself.

GitHub is a really fantastic skill in a really fantastic place, but it is very intimidating for those of you who may not have a lot of Git skills. I remember when GitHub was first blowing up, and I didn't necessarily understand Git. It was confusing to me having used the the terminal in that sort of way or just even the process of it, you know, the downloading of things. You click download, and it gives you, open in desktop or download ZIP or here's an HTTPS string. Like, oh, I remember feeling very overwhelmed and and and just not super confident when navigating GitHub. So it's important to to understand and spend the time and figure out where things are. The explore tab is there for finding interesting projects. The marketplace is there for finding things like GitHub Actions, which are really great. I've been I've been working a lot with GitHub Actions. For newer developers, you just wanna spend time navigating around repos and seeing how issues work, realizing what it takes to make a a successful issue. Right? Just letting someone know that their stuff doesn't work isn't exactly very helpful. That's like a whole skill in its own JS writing a good issue then one of which that I'm trying to get better at, understanding what pull requests are, how how the whole thing works. Find yourself a good GitHub tutorial that explains everything, where things are at, and how to click through it. I also have a number of GitHub extensions that I'll recommend for those of you using Chrome. Many of these have analogous versions to Firefox as well. I like to use OctoLinker, which gives you that click through to source thing that we are talking about within Versus Node. Gives you that through to source on GitHub. So let's say you're browsing a file on GitHub and you wanna see the file that it's referencing, you can just click on it as a link, and it takes you right to it without you having to go back in the file directory and then forward to that file or in case it's in a whole another file directory. Another one that I really love is Octotree, which gives you a sidebar of a folder structure Scott of like what you have within your text editor Wes you can click and open folders. And then that way, you can click and go directly to a specific file, or you can even filter and search. Oh. I would yeah. That's cool. Wes, if you're not using OctoTreat, man, you gotta get on it. It's fantastic.

That's pretty cool. I find, especially with my my beginner JavaScript and my JavaScript course, people aren't totally comfortable with the concepts of a repo, a fork of that repo, and then a branch on either of the the repo or the fork. And I get a lot of oops. I accidentally pull requested you all of my work by accident because people are trying to push their own work to their own branch or something like that.

Find a Deno, make with a friend or something like that, and and practice forking each other's repos and pull requesting

just so you can get get comfortable. Like, I'm not mad at that. It's just that, like, it can be a little bit confusing. It's still like, I don't wanna accidentally overwrite something, or I don't wanna accidentally do the wrong thing. Yeah. Right. Exactly. Sometimes you push up a Wes store file, and you're just like, oh, how do I delete how do I delete file from GitHub? And that's always fun. I think one of the most important things about not only ESLint, like, navigating through GitHub JS navigating through file structures in general and viewing source. And so this is like a whole another skill because it it might not necessarily be GitHub. It might just be some source. Maybe you've downloaded it from somewhere. Maybe it's on GitHub, and you're just pulling through the folder structures. Maybe it's on GitLab or somewhere else entirely. And so reading source is a skill all into itself.

You want to first figure out how to find where a project starts. Like, what's the entry point? And, usually, you can find that if it's a JavaScript based package or or JavaScript based project, you can use the package Scott JSON.

And the package dot JSON usually gives you an entry in saying Wes this thing what, what loads what. Wes, oftentimes, maybe that start file is just loading another file or loading something else, and that can seem sort of pointless. But it really gives you a handle on the layout and structure of this project in a way that just simply, looking at the files can't give you. So just spend a lot of time reading source because reading source is a skill onto its own, just being able to to look at somebody else's code, read the comments, and and pick apart things as to how they go. The last 1 we're gonna be talking about here is knowing when to pick the right dev tool for the job. The dev tools pain is overwhelming to new people. So, do you wanna talk a little bit about that, Wes? Yeah. Just being able to

know where to edit something at at a very basic Node, is this CSS Bos, or is this in the elements tab? Those 2 are very helpful, being able to toggle styles on and off to see if that's your issue, knowing does this happen when something is clicked, then maybe you need to to head on in over to the event listeners tab and and see what's going on in there, going into your console and understanding what the errors are in there. Sometimes, especially lately, like, Chrome and Firefox put all kinds of garbage in your console that means nothing to you as a developer.

Or, like, maybe you Yarn developing something, but you have an iframe and you have some stuff being dumped in there. So peruse through the console and know what's important and and what's Scott. And, honestly, we don't have any rules for that here. That just takes time, but getting comfortable with it. And then probably a couple Yarn into your your dev journey, you'll start to look at the rest of the tabs, which is things like the network tab,

the memory tab, performance tab, storage tab, cookies, things like that. I often see people go right for the console log sometimes. I, myself, am definitely a victim of using console log way too many times when it's not appropriate.

And just knowing again which tab to look at, whether that is, of course, the more maybe you're gonna get more information about that from the network tab than you'd get from doing a console log. Or maybe you're you're console logging 8 things, and it would just make more sense to throw a debugger in there and see the entire stack, the context of everything that you're looking at in 1 fell swoop.

Or maybe it's just like understanding what tools you can use to modify the CSS or HTML the correct way. A lot of these things, again, is just it's Yarn of this is experience, but, again, find yourself a good developer tools course or blog post or just spend the time looking at them because, let me tell you, there's not that many tabs for no reason. They they all have very specific use cases, and Yeah.

Some of them definitely are used more than others, but they they all have very excellent use cases for your skills.

Alright. So that is the leftovers of the fundamentals that we have for you. Hopefully, you learned a few things here or there of things that maybe you should focus on. Obviously, there's a lot here, but maybe take 1 or 2 things and say, I'm going to get better at the command palette, or I'm going to learn 5 new terminal commands in the next month or 2. And that's probably well worth your time. Totally. Let's move into some sick picks.

I have a really good sick pick today, and this is something that I got from my grandma.

So, my grandma is in a nursing home, and she's not able to have visitors.

And, she didn't have the Internet or email or anything like that. She actually had email, like, maybe, like, 15 years ago. I remember emailing her when I was, like just had a Hotmail address, but she hasn't had email in probably 10, 12 years or something like that. So we all of the cousins and everything got her an iPad and set her up with Internet at her at the nursing home. And the one problem she has is that her, like, arthritic fingers, she can't move them fast enough, and she always triggers things that are too quick. Like, she she makes the the icons jiggle because she held down. Like, she forced pressed on on some of the icons, and it's a little bit frustrating to her, to do it. So what we ended up doing is I bought her this thing called the the Cosmonaut Node grip stylus.

Oh, yeah. I know that. I got that from my dad for for different reasons. I just thought it was cool.

Oh, awesome. So it yeah. Just a It's very nice. It's a big marker. It's like gripping a Sharpie or something like that. Instead of her sort of shaky hands, she's able to have a little bit more control on that. And so your dad tried it. You thought it was

pretty cool? Yeah. It's weighted. It feels really nice. Like, it feels good. And Yeah. I got a firm a number of years ago for his, like, 1st iPad and and, just because I thought he wanted a stylist, and I thought it was really neat.

And it's a very very good product. Very nice. It's like one of these, like, Kickstarter

things.

Grab it on studioneat.com.

I'll put a link in the show notes as well. Big fan.

Cool.

I'm going to sick pick a it Wes, initially, a TV's I don't wanna call it, like, a limited series, what it would be like a as, like, a 4 parter limited series. This was on Node maybe in 2011, and granted some of the information has since been not updated, but, like like, for instance, they talk about the Higgs boson particle, which has since been discovered, like a fit like, actually observed. Right? And so this is called the fabric of the cosmos, and Courtney was watching the rocket launch and asking me some questions about how satellites work and how, you know, gravity works, and this stuff is mind blowing. It it's so mind blowing. And I said, listen. Like, I can explain to you how this all works with fabric and bowling balls and whatever, but, like, let me just put on this, like, 4 part series for you, which is a little bit of an investment. And let's just watch this together and blow your mind because it's it's based on the book by, Brian Node does this. He's fantastic. It's based on a book by the same name by Brian Green. I've also read the book because I found this video series to be so fantastic.

I've been a huge Brian Greene fan ever ever since this, but it it's so good. It talks a lot about theoretical physics. It talks about actual observed physics, and it talks about space time and how things are connected and warped via all sorts of things GitHub black holes and the theoretical physics of things like time travel or how time is connected to space in a way where, you know, just simply changing your speed actually affects time. Right? We don't often think about these things, and we watched the first Node. I've seen all of these, like, a 100 times, but we watched the very first one on just space itself, like empty space. And not like outer space, but, like, empty empty space space and and what that actually is. And when we got done watching it, Courtney was just saying, man, I feel like everyone should watch this stuff because you would realize just how insignificant a lot of the things we worry about are. It was just fantastic. So I I'm gonna be watching the other 3 of these with her over the next few days. It's my favorite video series. I love it a lot. It's from 2011, but it's it's still very, very fantastic. Very much holds up today.

Awesome. That's good. Shamelessly plug my courses, westbos.comforward/courses.

If you wanna learn something new with JavaScript, HTML, CSS, Check it out, westbos.comforward/courses.

Use coupon code syntax for $10 off. Yep. I'm gonna shout out my courses, level uptutorials.com.

You can sign up for the entire year right now and save 50% off Vercel uptutorials.comforward/pro.

Biddy, thank you so much for tuning in, and we will catch you on Monday. Peace. Peace.

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