Check out the Palbum web site, or download it for free right now from the app store.

Here are some examples:

[Expect int:[myArray count] toEqual:4];

[Expect object:user.name toEqual:@"Fred"];

[Expect array:validTokens toContainObject:user.token];

[Expect block:^{
    [fluxCapacitor rethread];
} toThrowExceptionWithReason:@"Uncharged capacitors cannot be rethreaded."];

[Expect blockToNotThrowException:^{
    [fluxCapacitor charge];
    [fluxCapacitor rethread];
}];

and here are some screenshots of the code completion in action:

Check out the GitHub repo or the public Pivotal Tracker project.

I found the solution after a bunch of Googling: it turns out that the WPS option is hidden in the latest Airport Extreme configuration software. To see it, hold down the option key while selecting the “Wireless Mode” (in the “Wireless” section of the manual setup). Once you choose that, you can set up WDS pretty easily.

This:

# this is ruby
jquery = SeleniumQuery.new(selenium)
id = jquery.find("td:nth(5).user:visible").closest("tr").attr!("id")

executes this in the browser:

// this is Javascript
selenium
  .browserbot
  .getCurrentWindow()
  .jQuery(selenium.browserbot.getCurrentWindow().document)
  .find("td:nth(5).user:visible")
  .closest("tr")
  .attr("id");

Check it out here: http://github.com/eahanson/seleniumquery

#!/usr/bin/ruby

require 'rubygems'
require 'httpclient'
require 'json'

class Angular
  def initialize(username, password, library)
    @http = HTTPClient.new
    @library = library
    post("/login", :email => username, :password => password)
  end

  def libraries
    get("/data")
  end

  def store(database, document, data)
    post("/data/#{database}/#{document}", data.to_json)
  end

  private

  def post(path, params)
    request(:post, path, params)
  end

  def get(path, params=nil)
    request(:get, path, params)
  end

  def request(method, path, params)
    uri = (path.index("http") == 0) ? path : ("http://#{@library}.getangular.com" + path)
    response = @http.send(method, uri, params)
    if response.code == 302
      get(response.header["Location"][0])
    elsif response.code == 200
      parsed = parse(response)
      status_code = parsed['$status_code']
      raise "#{uri.to_s} responded with #{status_code}" if status_code && status_code != 200
      parsed
    else
      raise "#{uri.to_s} responded with #{response.code}"
    end
  end

  def parse(response)
    begin
      JSON.parse(response.body.content)
    rescue
      {}
    end
  end
end

Also available on GitHub for your forking pleasure.

Maybe in the future I’ll write up a blog post about how I’m using Angular.

Often, clients who are new to writing automated tests start out by writing big integration tests (with tools like Selenium). This is an easy way to start testing an app that wasn’t written with testability in mind.

Unfortunately, these sorts of tests tend to be slow and brittle, and when they fail they don’t always point directly to a broken line of code in the way that a unit test would.

Over the years, I’ve come across a number of ways to help clients speed up and otherwise improve their test suites and I thought I’d enumerate them here.

Better Feedback

Continuous Builds

Continuous builds are vital to any tested application. I’ve used a few of them, but the simplest one I’ve used is CruiseControl.rb, a version of CruiseControl written in Ruby. It can run tests written in any language, and it is about 1000 times easier to deal with than the legacy version of CruiseControl.

I’ve also had a few clients who wrote their own continuous build systems. Two of them were simple (in a good way), and one seemed horribly complex. If you’re going to write your own, keep it simple!

Visible Continuous Build Monitor

If you’re lucky enough to have all your developers in a single room, you should consider displaying the continuous build results somewhere. Some clients have set up some hardware to show the status: red/green lava lamps, “pass”/”fail” neon signs, and Ambient Orbs that change color from red to green. A simpler solution is to display the status on a big TV screen or monitor. An old iMac seems like a really good way to display the status. There are now digital picture frames that can be updated over wifi — I wonder if those might be a cheap solution.

Fast-Failing Continuous Build

I helped one client who had written their own continuous build system to modify it so that the build turned red as soon as any test failed. They were usually able to check in a fix for the failing test before the suite finished running so that the fix was included in the very next build.

Encourage Unit Tests

While I believe that integration tests are important, the majority of a project’s tests should be unit tests. Unit tests are faster, less brittle, and when they fail, they often point directly at the code that’s not working.

When A Bug Is Found, Write a Unit Test

One way to build up a suite of unit tests for a program that doesn’t have very many is to commit to writing a unit test to expose any bug that’s found in the system. Sometimes in a non-test-driven codebase, it’s hard to write a really good unit test for a bug, but just adding coverage for part of the issue is a good step.

When An Integration Test Fails, Write A Unit Test

When an integration test fails, it’s often hard to tell exactly what went wrong. This is a good opportunity to write a unit test so that the next time something similar fails, you’ll have a very narrow test that finds it.

Ashcroft

There is a tool for Java called Ashcroft which will cause your test to fail if it does things that a strict unit test shouldn’t: start a thread, access the filesystem or network, etc.

