I’m currently in the middle of inventorying my machine so I can retire the time machine image that has spanned far too many years and far too many machines. Rather than stuffing this in Evernote to be used once I figured I’d post this to the community.

What other frontend tools are missing? Which ones have better alternatives?

Editors

  • SublimeText 2

    Common plugins include:

    • Package Control - Allows all other plugins to be installed
    • BracketHighlighter
    • Git
    • Handlebars.tmBundle
    • JsFormat
    • JsHint
    • PrettyJSON
    • Stylus
    • SublimeSaveOnBuild
    • TrailingSpaces

    Useful config options:

    {
  "bold_folder_labels": true,
  "draw_white_space": "all",
  "ensure_newline_at_eof_on_save": true,
  "file_exclude_patterns":
  [
    "*.tmproj",
    "*.sublime-workspace",
    "*.class",
    ".DS_Store"
  ],
  "folder_exclude_patterns":
  [
    ".svn",
    ".git",
    ".hg",
    "CVS",
    "node_modules"
  ],
  "highlight_line": true,
  "highlight_modified_tabs": true,
  "rulers":
  [
    100
  ],
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

SCM

  • Git Command Line

    Your mileage may vary but by far the strongest git client out there.

    Most common git commands

    • git checkout -b $newBranchName
    • git stash
    • git pull --rebase (Warn do not do after a branch merge)

    Ensure that your version of git has completions enabled (this might require manual installation)

    Customizing your bash prompt for git status is also very helpful:

    This script whose origin has been lost will output the current branch and change status in your bash profile.

    function parse_git_branch {
  git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
function last_two_dirs {
  pwd |rev| awk -F / '{print $1,$2}' | rev | sed s_\ _/_
}

c_cyan=`tput setaf 6`
c_red=`tput setaf 1`
c_green=`tput setaf 2`
c_sgr0=`tput sgr0`

function proml {
  PS1='\h:$(last_two_dirs)\[$(branch_color)\]$(parse_git_branch)\[${c_sgr0}\] \u\$ '
}
function branch_color() {
  if git rev-parse --git-dir >/dev/null 2>&1
  then
    color=""
    git diff --quiet 2>/dev/null >&2
    if [[ $? -eq 0 ]]
    then
      color=${c_cyan}
    else
      color=${c_red}
    fi
  else
    return 0
  fi
  echo -ne $color
}

proml

  • Gitx

    GUI frontend on various commit related git operations. The staging view is very valuable for doing interactive commits and self-code review at commit time.

  • SourceTree

    General git repository viewer. Helpful for viewing stashed changes that may have accumulated on your local tree.

  • git-extras

    A collection of useful tools for doing higher level git commands such as delete-branch. When installing make sure that the command line tab completion tools to no error out as these are very helpful.

Debugging and Optimizing

  • Charles

    HTTP proxy and debugger with easy to use interface.

  • xScope

    Inspect/measure mocks and final rendered pages.

  • Gradient Scanner

    (Shameless plug) Extract CSS gradients from flatted mock images.

  • ImageAlpha/ImageOptim

    Image optimization tools. Performs both lossless and lossy compression of image assets.

Documents

  • Dropbox

    Easy way to backup remotely and share content across the team.

  • Evernote

    Free notetaking service.

  • MS Office

    Because somethings you can’t escape.

  • MS Remote Desktop Client

    Again somethings you can not escape.

Communication

  • Adium

    Chat over many protocols. Most common among the team are GTalk and AIM.

  • Propane

    Team chat. Setup growl notifications and stay connected.

  • Skype

    Sometimes you need to use your voice. Horrible at IM.

  • ScreenFlow

    Generate screen casts for sharing content with coworkers or debugging transient behaviors.

System

  • Alfred

    Search-based system launcher.

  • Growl

    Common notification system for Lumbar builds and Propane and others.

  • Divvy

    Window position manager

  • Stay

    Utility which will restore your windows when you connect or disconnect a monitor.

  • BetterTouchTool

    Keyboard/mouse/touchpad gesture mapper.

  • Cloud App

    Dirt simple screenshot sharing app. Useful for sharing screenshots and other local content over IM and email when attachments might not be supported or supported easily.

  • Homebrew

    OSS package manager.

  • nvm

    Node version switcher. Easily allows for switching between different versions of node.

    Current recommendations for the latest 0.8 node branch for running the development build stack as the watch issues on the 0.8 branch seem to have been resolved.