Troubleshooting

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.

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.

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

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

the ceiling or or rubber gun. You know? I have a, Just straight

And, 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.

Rubber duck? 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?

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.

fish song 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 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,

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

some sort of Christmas themed, 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,

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

No. No. It's,

So if you

It's something different.

rid. Cannot isolate the actual issue in your

rid. You isolate 1st and foremost because if you don't know where the problem is, then how are you going to find it?

of it, moving into a new environment, You're editing,

existing code base. That's honestly what I try to do first, Rid. It had broken, and that was the actual issue. And here I was trying to think, like, okay. What's the difference between Yeah. Yeah. We spent a bunch a bunch of time this weekend as well just rid. Cleaning up the house, and rid Happy that I have a large Twitter following

That replication

gosh, I can't do a replication right now. I'm so frustrated This one's rid really good log. This is from Werner Wallum.

by this whole thing, and that can certainly you know, it's hard to, like, resist those feelings. Right? But

So I was like, alright. I'm gonna I'm gonna pop this thing open, It will be the Black Friday sale will be active even though it has not yet been But oftentimes, people do physically talk out loud and talk to a fake, rid anything or just

like, Halloween decorations.

That belief glories to sound like,

these Samsung cells just individually and build your own battery. It's Not any cheaper. I've done it.

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.

like a little slip.

I rid. We we brought our kids to Home Depot, and they were looking at all the, being being run at the exact same time, it's rid. It's really hard to figure out Which is is really good.

and now it sounds like,

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

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.

Having one of those in every room of your house.

like Oh, yeah. Yeah.

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

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.

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 Save the last sequence of tests for regression.

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

You need to take a break and let your brain work on it, Okay.

a nice little sidebar here was I was actually working on a recoding the video uploader for level up tutorials, 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 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, 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 googling things to find the answer, 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

Connor rid. Says explain what's happening 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

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, 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 2 slightly unrelated things, But the 2 most dangerous parts of a project are CICD.

you know, in the off time or move directions or 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,

clearing letting my brain do the work for me without having to implicitly, 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

You're never gonna be like, man, I have too much information to solve this problem, you know, Unless, of course, you're Iterative process ridged. It's not good, but yeah.

Rid. He says I use my step debugger whenever possible,

And maybe I can open source this thing. Who knows? Right? But

a problem has fixed itself

Platform for developers, and this thing is seriously cool because at

Test

JS Jabber podcast.

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,

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

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 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, it's very, very cool, and it exists. And shout out to Jordy Bruin, 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

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, what that error message means Can be the difference between

by,

Yeah. I agree.

He says logs and metrics He says every system or programming language comes with documentation.

So, My leaf blower, I have a an electric leaf blower, mux.com,

do something else for a minute. Go to sleep, take a walk,

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

collect them because

And, like, a lot of them are just like, of course, I tried, you think that you're Are you are you refreshing production? Rid. If I had a dollar it's crazy with kids, especially it parsing our stylist.

is a video 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.

what mux, that's mux.com 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

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.

or JS Jabber, I should say.

bay based on that test for solution,

Clear your mind.

And Steve from,

JavaScript to Jabber, shout out to JavaScript Jabber,

Log

and what you're trying to do to somebody else. That is that is rub rubber duck debugging, especially I'm I'm so

I am not a I'm not a talented reader. I don't read well.

You know, save a file for the 100th time and then just be very upset when it's not working still.

ah, I bet I could fix that. I know. I'm so guilty Google is getting better at finding partial hits. Like, I had an issue with my personal stylus plug in,

Now this one and I'm going to figure out what's loose in here. I mean, it's a leaf blower, electric leaf blower, right now,

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, And when I would take my finger off the throttle, you'd almost hear a little bit of slipping going on, like,

What's going on? What could be going on? And where am I at right now? 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, 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

continuous delivery pipeline, especially when Roll back. So,

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

in-depthly

other people also had this issue, and you can Yeah. Dig a little deeper into it.

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,

Instead of this special version of fetch, then the whole thing will break up, 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

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.

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.

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.

the chances are that you should take some time to really read the documentation

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, Another 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, small situations where the the package may not work rid. As expected every step of the way, and you could be ignoring that entirely.

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.

whether it's x Xdebug with PHP or the browser source tab in JavaScript. Now The error is over here. Please come look at this over here. And just by just by understanding

It is 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 or drop a review if you like this show.

being able to have that persistence to fix an error. But at some point,

a $199

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,

Forehead.

technology that I got as a people send me these review things all the time.

on the front of the thing. So

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,

Yeah. I'll, I'll send you an intro. I'll send you an intro, Scott. Like, sometimes 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, So if you pop a debugger It's pretty good. We are,

I'm going to sick pick a piece of, doing an episode today on troubleshooting, free of charge, and they are providing them to you. And it's sort of our job as users of this thing Can just break your your entire thing, so think about that as well. Yeah. Totally.

who made this thing, it's very cool.

Next level.

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%

me.

Rid. Or if you're not using the right cord,

and it is a I just sometimes I just lay awake rid. 1, 2, 3, 4, 5. It's a 6 port

And this thing is smaller than the Apple charger, which is amazing that it does that. So pretty cool. It's called the

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.

rid. And a phone West boss .comforward/courses.

like, full disclosure, they sent it to me for free for, 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

They gotta get nothing nothing better than being able to log in and say, oh, 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.

rid. Ego,

Great big fan. That's really neat. I that's a good use case for it because,

I got this. It's called the Exyno

rid I used to go, which has been dark for a while, so that's, like, a Oh. Very good.

Charger, 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. It's really cool. So I plugged in my laptop. I plugged in my phone. And you can see, back to learning how to troubleshoot.

rid Like, multiple headphones. We have multiple

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,

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, there was, like, an issue with, 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, Isolate and replicate. So first one is isolate.

charger that does up to 240

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.

rid Apple charger. That would be about $100, I think.

Rid. This one does 240 watts, 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.

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

multiple devices, multiple iPads.

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.

rid Or Mongoose, not MongoDB. Mongoose had an issue with, like, ESM,

This can narrow and and refine so much, but it also

And let's talk about

And I would think, oh, well, I made that change, so that's why that's what broke it.

you need to see what the user was doing, where they were doing it, and LogRocket gives you that ability to really pinpoint

Very big. Again, another another argument for committing frequently, 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.

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

Oh,

you see this very frequently

made a change and then I noticed an issue happening, 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 rid tweet here from Tanner Linds Lindsley, which we had on the podcast, And I'll say I think this is just a life skill in general is being able to USB 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.

exactly how to replicate 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 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

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.

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

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

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

This is what I'm I don't know if I'm guilty of myself personally, but, Sign up today and get 14 days for free, And give it a whirl. Really cool. Thanks so much for love, Rocket, for sponsoring.

for every time that I

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

LogRocket.

So if you can then roll back to a version of your code base of, some answers here. You wanna grab a couple, Scott? Yeah. Let's grab one here.

Roll back, try a previous commit.

the right quality for the users based on their connections.

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.

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

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.

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.

this platform

no thank you. That stinks. It's hard to do. So with [email protected], 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 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.

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,

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.

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.

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, Because you could just straight up be doing the thing wrong, or you could be missing one of those little caveats, like caveat.

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

when to open the mouth

How they figured out 5050

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,

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, often you just need that, and your brain will work on it in the background. It'll

to to get more into that.

Oh, my gosh. It's hilarious. And 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,

oh, it flips its mouth open.

rid. And and learning how boards and stuff work. My long term game is to,

side side story here about these types of thing, I used to work Target when I was 16, and I was, like, 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

as I as I'm becoming better with electronics, 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, that you can slide over top of the prongs, and it will adapt to 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 love, love 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

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

hook like a Raspberry Pi or something up to them rid And to figure out the text to speech web API, Rid Like, Scott and I got these, like, docs

rid. Had issues with the React component,

maybe even an entire framework you take out of it. Like, I've many times I've, any any, Life skill in general.

So you take all the other parts out of it, authentication,

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,

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

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

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 until solution is approved.

We also have here crack open the node modules directory. So often, 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 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,

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,

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.

rid.

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,

See what each thing is actually doing, what's returning, what the functions

log out all the things and check on no. Now we can step by step over each line of the code, 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.

a minor bump Mhmm. Going from a 2.0.0 Before you made that change and see if the error is still happening, then that will give you a bit more more information. Word.

good debugger tools built in rid to Versus Code as well as Chrome that can work together or by themselves, makes it really easy for other people to put eyes on it. Because If you have a replication that's outside of context,