I’ve helped clients separate their test suite into a “slow test” suite and a fast Ashcroft-enforced unit test suite. On the projects that have had this, developers would often try first to make an Ashcroft-compliant test and only settle for a slower integration test if they ran into trouble. (Sometimes on a project that wasn’t completely test driven, certain unit tests are just going to take too long to write.)

The Ashcroft suites usually run thousands of tests in a few seconds, whereas the slow suites usually run hundreds of tests in an hour.

Fake Services

You can often speed up tests by replacing some services with fake versions. For example, you might use an in-memory database such as HSQL or Mayfly. Or you might fake out a custom service with a faster one. For example, I have an app that stores files on Amazon S3 by calling a simple storage class I wrote. The tests use a different storage class that implements the same interface but stores the files in memory.

Remove Unnecessary Waiting

I’ve run across many Selenium tests that perform some action, wait a number of seconds, and then perform another action. All that waiting really adds up and leads to very long test suites.

An easy solution is to use Selenium’s waitForCondition command. For example, if your test clicks on a button that fires an asynchronous event and then shows the result on the page, instead of clicking, waiting 5 seconds and then asserting that the result is visible, just click wait for the result to become visible.

A similar approach is to create a waitForCondition-type method in your own code which calls a function repeatedly until it is true or until a timeout occurs.

Distribute Tests

One way to speed up a test suite is to throw hardware at it.

Multiple Builds

The simplest way to throw hardware at the problem is to split your continuous build into multiple suites, each of which run on its own server. You could write a script to check the results of each continuous build and tell you if the whole project is red or green, or just look at all the results and consider the entire project red if any of the suites are red. (Hopefully you have some sort of multiple-project continuous build dashboard like this one.)

MapReduce

One of my former clients distributes their tests using MapReduce. I don’t think they use Amazon’s MapReduce service, but that does seem like an easy way to throw a bunch of computers at your problem.

Selenium Farm

One reason that Selenium tests are so slow is that they run tests in a browser. Often, a team will want to test against different browsers at once, resulting in an even longer test run. I’ve helped clients speed up their test suites by putting together a farm of servers that run different browsers, and then running a bunch of tests in parallel. I found that on an ordinary developer box, I could easily run tests in 4 threads if the work of launching and running browsers was offloaded onto the farm.

I’ve also helped a couple clients run their JsUnit tests in Selenium to let them take advantage of the Selenium infrastructure. Basically, it amounts to writing a Selenium test that opens the JsUnit test runner page, clicks “run” and parses the results.

Setting up a Selenium farm is not trivial. Luckily, some folks have written and released an open source library called Selenium Grid to help. I haven’t used it, but it looks promising.

Test Running Services

A company called Sauce Labs is working on a service that runs Selenium tests. It doesn’t seem to be available yet, but the idea sounds very promising.

Conclusion

You can greatly improve your test suite run time, especially if you combine multiple solutions, if you don’t mind putting some time and money into the problem. Considering the costs of a slow test suite, I think it’s almost always worth the investment.

Jasmine is a new Javascript testing framework from my pals at Pivotal Labs.

Jaxer is an Apache module that wraps Firefox’s Javascript and rendering engine, providing a server-side Javascript environment that’s fast and compatible with any JS that works in Firefox (including all kinds of DOM manipulation and libraries like Prototype, jQuery, etc.).

Running Jasmine Tests Through Jaxer

Part of an app I’m writing uses Jaxer and I wanted to write my tests in Jasmine, so I wrote a test runner and reporter to bridge the two, and then I wrote a rake task to run the tests.

So now I can run “rake spec” and my JS tests will run, in Firefox, but without having to actually have Firefox open up (or be installed).

So:

rake spec

returns:

.    foo should do something.
.    foo should do something else.
.    foo should do yet another thing.

3 of 3 specs passed

And the whole thing takes 0.37 seconds. It should be noted that those are trivial tests, but running a JS test suite with only 0.37 seconds of overhead is pretty neat.

My rake task looks like:

task :spec do
  results = `curl -s http://127.0.0.1:8081/jaxer-service/jasmine-jaxer`
  print results
  fail "spec failures" if results.match(/FAILURES!/)
end

Download

The JS code that hooks Jasmine to Jaxer is here: jasmine-jaxer.js.

The trick was to encode the file exactly correctly, and then post it with the correct headers. I wrote a simple post_file method to do this.

  def post_file(url, param_name, file_path, content_type)
    file_name = File.basename(file_path)
    boundary = "AaB03x"
    data = "--#{boundary}\r\n" +
           "Content-Disposition: form-data; name=\"#{param_name}\"; filename=\"#{file_name}\"\r\n" +
           "Content-Type: #{content_type}\r\n" +
           "\r\n" +
           "#{File.read(file_path)}\r\n" +
           "--#{boundary}--\r\n" +
           "\r\n"
    post(url, {}, {
      "CONTENT_TYPE" => "multipart/form-data, boundary=\"#{boundary}\"",
      "CONTENT_LENGTH" => data.length, :input => data })
  end

I call it from my test like this:

...
post_file("/my_app/upload", "uploaded_image", "../test-images/originals/loki.jpg", "image/jpeg")
...

and my app reads it like this:

