Why (and How) I Use Sublime Text

By

Once upon a time, I was a fresh website developer. Like most beginners, I started with the ubiquitous Dreamweaver (Version 4!), and surprisingly it wasn’t a pirated version – my dad had bought a copy long ago. I learned HTML both by reading books and using the WYSIWYG editor then switching to code view to see what Dreamweaver thought the code should be. I eventually learned, however, that not only are table-based layouts out of date, so is Dreamweaver.

When I grew out of Dreamweaver into fully code mode, I first switched to Notepad++. It was free, and it was simple. I stuck with it as long as I was working on Windows. This came to a screeching halt, however, when I started working at Quicken Loans – welcome to the world of development on a Mac.

Using SublimeText on a LESS file for this blog

I needed to find a cross-platform (so I could use it handily both at home with Windows and Linux and at work with a Mac), heavy-duty, coder-ready text editor. Enter Sublime Text. It’s fully cross-platform, including 64-bit and portable versions, and another of my favorite features is the fact that the settings and preferences are plain text (Well, technically JSON) and therefore I can copy them to whatever computer I’m working on and start up exactly how I left off.

Sublime also has a robust package repository you can use to rapidly install dozens of plugins and snippet libraries.

I commonly develop using WordPress, jQuery, and LESS CSS, and Sublime has plugins to meet both those needs. It also has a robust FTP plugin that removes middlemen like FileZilla.

In order to install the package installer, you have to follow the instructions below (taken from here):

Open the Sublime Text console, by hitting Ctrl + ` (or View > Show Console) and paste the following command:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'


After you have installed and restarted Sublime Text, hit Cmd + Shift + P to open up the Command Pallette. You’ll see a bunch of options; right now we’ll focus on Discover Package and Install Package.

If you already know what packages you want to install then skip right to Install Package, and either highlight the package you want to install and hit Enter, or click on it. If you’re not sure yet, then browse the Sublime Text Packages page.

The only disadvantage of Sublime Text is that it’s $59 for a license (and the FTP plugin isn’t free either), but it has an unlimited trial period with only an occasional nag screen. I worked with Sublime for over a year on the trial version and today broke down and paid for it. Why? Because it’s worth it. Maybe you’ll find it is too.

Comments – or, why the f/**/ck did I do that?

By

Something many developers are guilty of is not commenting their code. I’m guilty of it, you’re guilty of it, your favorite rockstar programmer is guilty of it. You can’t go back and fix this, often enough – your CSS files are probably incomprehensible to you by now. Mine usually are. So how do you fix this going forward?

Comment “Headers”

The biggest help, for me personally, is to use comments to create sections in my CSS files. I use three-line comments as “headers” – specific sections that are usually surrounded by a container div, such as the header, or sidebar. I use one-line comments as separators for specific things I might look for often enough in the code but are single items. Like this:

/*------------------------------------*\
    HEADER
\*------------------------------------*/

.banner {
    background: url('images/banner.png') repeat 0 0 transparent;
    width: 100%;
    position: relative;
}

/*LOGO--------------------------------*/
.banner h1 a {
    background: url('images/logo.png') no-repeat 0 0 transparent;
    background-size: 100%;
    display: block;
    height: 88px;
    max-width: 407px;
    width: 100%;
}

This not only helps me find exactly what I’m looking to change or fix, but forces me to organize my CSS.

Mystery Fixes

Now, sometimes you have something that just shouldn’t work, and yet it does. You shouldn’t have to deal with that if you’re writing your own code from scratch, but if you have to deal with a company’s bloated existing stuff, you have to work with what you have.

When you make a “Mystery Fix” or do something that could break the design of the page later on, don’t make the same mistake your predecessor did, document it.

.page-id-16 #content .post-box > h1 { /*This page needs to have the title removed*/
        display: none;
}

If it’s more complex than the above, document why the fix works.