Wakefly BlogTools Everyone in the Web Development Industry Should Be Using

Like all other craftsmanship, the toolset matters for web engineers, a lot! Developers can easily start a religious war over the tools they use. Just like Harry Potter versus the Lord of the Rings or Android versus iOS, there are similar conflicts around programming tools such as Atom versus Sublime or even spaces versus tabs! Couples have broken up on these! (Yeah, I’m referring to that episode of Silicon Valley).

Because of all of these, this blog article is going to introduce very general areas of web programming and common tools in each area. Of course, you may not agree with all of these and moreover, you may think the list is missing some significant tools. That is exactly why we would love to hear your opinion! So, after reading this blog please let us know which tool you think is a must-have for web development.

Front-end Developer Tools

All browsers contain front-end developer tools that lead you to inspect and manipulate the page appearance and more. I think all these developer tools are equally good today, but only the flavors are different. Still, I believe Chrome dev tools is my favorite, although FireFox has this new awesome CSS Grid Layout inspector, but the fact is it is only a matter of time for other browsers to catch up with the name tools.

Browser Development Extensions

There are bazillion programming extensions for Firefox and Chrome, and unfortunately, Microsoft Edge is far behind in this competition. If I want to introduce just one must-have extension, this is going to be Web Developer Extension that is available on both Firefox and chrome. Web Developer is an all-in-one tool that takes care of many aspects of front-end programming. If you did not know this, you owe me a cup of coffee!

Modern JavaScript Frameworks

Creating simple webpages and then manipulating them with a JavaScript library, such as jQuery has become old-fashioned. These days it is better to use a more modern framework, such as Angular, React, Vue or similar framework to create web user interfaces and manage their states.

These frameworks probably have some fundamental differences and cannot be categorized in the same bucket, but I am just trying to motivate you to study or consider modern JavaScript frameworks that can take care of sophisticated user interface creation.

Network Monitoring

Again, all modern browsers include a network tracking tool, but if you want to take this to the next level you can use Telerik Fiddler, which is a free web debugging proxy for any browser, system or platform. Fiddler allows you to log all HTTP(S) traffic between your computer and the Internet and debug traffic from virtually any application that supports a proxy (IE, Chrome, Safari, Firefox, Opera and more). Telerik has even released FiddlerCore, a GUI-less engine that you can embed in your applications and monitor traffics internally in your app.

Telerik Fiddler is a big tool and it deserves its own series of blog posts. Unfortunately, I’m not a Fiddler expert, but I'd love to learn more about it!

Web API Tools

If your project involves some Web API programming, aka REST APIs, then you need specialized tooling to easily make calls to API endpoints and see the responses in the desired format. There are several tools for doing this, and I think even Fiddler can send customized requests, but maybe Postman is the most straightforward and complete tool for this purpose.

Modern Styling Libraries

Are you really still using plain old CSS? Thou shalt start using Sass or an alternative from now on and you owe me another cup of coffee!

Package Management

In web programming, it is very probable that someone has encountered the same problem that you want to solve, before you. That is why the web is stuffed with tons of web development packages, extensions, and APIs. Since most of web projects include several imported packages, it will be cleaner and more organized to use a package manager to install and maintain all the packages. NPM and Bower are probably your best friends here.

Build Automation Tools and Task Runners

Modern web programming involves complex builds, you may need to transpile your Sass styles to plain CSS, and your TypeScript codes to JavaScript, Minify stuff, optimize images, transform some files, etc. doing all of these manually is overwhelming, that is why you can take advantage of a build automation tool (aka task runner) and let it do them for you automatically. Grunt and Gulp are probably the most popular tools in this field.

UI Test Tools

There are many types of tests that you can and probably should perform on your project during its development, but web projects require more attention when it comes to testing their UI. The reason for this is that not only can websites be visited on various browsers with different capabilities, but also the size of the browser or viewport can dramatically change the way they look. Here, I would like to introduce two categories of UI test tools.

1. UI Automation Test Tools

If it has become boring to you to test some webpages manually and repeatedly, it is time for you to pick up one UI automation tool. I guess Selenium in the most popular one here, but you can compare important UI test tools in this Wikipedia article. This article also includes non-web UI test tools that you need to filter out.

2. Device Test Tools

Among cross-platform and cross-browser web-based UI test platforms, BrowserStack is our favorite. This tool allows you to test your web UIs in various native environments and also automate your tests. If your project involves old IE support, first of all I am sorry for this, then you may want to install one of these IE virtual machines to have a more native look and feel. You can also have a Microsoft Edge browser virtual machine image.

Random Cool Stuff

In this very last section, I would like to name a few random cool tools.

Keyboard Automation

As a developer, content creator, or even a project manager, you may find yourself in many repeating tasks that involve typing the same sequences over and over. Keyboard automation tools, such as AutoHotkey are your friends here. You can program them to do complicated key sequences by hitting just one hotkey combination.

Containers

One of the important aspects of web projects is to inspect and assure that the live host environment includes all the dependencies and requirements to host your website or web application properly. This can easily turn into a nightmare, especially when your development environment is completely different from your host environment.

Containers, which is relatively a new concept in the programming world, solve this problem by providing a layer of abstraction and isolation on top of the host operating system.

Docker, which is probably the most important implementation of this technology, explains containers like this: “A container image is a lightweight, stand-alone, executable package of a piece of software that includes everything needed to run it: code, runtime, system tools, system libraries, settings. Available for both Linux and Windows-based apps, containerized software will always run the same, regardless of the environment.”

This is a hosting miracle, isn’t it?!

All-in-one Resources

Ok, we all know that there are particular websites that contain many useful tips and articles about web programming, but I find this Frontend Dev Bookmarks a good list of all goodies.

Bottom Line

I think it is worth to mention it again that this list is neither complete nor perfect. I just tried to cover some main fields of web development and the related tools that I either currently use or I wish to learn and use in the future! There are also many areas I have not covered, some of them are:

• Code Editors
• File and Folder Comparers
• Source Control Clients
• Collaboration Tools
• Layout Frameworks
• You name it!

So, please introduce your superhero tools and put my list to shame!