Sublime 2 - 4 Pane Grid View

Sublime 2 Power Tools

This is a very advanced technical article.

For years, as a developer, I used the fantastic Textmate software for writing code. I got used to it. It’s a power editor for Mac OS X and has bundle support (think of bundles as extensions or plugins) that enhance the functionality of the software) for just about every technology, from Subversion to Git to a bunch of things I don’t use in a PHP environment like C/C++ mallloc (memory allocation), Python, Ruby, etc. It’s even got a WordPress bundle!

The problem with Textmate, however, is that active development is slow. Like, extremely slow. Like, molasses slow. After five years of using version 1.5x, an alpha version of 2.0 finally emerged last year. It’s still in alpha. Pace of development is still painfully slow, and what is in the 2.0 alpha version is not ground-breaking compared to what is in the current stable version.

Along came Sublime 2. This is, by far, my favorite text editor ever. I’ve been using it for about six months. It emulates virtually everything Textmate does. Textmate does snippets (think of them as macros). Sublime 2 also does snippets and supports the Textmate style. (Hint: If you’re a WordPress developer, my favorite – and still most commonly used – snippet comes from Mark Jaquith who wrote this snippet to create WordPress widgets on the fly. It works in both Textmate and Sublime 2).

The great thing about Sublime 2 is that it is truly a hacker’s paradise. All the config files are JSON objects, so if you can write JSON, you can configure Sublime 2. None of this namby pamby UI/click/select from dropdown bulldookie. Write your code and mean it. Related is that the master configuration file is extremely well documented and you can override everything in it, not by editing this file, but by providing new values in the user configuration file.

Ok, let’s back up and get y’all up to speed on what I do when configuring my Sublime 2 environment.

Config Files

First, I recommend you look at the entire Default configuration file. Read all the settings and comments and understand all the possibilities you have. Your most comfortable environment won’t be mine. For me, I see the following configuration settings that I’m going to want to override. Keep in mind, I never edit the default configuration file. It gets overwritten on upgrade.

To access this file, go to Preferences >  Settings – Default 1.

Note that I have included the related Sublime 2 default comments along with the settings I wish to override.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// While you can edit this file, it's best to put your changes in
// "User/Preferences.sublime-settings", which overrides the settings in here.
//
// Settings may also be placed in file type specific options files, for
// example, in Packages/Python/Python.sublime-settings for python files.
{
// Note that the font_face and font_size are overriden in the platform
// specific settings file, for example, "Preferences (Linux).sublime-settings".
// Because of this, setting them here will have no effect: you must set them
// in your User File Preferences.
"font_size": 10,

// OS X only: When files are opened from finder, or by dragging onto the
// dock icon, this controls if a new window is created or not.
"open_files_in_new_window": true,

// Characters that are considered to separate words
"word_separators": "./\\()\"':,.;-<>~!@#$%^&*|+=[]{}`~?",

// When drag_text is enabled, clicking on selected text will begin a
// drag-drop operation
"drag_text": true,
}

These settings and their related comments may seem self-explanatory, but in case they are not…

font_size: This setting controls the font size in the editor. Derp.

open_files_in_new_window: As a developer on an 11″ MacBook Air, I hate this setting. As the name suggests, everytime you open a file, it’s going to be in a separate window. This may be okay if you have a ton of screen real estate, but if you don’t… well, I like to have windows open up in a new tab of my editor so I can access them quickly and easily without consuming precious real estate.

word_separators: This is a list of characters that serve as word separators. I don’t mean code word separators. We’re talking about in the editor. I want to be able to click a CSS selector that often comes with a dash in the middle, and highlight/select the whole selector. By default, if there’s a hyphen, only the portion of the word clicked will be highlighted.

For instance, if a <div> has a class="foo", and I click on foo, foo will, by default, be selected. But if that div has a class="foo-bar", then clicking on foo will only highlight/select foo (up to the hyphen) and not all of the, more contextually accurate, ‘foo-bar’. In my user configuration file, I’m going to remove the hyphen, and thus remove this annoyance from my life.