...
request = Rack::Request.new(env)
...
uploaded_image = request.params["uploaded_image"][:tempfile]
...

I love these headphones because I can wear them at the gym without having to deal with wires. I actually bought the shuffle because of these headphones. At the gym, I like to start out by listening to a few news podcasts while I warm up and then I like to hear some random music.

Unfortunately, version 8.1 of Apple’s iTunes removed the ability to autofill podcasts on the shuffle. (See this thread on Apple’s support page for example.)

Luckily, it can still be done with AppleScript. Here’s a script that copies all of the songs from my “Gym” playlist, including podcasts, to my shuffle:

tell application "iTunes"
  repeat with thisSource in sources
    if the name of thisSource = "Erik's Shuffle" then set myIpod to thisSource
  end repeat

  set destinationPlaylist to the first playlist in myIpod
  delete tracks in destinationPlaylist

  set sourcePlaylist to playlist "Gym"
  if the number of tracks in sourcePlaylist is greater than 0 then
    set shufflable of (every track of sourcePlaylist) to true
    duplicate every track of sourcePlaylist to destinationPlaylist
  end if
end tell

And here’s the full script that I use these days. It deletes everything on the shuffle, then adds the contents of three of my podcast playlists (which are “smart playlists” that only contain the most recent unplayed episode), and then adds one song from a short list of songs I like to start my workout with, and then finally adds 25 random songs from a collection of music that’s suitable for the gym.

on addRandomSongs(sourcePlaylistName, destinationPlaylist, songCount)
  tell application "iTunes"
    set sourcePlaylist to playlist sourcePlaylistName
    set alreadyUsedTrackNumbers to {}
    set numberOfTracksInSourcePlaylist to the number of tracks in sourcePlaylist
    repeat songCount times
      set trackNumber to (random number from 1 to numberOfTracksInSourcePlaylist)
      if alreadyUsedTrackNumbers does not contain trackNumber then
        duplicate (track trackNumber of sourcePlaylist) to destinationPlaylist
        copy trackNumber to the end of alreadyUsedTrackNumbers
      end if
    end repeat
  end tell
end addRandomSongs

on addPodcast(sourcePodcastName, destinationPlaylist)
  tell application "iTunes"
    set sourcePodcast to playlist sourcePodcastName
    if the number of tracks in sourcePodcast is greater than 0 then
      set shufflable of (every track of sourcePodcast) to true
      duplicate every track of sourcePodcast to destinationPlaylist
    end if
  end tell
end addPodcast

on findDevice(deviceName)
  tell application "iTunes"
    repeat with thisSource in sources
      if the name of thisSource = deviceName then return thisSource
    end repeat
  end tell
end findDevice

--
-- begin
--

set myShuffle to findDevice("Erik's Shuffle")

-- delete all tracks from the shuffle
tell application "iTunes"
  set shufflePlaylist to the first playlist in myShuffle
  delete tracks in shufflePlaylist
end tell

-- add podcasts
addPodcast("NPR Hourly News Summary", shufflePlaylist)
addPodcast("California Report", shufflePlaylist)
addPodcast("NPR Story Of The Day", shufflePlaylist)

-- add songs
addRandomSongs("Gym Kickoff", shufflePlaylist, 1)
addRandomSongs("Gym Music", shufflePlaylist, 25)

To use either of these scripts, fire up ScriptEditor, paste the script in, choose “Save As” from the “File” menu and choose “Application” as the file format, and then save it in your Library/Scripts/Applications/iTunes folder. A script menu will appear in the right portion of your menu bar when you’re in iTunes.

So I wrote a bookmarklet to reload the files. Here it is:

reload CSS

(Just drag that into your bookmarks bar. Tested in Safari and Firefox.)

It works by appending the letter “x” after a “?” at the end of each stylesheet reference. That causes the browser to reload the stylesheet. Here’s the code:

var links = document.getElementsByTagName("link");
for (var i = 0; i < links.length; i++) {
  if (links[i].rel === "stylesheet") {
    if (links[i].href.indexOf("?") === -1) {
      links[i].href += "?";
    }
    links[i].href += "x";
  }
}

I created a site called JS Dev Tools (jsdevtools.com) to keep track of useful Javascript development tools and libraries.

Check out the site, subscribe to the feed, and suggest your favorite tools and libraries.

MySQL

I had already downloaded and installed MySQL, so I didn’t have to do anything. If I remember, installing MySQL was straightforward.

Apache

Apache comes pre-installed on Mac OS X, but I had to turn it on in System Preferences > Sharing > Web Sharing.

PHP

PHP 5 comes pre-installed on Mac OS X, but I had to enable it in Apache by editing the conf file:

sudo vi /etc/apache2/httpd.conf

and uncommenting the line:

LoadModule php5_module

WordPress

I downloaded WordPress and extracted it into:

~/Sites/wordpress

I followed the installation instructions, but I had to use “Localhost” instead of “localhost” as my database host name.

I created a symlink from the directory where I was editing my theme to the WordPress themes directory:

ln -s ~/Development/my-theme ~/Sites/wordpress/wp-content/themes/my-theme

