Troubleshooting

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Welcome to Syntax, the best podcast in the world.

Rid. Love it.

It's pretty good. We are, doing an episode today on troubleshooting, and that is a question that we got from, let's rid. See who was Jimbo Moso on Twitter said, do you have any resources for developing or improving code troubleshooting? This is a huge rid. We've done a show in the past on debugging, which was more technical than than this show is gonna be, and this is gonna be just on, like, the rid Skill of troubleshooting.

And I'll say I think this is just a life skill in general is being able to anything in life goes wrong and breaks Or whatever. Being able to figure out what that thing is and help yourself narrow narrow it down. So we are gonna get into all that. Rid We are sponsored by 3 awesome companies today, FreshBooks Cloud Accounting, LogRocket, JavaScript session replay, and mux video hosting rid. Transcoding on the fly. We'll talk about all of them partway through the episode.

How are you doing today, mister Scott Talinski?

Rid Oh, I'm doing good.

Had a very productive weekend. Getting the house finally in order.

You know, it's just moving in with kids. Moving with kids has been very tough during the pandemic and all that stuff. Like, it it still fill not to mention the fact that, You know, there's, like, global furniture shortages, so everything that we've ordered for our house is, like, nonexistent.

So, like, actually, Wes, we have two Two beds in our bedroom right now because our our current mattress is super old and tiny. So we got a a new bed and a new mattress, And the the bed came, but the mattress has not come. And it's been there for 2 weeks now just taunting us, just saying, hey. Look at this Giant new bed that you get to have, but you can't lose me. It's just sitting there. Did you get a king? Yeah. We got a king. We Oh, that's a good life. Just even having a new well, the dog sleep in the bed too. And and one of our dogs, she's she's not huge, but she's she takes up some space. And it's just like, Dang. This is, feeling a little tight in here. But yeah. Yeah. It it's we just have the house feel in order. And so We just grinded on that thing on, this weekend and just trying to make the house feel a little bit more homey

Decorating and stuff. So Yeah. Hanging stuff up. Yeah. It's looking good. I saw some of your photos on Instagram.

Yeah. Yeah. We spent a bunch a bunch of time this weekend as well just rid. Cleaning up the house, and it's crazy with kids, especially kids' stuff. I was telling him, I was like, it's a it's amazing how much of your time is just managing stuff. Rid. Like a like, shout out to the minimalist out there because, oh, my gosh. Yeah. Like, we spent I I spent time balling my kids socks and selling of toys and figuring out what boots don't fit them anymore and which ones can be used by our cousins and, like They got so much stuff. Yeah. They got too much stuff. Yeah.

Alright. How do you troubleshoot something? How do you when something goes wrong, Like, what are good skills, and what are the steps that you need to use in order to figure out how you can solve this thing? Because rid. I wanna say that that's that's such a big skill with with someone. Like, sometimes you can bring a problem to somebody, And they could figure it out, like, within, like, 20 minutes or something like that. And other times, you can bring a problem to someone, and they have, like, literally no no clue. Like, I I'm even thinking about, we used to own, like, a rental property, and one of the floor drains had this, like, smell coming out from under it. Rid. And I I might have told the story in the past, but I'll tell it again.

We we called, like, one of these, like, 1800 plumber guys and, you know, you rid See the trucks driving around, and they've got their face on all the billboards. So we called them, and they sent this guy out. And he's just like, oh, I could try this, and I could try that, and rid And whatnot. I could I'm not sure what it is. And I was just like, well, like, can't you, like, figure this out? And so I was like, nah. Let's get out of here. Rid. So I I shoot them away, and then I spent, like, an hour or 2. And over the next couple weeks, just popping in, trying stuff, smelling stuff. Like, I figured it out, and it was like a like a $5 fix.

And I was just like, these guys that rid don't have any troubleshooting properties to them. They're they're not able to, like, go in and, like, ask questions and and figure it out or Or try stuff like they they just have, like, oh, I'm not sure. I have these, like, 6 things I could try that are in the book. And other than that, I've I have no no clue. And then and then you you look at, like, my brother in law's a farmer and, like, he can literally you just ask him a question, rid. He just immediately starts asking you questions back and and talking about it like farmers are the exact opposite in terms of troubleshooting. So I think Life skill in general.

And as developers, we need to get really good at that as well. Totally. When and also, I mean, it's funny because you say that rid about asking questions, and and there is the conversation about, like, googling things to find the answer, rid to and, like, is that is that a problem as being a web developer? I Google everything to find the answer. Is that a problem? No. Like, nobody knows everything. But the the real Thing about that is it's not about the fact that you are googling to find the answers. It's that knowing what questions to ask. I mean, It's almost like you're asking a a very, you know, omnipresent expert in web development who knows all the answers.

But, yeah, just like knowing the right questions to ask is a huge part of the battle, and and that is like, troubleshooting is being able to think about, like, what are rid. What what is the problem at hand? What questions do I need to ask to get to the the the problem the soonest? Because oftentimes, we don't look in the right places to even find the answer. So rid. Asking the right questions is a big, big important part of it and being able to know enough to know what those questions are.

So I I think the first thing you have here is a sanity check is the first heading, which I think is a great great title because I can't tell you how many times You're working on something and just something doesn't it's it's not doing what you're expecting. Right? There's a CSS file. I've saved this CSS file 4 times. The background's not changing to red. Why isn't it changing to red? I'm gonna change it to yellow. No change whatsoever.

And the sanity check here is to take a step back and say, like, is this file that I'm working on actually being loaded? Is this the right file? Is this the right project? Is the project even being run? Like those big questions that we oftentimes like, you're you're starting to work on something. You're Trying to modify something and

you think that you're Are you are you refreshing production?

Right. Right. Are you refreshing production? And and it's It's the most important steps that you need to take a step back and make sure that you are in the correct environment, in the correct file, and that the basics are taken care of because that is Such a thing. That is such a thing. I can't tell you how many times it's been a thing. Oh, you're editing the wrong file.

You're editing, admin tutorials instead of admin tutorial.

Okay. You know, did that that kind of sanity check is is a big one.

