What’s in a Web Developer’s Toolkit?

In the lead up to buying my first house, I’ve been watching a lot of Ask This Old House  to fill in the gaps in my home maintenance education. One of my favorite segments on the show is when one of the professionals will list out their “must have” tools for anyone looking to tackle home repair. The plumber shows off his wrenches and teflon tape, the electrician his multimeter and wire strippers, and the landscaper his rakes and shovels.  Like these tradesmen, a web developer has a unique set of tools that they use to get the job done. Unlike these tradesmen, however, people don’t really get to see us use those tools. You can watch the electrician wire up a new outlet with a screwdriver, but you don’t really get to watch the developer type the code into PHPStorm to create your website. So to change things up a little bit, I’m going to be going over the tools used to code websites.

The Command Prompt (or Terminal)

Listing all files and folders inside current folder

For those old enough to remember, back in the earlier days of computers, everything was done via a command prompt (or terminal). There was no graphical user interface (GUI) for anything, just commands and crude textual output. Now a days, computers offer both a GUI and a way to send commands directly. Odds are that your operating system is Windows (probably Windows 8 or 10), and within that operating system is a program called cmd. It allows you to send commands quickly and directly to the computer. The average user will probably never need to use cmd or anything else like it, but for developers, it’s one of the first tools in our toolkit. Being able to quickly maneuver between directories, list out their contents, create/edit/delete files is incredibly useful. It seems counter productive, but with enough practice one can become much faster at using the command prompt than they are at performing the same tasks with a mouse. Additionally, there are several other tools in the web developer’s toolkit that don’t have GUIs and require you to type commands directly.

A Text Editor or an IDE

Editing a PHP file in PHPStorm

There’s a running joke in the office that all I require to do my job is Notepad and Internet Explorer (IE). And there actually is some truth to that! When I first began learning how to code, I wrote it in Notepad and tested it in IE. Fortunately things have progressed greatly since then and now I depend on several different web browsers for testing and two pieces of software for code writing. The first is a basic text editor. I’ve tried several over the years, but my favorite has to be SublimeText. It allows me to quickly write code and offers support for features such as auto-complete and emmet, which allows me to type code in shorthand (so typing “mt” followed by pressing tab will yield “margin-top”, or “ul>li*3>a” followed by a tab would yield a 3 item long list of links).

The second piece of software is an Integrated Development Environment (IDE) called PHPStorm. All of our websites are written in, among other types of code, PHP. PHPStorm is like a text editor on steroids that’s built specifically for writing in HTML, CSS, Javascript, and of course PHP. The primary point of an IDE is to combine several tools and the functionalities of separate pieces of software into a single, unified environment. PHPStorm gives me quick access to a terminal, allows me to use version control, and even manipulate files. All  without having to leave the program.

FTP Clients

There are several ways to push code to a server, but one of the oldest and most used is the File Transfer Protocol (better known as FTP). Using a program like Filezilla or WinSCP, I can connect to a website’s server and begin uploading the website’s files. A good FTP client will also allow me to delete or move files on a remote server as needed. FTP can also serve as a quick way to backup or restore a site’s files.

Version Control

Version control is a relatively new addition to the web developer’s toolkit. To explain it as simple as possible, version control (usually in the form of a technology called git) allows a developer to jump back/forth between versions of a file with relative ease. For example, say I built a website with a blue background. I show it to the client and they want to see it with a red background. Upon seeing all of that red, they realize they’d rather have it be blue after all. With version control I can quickly and easily revert the file back to its original, blue form without ever having to touch code.

Inspector Tools

Using Firefox’s Inspector Tools to view the Google homepage.

Inspector Tools are another relatively new tool for web developers. In the old days if you needed to take a look at a site’s code for reference, you either needed to download the file and look at it directly, or use the “View Source” tool. Downloading a file can be time-consuming, and “View Source” is a very primitive tool. Web developers needed more, and the answer was the Inspector Tool. The tool allows a developer to safely view and manipulate the HTML, CSS, and Javascript on a website in real-time. This saves a lot of time as it allows developers to quickly try out changes without actually modifying the code. Additionally, the tools can be used to log site errors, track load times, and more. Chrome, Internet Explorer, and Edge all offer their own takes on the Inspector Tool.

In Summary

Of course this is just a short list of the most common tools used by web developers. New technologies and approaches are developed so rapidly that it can be difficult to keep up at times. And each technology or idea comes in multiple iterations. I love SublimeText, but others may prefer Atom. Most web developers use git for version control, but others may use SVN. There’s no shortage of choice of tools in web development. The joke, “If you don’t like the weather in Maryland, wait 5 minutes” is also applicable to web development. If you don’t like the tools available to you, just wait 5 minutes for new ones!