Apache wasn’t set up to follow symlinks in my user directory, so I had to edit my personal conf file:

sudo vi /private/etc/apache2/users/ehanson.conf

and set the options line to:

Options Indexes MultiViews FollowSymLinks

Then I logged into the WordPress admin console at http://localhost/~ehanson/wordpress/wp-admin, set the theme to my new theme, and everything worked.

I looked at the code again and noticed that it was pretty long and needlessly required Prototype. So I cleaned it up a bit:

/**
 * Simple relative date.
 *
 * Returns a string like "4 days ago". Prefers to return values >= 2. For example, it would
 * return "26 hours ago" instead of "1 day ago", but would return "2 days ago" instead of
 * "49 hours ago".
 *
 * Copyright (c) 2008 Erik Hanson http://www.eahanson.com/
 * Licensed under the MIT License http://www.opensource.org/licenses/mit-license.php
 */
function relativeDate(olderDate, newerDate) {
  if (typeof olderDate == "string") olderDate = new Date(olderDate);
  if (typeof newerDate == "string") newerDate = new Date(newerDate);

  var milliseconds = newerDate - olderDate;

  var conversions = [
    ["years", 31518720000],
    ["months", 2626560000 /* assumes there are 30.4 days in a month */],
    ["days", 86400000],
    ["hours", 3600000],
    ["minutes", 60000],
    ["seconds", 1000]
  ];

  for (var i = 0; i < conversions.length; i++) {
    var result = Math.floor(milliseconds / conversions[i][1]);
    if (result >= 2) {
      return result + " " + conversions[i][0] + " ago";
    }
  }

  return "1 second ago";
}

Try it out:

Raw code and tests:
relativeDate.js
relativeDateTest.html

Background

wshlst uses a lot of Javascript. When developing, I want to have all of my JS files listed in my index.html page. But in production mode, I want a single JS file. So I wrote a script to read in my index.html file, find all the references to my Javascript files, and write out a new HTML file that contains a reference to a single JS file that was created by concatenating and compressing all the JS files.

As an example, have a look at what my index.html page looks like in development mode and in production mode.

Ruby Script → Rake

When a server move prompted me to upgrade to Subversion and Capistrano, I decided to turn my Ruby script into a Rake task that I could trigger from my Capistrano deploy: minify.rake

Capistrano

I added a line to my Capistrano deploy.rb file to run rake minify on the server after updating from Subversion:

run "cd #{release_path} && rake minify RAILS_ENV=#{rails_env}"

Apache

I also added a few lines to my httpd.conf file to support this. First, since the Rake task combines all the JS files into a single JS file but Capistrano deploys the entire app, I wanted to restrict access to everything in the javascripts directory:

# Don't allow access to the javascripts directory (all JS should be in minified js file)
RewriteRule ^/javascripts/ - [F]

Then, because the Rake task reads index.html and outputs a file called index-mini.html, I wanted to send all requests for / and /index.html to /index-mini.html:

# Rewrite index.html to index-mini.html
RewriteRule ^/index.html$ /index-mini.html [QSA]

# Rewrite index to check for static
RewriteRule ^/$ /index-mini.html [QSA]

Why Not Use AssetPackager?

For a normal Rails application, AssetPackager is probably the right solution to this problem. However, wshlst doesn’t use Rails to generate the UI (it’s all done in Javascript), so AssetPackager wouldn’t work.

Sending mouse events such as click and mouseover in JsUnit tests can be really hard.

More Bad News

Prototype doesn’t make it any easier. Sam Stephenson says:

We would very much like to support it in the future. It’s fairly complicated to implement native event firing across all supported browsers, so in 1.6.0, fire works with custom events only.

YUI To The Rescue

YAHOO.util.UserActions can simulate some user actions. Unfortunately, calls to YUI can look a bit clunky in a Prototype-heavy codebase:

var element = new Element("div").insert("Hi");
var offset = element.cumulativeOffset();
YAHOO.util.UserAction.click(element, { shiftKey: true });

YUI + Prototype FTW

A little mixin magic:

Element.addMethods({
  simulateClick: YAHOO.util.UserAction.click.bind(YAHOO.util.UserAction),
  simulateDblClick: YAHOO.util.UserAction.dblclick.bind(YAHOO.util.UserAction),
  simulateMousedown: YAHOO.util.UserAction.mousedown.bind(YAHOO.util.UserAction),
  simulateMouseup: YAHOO.util.UserAction.mouseup.bind(YAHOO.util.UserAction),
  simulateMouseover: YAHOO.util.UserAction.mouseover.bind(YAHOO.util.UserAction),
  simulateMouseout: YAHOO.util.UserAction.mouseout.bind(YAHOO.util.UserAction),
  simulateMousemove: YAHOO.util.UserAction.mousemove.bind(YAHOO.util.UserAction)
});

and now our test code looks nicer:

var element = new Element("div").insert("Hi");
var offset = element.cumulativeOffset();
myElement.simulateClick({ shiftKey: true });

I contemplated having a per-user time zone setting, but that seemed complicated. So I decided to just show how old the item is. For that, I needed to write two things. I’m posting them here in case anyone else finds them useful.

RelativeDate.js