This is a big one for me, You're a simple guy, Scott. Simple guy. That's all I want in this world.

being able to really understand complex issues in a way that's Much faster than console logging, console log driven development. Just

the header type of a server that is returning data to you rid changed, and your your program is saying, oh,

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, We have another point here, which is consider outside sources.

I was expecting text to come back, but now it's formatted as JSON or or or something weird like that

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, and how to isolate issues exactly like what we were talking about. So, But there's also exceedingly

the error happened where there was a a minor bump.

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?

Rid. It had not been locked a 100% to, 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 rid Then it's in that commented code. If it doesn't, 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.

And the way you can do that is you can just delete 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, And to when I deployed the thing and NPM installed on the remote

like, SemVerb by default when you end up with a sauce sign, it will just lock it to major versions.

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.

So lock in that rate because

the lowest price that you'll be able to get level up tutorials at forever.

rid

Rid.

some updates to Keystone 6 for that one.

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

if you head to leveluptutorials.com

MasterCatsby,

Every course I have will be half off,

this price Except for Black Friday. So that includes And,

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 Why in this situation it is broken?

So rid. Level up tutorials will be doing a big time Black Friday sale this year and possibly

That will get you and,

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.

so grab the ones that you want. This also includes,

The 24th.

Free updates. So

and HTML coding practices as well. We have something for everyone here. So check it out at level up rid 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

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? a code gen plug in that I wrote for important things like Black Friday are for small businesses like yours and I and and how,

I am currently,

like, James Quick did a course for us. Colby Fayock did a course, Brian Douglas.

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, with the people who 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.

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,

half off every course. Don't miss it. Yeah. Hey. Actually, I wanna say maybe before this episode ends,

not yet been Thanksgiving at the time you're listening to this, Ed. When is this one being released 24th.

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.

beginner JavaScript, full stack advanced React and GraphQL, to track all my expenses, IQ. You know how there's all these different, like, standards for charging something?

I just updated the testing version of full stack advanced React and GraphQL, rid. And I'm also going to be rolling out,

PS 6 for everybody, React for beginners, learn Node.

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 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,

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 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,

can't you, like, figure this out?

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, HST and taxes.

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 can bring a problem to somebody, fix.

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,

rid blur their eyes and stop looking at it when they see that big thing p especially, didn't think of that at all, or oh, rid. Yeah. Okay.

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, 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

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.

something? How do you when something goes wrong,

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

We we called, like, one of these, like, 1800

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

Then it's not. Then the whole thing is is broken.

where the actual issue is. So if you can rip all that stuff out, then,

couple months ago.

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

Take as much of the other stuff out of the equation as you possibly can. So rid. Authentication, developer land as, oh, rid issue,

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, why can't there be one of these platforms that gives me all of the professional features but

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

component

You have a comment here. It says commenting out code is free, Alright. How do you troubleshoot

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

You have your routes. You have your your header, your your footer, all that stuff. Just comment out everything except for the single where you don't always get that opportunity. So check it out at log rocket.comforward/syntax.

middleware, other functions. If you've got all this stuff

To provide as much helpful, Mac and Linux? Mhmm. And the the thing was well, the literally, the npm package

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.

These authors are often maintaining and creating these things,

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

how would I ever have figured that out from what the error was saying or or what the you know? Yeah.

And, once I I I just created a brand new Sveltekit 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,

So being able to share those reproductions

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.

site that has absolutely nothing going on with it, I made 1 GraphQL is this file that I'm working on actually being loaded?

To solve this problem. And it's like,

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,

it led me to an issue where somebody had a personal SaaS plug in issue, and it was the same issue.

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

shoot.

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, 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,

Something of undefined is is not found. And then It's like really generic.

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 Rid. Cool. Alright. Let's get into the next section.

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, 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 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

taking the time to read it closely,

Well,

probably because your thing is undefined and you're trying to read a property of it.

and know that that is 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.

Whether or not it's explicitly

why is it giving me this error?

understanding what you're reading,

the message that you're reading and and understanding

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

being completely clueless about where to go to solve an error 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,

I came back on Monday morning, and and it was fixed, which is beautiful.

Rid.

So, 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,

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

without

