Web Developer Workflow Tools: A Beginner’s Guide

April 16, 2020

Here’s a primer for the tools all web developers should get to know, from basic Bash commands to web browser add-ons that will debug your web apps and automate navigation tests, plus continuous integrations pipelines.

Keep in mind this article is intended to cover the tools that the largest number of web developers will share a need to learn, not a comprehensive listing. So don’t get too mad if your favorite tool isn’t here! (For example, I intentionally left out WYSIWYG website builders 😉.)

Command Line

The command line is an interface that allows you to interact with the operating system through a console, and it can go a very long way to facilitate and even automate tedious and routine tasks.

You shouldn’t be afraid of getting your hands dirty with the console. The time you’ll spend learning some basic scripting will most definitely pay off.

Bash Tools (Linux, macOS)

Bash is the most popular shell for the “Unix-like” operating systems such as Linux and macOS.

Your mastery — or at the very minimum, a basic knowledge — of the Bash shell can save you a lot of time. Things like locating and renaming files, finding and replacing text strings, can literally take just a few seconds with commands like locate and grep with sed, respectively.

Become proficient in Bash by reading the Bash Quick Start Guide.

PowerShell (Windows)

PowerShell is the “bash-like” task automation and configuration management framework from Microsoft. It comes with a command-line similar to that of the [Command Prompt](https://en.wikipedia.org/wiki/Cmd.exe (CMD)), but it also includes modules and a proper scripting language. But keep in mind that scripting is PowerShell in nothing like scripting in Bash. Except for a few exceptions, the commands have entirely different names, meaning that you’ll need to learn these separately.

PowerShell 7 (under development) is intended as a successor to PowerShell Core 6, which was introduced as a successor to PowerShell 5. Who knows, folks at Microsoft might figure the naming thing out by version 8 or 9. 🤷‍♂️

Cygwin (also Windows)

You missed the Bash on Windows? Miss it no more! For those of you used to the power of the Bash shell but working regularly on a Windows environment, there’s an alternative.

Cygwin is a POSIX-compatible environment that runs natively on Microsoft Windows, where the installation directory behaves like the root and follows a similar directory layout to that found in Unix-like systems.

Code Editors

You almost certainly know what a source-code editor is, but you might not know about some of their power features, such git integration.

There are integrated development environments (IDEs) such as NetBeans and Eclipse — but they’re bloated with features we mostly won’t care about anyway.

As web developers, we’re more inclined towards cross-platform tools. Let’s take a look at a few of them.

Atom

Not surprisingly, as it’s developed by GitHub, Atom has the finest embedded Git control of any text editor, specifically aimed for GitHub repositories.

But that’s not all. The “hackable text editor for the 21st Century” is incredibly easy to customize (see the docs), and a rich packages and themes ecosystem has flourished around it. Be sure to check out the blog and discussion forums to see what’s been cooking, as there are plenty of regular updates.

Sublime Text

Sublime Text is the oldest product in this list (it’s been around since 2008), and the only one that’s not free. It’s still very popular, and was the first editor to introduce many of the features we considered a given today in any decent code editor, such as “goto anything”, “goto definition”, and “multiple selections”, among others.

It also has a companion Git client with a very sleek interface, Sublime Merge, introduced in 2018.

Visual Studio Code

Visual Studio Code (not to be confused with Visual Studio is another very popular code editor right now, which includes power features such as:

IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.
Inline debugging to analyze coding issues right from within the editor.
Version control with Git commands built-in (learn how to use version control).
Extensions and customization which run in separate processes, ensuring they won’t slow down the editor (learn more about extensions).
Cloud integration with Microsoft Azure to deploy and host sites, store and query relational and document based data, and scale with serverless computing.

Read our Visual Studio Code power user’s guide to become a VS Code pro, and dive even deeper with the book Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers.

The Runners Up

Although not so popular, Brackets is worth mentioning, as it’s primarily focused on web development, with a very interesting feature called Live Preview, which gives real-time connection to your browser to instantly visualize changes to CSS and HTML on screen.

Notepad++ is a drop-in replacement for Windows Notepad, very minimalist and lacking some power features we mentioned such as Git integration, but it’s still a powerful, lightweight application to edit code.

Command Line–Based

As for commaind line–based editors, you’ve got Emacs and Vim … and endless flame wars about which one is better!

Browser Tools — Debugging, Debugging, Debugging

The web development tools shipped by some browsers aren’t quite website builders or IDEs, as they neither assist in the direct creation of a web page nor are a replacement for a code editor. Rather, they help to test the user interface (UI) of the project you’re working on.

Back in the day, you’d need a number of extensions to make for a decent debugging environment, but nowadays most browsers have great built-in tools to help web developers.

Some tools you can expect to find:

A DOM inspector to edit HTML and CSS code directly on the document object model (DOM), view event listeners, and set DOM mutation breakpoints.
A console to view and filter log messages, inspect JavaScript objects and DOM nodes, and run JavaScript code in the context of the active window or frame.
A debugger to control the execution flow stepping through code, and set watches and breakpoints.
A network monitor to inspect requests and responses from the network and browser cache, including asynchronous XMLHttpRequest (XHR) — all of which can be very useful to identify bottlenecks.
An accessibility inspector to access the page’s accessibility (a11y) tree, allowing you to check what’s missing or otherwise what needs attention to make your site available to as many people as possible.
Performance measurement to profile execution time and system resources required by the site and walk JavaScript call stacks.
Memory measurement to track memory consumption and compare heap snapshots at different stages of the code execution.
A storage manager to handle cached data, cookies, web storage, and even IndexedDB structured data.
A service worker manager to handle and debug service workers with updates, unregisters, and start/stop of individual workers.
An emulator to test for different screen resolutions, and even different location coordinates.

Chrome DevTools

Google Chrome comes with a comprehensive and incredibly well-documented set called DevTools.

In fact, it’s a good idea to visit Google’s Tools for Web Developers, as you’ll find plenty of useful resources.

Firefox Developer Tools

Firefox first introduced the DOM inspector in version 3, and ever since then its Developer Tools are a state-of-the-art set that comes with extra goodies such as Eyedropper, taking screenshots, and rulers, to name a few.

Likewise, the Mozilla Developer Network (MDN) is a mandatory resource for web developers.

Safari Developer Tools

Because of its lack of features and poor support to web developers, Apple Safari is a pain to work with, and, like Internet Explorer back in the day, it would be nice not to have to deal with it. But you just have to.

It does ship Web Development Tools that aren’t nearly as comprehensive as the aforementioned ones, and all the documentation you’ll get is what someone may have written over a lunch break. (Yes, that’s all there is.)

Others

Even Microsoft Edge, the successor of infamous Internet Explorer, has a decent set of Developer Tools!

And if you fancy good old Opera, check this Stack Exchange answer to see how you open its developer tools.

Learn the Chrome and Firefox DevTools with Browser Devtool Secrets.

JavaScript Tools

Since the arrival of Node.js (the runtime environment that executes JavaScript code outside the web browser), JavaScript has been used not only to enhance user interfaces but to write command-line tools and for server-side scripting programs, effectively establishing the “JavaScript everywhere” paradigm.

Consequently a whole ecosystem has emerged around it, and here are some tools you need to know.

npm

The Node package manager (npm) claims to be “the world’s largest software registry”, and it’s an essential tool as it is the main way to distribute JavaScript code these days.

As listed on its website, you can use npm to:

Adapt packages of code for your apps, or incorporate packages as they are.
Download standalone tools you can use right away.
Run packages without downloading using npx.
Share code with any npm user, anywhere.
Restrict code to specific developers.
Create Orgs (organizations) to coordinate package maintenance, coding, and developers.
Form virtual teams by using Orgs.
Manage multiple versions of code and code dependencies.
Update applications easily when underlying code is updated.
Discover multiple ways to solve the same puzzle.
Find other developers who are working on similar problems and projects.

There are essentially three components to npm:

The website, to discover packages and set up profiles.
The CLI, which runs through a terminal.
The registry, which hosts the public database of the JavaScript software.

For more information, read A Beginner’s Guide to npm, the Node Package Manager.

webpack

webpack is yet another level of packaging software, collecting all of an app’s front-end assets like HTML, CSS, and images into static assets, also called “bundles”. These bundles can then be used to produce code on demand via code spitting. (Read Reduce JavaScript Payloads with Code Splitting to see what that means.)

You can use webpack to:

Bundle ES Modules, CommonJS, and AMD modules (even combined).
Create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
Resolve dependencies during compilation, reducing the runtime size.
Process files with Loaders while compiling (e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.).
Do whatever else your application requires with a highly modular plugin system.

Check out the A Beginner’s Guide to Webpack guide for a primer.

Polymer and Web Components

When first introduced in 2011, Web Components were thought to be the next big thing for the Web. And while there has been some development around it, its adoption has been at lot slower than anticipated. However, the possibility of creating new HTML elements and encapsulating them, so that they can be used later and distributed across different sites to prevent rewriting of functionality, is still quite legit.

Developed by Google, Polymer is a library for building web apps using Web Components, and it has quite some adherents within the corporate scope, such as Google itself, Netflix, Electronic Arts, and IBM. Additionally, Google implemented many of its Material Design principles into Polymer, which makes it a very attractive tool to implement well-crafted sites.

Find it out more about Polymer and Web Components on:

Code Management

A distributed version, revision or source control system (DVCS) is a way of managing codebases via software commits. In other words, it’s a standard to keep track of software development changes in a neat, secure, and effective way. (See “Commit Changes to Your Codebase the Right Way”.)

There’s a number of version control systems, such as BitKeeper, Subversion, Mercurial (my personal fav), Azure DevOps (new kid in town). But only one is king …

Git

Created by Linus Torvalds (also creator of Linux), Git quickly became the de facto standard for DVCS (partly thanks to GitHub as well). It’s truly distributed, as every Git directory on every computer or node is a full-fledged repository, with the entire history and full version-tracking abilities, independent of whichever node is considered a central server.

There are a number of concepts you’ll need to become familiar with before you fully grasp DVCS in general and Git in particular, such as branching and merging, distributions, pulls … but you’ll see that the basics (what you’ll use most of the time) are easy to learn.

You can build a solid understanding of Git in less than a weekend with Jump Start Git.

Other Tools

Selenium

Automating browser tests is really important, and Selenium has not only mastered browser testing but even taken it to another level.

Selenium WebDriver drives a browser natively, as a real user would, either locally or on remote machines.
Selenium IDE is a Chrome and Firefox extension that makes it easy to record and playback tests in the browser.
Selenium Grid takes WebDriver to another level by running tests on many machines at the same time, cutting down on the time it takes to test on multiple browsers and operating systems.

Learn how to perform end-to-end testing with Selenium on a Python app.

There’s also Puppeteer, a Node.js library by Google which provides an API to control headless Chrome or Chromium over the DevTools Protocol. Quite frankly though, Selenium is way more of an advanced tool — or really, an ecosystem — than Puppeteer, which you can also use to talk to the Chrome DevTools Protocol (see Chrome DevTools and Selenium 4).

Docker and Software Containers

We can’t really explain much of Docker here and do justice to it, but one thing’s for sure: software containers can dramatically improve your delivery and deployment workflow.

To gain an in-depth understanding of it, read Learning Docker – Second Edition.

CI/CD pipelines

Continuous integration (CI) is intertwined with continuous delivery (CD) in a so-called CI/CD pipeline for continuous deployment. But what does all of that mean?

From Wikipedia, and in a nutshell:

CI makes sure the software checked in on the mainline is always in a state that can be deployed to users.
CD makes the deployment process fully automated.

In other words, continuous delivery is a practice (not a technology) that streamlines software development smoothly, with automated tests and deployments to the cloud, very much in tune with the DevOps culture.

All of the deployment processes can be fully automated, from checking workflow bugs with Selenium, to compiling and building software, pulling the latest checked version from GitHub, or patching the database, and even restarting caches. Whatever needs to be done, you just put in the pipeline.

For more info about DevOps, check out SitePoint’s “DevOps by Example” article.

GitLab CI/CD

GitLab is a service similar to GitHub. But unlike GitHub, which hosts Git repositories and offers some DevOps tools, GitLab is essentially a DevOps life cycle tool (and the best one on the market, according to a Forrester report) that also hosts Git repositories. That said, there is hardly any GitHub feature that is missing in GitLab (the opposite is more true).

The service is based on a consumption-based model of build minutes used:

Plan	Build minutes	User / Month
Free	2,000	$0
Bronze	2,000	$9
Silver	10,000	$19
Gold	50,000	$99

With focus on complex toolchains, speed and security, we can’t really cover here all of GitLab CI/CD features, but check out these resources:

GitHub Actions

GitHub, the leading hosting provider for software projects using Git, seems to come a little late to the party with its CI/CD solution called GitHub Actions, which introduced CI/CD support for public repositories last August (something competitors had been doing for years now).

In any case, the service is production ready with quite a large actions list that you can start integrating into your pipelines.

Plan	Build minutes	Month
Free	2,000	$0
Pro	3,000	$7
Team	10,000	$9/user
Enterprise	50,000	contact sales

The building minutes seem very generous, but there are some restrictions on concurrency which might negatively affect the total running time, so be sure to check the usage limits.

More info:

Bitbucket Pipelines

Bitbucket Pipelines & Deployments works as a breeze with Jira (a very popular tool among agile development teams) and Bitbucket. Not surprisingly, as they’re all creations of Atlassian, just like Trello.

While Bitbucket Pipelines seems to offer significantly less minutes, keep in mind that there are no extra charges for concurrency:

Plan	Build minutes	User / Month
Free	50	$0
Standard	2,500	$3
Premium	3,500	$6

More info:

You can learn how to set up each of these CI systems for an example Python web app using this guide.

Wrapup

As long as this one article was, many tools were left out — some consciously and some because I admittedly don’t even know about them!

Web development is getting more integrated with other disciplines like mobile and desktop software development, with new tools, approaches and dev practices arriving all the time. Don’t get me wrong, I’m not complaining about it. I celebrate it, as it’s all for the better. But it sure expands the possible pathways in crazy ways, and you can only expect that it will get even more competitive in the future.

As I usually say: if you want to stay valuable, stay curious!