Dev Tools Tabs Explained — Plus Tips & Tricks

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

Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Today, re We're gonna do a show that we've talked about doing for quite a while. It's dev tools tabs.

We're gonna explain what they do as well as some tips and tricks in each of the tabs. So rid We're not gonna go into, like, the inspector tab. I think a lot of people know about that. And we actually said we'll probably do an entire show just on the inspector tab alone because there's so much to rid to sort of learn there. But we are gonna go into all the rest of the tabs and tell you all about what they do and and how they can get you out of a pickle and whatnot. Rid. Today, we are sponsored by 3 awesome companies, Vonage, which does APIs for video communication messaging in your app, rid FreshBooks, cloud accounting, Sentry, error exception, and performance tracking. Talk about them partway through the episode.

How you doing today, Scott? Hey. I'm doing good.

Doing very good. Just feeling we got we had a a literal blizzard. I can't believe how much snow you got. We got a couple feet of snow in, like, 24 hours, and it's the only time I've ever gotten, like, a a blizzard warning on my phone. And, it was shut down. I mean, stuff was all all it was white out, and, we built a couple of runs for sleds, and the kids rid went sledding. That's super fun. But yesterday, it was, like, 60 and sunny. So even though you saw us sledding out there, I was out there in a t shirt Just like the kids were all bundled up, but I was out there in a T shirt catching some sun. Sixty Fahrenheit is 15 and a half Celsius. That's very warm. It's very warm. So all that snow out there was, like, pretty slick, and we're get getting some some serious cruising going on in the sleds.

That's awesome. I actually we went to our cottage this weekend. And even though all the snow has melted here at our cottage, there's lots of snow.

It melts every day and then freezes at night, and we were so you go wicked fast on the sled because it's basically ice. Yeah. Rid and then my poor little boy, we were ripping, and he face planted and had just all kinds of tiny little cuts on his face. Rid Just ice. Oh. You see, it was fine, but, like Oh, yeah. Kid stuff. Sucks. Yeah. Totally.

Totally. Dude, on the on the code front, I got some serious perf gains, and I said after we did that n plus one episode on, GraphQL, I decided to go down the rabbit hole and really explore mine a little bit better. And, you know, we talked about this is just a kind of an unrelated update here, but we had talked a lot about loaders in, DataLoader.

Well, turns out our API, which is built with Mercurius, it's, like, just a node GraphQL server, has a built in concept called loaders, Which is separate from DataLoader, which basically does the same thing. It acts as a resolver, but it only fires once rather than, You know, 80 times. Like, if you have 80 records, a 80 nodes being returned, it fires once for those 80 nodes. Then you can do the logic and it rid before any sort of resolver and caches it. So it basically takes all of the difficult parts of, data loader and stuff out of there, and Holy cow. My application level up tutorials got a major glow up in the, perf. I think rid Some of our heaviest routes were 90% faster.

Wow. We cut out 90% of the load times some from all of our slowest routes. Rid. Insane stuff, and all all it is using Mercurius loaders and a little bit of caching. And then there's still even gains to be had, but, like, I mean,

rid. I'm feeling very happy about that. Awesome. Alright. Let's get into it. We've got the 1st tab, which is I'm gonna say is the best Tab. Aside from

console and inspector I happen to say it's the best tab. I have a different best tab. What's your best tab? Let's hear it first. Best tab for me is network. Well, that's what I said. Network is my best tab as well. Oh, I thought you were talking about the 1st tab in the order of them in dev tools, not in our notes. Oh, no. No. We're we're gonna go through re We'll go through,

them just in in a random order, but I'm gonna say probably the best tab, like, that you have here is the network tab, which allows you to rid See every single request that your application is making. You can see them by type. You can filter them.

You can understand all of the requests that are coming and going. So if you just leave the network tab open and you click around an application, You're able to see what is that application doing to pull down data as well as you can see what it's using to push off data, and that's often helpful that you can see, like, oh, what rid. What analytics is this app tracking? You can usually see that because you click on something or you hover over something, and you'll see a little network request where it'll Push off some data being like, this person hovered over pizza.

Send this to Facebook directly, and now they will start showing them ads for for that type of thing.

Probably one of the biggest handy ones is turning off caching. So if you have your dev tools open I have the

Checkbox of turn the cache off when dev tools are open. Do you have that on as well? Where is that? Because I feel like I always I just check it once, and then it it just rest stays there. Yeah. If you

have the network tab open so I wish it's also say, like, I'm using Firefox here. I've used Chrome for a lot of my life, but I've been on Firefox for probably almost a year and a half, 2 years. And in Firefox, there's a little tab that says disable cache. And when that is open rid And you reload the page, it will bypass the cache entirely and give you that that's really helpful for debugging as well as seeing the real rid The real time. I almost always have caching disabled. Yeah. Me too. Yeah. When you're in development, you don't want that stuff. And and, specifically,

you know, I'll leave it on In any of my production sites, but any of my development environments, no matter what it is, I'll shut it off because you want a true true vision of of what's going on. Yeah. We should also say when you visit a website

for the 1st time after you've deployed it, close your dev tools down because rid. A lot of times, you'll get, like, a cache CSS file from the last time. And if you made any major updates to that CSS, then you need to bust that somehow. You can't rid. Assume that your users will have dev tools open and and and change it. So the easiest way to bust the cache is you just put question mark v equals 10.

Rid Most bundlers these days, if you're using, like, a webpack or parcel or anything, they'll put, like, a hash in the, the name of this rid the file so that it is literally a different file. Yeah. And, in fact, if you pop open your network tab and you load up your files, you're using any of these things, what you will see under the name of

Specifically is a unique identifier for that file so that it is going to be pulled as a unique file rather than a cached file each time you upload a new version.

Re Another cool thing, just about this tab in general, it gives you such a good overview of the load time performance of your your site where You can see really quickly and easily. Alright. The DOM content has loaded in how many seconds? The overall load is how many seconds? How many resources have been transferred? How many resources even exist, ones that aren't cached? You can see it all in the waterfall, it's called, where it goes it shows you each re Request 1 after the next so you could sort of see exactly how long each request took. So this is a great tab for understanding the actual real world Requests performance of your application is something that is really critical the more and more you get into debugging performance, load times, speed, all those things.

