A.

Blog

  ▄▄▄▄▀ ▄  █ ▄███▄   
▀▀▀ █   █   █ █▀   ▀  
   █   ██▀▀█ ██▄▄    
  █    █   █ █▄   ▄▀ 
 ▀        █  ▀███▀   
         ▀
▄▄▄█████▓▓█████  ██▀███   ███▄ ▄███▓ ██▓ ███▄    █  ▄▄▄       ██▓    
▓  ██▒ ▓▒▓█   ▀ ▓██ ▒ ██▒▓██▒▀█▀ ██▒▓██▒ ██ ▀█   █ ▒████▄    ▓██▒    
▒ ▓██░ ▒░▒███   ▓██ ░▄█ ▒▓██    ▓██░▒██▒▓██  ▀█ ██▒▒██  ▀█▄  ▒██░    
░ ▓██▓ ░ ▒▓█  ▄ ▒██▀▀█▄  ▒██    ▒██ ░██░▓██▒  ▐▌██▒░██▄▄▄▄██ ▒██░    
  ▒██▒ ░ ░▒████▒░██▓ ▒██▒▒██▒   ░██▒░██░▒██░   ▓██░ ▓█   ▓██▒░██████▒
  ▒ ░░   ░░ ▒░ ░░ ▒▓ ░▒▓░░ ▒░   ░  ░░▓  ░ ▒░   ▒ ▒  ▒▒   ▓▒█░░ ▒░▓  ░
    ░     ░ ░  ░  ░▒ ░ ▒░░  ░      ░ ▒ ░░ ░░   ░ ▒░  ▒   ▒▒ ░░ ░ ▒  ░
  ░         ░     ░░   ░ ░      ░    ▒ ░   ░   ░ ░   ░   ▒     ░ ░   
            ░  ░   ░            ░    ░           ░       ░  ░    ░  ░
                                                                     

A designer’s guide to loving the terminal

Mar 28, 2024

The first computer we had at home was a PC running Windows 95. I used computers at school (the original Macintosh and Macintosh II), but this was the first chance I got to really dig in and explore. I remember the first time I hopped into the command prompt. Hitting the start menu, launching MS-DOS Prompt, and then seeing that black box show up was just so cool to adolescent me. I was in the terminal!

These days, I use the terminal daily. It’s become a natural extension of my workflow. Oftentimes, I prefer using the terminal over comparative GUIs. That might sound weird coming from a designer. A majority of my job is designing highly interactive, visual point and click interfaces. But once you understand that the terminal is just as much of an interface as anything, you start to see past some the quirks and begin to embrace learning curve.

In this post, I’ll go over what I do in the terminal (as a designer) and how you might dip your toes into the world of text driven interfaces. The hope is that something here sparks some interest and gets you to try using the terminal.

Mindset

Before you start, I highly recommend coming into this with an appetite to learn. This is something new, unexplored. You’ll feel overwhelmed. That’s normal. It can be a lot to take in. You’ll feel like you’re slow and inefficient. That’s fine. You’re developing new muscle memory. Understand that at the very least you will come out of this experience with a new-found appreciation for graphical interfaces. 😉

The terminal

Terminal emulator icons

The first thing you’ll need to do is choose your terminal (emulator).

If you’re on macOS, you already have an app called Terminal which works just fine. There is also iTerm2 and Warp which have a lot of modern bells and whistles.

If you’re on Windows, I recommend just using Windows Terminal. It’s pretty new and has everything you need to get going.

If you’re on Linux, Konsole and Terminator are popular choices. Unfortunately, I have less experience here so I can’t make any recommendations.

There are also some cross-platform terminals like WezTerm, kitty, Alacritty, Hyper, and Tabby which may be worth checking out. Personally, I use iTerm2 on macOS and Windows Terminal on Windows. All things said and done, this is a personal choice so feel free to try out a few and see what you like.

Tips for beginners

I don’t necessarily want this to be a guide on how to use the command line, but I did want to leave some tips for any newcomers to get you rolling in the right direction.

  1. ls lists the contents of the current directory (use ls -l to show a formatted list)
  2. cd PATH changes your current directory to the specified PATH
  3. cd - changes your current directory to the previous directory you were at
  4. pwd prints the current path you are in
  5. Pressing the up arrow/down arrow lets you cycle through previously run commands
  6. Pressing ctrl+r lets you search through previously run commands (press enter to run the command or tab to populate the current prompt)
  7. !! references the last run command (useful for when you need to sudo what you ran last)
  8. Pressing ctrl+w deletes from the cursor to the beginning of the previous word. Pressing ctrl+u deletes everything up to the cursor.
  9. Pressing ctrl+c stops the current running command
  10. Pressing tab autocompletes the command or path you are typing. Press tab again to see a list of possible results.

