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.

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.

The Reeses Cake

So, I decided to start myself a little challenge. Start making a new cake recipe every so often. The first one? Reeses.

Here’s the recipe:

• 1/2 cup butter
• 1/2 cup peanut butter
• 2 cups sugar
• 4 eggs
• 2 tsp. vanilla extract
• 2 3/4 cups all-purpose flour
• 1 tbsp. baking powder
• 1 tsp. salt
• 1 3/4 cups milk
• 1/2 to 3/4 cup cocoa powder

1. Preheat oven to 350 degrees. Grease and flour two 8″ pans or one 8″x3″ pan.
2. Cream together butter, peanut butter, and sugar until extremely fluffy. Beat in eggs and vanilla.
3. Add baking powder and salt.
4. Add flour alternately with milk, about 1 cup at a time. Mix well – batter may be slightly lumpy looking.
5. Pour half of the batter into the prepared pan(s).
6. Stir cocoa powder into remaining batter.
7. Pour remaining batter into the pan(s) and swirl with a knife.
8. Bake until cake tests done (about 1 hour 10 minutes in an 8×3 pan).

And here’s the recipe for the frosting:

• 1/2 cup butter
• 1 1/4 cups creamy peanut butter
• 3tbsp milk, or more as needed
• 2 cups powdered sugar

1. Beat butter and peanut butter until very well blended
2. Grandually mix in sugar, and when it starts to thicken up, add milk, one tablespoon at a time
3. Once all the sugar is mixed in, beat for 3+ minutes to get it fluffy. Add more milk if it is not spreadable enough.

Now just frost the cake! I also sprinkled mini Reeses cups on top and finished with a dark chocolate drizzle. The cake disappeared in record time!

Blue…

class=”blueButton”

…and orange.

class=”orangeButton”

Let’s look at the CSS that it took to get us here.

.blueButton {
    color: #ffffff;
    padding: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    text-decoration: none;
    background: #5169e0;
}
.orangeButton {
    color: #ffffff;
    padding: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    text-decoration: none;
    background: #dea652;
}

You’ll notice that the styles for both classes are almost exactly the same, except for the background declaration.

This might not be a big problem if you’re running a small blog, or if you never ever plan to change the design of your buttons. But what if you want to suddenly go through and change the border-radius on all your buttons? You need to go find each and every declaration of a new button in the CSS, and hope you don’t miss one. Or just do something like this

.button {
    color: #ffffff;
    padding: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    text-decoration: none;
}
.blue {
    background: #5169e0;
}
.orange {
    background: #dea652;
}

class=”blue button”

class=”orange button”

The buttons look exactly the same, but from a developer perspective, it is far easier to maintain.

This is the error I was getting once I got to step 10 (which wasn’t step 10 at the time) of this guide. If this looks familiar, and this is where you’re stuck, then you will need to continue from step 8.

This guide assumes that you’re using Windows 7.

Step 1) Download the Sprint Galaxy Nexus 4G LTE drivers (Direct link to the exe on Samsung’s site. Do not download the Verizon version). It’s a normal installer, so double-click and follow instructions as usual.

Step 2) Turn on USB Debugging on your Galaxy Nexus by going to Settings > Developer Options > USB Debugging (See screenshot to the right).

Step 3) Download the Android SDK (to get ADB). If you’ve never installed the SDK before, follow the directions on CyanogenMod’s wiki.

Step 4) Download fastboot.exe (Alternate download) and save it to C:\android-sdk-windows\platform-tools

Step 5) Plug your phone into your computer.

Step 6) Hold Shift and Right click in C:\android-sdk-windows\platform-tools and choose “Open Command Window Here“.

Step 7) In the command window type:  adb reboot bootloader. This will restart your phone into the bootloader (see photo to the right). If you get “error more than one device and emulator”, try restarting your phone and doing step 7 again.

Step 8) Your computer will attempt to reinstall drivers for the phone. If it fails, follow these directions.

Step 8a) Go into your device manager. You should see, under “Other Devices”, something like “Android Device 1.0″ – if it doesn’t show up, you might need to reboot your computer.

Step 8b) Right-click on the device and click “Update Driver Software…”

Step 8c) Click “Browse my computer for driver software” and then “Let me pick from a list of device drivers on my computer”

Step 8d) Leave “Show compatible hardware” checked, and “Samsung Android ADB Interface” should show up under “Samsung”. If it shows up multiple times, click the first one (if this doesn’t work you might have to go through and pick the next one down on the list until it figures out which one it wants).

Step 8e) Click next, click “ok” on the warning that says that the driver might not be compatible, and wait for the driver to install. It should tell you the driver was installed correctly. If it was not, you might need to repeat step 8d.

Step 8f) Unplug your phone and reboot your computer. Once you rebooted, plug your phone back in and wait to see if it connects successfully. Your phone should still be in bootloader mode. If not, repeat step 7.

Step 9) Go back into C:\android-sdk-windows\platform-tools and reopen command window (as in Step 6).

Step 10) Type: fastboot oem unlock. The window will say “waiting for device” so be patient. Do not press the start button on your phone.

Step 11) Your screen should show something like the screenshot to the right. Use the volume keys to choose “Yes”, then press the power button to continue.

Step 12) Congratulations! Your bootloader is unlocked. Unplug the USB cable.

Step 14) Use the power button to select Start to reboot your device.

Step 15) If the phone loops during boot, do not remove the battery. You may need to wait for the device to do a factory wipe before it boots.