I also use it a lot to see what the gzip size of my assets are. So if if you're not familiar, gzip is re Turned on by most servers by default and most, I would say, all browsers can use GZIP. And the idea is is that if you're transferring rid Some piece of text multiple times, like the let's say you have the word Scott in your website 40 times. It's not gonna transfer the word Scott 40 times. It's gonna transfer this the word Scott once. Mhmm. And then it will link back to that Scott every single time. And that's a rid. Significant savings a lot of time for things like CSS selectors or JSON objects or things like that because, like, I'm just looking right here at an app I'm working on to ship my t shirts, and I queried 1600 orders. And each order has, Like, I don't know, 30 or 40 properties in that object.

And that ended up being 10 megs of JSON data being returned.

But Because I had GZIP turned on, it was really only 700 k Mhmm. Which, like, in in reality, you should not be transferring either of those amounts. Rid. Those are both way too big. It's fine because it's internal tool, and I understand that it will take a second or 2 to load. But, like, the what? It's, like, rid. Fifteen times smaller with g Zip turned on. That's really good. And if you see in your bottom left hand corner of your network tab, re It will say how much was transferred and then a forward slash of another amount, and you might be looking at it. Be like, why is there 2 values? The larger value is the rid Actual amount of data that is in your browser, and the smaller amount is what that was actually transferred over the wire. And you need to be looking at the over the wire value rid In most cases, because you're concerned about that that speed. Yeah. That is what your users are experiencing. Right? Rid Now another cool thing along with that is the ability to throttle your network.

Many times, especially now, everybody's getting access to faster Internet, but not Everybody.

Right? Sometimes it feels like everybody is. I'm on I'm on a fiber Internet. Right? But Wes has the the joy of having a, like, I don't know what you you would call it, your own network tower that you've assembled yourself that collects and distributes, streams to other people. No. But, like, A lot of people are on slow connections Yeah. Even phone connections, and it could be really easy to lose track of that, especially if you're the type who works in an agency or someplace that's wired up fancy business Internet.

So it's always going to be important even if you're seeing that the the resources transferred and stuff are rid are fairly small. It's always gonna be important to check your applications with throttling the network to different speeds. And so just next to, in Chrome, the preserve log, disable cache, In Chrome, there is a, drop down. I you might have to tell me where it is in Firefox because I haven't used that. But there's presets for a fast rid Three g, a slow three g, or even an offline mode so you can see how your site loads offline, if at all, and you can add custom ones So that you can set up specific speeds to see. Alright. I know my users are primarily using this site with their phones. Maybe they're on a a three g network, Four g network. Let me see how the site actually feels in real world usage by throttling that connection. It can be very, very useful. Rid Another really handy thing I use to debug

network requests as well as to use unofficial APIs. So rid. Unofficial API is when a service like, I'll give you an example. The we're working on transcripts for syntax. Rid.

And in order to automate it, I was like, oh, use the API for this thing called Otter dot ai. And I contacted them, like, we don't have an API. And I was like, well, yeah, you do. But You don't have an officially supported one, which I understand.

So what you can do is you could just go to the website And, like, click on something like transcripts, and then view in the network tab what pops up. And you can usually find the API endpoint ready for that there. And then what you can do is you right click and copy as fetch or copy as curl. Copy as fetch is probably the most common one that you would use. I use curl a lot as well just to make sure that it works outside the browser as well. And then that will give you all of the headers, rid There's all of the cookies, everything that needs to be sent along with a specific request. But, usually, the way that I do it is I just delete all the stuff That looks like it's not necessary until it stops working, and then you back it up from there. So that's that's really handy to be able to see and copy,

Items as well. Yeah. I've been especially using, this next feature, which is so you have your big list of all your requests.

And A lot of the times, what you wanna see is the the request, the response, the headers, all those things that go along with your request. Rid I primarily am using this in the XHR. If you click XHR to filter, it's gonna show, like, the XHR request that your sites have made. These are typically like any API calls you're making. You're fetching data from somewhere. You're not pulling in an asset.

And so if I'm gonna hit my API and I wanna see what was sent, what was received let let's say I'm using a Graph re QL API. I wanna see the data exactly as it's returned from the server to confirm that the data is in fact coming back. Let's say if there's rid Caching issue or something on the front end. I'm not quite sure if the data's coming back. What you'll do is you'll head into the network. You'll Click the XHR, then you'll find your query. You'll look for it. You can click your query, and then you get access to a ton of information about this, Including every single, request header that went along with it, the response headers.

If you are setting cookies on the server via HTTP only cookies, The request cookies show up there as terms of, like, what was sent or received.

If you received cookies, it will have them as Reply cookies or I'm sorry. What what do they call them here? Response? It's so funny. Mercurius and Fastify call the response the reply.

So Okay. I'm so I've I've I've been saying reply for so long. I've forgotten what it is. It's response.

It's funny. There's the the response tab here gives you just a straight up string of the response. But if you click preview and it's coming back as JSON, you get a JavaScript object you can open up and and really tweak on about. Re You can copy the object, store the object as a variable, collapse children, expand recursively. So you can really get quite a bit rid of interactivity amongst all of the data here, and you can see exactly what's being returned.

It's re Incredibly helpful all the time to pop into any of these queries.

Well, besides the fact that it saved me a ton of headache Trying to figure out where the data is coming from, if it's correct or whatever, it's actually made me much better at understanding requests. Because when you see All of the properties here listed, all of the headers, all of the the things here involved in a request. What you do is you start to understand a little bit better, just how the overall HTTP request flow goes. Right? These are the things that we use every day. Every website is using their request, and many developers don't even think They just think, I gotta get image. Here comes the image. Right? But here, it it shows you exactly

everything that's going along with that. Rid. That's such a good point that you can, like, see exactly what is being sent and what is being returned in order to replicate a request. Because a lot of times you hear people like, Oh, it works in the browser, but it doesn't work when I run it in my node console. I'm like, well, you're you probably don't have something going along for the ride. And, usually, that's, like, rid A session ID or a,

what is it? A a nonce? No. I say nonce nonce. I that's why I have no idea what it's actually pronounce what your how you're supposed to pronounce rid. Yeah. It's it's a, basically, a token so that something will happen once.

That's really key so you don't accidentally Run the same request more than once. Like, you click on something, and it fires off the request, but the button doesn't update. So you click on it again. Yeah.

And before you know it, you've bought Sixteen boxes of cookies when you only meant to buy 1.

Oh, that's not a problem.

