Essential tools for Front End developers for daily use

Published: · Reading time: 6 min

As a Front End developer you’ll be using a lot of tools on a daily basis to make your life easier and workflow more productive. Below I’d like to share popular tools for Front End developers.

  1. Code editor
  2. Online code editor
  3. Design editor
  4. Version control
  5. Web performance
  6. Fonts
  7. Images
  8. API docs
  9. Local server
  10. Free hosting
  11. Online diff
  12. Code formatter
  13. Browser support

Code editor

Having a good code editor can save you a lot of time by helping you write code efficiently and effortlessly. Not only that a good code editor possesses additional features that can help you manage the day-to-day tasks as a developer, like versioning system and debugging.

There are quite a few different code editors to choose from but the following are the two most popular ones:

  • Visual Studio Code - considered to be the most popular FREE code editor;
  • Web Storm - a full-fledged IDE with tons of useful features (PAID subscription-based, but has a 30-day trial).

Online code editor

Sometimes to make a quick prototype or a demo you can use an online code editor. These days there’s a wide variety of online code editors available.

The best part is you can make projects without worrying much about configuration or setup. All you need to do is just write a code and see a result, which you can instantly share or save for later. And then you can access your work from any device and any place

Design editor

To view design files you’ll need a design editing/viewing tool. From collaborating with other team members to editing or just viewing the design of the app or a website. There are a number of different tools but the most popular ones are:

  • Sketch - PAID (has a 30-day trial);
  • Figma - FREE and PAID.

Version control

To keep track of changes that were made to the code you’ll need to use a Version Control System (VCS). The most popular VCS type is Git. Using Git is an essential skill for any kind of developer.

There are a few tools that can help you manage and track changes to your project:

Web performance

To measure the speed, load time, performance, and best practices of your website, you can use the following free online tools:

  • GTMetrix - online tool to measure the performance of the website;
  • PageSpeed Insights - online tool to measure the performance of the website;
  • Lighthouse - runs audits for performance, accessibility, progressive web apps, SEO, and more in Chrome browser;
  • web.dev - online tool to measure the performance of the website;
  • JSBench - online performance benchmarking playground for JavaScript. Execute and compare the execution speed of different JavaScript code snippets.

Fonts

Typography and fonts are an integral part of web design. As a Front End developer you’ll be working with different fonts quite often. Sometimes a well-chosen font can make a huge difference in the appearance of a website.

The following tools offer a library of the most popular fonts as well as help you to select and add fonts to your webpage:

Images

Same as Fonts, images play a vital part in the web design. When working with images you have quite a few tools at your hands to ease your life:

  • Unsplash - FREE stock image library;
  • Pixabay - FREE stock image library;
  • Canva - FREE online image editor;
  • TinyPNG - FREE online image size compressor.

API docs

Various API Documentations are a must-have resource for any Front End developer. Used heavily on a daily basis to look up code references, definitions, and examples.

There might be times when you’re offline and still need to get information. Offline API Documentation is a lifesaver:

Local server

You’ll need a server to work locally with database and network requests. There are a few options to choose from:

  • MAMP - for macOS and Windows;
  • XAMMP - for macOS, Windows, and Linux;
  • LAMP - for Linux.

Free hosting

To test your project in a live environment you’ll need hosting. But usually hosting services are pretty expensive, especially when you’re still learning Front End development. Luckily there are some FREE hostings that you can use to deploy and test your projects:

Online diff

While some code editors and IDEs provide a build-in tool to check the difference between the files, there are online tools that can help you manage that task:

Code formatter

You can use a code formatting tool to either beautify or uglify code.

Browser support

Front End developers have to be aware of what language feature or property is supported by the browsers, usually, to check technology browser support you should use:

Conclusion

The list is now quite full, I’ve just mentioned the most common and popular ones. There are a lot more tools for Front End developers that can help you be more productive and creative during the development process.

It’s nearly impossible to mention all of the tools as the number could be quite large, however, I’d like to provide useful links that you can explore yourself:

Like this article? Share it on:
Tags: