Be 10x Productive using these JavaScript tips

🚀 We'll see extensions, debugging techniques, coding style, directory structure and much more to finally get our hands dirty and make us 10x more productive.

📍 Code Editor

There is no doubt in this decision because Visual Code is the most advanced and simple tool to code. The extensions that are present in the visual code are too good to have that can make your life easier.

📍 Must to use Extensions

• Eslint:- It is an extension that spot errors, syntax errors and performance issues in your java script code

• Prettier:- It is a code formatter extension that will format your code using a click or button

• npm intellisense:- This is a must to have extension for Node.js developers because it provides you the auto completion in most of the imports.

• Git Lense:- It enable you to view the commit history, changes and more at your ease.

• REST Client:- It enables you to send HTTP requests and see response in the editor itself.

📍 Debugging your code

I've seen many developers who debug their frontend/JS code using console.log("") statements but it is not a good way when you have Inspect tool's power.

As you can see I made a breakpoint where my code will stop and I can see the local variables and code flow happening in front of my eyes.

📍 Coding styles

🚀 In modern days if you can shift from functional programming to Object oriented programming it would be way better. It have some benefits:-

• It segregates the code acc to its functionality
• You can follow some design patterns like Factory, Observer patterns to make your code more structured
• Using OOPS will enhance the readability that you will not require any comments because of the clean code.

📌 Follow a good project directory structure. You can follow this blog's first part for the details on "How to define your project directory"

🔥 Use Vite and pnpm instead of npm

Vite is designed for fast development. It leverages native ES module support in modern browsers, allowing for quick startup times and instant hot module replacement (HMR). This leads to a significantly faster development experience compared to a traditional npm server.

pnpm uses a unique approach called "shrinkwrap" that allows it to download and install packages faster than npm. It leverages a shared package store, reducing disk space usage and network bandwidth.

😅 If possible migrate to Typescript

In today's world most of the companies use Typescript because it is a strictly typed language which can give you errors on compile time itself instead of runtime. Javascript has one biggest disadvantage like you will not get errors on the compile time.
Also, from the security purposes Typescript is good to have.

✨ Use predefined Flows

If you are building a project in JS using React then It is a good option to Use some prebuilt code flows like FLUX or REDUX. More details you can get in this blog.

🔥 BONUS

If you are new to the development and want to learn by doing. We are running an open source e-commerce project building from end to end.
We are gonna teach on its development via videos and blogs. Jump into it and make your first open source contribution.