You don’t need to try to memorize everything to start. Utilize ctrl+r and tab completion when you can. There’s also some really great cheatsheets out there.

Killer “apps”

I guess it’s weird to call them “apps”. The more correct term would probably be command line tools or CLI (command line interface). CLIs are programs that you run in the terminal. They’re entirely text based and typically take some input and give some output.

Here are a few of the CLIs that I use:

Homebrew

brew is a package manager that allows you to install command line tools. It used to be purely a macOS thing because Apple never shipped a package manager with the OS, but now it also runs on Linux. I wanted to start with this tool because it’s what you’ll likely use (if you’re on macOS) to install/update everything below.

croc

croc lets you send files between any two computers. It uses a unique scheme where it generates a code phrase (like dogs-chase-cats) that the “receiving” computer enters to retrieve the file(s).

Typically, I’ll just use AirDrop to transfer things between Macs, but sometimes I need to quickly send something to a Windows or Linux machine and this makes things super handy. They don’t even need to be on the same network!

ripgrep

rg is a grep alternative. grep is a tool that lets you search for patterns in various files. rg does something similar, but comes with a few more extras and sensible defaults.

For instance, it respects your .gitignore file so if you’re searching for patterns in your Git repository, it won’t bring up results that aren’t tracked. Another great thing you can do is narrow down the types of files you want to search over with rg -t TYPE PATTERN . This will search for PATTERN only in files of TYPE (e.g., rg -t css red will search .css files for red). You can typically find ways to accomplish similar things in grep, but the interface of rg is just much more streamlined and easier to express. Not to mention it’s faster too.

fd

fd is a find alternative. find is a tool that lets you search for a specific file by name. fd does that, and like rg, it comes with a vastly improved interface and some extras.

Also like rg, fd respects your .gitignore so if you’re searching for files in your Git repository, it won’t bring up untracked results. fd also provides an easy way to execute additional commands on the results with the -x argument. For instance, fd -e zip -x unzip will recursively find all the .zip files in the current directory and unzip them. find can do pretty much all of this too, but the arguments necessary are much harder to write and read. fd can be much faster too!

sd

sd is a sed alternative. sed is an extremely powerful tool that lets do you all sorts of text manipulation. sd doesn’t do everything that sed does, but it does most of the common stuff you’d do and it does it in a much more intuitive package.

Let’s say you wanted to replace newlines with commas in a file. With sed , it would look like: sed ':a;N;$!ba;s/\n/,/g' file.txt. With sd, it’s simplified to: sd '\n' ',' file.txt. Much easier!

fzf

fzf is a fuzzy finder for the command line. The beauty of fzf is that it’s a general purpose tool so it can be used for all sorts of fun stuff. It also comes with a few default behaviors that are super useful. Remember how we went over that ctrl+r allows you to search over commands you ran before? Well, fzf takes that to the next level. Press ctrl+r with fzf installed and you’ll be greeted with a fuzzy searchable list of previous run commands. Or use ctrl+t to do a fuzzy search over files! Or use alt+c to fuzzy search over directories to cd into!

fzf also lets you compose a fuzzy search into your tab completions by weaving in **. For example, you can leverage fuzzy search with sd to autocomplete what file to replace in with sd foo bar ** and then pressing tab.

Zoxide

z is cd with magic on top. It allows you to jump around to directories that you’ve visited before with ease. Let’s say that you have a project at ~/projects/todo-app. z will remember that you’ve navigated to that directory before and allow you to instantly jump to it from anywhere with z todo . And that’s not all, you can also use z interactively with zi which will leverage fzf to allow you to autocomplete to directories that you’ve visited before.

HTTPie

http is an HTTP client for the command line similar to curl. It lets you make HTTP requests with ease, especially if you’re sending JSON. With curl you might do something like:

curl -H "Content-Type: application/json" \
-D '{"foo":"bar","biz":"baz"}' \
https://api.example.com

With http, that’s simplified to: http https://api.example.com foo=bar biz=baz. It’s usually much more convenient because it makes certain assumptions about what is common with HTTP requests.

Git

git is a version control system. It allows you to check-in changes to your project (repository) to save and generate a history of changes that you can reference and revert to if needed. It’s distributed which means that collaborators on your project can have their own (local) copy of the repository, check-in their own work, and sync it back to a centralized (remote) repository that you can also sync to. git is primarily meant for text-based projects so while checking-in things like images and other binary assets might be possible, it’s not the best versioning system to use for them.

