I've been running my different versions of Firefox under different profiles, that way I can keep each instance unique. This works great, but I still couldn't figure out how to open both Firefox 2 & 3 at the same time. Turns out I was missing the -no-remote command line parameter in my Firefox 3 shortcut.

Here's a great write up on how to run Firefox 2 and Firefox 3 simultaneously—which provides you with full instructions on setting your shortcuts up so you can run Firefox 2 & 3 at the same time.

Back in April, I posted a preview of a multicolumn dropdown plug-in I was developing for a project at work. Well today we finally officially released the mcDropdown plug-in. I was hoping to release the plug-in sooner, but other projects took precedence and releasing it just got delayed.

I'm really proud of the plug-in and think it provides a really unique form control.

Here's a list of the features:

• Creates a multi-column hierarchical select UI component
• Binds a text input field or div element to a list element (included nested lists)
• Menus are automatically split into columns as needed
• Menus are positioned to always stay on the screen
• Autocomplete keyboard entry (only valid options are allowed)
• Menu automatically scrolls into viewport when opened

You can view a live example over at the plug-in page.

mcDropdown jQuery Plug-in

If you like what you see, make sure to digg it.

Massimiliano Balestrieri posted a neat little script today in honor of Firefox 3 Download Day 2008. The concept is simple, change the appearance of the page in IE6 slightly by making it show up in black and white. So if you really want to protest IE6, this is a comical way to do it on your blog. I just find the effect hysterical.

/* 
 * 
 * Black'n'White plugin 1.0 
 * $Date: 2008-06-17 15:38:15 +0200 (mar, 17 giu 2008) $ 
 * $Rev: 177 $ 
 * @requires jQuery v1.2.6 
 * 
 * Copyright (c) 2008 Massimiliano Balestrieri 
 * Examples and docs at: http://maxb.net/blog/ 
 * Licensed GPL licenses: 
 * http://www.gnu.org/licenses/gpl.html 
 * 
 */ 
 
if(!window.BlacknWhite) 
    var BlacknWhite = {}; 
 
BlacknWhite = { 
    init     : function(options) 
    { 
        options = jQuery.extend({minor : 7}, options); 
 
           if(jQuery.browser.msie && jQuery.browser.version < options.minor) 
            jQuery("html").css("filter","gray"); 
    } 
}; 
 
jQuery(document).ready(function(){ 
    BlacknWhite.init(); 
    //BlacknWhite.init({minor : 8}); 
}); 

You'll need jQuery on your page to use this script (at least as-is) but it would be simple to adapt to either plain JS or another JS framework. The only thing really going on is it's setting a filter on the <html/> tag to show the whole page in gray.

I've added this script to this blog entry so you can easily view the effect.

I'm working on a dropdown menu based on the <ul /> tag. The menu can have an unlimited number of children menus and I decided the "suckerfish" method was a very effective method for achieving my menu structure.

One of the problems I ran into was trying to implement a drop shadow layer for the menus. While there are many ways to implement a drop shadow, I thought the most straight forward method was to use a shadow <div /> with the same dimensions of the menu it's shadowing. The problem I ran into is I couldn't properly get the drop shadow to appear below it's anchored menu. It kept wanting to appear above the menu.

In my code I was explicitly setting the <ul /> tag being displayed to have a z-index one higher than the drop shadow, but the drop shadow always remained on top. After tracking the problem for a bit, I realized was that the because of the nested nature of the <ul /> tags, even though I was explicitly defining a z-index, the <ul /> was inheriting from the parent.

The fix was just to move the shadow <div /> as a sibling to the <ul /> it's shadowing. Once I did this I was able to correctly place the shadow <div /> underneath the <ul /> tag it was shadowing.

[UPDATED: Thursday, February 28, 2008 at 8:02:17 AM]

I thought maybe this was a tip worth blogging. I like to use labels in my debug information as it helps me to quickly identify the debug statement that generated the output. Appending a label string to a simple value is easy enough in JavaScript, as it'll automatically be converted to a string. However, this doesn't work for complex values. You can place the label on a separate line, but I like to try to keep things to one line whenever possible. The way I do this is to use an array to output my label first and then the value:

This gives you the benefit of generating a label and a value all on one line. I find the syntax very easy to read in the Firebug console and it keeps everything on one line—just the way I want it. The output will look like:

Hopefully someone else will find this tip useful.

UPDATE:

For those of you who want a Firebug to output a hyperlink to the line that invoked the message, you might want to use console.debug() instead.

As I mentioned early I've been working on a SVN post-commit script. We've got a SVN repository that will be modified by several remote developers and I really need to keep an eye on this repository and I need to closely monitor changes to this repository.

There are two major functions that I needed in my post-commit script:

1. I needed to update the working copy on my server
2. I needed to e-mail the changes to myself, so I know when developers are making changes

There are an abundant of examples showing off how to do this in various *nix flavors, but I couldn't find any good Windows-based solutions that didn't require Perl to be installed on the server. That led me to create the following post-commit.bat script.

I've been working on a post-commit hook for our Subversion install and was running in to a number of issues. The post-commit.bat file would run fine from command line, but I just could get things to work as I expected from SVN. After much debugging and scouring Google for answers, I've found a few tips that will hopefully help you to troubleshoot your own SVN repository hooks.

