5 Tools to Speed Up Development Time in Web Applications

Whether you're just starting out building personal projects or you're working full-time building real-world applications, aiming for maximum productivity within the shortest time possible is every developer's dream. The amount of time used in the development of a particular web application is dependent on many factors, some of which include the size of the application, the prowess of the developer, the language being used, and more importantly in the scope of this tutorial, the external tools aiding the development. In this article, I will be sharing 5 Tools(Web extensions and VS Code extension) that would increase the development time of your web application by at least 20%. Quite amazing, right? Let's get into it!

Prerequisite

To properly follow through in this tutorial, I would assume you're new to web development or have some experience and looking to develop applications in a shorter time frame. So, there are no language restrictions as I would be explaining how to use these tools in your project.

Prettier - Code Formatter

In very simple terms, Prettier is a VS Code Extension that makes our code "prettier". Funny, right? That's pretty much(pun intended) how it works! It helps format our code by using its own set of rules, which aids easy readability by the developer.

You might wonder how formatting code helps decrease development time. It's easy, when your lines of code are carefully formatted, spotting bugs(and fixing them) becomes easier. This is a great addition to coding because as developers, can we avoid bugs?

Installation/Setup

Adding Prettier to your codebase is as easy as downloading it on your VS Code application, and then enabling it as shown below.

I already have Prettier installed on my VS Code, but if you don't, you can easily do that by clicking on "install" after searching and going ahead to enable it by clicking on the "enable" option.

How it works

Prettier formats our codebase by using its defined set of rules, adding line breaks where necessary to aid easy readability. Let's have a look.

Here's a block of code without Prettier Extension enabled.

Please note that the content of the code does not matter, so I won't be doing an explanation. This media aim to show the code formatting.

Here's the same block of code with Prettier Extension enabled.

I'll let you be the judge of which code formatting looks better and which you'd love to use.

Pesticide for Chrome

In my entire journey of learning and working with CSS, this is probably the tool that has helped me the most. This Chrome extension helps debug CSS by outlining each element with coloured lines to see a better placement on the page. For many developers, the default way of debugging CSS is to add the background: 1px solid red; rule which makes the background colour of a particular element red, so its width, height and other properties are made visible for debugging purposes, using Pesticide extension eradicates the need for that because it draws an outline not only for that element, but for every single element in the HTML Document Object Model(DOM).

In addition, using Pesticide extension helps you understand the behaviour of HTML elements. For instance, it gives clarity on the width, height, and display of the elements. h1 is a block element, span is an inline element. Using Pesticide extension shows a clear representation of this.

Installation/Setup

You can download Pesticide by a simple search on Google or directly from the page here. When it's downloaded, it automatically becomes ready to use.

After visiting the link above, it leads you to this page. You can then click on "Add to Chrome". It shows "Remove From Chrome" because I already have Pesticide as an extension on Chrome. And that's set, you're set to start using Pesticide extension, but not alone, as I will be showing you to do that too.

How it Works

After Pesticide has been added to your Chrome, you can then toggle it on or off and it displays an outline of the elements.

Here's what my Hashnode Blog looks like with Pesticide toggled on.

You can see how it draws coloured lines making each element block visible to the developer.

WhatFont

Ever faced the need to know a particular webpage's font after visiting? Then this is your guy! As the name implies, WhatFont Chrome Extension tells you what font(pun intended) a page uses.

Installation/Setup

Since it's a Chrome Extension, installation for use is as easy as running a simple search on Google or directly from the page here. When it's downloaded, it automatically becomes ready to use.

You can visit their site and click on the "Add to Chrome" option

How It Works

When WhatFont editor is toggled on, you can get the font of any text just by hovering over it. Here's an instance:

Here, I have my cursor on hover at "James Amoo" header, and it gives the name of the font, which is "Plus Jakarta Sans".

Live Server

This is quite a popular VS Code Extension for web developers. Live Server gives developers the luxury of seeing their project auto-update with a new change in the codebase. This takes out time you would normally use to refresh your browser after every change in your code.

Installation/Setup

You can install Live Server through the Extensions tab in VS Code.

Click on the "Install" option, afterwards, click on the "Enable" option

How It Works

Changes made in your codebase automatically reflect on your browser without having to refresh your browser. You can proceed to try this out.

Tailwind CSS Intellisense

This might not apply to everyone, especially people who are just starting their web development journey or haven't dived into the world of CSS frameworks. However, Tailwind CSS has become increasingly popular in the past year and most developers and agencies have reacted positively to its release. So if you're not familiar with TailwindCSS, I can guarantee you it won't be that way for long.

Tailwind CSS Intellisense is a VS Code Extension that suggests properties to use without having to outrightly state them. It also helps developers in getting familiar with Tailwind CSS utility classes without having to spend a lot of time reading the docs. We'll see how this works in a bit.

Installation/Setup

Tailwind CSS Intellisense is available for download in the VS Code Extensions bar.

Like we've done in our previous instances of VS Code Extension Installation, we click on the "install" option and enable it by clicking on the "enable" option.

How it Works

It suggests a variety of properties to choose from right from the particular file you are working on. This makes it easier in writing styles by just scrolling and selecting.

Conclusion

It'll be a great addition to your codebase and overall productivity by trying out these 5 tools in your web application. Save time and ease yourself of the work these tools will easily do for you. I hope this article has been of great help to you. Thanks for reading and see you next time!