Web Developer Workflow Tools: A Beginner’s Guide
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 😉.)
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 
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. 🤷♂️
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.
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 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 (not to be confused with Visual Studio is another very popular code editor right now, which includes power features such as:
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 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.
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.)
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.
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:
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:
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:
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.
Automating browser tests is really important, and Selenium has not only mastered browser testing but even taken it to another level.
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.
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:
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, 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.
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 & 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:
More info:
Key Takeaways
- Embrace command line tools like Bash and PowerShell to automate tasks and streamline your workflow, enhancing productivity significantly.
- Utilize powerful code editors such as Atom, Sublime Text, and Visual Studio Code that offer advanced features like git integration, debugging, and extensive customization to improve coding efficiency.
- Leverage browser debugging tools like Chrome DevTools and Firefox Developer Tools to inspect and debug web applications directly within the browser, optimizing both development and debugging processes.
- Incorporate JavaScript tools such as npm and webpack for managing dependencies and bundling assets, which are essential for modern web development practices.
- Understand the importance of Continuous Integration and Continuous Delivery (CI/CD) pipelines using platforms like GitLab CI/CD and GitHub Actions to automate testing and deployment, ensuring high-quality software production.
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.
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.
- 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.
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.
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.
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.
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 |
- GitLab Continuous Integration (CI) & Continuous Delivery (CD)
- GitLab CI/CD
- Creating and using CI/CD pipelines
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 |
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 |
- An introduction to Bitbucket Pipelines
- Everything you need to know about build minutes in Bitbucket Pipelines
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!Frequently Asked Questions (FAQs) about Web Developer Workflow Tools
What are the key components of a modern web development workflow?
A modern web development workflow consists of several key components. First, there’s the planning phase where developers map out the project, set goals, and define the scope. Next, the design phase involves creating wireframes and mockups of the website. The development phase is where the actual coding happens, using languages like HTML, CSS, and JavaScript. Testing is an essential part of the workflow to ensure the website functions as expected. Finally, the deployment phase involves launching the website and ongoing maintenance to keep it running smoothly.
How can web development workflow tools improve productivity?
Web development workflow tools can significantly improve productivity by automating repetitive tasks, facilitating collaboration, and streamlining the development process. Tools like version control systems help manage code changes and prevent conflicts. Task runners automate tasks like minification and compilation, saving developers time. Collaboration tools enable real-time communication and sharing of resources among team members, making the workflow more efficient.
What are some popular web development workflow tools?
There are numerous web development workflow tools available, each serving different purposes. Some popular ones include Git for version control, Gulp for task running, Slack for team communication, and GitHub for code hosting and collaboration. Other tools like Sublime Text and Visual Studio Code are popular code editors that offer features like syntax highlighting and auto-completion.
How do I choose the right web development workflow tools?
Choosing the right web development workflow tools depends on your specific needs and the nature of your project. Consider factors like the size of your team, the complexity of your project, and your preferred development methodologies. It’s also important to consider the learning curve associated with each tool and whether it integrates well with other tools you’re using.
What is the role of testing in a web development workflow?
Testing plays a crucial role in a web development workflow. It ensures that the website functions as expected and helps identify any bugs or issues that need to be fixed. Testing can be done manually, but there are also tools available that automate the process, making it more efficient and reliable.
How can I streamline my web development workflow?
Streamlining your web development workflow can be achieved by using tools that automate repetitive tasks, adopting efficient coding practices, and fostering effective team collaboration. Regularly reviewing and refining your workflow can also lead to improvements.
What is version control and why is it important in a web development workflow?
Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. It’s crucial in a web development workflow as it allows multiple developers to work on a project simultaneously without overwriting each other’s changes. It also provides a history of changes, making it easier to track and undo modifications if necessary.
How does a task runner improve a web development workflow?
A task runner automates repetitive tasks in your development process, saving you time and reducing the risk of errors. Tasks like minifying JavaScript files, compiling Sass to CSS, and refreshing your browser whenever a file is saved can all be automated with a task runner.
What is the role of a code editor in a web development workflow?
A code editor is a tool that developers use to write and edit code. It’s an essential part of a web development workflow as it offers features like syntax highlighting, auto-completion, and error detection that make coding more efficient and less prone to errors.
How can I keep my web development workflow up-to-date with the latest trends and technologies?
Keeping your web development workflow up-to-date involves continuous learning and adaptation. Stay informed about the latest trends and technologies in web development by following industry blogs, attending webinars and conferences, and participating in online communities. Regularly review and update your workflow to incorporate new tools and practices that can improve efficiency and productivity.
Lucero is a programmer and entrepreneur with a feel for Python, data science and DevOps. Raised in Buenos Aires, Argentina, he's a musician who loves languages (those you use to talk to people) and dancing.
Command line toolsdeveloper toolsgit resourcesversion controlworkflowworkflow automation
Related articles
