Widerbug 1.2.1 for Firefox 3

For those eagerly anticipating Widerbug: Widescreen Firebug for Firefox 3, the wait is over. Firebug 1.2.1 was just recently released, and I’ve merged the Widerbug modifications into the latest version and tested them under Windows XP and Mac OS X on Firefox 3.0.1.

Head on over to the Widerbug page to grab the latest version and get coding, widescreen style!

Widerbug 1.2.1 for Firefox 3

fmTuner: A Last.fm Plugin for WordPress

fmTuner is a WordPress plugin for retrieving song details from your Last.fm profile and publishing them anywhere in your WordPress theme. It provides options for choosing among your Recent, Loved, or Top tracks, as well as tools to adjust the update frequency and appearance.

Of particular note is the customizable Display Format option. Using simple tags like [::artist::] and [::image::] intermixed with regular HTML, you can tweak your Last.fm tracks exactly how you like, or however your WordPress theme requires. You have full control!

Download

Download the latest fmTuner from WordPress.org

Requirements

  • WordPress 2.7 or newer.
  • PHP 5 or newer
  • Basic knowledge of PHP, HTML, and WordPress.

Installation

  • Upload fmtuner.php to a directory inside /wp-content/plugins/ directory. For example: /wp-content/plugins/fmtuner/fmtuner.php
  • Ensure /wp-content/plugins/fmtuner/ is writable by your webserver.
  • Activate the plugin through the “Plugins” menu in WordPress.
  • Set up options in the “Settings” menu in WordPress.
  • Place the PHP code if(function_exists('fmtuner')) { fmtuner(); } in your templates, to call up fmTuner.

Release History

  • fmTuner 1.1
    Released on Feb. 1, 2010
    Added a placeholder image field to the fmTuner Settings page, which will be substituted when tracks have no artwork.
    Tested under WordPress 2.9.1.
  • fmTuner 1.0.8
    Released on Nov. 3, 2009
    Fixed a bug with the [::url::] fmTuner tag that caused Last.fm links to appear incorrectly.
  • fmTuner 1.0.7
    Released on Apr. 23, 2009
    Tracks with foreign character sets now display more accurately.
  • fmTuner 1.0.6
    Released on Mar. 29, 2009
    You can now display more than 10 Recent Tracks, and you should get fewer tracks without artwork.
  • fmTuner 1.0.5
    Released on Mar. 22, 2009
    Track information is now properly escaped to handle $ signs, quotes, and other non-alphanumeric characters.
  • fmTuner 1.0.4
    Released on Dec. 14, 2008
    Made minor tweaks for fmTuner Settings page under WordPress 2.7.
  • fmTuner 1.0.3
    Released on Nov. 15, 2008
    By request, a [::number::] fmTuner tag has been added, which emits a sequential number for each track (starting at 1). This is particularly useful for CSS and JavaScript display purposes.
  • fmTuner 1.0.2
    Released on Oct. 5, 2008
    Added a cURL-based alternative to file_get_contents to hopefully resolve “URL file-access is disabled” issues. If allow_url_fopen is disabled in the php.ini, cURL will be used to fetch the Last.fm feed instead.
  • fmTuner 1.0.1
    Released on Sept. 9, 2008
    Added better failure checking and informational messages, removed development code, and updated instructions.
  • fmTuner 1.0
    Released on Sept. 6, 2008
    Initial release.
fmTuner: A Last.fm Plugin for WordPress

Finding the Perfect Programming Font

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

BitStream Vera Sans Mono

fonts_bitstream_vera_sans_mono_13

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

fonts_panic_sans_13

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

fonts_consolas_14

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. More on the cursor issue here, including a fix

Monaco

fonts_monaco_12

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

fonts_droid_sans_mono_13

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.

Finding the Perfect Programming Font

Widerbug: Widescreen Firebug

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 spare pixels on the side go unused.

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.

Release History

  • Widerbug is Retired
    January 6, 2011
    Firebug 1.9.0 added widescreen support, making Widerbug obsolete
  • Widerbug 1.5.0
    Released on January 25, 2010
    Merged Firebug 1.5.0 changes, for Firefox 3.6.*
  • Widerbug 1.4.0
    Released on July 17, 2009
    Merged Firebug 1.4.0 changes, for Firefox 3.5.*
  • Widerbug 1.3.3
    Released on May 25, 2009
    Merged Firebug 1.3.3 changes, for Firefox 3.0.*
  • Widerbug 1.3.0
    Released on Jan. 8, 2009
    Merged Firebug 1.3.0 changes, for Firefox 3.0.*
  • Widerbug 1.2.1
    Released on Sept. 13, 2008
    Merged Firebug 1.2.1 changes, for Firefox 3.0.*
  • Widerbug 1.0.5
    Released on Jan. 19, 2008
    Initial release, for Firefox 2.*