I was working on a cloud, What is it? Cloudflare image caching worklet? Basically, what do you call it? Worker. So Cloudflare Workers rid. Has an API to cache images and serve them up. And I wanted to know if it was working or not. So you can just click on Go to network, filter for images, click on the actual image itself, and then it'll say response headers, and it's a c f cache status Hit. So it'll it will either say hit or miss depending on if it's been cached or not, and that's just a really good way to know if it's been working because, Otherwise, you have no, like, insight into that type of thing. Totally.

Yeah. You know, one of the things that I I briefly mentioned Was that you can filter really easily, and I use this all the time. You have a a a search box as well as, like, button filters.

And if you wanted to see specifically all of your GraphQL fill queries, you could just type in GraphQL in the search bar, And that just filters them all. It gives you bright and easy to see. I basically leave XHR checked pretty much constantly because that's the one I use the most For any more outgoing, data requests or things like that, you know, a really, really neat thing is if you ever use WebSockets. WebSockets can feel very rid Gary, sometimes when the data's coming in, and if you filter by WebSockets, there'll be a WebSocket. And if you click on that, it'll show you all of the pings rid And with the information gone and and coming back. So there there's a ton of in useful information guide being able to filter and find the specific request types.

Last one I'll say here is it tells you when an asset is blocked because of an extension.

So I was working the other day on integrating rid. Some Instagram photos into a website, and I was like, why is this not working? Like, they're they're not showing up at all.

And If I inspect them, I can see the sources there. And then if I copy paste the URL and go directly to it, it works. So, like, why is this not working? And then, rid. Finally, I went to the network tab, filtered for images, and it says blocked by Facebook tab. It was because I I run a Facebook blocker on Firefox, And I did I forgot that oh, yeah. Instagram is part of Facebook, and, we don't want those things in our website. So I ended up just proxying them through a Image resizing service, which is great because then it also it keeps Facebook's

greedy little fingers out of your website. But, Wes Wes, did you see the statement rid. People really want to be targeted. They they had a statement that was like, people really wanna be targeted.

They wanna know what they they they wanna be sold stuff. Don't don't you do that yet? Oh, yeah. Oh, yeah. I'm sure I'm sure of that.

Along the same lines as the with the extensions, it'll show you all the requests made by extensions. Rid. And we talked a little bit about this in the authorization episode where if you're sending, you know, a cookie or an authentication token along read.

To something that's not your server, it will show that in here because it's going to show the requests and responses that are made from rid. A browser extension, it'll show you what's being sent along with that.

So that's an, a neat little thing is you can see what your extensions are doing, on your page,

whether or not you can understand what they're doing, you can still see it. Oh, my last little tip here. We said we try to give tips for each of them, and this has kinda been all tips. Rid. But my last little tip here is part of Firefox is if you have a a request that is blocked or unhandled re or something like that, and it's part of a request. You can click on it, and it will inline the request and response inside of the Dev tools, which is super cool. You know how, like, in Versus Code, you can kinda, like, peek an issue, and it will just pop it right down inside of there? Mhmm. Firefox is doing that in in the dev tools as well, which is really, really nice. You know what? I was wondering the other day. This is kind of an aside, but I was I was thinking, like, how awesome Versus Code is. Yeah. I I was like, at what point? And they kinda are already doing this. But at what point is Microsoft Edge gonna roll out, like, really tight integration with Versus Code? And then we're all gonna start using Edge Edge because of the sick integrations.

I think that the The future of that seems very, very, very sure. I I think that is going to happen. Right? They've been definitely moving in that direction.

We we were talking a little bit about communications here. We've been communicating Yeah. Communicating with servers and browsers in the network tab. Well, There's another one of our sponsors today that also deals quite a bit with different types of communication. I'm talking about Vonage. Wes, you wanna talk about Vonage? Rid. Yes. Vonage is a cloud communications

platform that allows developers to integrate voice, video, messaging, all kinds of really cool rid into your application using their communication API. So if you're building an app and you need video or voice talking, SMS to sent to the customer conversation.

You want to have a little chat, something like that.

Those things are often much more involved rid And require a lot of especially when you're, like, sending text messages and stuff like that that can be abused. Those things are very much more involved. Like, we did an entire re episode on using WebRTC. And we learned that in a large portion of the cases, if both of your users are behind a Network, you can't actually do peer to peer. You need a firewall. If both people are behind a firewall, you can't do peer to peer. You have to do peer to somebody in the middle and then to the other ready. And Vonage gives you that for WebRTC. They give you all kinds of really cool stuff. So if you are building something in your application, you need messaging, voice, video, chat, re Insights, authentication, all that good stuff. Check it out. They're suite of tools for your app at Vonage dot devforward/ syntax, and make sure you use the coupon syntax ten for €10

of free credit. Ready. Thanks so much to Vonage for sponsoring. Nice. Sweet of sweet tools. Alright. Let's talk about the memory tab next. Now the memory tab, this is not one I use that often. This is maybe one of my least used tabs, specifically because rid. I don't think that most developers, unless you're really getting into perf heaviness of things, are going to are going to be able to necessarily understand what exists here. Yeah. If you have an issue with your application,

I ready. I think the reason why most people don't use this application is even if you code something that has a memory leak, a memory leak is, maybe we should explain how that works. If you code something in in JavaScript and you no longer have access rid to that object. Like, mostly you make an object that has the name Scott, the age of a 100 on it, a list of his dogs, and things like that. Rid. You create that in, like, a function, and that function is done. Usually, your browser does something called garbage collection, meaning they say, okay. There's no more references to the Scott object Anywhere in the application that are are accessible, we'll just delete it. Right? We'll just clean it up. And rid In most cases, that works pretty well. There are little situations you can get into, and I don't even know what are some examples off the top of my head. But where you rid Accidentally create a situation where you're storing data in memory that's no longer accessible. And then maybe you're doing that a lot, and you can you can start You have what's called a memory leak. And that's where if you leave a tab running for however long and you come back and say, oh my gosh, Chrome's eating all my memory. It's rid. Sometimes that's because that actual application is has a memory leak in it. And the reason I think most developers don't use this tab is because Websites are not long standing in a lot of cases. Right? Mhmm. But with the advent of, a lot of these desktop rid. Applications that are built in HTML, CSS, and JavaScript.

These things are long running. You you might have your email tab open for rid. 3 weeks at a time, and that's that's very important to catch any potential memory leaks in there. So memory will allow you to and specifically in the Firefox one myself.