First, I needed a simple relative date formatter, so I wrote a simple one. Given two dates, it returns a string like

4 days ago

or

26 hours ago

Here’s the code and the JsUnit test:

RelativeDate.js
RelativeDateTest.html

ServerTime.js

The timestamps of the items I’m displaying are stored in the database, so they are based on the clock of my database server. The relative dates are calculated in Javascript, so they are based on the clock of the user, which might be hours or just minutes off from the database server time.

The first thing my app does when it loads is checks to see if the user is logged in, so I decided to piggyback the current server time along with the response. Since the client and server talk using JSON, it’s simple to add another property to the response:

def current
  ...
  render_json({
    :success => true,
    :user => user,
    :servertime => dbtime()
  }.to_json)
end

...

def dbtime
  ActiveRecord::Base
    .connection
    .select_all("select unix_timestamp(now()) as now")[0]["now"]
    .to_i
end

I wrote a ServerTime class on the client side and I initialize it when the app receives the current user response from the server:

this.serverTime = new ServerTime(json.servertime);

Here’s the code (it’s very simple):

ServerTime.js

Putting It Together…

And now to display the relative time, my app only has to do this:

var updated = new Date(item.updated_at * 1000);
element.insert(new RelativeDate(updated, app.serverTime.get()).toString());

It’s been a lot of fun to write, and one reason is that the entire UI is written in Javascript. No HTML, no CSS. There’s no HTML generation on the server-side either; it’s all client-side Javascript. I’d really like to write more apps like this.

The Server

There is of course a server-side component. I decided to write the server in Rails because I had just finished working on a Rails project at Pivotal Labs and had Rails on the brain. Plus, my web host, DreamHost, supports Rails and doesn’t support Java, which is the language I’ve written all my other web apps in.

DreamHost’s support of Rails is a bit limited though: they kill any long-running processes, which means that a response from your Rails app could take 10 seconds if no other requests have been made lately. It’s good enough for a little project like Wshlst with only a few users and for initial development, but not much beyond that. (If I were to do it over again, I’d probably just use Ruby CGI, or maybe even PHP. Or use a VPS from Rimu, but that costs money.)

Because all of the UI is in Javascript, the Rails side of things doesn’t have to generate any HTML. Instead, it takes standard Rails requests and returns JSON using JSON for Ruby. For example, the client sends the following AJAX request:

GET http://wshlst.com/user/list

and the server uses ActiveRecord magic to find all the users that are “friends” with the current user and uses JSON for Ruby to convert that list to JSON, which it returns back to the client like this:

[{name: "Andy Acorn", id: 12, email: "andy@example.com"},
{name: "Betty Beets", id: 13, email: "betty@example.com"},
{name: "Chad Carrot", id: 14, email: "chad@example.com"},
{name: "Donna Donut", id: 15, email: "donna@example.com"}]

which Prototype automatically converts to Javascript objects.

The server is of course also responsible for sending static files, but those are all handled by DreamHost’s Apache servers.

The Client

Here’s where it gets interesting. The app consists of an HTML file that does little more than include the Javascript files. (In development mode, there are multiple Javascript files, but when I deploy to production, there’s just one file. Read this blog post on concatenating and compressing Javascript files with Ruby.)

The app relies heavily on Prototype, and also uses Animator.js for a few visual effects. Everything else I wrote from scratch. I like to write a lot of code from scratch when I’m working on a personal project so I can get a good understanding of what’s really going on and be able to better evaluate pre-written libraries when I’m programming for money.

The app’s main class is called Application and acts as a controller. There are many view classes which are combined to form the app’s UI. For example, the “Change Password” box is implemented by a ChangePasswordForm class and consists of a ModalBox with a FormPanel inside. The FormPanel contains instances of Buttons and Fields. Writing a Field class of course takes more time than putting <input type="text"> in some template file somewhere, but it allows for easy reuse and the ability to add a feature to all fields in just one place. (I hope to post some of the code from Wshlst on this blog in the future.)

Responding to user actions is just a matter of one Javascript method directly calling another method. No parsing of parameters, no layers of actions and filters, no guessing client state on the server side. It’s very liberating.

Lessons Learned

Test early and often in lots of browsers. This is obviously important when doing any web development, but when it’s 100% Javascript, there’s even more chance of incompatibilities. My JsUnit tests caught some issues (Date.now turns out to be Firefox-only), but most issues I had were visual.

MVC is good. Again, I already knew this, but I didn’t do nearly a good enough job with it in this app, probably because it was the first time I wrote an entire UI in Javascript. Next time, I’ll have multiple controllers and keep app logic out of the views as much as possible.

Events are probably the way to go. Wshlst suffers from some tight coupling of objects because they directly notify each other of actions. Next time, I’ll try having all my objects send custom events to and receive custom events from some global event source (perhaps document.body), like I did back in the days when I wrote Mac software.

UI is hard. I’m glad I did all the UI myself, but next time I’d like to build on the work of others. I’m still looking for a good Javascript widget library. Some of the widget libraries I’ve seen are trying to make web apps look application-y, and I’d prefer my web app to look web-y. Also, some libraries don’t have great support for calling everything from Javascript. I think I’ll look into Dojo again now that version 1.0 has been released, and more importantly, now that there’s more documentation.

