overstimulate the feed

New Relic Firefox Status Bar

Sun, 15 Mar 2009 18:45:24 GMT

Monitoring the performance of your rails application is easy with New Relic. When I shared my munin charting for New Relic I mentioned I was building a status bar. At the time it was ugly and didn't work with multiple accounts. After using New Relic to fix an issue on cliKball this evening I decided to improve the extension.

After entering your license key (found in the Accounts tab of your dashboard), your application's health is checked every minute, showing the traffic lights for your selected app. To change between your applications you can click on the new relic dropdown menu. Hovering on the traffic light gives you more information, clicking on the lights takes you to the overview for your application.

Installation and source

From Firefox click http://s3.amazonaws.com/overstimulate/relic.xpi to install (you might need to click "allow" in the upper right corner of your browser after the first click).

The source is on github at anotherjesse/foxy-relic.

Tweetworthy Firefox Extensions

Sat, 07 Mar 2009 10:41:48 GMT

BackType recently released a cool Twitter link search-engine, BackTweet. Since every tweet use a different short-url service BackTweet lets you search based on the final URLs instead of only short-urls. Now I can see when people tweet about my site, which wasn't easy to search for before.

Get your scrapers ready!

Since BackTweet doesn't seem to have a JSON api, and I really wanted to see what Firefox extensions are most tweeted, I wrote screen scrapping code that creates a report for tweets over the last 3 days (max of 500 results for addons.mozilla.org search). No surprise that Twitter extensions are popular. (ruby code to generate report)

Extensions with 3+ tweets

Power Twitter 104
TwitterFox 43
TwitterBar 40
TinyUrl Creator 10
KallOut - Accelerators for Firefox 9
Shareaholic 9
IE Tab 8
Duck Duck Go Toolbar 7
EditPrefs 6
Greasemonkey 6
Tab Mix Plus 6
LeechBlock 5
Twitbin 5
Adblock Plus 4
FacePAD: Facebook Photo Album Downloader 4
Firebug 4
Foxmarks Bookmark Synchronizer 4
Glue 4
LongURL Mobile Expander 4
MySocial 24x7 Bar 4
ReloadEvery 4
Twitter Search 4
JSONView 3
MeasureIt 3
UrlbarExt 3
Video DownloadHelper 3
Web Developer 3
is.gd Creator 3

Firefox New Tab + Addons

Fri, 06 Mar 2009 08:11:15 GMT

Aza has been leading a discussion about what the blank tab should have. Chrome did a good job of taking some real-estate that was blank and providing something to the user that has value. Chrome hasn't had to deal with a serious usability problem we have in Firefox-land yet - that of addons trying to communicate with the user.

No place like new tab?

A couple of months ago, at the Mozilla Open House, Rey Bango talked with extension developers about issues we have and firefox users have. Some of it was pretty, but Mozilla (in particular Ray) did a good job of trying to move forward and find solutions. One issue he shared was highlighted by the user experience of Fashion Your Firefox. These extension packs could be quite painful as each extension runs first-run/setup in a different manner. Installing a pack could result in multiple dialogs, notification banners, and a frustrating user experience.

Aza's discussion of new tab is a great time to consider how users could benefit from using it as a place to interact with extensions. Ray and the AMO team probably have better ideas about how this could work, but here are some of my thoughts.

