OSX Frontend Toolchain

by on Jan.30, 2013, under Dev

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.

:, , ,

3 Comments for this entry

  • kpdecker

    Wow that is very cool. I’ll be forwarding this on to my UX team :)

  • Yoz

    Homebrew install requires the XCode command line tools, which fortunately you can download as its own 100MB standalone package instead of 1.4GB of XCode.

    Skitch for fast screenshot-grabbing and annotation. It’s free, and integrates with Evernote (since they’re now the same company).

    The GitGutter ST2 package is lovely – gives you visual indicators of which lines of a file have been edited.

    Is Growl really necessary any more now that we have OS X’s native Notification system, along with command line tools for accessing it?

Visit our friends!

A few highly recommended friends...