Totally. It just rid Making a change and making sure that it is, like, something obvious. Don't go right to the actual problem that you're trying to fix. Change background to blue rid And and go from there. It's it's funny how often that type of thing it's the the equivalent of did you reboot your computer in, developer land as, oh,

I'm I'm a silly goose, you know. I should've stopped my server, you know, clear the node modules, clear any sort of cache, rid Stop and start my server restart and see if that file is not being loaded still. And then you're like, okay.

It this is the real file that I'm supposed to be editing. Right.

Next 2 points we have here are things I'm gonna get tattooed on my knuckles is isolate and replicate.

Oh, nice. It's a good I don't know if I have enough fingers for that, but I think that would be a good thing to Toes. You got toes, man. That's true.

Isolate and replicate. So first one is isolate.

Take as much of the other stuff out of the equation as you possibly can. So rid. Authentication, middleware, other functions. If you've got all this stuff being being run at the exact same time, it's rid. It's really hard to figure out where the actual issue is. So if you can rip all that stuff out, then, rid. That will immediately take that stuff out of the equation, and it sometimes that goes, oh, it's it is actually working, but when I put this thing in, Then it's not. Then the whole thing is is broken.

You have a comment here. It says commenting out code is free, Which is is really good.

Yeah. Especially in a component based workflow. Right? We have all these components.

You have your routes. You have your your header, your your footer, all that stuff. Just comment out everything except for the single component path that you're trying to get to work, because maybe the problem is a red herring, and maybe the problem is elsewhere in your setup, and that can lead To you finding more like, let's say you the the console, the error log is saying that the error is in, you know, x, y, and z component, And then you comment out the header, and then all of a sudden the site starts working. Well, then maybe something in the header is goofing with the data, and and that's what's actually the problem. Rid. And maybe it's being revealed elsewhere. So commenting out code is just big, big, big for me, especially with components because

Sometimes components can cause issues with other components. They can have side effects elsewhere down the line. We had a I asked on Twitter if we had the syntax account. Like, what are your tips for troubleshooting? We got a a good, rid tweet here from Tanner Linds Lindsley, which we had on the podcast, couple months ago.

It just said bisect, run, repeat. What that means is that rid. Comment out half the code.

This is I do this a lot, especially in CSS.

You're, like, you're not sure where this, like, weird margin is coming from or why the rid. The the one I do all the time is, why is this thing overflowing horizontally? Mhmm. Like, what is causing that? Just comment out half the code. If it goes away, rid Then it's in that commented code. If it doesn't, then it's in the uncommented code. So comment out, half of that, And then keep going, you keep going, and and you just keep commenting out half of that, half of that, half of that. You'll eventually hit the piece of the code that is actually causing it, And you can take it out, and it will fix it or or at least stop the problem from and then you know exactly where it is. So it's it's basically just narrowing it down Half of the amount of code at a time, and and that gets that is a pretty quick way to figure out where the issue is. For me, I I'm I are on the side of Commenting everything out and then adding things back in 1 at a time.

Alright. This works. Alright. Next thing. Alright. This works. Alright. This works. It depends on the the severity of the issue, though. You know? Yeah. Exact especially if you like you said, with the componentized code, rid. Like, modern code will be able to run-in a vacuum as long as you pass it the things that it needs. And it's much easier than it used to be where rid. You comment out your WordPress header and the whole website goes white. You know?

Yes. Yes. You remove one little bit, and You you do it in the WYSIWYG because you're not editing in the files, and you bring down the site. Yeah.

No. But it is it is definitely a good skill to have. And if Committing this is also a good argument to commit often in your in your git. Because if you're committing often and you start commenting out code, It's really easy to go into the version control side of Versus Code to look at, like, what changes have been added to this commit To confirm that you have not put things back in order or, like, let's say you comment a whole bunch of stuff out from a file And then you understand where the problem is, you can then go in your version control settings in Versus code and click that little undo error, which will undo all of the changes since the last commit. Like, I use that all the time. To me, that that's, like, a big big deal. Next point we have here is replicate.

So if you rid. Cannot isolate the actual issue in your existing code base. That's honestly what I try to do first, because if you try to ask somebody for help, They'll often say, can you make me, like, a code pen or a a a replicate example? And they just like

I was hoping you would just tell me what the answer was. Yeah. I was hoping yeah. I but we're all guilty of that. I sometimes I I, like, really get into that mode where I'm like, gosh, I can't do a replication right now. I'm so frustrated by this whole thing, and that can certainly you know, it's hard to, like, resist those feelings. Right? But rid. You isolate 1st and foremost because if you don't know where the problem is, then how are you going to find it? Right. How are you going to solve a problem if you don't know where the problem is? But once you've found the problem or whatever, That replication of it, moving into a new environment, can reveal, like, what it is about the previous environment that is causing the problem. If you're looking at this thing and saying, I get this is broken. I understand where it's broken. I don't understand Why in this situation it is broken? Simply moving it to a new environment can be the thing that says, alright. It's not this specific environment that's the problem.

It's something different.

This can narrow and and refine so much, but it also makes it really easy for other people to put eyes on it. Because If you have a replication that's outside of context, then people can quickly easily try it themselves and maybe look at An example. And honestly, this this part of things is getting a lot easier with all these new browser based web tools. You can just pop something, you know, some code into, rid an online REPL somewhere or a code sandbox or something and and give people a try that way. So Being able to replicate these things has gotten way easier in a way. Oh, yeah. It's not just like, who come here and download this repo for me. And By replicating it, you also start with a clean slate and try to make the issue happen with as little code as possible.

So you take all the other parts out of it, authentication, maybe even an entire framework you take out of it. Like, I've many times I've, rid. Had issues with the React component, and then I tried to replicate the thing just in regular vanilla JavaScript. And if the issue is still happening, it has nothing to do with React or any other framework. It's that there's an issue with the browser or the the actual code that that you're writing. So try to make a a use case For us it or make a failing test as well. That's that's a good use case for it as well is, try to replicate the actual issue, make a failing test for it, and then try to write the code Fix it so that it passes that test. What's interesting, I was having this, like, really obnoxious error in,

