Development

Windows XP Mode for Testing IE6 on Windows 7 Machine

Wednesday, January 27th, 2010

When I was researching ways to run IE6 for browser testing purposes on my Windows 7 machine (other than with IE Tester, which is buggy, or Multiple IE, which I don’t think even runs on Windows 7), I came across XP Mode.

It’s simple to install, and it comes preinstalled with IE6. You don’t even need a serial number for XP. Just follow the steps on the page (they’re surprisingly straightforward) and you’re golden. The only thing that was even slightly tricky was configuring BIOS if your hardware virtualization isn’t turned on, but I managed with no problems, and I never do any configuration.

I never thought I’d say this, but “Thanks Microsoft for this helpful development tool.”

Installation page: http://www.microsoft.com/windows/virtual-pc/download.aspx

BIOS configuration instructions: http://www.microsoft.com/windows/virtual-pc/support/configure-bios.aspx

Get Option Values from a Select

Thursday, January 21st, 2010

This is an easy way to grab all the option values from any regular html select, and print them to your Firebug console as a comma separated list. (I found this useful when I needed to grab the state names listed on a previous version of a company website.)


var newArray = [];
var list = $('#selectID').find('option');
for(var i = 0; i < list.length; i++) {
newArray[i] = list[i].text;
}
console.log(newArray.join(", "));

Github Repository Creation For Dummies

Wednesday, July 15th, 2009

If you’re like me, an interface designer/developer, not a hardcore back-end developer, and you do what you can to avoid the terminal, github can be daunting, especially during the setup process of creating a repository. The GUI interfaces for github are limited in their capabilities (volunteers, anyone?), and there just aren’t that many tutorials geared toward those who don’t already have experience with the command line (surprise, surprise). Github, truly an application built by programmers for programmers. (Nothing meant by that personally. I work with you guys everyday, and am consistantly awed and enterained.)

Anyway, once you are lucky enough to have a programmer walk you through it, or you manage figure it out yourself through trial and error, the setup process is not that bad, and is elucidated below.

1. After you set up your github account (pretty straightforward) go to your dashboard. Here you will find a list of your repositories, or lack thereof. Click ‘create a new one.’

2. It will ask you for the name of your project. Pick something descriptive–ideally, whatever you’re going to name the directory on your computer that will be the corresponding local repository. If you add spaces to the project name, github will insert dashes.

3. Once you’ve submitted this information, you are directed to a page with setup instructions. Follow it precisely, entering one line at a time into the terminal. You will need to download github onto your computer, if you haven’t already done so. Basically, your github remote repo has already been created, and in this step, you are creating a local version on your machine and linking them together.

That’s it! This process will have to be repeated for every repository you wish to host on github, except for the very first part of the instructions regarding downloading and initiating github. That only needs to be done the very first time.

I’m creating a different repository for every piece of JavaScript I want to share on github, and no joke, it takes about 3 minutes to set up.

Using JQuery Tools Tabs

Friday, July 10th, 2009

The nice thing about these tabs (the reason I chose to use these specifically) is that you can have multiple instances on a page. Just give each tab set’s list and div pane a unique class, make sure to rename the styles to correspond to these unique classes, and don’t forget to include one function per tab set to activate them! You get some interesting results if you don’t use unique classes, like one tab set controlling what’s visible in another tab set.

Also, it is important to note that any child or descendant div will be hidden by default. However, since we can’t simply exclude the usage of divs within the tab panes (I want to be able to put whatever I want in them!), just put style=”display: block” on each descendant div.