drag_text: This is an edge case setting, but it has bitten me a few times. If you’re in a window in Sublime 2, and you have a block of code selected, when this default configuration is in play, you can drag that text into another window. I can see the use for this, but it’s also thrown me for a loop more times than it’s been useful. I override this to prevent that from happening. If I really want text in another window, I’ll jkust do the traditional copy and paste.

Overriding Defaults

Knowing I want to change these settings, I can write my own JSON object into my User configuration (Preferences > Settings – User):

1
2
3
4
5
6
{
"drag_text": false,
"font_size": 15.0,
"open_files_in_new_window": false,
"word_separators": "./\\()\"':,.;<>;~!@#$%^&*|+=[]{}`~?"
}

Easy Peasey!

Installing Packages

Where Textmate had Bundles, Sublime 2 has Packages. Packages are extremely powerful.

NOTE: Install this first 2. Trust me. And get familiar with this.

There are a million and one different packages out there, depending on what your needs are. Installing a package is as simple as going to Preferences > Package Manager > Install Package. Note that you can also add new external repositories of external packages that Sublime 2 can also search.

Sublime 2 - 4 Pane Grid View
Sublime 2 – 4 Pane Grid View

Summary

Sublime 2, of course, has hundreds of different setups. It kinda just depends on your taste and not being afraid to try things. Because everything is based on text file configurations and settings, everything can be reversed. Don’t be afraid to break things. You can always back out. You can even set it up so that you have multiple files open in the same tab. Set it up the way you want it and go be more productive!

Notes:

  1. Sublime 2 works on Mac OS X, Windows and Linux. All options will be similar, if not identical, to what I’m providing here from an OS X perspective. If you can’t find what I’m referring to, think about where logically it might be in your menus.
  2. Specific installation instructions can be found here.

Read More

TUTORIAL: Developing Locally on WordPress with Remote Database Over SSH

Today, I went about setting up a local WordPress install for some development I am doing at work. The problem that existed is that I didn’t want to bring the database from the existing development server site into my local MySQL instance. It’s far too big. I figured this could be done via an SSH tunnel and so, I set abut trying to figure it out. The situation worked flawlessly and so, for your sake (and for myself for the future), I give you the steps.

Setting up the SSH Tunnel

I run a local MySQL server and that runs on the standard MySQL port 3306. So as these things go, I can’t bind anything else to port 3306 locally. I have to use an alternate port number. I chose 5555, but you can use whatever you want.

The command to run in a Terminal window is:

ssh -N -L 5555:127.0.0.1:3306 remoteuser@remotedomain.com -vv

A little bit about what this means.

the -N flag means that when connecting via SSH, we are not going to execute any commands. This is necessary for tunnelling as, we literally, will not execute any commands on the remote server. Therefore, we won’t get a command prompt.

the -L flag tells SSH that we are going to port forward. The following portion, 5555:127.0.0.1:3306 combined with the -L flag means, literally, forward all traffic on localhost (127.0.0.1) connecting on port 5555 to the remote server’s port 3306 (standard MySQL listening port).

The remote server and ssh connection is handled by remoteuser@remotedomain.com. This seems obvious, but just in case. You may be prompted to enter your SSH password.

The final part can be omitted, but I like to keep it there so I know what’s happening. The -vv flag tells the SSH daemon to be extra verbose about what is happening with the connection. It’s sort of a good way to debug if you need to, and to know that the port forwarding is actually taking place.

Configuring WordPress to use the Tunnel

Now that we have a successful SSH tunnel, you have to configure WordPress to use it. In the wp-config.php file, simply modify the DB_HOST constant to read:

1
define( 'DB_HOST', '127.0.0.1:5555' );

You need to add two more variables, though, to override WordPress’ existing siteurl and home options to allow you to work with the localhost domain, instead of redirecting to the remotedomain.com that is configured in WordPress.

1
2
3
define( 'WP_HOME', 'http://localhost' );

define( 'WP_SITEURL', 'http://localhost' );

BOOM!

With these configurations in place, loading up WordPress should now load in the database content from the remote host and you can get to work on local development. Word to the wise… don’t close the terminal window with the tunnel or the tunnel will be severed. If you have to minimize it so it’s not annoying you, go for it… just don’t close it.

Read More