A Designer’s Guide to the Terminal

You can learn how to use the terminal in a fairly short amount of time. You don't need a C.S. degree. You don't need to know how to hack any mainframes.

With the terminal, you can open, move, rename, copy and delete files. Same with directories (folders). The terminal is the Finder app on steroids. File management is just the start. The terminal is the interface for a slew of power tools.

You can install and run programs.
You can version files.
You can read documentation offline.
You can write scripts to automate tasks.
You can edit programs.
You can configure hidden OS settings.
You can tunnel into servers.
You can take full advantage of open source resources.

If you're using React, you can quickly spin up applications and install design systems. If you're using git you can contribute to the execution of your design work.

The terminal is a powerful tool.
It's a powerful tool for designers.
It's a powerful tool for anyone.

Make it look nice

The Terminal can also be a bit daunting. I recommend making it look nice first. Download a nice theme. Extract the zip file, and import it into your terminal.

Open Terminal.
CMD + , to open up settings.
Import the .terminal file and set it to default.
Restart the Terminal.

If you aren't happy with the default monospace font, there are plenty of good options to choose from:

SF Mono (Pre-installed)
Input
Inconsolata
Space Mono
Office Code Pro
PragmataPro (paid)
Operator (paid)
Cartograph (paid)

Starter Commands

The Terminal helps you move around and modify the file system. Here are 7 commands that are important as you get started:

1. List — ls

ls shows the files and directories in your current directory.

2. Change Directory — cd

cd is how you move around.
cd .. will take you to the parent directory.
cd Documents will take you into the Documents directory. For this to work, you need to be currently in a location that contains a Documents directory.

3. Move — mv

mv is used to move files from one directory to another.
mv file.txt new/file.txt moves a file from your current directory to the new directory.
mv file.txt new.txt will rename file.txt to new.txt.

4. Create — touch

touch is used to create files.
touch hello.md creates a file named hello.md in your current directory.

5. Make Directory — mkdir

mkdir creates a directory.
mkdir images creates a directory named images in your current directory.

6. Remove — rm

rm removes a file.
rm -d removes a directory.
rm -rf node_modules will recursively delete the node_modules directory and every file/directory inside of it. Most commands you run in your terminal are harmless. Be careful with this command. Deleted objects aren't stored in Trash, and there's no undo.

7. Open — open

open will open a file in the using the default program for that file type.
open index.html will launch your default browser with the html page in the location bar.
open README.md will open up your default markdown editor.

Important Locations

If you're on a Mac some locations have a shorthand.

/ is shorthand for your root directory.
~ is shorthand for your user directory.
. is shorthand for your current directory.

You can change directory from any location into your user (cd ~) or root (cd /) directory by using these shorthand locations. Additionally, cd without a provided location will move you into your user directory.

You can use a tool like bashmarks to save and visit commonly used directories.

Typing long location names gets old. In addition to shorthand, you can autocomplete locations using tab.

Custom Prompts and Commands

By default your Terminal includes computer and user information in the prompt.

Philips-MacBook:Documents philipdavis$

It's common to remove this and replacing it with the current location followed by a $ sign.

Documents $

To do this, we need to edit a .bash_profile file (.zprofile if you're running MacOS Catalina) which allows us to customize our terminal further. The .bash_profile file is located in the home ~ directory. If you run ls and you don't see it, it's because it's a dot file. Dot files are hidden by default, but we can see them if we add parameters to our ls command.

Parameters for terminal commands are often passed after a - dash. ls -alhG shows you all files (including dot files) in an easier to scan format, with file size and colorized folders.

This is what the normal ls looks like.

And now with the additional parameters.

If you don't see a .bash_profile in your home directory, you will need to create it.

touch .bash_profile

Once you have the file you can open it in a text editor.

atom .bash_profile

Once the file is opened, you can add the following string to replace the prompt cruft (computer name, location and user) with the location and a money $ sign.

export PS1="\W \$ "

In addition, instead of remembering all the parameters for ls -alhG you can add an alias so that ls uses it by default.

alias ls="ls -alhG"

Save the .bash_profile file, run source ~/.bash_profile and then restart the terminal to start using the new settings.

You can create aliases for any commands that you commonly use. I've created aliases for scaffolding react applications, and starting node applications. Here's what your .bash_profile might look like after you've added your own custom aliases.

export PS1="\W \$ "
alias ls="ls -alhG"
alias ns="npm start"
alias cra="create-react-app"

The Power Tools

In additional to basic shell commands there are a number of powerful tools that allow you do more in your terminal. I've listed a few below. Each takes time to learn. Each has something valuable to offer.

git for versioning and collaboration.
npm or yarn for installing and versioning node modules.
homebrew for installing programs and applications.
ssh for tunneling into servers.
vim for editing files in the terminal.
create-react-app for scaffolding react applications

Piping and Chaining

By default, output from your terminal is displayed in your terminal. You can reroute the output of a command to another file or to your clipboard by using the pipe command |.

base64 file.jpg | pbcopy

Here we are running base64 on an image which converts it to a data URI. We are then copying the data URI to our clipboard. pbcopy and pbpaste are the commands to copy and paste in terminal.

You can use the && operator to chain commands. This is useful when you need to wait for commands to execute. The && operator acts as a queue. If the first command successfully executes the second will begin running.

npm install && atom . && npm start

Here, when npm install is finished, atom will open with the current directory loaded and then npm start will run.

sudo GoForthAndH4ck.exe

The terminal is a powerful application but it doesn't need to feel intimidating. If you have questions about using the terminal, or just want some guidance getting set up, please reach out to me.