Introduction

This blog will provide you with tips and tricks helping you enhance and speed up your web development journey. So, without any further delay let's begin

Terminal

If you use the Windows OS, you have most likely used command prompt or powershell to issue commands such as running an application, creating new files and so on. But with the terminal application introduced, you can now run commands in a more convenient manner.

Say I have to run a database, backend server and a frontend. In the traditional approach, I will have to create three different command prompt windows. But with the terminal, you can create new tabs. What's more is you can rename and color them to identify each block of commands.

What you see below is the Terminal application I am referring to

Once the application is opened, we can rename the tab by right clicking on it.

I can now create new tabs for my backend and database

With this done, navigation is extremely easy and all my commands are organized. The tabs can also be colored for further distinction

Thunderclient

If you are a backend developer who creates APIs, testing routes to see if they return the desired output as a response is crucial. If you cannot interact with the backend from a frontend (if it is not yet created), API platforms such as Postman must be used.

However, if you use Visual Studio Code as your development environment, there is good news ! This editor has its own extension called thunderclient that can be used to test a backend — without the need for another application like Postman.

By using the shortcut Ctrl + Shift + X, you will be displayed a search bar where you can find the extension

After installing the package, you will find a thunder client icon that you can open using the shortcut Ctrl + Shift + R.

After doing so, you can create a new request and send some data as JSON or any other format in the body tab. These requests can be renamed as well — for ease of use.

Faker

If you are a frontend developer creating user interfaces and designs, this tool will be a boon for you. Normally, when creating an element, you may require to put in some dummy text to see how the final output looks like.

Smashing various keys can help generate these random texts. But with Faker.js, you can easily find fake text to put as component text. To use this package, simply link to its file using the script tag

<script type="text/javascript" src="https://unpkg.com/@faker-js/faker"></script>

<script>
  // Caitlyn Kerluke
  const randomName = faker.name.findName();

  // Rusty@arne.info
  const randomEmail = faker.internet.email();
</script>

From the above code, a random name and email is generated and can be used as dummy text. Here is the link for further documentation of this package (it can also be used with node js)

fakerjs.dev

VS Code Icons

The vscode-icons extension of VS Code adds different icons to folders based on their name. This package helps enhance your coding workspace since it differentiates folders.

Use the command Ctrl + Shift + X to open extensions search bar. Find this extension and install it.

After doing this, click on the 'Set File Icon Theme' and choose the VSCode icons option. Now, there will be a change in your display.

Initially, your repository may look like this without the extension

Now, it will look like this

Auto Rename Tag

If you know HTML, you must know for a fact that most tags contain starting and closing tags. But say that you want to change a paragraph tag to a heading tag in your VS Code editor. Then, the name of both the starting and ending tag must be altered. For a smoother programming experience, a package called auto rename tag was created.

This extension automatically changes the ending tag text based on how you alter your starting tag

You can search for this extension on visual studio code using the command shortcut Ctrl + Shift + X. Try writing some HTML with this new package now.

Conclusion

Although this is it from this blog, make sure to stay tuned because I will be creating similar blogs that provide you with helpful tips in your coding journey. Thank you for reading and happy coding !