I love, love, love little things to help me have a better workflow. Sometimes, having to switch to iTerm to run some code from my editor is annoying, even if it takes only a second.


And now, with all the open-source software out there, there’s something for everybody, and I wanted to share with you good people some of the nice things I’ve found that make life easier.

Here’s a (mostly complete) list of what I use on a daily basis for development:

  1. iTerm
    That out-of-the-box terminal is so yesterday. iTerm offers some great features that you can utilise, including: 
     ‣ split panes
     ‣ shell integration
     ‣ mouseless copy
     ‣ paste history
     ‣ hotkey window
    And, it has better colour fidelity. Check out more features here.

    Note: For Mac only. For you Windows users out there, check out Cygwin as an alternative to your terminal console.
  2. Zsh
    ZShell, or Zsh, is a Unix shell designed for interactive use and a powerful command interpreter for shell scripting. Why this over bash (another Unix shell)? Because of the community-driven frameworks that make it even more enjoyable to use, in addition to these features:
     ‣ spelling correction
     ‣ ability to add supplemental info on the right side of the prompt (ex: git information)
     ‣ better completion ability 

    Frameworks: oh-my-zsh && prezto
    Personally, I use oh-my-zsh, but I’ve heard great things about prezto as well. What I love about the oh-my-zsh framework is all the plugins — which you can check out here.

    Note: It’s possible to use oh-my-zsh with Cygwin. Check out my cygwin-zsh repo here.
    (I made this so I could use ohmyzsh on my Windows laptop in a previous job.)
  3. Homebrew
    Known as the “missing package manager for OSX”. You can find some great packages, or in layman terms “installable bundles of source code”. 
    You can find the documentation here.

    Let me share with you some of my fave ‘brew formulae’:
     ‣ hub: command-line wrapper for git that makes you better at Github
     ‣ git-lfs: command-line extension/specification for managing large files with git
     ‣ trash: command-line program to move files/folders to trash
     ‣ wget: command-line package for retreiving files using HTTP, HTTPS and FTP
  4. Atom
    The hackable text-editor from Github. What I love about this text-editor is how customisable it is. I believe beauty and function go hand-in-hand with user experience so I really appreciate that I can make it my own. They have some great packages that make your workflow faster. Again, I’ll share some faves:

     ‣ colorpicker: choose your colours in different formats right in the text-editor
     ‣ pigments: displays the colours you use in the file (no more guessing/remembering what colour that hex code was!)
     ‣ script: run your code (file, selection, by line) in Atom 
     ‣ ruby-block: highlight matching for your Ruby code blocks 
     ‣ file-icons: shows icons next to your files that visually represent the type of file
     ‣ linter-ruby: lint Ruby code
     ‣ merge-conflicts: resolve Git merge conflicts in Atom
  5. SourceTree
    Great GUI for git. Being able to visually see what’s going on in your repo is really helpful, not to mention you can see the diffs in your files. Especially when you’re learning git for the first time, knowing visually what’s going on is really handy. And it’s still useful as a git master. As much as I love the command line, this is helpful if you’re facing some difficult git issues. Merge conflicts are never fun. 

    Speaking of git, if you ever need a refresher or are completely new to git for version control, check this out. Knowledge is power!
  6. ThrowAwayMail.com
    This is incredibly useful when you need some test e-mails but don’t want to go through the hassle of creating any. Generate a disposable e-mail address that you can use (you’ll receive emails!) — just be careful not to close the tab when you’re still using it, ’cause then you lose that one for good!

I also have a list of favourites for wireframing, prototyping, creating mock-ups, user-flows, and site-flows.

  1. Sketch
    It’s a bit pricey, but I’ve come to love Sketch and do prefer it to Adobe CS. Being able to re-use elements and styles quickly makes designing the prime focus. It’s got some great community-created add-ons that make designing even quicker.

     ‣ content-generator: dummy content generator (avatars, names, geo location, etc.)
     ‣ lorem-ipsum-generator: Lorem Ipsum placeholder text
     ‣ pixel-perfecter: because imperfect pixels are unacceptable!
     ‣ sketch-commands: scripts to make design life easier
     ‣ social-artboards: artboard presets for common image dimensions of social media platforms
     ‣ style-inventory: organise styles and merge styles of similar layers into one
     ‣ dayplayer-placeholder-images: create customised placeholder images
     ‣ measure: tool for measurements and design specs
  2. Omnigraffle && Balsamiq
    These I use for wireframing and creating the user- and site-flows. Balsamiq is what I started with, and I’m learning to effectively use Omnigraffle. They’ve both got their pros and cons, but I like to use them both.
  3. Marvel && InVision
    Both I use for prototyping my designs. It’s a great way to share your designs at the prototyping stage and get feedback for user experience. 
    Their blogs have some really great information regarding updates and new features, as well as just design news in general. It’s important to be user-oriented, both as a designer and developer.
    Marvel’s blog here.
    InVision’s blog here.