Wisdom of Jim
  • Blog
  • About Jim

A place to obtain the wisdom of Jim.

The Importance of a Having Pretty Command Line

4/23/2016

Comments

 
If you are going to be doing a lot of work in a command prompt you then you should enjoy it. It should be easy to read in terms of size and colors. It should be practical and functional but still show off your own style. 

Started From the Bottom

I was cleaning off my hard drive and accidentally screwed up my computer (it would just turn off form the grey loading-bar screen) so I wiped my whole OS and started fresh (good thing I use git and google drive). However, I had everything wiped, including my programs and command line color profiles. One reason why changing up your editor is so important is that when you boot up terminal for the fist time you start off with such a horrible (aesthetically) command prompt: 
Picture
First off it's just blindingly bright. The text is super tiny and difficult to read some letters. I would seriously go crazy if I had to work in this shell all day, every day. Luckily, no one has to. 

Choose Your Path

At this point it's worth saying that terminal is not the only way to do shell scripting on a mac. There are plenty of other programs such as ITerm 2 that replace terminal, but the same principles apply.

Get to the Editor

In Terminal - Terminal -> Preferences -> Profiles
In Iterm 2 - Iterm 2 -> Preferences -> Profiles

You can customize things like the font, font size, colors, etc, for a particular "profile", and they choose between your saved profiles when loading up a new shell. 


Fixing the Fonts

The first and most important thing for me is bumping up the fonts size so I can actually read what the heck is going on. I like to make it pretty huge so that I really know what's happening and can still see it on high resolutions, normally 14 or 15pt. You can change font family at this point if you want to, I normally like Menlo Regular with character spacing 1.009. I also normally bump up the Line Spacing which really helps me to read the lines better than when they are crammed together one right on top of the next; I'm using 1.115 line spacing right now. I like the underline cursor as well. 

Colors

The important thing to remember with colors is that you want your command prompt to be easy to read and not straining on your eyes when you look at it. That means contrast the background color and the text color. It might seem really fun and cool to put opacity in your background, but it can quickly make your command prompt hard to read. I recommend keeping it over 60%. For the background color, I strongly recommend against white or neon colors because these are not nice to look at over long periods of time. An easy choice is black background with white text:
Picture

And here's a nice one that uses a teal text color over a dark blue 94% opaque background:
Picture

This one's always a crowd favorite; it's the hacker / matrix neon green text on back background, but ine the profile below I have the background at 80% opacity and 20% blur:
Picture

Honestly, I'm not really a fan of that one too much. The style I used to use a was basically just a dark font color over a dark yellow background with about 95% opacity. It would look something like this:
Picture

But right now I feel like being different so I'm going to go with a dark background- black at 95%. Then I'm going to pink a nice yellowish green font color called "honeydew" in the pencils sections of the color choices:
Picture

Even More Colors!!

If you aren't totally pooped from all the colors so far, I have a nice little tip that will spice up your command line text so that it's not the same, boring color all the time. All you need to do is add a few lines of text to your .bash_profile file. 

To change it, open up terminal or your favorite BASH shell and type this:
vim ~/.bash_profile
You should then enter into the vim editor allowing you to see the contents of the .bash_profile  file (note: t's ok if this file is empty). All you have to do is paste in this text:
export CLICOLOR=1
export LSCOLORS=GxFxCxDxBxegedabagaced
Yep, just like that!
Picture
Note: You can also just add this in anywhere if you already have other code in this file
Then you can save an quit editing with vim (with ":wq" and enter). 
And now you'll have a super colorful command line! Booyah!
Picture

Custom Command Prompt

By default a fresh command window will show some information about your current user and directory followed by the dollar sign ( $ ). You can customize this to be anything you want, really. Just open your bash_profile: 
vim ~/.bash_profile
Here's an example of a configuration I like to use. It basically displays the current directory and the current git branch along with a custom icon:
# Displays current directory followed by git branch in parentheses, 
# then a knight chess piece horse icon.
export PS1="\W\[\033[33m\]\$(parse_git_branch)\[\033[00m\] ♘ "
Picture

Make It Yours

parse_git_branch () {

    while read -r branch; do
        [[ $branch = \** ]] && current_branch=${branch#* }
    done < <(git branch 2>/dev/null)

    [[ $current_branch ]] && printf ' (%s)' "$current_branch"

}

At the end of the day, you need to have a command line that you feel is comfortable. Especially in AngularJS (but really all Front-End development nowadays) the command line is a huge part of the process (Karma, Gulp, Babel...), and by embracing what it can do for you your efficiency can skyrocket. Take the time to set up your tools nicely so that they will work well work you, it will be worthwhile in the long run. 
Comments
comments powered by Disqus

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior-driven-development
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Illustrations
    Java
    Javascript
    Lean
    Life
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim

WoJ © 2015 - 2016