a code gen plug in that I wrote for rid Vite and Svelte catch that Mhmm. Does a graphical code gen stuff. And on every single one of my Svelte components, it was telling me there was an error in my Svelte config From just simply using this Cogent plug in that I wrote, and I was getting so angry about it because it had been there for like a month, and I just could not figure it out.

And, once I I I just created a brand new Sveltekit site that has absolutely nothing going on with it, I made 1 GraphQL file. I made rid. The the added the GraphQL plug into it, and I didn't even use it, and the error still pops up. Right? So that therefore, you know that there's something here, but that's really bite sized and Easy to share with somebody. And by able to share that, I shared it on the Svelte Discord of which were the maintainers of the, Svelte Versus Code plug, and we're able to say, Oh, yeah. This is a problem with the Versus code node runtime that it's using. You have to specify a different runtime in Versus code for node To solve this problem. And it's like, how would I ever have figured that out from what the error was saying or or what the you know? Yeah.

So being able to share those reproductions with the people who know these things just a little bit better is always helpful because If they have some way to see the error happening, it it makes it that much easier for them to understand how how they can fix it if it's a problem on their part or your part or whatever.

And, like, You kind of have to do that as somebody who's using these open source libraries.

These authors are often maintaining and creating these things, free of charge, and they are providing them to you. And it's sort of our job as users of this thing To provide as much helpful, information to them when there's when there's actually an issue. So, rid like, I'll I'll give an example. I was just updating my, my course platform to Parcel 2. I'm doing some updates to the course viewer, and There's a whole bunch of stuff that's getting updated. And part of that, we're moving it to parcel 2.

And, there was, like, an issue with, it parsing our stylist.

And I was like, man, this is Mhmm. This is not working. And the thing thing was broken.

Rid So I found luckily, I tweeted it out. I provided some information, and there's another person that sort of had some information. The same thing happened for TypeScript, and then we found another Git, rid issue, our GitHub issue that had some other issue for SaaS. And, like, between those three things, rid was enough information to sort of pinpoint the actual issue, and then I came back on Monday morning, and and it was fixed, which is beautiful.

Rid.

So, without people actually using this thing and running into these, like, weird edge case issues, there these these things would never be fixed. So don't just get frustrated, but you kinda have to help out. Yeah. Totally. Yeah. And that is that's an important thing to always keep in mind that there are people behind These projects at every step of the way. Right?

Yeah. Totally. So, let's actually take a quick break to talk about one of our sponsors today, And let's talk about LogRocket.

Now LogRocket is the perfect place to see all of your errors and exception happen in a real time scrubbable video. That's right. A video as in when somebody has a they made a mess in your UI or how do you see that they made a mess in your UI? How do you even know how to solve that? And this is all about troubleshooting. Right? Like, what a good tie in to this episode. How do you solve a problem if you don't know where to look? And sometimes having an error log isn't rid The best way to know where to look. Sometimes you need to see what the user was doing, where they were doing it, and LogRocket gives you that ability to really pinpoint exactly how to replicate and how to isolate issues exactly like what we were talking about. So, you know, this is an ad read, but at the same time, it it couldn't be any more appropriate because LogRocket does allow you to do so many of these things in a production environment where you don't always get that opportunity. So check it out at log rocket.comforward/syntax.

Sign up today and get 14 days for free, And give it a whirl. Really cool. Thanks so much for love, Rocket, for sponsoring.

Next little thing we have here is rid Roll back if you can.

Roll back. So, and I think the the other point I have here is remember, correlation is not causation.

Rid. If I had a dollar for every time that I made a change and then I noticed an issue happening, And I would think, oh, well, I made that change, so that's why that's what broke it.

So correlation is not causation mean that rid. Whatever you change might not necessarily be the problem.

So if you can then roll back to a version of your code base Before you made that change and see if the error is still happening, then that will give you a bit more more information. Word.

Roll back, try a previous commit.

Very big. Again, another another argument for committing frequently, making sure that you're if if your thing's working, you have like a like you're done with a feature, you're done with any sort of bit of your code, rid go ahead and and commit that, baby. So that way you can can always roll back to it when you need to. Here's another big one, and This is what I'm I don't know if I'm guilty of myself personally, but, you see this very frequently in Reddit or in Stack overflow or places where people are asking for help, or we get this a lot in the discord too, which is, rid. Hope I'm having this problem. Cannot read property of undefined.

Oh, why is it giving me this error? Well, probably because your thing is undefined and you're trying to read a property of it.

So why is it undefined is the big question. Not why is this error popping up is the Question you need to ask yourself then is, why is this thing undefined, and why like, where is that happening? Is it because there's a network Error somewhere and the data is not coming in, and then it's coming in as a null or something, and you're trying to read a property of it. So there's a a lot of different questions that can be opened up From simply just understanding what you're reading, taking the time to read it closely, and know that that is Whether or not it's explicitly the error that it's it's being you're being presented, but, like, taking the time to say, if I read this and understand it, It will point me to the error. It it will it's a big flashing red light that says, hey.

The error is over here. Please come look at this over here. And just by just by understanding the message that you're reading and and understanding what that error message means Can be the difference between being completely clueless about where to go to solve an error

and having the right questions to Google. You know? Rid I had this on Friday. I had a you know, like, when you have an error, especially a node, it will, like, puke up a whole call stack, which is, like, that big, rid Like Yeah. It happened on this file on line 14 and then this file on line 18 and then this file, and you're like, that's all garbage to me. Those are rid. All in my node modules, I'm not I didn't write any of that code. There's there's and I usually just, like, kinda blur my eyes. And even in my node course, I wrote rid. Some code that would highlight the file names of those call stacks because I know most developers blur their eyes and stop looking at it when they see that big thing p especially, if the file names are really long and it wraps, It just looks like garbage in your console or or wherever it's being dip, dumped out. But I'll After about, like, 20 minutes of being frustrated with it, I did read the entire call stack, and I realized that it was trying to use a global module on my machine instead of the locally rid. Installed module in my node modules, and that was the issue. So silly me. Should've looked at it earlier. I I I do I wish there was some way to

