The Command Line from a designer’s view

When I first worked with the command line and terminal I thought to myself ‘ok, there is a dark place in my computer where icons do not exist 😳’. I have to say I was a bit intimidated by it. For a long time.

What is the command line?

The command line is a text based interface you can use to navigate the file systems in your computer and interact with computer based programs. This was the primary way of interacting with a computer throughout the 70s and 80s up until we developed the first graphical user interfaces. It is highly used today and some developers argue that it is the most efficient GUI ever created.

Why you should learn how to work with the command line?

The truth is everybody that works intensively with the computer should learn the command line. As designers, if the web is your medium and you work with web apps, you will eventually need to learn this. I promise it is super helpful to understand how the computer really works behind the GUI. Also once you learn how to navigate with it you will easily see it has super powers.

If you work on a software application that is already functioning, most likely, you will have to run the app through your computer’s console.

The Basics

1. Initial Concepts

Interact with the command line by launching your computer console, Terminal.

Command line shell $: This is a program that accepts commands. Think of it as a conversation you are establishing with your computer, where you add a command and it responds something.

File system: This is the structure of your data. The folders and files within your computer starting from the root (or home).

I will add a couple of examples of how to use these command lines using this this file system as an example 👀:

2. Navigating through the file system

• pwd: Print Working Directory. It tells you where you are in the file system.
• ls: Lists files in the working directory.
• cd: Change directory. This is used to go levels down in the system or up. (More on this below 👇🏼).
• mkdir: Make directory — Creates a new directory (or folder).
• touch: Creates a new file.

Let’s use these. Let’s navigate through the file system to the views folder. Let’s create a new folder and a new file inside this folder. — Yes, my working directory has emojis 👊🏽💥

• Notice we start with the working directory of iMac. That is your root folder. You can view it as your home, where you part from.
• Change directory to the documents, myportfolio and views folder: cd documents, cd myportfolio, cd views
• Another way to do this would be: cd documents/myportfolio/views

Let’s make sure we are in the correct directory. Create a new folder and a new files inside this folder.

• To see the directory you are currently in type: pwd (print working directory). It returns were I am: /documents/myportfolio/views
• To see what files I have in the views folder type: ls
• Make a new directory called Portfolio: mkdir portfolio
• Change directory to portfolio: cd portfolio. Create two new files: touch web.html mobile.html
• I see list of files inside portfolio. I now see mobile.html and web.html ⚡️

The list files command has a couple of different options you can use.

• ls -a: Shows all directories including the hidden ones.
• ls -l: Lists content in long format
• ls -t: Lists content by last time modified.
• You can use all or some of them together and it shows everything combined. For ex. ls -alt

3. Copying, moving and removing files

• cp: Copy and paste.
• mv: Moves the file. — Similar behavior as copying and pasting.
• rm: Removes file
• rm -r: Removes directory
• *: wildcard: Selects all files inside a directory.
• c.html*: Selects all files that start with c and end with .html within the current directory. — You can do this with any letter and extension.

Let’s first copy home.html and paste it into portfolio:

• Copy the file home.html and paste it into the folder portfolio: cp home.html portfolio
• List files, ls and it shows I still have home.html under /views. (We are copying this file not moving it).
• Change directory to /portfolio: cd portfolio. List files to view them: ls, I now see home.html in /portfolio.

Now let’s move mobile.html to /views and back to /portfolio. Then navigate to portfolio, create a bunch of files and directories to finally remove all portfolio 💥

• To move file mobile.html to the folder views I have to move it up in my file system. Same as I navigate up I move the file up: mv mobile.html ..
• cd .. to navigate up the file system and I am now in /views
• To move back the file to the portfolio folder: mv mobile.html portfolio
• Create a couple of files to select and play with: Touch [list of files]
• To remove home: rm home.html
• ls I no longer see home ⚡️🏡

• navigate up to views: cd ..
• Create a new directory called places: mkdir places
• cp * places: to select all files within my current folder and copy them into places.
• Navigate back up to views (cd places and cd .. or could have done cd ../..) and move all files that start with a c and have extension of html to portfolio: mv c*.html portfolio
• I go to portfolio and list the files inside of it and I see all files that starts with c and ended with .html
• I navigate back up to Views and remove folder places: rm -r places
• I list my files and do not see places folder :)

Redirecting and working with some programs.

Directs the input and output of a command through files.

• echo: Echoes the input to output.
• cat: Opens the content of a file.
• > : redirects: Overwrites content from one file to the other one.
• >>: Adds the content from one file to the other one.
• |: pipe: It’s like a command to a command.
• wc: Count of lines, words and characters.
• sort: Sorts content of file alphabetically.
• uniq: Shows unique records
• grep: Global regular expressions print. It searches for matching patterns inside file lines.
• grep -i: It makes the search not be case sensitive.
• grep -R: R stands for Recursive. It searches for files and lines inside a directory.
• grep -RL: L stands for files with matches. So it returns all files with matches.
• sed: Stream editor. This is basically a Find and Replace.
• nano: Text editor.

Let’s use them! We will create a new file called countries.txt, add some text to it and then view its content from the console.

• Type in nano countries.txt. This looks for a file called countries.txt and if it does not find one it creates one and it opens it in the nano text editor.
• Once you type in nano and the file it takes you inside nano, which is the second view 👆🏽. You can basically write the text in your file. To save it you need to type in [control]O and to exit the program [control]X. (not really 100% intuitive).
• You should now be in your console in portfolio folder. Type in cat countries.txt and see its content.

Will now create more .txt files and redirect and add content from one file to another.

• Let’s create two new files touch examples.txt briefs.txt
• Redirect the content from countries.txt to examples.txt: cat countries.txt > examples.txt
• To add the content from one file to the other one instead of overwriting it, type: >>.
• Let’s add some content to the briefs.txt file and then add the content from briefs.txt to examples.txt: cat briefs.txt >> examples.txt
• Let’s see the content in examples.txt: cat examples.txt

We will now play with the content of the examples.txt file. View the word count, sort the content, redirect content and find unique records.

• See the word count and characters we use in a file: cat examples.txt | wc
• Sort the content inside a document: cat examples.txt | sort
• Sort the text and redirect it to another file. I created a new file for this example called examples-sorted.txt. We can type: cat examples.txt | sort > examples-sorted.txt
• We can show only unique records inside a document by typing: cat examples.txt | uniq

The command line is so powerful that you can even search for content within a file and also directories. Let’s use grep. 💪🏽⚡️

• grep -i coffee brief.txt: It returns all matching results inside the file. We add the -i because it allows it to search the upper and lower cases. If we did not add it and there was a result Coffee it would not have shown.
• To search within our directory, let’s double check the route we are in: pwd
• grep -R coffee [[[working directory]]]: It returns all files and all lines inside files that match the pattern.
• grep -Rl coffee [[[working directory]]]: It returns all files that match the search.

Console UI settings

When you first open it up this comes by default with the Basic theme and small letters. Tweak your Terminal UI Settings so you are comfortable working in your environment.

Choose the theme you prefer to work with. Most of the people set this to the Pro theme and choose big letters as default. Try to use sans-serif fonts, stay away from crazy not legible ones. These tweaks affect your productivity

The console in your computer is such a huge theme to cover. It has so many functions, commands and programs you can work with. I like to think of it as vast full of life and emptiness at the same time, as the universe. 🌌💻

Are you a designer interacting with your computer console in your work flow? What has been your experience? Any pain points and how you overcame them? Would love to read some thoughts. 🖤