10 Tools I can't do magic without as a Senior JavaScript Wizard

A good tool improves the way you work. A great tool improves the way you think. My name is Dosh and together with Bogdan, we founded the senior dev. where we help JavaScript focus engineers level up. It is in this process that we found a set of tools every senior developer uses. And that's what we're going to be sharing with you today. 10 tools every senior developer uses. Full number one, it's the debugger.

So, this is an example of the debugger in VS code. This is some TypeScript code. I added some break points, you can add them by clicking around here. And the cool thing is at any point in the code, you will know your local variables, your global variables. You'll be able to put your mouse on top of variables and see their value. Junior and mid level developers will use console log, but the senior developer will use the debugger.

It will get a bit more complex when you have things like React or you have your application in Docker. But every minute spent learning debugging tools will pay back in hours of efficiency when you have to debug that nasty bug. And this is why you see seniors that immediately find a bug that someone has been struggling for two days in a couple of minutes. If you want Bogdan to make a specific video on how to set up the debugger in your VS code, then let us know below.

On to number two, EL, draw, visualizing a problem, it's the first step to solve it. You can use, you know, you can draw mini sequence diagrams here, you can draw architectures, simplified architectures. And I know it looks very bare bone and very basic, but this is exactly what you expect for this drawing tool. There's thousands of them out there, I've used all of them, there's Cisco, which is pretty good back in the days.

But I always ended up converging to the simplest tool because this is what you can club really quickly in a discussion, in a live coding interview. On to number three, sequence diagrams, I use swim lanes.io. So I make these small diagrams. And this is how you can version your interactions with the back end if you're in the front end, or if you're a back end, it's a way to communicate with the front end effectively.

You can write those extremely easy, they have a guide on how the syntax works. I use it every time I'm working, especially for a full stack. This is the first time you are trying to map out the communication between a server and client you won't be comfortable using something like Swellme.io. But trust me the back end engineering your team will respect you a lot more and it will make communication with them a lot easier.

Number four, Lighthouse. Okay, so Lighthouse, it's mainly a front-end tool. I chose here the ASOS website, big retailer in the UK, go over to inspect. If you're using Google Chrome, you find Lighthouse over here. And there's different categories where Lighthouse can run an analysis. The best ones are performance and accessibility. You click analyze and it will basically extract the core web vital.

So it'll tell you how fast the page is loading and what you need to improve. Now, of course, you do want to combine this with a very strong understanding of things like the critical rendering pad. And how web performance works in general, but this is already a very good starting point. And I would recommend you always do two kind of analysis, number one, performance and number two, SEO. And we'll talk about accessibility later on, but accessibility can also be extracted with Lighthouse.

So make sure you run a Lighthouse analysis on the application you are working right now, so you are familiar with your Lighthouse metrics. Tool number five, X accessibility plugin. And I think you mentioned we could use Lighthouse for accessibility, but we have another tool that we can use. The X developer tool, it's a way to diagnose a web page and you can think of it as a programmatic way to run this checklist from the A11 project.

on your website. You install that from the Chrome store. And then you'll have the plugin over here, go over here, X dev tool. And you can run a diagnosis. I'm going to run one right now so we see for example, that there's an element here that's using some sort of area expanded. false that's not allowed. And whenever you're interviewing or building an application in the financial sector or you work for the government, accessibility tends to be very important.

Those projects will require a specialized support, that means you have to be very compliant. code extension. It's relying, I know, on GPT 3.5, but I think they changed to four. And Cursor, it's an AI code editor. It's mostly based on VS Code, it looks the same. So, for example, I could get this code, click add to chat, and then I could chat especially on this code. How would you refactor it? So I click enter and it will start generating this. It's a bit like having a combination of GPT and Copilot natively in your code. Make sure you take it for a test drive, install it and start playing with it.

It's move on with Warp. Warp, it's a AI-driven terminal. In the same way, cursor, it's an AI ID. So make sure you download it and try it out. It's super intuitive. It looks exactly like a terminal, but I have this AI kind of agent. So I can go in and ask it for example, how would you run a Docker container? And that's going to go ahead and give me all the commands, and I can immediately run them in my terminal. But what's even cooler, it's the output plate.

It's next level. So I could do this, I can actually select in line the file I want to delete. I used to go to the Linux documentation and then have some notes and some scripts, but now I can really just chat with it. It gives me the commands immediately and I just love the interface, too. It's too early to tell you 100% it's going to be part of my workflow, but so far everything looks amazing. On to tool number eight and that is the React debugger.

So basically, whenever you have a React app, make sure you install the React dev tools. You can get those in the Com Store and it'll appear over here and it's two components to it. There's the component and then profiler. So for the components, it's very good to see your component structure. You can see your state, as you can see, I have all my state over here, that comes from hooks. And I can also turn on the updates when components re-render.

Whenever a component will re-render, you see the re-render is being highlighted. It's literally like dissecting your React app instead of in console logging, like hey, what's my state? You can use the actual professional tooling. In this simple app, you might think it doesn't make a lot of difference. Whenever you have a bigger application, it makes a huge difference into understanding very well where do you have nasty bugs or what exactly is going on.

Onto the next one, Apache Benchmark. Remember how we talked well, why? I'm going to actually use it now for Apache benchmark. Use Apache benchmark to load test www.theseniordev.com. And it'll basically give me the command. This is something that will come installed with your Mac, if you're on a Mac. If you're on a Windows, you'll have to install it yourself. And I'm just going to go ahead and run this, and basically what this will do, it's to launch 100 requests and 10 concurrent ones against our website and give us a latency data.

This is a back-end testing tool and it allows you to see how a service would perform under a lot of load. And it'll basically tell us how many requests were answered. In this case, 50% of the requests were satisfied with an answer by the server in less than 120 milliseconds. Very useful tool when you want to test the performance of your back-end server. Very useful tool when you want to DDoS your own little app.

On to number 10, notes. And what do we mean by this? We mean the simple notes tool from Apple. I know there's a lot of talk about productivity tools, and I know Notion and Obsidian are mentioned a lot. In the online community about how to keep notes. If I look at my daily workflow, the simplest application I use, it's notes. I just open my Apple notes, open a new note, I write to do, I write the stuff that I'm going to do today, I write the things I've done, and that's it. It's simple, it works.

I have it on my phone too, and I don't need to learn how notion works or Obsidian, so add notes to your workflow. With that being said, thank you so much, and we will see you folks in the next one.