make the the errors just overall be nicer. Like, I wish there was some way for them to be nicer because that is Such a big thing. Sometimes when you you hit, like, I know, Vite does this or Snowpack does this with a pop up with a nice Really well formatted error on the UI to say, you know, what the error on the server side is or whatever. That feels so much better than looking at just, Like you said, a puked up, like like, absolutely long list of just characters that can make anyone's eyes gloss over, especially if they're not used to reading them. I love a good, well formatted error message. I like long walks on the beach and well formatted error messages.

You're a simple guy, Scott. Simple guy. That's all I want in this world.

We also have here crack open the node modules directory. So often, if the you think the error is not in your code and you need to step it back a little bit. There's nothing wrong with cracking open your node modules directory and editing that code. Not to fix it, but just the console log and see where it's at. Rid It's frustrating when the the version it's running is, like, compiled and minified, and it's hard for you Yeah. To rid see that versus the actual source that's maybe written in TypeScript or Babble or whatever.

But more often than not, you'll be able to rid. Just crack open the node model's directory and see what is actually happening. It's just code at the end of the day. And if you have to debug those,

Then that that's totally doable. You know, I actually I do that somewhat frequently, and and that's actually one thing that has made me a better developer is really Getting into that node modules to understand these files are not mysterious. It's they're just files that you can go and look at in in like you said, console login. Just a console log. And you can see that log that log in your in your logs and and know that the code is being hit correctly or even modify that code if there's a a bug or something.

I've used patch package, which I don't know if you've used that before, but it's an NVIDIA package. I heard you talk about it. Yeah. What what you do is you basically you modify a file, then you run patch package, and it creates a patch for you that will auto update that on each npm install. And it was really crucial when MongoDB Or Mongoose, not MongoDB. Mongoose had an issue with, like, ESM, and it was a matter of just adding, like, one One conditional check. If this thing doesn't exist, then don't do this thing. Right? That was that was it. So for me, it was really easy to go into the known modules, add that conditional, And then run patch package, and then that was it. That solved the problem forever. And I didn't have to wait for the Mongoose, folks To release an update, which they did eventually, because, you know, it's a big old package. Right? But they they released an update, but for for that whole time, I I didn't have to be like, I can't use this anymore. What am I gonna do? You can take matters in your own hands and just go for it. Now another, A platform that allows you to take matters in your own hands is FreshBooks because they allow you to make sure that you get paid for your work By making sure that everyone gets invoiced when they're supposed to, and that the money keeps rolling in, and that you can keep on working. Rid Wes, what do you got about FreshBooks? It's the easiest way to send invoices and get paid very, very quickly. How do I know? Because rid. On Friday,

a couple days ago, I sent FreshBooks an invoice for this own podcast via FreshBooks, Which is always really funny to me. And I I actually went back in my, in my FreshBooks, and I was like, I've been telling people I've been using FreshBooks for rid. 5, 10 years, whatever. I've been using FreshBooks for 12 years. I went back and looked at my very first invoice for $500 For a website in FreshBooks. And I was like, it's kinda neat that I'd be able to I'm I'm able to look at my career progress over 12 years. That's rid. Over a third of my life, I have been using FreshBooks to to send invoices, to track all my expenses, to rid. Track my time when I was doing freelance, to do reporting accounting at the end of the year quarterly when I need to, rid remit all my, HST and taxes.

It's awesome. So check it out. Freshbooks.comforward/syntax.

Rid. Get paid faster. Thank you, FreshBooks, for sponsoring. Oh, and make sure you use syntax in the how did you hear about a section.

Sick.

Rid. Cool. Alright. Let's get into the next section.

This is a big one for me, writing comments to even step through. And then I'm talking about code that's maybe already written because sometimes you write the code and you you're thinking it's doing a thing. And if you don't have comments written already, what you can do is you can go step by step and write the comments for that code Or even write a step by step in comments and then attach those 1 by 1 like, a step by step what it should be doing and then attach those comments of the section of the code that's actually doing that. That way you can have a different perspective on, like, here's an outline. Here's something to look at this. Here's a new way to approach But this also goes back to the whole sanity check thing. You're checking to make sure that the processes that you think are taking place, are actually taking place. You're stepping back and you're saying, alright. I know to hang this picture. I have to get hammer, get nail, Put nail in the wall, put a picture, make sure it's level. Right? Yeah. But you could be like, why is this picture not on the wall there and and there's no nail there? She's like, oh, oh, there's no nail. Oh, I forgot to I forgot to put the nail on the wall. I got the nail right here. I didn't put it in the wall.

Yeah. I I literally forgot rid call that function. I ran it. I I typed the whole function out, but I never ran the function. Exactly. Yeah. Totally.

We have another point here, which is consider outside sources.

Rid. A big one for people is they say nothing changed. I tried a fresh npm install, and and the thing broke. And Often what happens not often. Sometimes what happens is, a minor bump Mhmm. Going from a 2.0.0 to a 2.0.1, rid.

Bugs can be introduced in those by accident. It is not supposed to. That's how SemVer works, but sometimes there. I've had a bug like that myself where, rid. It worked great on my machine, and I deployed the thing and the NPM installed. And what had happened is between the, like, the day before that I had NPM installed on my machine And to when I deployed the thing and NPM installed on the remote production machine, the error happened where there was a a minor bump.

Rid. It had not been locked a 100% to, like, SemVerb by default when you end up with a sauce sign, it will just lock it to major versions.

Rid. It had broken, and that was the actual issue. And here I was trying to think, like, okay. What's the difference between Mac and Linux? Mhmm. And the the thing was well, the literally, the npm package And the way you can do that is you can just delete the tilde and the little caret in your node modules folder, and that will, rid. Lock it to a version, but you have to be a little bit more diligent with actually upgrading your versions then.

Or did an external API change? So, rid. Are you pinging something and the data is changing? It could be as simple as the header type of a server that is returning data to you rid changed, and your your program is saying, oh, I was expecting text to come back, but now it's formatted as JSON or or or something weird like that Can just break your your entire thing, so think about that as well. Yeah. Totally.

Next is going to be that you will use the tools that you have. Right? We all have tools.