1) Subversion executes all hook programs with an empty environment

This was the biggest issue I was running in to, because I was expecting the my script to be able to find any programs in my %PATH% statement. That's the main reason my scripts were working fine from command line, but were breaking when executing from my SVN hook.

I actually wrote this plug-in months ago, but only made passing mention about in on the jQuery mailing list. Since the topic of dynamic calculation came up again today on the mailing list, I thought I'd go ahead and officially announce the plug-in here.

My jQuery Calculation Plug-in was designed as a generic mathematical library to make it easy to do things like sum or average values that are displayed on the page. For example, to get the sum of all of the elements with the class of "price" you'd use:

Aptana just released a new project called Jaxer. In a nutshell, Jaxer is server filter which parses files and can execute JavaScript on the server. It's like a headless version of Firefox. All your client side libraries (like jQuery) will run in Jaxer—which is pretty neat.

What this means is that the JavaScript you write can be used in both the client and the server. Jaxer actually resolves one of the most complicated problems web developers face—ensuring data is validated using the exact same rules on both the client and the server. Because Jaxer is able to execute your JS code on the server, you can write one set of validation functions and use them both place.

Aptana's posted a screencast showing a simple client/server validation example using Jaxer that I recommend viewing. It's a simple example, but shows off the potential power of Jaxer.

I also recommend checking out Ajaxian's post on Jaxer as well as John Resig's post which both provide example code and give further insight.

At this point this product has a high "Cool!" and "Wow!" factor, but I really wonder who their target audience is. Hopefully I'll have some free time to play around with this sometime soon.

jQuery turned 2 years old today. To celebrate turning two, John Resig and gang released jQuery v1.2.2. Some of the key changes are:

• 300% Speed Improvements to $(DOMElement)
• $.ready() Overhaul — this is supposedly fix several bugs and provide even more consistent behavior across platforms. (NOTE: For those unfamiliar with the $.ready() function, it's designed to replace the window.onload event and fire immediately after the DOM is ready and not wait for all images to finish loading.)
• New .bind(”mouseenter”) / .bind(”mouseleave”) events — these events are improvements on the typical mouseover/mouseout events as they don't fire when entering children elements (which is generally not the desired behavior.)
• New .bind(”mousewheel”) event — this new event allows you to bind events to the mouse wheel.
• The :not() selector now supports complex expressions
• New AJAX "Accept Headers" added to XHR requests
• Over 120 bug fixes
• Test suite now includes over 1157 unit tests

Whenever the topic of my employment comes up, everyone's first reaction when I tell them I work from home is: "Wow, that must be really nice!" While working from home definitely has some benefits, it has some cons.

As Cameron Childress mentions in his post on Coworking in Atlanta, the two hardest things to adjust to are the lack of socialization and self motivation—both are issues Cameron and I have talked amongst ourselves about in the past.

Nathan Strutz posted a cool tip using regular expressions to speed up coding which uses a regular expression to convert a single line list of variables into something actually useful.

You have a list of values on lines and you want to want to apply some code to each:

first_name
middle_initial
last_name
phone
country
state_province
city

Select the lines, and use your IDE's find/replace tool with the regex option. In Eclipse, this is just CTRL+F and check the checkbox. Use this as the search pattern:

^(.+)$

This regex says to select any line with at least one character in it and store it in a character group.

Some code like this would be the replace pattern:
querySetCell(myQuery, "$1", "");

Replace them all and your code will be generated in an instant. The regex will drop each line's content into the $1 backreference.

That's a tip I'll have to remember.

Ajax Rain blogged about my jQuery Field Plug-in. If you like my jQuery Field Plug-in (official site) make sure to go vote for it on Ajax Rain!

I was trying to find an Eclipse-based color picker that worked as a view this afternoon. I can't believe nobody has created one, but from the looks of my Google searches no one has. It would really be great to have a color wheel with the features of Adobe's Kuler available right from Eclipse.

If anyone knows of a really good color swatch/picker for Eclipse, please let me know.

However, I did come across ColorCop in my search—which I'm going to try out and see how it works for me. There's no installer and it's free, with an option to donate via PayPal if you find the program useful.

In the past I've blogged about some free Windows-based Diff tools—like ExamDiff. However I recently came across WinMerge—an "Open Source visual text file differencing and merging tool for Win32 platforms."

I've only been playing around with it for a couple of days, but I'm very impressed so far. It does a very good job visualizing the differences in files and has a lot of configuration options (such as how to interpret whitespace.) You create patch files, merge the changes together and even compare folder contents.

The feature I really like is Windows Explorer Context Menu integration. The context menu allows you to select two files in Windows Explorer and right-click and select the "Compare" option and instantly get a diff from those two files. There's also an option called "Compare To" which allows you to select a single file and then you can explore to another folder highlight a second file and select the "Compare" option to compare those two files. I really like this option. For me this is generally much more convienent than open the program and using an "Open" dialog to compare two files. I just find when I need to compare two files and I'm not already in Eclipse, then I'm probably looking at the files in Explorer—so the context menu integration is extremely convienent.