You can take a look into you can take a snapshot, and it will tell you what is actually taking up memory.

So I just went to tweetdeck.com, and I took a snapshot.

I'm using 70 megs of memory.

Four of those megs are used by strings.

Mhmm. Rid. 32 of those mags are used by actual JavaScripts that are loaded on the page. Twelve of those mags are used by objects rid. That contains data and arrays and things like that. And this will allow you to just peer into, okay, what is taking up all of the memory in my application. And then that will give you a bit more of a zoom in. I would like to talk to somebody at some point who actually uses this a lot more than myself. Like I said, we we haven't really run into this

specific issue ourselves before. I would be very psyched to have somebody sit down with me and be like, alright.

Here's the type of issues that we're trying to solve with this tab, and here are the best ways to do it. Oh, I just thought of a I did have a actual

Problem with this on years ago on my course player. Mhmm. Every time you loaded a new video, it would remount the video player, and part of the video player would be to use an external JavaScript API where it would create a Vimeo instance.

And what was happening is if you watch rid Sixty videos straight.

Every single video would create a new instance of this thing.

So I I forget if I use the memory or if I just sort of, like, oh, that's probably what it is. Performance tab? Yeah. Something like that. Performance tab is pretty good for that too. Rid. Oh, is it? Yeah. So you'd be able to tell. So so what I did was I I ended up just making the instance shareable Between re renders of this thing and not making a new external API instance for Vimeo.

That's something that you'd be able to see. Like, oh, we're we're to have Six instances of this thing where it's taking out much more than every single time I click next video, this thing grows a little bit. You'd be able to see that. Yeah. Otherwise, you can also clean up that, rid And instead of floating it up, you could always clean up that instance and remove it, detach it, whatever. Yeah. On like, that's your unmount. Right? Like, if If you can't share them amongst multiple instances of it, you just when the thing unmounts on your useEffect, when the unmount happens, you'd

Properly delete it. Yeah. Sometimes people, they see that like cleanup in useEffect in React, and, like, I don't know, and I would use cleanup for it. But that's explicitly why, something like that. Okay. So the next tab that we're gonna be talking about is the one I just kind of alluded to, which is the performance tab. Now for the performance tab, it doesn't give you anything by default. So what you have to do is click that little record button, which is in the top left, and it's going to turn on a red little record lamp, and then you're going to interact with your sites. You're rid. Click around. You're gonna do whatever you want. And when you want to stop profiling it, you're going to click stop.

Now when you stop Profiling it. What it's going to do is it's going to load up a bunch of information about how the the JavaScript actually function on your site, And it's gonna look kind of crazy. It might definitely look a little bit crazy to the untrained eye. You'll see a few things. If you have screenshots turned on, you'll see a tab of screenshots.

You will see a frames where you can determine the individual frames, whether you're getting 60 FPS, for instance. I see this Idle frames where I'm not doing anything. So it's gonna say, idle frame. Hey. You're not doing anything. But then this thing happens, and I have a singular frame. It goes anywhere between rid 50 to 70 FPS.

FPS stands for frames per second, and typically, you're gonna wanna keep your animations as high as possible to that degree, So you want them to be high. You know, if you had, like, a 10 FPS animation, it's gonna look really, really janky.

In addition, there's this whole main area where you have a rid Flame chart. Now flame charts are pretty scary for those of you who are new to them. Yeah. How do you read those? I've always looked at them and been like, rid That seems complicated. So the further down you get so you can you could think of the top top row because it's in rows of horizontal bars. The top row is the initial function.

Right? And then the next row down is a function or something that was called from that Previous function. So each row that you go down, you could think of it as like a function that calls a function that calls a function that calls a function. So if you have a really long bar somewhere in your site, you have a really long bar. It's the longest one. That's that's how long that's taking to For instance, I have one that's taking here a 188 milliseconds.

And I look at it. I can. If you use your trackpad and and swipe up, it zooms in. And the further down you get, you can see how this function is being broken off into other functions. So if you have 1 long function here and then just below that, it's made up of 2 separate bars, well, now you know that Those 2 separate bars are what's taking up the time. Maybe you find the biggest one of those and keep going down. So the further you go down and down and down and down, The further you see a function that's called a function, that's called a function. That's called a function until infinity until the that chain ends, and then that bar ends and it goes back up to the next one. So what this is really helpful in identifying is really long execution of specific functions. And the way you wanna look for things in here Are ones that go excessively wide because wide is the length of execution and then excessively down or maybe perhaps For something further down that's really wide. If you keep going down and it keeps getting skinnier and skinnier, that's probably it just doing things. But if you go further Further down and there's a really big wide one at the bottom or something, you kinda know that there's something up with that. But the cool thing here is if you I'm I'm in a production rich. On mine where downside, I'm not getting a ton of useful information, but it tells you all the functions and you can click on them and it tells you how long it took to access it and where it was called from.

Re Here's a really long function that took a 133 milliseconds for me, and then I click on it. It tells me that it's being re from video min dot j s. So I know, hey. That's not something in my application that that's, like, the video player probably initializing or something like that That, well, it might even be a good opportunity to identify things like what you said. If the video is initializing on every single page load, Well, then maybe if you initialize it once, then that would save you that bit of milliseconds every single page load rather than rid Just, you know, as as you're seeing in here as it fires. So it's it's really good for debugging JavaScript and how long JavaScript takes to execute.

Next one we have here is console.

The console is your interface for your JavaScript runtime. It shows you errors, warnings, logs For either your page instance as well as all iframes on that page or for your note instance if you're using the dash dash inspect flag, rid Which is really handy.

So this is the one that you can you can see the window as well. So you can just, like, run arbitrary JavaScript Inside of that, which is really, really handy, let's just kinda go through a couple tips that we have for working in the console. My read. My one of my biggest tips that I have is, if you wanna negate noisy warnings or errors in the Chrome DevTools, re You can use the filter output box that we have very similar to the network tab one. But if you put a minus in front of the value, it will filter those things out. Rid. So I don't know how many times you've gotten errors from, like, a React plug in or from anything like this where it's like, this will be deprecated or please use unsafe ready. Component will mount or HMR hot reloading didn't work for some reason, and you just get all this, like, puke in your console. If you wanna filter those out, you put a minus in front of the word, and it will filter those out. In Firefox, you can only use 1, which sucks. Rid Chrome, you can use as many as you want, so you just use commas one after another.

