Conservation of Energy in Web Development

Part 1 — Reducto Tedium

Over the last few years, I’ve taken a zealous interest in improving my developer experience. In particular — reducing the background noise, tedium, keystrokes, and interrupts to flow state generally associated with the role.

The following are some tips, tricks, and tools that make my day just that tad bit easier and help me focus on actual creativity and problem solving.

I’m working with Node / React on a Mac so some of this might be biased towards that stack.

Terminal like a boss

“If you stare into the abyss, the abyss stares back at you ”— intense German guy

Choose one wisely

My personal choice: iTerm 2 (Split panes and tabs, great search, colors)

Git Colors + Autocompletion

This doesn’t affect productivity directly but it makes the Git that much easier to work with.

Add the following to your /Users/<yourusername>/.bash_profile

# git autocompletion
if [ -f ~/.git-completion.bash ]; then
  . ~/.git-completion.bash
fi

# some nice colors for git
parse_git_branch() {
     git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
export PATH=/usr/local/bin:/usr/local/sbin:$PATH
export PS1="\u@\h \[\033[32m\]\w\[\033[33m\]\$(parse_git_branch)\[\033[00m\] $ "
export CLICOLOR=1
export LSCOLORS=ExFxBxDxCxegedabagacad

Bash Alias’s

“Get your house in order ! ”—Mom / Jordan Peterson

These are shorthand for predefined commands in the terminal. you can use $*, $0, $1… as variables.

Add the following to your /Users/<yourusername>/.bash_profile

# console
alias ls='ls -GFh'
alias nr='npm run $*'
alias ga='git add .'
alias gss='git status'
alias gc='git commit -m $*'
alias gp='git push'
alias gpo='git push origin'
alias goops='git reset --soft HEAD~1'
alias gcb='git checkout -b $*'
alias gpm='git pull origin master'
alias ll='ls -la'
alias tw='npm run test:unit:watch'

# apps
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias wstorm='/Applications/WebStorm.app\ $*'
alias wlink='wml add $1 $2src/node_modules/@ow/$1'

# docker
function drun () { docker-compose run --rm $1 /bin/bash; }
function dexec () { docker-compose exec $1 /bin/bash; }

# wml
function wlink () { wml add $1 $2src/node_modules/@ow/$1; }

so instead of typing this:

$ npm run test
$ git add .
$ git commit -m "some-commit-message"
$ git push --set-upstream origin

I can do this:

$ nr test  
$ ga 
$ gc "some-commit-message"
$ gpu

Note: you will need to restart the terminal for these to become available.

Console history shortcut

So much energy is consumed by the question of “which will result in less work... pressing up arrow until you find a recently used command or retyping it”? Is that just me? in any case here’s a cool trick:

$ ctrl + r

Pressing ctrl + r puts the terminal in search history mode.. start typing the command you want and presto… any matches in your history will come up.. Hit ctrl + r again to cycle through matches.