Slate

Slate is a window management tool for OS X. It differs from most because it’s designed to offer customisation over sensible defaults. In short, to use a hackneyed phrase: a programmer’s window manager.

There are two ways to configure Slate: a declarative way and using Javascript. I use JS, and recently uploaded my configuration to Github. I think Slate’s an awesome tool, so I wanted to go through how I use it.

As a warning, if they spoke Javascript in a foreign country, I’d just about be able to order a beer there.

Firstly, I set up five hotkeys, bound in a chaining fashion. The first key combination in the chain is ctrl-space, followed by one of:

• 1 to fill the left half of the screen with the current window.
• 2 to fill the right half of the screen with the current window.
• 3 to fill the screen with the current window.
• 4 to size the current window to a specific size and location I happen to prefer for text editors.
• 0 is a magic hotkey. When it’s pressed, I use a script to work out where to place my most commonly used applications.

Hotkeys 1 to 4 are fairly standard. To bind them is simple in Slate:

slate.bind("1:space,ctrl", function(){ 
    var current_window = slate.window();
    var current_screen_size = slate.screen().vrect(); 
    var w = current_screen_size.width; 
    var h = current_screen_size.height;
    position_window(current_window, 0, 22, w/2, h); 
});

The above, for 1 is hopefully straightforward. The position_window function is a short helper I defined.

However, the main reason I use Slate is for 0. I have three possible screen layouts: laptop + 27", laptop + 24" and just the laptop. The way Slate uses Javascript allows me to move and size windows based on my current screen layout. In practice, this means whenever I connect or disconnect a screen, I hit Ctrl+space, 0 and have most applications moved to their preferred places.

First, I define window groups using several objects, each of which is added to a sizes array:

var normals = new Object(); 
normals.names = ['Firefox', 'Google Chrome'];
normals.position_27 = [0, 22, 1366, 1019]; 
normals.position_24 = [0, 22, 1366, 1019]; 
normals.position_11 = "full_screen"; 
sizes.push(normals);

Hopefully the attributes are straightforward:

• normals is just a group. I could’ve used browsers in this case.
• names is the application names to use this group for.
• The three position_x variables define placements for the different monitor layouts above.

When I hit Ctrl+space, 0, a function is executed which loops over every application. For each application, I look in the sizes array for a group with a matching application name. If a match is found, the code pulls out the appropriate window metrics using the current main screen width and some constants for each of the possible monitors. Then it sets the size of the window:

var p; 

if (screen_width === DELL_27) { 
    p = apps.position_27; 
} else if (screen_width === DELL_24) { 
    p = apps.position_24; 
} else if (screen_width === LAPTOP) { 
    p = apps.position_11; 
} 

if (p === "full_screen") {
    full_screen(win); 
} else { 
    position_window(win, p[0], p[1], p[2], p[3]); 
}

The full code is here. There are a few special cases for troublesome applications, but otherwise this is it.

If you’ve wanted to control your windows in a comically precise manner, Slate is for you.