Me!

TJ VanToll

Keyboard Shortcuts for OS X Web Developers

| Comments

Recently some minor RSI -like symptoms in my right hand have forced me to re-evaluate my day to day computer usage. Since the symptoms are exclusively in my right hand, I decided to start by restricting my mouse usage as much as possible.

To discourage my mouse using tendencies, I decided to only use the mouse left-handed. After a few minutes I found that my current repertoire of keyboard shortcuts did not meet my new mouse-free workflow.

To build my keyboard portfolio, I’ve been accumulating a list of shortcuts I find handy near my desk. I thought I’d post the list here in case others might find them useful. This list is not intended to be comprehensive; these are merely shortcuts that I have found helpful.

OS X

  • Control + ← β†’ Move one space to the left
  • Control + β†’ β†’ Move one space to the right
  • Control + ↑ β†’ Enter mission control
  • Control + ↓ β†’ Leave mission control
  • Command + Tab β†’ Switch applications
  • Command + ~ β†’ Switch windows within an application
  • Control + fn + F3 β†’ Summon the dock (arrow keys are pretty intuitive from there)

Screenshots

  • Command + Shift + 3 β†’ Full page screenshot
  • Command + Shift + 4 β†’ Screenshot of section of screen
  • Command + Shift + 4, then Space Bar β†’ Screenshot of application window

Finder

  • Command + O β†’ Open (useful for directories)
  • Command + Delete β†’ Delete file
  • Command + W β†’ Close Finder window

Browsers

  • Command + W β†’ Close current tab
  • Command + Shift + W β†’ Close current window
  • Command + 1 β†’ Switch to tab 1, works for 2 through 9 as well
  • Control + Tab β†’ Switch to next tab
  • Control + Shift + Tab β†’ Switch to previous tab
  • Command + Shift + T β†’ Open previously closed tab
  • Delete OR Command + [ β†’ Back
  • Command + ] β†’ Forward
  • Command + ↑ β†’ Scroll to top of page
  • Command + ↓ β†’ Scroll to bottom of page
  • Space Bar β†’ Page down
  • Command + Option + U β†’ View Source (Chrome, Opera)
  • Command + U β†’ View Source (Firefox)
  • Command + Option + I β†’ Open Dev Tools

I also make use of a Chrome extension that allows me to reorder tabs using Control + Shift + Page Up and Control + Shift + Page Down.

Sublime Text 2

  • Command + P β†’ Fuzzy search of files in current project
    • Start with @ β†’ Search symbols in current file
    • Start with # β†’ Search current file
    • Start with : β†’ Goto line number
  • Command + Shift + V β†’ Paste and indent
  • Command + L β†’ Select current line (can be repeated to select multiple lines)
  • Command + D β†’ Select word (repeat to select next occurrence for multiple editing)
  • Command + Return β†’ Insert new line after current line
  • Command + Shift + Return β†’ Insert new line before current line
  • Command + / β†’ Comment out current line or selection
  • Command + Option + / β†’ Block comment selection
  • Control + Shift + K β†’ Delete current line
  • Command + K + K β†’ Delete from cursor to end of the line
  • Command + K + Delete β†’ Delete from cursor to the start of the line
  • Control + Command + ↑ β†’ Move selected line(s) up
  • Control + Command + ↓ β†’ Move selected line(s) down

Layout

  • Command + K + B β†’ Toggle sidebar display
  • Command + Option + 1 β†’ One editor column
  • Command + Option + 2 β†’ Two editor columns
  • Command + Option + 3 β†’ Three editor columns
  • Command + Option + 4 β†’ Four editor columns
  • Command + Option + 5 β†’ Grid View (2 X 2)
  • Control + [1, 2, 3, 4] β†’ Focus group
  • Control + Shift + [1, 2, 3, 4] β†’ Move current file into group

Terminal

  • Control + A β†’ Move to beginning of line
  • Control + E β†’ Move to end of line
  • Control + U β†’ Clear text from cursor to the beginning of the line
  • Control + K β†’ Clear text from cursor to the end of the line
  • open . β†’ Open the current directory in a new Finder window

Twitter

  • ? β†’ List all available keyboard shortcuts
  • . β†’ Load new tweets

Gmail

  • ? β†’ List all available keyboard shortcuts
  • C β†’ Compose a new message

Applications

Being a Windows 7 user in a previous life, I miss its really nice set of keyboard shortcuts to manage windows.

To help fill the gap on OS X, I’ve been using a 3rd party application, Divvy. It allows you to assign custom keyboard shortcuts to resize and align windows. I use Control + Command + Space Bar to activate Divvy. From there I have the following keys to resize windows predefined:

  • D β†’ Dominant, left 5/6 of the screen
  • S β†’ Sidebar, right 1/6 of the screen
  • T β†’ Top half of screen
  • B β†’ Bottom half of screen
  • L β†’ Left half of screen
  • R β†’ Right half of screen

Comments