Simple and best way to practice JavaScript

Introduction

Learning and practising JavaScript is always fun. But sometimes while practicing, we get exhausted because every time we make some changes into the code, we have to go back to browser and reload it. After that, we have to see its console for the output. This whole process is distractive and time consuming. I was also having the same experience when I was learning JavaScript but then I came to a solution which I want to share with my readers. I found this way very simple and easy. By following this method, I give much more time to understanding JavaScript concepts instead of refreshing the browser.

Things we will use

⚠️ Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.

Let’s Start!

  • First Open Sublime Text editor and open your project into it by dragging and then dropping the project folder on its window or by selecting project folder by selecting File > Open….
  • Then open iTerm and change directory to your project directory.
  • Then, add nodemon.json file at the root of your project and the following data into that file.
{
"events": {
"start": "clear"
}
}
We are clearing the console before executing the file. It will give us a clear console and a distraction free environment. So, for that we are binding clear command with start event of nodemon.
📚 Click to know more about nodemon events ?
  • Then, run your JavaScript file by executing following command into the terminal:
nodemon --quite YOUR_FILENAME.js

What it will do is, it will watch your file for changes and execute that file if any changes are made. --quite will disable nodemonlogs in order to provide you distraction free output.

  • Now open both of them side-by-side and start writing code, hit ctrl+S.
    ( cmd + S in case of macOS ) to save the file and see the output simultaneously.
⚠️ If you are using macOSX, you can split both of them into a separate window. If will provide you a complete distraction free environment. If you are using linux or windows, you can resize them and keep them side-by-side.

That’s it!!

This was a problem that I had and then I tried to solve it. Now just write your code and then just hit ctrl + S and the output of that code is in front of you. Just spend your time on thinking about the problem not about how to test it.

Now go and practice like a pro 👍

This method is something similar to this

If you like this article, please give it some claps 👏 and share it! If you do not like this post or have any type of questions regarding anything that I mentioned in this post. Feel free to ask me. Just post an issue in my “Ask Me Anything” by clicking here.

For more like this, follow me on Medium or Twitter. To ask a Question visit this link. More about me on my website.

Don’t forget to 👆 subscribe our weekly-newsletter service for web hackers. All latest articles and stuff like trending repositories, straight to your mailbox 📬.

Like what you read? Give Gaurav Mehla a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.