You might be familiar with tools like GitHub or GitLab that make the centralized portion of git much easier with extra features like being able to browse and make changes to the repository on the web. But do note that GitHub and GitLab are not git. They simply act as a hosting service for your repository. You can use git without a hosting service at all.

As a designer, it can be difficult to grasp and work within the confines of git because when you’re designing, you’re typically not producing things in a linear fashion. Design is typically much more scattered where you might work on one thing, but then switch to working on something unrelated. git requires a much more focused and deliberate methodology in order for it to work best.

TUIs

TUIs or terminal user interfaces (and also alternatively, text-based user interfaces) are a little different from the CLIs that I went over in the previous section.

TUIs are still executed and used in the terminal, but they typically consist of a more full-fledged text-based interface. Rather than typing a command and seeing a result like with CLIs, using a TUI will land you in a new “interface” for that particular tool. This allows the tool to situate itself in purpose-fit layouts and controls for the job. For instance, some TUIs will segment the screen in various panels to expose relevant information at once or enable tool-specific control schemes (keyboard shortcuts) and mouse controls.

Here are a few of the TUIs that I use:

Neovim

Probably one of the most disruptive things that you’ll deal with when working in the terminal is text editing. You’re kind of thrown into the deep end because things that you might do with a point and click interface are no longer first class when interacting with text in the terminal. That’s where nvim comes into the picture.

nvim is a modal-based editor which means that you switch to specific modes for certain tasks. For example, you would use normal mode for traversing, insert mode to edit, and visual mode to select. nvim is also meant to be used purely with the keyboard (no mouse!) through “vim motions” which are key combinations used to move around. This might sound inefficient, but any vim user will tell you that once you get proficient in vim motions, moving around in a file becomes a breeze and is more efficient than constantly lifting your hand off of your keyboard to click somewhere with the mouse.

Here’s an example: say you wanted to move down 5 lines and place your cursor at the end of the 4th word with just the keyboard. In a normal editor, you might press the down arrow 5 times and then hold alt and hit the right arrow 4 times. In total, that’s 9 key presses. With vim motions, you can press 5j4e which instructs the cursor to move down (j) 5 lines and the to the end (e) of the 4th word. In total, that’s 4 key presses. You’ll also notice that you only had to minimally leave the home row to accomplish this movement.

While vim motions are one of the biggest selling points of using a vim-like editor, there are also a ton of other customization that you can do to make nvim your own — too much for this post.

lazygit

lazygit is an alternative interface for git. It provides a more visual and interactive approach to using git. I’m usually using CLI git for a vast majority of my work, but sometimes I’ll drop into lazygit for interactive rebasing, browsing the reflog, or managing my stashes. Sometimes it’s just handy to be able to visualize things.

visidata

vd is an interface for exploring tabular data. Sometimes I’ll find myself with some .csv or .json that I need to do some quick analysis on. vd is perfect for those quick bits of data exploration or transformation that you just don’t want to spin up Excel for.

nnn

nnn is a terminal file browser. Rather than exploring with ls and cat, you can interactively navigate and browse directories with file previews and extra utilities like searching, sorting, and even batch actions.

Becoming a wizard

I went over quite a bit, but hopefully something caught your eye and sparked at least a tiny bit of interest for using the terminal. There’s still a ton to uncover and unravel, but here are some other things you might be interested in if you’re going to go down the rabbit hole:

  • 🛠️ Customizing your shell - By default, you’ll likely be using vanilla bash or zsh, but there’s so much in the realm of customization you can do to enhance your experience. I’m using a combo of Oh My Zsh and Powerlevel10k.
  • 🎨 Themes - Probably the most apparent thing to a designer starting out in the terminal is the lack of color! Well fear not, there are so many color themes to choose from for your specific terminal. I’ve been running with Catppuccin for pretty much everything.
  • 🔁 Piping and redirecting - Most command line tools are single purpose tools that do one thing and do it well. Learning how to leverage multiple tools simultaneously can help you accomplish tasks that you might not be able to do with a single command. You can use | (pipe) to use the output of one command as the input of another command (e.g., ls | sort will sort the list of files and directories in the current path in alphabetical order). Or use > (redirect) to write the contents of a command to a file (e.g., echo "Hello world" > hello.txt will write “Hello world” to a file named hello.txt ).
  • 📝 Shell scripting - There’s so much you can do with writing small, simple scripts to automate your workflow. For example, I wrote a script that generates lorem ipsum dummy text for me.
  • 📚 Studying up on core utilities - I went over the “cool” stuff, but there’s also a lot of utility that you get out of the box from the core utilities that ship with your environment

If you found this interesting, I recommend giving this blog post by Julia Evans a read. She goes over some really great tips and tricks to get more comfortable in the terminal. Happy typing!