Rid. There's there's a lot of them for web developers to be able to figure out what you're doing, but make sure that you're using the tools and you're using the right tools for the job. Like, for instance, rid. You're having some data come back as undefined. You don't know why it's from coming from an API. The 1st place to look is the network tab because that's a network issue. Right? Something's happening with that request where the right data isn't coming in. You add to the network tab. You look at the request. You see if the request is coming in. You check the response to see What that response is saying, why it's saying it, and then if if you have access to the API, the development API, check the API, make sure that data is coming in. Again, it's like knowing what tools to use for the the right job.

But there's also exceedingly good debugger tools built in rid to Versus Code as well as Chrome that can work together or by themselves, via the usage of breakpoints or the debugger statement While they're not the easiest to set up, they're definitely worth it in terms of, being able to really understand complex issues in a way that's Much faster than console logging, console log driven development. Just log out all the things and check on no. Now we can step by step over each line of the code, See what each thing is actually doing, what's returning, what the functions you can step inside of function step by step, like I said, and and just Understand your code so much better. Again, well worth your time to make those happen. I I know when we first started this podcast, I'd never even written a debugger statement, let alone used a breakpoint. And My life has changed very substantially since then from usage of these tools. Yeah. Learning how to use go back to our episodes on actually debugging, Learning how to use the step over, step into functions are key, being able to pause it and look at state, whether that is your framework state or whether it's just a variable.

So if you pop a debugger statement in something, you'll be able to see what the state is at the time. And sometimes you you're you'll console log something, rid. And the console log is what you're expecting, but at the time of the debugger statement, the value is undefined or it's something else. And being able to just pause time for a second and peer into it and use your debugger tools, use your console to root around for the data is key. And I think that's a underutilized tool, especially when you get into some of these, like, head scratcher bugs a couple times a year. Another one here is rid To rubber docket.

Rubber ducking. Rubber Rubber duck? Rubber ducking is the So just, like, talking to a rubber duck, whether or not that's real or not, whether or not you have a physical rubber duck, which I do not.

It's just the Process of talking something out with a thing that may not or does not talk back to you, unless, of course, your rubber duck talks back to you, then That's a whole another thing that you gotta worry about.

I, personally, I I do this. I I'm not great at talking out loud, so I have maybe a we have a text Channel in the discord for level up, which is the rubber duck text channel where you can just type things out. Just to type them out and and have it written down as, like, This is what I'm trying to do. This is what's happening. What's not going what's not going right here? But oftentimes, people do physically talk out loud and talk to a fake, rid anything or just the ceiling or or rubber gun. You know? I have a,

A fish in my office at the cottage that I can often talk to.

Is it a big mouth Billy bass? Big oh, I I wish. I've I've had a couple of those in the past, but I don't have one right now. That's kind of odd that you would have had a couple and that you have no more.

Well, you want the whole story? I'll tell you.

I bought a Santa one that wasn't working. Uh-oh. What did the what the Santa one saying? It wasn't take me to the river.

No. No. It's, some sort of Christmas themed, fish song and I It was broken. I got a yard sale for, like, $2, and the guy's like, it doesn't really work that well. And and then I I got another one or he had 2, and I was like, I'm gonna put them together And, like, resurrect the Santa one because that is hilarious.

And, it was, like, different gears. The wood the gears were stripped, and the gears were different. And I took them all apart, and it's one of those things that are just like you're 2 hours in, and you got a bag full of screws and random things, and you just You chuck it in the f it bucket, and you're I hope to find another one one day. It's a very West Boss thing to

Buy a broken bad mouth Billy Bass with the intention of fixing it.

Another side side story here about these types of thing, I used to work Target when I was 16, and I was, like, you know, a 16 year old. So I would, like, go down the aisle and just, like, turn them all on and then leave. Especially if it wasn't my, like, section is just like take me to the rim. Yeah. How many of these can I can I possibly get going at once and then get out of there as fast as possible so rid No one knows I did it? My my long term goal with one of these is,

as I as I'm becoming better with electronics, rid. And and learning how boards and stuff work. My long term game is to, hook like a Raspberry Pi or something up to them rid And to figure out the text to speech web API, because you've I've seen these videos where people hook it up to an Alexa, And then as Alexa talks to you, it's like, oh, it flips its mouth open.

Oh, my gosh. It's hilarious. And How they figured out when to open the mouth as when Alexa is talking is just I just sometimes I just lay awake at night and think, like, man, I would love, love, love to to get more into that.

Having one of those in every room of your house.

And you could be like, fish, please Please tell Courtney to do this, and then the fish will, like, go into Courtney's room and be like,

I rid. We we brought our kids to Home Depot, and they were looking at all the, like, Halloween decorations.

And our youngest, rid Kit lost his mind when one of them started talking to him. And then when we were trick or treating, this guy had this, like, skeleton With the candy and the skeleton would react to the motion and open its mouth and

he was so scared, man, shaking like crazy. So we gotta Maybe gotta wait a year or 2. Yeah. Yeah. Do you know what? You actually be proud of me, and on the matter of troubleshooting here. So this is actually relevant.

My leaf blower, I have a an electric leaf blower, and it's great. It's extremely it's it kicks so hard. It nearly, like, Jolts the thing out of my hand. It it's so good. It's very powerful. We have some major leaf situation going on over here. But I noticed That belief glories to sound like, and now it sounds like,

like Oh, yeah. Yeah.

And when I would take my finger off the throttle, you'd almost hear a little bit of slipping going on, like, like a little slip.

So I was like, alright. I'm gonna I'm gonna pop this thing open, and I'm going to figure out what's loose in here. I mean, it's a leaf blower, electric leaf blower, so that makes it a little bit easier.

And I popped I at the end of this at the end of the day, everything was fine, and maybe it's Just like the the motor slipping or something like that. So I it was nothing that I was in ended up able to fix, but you'd be very proud of me because I opened this whole rid up, and I I was able to obviously put it back together and get it working, but I had it completely apart, entirely apart. Every single piece of it out. And here's one of the cool it's an ego, and I'm gonna give a shout out to ego because there was maybe like, you know, 25 screws in this thing, All of the same screw. They were all the same. I was just like, this is so great. I don't have to keep track of which one goes where or whatever. Just pull them all out. That's the best. That no. It's good. And, honestly, that's, like, most of it. People always ask me, like, how do you know how to