I have not used it very much. I pretty much like rid If if I'm logging a bunch of stuff to my console, I'm just, like, using it like a caveman, essentially, just just dealing with it. And if there are warnings in there, I'm usually just doing my best to pretend that they're not there. I'm just, oh, I don't know. There's there's warnings. Who know? Who knows what they're rid Yeah. Sometimes there's ones that you just you just can't get rid of or, like, it's like, a long time ago,

like, Lastpasses, The Chrome extension would throw an an a warning on every single page load on every single thing. No. Thank you. And, like, LastPass, rid The awful company they are, they just did not care about that. And it was so frustrating because it would show up in in every single one. And finally, I was able to just Put a minus like LastPass or whatever, and it would it would go away. Do you use the sidebar at all?

I've never used the sidebar. In fact, just simply by just exploring everything in here as we're talking about it. I I found that little sidebar

link rid That has the no messages, no errors, those types of things. Do you use that? Oh, yeah. What that's for is it allows you to filter for just for warnings or just for errors or just for logs.

And that can be helpful as well if you have a lot of stuff in there and you wanna log out the you you don't wanna see console logs. You only wanna see rid Errors or warnings? In Firefox, they are not a sidebar.

They are they're just buttons that you can click in the top right hand corner to filter for them. And I use them quite a bit. I turn off warnings by default because, like, little things like I'm just I'm just turning on warnings on some random website right now, and it's telling me Some cookies are misused. Recommend same site attribute.

Loading script failed for Google Tag Manager. Loading script rid Failed for connect at Facebook. I'm like, I know all of those things.

Those are all the because I've blocked them using Chrome extensions

rid Or Firefox extensions. There's also this expressions, create live expressions that, like, executes the code as you type it in here. Rid. I have also not used that. It seems like there's quite a bit of opportunity here for some neat things. Where is that create live expression? It's the eyeball, which doesn't make sense that it's an eyeball. This is in Chrome.

I see it. Well, what do you what does it do? Well, if you type some JavaScript in here, it, like, executes it as you're typing it. Rid Why? I don't know, but it exists. Isn't it weird? What I really like oh, yeah. That is weird. I don't it's just like a constantly updating Yeah. That function. I just I just tried to make a variable called x, and it says x has already been declared because it it runs constantly. Yeah. That could be handy as well if you're trying to track something, And it probably just reruns it every however many milliseconds.

It's kind of piqued my interest a little bit only because I've never seen it before. And I I I just clicked the I because I figured the I was just another filter thing. It's kind of like a weird icon for it. So I've never seen this before. Shout us out if you're using the live expressions for anything rid Specifically

or interesting because I'd be I'd be interested in knowing what some cool use cases would be for that. You know what would be kinda cool is if you were, like you use, like, dot text rid Content of a node and that you could be watching that thing as it changes maybe. Yeah. That would be cool. 1 I use in Firefox a lot is read. It will preview the values when your map filter reducing something.

So if you have, an object you're mapping over, read. As you're typing the map, it will preview it on the 2nd line underneath as to what you would be returned.

And then that just saves you a whole Hitting enter, looking at the value, pressing up arrow, typing it again, hitting enter because the live preview is is really, really handy. Yeah. Totally.

Rid. Here's a tip. I think a lot of people know about this, but it's always a a a big fan. Use dollar 0 to select the current element in your inspector tab. So if you selected on a a table or a paragraph tag or anything and you want to use that one, just type dollar 0 and it will give you the element. And then you can say Things like dollar 0 dot query selector or dollar 0 dot text content. You can use any of your JavaScript APIs. And I use that quite a bit when I want to, like, find something on a page or loop over a rows and tables, and you wanna you only wanna do it inside of a specific element, and there's no class on that thing so you could select it. And that goes all the way up to, I think, 10. So dollar one will give you the 2nd last element that you clicked. Dollar The 2 will give you the 3rd last element that you clicked. So, like, if you need a couple elements to be in handy little variables, Just go to your inspector tab, click on a couple elements, and then go to your console and type dollar 0, dollar 1, and dollar 2, and it will tell you

What those the last elements you were are clicked. And if you want to have this be maybe a little bit More, more crystal clear maybe, I guess, is the bit would better way to say that. You can right click on any of your elements and click Store as a global variable, and it will output that variable name as a, like, a constant variable, whether that is, like, temp one. So if I store something as a variable, it says temp one, and then you can say temp 1 dot value of or something. Who knows what? You know what I use that for a lot is if you console log a response

from an API, And then you're like, oh, I wanna just, like, loop over that really quickly. You can click on the console logged object and also store those as global variables.

Re Super, super handy.

We also have dollar dollar and dollar, which is a shortcut for query selector all. Ready. So instead of typing document dot query selector all, just type dollar dollar, and that is a shortcut. If jQuery is not on the page, it will do that. One other thing it does is it also turns it into a true array. So if you wanna map, filter, reduce a list of DOM nodes, You can just do that. You don't have to wrap it in a array dot from. And same thing with dollar is just query selector.

I did not know that. Rid I've not used that before. Oh, man. Super, super handy. Just go to any website,

type in dollar dollar parenthesis quote p, and that will give you ready. An array, not in a node list, but it will give you a proper array of elements, which is super handy. Proper array.

Cool. Yeah. This is neat. I don't know why I didn't know that. It feels like jQuery. It feels cool. Yeah. It's there's also, like, I've in a couple of my courses, I've used Bling dotjs, which gives you the same functionality, but just in vanilla JavaScript. Interesting.

Re Very cool. Let's take a little break to quickly talk about something that's probably on a lot of our minds right now and involved with tax time. Although, maybe by the time you're hearing this, hopefully, rid on your mind. And our sponsors today is FreshBooks. Wes, you use FreshBooks. I know you just did the last one, but would you like to do another one? Yeah. Rid FreshBooks is a cloud accounting. It's a crowd

favorite, with an intuitive dashboard that's easy to navigate. Over 3,000 business owners rid I've rated it an average of 4 and a half stars on GetApp, which is amazing. I would give it 5 stars. I will give it 6 if I could. Yep.

Join over 24,000,000 people that are using FreshBooks and who have used it, who who say they love it. It's super easy to get up and running. It's rid. Award winning support. I've talked about that before. I've called them a couple times myself and got they pick up. It's a real human. There's no rid. There's just a real person on the phone right away when you call them, which is amazing. So get FreshBooks for free for 30 days. No credit card required. Go to FreshBooks red. .Com/ syntax and enter syntax in the how did you hear about a section.

