#!/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.

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.

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.

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

• 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