how to take this stuff apart and fix them? Like, literally rid. It, and sometimes you throw it in the garbage. And some Yeah. Sometimes.

And, usually, you get better at it every single time, and You understand how it works, and you look at it, and you you usually can figure out what's going on.

You just have to have nothing to lose. In your case, You had a lot to lose. It's a very nice blower. But And it worked. Yeah. I did.

But but it also those the the new blowers and the new the new things. Like, The blower itself is like, what, $50. It's the battery that's, you know, $70, $80. So

hey. Yeah. The the batteries are expensive, but rid. People always think that these companies are screwing you on the batteries. They're not. Try price out these Samsung cells just individually and build your own battery. It's Not any cheaper. I've done it.

Those those yard batteries too, they are hefty. I mean, the total weight of any of the stuff is the battery. The battery is Very, very heavy compared to the rest of it. Electric tools, man, let it's it's a tangent, but let tools are the way forward. Oh, yeah. Oh, yeah. I got it everywhere. All my tools are electric. Can't get enough of

them. Anyways, back to learning how to troubleshoot.

Rid Search for other people that are having your issue. We've talked about this on the debugging, so I'll just go over it quickly. But,

rid. Just copy paste the error message. Take out anything specific. Yeah. That is you're not gonna know if Scott told if your error says There's a problem in forward slash Scott Talinski forward slash take out that Scott Talinski stuff. That's not that's not helping you. Yeah. Although,

Google is getting better at finding partial hits. Like, I had an issue with my personal stylus plug in, and, it led me to an issue where somebody had a personal SaaS plug in issue, and it was the same issue.

And luckily, it I found that, and I was able to to use the help of those people to to fix it. So some some of those things in that same regard can be a red herring too because

The Google can give you like, let's say if you do search, like, if if you don't know what the answer is and you do search for Something of undefined is is not found. And then It's like really generic.

Yeah. Super generic error, and then you could Google that. You could hit a Stack Overflow, And then somebody could say, oh, yeah. You just gotta do this. And then update update your node version to version 16, 17, whatever. And then you update your version in node 17 or 16. It doesn't fix the problem. And then all of a sudden you're like, shoot.

I did the thing that they said to do, and it doesn't work. And it's because your your situation is not truly the same as their situation even if you Googled it and it came up. So, like, being able to distinguish those things It's probably something that comes with time and experience, but it's definitely

can also be a trouble if you're trying to troubleshoot. Rid. We asked on Twitter, what are your tips for troubleshooting code or a system that does not work? I thought we'd just rattle through a couple, of, some answers here. You wanna grab a couple, Scott? Yeah. Let's grab one here.

This one's rid really good log. This is from Werner Wallum.

He says logs and metrics bay based on that test for solution, Iterative process until solution is approved.

Save the last sequence of tests for regression.

Test Log metrics. Test log metrics. All that those words are just increase your visibility into What's going on? What could be going on? And where am I at right now? You're never gonna be like, man, I have too much information to solve this problem, you know, Unless, of course, you're you're have thousands and thousands of pieces of information, which is never the case. In any of these things, if you're trying to solve a mystery here, The more information, the better. Logs and metrics. Logs and metrics. Yeah. Totally. This one's from, Barty Henderson.

2 slightly unrelated things, But the 2 most dangerous parts of a project are CICD.

It's very difficult to validate actually running the inputs, and a minor mess up is equal to a production release. Rid. That's true. That's very hard to debug something in the, continuous delivery pipeline, especially when You have to wait 6 minutes to figure out if your thing fixed it or not Mhmm. Which is really, really refreshing. The other one was error handler. I've experienced many bug Obfuscation, by, by or directly caused by an error handler. It's true. Like, if you catch an error rid. And then display an error to the user. Sometimes you actually eat that entire stack trace and error message because you're assuming it's gonna be one thing or another, and rid. It's important to still send those things off or have your error handler, collect them because nothing nothing better than being able to log in and say, oh, 5050 other people also had this issue, and you can Yeah. Dig a little deeper into it.

Yeah. I agree.

And Steve from, JavaScript to Jabber, shout out to JavaScript Jabber, or JS Jabber, I should say.

JS Jabber podcast.

Rid. He says I use my step debugger whenever possible, whether it's x Xdebug with PHP or the browser source tab in JavaScript. Now rid. We we mentioned this, but it's worth repeating. These tools can be a PIA to set up sometimes, and they can make you go a little bit nuts if you've never used them before.

It's worth it. It's worth to to get it going and to to get the step by step debug because it might not always be The most appropriate tool for solving a quick issue, but there really nothing beats the visibility of the debugger.

Connor rid. Says explain what's happening and what you're trying to do to somebody else. That is that is rub rubber duck debugging, especially I'm I'm so rid Happy that I have a large Twitter following because anytime I have an issue that I just can't get through like, I don't immediately go to Twitter. But if I just cannot figure it out, rid Tweeting it out, you get, like, 20 people asking super good follow-up questions Seriously. That I'm like, oh, didn't think of that at all, or oh, rid. Yeah. Okay.

And, like, a lot of them are just like, of course, I tried, like, whatever. Or a lot of them are snarky, like, shoulda used view instead. Rid.

But the other, like, half of them are are really helpful follow-up questions because people are thinking about it from other and, also, like, myself. When somebody sends me, Like a DM of, like, I can't get this thing to work. It's almost like a challenge being like, ah, I bet I could fix that. I know. I'm so guilty

of wasting so much time on other people's issues because of my ego, and I want to do it. I I think I owe Totally. I can do this. I No. I can do this. Okay. Here's another one from Abdulhandi Salah Abdelkader.

He says every system or programming language comes with documentation.

If you read it, you'll skip quite a lot of weird bugs.

Sometimes it'll include debug tools or variables logging options to help you diagnose your issues.

Now this one is the thing I am single most guilty of because I am not a I'm not a talented reader. I don't read well.

Just straight up, just part of the way my brain works. Right? I will miss things in the documentation that explain exactly what my issue is. And so sometimes if you're having something that seems like it's a commonplace or should be a commonplace issue and no one else is talking about it, rid. You feel like if it if your brain goes to the place where, like, everyone should be having this issue yet no one is having this issue but me, the chances are that you should take some time to really read the documentation in-depthly Because you could just straight up be doing the thing wrong, or you could be missing one of those little caveats, like caveat.