Start. Think about what you're going to be doing with those extra forty rid 6 hours a month. That's that's one thing that they say is that some of their users are saving up to 46 hours a month.

Things like invoicing and chasing late payments, and that stuff eeks into it. I imagine, like, like, a quarter of your time working was just spent on Busy work like that that's not actually furthering your business. Use something better. FreshBooks. Thanks so much to FreshBooks for sponsoring. Oh, man. Was that their, slogan, or did you come up with that? Are we turning it into slogan, boys?

Use something better. I just slogan ed it. Use something better. Use Fresh rid Yeah. You said something better. I like it. Cool. Well, the next one is gonna be one that I've been getting into quite a bit because I I did Considerable amount of of work in our authentication.

I have doing an authentication course on level up tutorials last month and this month, And I'm talking about the application or the storage tab.

It's the application tab in Chrome. Is it storage in Firefox? Because I believe it's something like storage in Safari.

Yeah. It's called the storage tab in it's a little bit different because there also is an application tab. The application tab has service workers in your manifest file, and then your storage tab has

all of the, what, cache storage, cookies, IndexedDB, local storage, and session storage. That's funny because rid. Safari just has storage. They don't have an application tab. And then Firefox has both, and then Chrome just has an application tab. So the between the 3, they're all kinda circling rid The same idea here. But these tabs, I'm talking specifically about the one that shows you the application storage data. In Chrome, that's just called the application tab. Rid. Now I primarily use this for a few things. 1, to unregister service workers that are ruining my life. Because if you you're on a local host, and you have a service worker registered, and you have another site trying to access it using the same service worker or maybe it's a different site, that can cause you a whole heap of trouble. You can just go ahead and click, like, unregister service worker. But what I also use this for a lot is the storage applications for cookies, Local storage session stuff. Our course uses HTTP only secure cookies. Those are sent and registered by the server, And these are all available to us in here. So if you click on the cookies and then click on the site, you can see all of the cookies that are stored for this Specific domain that you're accessing right now and essentially what they do, whether or not it is a session, how long it for what domain it was set from, the value of it. If it's a JWT, you'll probably see a bunch of, bits and bobs of different texts, re text and numbers. You'll see the size of it, whether or not it's a secure HTTP only, the same site policy, and then the priority.

And same goes for anything that you have in a session storage, which is a storage that acts just like local storage, but is cleared at the end of each That, again, the these are just client side storage, so it's not being sent to your server without you doing it specifically.

What are some other neat things in here? Since I'm a local local host right now looking at mine, I have, like, so many local storage things that are, like, not relevant at all. I'm not Yeah. It's Because if you do multiple apps on the same

thing, is it just local storage, or is it by port? I forget. But, you have all this, like, random stuff in there that you didn't necessarily need. I also run into that every now and then when somebody's taken a a course, And they've used, a service worker for that course, and and they then they do mine, and we use the same port number. That's why I always try to do random port numbers for each of my courses because They're like, I'm getting, like, a old website that I did when I visit the website. Like, what is going on? Yeah. There's a lot of stuff here. I I haven't used too much the Web SQL or IndexedDB

stuff that's in here. I haven't used the background services stuff really at all.

The push messaging, notifications, those types of things, they're all existing in here, cache storage, application cache.

Rid I haven't used very much any of those. Pretty much, I I stick to local storage, cookies, and service worker. It's, like, where I live. The rid. Cashing stuff is from the service worker, though. That that'll show you what is

what has been stored and what and you can refresh the service worker or, like, Many times, I've accidentally, like, goofed up a server's worker, and you have to, like Unregister

it and forcefully

remove it. Yeah.

Please, sir, I would like you to leave now.

Yeah. The this is one tab where the Firefox is is really lagging behind the Chrome version Just because, like, if you delete a cookie, like, half the time, it doesn't actually delete until you refresh the page. Mhmm. Like, there's something weird about, like, If you hit delete and it doesn't doesn't look like it worked, you hit a couple more times, then you've accidentally deleted a whole bunch of other ones. And rid. The Chrome version of it is much better in my opinion, and that's

I don't very rarely say that about Firefox because I love it, but Definitely need some work there. Yeah. Next step is the, the audit tab or used to well, this is kind of a weird it used to be the Lighthouse tab. This is in Chrome. And in Firefox, I don't know what it's listed as, but in Chrome, it was the the Lighthouse tab, and then it became audit for a long time. And now it's back to Lighthouse, I'm seeing. And what this tab does is it runs Lighthouse, which is a checker that Google does that checks your site for a whole bunch of things. Rid. It checks it for performance, accessibility.

It's looking for, you know, accessibility issues. It's checking even for, like, somewhat SEO type of stuff, making sure your headers are, And that's that's kind of getting into accessibility territory.

But it runs all these things and gives you a score about your site, how fast your site is and how accessible it is, Different things there, and sometimes I think people view this as being what the end all be all.

They're like, Oh, my site doesn't pass the eye test, but it gets, you know, a 100% on Lighthouse, so it's fine. This is meant to be used as a supplementary tool To, like, help you identify problems.

But if your site's running poorly, but Lighthouse still says it's good, That doesn't mean anything. You know, Lighthouse is is only to be used as a tool to help you better identify issues, and It it tells you all sorts of stuff like the time to first paint, the speed index, total blocking time, cumulative layout shift. If your layout is shifting as it loads, that's kind of annoying for people. It also tells you all sorts of opportunities,

maybe some little helpful stuff. This is the type of thing that's fun ready to run, but don't necessarily follow it as the, you know, the the hand of or the word of, you know Yeah. There's a lot of people that think that this is like re We saw it again with, like, the HTML validator, like, 10 years ago. Now we see this again. Like, people put up, like, a paragraph tag on their personal No blog saying coming soon. Oh my god. And then they, like, screenshot their 100 out of a 100 and go, oh, amazing. I can't believe how No JavaScript. Rid. Yeah. Exactly.

Like, obviously, like, real websites and not your blog with 6 paragraph tags on it rid have to do more stuff than that. So there's there's a lot going on. But, yeah, like Scott said, it's a tool to point out possible issues that are coming. And another thing is that, like, when the White House website came out, it was built on WordPress, and it was scoring, like, I think, high eighties, low nineties.

