Enter The Matrix: Command Line Basics For Web Developers — Part 1

Like Neo in the Matrix

I don’t know about you but I have always been fascinated by command line interfaces. The idea of ‘speaking’ to the computer directly through commands known only by an elite few has always amazed me and while watching Hugh Jackman’s hacker character pump furiously away at his terminal in that infamous scene in the movie Swordfish had a lot to do with this fascination, nothing made terminals cooler than the move: The Matrix.

Anecdotes aside, getting comfy with the command line is super important no matter what end of web development you plan to be on. A ton of plug-ins and development tools out there have their controls on the command line and if you skimp on this part of your toolset, sooner or later you’ll find that you need to come back and get things right.

So let’s dive in with the basics. This will be a two part series taking you on the commands you’ll interact with the most on a day to day basis. Once you grasp these commands and they become second nature, adding more commands to your command line vocabulary will get easier.

Fire up your terminal and let’s begin. I’ll be using the iTerm 2 terminal on Mac OS X. But you can use whatever terminal you have on your system. All commands should work the same as long as you’re using a Linux/Unix based OS. (Windows users, I’m sorry but hopefully I can update this post with Windows commands at a later time).

The first thing you want to know is where you are in your terminal — what directory are you in? A directory is the address to a folder that resides somewhere in your system. You can get your location at any time by typing the following command:

Babz-Macbook-Air:~ Babz$ pwd

Note that what you’ll be typing is the part after the $ sign. So in this case the actual letters ‘p’, ‘w’, ‘d’ are all you’ll type. Now after pressing the enter key you should see something similar to this:

Babz-Macbook-Air:~ Babz$ pwd
/Users/Babz
Babz-Macbook-Air:~ Babz$

pwd stands for ‘present working directory’ and depending on your set up and where you are currently in your terminal, the output will be different.

Let’s break down what we’re looking at. The first line is where I typed in the command. The next line is the output. Here the output is the path to my current location in my computer. This means I am currently in my /Users/Babz/ folder.

Next, let’s create a new folder.

Babz-Macbook-Air:~ Babz$ mkdir learning-the-command-line
Babz-Macbook-Air:~ Babz$

The next command is called mkdir for ‘make directory’. This makes a new folder in whatever folder you’re currently in. The folder name is the second parameter which you specify after a space. So in this case ‘learning-the-command-line’ will be used as the name of our new folder.

As you can see, mkdir doesn’t output anything but returns control back to you so you can enter new commands as required.

A command you’ll be using often is the ‘change directory’ command. You use this to move around your computer by changing your current directory or location in the terminal. Remember that a directory or location refers to the folder on your machine that you’re currently in. The command goes like this:

Babz-Macbook-Air:~ Babz$ cd learning-the-command-line

If you try the pwd command again you should see the following:

Babz-Macbook-Air:learning-the-command-line Babz$ pwd
/Users/Babz/learning-the-command-line

Now we’re in the ‘learning-the-command-line’ folder/directory. Let’s make a few files real quick so we can illustrate our next command.

Babz-Macbook-Air:learning-the-command-line Babz$ mkdir folder-a  && mkdir folder-b && mkdir folder-c

This should be recognizable apart from the &&. We are using the mkdir command three times and making three new folders — folder-a, folder-b and folder-c. The && operator is used to chain commands together and to run one after the other.

Now onto our next command: ls.

The ls command list all files and folders in the present working directory.

Babz-Macbook-Air:learning-the-command-line Babz$ ls
folder-a    folder-b    folder-c

As we can see, entering the ls command lists the three folders we just created in the learning-the-command-line folder. If there were no folders or files in the directory, it will simply have returned control to us.

Now, let’s create a file. The touch command is used to create files. You pass it the name and extension as a parameter similar to the mkdir command:

Babz-Macbook-Air:learning-the-command-line Babz$ touch file-a.html
Babz-Macbook-Air:learning-the-command-line Babz$ ls
file-a.html folder-a    folder-b    folder-c

As you can see, we added a file-a.html file to our pwd. To open the file in the terminal we can do:

Babz-Macbook-Air:learning-the-command-line Babz$ nano file-a.html

This opens the terminal’s text editor. It’s no atom or sublime text but it gets the job done. It comes in handy when making changes to config and set-up files on the go.

The rm command is used to ‘remove’ a file. Running ls after the rmcommand will show us that the file is no longer there.

Babz-Macbook-Air:learning-the-command-line Babz$ rm file-a.html
Babz-Macbook-Air:learning-the-command-line Babz$ ls
folder-a    folder-b    folder-c
Babz-Macbook-Air:learning-the-command-line Babz$

To remove a folder, we use the rmdir command to ‘remove directory’:

Babz-Macbook-Air:learning-the-command-line Babz$ rmdir folder-c
Babz-Macbook-Air:learning-the-command-line Babz$ ls
folder-a    folder-b
Babz-Macbook-Air:learning-the-command-line Babz$

And there you have it. That’s more than enough to get started and comfortable. Try using these commands to move around your machine and create files and folders for a few day in place of pointing and clicking with your mouse like you normally do. I’ll be going over more commands in part two so be sure to get yourself ready to build on what you’ve picked up on here today.