The jQuery Tokenizing Autocomplete was released last year, with some nice additions to it in December. It’s an extremely rich plugin that behaves very similar to the Facebook version. You can select previously entered tokens and delete them, navigate completely by keyboard, or with the mouse – it’s amazing. There’s a few things that came up that I’ve added to it:

initialValues option

First is the ability to pass in a javascript array of initial values via the initialValues option. This is real simple:

$("#tokenize3").tokenInput("response.txt", {
  initialValues: [{"name":"The Dark Knight (2009)", "id":"12345"}, {"name":"Sweeny Todd (2008)", "id":"45334"}]
});

Real straightforward. When the page loads, the token input will be created with these two tokens pre-created.

defaultOptions

On MovieFly when you’re entering a movie for a viewing (that would show up on your recent viewings page), one thing thing that made sense to do was to have a way to pre-fill the list with some commonly used movies. So maybe you want it to show “new releases” since that’s what a large percentage of people are going to use. Another case might be if you want people to tag themselves (or something), and you want to show common tags. One easy way is for the “hint” to link to a list of common tags. Codewise it’s basically the same as initialValues.

$("#tokenize4").tokenInput("response.txt", {
  hintText: "Type a movie title, or see the <a href='#' class='defaultOptions'>current releases</a>.",
  defaultOptions: [{"name":"Hot Tub Time Machine (2010)", "id":"12345"},
                             {"name":"Clash of the Titans (2010)", "id":"12345"},
                             {"name":"Date Night (2010)", "id":"12345"},
                             {"name":"Alice in Wonderland (2010)", "id":"12345"}],
});

The key is the link with a class of “defaulOptions” in the hint text. The plugin finds this link and pre-fills the suggested matches when clicked.

The code is available on github, or check out an example of these and the basic behavior of the plugin. There’s already some great forks of the initial code, so seeing what other great additions have been made.

First off, I wanted to make sure I had a more up to date version of Ruby. Rails 3.0 beta and up will require Ruby 1.8.7 or higher. If you’re running Snow Leopard you probably already have this, but can always do a ruby -v to check your current Ruby version. The easiest way I’ve found to run multiple versions of ruby is using the rvm gem. It handles everything needed for running multiple versions of Ruby, including Rubygems. Just install the gem and go from there:

link:~ adam$ sudo gem install rvm
link:~ adam$ rvm-install
link:~ adam$ mate ~/.bash_profile
link:~ adam$ ruby -v
link:~ adam$ rvm install 1.9.1
link:~ adam$ rvm use 1.9.1
link:~ adam$ sudo gem install tzinfo builder memcache-client rack rack-test rack-mount erubis mail text-format thor bundler i18n
link:~ adam$ sudo gem install rails --pre

At this point, I tried to create a new rails project using the usual rails [projectname], but I ended up getting the following error:

link:research adam$ rails beta
/Library/Ruby/Site/1.8/rubygems.rb:384:in `bin_path': can't find executable rails for rails-3.0.0.beta (Gem::Exception)
	from /usr/bin/rails:19

A lucky comment in another blog showed a fix for this:

sudo gem install railties --pre

After that I was able to create a project the usual way, and start messing around the latest version of Rails. Looking forward to upgrading some existing sites!

link:research adam$ rails testsite
link:research adam$ cd testsite
link:testsite adam$ rails server

What is Heroku

The trouble with most sites and descriptions of Heroku, is that they boil the service down to too small a line. The description on their site even goes this far — “Ruby Cloud Platform as a Service”. To put it in laymans terms, they’re a Cloud host for ruby websites (Rails, Sinatra, Rack, Merb). All Heroku sites run the same base base platform which includes some familiar faces if you’ve looked into Ruby hosting.

• Operating System: Debian 4.0
• Ruby: MRI 1.8.6
• Ruby App Server: Thin
• Web Server: Nginx 0.6.32
• Database: PostgreSQL 8.3.5
• HTTP cache/accelerator: Varnish 2.0.2

One of the most important things to me is that Heroku handles keeping all of these running and up to date. You don’t have to worry about getting a call that the database server has crashed, or one of the servers is out of memory — they do all that for you. You can think of it as managed hosting, but they’re managing a cloud rather than single servers.

• Insanely easy setup
• No Capistrano for Deployment – instead you just push to a git repository on their servers
• No worrying about apache/nginx/mongrel/passenger – they just spin up a thin clients behind nginx.
• Methods for simplifying many common tasks including database importing, exporting and site backups

Setup is Almost as Easy as They Say

Setting up you application to get on Heroku doesn’t take very long. Actually, during lunch at work today I got a Heroku app setup, just to try it out. You can follow the Heroku Quickstart Guide, so I won’t repeat it here. My only advice is to do everything you can from from the command line, rather than editing settings on the website. If your local copy and the remote copy get out of date (like if you rename an app for example), you’ll hit a speedbump and have to sift through the docs. The web management interface for Heroku is a beauty though, and coupled with the robust heroku gem, you can do a lot right out of the gate.

So after you get your database on Heroku migrated, you’ll probably want to load some data in it. Heroku has a very helpful command to get you started.

$ heroku db:push mysql://root@localhost/arcadefly_development?encoding=utf8

You only need db:push, but without the “utf8″ encoding specification, you may run into some problems converting from mysql to PostgreSQL. So far the only main difference in Mysql to Postgres for ArcadeFly (temp Heroku url until dns updates) is that I used 1 or 0 for booleans as strings in a few places. I changed these to true/false instead, pushed out the change and it worked fine.

Pushed out? Yeah you can deploy a heroku site with a simple git push. The initial setup already added Heroku to your git setup, so deploying is just pushing.

$ git push heroku master

They posted a Vimeo video about getting started that should help get an idea of just how easy setup is:

Creating an app on Heroku in < 5min from heroku on Vimeo.

Limitations when Using Heroku

Under Heroku you’re set a very specific set of server software, as you know from the above listing. These luckily cover the vast majority of Rails sites, so there’s nothing wrong with that. What you don’t get is full SSH access to the server that you may have become used to. Instead, most access is done using the Heroku gem. Here’s a few things that you can do.

You can jump right into a console on production:

link:arcadefly adam$ heroku console
Ruby console for arcadefly.heroku.com
- a = Arcade.first
=- #<Arcade id: 1, created_at: "2008-07-27 21:30:09", updated_at: "2008-07-27 21:30:09", name: "Rocky's Replay", permalink: "rockys-replay", phone: "(407) 260-0043", website: nil, notes: nil, profile_id: nil, playables_count: 44, frequentships_count: 3, owner_email: nil, owner_name: nil>

Using the heroku logs command, you can get the last bit of your production log real fast. Running rake tasks is as simple as heroku rake db:migrate. You never need to specify environment with Heroku — everything on Heroku is production.

Probably the biggest limitation is that there is no access to the filesystem except in /tmp. In order to save and manage files, you should instead use S3. Since Heroku runs on EC2, there is no file transfer charge for files between your S3 account and your Heroku servers since they are both in the same data center.

Expanding Heroku

It’s free to get started on Heroku. You can create a rails site with 1 Dyno (1 Thin server), have a daily cron job, get a PostgreSQL database and even point your own custom domain there. You can expand this with more thin clients, delayed_jobs and much more at a price. I like the idea of having delayed_job processes running in the cloud rather than possibly slowing down the site. Unfortunately there’s no public memcache yet, although it’s in private beta. I’m still just getting my feet wet with Heroku, but look forward to seeing how ArcadeFly does there.

Naming Computer at Work

At one job I worked they took naming very seriously, in the fun way. All servers would be named after characters from The Matrix. So we might have a development server called Agent-Smith, or a database server called Trinity. If you’re connecting to a small set of servers, you won’t soon be confused over the names. It’s a great improvement over application-1, application-2, etc if you’re naming a small set of servers. There’s plenty of names to choose from. I wouldn’t recommend using the alternate Agent names though, unless you want to get Agent-Smith, Agent-Jones and Agent-Brown confused.

Desktop computers throughout the office were then named after Transformers. There’s plenty to select from, and it adds a personal touch to everyone’s computer. You could even take it a step farther and couple each computer with a Transformer. You could split the office into Decepticons and Autobots if you have a clear divide, and then the two sides can go to war — or something like that. It’s a lot easier to look at the network and see Starscream than “pc-rover-2245″. You can have all kinds of fun with this — big transformers are power computers, flying transformers are laptops.

Naming Computers at Home

My naming convention for devices in my home is largely copied from one of the above. All computers in my home are named after Matrix characters (aside from a few of my girlfriends devices which still need to fall inline). My computers that I use are named after human males – Link and Bane (Bane is the Windows partition on my Mac). Other devices of mine around the house that are named after male programs. So Keymaker is my router, my Drobo is Merovingian, portable hard drive is Seraph, my airport express is Trainman and our shared media center Mac Mini is Persephone (always coupled with Merovingian, you see?). At home you probably don’t have enough devices to really need much in the way of naming conventions, but if you have a few USB drives it suddenly makes a lot more sense.

Table of Elements

I don’t remember where I heard it, but someone mentioned to me that they’d organized their servers based on the periodic table of elements. Domain controllers would be noble gasses, halogens might be file servers, transition metals (which are the bulk of elements) could be desktops used by everyone in the office. There’s a few more groups built in for you to use, so long as you don’t have too many devices. This allows for a little more “professional” sounding names, or at least a different kind of nerdy.

Fun of Functional?

Whether you go with a fun or functional naming convention, or even have one at all, will depend on the atmosphere of where the devices will be. If you have a chance to have a little fun, go for it! Anyone have any other fun naming conventions they use or have heard about? Always looking for more examples.

The Problem

The page in question is the Sponsored These Tweeters page at SponsoredTweets. It’s a pretty basic Wordpress page with an iFrame that contains the list of Tweeters. Real easy way of adding a dynamic touch to a Wordpress site. The issue is that the iframe contains a dynamic amount of content, and could potentially grow or shrink based on the length of amount of tweeters being shown. The kicker? The page with the list of tweeters is at a subdomain, and under https.

Monitoring with Jquery

My first idea with anything like this is “Can I just listen for a jquery event on the element?”. Well, sure, but the height of the iframe won’t change. You’ll only be able to get the height/width of the iframe itself, not the content within it from the page itself, so watching for a resize or load event on the iframe won’t work. What you’re really wanting to listen for is a change in the height of the content

Works? No.

Reaching into the frame with contentWindow

If your frame and the page containing it both exist on the same domain, you can reach into DOM of the frame and get the height that way. At anytime you can do something like this to get the height of the page:

document.getElementById("iframeid")
         .contentWindow.document.body.scrollHeight

This bit of code will return an integer — the height of the content of the frame in pixels. Even if the iframe has a height of (for example) 300px, the content itself could be smaller or larger. Unfortunately you can’t set a jQuery event watcher on document.getElementById("iframeid").contentWindow.document.body either (at least from what I’ve seen), so I can’t see a way to watch for a change in height.

The “not-so-nice” fix for this is to make a really fast function that repeatedly checks a change in the height, and resizes the iframe accordingly. Here’s some sample code for this using jQuery.

var $iframe = $("#iframeid");
function resize_iframe() {
  var current_height = $iframe.css("height");
  if(current_height != $iframe[0].contentWindow.document.body.scrollHeight) {
    $iframe.css("height", $iframe[0].contentWindow.document.body.scrollHeight);
  }
}
setInterval("resize_iframe();", 100);

Everytime I use setTimeout() or setInterval() in Javascript, it’s immediately a red flag. These (along with the evil-eval) can be an obvious code smell, but also a trigger that the code itself isn’t designed in the best way.

The problem with this though is that it won’t quite be realtime. Also the contentWindow.document object is not available cross-domain. Even doing things like contentWindow.document.location.href to get the current location of the frame doesn’t work if the calling page and the frame are on different domains/subdomains. This might work for some cases, but not if your iframe is on a different domain.

Works? Yes.
Works on the same domain? Yes.
Works on different subdomains on the same domain? No.

The document.domain hack

If both your frame and your calling page exist on the same parent domain, there’s a little hack you can do to get this to work. Each page has a document.domain variable that contains the domain from which ajax calls can be made to. If you rails application is up at https://app.sponsoredtweets.com, then your document domain will be set to app.sponsoredtweets.com. Of course your main website sitting at http://sponsoredtweets.com will have a document.domain ot sponsoredtweets.com. Because of this they won’t be able to talk to each other. What you can do is manually change the document.domain value.

Surprisingly enough, you can tweak this value as long as you only get broader in your domain. For instance, if document.domain is app.sponsoredtweets.com, then you’ll be able to manually set this using something like this: document.domain = "sponsoredtweets.com" From that point on, that page will be treated as those requests were coming/going to that domain. Using this, you could set your iframe and the page containing the iframe to be on the same root domain, then reach into it’s contentHeight as described above. After you’ve set this to “sponsoredtweets.com” though, you won’t be able to change it again, as that’s the most general a document.domain can get.

Works on the same domain? Yep.
Works on different subdomains on the same domain? Yes.
Works crossdomain? No.
Works across https? No.

Frame within a Frame within a Frame

Unfortunately, none of this works across domain, of from http connections to https. Here’s how it works for SponsoredTweets:

The main page is http://sponsoredtweets.com/tweeters/sponsor-these-tweeters/, aka, the parent page.
Which has a frame to https://app.sponsoredtweets.com/tweeters, aka, the content page.
Which has a frame to http://sponsoredtweets.com/iframe.html, aka, the placeholder page.

The middle frame is the one that will change in height of course. For the same reasons as above, the middle frame cannot reach into it’s parent frame and call methods there either. It can, however, control it’s own iframe in a very limited sense. For instance, take this line from the

$("#parent_domain")[0].contentWindow.location = 'http://sponsoredtweets.com/iframe.html#' + height;

Whenever the height of the content page changes, it updates the location of it’s frame to include a hash tag followed by the current height of the content. By itself this won’t do anything, but if that iframe.html page is watching for changes to it’s location, we can start from there.

The placeholder page is what makes this all possible. All it has to do is monitor for changes to it’s hash, and when it sees them, send them up to the parent page (that is, the top level page). Now, although the content page can’t talk to it’s parent page, the placeholder page can talk to it since they are both on the same domain. Is it a hack? Oh yeah, and of the worst kind.

<html>
<script type="text/javascript">
<!--
  function sendHash() {
    var location = window.location.href.split("#")
    if(location.length != 2) { return; }
    parent.parent.receiveHash(location[1]);
  }
  setInterval("sendHash();", 100);
-->
</script>
<body></body>
</html>

parent.parent…? Yeah, thanks HTML. All the receiveHash() function on the parent page does is take a number and set it as the height of it’s iframe. Real simple implementation, it’s just the craziness that is cross-domain security that makes it difficult to grasp.

Works across https? Yes!

Got a Better Solution?

I can’t believe this would be the ideal way to do something as simple as resize an iframe. Do you know of a better way of doing this given that the pages exist on separate domains? I’d love to hear about it.