If you use the word fetch here Instead of this special version of fetch, then the whole thing will break up, blow up, destroy itself. Who knows? And that's not like a real example, but, like, A lot of these things have nuance. Right? They have, small situations where the the package may not work rid. As expected every step of the way, and you could be ignoring that entirely.

And that could be the reason for all your troubles. Read the docs. It's so easy. Rid. Last one I have here is from, Douglas McWinnie, and,

I love this one because it is he's I just looked at his profile. He's from Scotland. You're stuck in a loop of banging your head at a problem, go make a cuppa.

Maybe even sneak a biscuit or 2. Oh, wow. Have a breather. Take a little break. Come back ready. With some fresh eyes. Totally agree. I can't tell you how many times a problem has fixed itself when I was just walking around having a shower, took a took a little break.

Rid I find that really hard to walk away from an issue, but that is often you just need that, and your brain will work on it in the background. It'll It'll there's a web worker in your brain that will continue working on it, and it will come back when it's ready. It's so right. It's so right. And for those of us, You know, with egos,

not like not like all you know, I'm the best kinda ego, but, like, you you you you approach issues as challenges. Right? Like we mentioned. It's like, I can do this thing. I can fix it. I know I can fix it, and that's part of being a good developer is honestly being able to have that persistence to fix an error. But at some point, You need to take a break and let your brain work on it, you know, in the off time or move directions or do something else for a minute. Go to sleep, take a walk, Clear your mind.

It is hard to do. We say this all the time. It is hard to do this, but you need to do it sometimes and it's usually well worth of time. So I'm a big fan of just clearing letting my brain do the work for me without having to implicitly, You know, save a file for the 100th time and then just be very upset when it's not working still.

So, a nice little sidebar here was I was actually working on a recoding the video uploader for level up tutorials, last week because we moved to Svelte, and We kept our admin tools in React, and now I'm slowly moving the admin tools over to Svelte. So I got to rewrite our video uploader, which means that I got to Work with the wonderful APIs of Mux, which is one of our sponsors today. Now Mux, is a video Platform for developers, and this thing is seriously cool because at what mux, that's mux.com mux.com, it allows you to work with video in a way that takes all of the difficult stuff out of it. Now I I know I've been working in video APIs for a long time. I mean, forever and ever, I said, why can't there be one of these platforms that gives me all of the professional features but Makes it as easy as YouTube. Now granted, I had to write my video uploader for monks, but using a package, it was it was ultimately fairly easy.

And maybe I can open source this thing. Who knows? Right? But this platform does exactly that. No more worrying about Transcoding. No more worrying about video formats. No more worrying about storage. Like, when I was working in some other platforms, it's like, alright. You've now uploaded the thing. You have to transcode 800 different versions of this, store them in a database, or store store the locations of them in the database, then store the files rid in a folder structure and then access the files then be able to access the correct video file at the right time. Just no thank you. That stinks. It's hard to do. So with mux@mux.com, you upload your video. You access it via URL, and it just does everything for you. It transcodes on the fly. It gives you the right, the right quality for the users based on their connections.

It allows you to do live streaming. Heck, we did a syntax f m livestream for one of our, I think it was our 3 100th episode or 200th episode. I forget.

Either way, I set that up in no time because I I just told Mux that I needed a live stream. It gave me a URL. We post that URL. We had an HLS path on our site, which was based in React, and it just worked so incredibly easy, and we did all of that ourselves. So check it out at mux.com.

You can sign them today, and it's how developers build online video. Very, very cool stuff for Mux. So thank you so much for Mux for sponsoring.

Okay.

So that should be it for troubleshooting for today. It's a topic that we'd love to talk about and probably will talk about again in the future sometime.

Let's get into a section called sick picks where we pick things that are sick sick. I have a sick pick for you, Wes, today that is very much MacBook Pro based. Now our MacBook Pros, they got a notch. Right? And some people don't like the notch. So if you have a MacBook Pro with a notch, you're gonna wanna listen up because this is an app called forehead.

Forehead.

What forehead does is it hides the notch in a way that still makes that space usable. So What it's not doing is it's not just like pushing everything down. What it's actually doing is turning the menu bar black, Same color as the notch. So, therefore, your file menu is just black up there, but you keep that extra space. And all it does is is make it so it's not a distractingly different color. It just kinda hides the notch by making everything black. And Here's the best part. This app is free or pay what you want. So, it's very, very cool, and it exists. And shout out to Jordy Bruin, who made this thing, it's very cool.

Great big fan. That's really neat. I that's a good use case for it because, Even I I use light mode on on a Mac, and it's white. I just assumed it would be black That's when you're using dark modes.

No. Thank you. Light mode. I'm I'm the most all over the map between light and dark mode. It's app by app basis. I I I like my dark mode. Like,

I like my, cold brewed coffee. As dark as it gets, black as it gets, just hit me with it. My Google switched to dark mode the other day, and I was like, rid I used to go, which has been dark for a while, so that's, like, a Oh. Very good.

Next level.

I'm going to sick pick a piece of, technology that I got as a people send me these review things all the time.

And sometimes because Scott gets them as well. Sometimes they're garbage, and we don't talk about them. But this one is sweet.

Rid Like, Scott and I got these, like, docs that were Oh my god. They're so bad. Not very good. So we didn't talk about them. Well, now we're talking about them, but we won't say what they are. But, I got this. It's called the Exyno Charger, and it is a rid. 1, 2, 3, 4, 5. It's a 6 port USB charger that does up to 240 watts, which is A lot. So I in the past, I've used this Anker one that has, like, 8 USB ports, and you can charge all your phones at once.