Try It Out

There’s no way yet to sign up for Wshlst (if there’s enough interest I’ll do it), but the front page of the site lists some demo users you can use to play around: www.wshlst.com.

Read more articles about wshlst.com

It differs from other wish list sites in a few ways: it’s group-oriented, it allows people to add items to other peoples’ wish lists (secretly, if desired), and it allows people to discuss wish list items (again, secretly, if desired). The result is a site that lets a group of people plot and scheme behind each others’ backs to make gift buying easier.

Site Tour

The site’s main page is divided into three panels. The first is called “People” and lists all the people you share wish lists with. For me, it lists everyone in my family and everyone in my wife’s family.

Clicking on a person loads their wish list in the next panel, the “Wish List” panel. As you’d expect, you can add and remove items from your wish list. But you can also add and remove items from other peoples’ wish lists. By default, when you add an item to someone else’s list, it’s not visible to that person. Items can also be marked as “Claimed” so two people don’t end up buying the same gift.

Clicking on a wish list item loads comments about the item in the third panel, called “Discussion”. Comments in the discussion panel are also hidden from the item’s intended recipient by default.

Try It Out

There’s no way to sign up to use the site (yet—if there’s interest from anyone outside my family, I might take the time to add the ability), but there are demo users you can use to try the site out. Details are on the front page of the site: www.wshlst.com.

Read more posts about wshlst.com

The standard solution is to concatenate all the Javascript files into one big file and then compress it. I wanted it to be automated of course, and I wanted to do it at deploy-time, not at run-time.

So I wrote a little script that figures out what Javascript files are being included in the HTML page, compresses them with the YUI Compressor, concatenates them into a file named after the newly-compressed and -concatenated Javascript’s MD5 hash, and creates a copy of the original HTML page that references the new Javascript file instead of the old ones.

It’s pretty specific to my app’s needs, but with some minor tweaking, it should be useable on other projects. Check it out: minify.rb

So in IE, JsUnit has to resort to searching the text of all scripts for strings that look like test function names. Unfortunately, it doesn’t understand comments so commented-out test functions will end up running anyway.

Recently, Dean McNamee and Dan Pupius alerted Edward Hieatt and me to an undocumented Internet Explorer Javascript function called RuntimeObject and suggested JsUnit might be able to use it to discover test functions.

I replaced the text searching with RuntimeObject and tagged it as version 2.2 alpha 25. (I also added an assertEqualsIgnoringOrder function while I was making changes.)

Browse the new version at SourceForge or check it out like this:

Try it out and let us know if there are any problems.

So I wrote a simple AppleScript to move old files to an “Old” subdirectory. I thought I’d post it here in case anyone else needed something similar. It’s a simple script, but AppleScript is hard for me because I write scripts so rarely that I forget everything about it before I need to write another script.

(Many years ago, I actually got paid to write a few AppleScripts.)

set folderName to "Macintosh HD:Users:your-user-name:Temp:"

repeat with fileName in list folder folderName
  set tempFile to (folderName as string) & contents of fileName
  set modificationDate to modification date of (info for alias tempFile)
  set age to ((current date) - modificationDate) / days

  if age > 7 and fileName is not " Clean Up Temp Dir" then
    tell application "Finder"
      move alias tempFile to alias (folderName & " Old")
    end tell
  end if
end repeat

Show Log

There’s now a “Show Log” button that opens a window with a log of what JsUnit has been up to.

New log button (click image for larger view)

New log window (click image for larger view)

New URL Parameters

There are three new URL parameters:

• suppressDialogs=true will suppress JsUnit’s dialogs in interactive mode
• setupPageTimeout=n will change the timeout for the setupPage call
• pageLoadTimeout=n will change the page load timeout

Easier Suite Creation

The jsUnitTestSuite constructor now accepts test pages and subsuites as parameters. So instead of this:

function suite() {
  var suite = new jsUnitTestSuite();
  suite.addTestPage("/foo/barTest.html");
  suite.addTestPage("/foo/bazTest.html");
  return suite;
}

you can do this:

function suite() {
  return new jsUnitTestSuite("/foo/barTest.html", "/foo/bazTest.html");
}

Also, I wanted to be able to view any test page so I could debug the tests with Firebug (as explained here).

I also didn’t want to run a web server all the time, so I wanted a script that would create a static HTML file.

Here’s what I came up with. It’s not configurable, so you’ll have to modify it for your own needs.

JsUnitSuiteBuilder.rb

$("foo").stylize({
  color: red,
  background-color: green,
  text-decoration: underline
});

Implementing stylize is easy with Prototype‘s Element.addMethods() method:

var ElementExtensions = {
  stylize: function(element, styles) {
    for (var s in styles) {
      element.style[s] = styles[s];
    }
    return element;
  }
}
Element.addMethods(ElementExtensions);

Update: Prototype 1.6 added a similar setStyle method which works similarly but also allows CSS string-type style declaration (e.g., myElement.setStyle("color: blue; border: 3px")). Still, the above is a nice example of Element.addMethods().

Easier said than done

Here’s the error I got:

It was looking for header files in /usr/lib/ruby/1.8/powerpc-darwin8.0, but they weren’t there; they were in /usr/lib/ruby/1.8/universal-darwin8.0.

The Solution

The solution was simple enough: create symlinks to the header files:

$sudo ln -s ../universal-darwin8.0/*.h ./
$sudo gem install termios

There’s even a Monstatic Widget for Yahoo Widgets.

I only wish it had Jabber notification in addition to email notification.

I also read about dwatch but I figured a service would be easier.

Update: I got an email from Arun who works for Site24x7.com. It seems to have more features than Montastic, such as being able to look for a particular keyword in the response (or not in the response), and nice looking reports. I’ll be trying them out alongside Montastic. (Unrelatedly, the makers of Site24x7 also make Zoho, a suite of productivty apps like a word processor, spreadsheet, etc. Somehow I’d never heard of them.)

Update 2: My pals at Pivotal Labs have released Monitwitter, which uses Twitter to show you the status of your servers. Brilliant!

FireBug has a nice debugger, but I couldn’t get it to work with the JsUnit test runner. I could set breakpoints in JsUnit itself, but any breakpoints in my test would be ignored.

And then it hit me: ditch the test runner. I opened my test page directly in Firefox, opened FireBug, clicked the Debugger tab, and chose my test from the “Scripts” menu. Here’s a simplified version:

function testUpdate() {
  var listPanel = new ListPanel();
  listPanel.update(["one", "two", "three"]);

  var children = $("content").childNodes;
  assertEquals("one", children[0]);
  assertEquals("two", children[1]);
  assertEquals("three", children[2]);
}

I put a breakpoint at the first assertEquals and switched to the Console tab and typed testUpdate(). I saw the ListPanel getting drawn in the browser (something you don’t see in the JsUnit test runner) and in the Debugger tab I could inspect all my variables.

But even better, I could go back to the Console tab and start evaluating Javascript.

>>> children.length
3

Good.

>>> children[0]
div

Bad.

>>> children[0].firstChild
[Text] "one"

Better.

>>> children[0].firstChild.nodeValue
"one"

Perfect.

PS1='\h:\w \u\$ '

The code for starting a font and color change is \e[. The code for bold red is 1;31. The code for closing the starting code for a font and color tag is m. The closing code for a font and color change is \e[m. Bash thinks that these color commands will increase the length of the prompt, which will cause odd line wrapping behavior. The solution is to wrap all the color codes in brackets (\[ and \]).

So, the entire prompt looks like this:

PS1='\[\e[1;31m\]\h:\w \u\$\[\e[m\] '

Eeech. Add that to your .bashrc file and you’re all set. If you don’t want the red, the prompt would be:

PS1='\[\e[1m\]\h:\w \u\$\[\e[m\] '

More colors are listed at the bottom of this page.

Update: Somewhere along the way, all the backslashes got replaced by double backslashes. I’ve fixed that.

Creating the join table

Starting with tables foos and bars, I created a join table bars_foos. (Rails expects the join table’s name to be a concatenation of the two table names in alphabetical order).

Reading attributes

I added an attribute baz to bars_foos. I had originally tried to access it with:

myFoo.baz

but that didn’t work. It turns out that I needed to force Rails to do the join before accessing the attribute, which makes sense when you think about it (but it took me a while before my little brain thought about it correctly):

myFoo.bars.baz

Adding attributes

Use the well-documented push_with_attributes method:

myFoo.bars.push_with_attributes(bar, :baz => "fez")

Updating attributes

Apparently you can’t. Luckily, in my app the attribute is immutable. Other people have suggested deleting and re-inserting the row which I imagine shouldn’t be a problem for most applications.

Recently, I was trying to pass some info from my Javascript into my XSL stylesheet. Here’s how I finally did it:

(Quick note: in real life, I don’t name variables "myThis" and "myThat"; I’m just doing it here to make it clear what is my code and what is part of XSL, AJAXSLT, Javascript, etc.)

The XSL

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:param name="myParam" select="'myDefault'"/>
  <xsl:template match="/">
    myParam: <xsl:value-of select="$myParam"/>
  </xsl:template>
</xsl:stylesheet>

The Javascript

var myContext = new ExprContext(myXml);
myContext.setVariable("myParam",
    new StringValue("the value for myParam"));
xsltProcessContext(myContext, myXsl, myRootElement);

The Trick

So the big trick, which I figured out after reading lots of the AJAXSLT code, was to set the parameter to a StringValue, rather than a regular Javascript String. StringValue is part of AJAXSLT. Update: Will, in the comments below, mentions that there are four total types: StringValue, NumberValue, BooleanValue and NodeSetValue.

Troubleshooting

Don’t forget to declare your parameter with <xsl:param.../> before using it with <xsl:value-of select="$..."/>, otherwise Ajaxslt will blow up in the middle of rendering.

• It uses WebKit so it works just like Safari
• It doesn’t do any caching
• It takes a URL command-line parameter and loads it
• It quits immediately [update: I added a noquit paramter in case you don't want it to quit immediately]

It currently has the following problems:

• It’s uses AppKit, so it has a UI. I really wanted it to be a command-line-only app, but I haven’t yet figured out how to do that
• Invoking it is painful: /Applications/wkget.app/Contents/MacOS/wkget -url http://www.apple.com
• It only tests WebKit; one day I might make a version that uses Firefox’s JavaScript engine

I called it wkget and you can download it here. [Update: I had an incorrectly-built version up here for a while. It's fixed now.]

Here’s the code (sorry for the formatting; I had to wrap everything for this very narrow column):

@implementation WkgetController
- (void)awakeFromNib {
  [self gotoUrl:self];
  [webView setFrameLoadDelegate:self];
}

- (IBAction)gotoUrl:(id)sender {
  NSString *url = [[NSUserDefaults standardUserDefaults]
      stringForKey:@"url"];

  if (url == nil) {
    url = @"http://www.apple.com/";
  }

  NSURLRequest *request = [NSURLRequest
      requestWithURL:[NSURL URLWithString:url]
      cachePolicy:NSURLRequestReloadIgnoringCacheData
      timeoutInterval:1.0];

  [[webView mainFrame] loadRequest:request];
}

- (void)webView:(WebView *)sender
  didFinishLoadForFrame:(WebFrame *)frame {
  if (![[NSUserDefaults standardUserDefaults]
      boolForKey:@"noquit"]) {
    [NSApp terminate:self];
  }
}
@end

It took a bit of playing to get it to work. Here’s some sample code. (I forgot to write it up when I did it, so I might have left something out.)

Setup

First, include the scripts. Note: make sure to have a closing </script> tag rather than doing <script ... /> because that silently fails on some browsers (yay!).

<!-- AJAXSLT -->
<script src="/ajaxslt/misc.js"
    type="text/javascript"></script>

<script src="/ajaxslt/dom.js"
    type="text/javascript"></script>

<script src="/ajaxslt/xpath.js"
    type="text/javascript"></script>

<script src="/ajaxslt/xslt.js"
    type="text/javascript"></script>

<script src="/ajaxslt/xpathdebug.js"
    type="text/javascript"></script>

Using Ajaxslt for XSL Transformation

For XSL transformation, you’ll need three things: some XML, some XSL, and a node (or DocumentFragment presumably) to place the result in. One way to get the XML and XSL is to load them through an XmlHttpRequest. Ajaxslt also provides a couple of handy functions to convert between text and XML:

var myText = "...";
var myXml = xmlParse(myText);
var myTextAgain = xmlText(myXml);

Once you’ve got the XML and XSL, you’re ready to do the transformation:

var myNode = document.getElementById("myId");
xsltProcessContext(new ExprContext(myXml), myXsl, myNode);

Your node should now contain the result of the transformation.

Using Ajaxslt for XPath

You can also use Ajaxslt for XPath evaluation, which is really handy when writing tests on your rendered document:

var expr = xpathParse(myXpathString);
var result = expr.evaluate(new ExprContext(myXmlDocument));
var resultAsString = result.stringValue();

Troublshooting

The order of the JavaScript include statements matters: if Ajaxslt is giving strange errors, make sure the scripts are included in the exact same order as in the Setup section of this page.

Make sure you know what you’re passing to Ajaxslt: if you’re sending request.responseXML to a method, don’t look at request.responseText to see what you’re passing; use xmlText(request.responseXML).

The root element isn’t selectable: if your XML is <foo id="myId">...</foo>, then you don’t select foo’s id with /foo/@id but rather with just @id.

Case matters in xpath: If you’re evaluating an xpath expression on an HTML DOM, note that the node names are most likely uppercase. So do /HTML/BODY instead of /html/body

One big problem is that it can’t run all your tests. So we wrote a test suite class that runs all tests and can be run from Test::Unit:

require 'test/unit'

Dir.chdir("test")
@@test_files = Dir.glob("**/*_test.rb")
@@test_files.each {|x| require x} 

class TestSuite
  def self.suite
    suite = Test::Unit::TestSuite.new

    @@test_files.each do |filename|
      File.open(filename) do |file|
        file.each_line do |line|
          if match = (/class\s+(\w+Test)/).match(line)
           suite << eval(match[1] + ".suite")
          end
        end
      end
    end

    return suite

  end
end

Here’s what ended up working for me. It’s based on the instructions on Jamie’s Blogomatic.

1. Install the XCode tools from the Tiger DVD.

2. Download and run the Ruby on Rails installer from: http://users.tpg.com.au/aarnold/Ruby%20on%20Rails.zip.

3. Download and run the MySQL installer (I used version 4.1.11): http://dev.mysql.com/downloads/index.html.

4. Start mysql: bash$ sudo /usr/local/mysql/bin/mysqld_safe

5. Put mysql into the background: ctrl-z and then bash$ bg

6. Update gems: bash$ sudo gem update

7. Install the mysql gem from the remote source: bash$ sudo gem install -r mysql -- --with-mysql-dir=/usr/local/mysql

8. Compile and install the MySQL API module from here: http://www.tmtm.org/en/mysql/ruby/.

9. All done!