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

Hi-Res iTunes Artwork

Tristan Pemble has posted some cool iTunes Music Store hacks, which include one tool that can grab the full size album artwork from any given album. All you have to do is find the album on iTMS, right click the title, choose Copy iTunes Music Store URL, and paste it into the field. It’s great for filling in missing artwork on ripped/downloaded music. Other cool hacks include a music video and movie trailer tool, and also one to view the raw XML response from iTunes’ servers (for debugging or general poking around).

Update: This method no longer works, but try my new PHP script here.

Hi-Res iTunes Artwork

Tagging Standards

Sites like del.icio.us organize data through the use of tags, which I think is a brilliant idea. However, I disagree with the occasional comment lamenting the lack of tagging standards. I think the absence of a standard encourages a diversity of categories, bringing in more related content that would not otherwise be found.

The idea behind letting users tag their own content goes beyond simple per-user categorization. The theory is that, when enough users have tagged the same piece of information, it should be possible to find similarities between tags and produce an “average” list of tags for that data. While some users may append not-so-common tags, if enough do, the popular ones will rise to the top with the rest and create a new commonly used tag.

I’m wondering, though, what cutoff should be used to gauge when a tag or grouping is “popular enough”? And what tag sample size is necessary to determine that, as well?

Tagging Standards

The Stupid Questions

When you ask a colleague for help, particularly in programming, you want him to know less about your project… so he will ask the stupid questions you sub-consciously avoided asking yourself because you thought you knew the answer, when in fact you didn’t.

I’ve thought about this many times while programming, and I’ve never seen it said so well. Sometimes, when some code of mine isn’t working, I’ll take a break and do something else and work on it later. Quite often, taking a new look at the code forces you to (inadvetently) ask yourself those stupid questions. I almost always find that I’ve made an assumption somewhere along the lines, and my thoughts were not consistent with the actual workings.

The Stupid Questions

Google Maps API

A note to web application developers — Google has finally opened their maps service via an API, allowing you to programmatically make use of their maps, as well as plot routes and markers. Previously, the only way to do such a thing was by disassembling the JavaScript which Google uses and creating your own unsupported solution. Now you can create a web application which reliably uses Google Maps without worrying about infrastructure changes affecting your code. You will need a (free) API key to make use of the service, which can be obtained here. I’m excited to see what new web-based tools can be built using the new Google Maps API! Any suggestions for a small project which makes use of it?

Google Maps API

Enhancing JavaScript Interfaces

Up until recently, I wasn’t a big fan of JavaScript, primarily because I was under the impression that it had limited functionality (possibly a result of seeing it only being used for popup windows and the like). Since I’ve started working on some Dashboard widgets, I’ve found tons of resources on doing useful things with JavaScript, including one recent site, script.aculo.us, which shows a number of ways to liven up web application interfaces. Animations like sliding, folding, fading, and even drag-and-drop resorting are all possible with the right JavaScript. If you’re into creating cool web apps (like Backpack), I highly recommend checking it out. Even if you’re not a coder, script.aculo.us is still worth a look, as it’s rather impressive to see some of these things happening in a web browser. I hope this is only the beginning for interactive web applications.

Enhancing JavaScript Interfaces