Rid. This one does 240 watts, so it means you can plug in 2 MacBook Pros charging at a 100 watts rid. And a phone charging at 40 watts, and it would it would charge all of them at at full go. And it's amazing because it tells you rid. The rate at which your device is charging on a little display on the front of the thing. So rid. It's really cool. So I plugged in my laptop. I plugged in my phone. And you can see, like, when I do something, it starts requesting more power. Rid And then when I just like stop it or I'm not exporting a video, it requests less power. It's kind of cool to see how many watts it's actually using. And it it does all the rid. Quick charge, power delivery, IQ. You know how there's all these different, like, standards for charging something? Rid. Or if you're not using the right cord, it will tell you. And, you know, there's all these different USB c cords that some of them do power delivery and some of them don't. Rid so if you're using the wrong one, it will tell you that this thing is really cool. So, like, full disclosure, they sent it to me for free for, rid so that I could do this, which is tell you about it.

But, like, man, this thing is is So so cool. I've been been really happy with it. I think what it will end up being, like, under the couch type of thing where ready. You could plug your laptop in. All the kids have, like a couple of people. Like, why would you ever need that? I'm like, well, we we have, rid Like, multiple headphones. We have multiple multiple devices, multiple iPads.

The kids have microphones that charge over USB and rid All these random things that charge over USB, and it's nice to have, like, a family charge station.

And the fact that this can also charge rid. Two MacBooks at the same time is really cool because you never have to take out your and it's it's all for the I don't know. How much is this thing? Rid. It's a $199 Canadian. I think it's, like, 159 US. So if you were even buying one new rid Apple charger. That would be about $100, I think.

And this thing is smaller than the Apple charger, which is amazing that it does that. So pretty cool. It's called the rid. Ego, e g o, Exino Charger. I'll put a link to the they're doing a Kickstarter. I'll put a link to Kickstarter in the show notes, so check that out.

They gotta get me.

Yeah. I'll, I'll send you an intro. I'll send you an intro, Scott. Like, sometimes the the free stuff It's kinda weird sometimes. Oh, yeah. It's just like I don't know. People sometimes don't like that we get stuff for free. 99%

of the free stuff you do get is is junk and then you feel bad because they sent you something and it's like, oh, this is junk. I don't wanna I don't wanna push this on anybody, you know. What do I do? Can I just send it back to you? I don't ridged. It's not good, but yeah.

Yeah. It's a it's a whole Every now and then, you get some some pretty nifty stuff that comes your way, and this thing is That's really cool. It's got really cool, like it it plugs into the wall via, like, a regular 2 prong outlet, but then it also comes with this rid. Adapter that you can slide over top of the prongs, and it will adapt to either just a cord that you can plug into the wall or Literally any any,

outlet around the world that comes with a bunch of adapters, which is pretty cool. Cool. Alright. Well, now it's good to shamelessly plug things, which We are getting dangerously close to Black Friday here, so now is the time to drop our Black Friday sales.

So rid. Level up tutorials will be doing a big time Black Friday sale this year and possibly the lowest price that you'll be able to get level up tutorials at forever.

So lock in that rate because chances are new year hits, we're gonna be upping our rates. I don't know what to yet, but, it's it's been a couple years. So, rid that will most likely happen, and therefore, this is going to be the last opportunity to get this price of LevelUp Pro. Rid. Level what is LevelUpPro? LevelUpPro is a tutorial platform. You can think of it at, like, Netflix for video tutorials and web development. We have a new tutorial rid Every single month, it's like 20 some new videos every single month. And because of that, we've been doing it for many years now. We have a huge library of tutorials From not just myself, which I released a new tutorial course all the time here every other month right now, but in the past every month, We have amazing content creators like, James Quick did a course for us. Colby Fayock did a course, Brian Douglas.

Rid.

We have some amazing folks coming on and making courses for us, as well as, like I said, myself. You can learn Svelte. You can learn Astro. You can learn React. You can learn Vue, Or you can just learn straight up modern CSS, and HTML coding practices as well. We have something for everyone here. So check it out at level up rid tutorials.com, and you can sign up today. We'll have a big old banner up there for Black Friday. We'll keep it up for maybe a week or so. Rid Haven't necessarily worked that out yet, but, we'll have a little countdown clock so you know when it's gonna be over, and you'll be able to get 50% off for the entire year. Or if you can't do subscriptions, all of the courses will be discounted individually, so you can go pick up a la carte. Anything you possibly could want there is gonna be 50% off, so Check it out. Leveluptutorials.com.

This is your last chance to get to this price on LevelUp Pro. I'm also running rid. My yearly Black Friday as well. All of my courses will be half off, 50% off. I never do it this, this price Except for Black Friday. So that includes MasterCatsby, beginner JavaScript, full stack advanced React and GraphQL, PS 6 for everybody, React for beginners, learn Node.

Every course I have will be half off, so grab the ones that you want. This also includes, Free updates. So I am currently, I just updated the testing version of full stack advanced React and GraphQL, rid. And I'm also going to be rolling out, some updates to Keystone 6 for that one.

We just updated all of the rid starter files and dependencies for learn nodes. So if you wanna learn how to make express apps and server rendered apps, that thing is all up to date as well.

Rid. React for beginners is getting rerecorded in a couple of months as well. So lots of good stuff coming at you.

West boss .comforward/courses.

That will get you

half off every course. Don't miss it. Yeah. Hey. Actually, I wanna say maybe before this episode ends, if you head to leveluptutorials.com right now, It will be the Black Friday sale will be active even though it has not yet been not yet been Thanksgiving at the time you're listening to this, Ed. When is this one being released 24th.

The 24th.

Yeah. Mine will be as well. I the thing with Black Friday is that It usually starts much earlier and runs past Black Friday into Cyber Monday, because it is good for sales. Rid. And a lot of times people say, oh, I missed it. Can you extend it? And whatever. So I usually extend mine to at least through Cyber Monday. If you're listening to this, you can You can wait for that also because people need to, get approvals. You know? If they're they they can't necessarily buy something with the company card when they're not at work for Thanksgiving. And I I don't think it can be understated just how

important things like Black Friday are for small businesses like yours and I and and how, You know, that can, you know, greatly help us for the rest of the year. So, shout it out to Wes Bos courses. Shout out to level up tutorials.

If you want to help support some indie developers making content, head on over to, West's courses as well as level up and sign up. You'll get 50% off, and you will help support this podcast as well. So thank you so much. Alright. Thanks for tuning in. Catch you on Monday. Peace. Rid 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.