Environment Customization: My Developer Toolbox

Toolbox

All skilled professionals have a "toolbox", right? An electrician might have a multimeter, screwdrivers, and a hammer. A painter might have brushes, pallets, paints. An engineer is no different, except that their toolbox is often entirely digital.

In all cases, tools help you to be more PRODUCTIVE, FASTER, and MORE ACCURATE in your every day work.

My developer toolbox is a set of customizations, tools, and applications that augment and improve the operating system and computer I use. I'll specifically cover changes and tools I use that help with developing computer software and websites.

Iterate and Improve!

I revisit this set of steps often, sometimes multiple times each week.

  1. Identify a process that is slow, that I find myself repeating often, or can be automated
  2. Find or build a tool that might improve this problem (we're coders right? ...a resourceful bunch)
  3. MEASURE whether this change actually saves me time
  4. This is the important part: if you don't use it, or it makes you slower, GET RID OF IT
  5. Repeat

My Toolbox

At a high level, my toolbox consists of the following:

  • Version-controlled Dotfiles
  • Customized Terminal
  • Customized Text Editor
  • Ancillary Applications

I'll cover them all in some amount of detail here, and would be happy to delve deeper into each of them in a future blog post. So if you find anything particularly interesting, please comment below and let me know what you'd like to know more about!

Dotfiles

My dotfiles are a collection of (often invisible) configuration files that are tracked by git version control on github.

If you aren't using git already, I suggested reading Git From The Bottom Up immediately.

These dotfiles are a constant WIP (work-in-progress), meaning I tweak and alter them as I follow my iteration process I outlined above. These dotfiles configure git itself, my shell, linters for my editor, command line tools like pry and curl, and more. They normally live in invisible files or directories in my home directory ~/.*.

Since I track these files on github, I am able to quickly and easily sychronize them between my work and home computers, and have them saved in case of disaster. I do the same for my editor configuration, which I will get into in a later section.

My dotfiles are designed to be forked, and customized with your own dotfile changes so you can synchronize them as well!

I have a simple install script which symlinks all of my dotfiles and directories into my home directory, prompting to overwrite any existing files. I use the following simple approach:

ln -sin "${CWD}/${BASE}" "${HOME}/.${BASE}"

I use the -sin flags:

  • -s creates symbolic links, meaning my actual git-tracked dotfiles can live elsewhere than my home directory
  • -i uses interactive mode, prompting whether or not to overwrite files that already exist in the destination (awesome!)
  • -n so any source file is treated like a "file" rather than a directory

The installer script also omits symlinking the install script itself, and the readme (duh).

Customized Terminal

Out of the box, most *nix operating systems, macOS included, ship with Bash, the bourne-again shell. This is a wonderful piece of software and a command-line language written by Brian Fox for GNU, and has been the de-facto standard since around the time I was born.

However, nowadays Bash is starting to show some gray hairs, and after customizing bash and zsh to hell and back, I've settled on using Fish. Fish, the "Friendly Interactive Shell", is a shell for the modern developer. Not only is it actively maintained, it has a ton of arguably-more-useful features than ZSH, is bash compatible, has developers in mind, and is super easy to customize.

Here's an example of my customized Fish prompt. It features a ton of at-a-glance information, such as an abbreviated pwd, my current git branch and sha, my local versions of Ruby and Node, and more!

image

Furthermore, my prompt shows me whether or not I have elevated (su) permissions by coloring the $ differently.

image

I'll cover a few of the notable Fish features, but there are TONS more and I truly suggest you take a look at https://fishshell.com/ if you have even the slightest amount of interest :)

  1. Works out of the box

    I mean really, most of the coolest features "just work"

  2. Sane Scripting How many times have you had to Google/StackOverflow and hack crazy bash scripts just to customize your prompt? Fish has its own scripting language. I know this sounds super annoying at first...

    OH GLOB YET ANOTHER LANGUAGE TO LEARN

    But think about it -- it's more Ruby-like than Bash-like, and if you have half a brain about your, it'll literally take you less time to make sense of Fish scripting than it took you to read this far into this blog post.

  3. Autosuggestions (automatic interactive history search)

    I don't know why Fish has branded such a terribly-difficult-to-memorize name for this feature (maybe because us developers are not the best marketers), so let's just call it "Autosuggestions". Basically, Fish does two awesome things when it comes to autocompleting your terminal commands:

    1. Firstly, it automatically generates completions to your typing based on man pages! So not only does it know about all of the binaries in your $PATH, it can also intelligently suggest complex combinations of flags to pass to each binary!
    2. Secondly, there is no ^B^R reverse history search. Fish searches your history EVERY TIME YOU TYPE, and intelligently orders its suggestions based on the frequency that you select a result! You can select an entire result by pressing the left arrow key, or select bits and pieces of it by pressing alt + arrow.
  4. Web-based configuration tool

    This is a super helpful tool to quickly see what your Fish configuration looks like in a GUI. All you have to do is type fish_config and it will launch your browser of choice.

So, when I give this talk, or talk about Fish to coworkers and friends, they all generally have the same response: "WHY ON GODS GREEN EARTH WOULD YOU REPLACE BASH!!??!?!1?shift1"

Well, I believe that modern developers still spend a large portion of their day in a terminal, so why not use a shell that was designed with the modern developer in mind? The languages and frameworks we use daily have progressed tremendously since their inception, so why shouldn't your shell?

Additionally, customization of your shell shouldn't have to be this unapproachable mess that requires installation of massive combinations of scripts like oh-my-zsh. Fish's unique scripting language mixes a familiar bash and zsh experience with powerful new features.

Customized Editor

I'll be honest: I've bounced around a lot on this topic. From Sublime Text to Jetbrains IDEs, to VIM. What I've landed on is GitHub's editor, Atom. But, as I'm sure you've guessed by now, I don't just use Atom out-of-the-box. Oh noooo, I customize it!

Atom is awesome. It is backed by a huge community, including great debugging help, and most importantly, a MASSIVE library of open-source plugins. It's written in Electron, allowing to to be simultaneously developed in the oh-so-familar JavaScript, HTML, and CSS, and deployed cross-platform to Linux, macOS, and Windows. As a result, it is well-maintained and supported, and is infinitely customizable. In fact, if you want to customize any component of the UI, you can just press cmd + alt + i and see the familiar webkit developer tools! Literally the entire app is a big web app!

I find it is the perfect blend of "IDE" power, and speed & customization of a lightweight editor.

I'll write a future blog post that covers my Atom customization in its entirety. I have one post covering how to set up ctags, allowing you to quickly and accurately "go to definition" -- read that here. Additionally, a few good packages to look into are autocomplete-plus, a linter for your commonly used languages, vim-mode or vim-mode-plus, Open on GitHub, Markdown Preview, Beautify, and most importantly, Synchronize Settings.

There are two important packages worth talking about in detail here.

  • First, Sync Settings, which lets you "back up" and sync your entire Atom configuration between machines. It is a bit primitive in the way it does this: it uses a secret GitHub Gist, although I still question the security behind this as some packages put "secrets" into their settings, which are then stored here.

  • Second, vim-mode. This is an important choice -- I've decided against using plain old VIM, and instead leverage all of the awesome modal control of VIM, with the customization and 21-st-certury-ness of Atom. So think of it like a customized version of Sublime Text, with all the power of VIM!

Ancillary Tools

These are tools that are not your editor, not your terminal, but are tremendously helpful in cutting down on repetitive tasks, or freeing up your brain for more important information.

Let's be realistic here, as much as we'd like to, we cannot do EVERYTHING in the terminal. Imagine if we kept browsing the web in there! React.js would seem pretty dumb now wouldn't it?

I've mentioned a few:

  • 1Password

    This is the most awesome "memory" manager I've found. I say memory manager because it allows me to store not just passwords to my accounts on web apps, but much more, including credit cards, software licenses, membership information, etc. Even better, it lets me sync all of this to a cloud service like Dropbox or iCloud, and access it on all of my devices.

    1Password is rooted in GOOD CRYPTOGRAPHIC PRACTICES, and while it's a bit steep in price for the pro version, it offers a ton of functionality for free as well.

  • Alfred

    This might look like Spotlight, but it is NOT. Manage clipboard history, traverse the filesystem, search the web, define your own custom macros, and more! This is a productivity tool like nothing else, and is infinitely customizable.

    I often use this to quickly look up documentation in Dash, or jump straight to stories I'm working on at work. Imagine, instead of opening your browser, going to Jira, searching for your ticket in the kanban, clicking it and then clicking through to details, you can simply press ^space jira <ticket number>!

  • Dash

    Dash is a native documentation manager that downloads and keeps up-to-date documentation for programming languages and frameworks alike. Think of it as documentation and man-pages just a keystroke away.

    I connect this app up with Alfred and Atom, allowing me to quickly jump to documentation pages for a glance -- think ^c -> dash activesupport::inflector to get taken straight to the Rails docs!

  • Kaleidoscope

    I use this as a GUI for Git. It's quick and easy to set up as your difftool and mergetool, allowing you to visually resolve merge conflicts, and see changes between commits. It also allows "diffing" images, and many other file types.

  • SizeUp

    Because, well, to hell with mouse-based window management. Quickly split, move, and center windows in any app!

Summary

Thanks for hanging on this long! I hope you learned about something new.

Since I could probably write an entire post this length about each piece of software, please comment below and let me know what you'd like to learn more about. I'm happy to share the way I configure Atom, more about my customizations to Fish, or other software I use day to day.

Thanks for reading!


← Back to Overview