Less Talk, More Do Christopher Finke is a software engineer. He is available for birthday parties and bar mitzvahs.

College: Post-It Notes and Scotch

July 28th, 2010

Post-Its and Scotch
Amazon may want to re-think their wording regarding Scotch's sponsorship of free two-day shipping for college students.

YouTube Comment Snob in the news

June 11th, 2010

YouTube Comment Snob got some press from the BBC's Webscape segment; the coverage starts around the three-minute mark, right after a very complimentary bit on Jay Meattle's Shareaholic.

My wife told me not to post this

June 8th, 2010

I made this nine years ago. I like to think that I have matured since then, but the fact that I am now posting it here indicates that I have not.

100% Juice for 100% Jews

"100% Juice for 100% Jews."

Blast from the past: The Humor Archive

June 1st, 2010

There's no point to this post; it's just a collection of memories I have about launching one of my first websites.

The first website I ever built was called "The Humor Archive:"

  • It went online in late 1999 at the URL http://ticon.net/~finke/. The motivation behind the building of the site was that our ISP offered free Web space to all subscribers; my dad agreed that I could use the space if I learned how to create a website, so I chose to use the spacious 5MB to build a collection of funny lists and jokes. I curated the archive by copying/pasting funny things I found online (usually without attribution, because I was young and didn't know any better), and I also included a new humor column each week written by my dad. He didn't write them specifically for my site; they had been published previously in a number of Midwestern newspapers.

  • I dutifully submitted the site to various directories and search engines; at some point, I realized that I was getting the short end of the stick from dmoz, since it listed sites in alphabetical order. That's when I had the stroke of genius to rename "The Humor Archive" to "Absurd! The Humor Archive." I would later rename it again in an attempt to game the listings, this time to "!Absurd! The Humor Archive." My SEO skills were obviously ahead of their time. (Looking back through the archives of alt.html, I realized that I had originally named the site "Did you hear the one about?...", but changed it after this response from legendary Finn Jukka Korpela.)

  • Not long after I launched it (using Notepad and WS_FTP), I noticed that my odometer-style hit counter was jumping up by dozens each time I would refresh the page. As it turned out, The Humor Archive was the fourth result when AOL users searched for "humor." That high placement didn't last long, but the feeling while it did was exhilarating.

  • For a short while, I ran a mailing list called "The Daily Laugh." I doubt I sent out more than five editions of the "daily" laugh over a period of six months, but I never bothered to change the name to "The Occasional Laugh."

  • When my family moved and I no longer had access to our old ISPs Web space, The Humor Archive disappeared. Surprisingly, someone actually noticed.

Eventually, I took The Humor Archive offline and forgot about it.

UNTIL NOW!

I've collected the pieces of the site that I could find online and in my backups and reinstated it at humorarchive.efinke.com.

Sharp-eyed readers with a memory for early-21st century websites may recognize the header graphic as coming from FlamingText.com. I was unable to find the original header image, but as it turns out, FlamingText is still up and running, producing exactly the same graphics as it did ten years ago, so the current header is a faithful reproduction. (I don't remember why I chose cows as the theme for the site - besides the bovine header, the list bullets are all little cow heads - but it was probably because cows are hilarious.)

ScribeFire for Google Chrome

April 8th, 2010

I've published a post over on the ScribeFire blog with the details, but if you're running Google Chrome, you can now install ScribeFire for Google Chrome:

This first (alpha) version took three weeks of development, contains about 3,000 lines of JavaScript, uses jQuery, and is completely open-source. Oh, and I'm using it to write this blog post.  

Ambilight for Your Browser or: Monetizing an Add-on with Fat Plug

March 26th, 2010

I've written a new Firefox extension; it's called True Colors, and it bleeds the colors from the web page you're viewing into the tab bar and status bar. Think of it as Ambilight for your browser.

The technical details behind the extension are interesting, but I won't go into detail on that here, since Splashnology's blog post describing how Ambilight for video works explains 99% of the technique.

There's another important aspect to this extension. I've used it as a testbed for Fat Plug's add-on monetization system. A Fat Plug-enabled extension will add/change ads on various websites, and, in turn, funnel a portion of the revenue from those ads to the extension developer.

There's some controversy around this technique. Mozilla has opted to deny any Fat Plug extensions that are submitted to the Mozilla Add-ons Gallery. Website owners, I imagine, wouldn't appreciate their ads being replaced with ads that don't earn them any money. (Although it would harm them no more than ad-blocking extensions, which Mozilla does allow.)

However, to an add-on developer, the idea is intriguing: "What if I collected half of all the website ad revenue from all of the users that use my extensions?" A developer of a popular add-on could retire after a couple of years to the sands of Grand Cayman and spend his days writing free software that needs no monetization.

So True Colors is my testbed for Fat Plug's technology. I won't be uploading it to Mozilla Add-ons, and I won't be publishing it anywhere that doesn't make the Fat Plug integration obvious. I'm not looking to stealthily trick users into becoming my little monetization machines, which is why I purposefully wrote a simple extension that doesn't add functionality to the browser as my first foray into Fat Plug.

If you're interested in seeing how Fat Plug modifies ads on websites, you can install True Colors, agree to the license agreement, and then set the preferences extensions.fatplug.enableoutlinediv and extensions.fatplug.enableoutlinelink to true in about:config. Any ads that Fat Plug adds or modifies will be outlined in red for your convenience.

If you're interested in the coloring functionality but are wary of the Fat Plug integration, you can install the extension and just not agree to the license agreement. That will keep the tab and status bar coloring functionality but disable Fat Plug's code.

Making Add-on/User Communication Less Annoying

February 27th, 2010

When a new user downloads TwitterBar, there are a number of things I want them to know or questions I want to ask them. So what is the best method to communicate with an add-on user?

The solution I've been using for a while is to pop up a dialog like this:

There are several problems with this approach, all of which I decided to ignore when I implemented it:

  • It steals the user's focus.
  • It's annoying.
  • The user might click cancel without reading it just to get rid of it.
  • It's annoying.
  • The user might immediately (but accidentally) click elsewhere, hiding the dialog behind another window, never to be seen again.
  • It's annoying.
  • It's extra code and work to pop up a special dialog like this.
  • It's annoying.

Back when there was only one dialog, I decided that these were acceptable faults. However, since then, I've come up with a few more questions I want to ask users, so now instead of one annoying dialog, there are three or four annoying dialogs - a new one appearing each time you restart Firefox.

Predictably (or so it should have been), users don't like to be assaulted with new dialogs each time they start their browser. Most likely, they're starting their browser for some purpose other than using my add-on, so my add-on shouldn't steal their attention. As one user so elegantly put it,

"I really love the TwitterBar, but after the most recent TwitterBar update, I noticed I kept getting these annoying as hell pop-ups from TwitterBar about TwitterBar. After the third one (while I was in the middle of doing something and became distracted with this pop-up dialog box TwitterBar tip of the day), I uninstalled it. If you want to keep your clients, don't constantly tap them on the shoulder."

I had already been working on redesigning these add-on/user interactions when I got that email, so the user's message reinforced what I had suspected: I was alienating my userbase.

Here's the new scheme I've settled on for now:

It's a notification bar, much like the one that appears when Firefox blocks a popup. It has these positive qualities:

  • It doesn't steal focus or interrupt the user.
  • It's not in-your-face, so it's less likely (I assume) to be dismissed without thought.
  • It can't be lost behind another window.
  • The amount of code to implement it is less, and it's more in tune with the browser interface.
  • It's not as annoying.

I'd love your feedback on this change. Is it enough? Should I stop bothering users altogether and just let them discover their way around the add-on? I'm open to all ideas.

(If you'd like to try a version of TwitterBar with this new notification method, you can download it here. Although, if you've already seen the old dialog-style version of these notifications, you won't see the new-style ones anyway.)

TwitterBar 2.9 Available: Post to Multiple Twitter Accounts

February 24th, 2010

Version 2.9 of TwitterBar for Firefox was made available on Mozilla Add-ons today, and it has a very cool new feature: you can now use TwitterBar with more than one Twitter account.

To post to a specific account, just type your message like this:

I am posting to my other account. --@other_account --post

If you haven't yet authorized TwitterBar for @other_account, you'll be walked through the authorization process.

If you've authorized more than one account, and you don't specify which account you want to post to, you'll be given a list of choices:

You can manage your accounts from the TwitterBar options (just type "--options").

Finally, to authorize a new account without posting to it, just type "--account" in the URL bar.

To install this new version of TwitterBar, download it from Mozilla Add-ons.

The next obvious step is the ability to post to multiple accounts simultaneously, and the next version of TwitterBar will offer than feature. If you'd like to beta-test that update, e-mail me and let me know.

Uploading form data and files with JavaScript (Mozilla)

January 30th, 2010

One problem I stumble across occasionally in writing Firefox extensions is properly uploading form data that includes a file - that is, assembling the POST request in JavaScript while still maintaining the sanctity of any file or string data. You can't just do this:

var request = "--boundary\r\n some text\r\n--boundary" + fileBytes + "\r\n--boundary--";

I had to spend a bit of time getting this just right in order to allow ScribeFire to upload media to Posterous, so I'm posting below the final solution at which I arrived; it was cobbled together from a dozen different examples I found around the Web (none of them solving the full problem), then lovingly massaged into the elegant function you see before you. With this function, you can pass in an array of fields and files, and the request will be crafted and returned to you, ready for upload.

Instructions for use are in the comment block at the top of the function.

function createPostRequest(args) {
  /**
   * Generates a POST request body for uploading.
   *
   * args is an associative array of the form fields.
   *
   * Example:
   * var args = { "field1": "abc", "field2" : "def", "fileField" :
   *              { "file": theFile, "headers" : [ "X-Fake-Header: foo" ] } };
   *
   * theFile is an nsILocalFile; the headers param for the file field is optional.
   *
   * This function returns an array like this:
   * { "requestBody" : uploadStream, "boundary" : BOUNDARY }
   *
   * To upload:
   *
   * var postRequest = createPostRequest(args);
   * var req = new XMLHttpRequest();
   * req.open("POST", ...);
   * req.setRequestHeader("Content-Type","multipart/form-data; boundary="+postRequest.boundary);
   * req.setRequestHeader("Content-Length", (postRequest.requestBody.available()));
   * req.send(postRequest.requestBody);
   */

  function stringToStream(str) {
    function encodeToUtf8(oStr) {
      var utfStr = oStr;
      var uConv = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]
                    .createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
      uConv.charset = "UTF-8";
      utfStr = uConv.ConvertFromUnicode(oStr);

      return utfStr;
    }

    str = encodeToUtf8(str);

    var stream = Components.classes["@mozilla.org/io/string-input-stream;1"]
                   .createInstance(Components.interfaces.nsIStringInputStream);
    stream.setData(str, str.length);

    return stream;
  }

  function fileToStream(file) {
    var fpLocal  = Components.classes['@mozilla.org/file/local;1']
                     .createInstance(Components.interfaces.nsILocalFile);
    fpLocal.initWithFile(file);

    var finStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                      .createInstance(Components.interfaces.nsIFileInputStream);
    finStream.init(fpLocal, 1, 0, false);

    var bufStream = Components.classes["@mozilla.org/network/buffered-input-stream;1"]
                      .createInstance(Components.interfaces.nsIBufferedInputStream);
    bufStream.init(finStream, 9000000);

    return bufStream;
  }

  var mimeSvc = Components.classes["@mozilla.org/mime;1"]
                  .getService(Components.interfaces.nsIMIMEService);
  const BOUNDARY = "---------------------------32191240128944"; 

  var streams = [];

  for (var i in args) {
    var buffer = "--" + BOUNDARY + "\r\n";
    buffer += "Content-Disposition: form-data; name=\"" + i + "\"";
    streams.push(stringToStream(buffer));

    if (typeof args[i] == "object") {
      buffer = "; filename=\"" + args[i].file.leafName + "\"";

      if ("headers" in args[i]) {
        if (args[i].headers.length > 0) {
          for (var q = 0; q < args[i].headers.length; q++){
            buffer += "\r\n" + args[i].headers[q];
          }
        }
      }

      var theMimeType = mimeSvc.getTypeFromFile(args[i].file);

      buffer += "\r\nContent-Type: " + theMimeType;
      buffer += "\r\n\r\n";

      streams.push(stringToStream(buffer));

      streams.push(fileToStream(args[i].file));
    }
    else {
      buffer = "\r\n\r\n";
      buffer += args[i];
      buffer += "\r\n";
      streams.push(stringToStream(buffer));
    }
  }

  var buffer = "--" + BOUNDARY + "--\r\n";
  streams.push(stringToStream(buffer));

  var uploadStream = Components.classes["@mozilla.org/io/multiplex-input-stream;1"]
                       .createInstance(Components.interfaces.nsIMultiplexInputStream);

  for (var i = 0; i < streams.length; i++) {
    uploadStream.appendStream(streams[i]);
  }

  return { "requestBody" : uploadStream, "boundary": BOUNDARY };
}

2010 Calendar - December

January 13th, 2010

12 - December

"December: Jesus is the reason for the season."