our GitHub issue that had some other issue for SaaS. And, like, between those three things, 2 hours in, and you got a bag full of screws and random things, and you just 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

rid was enough information to sort of pinpoint the actual issue, and then

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? 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

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, 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 is the thing I am single most guilty of because

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, and it was a matter of just adding, like, one 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, 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.

folks To release an update, which they did eventually, 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, or should be a commonplace issue and no one else is talking about it,

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

I've used patch package,

is to take a step back and say, like,

admin tutorials instead of admin tutorial.

Totally. It just

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

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.

Is this the right file? Is this the right project? Is the project even being run? Like those big questions that we oftentimes like,

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.

And the sanity check here shout it out to Wes Bos courses. Shout out to level up tutorials.

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.

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

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

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, 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.

and store them in a database, 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.

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.

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 Obfuscation, Or did an external API change? So, rid. Are you pinging something and the data is changing? It could be as simple as 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, 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 we used to own, like, a rental property, and

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.

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?

horizontally? Canadian. I think it's, like, 159 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 rid so that I could do this, which is tell you about it.

Mhmm. Like, what is causing that? Just comment out half the code. If it goes away,

then it's in the uncommented code. So comment out, at night and think, like, man, I would love, 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, 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

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 It's awesome. So check it out. Freshbooks.comforward/syntax.

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.

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

technical than than this show is gonna be, and this is gonna be just on, like, the rid Skill of troubleshooting.

and that is a question that we got from, let's rid. See who

debugging, rid. Lock it to a version, but you have to be a little bit more diligent with actually upgrading your versions then.

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 JavaScript session replay, and mux video hosting rid. Transcoding on the fly. We'll talk about all of them partway through the episode.

was

which was more the tilde and the little caret in your node modules folder, and that will, 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.

omnipresent 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,

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 why

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

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, 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,

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.

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 If you use the word fetch here you're you're starting to work on something. You're Trying to modify something 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, you you're thinking it's doing a thing. And does exactly that. No more worrying about Transcoding. No more worrying about video formats. No more worrying about storage. Like, metrics. Test log metrics. All that those words are just increase your visibility into 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

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

Rid Oh, I'm doing good.

this weekend and just trying to make the house feel a little bit more homey

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,

How are you doing today, mister Scott Talinski?

You know, it's just moving in with kids. Moving with kids has been very tough during the pandemic Right. Right. Are you refreshing production?

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.

rid. Over a third of my life,

to do reporting accounting at the end of the year quarterly when I need to, rid remit all my,

For a website in FreshBooks. And I was like, it's kinda neat that I'd be able 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.

to rid. Track my time when I was doing freelance, And I was just like, these guys that

Sick.

I'm I'm able to look at my career progress

Which is always really funny to me. And I I actually went back in my, a couple days ago, I sent FreshBooks an invoice for this own podcast via FreshBooks, either just a cord that you can plug into the wall or Literally like, whatever. Or a lot of them are snarky, like, shoulda used view instead. Rid.

If you want to help support some indie developers making content, head on over to,

Yeah. Mine will be as well. I the thing with Black Friday is that

for a full archive of all of our shows,

because 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,

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, to a 2.0.1,

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.

And don't forget to subscribe in your podcast player

Head on over to syntax.fm 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 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,

It usually starts much earlier and runs past Black Friday into Cyber Monday, I hope to find another one one day. It's a very West Boss thing to

You know, that can, you know, greatly help us for the rest of the year. So, Yeah. Especially in a component based workflow. Right? We have all these components.

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, in my FreshBooks, and I was like, I've been telling people I've been using FreshBooks for US. So if you were even buying one new 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,

dumped out. But Rid I find that really hard to walk away from an issue, but that is when I was just walking around having a shower, took a took a little break.

make the the

code that would highlight the file names of those call stacks because I know most developers

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 so it means you can plug in 2 MacBook Pros charging at a 100 watts I have been using FreshBooks to to send invoices,

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 Simply moving it to a new environment can be the thing that says, alright. It's not this specific environment that's the problem.

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, Jimbo Moso over 12 years. That's

And, like,

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.

Welcome to Syntax, the best podcast in the world.

Rid. Love it.

them. Anyways,

LogRocket, You chuck it in the f it bucket, and you're 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

I I spent time balling my kids socks and selling of toys as when Alexa is talking is just production machine,