Skip to content

Instantly share code, notes, and snippets.

@GabeIsman
Last active January 18, 2017 21:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GabeIsman/91a9f5b2fa1b1392f5315483f4f9dcb5 to your computer and use it in GitHub Desktop.
Save GabeIsman/91a9f5b2fa1b1392f5315483f4f9dcb5 to your computer and use it in GitHub Desktop.
Some quick notes on introducing a basic programmer's tool kit to new programmers.

The Keyboard

This may sound obvious, but typing is a lot faster than navigating with the mouse. Whenever possible you should be using hotkeys. You will become faster at doing everything on a computer. If you find yourself doing something over and over again, find a way to make it faster. Get in the habit of automating these repetitive tasks.

OS X

  • Cmd+tab flips between running programs, in order of last used.
  • Cmd+~ flips between open windows of a running program.
  • Cmd+space opens a search bar for finding anything: app, file, etc.
  • Cmd+, open the preferences/settings of the active program.

Iterm

Iterm is a replacement for Terminal.app (the native OS X terminal). It's nicer looking and easier to use in a bunch of ways. Here's a small peek:

  • Cmd+d: Split the screen horizontally into two panes (Mnemonic: divide)
  • Cmd+Shift+d: Split vertically. Super useful for, say, running grunt and an active terminal side-by-side.
  • Cmd+t: Open a new tab (Mnemonic: tab)
  • Cmd+w: Close a pane/tab/window
  • Cmd+] and Cmd+[: move between panes
  • Ctrl+tab move between tabs
  • Cmd+Shift+s: Save a configuration of windows and panes (you can set the location, command to run in each, etc.)
  • Cmd+Shift+r: Load a saved configuration. I use this to get a local EndRun development set up running quickly.

Spectacle

This is a small app for organizing windows. Provides hotkeys for making a window full-screen, half-screen (left or right), etc.

Sublime

Sublime is the text editor of choice for lots of programmers because it's out of the box configuration is really good. It just works. There are some powerful features that you should be using:

  • Add sublime to the command line. It's important to be able to open your text editor directly from the command line. It will save you lots of time navigating finder or dragging and dropping.
  • Open a project, not just a file. If you're in the project directory, the command subl . will open the project, with all the files in the sidebar. This enables the next trick (and lots of other stuff).
  • Use Cmd+p. This will open a search bar at the top to find a file by name (within the project). This is a 'fuzzy-finder', which means that you don't have to type things precisely to get where you need to go. E.g. apcs will bring src/assets/stylesheets/app.scss. This will save you a ton of time.
  • Use split panes. View -> Layout -> Columns: 2 will split your window in half. This is really nice for putting HTML and CSS side-by-side. Get crazy and split in your JavaScript too. Or a CSV. Cmd+[ and Cmd+] move between the panes (sound familiar?).
  • Reindent your code. Select everything (Cmd+a) and then go to Edit -> Line -> Reindent. This will clean things up. Especially useful when editing HTML for finding missing closing tags and the like.
  • Cmd+f open a search bar for the current file.
  • Cmd+Shift+f search the whole project. There are lots of powerful features in here too, limit the files, search by regex, etc.
  • Cmd+d select the current word if nothing is selected, find the next instance of the current selection and select that too. Cmd+k skip the current instance of the selection. Once you've selected a bunch of things you can start typing to change them all at once. This is unbelievably powerful when you get the hang of it.

Configuration

  • Remember Cmd+,? In sublime that opens two text files one which describes sublime's default settings, and one which is probably empty. There is a ton of awesome stuff waiting to be discovered here. Each line of the default settings has a comment describing what it does. If you see something you want to change, copy that line to the user-specific settings file, and change it to whatever you want. Here are the changes that I have found particularly useful.
{
    // Highlight the whitespace when a line is selected
    "draw_white_space": "selection",

    // Make sure that each file ends in a new line (makes Git happy)
    "ensure_newline_at_eof_on_save": true,

    // When text is selected, fill in search on cmd+f
    "find_selected_text": true,

    // Exclude these patterns on cmd+p
    "folder_exclude_patterns":
    [
        ".git",
        ".sass-cache",
        "tmp/cache",
        "node_modules"
    ],

    "font_size": 12,

    // Highlight the line with the cursor
    "highlight_line": true,

    // Draw a vertical line at 80 and 100 characters
    "rulers":
    [
        80,
        100
    ],

    // Save a file when focus is lost
    "save_on_focus_lost": true,

    // Shift+tab unindents a line
    "shift_tab_unindent": true,

    // Use two columns for tabs
    "tab_size": 2,

    // Convert tabs to spaces
    "translate_tabs_to_spaces": true,

    // Get rid of useless whitespace at the end of each line
    "trim_trailing_white_space_on_save": true,
}

Feel free to use this, or start from scratch and build up one of your own.

Packages

The built in sublime functionality is only a small fraction of what can be done with the editor. The rest of the power comes from third-party plugins. The most important of these is the meta-plugin, package control. With this installed installing further packages is done as follows:

  • Cmd+shift+p opens the 'Command Pallette'. This is another fuzzy finder, but instead of searching files, we are searching available editor commands. This is very useful. In this case the command we're looking for is 'Package Control: Install Package', typing install should be plenty.
  • This command will open another search bar where you can search the universe of available sublime packages. Want syntax highlighting for scss? Search for it. Markdown support lacking? I recommend MardownEditing. Want to see what's changed since your last Git commit? GitGutter will show you inline. Want to be able to open a color picker to choose a color from your editor? ColorPicker. And so on.

Snippets

  • Snippets are abbreviations that will be expanded automatically. For example, I use log<tab> as a shorthand for console.log(<cursor>);. You should figure out what things you type all the time and start making abbreviations for them. Plugins will sometimes add other snippets.

Vintage mode

If you're feeling especially ambitious you could consider giving Vintage mode a shot. It's a sublime text emulation of vi-editing. vi is an old-school editor that programmers have been using to be more productive for a long time. The basic philosophy is that your hands should never leave the home-row on the keyboard, and all movement and text-editing should happen primarily through the home row. It's a 'modal' editor which means that you have a mode where typing just issues commands, rather than adding text to the page. It's awesome, but a pretty steep learning curve at first. If you're curious, you can give it a shot by typing vimtutor in the terminal. Enabling this plugin is a great way to transition to a full-on modal editor like vim without jumping straight into the deep end.

Cheatsheet

There is too much here in this short document to absorb all at once. There are too many features in general to figure out all at once what the perfect workflow is. You should be building up this capacity over time as you do your other work. I recommend the following process:

  • Pick 5-10 features or hotkeys that seem like they would be useful to you. Write them down on a piece of paper and keep it next to your keyboard.
  • From time to time look over the piece of paper and remind yourself.
  • Whenever you notice yourself doing something without the hotkey on your cheatsheet, go back and do it again with the hotkey. Get in the habit.
  • When you feel like you've got one of the features or hotkeys down cold, cross it out and add something new.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment