Andrew: This service adds a moustache to any face! It’s awesome!

Me: I’m busy working.

A: What if we create an extension that would add a moustache to every face! It’d be awesome!

Me: I’m busy working.

A: It’d take only a few minutes anyway.

Me: Ok, whatever…

In the next 7 minutes or so I created a Chrome extension that puts a moustache on every face on every page. It took us another half an hour to test it, fix an occasional bug, draw a few icons, write a description for the Chrome gallery and pay $5 developer fee to Google since I never used my own account for extensions yet.

We tweeted about it and it went viral, to our surprise. We found out that the code doesn’t perform well on the Cedar stack of Heroku, so we had to redeploy to the old Bamboo – all while the usage levels were growing exponentially. Almost immediately it became obvious that our Face.com API key wouldn’t be enough to process all the requests and we asked to raise the limit (fortunately, they raised our limit promptly – thanks). In a matter of minutes we received an email from the American Mustache Institute, and in a matter of hours people began blogging about it (and not only in English). Our servers are still unable to process all the requests; we have to drop some of them and the tweets keep coming.

It was a good fun for a Friday afternoon pairing with the awesome @teabass!

At InvisibleHand we are really trying to understand user behaviour to improve our extension. In particular, we run A/B tests of our extension to track whether new features make the users to uninstall InvisibleHand less or more. To track the uninstallations in a fairly hacky way, we inject this piece of code as a content script into every single page:

var iFrameId = 'invisiblehand-uninstallation-notifier';
var silenceCount = 0;
var maxSilence = 3;

var timer = setInterval(function() {
  chrome.extension.sendRequest({topic: "heartbeat"}, function(reply) {
    if (reply && reply.alive)
      silenceCount = 0; // we want 3 consecutive silence events just to be sure
    else
      silenceCount++;
    if (silenceCount < maxSilence) return;
    clearInterval(timer);
    if (document.getElementById(iFrameId)) return;
    var iframe = document.createElement("iframe");
    iframe.id = iFrameId;
    iframe.src = "http://productsiframe.invisiblehand.co.uk/uninstall";
    iframe.style.display = "none";
    document.body.insertBefore(iframe, document.body.firstChild);
  })
}, 1000);

This code tries to connect to the background page every second and if it fails (when it fails, the callback is still called but the reply is undefined), we assume the extension was disabled or uninstalled, so we inject an invisible iframe into the current page to notify our server about the uninstall. It’s the server’s responsibility to count only one uninstall per user since there is a high probability that this code will be executed in every open tab. However, it’s not of utmost important to us since we’re tracking not the absolute number of uninstalls but a relative change.

However, there is a big problem with this piece of code apart from it being very hacky. Several users reported that it leaks memory and the tabs with this code running that are left open in background can leak hundreds of MBs of memory. We found it hard to reproduce it but it looks like the issue is only present on the version 11 and not present on version 12 of Google Chrome. Furthermore, some users have reported InvisibleHand crashing a lot when this code was deployed. Again, we were unable to reproduce it reliably but I tend to believe this setInterval() has something to do with memory leaks and crashes.

We usually deploy this code only for short periods of time (hours) to run a specific A/B test and roll it back (release a new version without this content script) as soon as possible. I’m really looking to the day when it’ll be possible to listen for the uninstallation event.

If you know why this code may be causing memory leaks and/or crashes, please let me know in the comments.

“Component is not available” nsresult: “0×80040111 (NS_ERROR_NOT_AVAILABLE)”
FF4 throws this exception if the event that is being checked is not supported on these lines:

var isSupported = (eventName in el);

isSupported = typeof el[eventName] === “function”;
This problem seems to be specific to loading jQuery using loadSubScript() since I cannot reproduce it in the console.

A workaround is a simple try/catch block. I created a pull request for the jQuery team here: https://github.com/jquery/jquery/pull/128

Net::SMTPFatalError: 555 5.5.2 Syntax error.

if your from address looks like ‘Evgeny Shadchnev <email@gmail.com>”. Setting it to just ‘email@gmail.com’ helps.

FasterCSV::MalformedCSVError: Unquoted fields do not allow \r or \n (line 1).

The solution is to convert the data to UTF-8:


require 'iconv'
csv = Iconv.conv('utf-8', 'utf-16', csv)


Then, :encoding => 'u', flag for FasterCSV should be enough to process this file with no problems.

ruby unit/booking_test.rb --name=test_cost_is_calculated_correctly_when_theres_a_surcharge

This doesn’t work (all tests are run instead) because the parameter is not passed correctly to the script. This works, however:

ruby unit/booking_test.rb --name test_cost_is_calculated_correctly_when_theres_a_surcharge

On ruby 1.8.7 both ways of passing the argument work just fine, while on ruby 1.9.1 only the second way works.

Since we want to pass two arguments to the script (‘––name’, ‘test_foobar’) instead of one (‘––name=test_foobar’), let’s patch TextMate. Open
/Applications/TextMate.app/Contents/SharedSupport/Bundles/Ruby.tmbundle/Support/RubyMate/runscript.rb
and replace

if name and !name.empty?
args << "--name #{name}"
elsif test_name and !test_name.empty?
args << "--name test_#{test_name.gsub(/\s+/,'_')}"
elsif spec and !spec.empty? and context and !context.empty?
args << %Q{--name "/test_spec \\{.*#{context}\\} \\d{3} \\[#{spec}\\]/"}


with

args << "--name"
if name and !name.empty?
args << name
elsif test_name and !test_name.empty?
args << "test_#{test_name.gsub(/\s+/,'_')}"
elsif spec and !spec.empty? and context and !context.empty?
args << %Q{"/test_spec \\{.*#{context}\\} \\d{3} \\[#{spec}\\]/"}


This will make the focused unit tests work.

The challenge was to test this stuff automatically because the JS code makes part of a Ruby project and I want to ‘rake test’ it all. Getting a JS engine in my project would be an overkill, so I resorted to Selenium.

So, how to test a piece of Javascript code stored in your Ruby project?

First, download Selenium

Then, launch the server
java -jar selenium-server.jar

Then, install selenium client
sudo gem install selenium-client

In your unit test, launch Selenium:

attr_reader :browser

def setup
  @browser = Selenium::Client::Driver.new "localhost", 4444, "*firefox", "http://www.google.com/", 10000
  browser.start_new_browser_session
end

To simply remove the vertical tabs from the file (or, rather, replace them with spaces), I tried using sed like this

sed s/\x0B/\ /g file.xml

but I found out that \xXX syntax is not supported by OSX sed version, which is a shame, so I used a ruby script, which, to my surprise, was quick enough to process a 800 MB file.

output = File.open("out.xml", 'w+')
File.open('file.xml').each{|p| output.puts p.gsub(/\x0B/, ' ')}