When new extensions are added they can provide a box of info with how to use/configure it.
Installed extensions are listed, providing quick access to settings/status.
Non-crucial notifications (eg, something that doesn't warrant a window) could be added to an "inbox"/notices section on the tab.

Jono posted about Ubiquity's first run woes. It is clear that the Mozilla team is thinking how to make the user experience better. It would be interesting to see what Jono thinks can be generalized from the Ubiquity first-run/install experience and added directly to the extension platform.

Viral Grid Computing

Wed, 04 Mar 2009 21:09:49 GMT

Ilya Grigorik's post on Collaborative Map-Reduce in the Browser explores how to leverage visitors to do computation. While I think he is looking in the right direction, I don't think he is thinking large enough. Moving your worker code into widgets lets you "leverage viral growth" to do computation.

Why Google bought Youtube

Anytime you see a Youtube embed, your computer is doing computation in the background. Ask a Mac user and they will tell you how hot their computer gets with a single Youtube video. I suspect Google is testing their grid by having Macs compute pi to hundreds of digits. If results are positive, G2C2 (Global Google Compute Cluster) will be activated for everyone.

Computation is serious business

Lowly clients can do some serious work. Bit-torrent uses a variant of Tit for Tat to punish leechers who download without contributing bandwidth to others. Avril Lavigne - Girlfriend's 116 million views could have contributed 838 years of compute time.

Bloggers and social networkers could leverage their reach to help cure cancer. Laughing Squid could embed a wrapped youtube player that folds protein in the background.

My Computer Setup

Fri, 27 Feb 2009 08:26:17 GMT

Long ago I would spend days designing and building a new computer every year, only to tinker unendingly until it was time to start over. My hardware lust has moved on to phone lust, leaving behind my minimal approach to my setup. What I consider the most important parts now were previously afterthoughts. As technology caught up with me, older laptops satisfied my power requirements and years of improper use highlighted the importance of the chair and keyboard.

The important stuff

A good chair is my top priority. The cheap office store chair never feels right and starts to hurt you within a few months. I had an Aeron at a previous job and it was nice. I knew I'd found my true love after using a Steelcase Leap for a month at work. Ordering the Leap for $849 shipped might have been painful for my bank account, but it has done wonders for my back.

A good keyboard is my second priority. During summer break from college I blew out my wrists coding Tux Typing on a dell laptop keyboard. While the Latitude keyboard was horrible almost a decade ago, I am mostly to blame for working in unhealthy positions. I seem to remember spending most of that time laying on my stomach looking forwards to see the screen. I am very picky about laptops in the sense that they must have a good keyboard. The ThinkPad X60 has good laptop keyboard, but cannot compare to the Kinesis Advantage when at sitting at a desk. The Kinesis takes some time to get used to, but if you struggle through it, instead of switching back your normal keyboard whenever you get frustrated, you can master it in a few days.

A nice LCD is important. While Monitors are commodity, choose one that can be correctly positioned. You don't want to strain your neck looking at your laptop or monitor.

My mobile setup

An awesome tiny bag that fits everything on this list. My mom was giving it away and luckily my laptop barely fits into it (not a 1/4" to spare).
Google Dev Phone (android) - more functional, yet less complete, than the iPhone
A Moleskine journal - I would go digital if there was a fast notes app on android
Sony eReader - I've had this since 2006 and find reading e-ink pleasant. The selection of books is a fraction of what the Kindle offers, so I'll probably upgrade someday
iPod nano - the android uses USB-WTF for headphones :( Perhaps the Palm Pre will work with normal headphones. Unsurprisingly, the iPhone is a great music device.
ThinkPad X60 - I like this laptop so much I replaced my crushed X60 with another used one. I've tried many netbooks, but the keyboards aren't big enough for my fingers. You can find these used for about the same cost as a netbook - I paid $300 for mine.
A small X60 power cord and the laptop has the largest battery made for the X60
Golden Gate Transit schedule - indispensable yet frustrating. 90% of the data is irrelevant to me and none of the knowledge. Someone should create a custom guide you can print with schedules of buses that come near where you need to travel (ala offbeat guides).

All told, my chair cost more than all the items on this list. The important parts are the ones that will destroy your back and wrists if you do them wrong. I could replace/remove anything on this list and still have an effective setup. I could not replace my chair or keyboard with an office store special and survive a week. My back and wrists are too far gone.

What do you use?

And just as important, what do you not use?

Currently I have two rarely old laptops I use for testing with XP and OSX. I should replace the XP laptop with a VM. I think it isn't possible to OSX inside a VM, so I would need to keep the mac. Other reductions seem to require replacement of multiple items at once (such as replacing my phone and iPod for a phone).

Charting Health with New Relic and Munin

Thu, 26 Feb 2009 07:37:17 GMT

New Relic recently released the first version of an API. They are even holding a contest for people to create cool apps/widgets/whatnot with their API. What follows is not a cool app - just a simple munin plugin for generating static images of application health.

By charting New Relic data in munin we have fast access to application health information right next to other system metrics. The historical charting that munin is useful to show trends in how your system is behaving on the day, week, month, year scale.

I added munin charts to my site's dashboard by embedding a munin chart. Then I wrapped it with a link to the New Relic page with more information.

Installation

Grab the code at gist.github.com (click on raw) - save it as relic.rb
Add your New Relic license key
Put it on your server in /usr/share/munin/plugins
Make the script executable: chmod +x relic.rb
Sym-link for each metric you want to chart: ln -s /usr/share/munin/plugins/relic.rb /etc/munin/plugins/relic_db (and/or relic_cpu relic_throughput relic_errors relic_response relic_memory)
Test running them manually: /etc/munin/plugins/relic_db
Restart munin node: /etc/init.d/munin-node restart
Wait 5 minutes for munin to run - hoping you didn't make any typos

Issues/Ideas

I only have 1 application associated with my license key. Modifications are needed to properly support multiple applications.

Perhaps certain metrics should be grouped (CPU & DB, Errors & Throughput).

I've also been working on a New Relic status bar for firefox. It needs work, so if you try it out let me know what you changes you would like!

Graceful Caching with Varnish

Wed, 25 Feb 2009 09:30:26 GMT

Your website is being hammered because Hammer told his 120,000 followers on twitter to check your site. The content is highly cachable and no one would notice if you sent the same data for up to a minute. To make matters worse the request takes 5 seconds to complete. Hammer is threatening to send his posse after you. What do you do?

To simulate this theoretical event we will use a small sintra app and apache bench.

require 'rubygems'
require 'sinatra'

get '/work' do
  sleep 5
  body "result: #{rand}"
end

Requests take 5 seconds to process, in addition to any time spent waiting in the request queue. Our single app server processes requests one at a time, so if requests are more often than every 5 seconds, requests will certainly be delayed.

We could add more app servers to improve throughput, but each request would still take 5 seconds, and our concurrency is limited by the number of app servers. Most requests are doing work that isn't needed since the results computed by the last request are good enough.

Getting Varnish

Varnish is a state-of-the-art, high-performance HTTP accelerator, meaning it is built for caching. While your framework might have internal support for memcache or file system based caching, it is worth exploring how Varnish could integrate with your systems. Varnish is a layer between your HTTP frontend server (nginx) and your app servers. Besides caching it constantly checks the health of backend services, and only sends requests to those which are live.

Varnish is currently 2.0.3 at the time of writing. To install on linux:

wget http://downloads.sourceforge.net/varnish/varnish-2.0.3.tar.gz?use_mirror=internap
tar -zxvf varnish-2.0.3.tar.gz
cd varnish-2.0.3
./configure
make
sudo make install

Connecting Varnish to Sinatra

Sinatra is listening on port 4567. We start our sinatra.vcl by specifying where to find sinatra.

backend sinatra {
  .host = "127.0.0.1";
  .port = "4567";
}

We can now start varnishd and verify that http://localhost:1234/work works.

sudo varnishd -f /path/to/sinatra.vcl -a 0.0.0.0:1234

The cache time to live is set in vcl_fetch. We add a ttl of 1 minute to our vcl and restart varnishd.

sub vcl_fetch {
  set obj.ttl = 1m;
}

At this point running ab -c 100 -n 1000 takes 5 seconds to complete. Note that Varnish only sent the first request to the app server, and queued the others. When the request finished the queued requests were served from cache.

Troubleshooting tip: Now comes the frustrating part. Nothing seems to be cached when you test this in your browser. Every request takes 5 seconds. Luckily varnishlog shows your browser is sending a cookie. You remember cookies are per domain (not per domain:port), so cookies set when working on localhost earlier are still being sent. By default Varnish doesn't serve cached results to sessions with cookies. This is useful to serve cached pages to anonymous visitors while logged in users get custom versions of the page. Varnish is quite customizable, but for now we will instruct varnish to ignore cookies in our vcl_recv.

sub vcl_recv {
  unset req.http.cookie;
}

Now we have a painful first request, then all further requests for a minute are speed (my $300 laptop gets over 6,000 req/s with 1000 concurrent requests). After the cache expires, we start over with requests being queued while a single request hits the backend. So every minute all requests are blocked for 5 seconds while the backend works.

Being graceful: release the queue

Varnish optionally allows serving the dirty page during a grace period. Varnish sends a single request is sent to the backend and serves all other requests from the dirty cache.

To make sure we never send pages older than 1 minute, we will reduce the TTL to 45 seconds and add a 15 second grace by updating vcl_fetch/vcl_recv.

backend sinatra {
  .host = "127.0.0.1";
  .port = "4567";
}

sub vcl_recv {
  unset req.http.cookie;
  set req.grace = 15s;
}

sub vcl_fetch {
  set obj.ttl = 45s;
  set obj.grace = 15s;
}

Now a single user will hit a 5 second request every minute but thousands of other requests will benefit from that user's generosity.

More caching

You should be caching the page on the client as well. Adding even a small Cache-Control for the browser will improve visitors experiences.

Wikia/Wikipedia, FunnyOrDie, and others have reported impressive results with Varnish. Varnish is very extensible and supports ESI (server side include). Varnish has great tools (varnishtop, varnishdist, varnishlog) to see how your systems are behaving. Varnish takes headers very seriously, specially regarding cache-control, cookies.

FlashLiteBox - a tiny full screen flash lightbox

Tue, 24 Feb 2009 09:01:32 GMT

Flash was given a full screen capabilities a couple years ago, around the same time JavaScript based lightboxes were becoming popular. While I prefer standards based solutions, I don't know of any other way to implement full screen. My goal was to create a really small flash-based lightbox that uses all your pixels to show you images. While not a finished project, I think this 647 byte swf shows potential.

Overview & demo

The basic idea to overlay thumbnails with a flash movie with arrows indicating you can make the image bigger. If you click the arrows, you switch to full screen and the large version of the image is shown.

You can see a demo at the project page. Sorry about that but flash embeds don't survive rss/email so I'm not even going to attempt it.

Code Walkthrough

FlashLiteBox is built using two open source projects. swfmill takes an xml file of resources and compiles the final swf. MTASC compiles the ActionScript 2 code into a swf for swfmill.

Arrows.as

class Arrows extends MovieClip {
  function onLoad() {
    Stage.align = "TL";
    Stage.scaleMode = "noScale";
    Stage.addListener({
      onFullScreen: function(full) {
        if (!full) _root.image.removeMovieClip();
      }
    });
  }

  function onRelease() {
    if (Stage['displayState'] != "fullScreen") {
      Stage['displayState'] = "fullScreen";
      _root.createEmptyMovieClip("image", getNextHighestDepth());
      _root.image.loadMovie(_root.img_src);
    }
  }
}

onLoad runs when the movie starts. We setup flash not to scale our image and to align the images to the top left. A listener is added which checks for a change to full screen mode. This listener allows removal of the image when escape is hit, leaving the flash movie in its original state.

onRelease runs when the mouse button is released. If the movie isn't already full screen we: enter fullscreen mode, then add a new "movie clip" into we load the image. The URL of the image is provided as a flashvar and accessible via _root.img_src.

This ActionScript is complied into classes.swf.

flashlitebox.xml

<movie>
  <clip import="classes.swf"/>
  <background color="Black"/>
  <frame>
    <library>
      <clip class="Arrows" id="arrows" import="src/maximize.png"/>
    </library>
    <place id="arrows"/>
  </frame>
</movie>

In the final flash movie we load several clips. First we import classes.swf, which is a compiled version of the code above. Then src/maximize.png is added as an image clip (16x16 png). It is given an id, which we use place the movie clip into the main movie frame. The class attribute attaches the actionscript classes we imported from classes.swf.

Further ideas & improvements

The code is open source (BSD) and on github. This is a crude prototype and I am not flash developer, so don't flame me!

The demo html is crude and should probably add/position the flash via JavaScript, preferably gracefully degrading to a JavaScript lightbox if you don't have flash.
Instead of a 16x16 png to click, allow clicking anywhere on the thumbnail to open up the full screen view. I think this requires the flash movie cover the image and capture the click for security reasons.
Show the progress of the large image while it downloads instead of a black screen
The image in full screen mode should be centered and scaled to fit
It would be nice to be able to go to the previous/next image without leaving full screen mode

I'd love to see someone take this and create a movie usable by people creating galleries. Or perhaps someone should create a greasemonkey script to add it to existing galleries.

BlogBiking: Making RSS Healthy

Mon, 23 Feb 2009 02:11:41 GMT

Exercise is boring. You know you should, but you don't make time. Motivated by warbiking (playing warcraft while exercise biking), but not having time for it, I applied the concept to my existing time sinks. Once passive tasks (blogs, TED talks, pdfs) become active tasks while biking.

Previously I would attempt to multi-task. Sitting at my desk I would attempt stupid things like watching a video while skimming articles. While effective at pruning unnecessary emails/posts, I rarely remembered the video afterwards. Now I read articles or watch videos while biking. Because I'm biking I'm less fidgety and can concentrate on one thing since I know at the very least I'm staying healthy.

A new Schwinn recumbent bike is $400, but you can find them used on craigslist. I bought mine for $150 into which my X60 fits perfectly.

Don't break the chain

It is easy to lose motivation and stop. After a few weeks of blogbiking in 2007 I stopped for a month. Until this year I've only biked intermittently as I have to consciously remember to move to the bike.

Jerry Seinfeld knew the importance of showing up every day. By working on your craft every day, you keep moving forward, even if the step is a small one. By recording daily progress, you will be motivated to not skip a day (breaking the chain). Knowing I've biked at least 5 miles for 32 continuous days pushes me to not skip a day.

At first I overcomplicated the process. I tried calendar about nothing and other online progress trackers. My Christmas calendar and a sharpie was all I needed. Each day I write my current streak length on today's date.

I know more about COBOL

Somedays I have to bike at midnight when I get home. I need to find an alternative exercise I can do while traveling or during a break at work.

As an exercise n00b, I'm unsure how to optimize for tone/health. Currently I bike at slow pace (10mph) with a high resistance, but perhaps programs that vary resistance (strength interval, ride in park, pyramids, ...) would be better?

Sending Email Alerts with BackgroundJob

Sun, 22 Feb 2009 08:53:29 GMT

Web requests should be lazy, putting off any work they can. When a user updates a script on userscripts.org I send an email alert sent to its fans. But the uploader shouldn't have to wait while hundreds of people are emailed. There are many systems that allow for asynchronous tasks in rails. Here is what worked best for me.

No spam please

Since I don't want to be a spammer, I need to allow a method for users to opt-in to receiving updates of their favorite scripts. I've added a column to our user table to store whether a user wants emailed.

add_column :users, :email_favorite_activity, :boolean

UI changes are made to the settings page allowing them to subscribe to alerts. Next I make sure emails include messaging about why they were sent and how to stop getting them.

A small job

Next I create a directory called jobs in the userscripts project directory. I add a trival ruby script emails all the fans that opted into email of the passed in script. This code runs within the rails environment allowing the use of ActiveRecord, ActionMailer and all their friends.

script_id = ARGV[0]
script = Script.find(script_id)
users = script.fans.select { |u| u.email_favorite_activity }
puts "Emailing #{users.count} fans"
users.each do |fan|
  Notification.deliver_new_script_version(script, fan)
end

The job can be ran manually using rails' built-in script/runner.

script/runner ./jobs/email_script_fans.rb 42

In development mode the emails won't be sent, but I can see I'm ready to integrate the task.

Why starling backgroundrb bj?

Starling is a queue system which speaks the memcache protocol. It was designed by Blaine Cook to allow Twitter to route with a massive of tweet. Starling requires a server daemon, and workers that are constantly asking for queued items. My email load is a fraction of a fraction of twitter's load, so the increased complexity isn't worth it.

BackgroundRB was created by Ezra Zygmuntowicz (of EngineYard). BackgroundRB requires a daemon as well, and if that daemon isn't running adding a task fails. After spending a few hours I could see the potential but the complexity was overkill for sending a few emails.

BackgroundJob (BJ) was a perfect fit. Jobs are stored in your database, so you don't have to worry about deploying and monitoring another daemon. I was initially concerned that tasks are not rails specific. Task are ran as regular processes, with the stdout/stderr being stored in columns after completion. To run rails code you use script/runner. Each job requires a new script/runner, so the overhead of loading rails for each task can become painful at volume.

BJ was received support from EngineYard/Ezra and the community has taken over BackgroundRB. There are other projects as well, but none of them seemed to:

put the jobs in the database
not require a daemon to be running
not make the workers more complicated than the tasks
really easy deploy

Installation

Start by install BackgroundJob as a plugin.

script/plugin install http://codeforpeople.rubyforge.org/svn/rails/plugins/bj
script/bj setup

Unfortunately BackgroundJob has a couple issues with the timezone improvements in rails 2.1. The fix is to change all instances of Time.now to Time.now.utc in two of the files.

vendor/plugins/bj/lib/bj/runner.rb
vendor/plugins/bj/lib/bj/table.rb

Then I trigger a job to be added when a new version of a script is uploaded.

class Version < ActiveRecord::Base
  after_create :email_fans

  def email_fans
    Bj.submit "./script/runner ./jobs/email_script_fans.rb #{self.script_id}"
  end
end

Server Setup

BackgroundJob upon receiving a new job will launch a worker if there isn't one running already, so after a cap deploy, emails will be sent.

Harder, Better, Faster, Stronger

Harder: You need to setup bounce detection. Sending an emails out without checking for bounces is a recipe for being blocked as your volume increases. If an email bounces twice in a month disable updates and ask them to update their email the next time they visit.

Better: Add the ability for users to select HTML or text based emails.

Faster: You can speed up the process by making the email body and subject is the same for all fans, then you should use BCC to send a single email to all recipients at once.

Stronger: Generate a daily email to yourself that tells you how many emails were sent. Have a cron entry generates this daily job.