Building up Your development Toolbox


I'm Brent Swisher
I make websites and things

Grand Valley
State University

Just over 25,000 Students

GV Web Team

Centralized Team
Institutional Marketing

Web Team

Story Time

It's 2014

My house is sinking

I need a beam

Which means I need a plumber

So I meet Bill

Bill teaches me about web development??

it would
cheapen the trade.


It's this

Evaluating Tools

Too many options

How do you decide?

  • How does it make my life better?
  • How does it make my life worse?
  • Which matters more?

Why is this important?

A tale of three developers

  • The jQuery Kid
  • If it isn't broke...
  • I don't have time...

My Favorite Tools

Sublime Text

Sublime logo


Faster Editor

Multiple Cursors

Say What?
Open last tab
Select Next (cmd+D) Open last tab
Select All (Ctrl+cmd+G) Open last tab

Find Anything

Browse Files (cmd+p) Open last tab
Jump to line (cmd+p, :) Open last tab
Jump to function (cmd+p, @) Open last tab

Other Fun Things

Open Previously Closed Tab (Shift+CMD+T) Open last tab
Package Manager Open last tab

Favorite Packages

  • Bracket Highligher
  • Better Completions
  • Sidebar Enhancements
  • SublimeLinter

iTerm 2

iTerm logo
Tabs/Panels Open last tab
Go Back In Time Open last tab

Other Fun Things

  • Multiple Profiles
  • Paste History
  • Integrated 'ps' window
  • Better Color Choices


Grunt logo
Live Reload Grunt Watch
Code Linting Grunt Linting
Compression/Pre-processors Grunt Minify


Slack logo
Team Chat Slack Team Chat
Multi-person DM Slack DM
Reminders Slack reminders
Integrations Slack Polls
Custom Bots Slack Bots


Site Improve

Color Oracle
Code School

Filters screen to imitate color blindness

  • Deuteranopia
  • Protanopia
  • Tritanopia

Colour Contrast Analyzer
Colour Analyzer

Contrast Ratio
Contrast Ratio


Eye Dropper
Eye Dropper

Bootstrap Themes
cat ipsum

What Font
What Font


Measure It

Image Size Info
Image Size Info
  • Chrome Extension
  • Right click to view image
    • Size
    • Displayed & Actual Dimensions
    • Path

OSX Resizer
OSX Resixer

Color Thief
Color Thief


Egg Timer
Egg Timer

Pass the time in the url


Useful for the Pomodora Technique

Code School
Code School

Performance Tools

Google Page Speed
Page Speed

Tiny PNG

Web Page Test
Web Page Test


Latin is boring

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cat Ipsum
Cat Ipsum
Bacon Ipsum
Bacon Ipsum
Hipster Ipsum
Hipster Ipsum
Grand Perspective
Grand Perspective



Street Sharks

Gifs for everything!!

Place Kitten

What’s My Browser

The Command Line

Git Hist
hist = git log --pretty=format:\"%ad - %an | %s%d \" --graph --date=relative

Git command line alias to semi-graphically show git history.
(Set in ~/.gitconfig)

git log
git hist
Git Files
files = !sh -c 'clear && git log --oneline --stat -n ${1:-5}' -

Git command line alias to show recently changed files.
(Set in ~/.gitconfig)

git log
Better ls
alias ls='ls -GFh'

Add color and make file size human readable

LS with color
File Size
alias filesize='du -sm ./* | sort -nr'

Display a list of the files in a folder sorted by file size

LS with color
Customize Prompt
source /usr/local/git/contrib/completion/
source /usr/local/git/contrib/completion/git-completion.bash
export PS1='[\[\e[0;31m\]\h\[\e[m\] \W\[\e[0;30m\]$(__git_ps1)\[\e[m\]]\$ '

Display the host, the current directory, the git branch, and the git change state
Git Prompt
Git Complete

Custom Prompt
Add Color to Git
    ui = true
    branch = auto
    diff = auto
    status = auto
[color "branch"]
    current = yellow reverse
    local = yellow
    remote = green
[color "diff"]
    meta = yellow bold
    frag = magenta bold
    old = red bold
    new = green bold
[color "status"]
    added = yellow
    changed = green
    untracked = cyan

Adds color to different git file states

Git Color
Better SSH

SSH Keys
SSH Alias

Build your own tools

Task Detail
Zebra Details
Error Detail
Hippo Details

"We become what we behold. We shape our tools and then our tools shape us."

Marshall McLuhan

Thank You!