Download

Install Widerbug
(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, just to be safe.)

Widerbug: Widescreen Firebug

10 Photoshop Selection Tips

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->pick a 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.

10 Photoshop Selection Tips

Setting up MySQL 5 and PHP 5 under Mac OS X (Tiger)

While setting up MySQL 5 and PHP 5 today, I documented the steps I took to get it all running under Tiger. Here’s the basic rundown if you’d like to move to these new versions as well.

Downloads

Install Xcode

Installation of Apple’s Xcode Developer Tools is straightforward — just install the .pkg file inside the .dmg if you downloaded it, or run the .pkg from the discs that came with your computer.

Install MySQL 5

Setting up MySQL is just as easy as installing Xcode, as the developers have kindly put together a .pkg installer. You could always compile it yourself if you have the need. Also included in the .dmg are a StartupItem and Preference Pane, both of which I find handy (although StartupItems are a bit out-of-date, and should probably be replaced with a launchd item).

Install PHP 5

Unpack PHP’s .tar.gz file with your favorite decompression utility, and open a Terminal window. Type cd, followed by a space, then drop the uncompressed php-5.2.1 folder right into the Terminal window and hit Return to change directory to the PHP files.

Type ./configure --with-mysql=/usr/local/mysql --with-apxs=/usr/sbin/apxs to configure the PHP installation, noting the location where MySQL keeps its files (so PHP knows how to get to it in the future).

While PHP is configuring, in a new Terminal window, you should set the root password for MySQL.
Enter cd /usr/local/mysql/bin,
then ./mysqladmin -u root password 'new-password', where new-password is your chosen MySQL root password. Note that this has nothing to do with your computer’s “root” password, and is entirely separate.

Back at the PHP prompt, you’ll see “Thank you for using PHP.” when it’s done configuring. You can then enter make to compile PHP from the source code. This may take a while. When done, enter sudo make install to install the files to their predetermined locations.

Reconfigure Apache

You’re almost done, except that the Apache web server doesn’t know to handle .php files for PHP 5. PHP 4 comes preinstalled with Mac OS X, but PHP 5 changes your Apache config file to enable itself (to include its shared objects when Apache boots), which turns off PHP 4. In this state, .php files will be printed out to the web browser as text files instead of executed — that’s not good! You’ll have to tweak the config file and reboot Apache to make it all go again. If you have the TextMate command-line utility mate installed, these next steps are quite easy.

Enter sudo mate /etc/httpd/httpd.conf (or sudo pico /etc/httpd/httpd.conf without TextMate) in the Terminal to edit the Apache config file. Find <ifmodule mod_php4.c> and change that 4 to a 5, as we’re now using mod_php5.c.

You’ll also want Apache to recognize index.php as a Directory Index file, so hunt down DirectoryIndex index.html and add a space, then index.php to the list, so it looks like DirectoryIndex index.html index.php when done.

At this point you can save and exit if you prefer, but I like to make one last change so I don’t have to dig to /Library/WebServer/Documents every time I want to edit a file I’m working on. In the root of your hard drive, create a folder called WebServer, and then jump back to TextMate (or the Terminal window) where you’re editing the Apache config file. Find the line DocumentRoot "/Library/WebServer/Documents" and change it to DocumentRoot "/WebServer". After making this change, also change the location a few lines down: <directory "/Library/WebServer/Documents"> to <directory "/WebServer">. Finally, save and exit.

Back at the Terminal prompt, enter sudo apachectl graceful to reboot Apache and let everything fly. I hope that helps some people setting up a PHP coding environment out there! A final note: watch out for the “smart quotes” WordPress likes to insert — they may cause copy-and-pastes to produce failures in the Apache config file.

Setting up MySQL 5 and PHP 5 under Mac OS X (Tiger)

iTunes Podcast Auto-Subscribe

A few days ago, Jon Maddox and I found the need to make iTunes to subscribe to a podcast with one click from Safari. After a few guessing attempts and some meager Googling, we were unable to come up with a solution. Today, I ran across a tutorial on how to do just that. The pcast:// prefix, instead of http:// will make the Mac version of iTunes open and subscribe to the podcast URL immediately following the prefix. For the Windows side of things, there are several more steps which involve the creation of an XML file linking to the podcast. With a little server-side user-agent switching or some other per-client trickery, it should be relatively simple to produce a Mac or Windows “one click subscribe” link. Check out the full details at Podcast Shuffle.

iTunes Podcast Auto-Subscribe