And everybody was like, well, you can't Post, screenshot from your your dev tools with the the values. I'm like, well, then why is it in there? Yeah. Ready. Yeah. And then, apparently, you have to run it on, like, web dev web.devforward/measure Yeah. And that will give you because, like, I guess, like, we have super powerful computers. Obviously, it's gonna run really fast.

So I'll remember that as well if you're running these types of scores. Totally. Rid. There also is a bunch of accessibility stuff that uses the axe dev tools in there, and they will tell you potential Issues with your accessibility of your website, which is really, really handy. Things like color scheme is is a big one. Don't take all of this as gospel as well because rid There's a lot of, like, rules in there. Like, I think Adam Wathan from Tailwind was talking about this, where there's a lot of, like, color combos that are very clearly Fine.

But the algorithm that they use say they are not fine. So you you sorta have to do that as well. Like, the YouTube red On white is inaccessible.

Did you know that?

I didn't know that, but I actually just have a very similar color of red on my site, and I just got a, like, a A warning about it being, not a great combination, so I believe it now. I I just saw that this morning. Yeah. Yeah. I had to change some, like, YouTube links.

Rid. And if you look at the red that YouTube uses on their, like, side on their icons versus the red that is ready. Used in their logo. It's different.

Yeah. And I was like, oh, how is YouTube solving this? And it's like, they don't even use the YouTube Red Yeah. In their their website. So, Yeah. Those are nice little things that, like, you would never eyeball that. So it's nice to have a a robot be able to pick up those things on you.

Last sponsor today is going to be rid One that is near and dear to my heart and one of these things I use all the time in this century at century.io, we just launched a recently, a new rid. The genesis of that was the fact that we've been using Sentry's performance tracking tools, and I was noticing higher times than what rid I was experiencing on my own, and, you know, I've I've said a couple times here. I'm at a fiber Internet connection. I have a fast computer. It's pretty easy for me to occasionally lose track of how fast people in the real world are seeing the site. And so what this does is it gives you rid. Performance tracking metrics for every single page that users are hitting and gives you a user misery score in which re User or would you be able to see which routes of your site are the slowest? I was seeing some kinda high user misery, so rid. I wanted to really attack this, and I I just pushed an update. Now I'm gonna be able to really, really dive deep. It gives you a lot of really neat charts and data. You're the type of person who loves that stuff, check it out. Century's performance monitoring tools are in addition to their error and exception tracking, All of those things that we talk about just about every single episode of Syntax and absolutely adore. So if you wanna try out Century, head on over to Century dot I o. Use the coupon code at tasty treat, All lowercase, all one word, and you'll get 2 months for free. Thank you so much for Century for sponsoring.

Alright. Last one is going to be the DOM tab. Rid Is this a Firefox only thing? That's a good question. Let me take a quick look at

dev tools. Yeah. It's I don't think it is in dev tools at all, is not something I use myself ever. I can't I I can confidently say I've never used it myself. Re But what it is is it shows you literally everything that's in the scope of your browser. So, like, things like rid. Window, the navigator, your document, any global variables that you have, and then you can go into those global variables and open them up so you can look into document. Rid. And this is actually one kind of interesting thing is the inspector tab, you look at it, you think, yeah. That's my HTML. Right? The DOM is actually just 1 big object, rid. And it has many nested properties inside of it.

And then somebody decided that it would make a lot of sense to show rid The DOM as HTML tags instead of objects. Mhmm. And it makes sense because that you write the HTML tags, they're parsed into the DOM, And it looks similar to how you actually authored your HTML.

But in reality, the DOM is just 1 big object that has many nested properties. So if you wanna see it With all the properties without any of that stuff, you can open up the DOM tab. This can be helpful to see what global variables are on a website, because you can just click on it, and you can see what is there. It's kinda fun because you can see, React dev tools and Stripe and any other global variables that were injected into that actual website, and you can open it on up rid and see everything. Again, that's not something I use all the time because this is a kind of a fun little question I got years ago, which is, how rid. How would you know what global variables are on the page? Have we talked about this before? No. No. It's like a kind of an interview question that a friend of mine got. Read. If you're on a website and you wanted to know what global variables have been added to the page that are nonstandard from the browser. How would you do that? I don't know. The answer was you create an Iframe with no source on it, and then you grab the iframe's window Mhmm. And then you just, like, object dot Keys. K.

The window I the iframe window, and then you can pair it against the window of the the the parent frame.

And then if there's, like, differences, then those things have been added to the the global scope after the fact.

Interesting.

I think it was Ben Vinegar who who said this. He works at Century now, actually. He was working, Disqus

at the time or Disqus. Rid Discuss. Not Disqus sounds like a Frisbee golf place. Disqus.

Yeah.

And I'm I'm sure Sentry runs into this as well as rid. If you are relying on global APIs, sometimes you need to check that. Somebody didn't monkey with the global APIs. Interesting. Yeah.

Anyways, that's what the Dom tab is. Interesting. Yeah. No. There there's so many interesting little things here. In fact, if you wanna see just how many interesting things are, rid Click those 3 little dots, the menu dots, and then go to more tools in Chrome, and you will see more tabs than we even talked about in this show are listed on the So there are a ton of other dev tools tabs that are lesser used.

I wanna take a quick second to talk about one of my favorite ones from this more tools Besides the animation stab, which is nice, but the layers tab, if you click on the layers tab, it gives you a three d view of your site With boxes and everything, it makes it incredibly easy to see things that are off screen because it basically zooms out of your website And shows you in 3 d, and you can click the the little pan around tool or the spin around tool, and it shows you if something's lurking just off read. Page maybe like a, a user menu or something like that, or perhaps you have, like, some z index issues and you're not quite sure why rid. Something is sitting on top of something else when it shouldn't be. You can actually debug those really easily with this layers tab because if you pan around this rid thing and go into 3 d mode and zoom around, you'll be able to see exactly what's on top of what and what's loaded into the DOM but outside of viewport at any given moment.

It is extremely handy for debugging CSS and visual layout issues.

Yeah. There's in the whole render tab, there's all these. Rid. You can turn on the the borders and whatnot to see what has updated, emulating CSS media type. So I use this the other day. My dad was working on a rid And he says, I got a doozy for you. Bert? And Bert yeah. Bert Bop.

He was he said, like, only when you print on Safari, This pops up. And I was like, oh my gosh. Like, how do you even debug that? And it turns out there is a you can emulate print style sheets So that they will then turn on, which is really, really handy. You can also emulate screen.

