Inspired by The Typography of Code, I took a few snapshots of some of my favorite programming fonts.

BitStream Vera Sans Mono

BitStream Vera Sans Mono is a completely free font part of the GNU font package and has been my preferred coding font for the last few months. The characters are a little tall, but are very clear about which is which.

Panic Sans

Panic’s one-window web development application, Coda, ships with a great default programming font very similar to BitStream Vera Sans Mono. You can make system-wide use of this gem by digging through Coda’s application bundle content and copying it to your global Fonts folder.

Consolas

Consolas ships with Windows Vista as part of Microsoft’s new font pack, and is so close to being my favorite programming font, however the blinking cursor is positioned a bit too low when displayed on a Mac. The fact that my focus is almost always exactly in that very spot makes Consolas like the smallest of pebbles in your shoe, despite its clearly differentiated characters, comfortable height, and curvier-than-average parentheses. It’s worth nothing that this issue doesn’t seem to occur on Vista and XP systems.

Monaco

The old Mac programming standby, Monaco, has been around for many years, as it was originally designed in the early days of the Mac. You may recognize it better in aliased 9pt size in a BBEdit window. But this is the age of Mac OS X — give your eyes a break and use the built-in anti-aliasing and get rid of those jagged edges!

Droid Sans Mono

At last, I’ve found my perfect programming font! Droid Sans Mono comes with Google’s Android mobile phone, which ships with a pack of specially crafted fonts for the phone. The zero and oh characters aren’t as clear as some of the others, but that’s not typically a problem for me. Droid Sans Mono has the lower profile type of Consolas without the nagging cursor positioning bug. I think I’ll stick with this for the forseeable future.

If you do any amount of web developing with CSS and JavaScript, it’s probably a safe bet that you use the Firefox and Firebug combo to test ideas, tweak appearance and behavior of pages, and debug problems when they crop up. You might also use a widescreen monitor to provide more screen real estate to flip between your code and the rendered output. In an arrangement like this, the open Firebug panel takes up precious vertical space, while you have plenty of pixels to spare on the side.

After a few trivial changes to Firebug, I’ve modified it to open on the right side of the browser as a sidebar. With the stock plugin, you can achieve a similar layout by detaching Firebug from the current tab and moving its window in the same position, but this has a generally unwelcome side effect: the separate window doesn’t update when you switch tabs. With Widerbug, you can open the Firebug sidebar, and it will keep up with you as you switch tabs and maintain its width.

Works with:

• Firefox 1.5 - 2.0.0.*

Tested on:

• Firefox 2.0.0.11 Mac
• Firefox 2.0.0.11 Windows XP
• Firefox 2.0.0.11 Linux (Ubuntu)

(You may have to temporarily allow command-tab.com to install Firefox extensions. Also, if you’re currently using Firebug, please uninstall Firebug first, restart Firefox, and then install Widerbug. Having both loaded may cause issues, however I haven’t tried.)

While you’re installing plugins, here are a few of my favorites: ScreenGrab!, Web Developer Toolbar, Restart Firefox, and Duplicate Tab (And for completeness, the Photoshop file for the above Install Now button.)

Select a Layer Outline
Command-Click a layer thumbnail in the Layers palette to load a selection of its outline, including any anti-aliased (non-jaggy) edges. If your layer has an inherent opacity set (for example, if you opened a partially transparent PNG image), the opacity difference is included in the selection. Normal opacities set in the Layers palette, however, do not affect the selection.

Use Multiple Selections
Once a selection is made, there are a number of operations you can perform to modify your selection. Holding Shift and making an additional selection will add to your current selection, and Option will remove from it. Holding both Shift and Option will do something unique: wherever your two selections intersect will become the new selection.

Combine Layer Outlines
Using the first Command-click thumbnail hint with Shift, Option, or Shift+Option modifier keys, you can add, remove, or intersect selections using outlines of other layers. Your cursor will show +, -, or x to indicate which type of operation will be performed, respectively.

Move Selection While Dragging
While in the middle of dragging a selection, you can hold down the spacebar to move around the origin of the selection. This is extremely useful if you find that your selection is a bit off — Instead of re-making a new selection from scratch, you can make adjustments “on the fly.” When the spacebar is released, the selection seamlessly drops back into the default “grow” mode, using the new origin as the starting point.

Start at the Center
Hold down Option after starting a selection to expand from the middle, causing the outline to grow symmetrically in each cardinal direction. Add the Shift key into the mix Shift to maintain a square shaped ratio.

Fixed Ratios and Sizes
Using the selection tool options, you can set a fixed ratio or specific size, both of which are great for slicing out content with a pre-determined size, like that of a computer wallpaper. Using the ratio, you can select a portion of an image that would fit on your desktop. Once you have the portion selected, you can scale it down to the native resolution of your display, being sure that it will scale proportionally to the correct size.

Quick Mask Mode
By flipping into Quick Mask Mode, you can use paintbrush tools to “paint” the beginnings of a selection. When you leave Quick Mask Mode, the painted area becomes a selection which you can use right away or modify further.

Transform!
Use the Select->Transform Selection command to distort the current selection. Note that this applies to just the selection outline, not the content within it. (To change the content, do Edit->Transform->transform type).

Selection Paste Target
By making a selection and then pasting content into it, you can target exactly where the pasted content will land. Without a selection, pasted content simply gets dumped in the middle of the document.

Save Selections with the PSD File
Once you have your beautiful selection made and ready to use, you might consider saving for future use if it was particularly complicated to make, or if it’s a handy, reusable shape. Photoshop provides two simple commands for saving and loading selections. Choose Select->Save Selection to commit your selection to a given name. Retrieving it is as simple as picking the Select->Load Selection command, and choosing the name you saved the selection under earlier. Best of all, these named selections are included in the file, meaning you can save and re-open the document, and reload selections at a later date.