You can emulate Prefer colors, scheme, dark or light Yeah. Which is really nice. Reduced motion.

Yeah. You can override your location. So if you're using geo re Geolocation. You can override that. One thing you can't do is you cannot simulate somebody changing location.

I had to do that in one of my courses, and we had to use the Xcode Emulator.

And the Xcode Emulator allows you to ride a bike or drive a car, read. And it will continually update the watch position values. So if you ever need to make it look like somebody is driving and, Like, mark it on a map or something. You could do that. You know what? I I the rendering tab here just opened my eyes to these, like, emulating vision deficiencies

in here. There's one that's like a blurred vision, so you can see what your website looks like for somebody who has vision issues and they see things more blurry. That way you can see if you're like, I can see that some of my my type is very easy to read, and some of it isn't necessarily that easy to read with blurred vision or even with various rid Color blindness or other vision issues that affect color, it's really cool. It's really cool to see this because it's not just like A little warning that says it pops up. It says people who are color blind will have issues seeing this. It's actually you getting to see the site as they see it, And and that to me is maybe a little bit more powerful visual representation.

It is pretty cool. There's a web audio tab. Yeah. Rid. Web Audio tab. Man, there's so much cool stuff in here. Like, shout out to the people that work on these things. Like, dude, they're incredibly complex.

It's just one tiny little tab rid of these monster dev tools. Yeah. It's the very best. I love dev tools. I could spend all the time This is pawing through these things.

Cool. Well, that's our our, quick little dev tools tips, explain tips and tricks as the tabs that we use the most often and how we use them.

Now it's time to get to the part of the show where we talk about sick picks, the things that we pick that we find to be sick. Sick isn't good, not sick isn't sick, rid Which is always, you know, always a good thing to have. My kids are back at daycare, so we're all getting sick. You know how that is. I have a sick pick today, which is going to be a piece of open source software. Where this thing is a piece of software that has existed for a while.

However, it's fantastic, and there's a lot of companies charging for this same piece of software in different ways that aren't even as good. There's, like, one called Gemini, which I even purchased that isn't as good. This is called Dupeguru, d u p e, guru, and it finds duplicated files.

Re It's very safe. It tells you how likely the files are going to be the exact same file. It's not just comparing file names. It's comparing the data. It can scan pictures.

If the pictures are exactly the same, even if they're similar, it's good with music. It's super fast.

Like, my strategy for my NAS is just to just Shove it into the closet and shut the door before everything falls out of the closet. That's my NAS strategy. So what I do is I run DupGuru, and I point it rid to my NAS, and I say, hey. Go find me all the duplicate files. And it takes, like, an hour because it's the NAS, and then it returns a big old list where I can directly from that application Just delete all of the duplications in it. I I was thinking I was running out of space on my NAS, and it turns out I just had a ton of duplicated files. So I, ran DupGuru, freed up a few terabytes, and, man, I use this thing all over the place. I use it on my own computer. I I use it on my NAS. I use it everywhere. So check it out, dupeGuru, and it's for Mac, Windows, Linux.

And there's a source in case you wanna build it yourself for whatever reason that might be. I'm going to sick pick a new coffee maker we got. So I I've said before, we have a Jura espresso machine, which is really, really nice. Jura? Re Jura, j u r a. And it's been great. We really like it, but it doesn't give you the strongest coffee in the world because it's an rid. An espresso machine, and if you want, like, a really big coffee, you have to do a long pull on it, and it doesn't taste as great. So here's what you do.

You do 2 runs of it, 2 fresh totally fresh runs of it, and then you fill the thing with ice, and then you got a really strong iced coffee. That's what we did with ours. There you go. Delicious. Well, we ended up getting a brewing coffee maker called the Moca Technovorm

MocaMaster.

Ready. And this is like one of those coffee maker that's been around for, like, a 100 years, and it is amazing. It's rid. Made out of aluminum. It's really good quality, the body of it, at least. Some of the plastics feel a little a little cheap. But the the coffee that it makes, it brews it at the right temperature, Has a little warming plate that auto turns off. Sort of the claim to fame is that has this, like, really nice rain spout on it so that the rid. The water goes over all the grinds and not just in one little spot.

And, man, are we loving the coffee that this thing is making. We are rid Just juiced up after drinking this stuff.

It comes in, like, 40 different colors. Really, really cool. Ready. We've, like, sort of held off on on buying an iced coffee maker for a long, long time.

And, finally, we were like, alright. Let's let's do it. Let's. We're working from home. We don't go out and buy coffee, so, we invested in this one, and we're super happy with it, the Mooka Master coffee maker. That's awesome. Yeah. Love it. I just said invested. I hate when people say that they invested in something

when they bought it. I invested in a new pair of shoes.

Rid. No. He didn't. You bought a new pair of shoes. You bought it. You spent your money. You're not gonna, like, sell them 20 years later unless it's, like, a pair of Jordans or something. Ready. I'm gonna ingest in the sandwich later into my stomach.

Oh, shameless plugs. I'm gonna shamelessly plug all my courses at rid. Westboss.comforward/courses.

Check out my latest updated one at advanced React and GraphQL. You can check out beginner JavaScript if you're new and want to rid. Slam dunk your fundamentals even if you're intermediate and you wanna get a good good base down or have a Gatsby course. All kinds of really interesting stuff. Check it out. West boss.comforward/courses, coupon code syntax

for $10 off. Talking about good bases, if you wanna throw down some primer, get a sand at first, put some primer on, you wanna do that for node authentication, head on over to leveloft tutorials.com.

Our latest course is on authenticating users with a node, And we're talking about the basics. We're not using libraries here. It's not like we're throwing passport on this sucker. We are talking about hashing, encryption. We're talking about re JWTs and 2 FAs and all sorts of stuff. And for the first time ever, we have a a part 2 coming out immediately after. So we have a part 2 that is, the latest course at the time of your listening to this, and it includes all of the stuff that we couldn't get to in the first one, including roles, Including verifying emails, including forgotten password workflows and stuff like that. It is a lot of stuff here, but it's gonna open your mind as into what's going on anytime you red into something or you want to learn just a little bit more about the process of writing an authentication flow. It's really cool course, and it's rid on the basics. So check it out, level up tutorials .com.

Alright. That's it. Thank you so much for tuning in. We'll catch you on Monday. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget

rid.

Rid.