Emurse, Life, Mahalo, Netscape

New Job

Three years ago, I blogged about a new resume-hosting site called Emurse.com that got me an interview (and a job) at AOL-owned Netscape. Well, things have a funny way of working out, and after leaving AOL to work with an incredible development team at Mahalo, I’ve left Mahalo to lead development of now AOL-owned Emurse.

It’s great to be working with Andy Fraley again, who designed the look and feel of the Netscape Navigator 9 browser, and is now in the designer’s seat at Emurse. We’ve got some exciting new features planned for the next generation of online resumes, all of which will, of course, be documented here.

Facebook, iPhone, Mahalo, Programming

Want to make some money?

Can you write Facebook or iPhone Apps? Do you like money? If so, have I got a deal for you:

We’re looking for some help building out our iPhone and Facebook applications for Mahalo Answers. If you know of any great developers who have done a really solid application for either platform (or who are looking to make a name for themselves doing one), please have them email me at jason@mahalo.com and cc mark@mahalo.com. — Jason Calacanis, CEO Mahalo.com

Tell them Finke sent you; readers of this blog are known ’round the world to be persons of solid character and intellectual fortitude, so you should definitely identify yourself as such.

Mahalo, Super Bowl

Everything You Know Is Wrong

I was walking to the kitchen for some Golden Grahams when I accidentally stepped into an alternate dimension, and soon I was abducted by some aliens from space who kinda looked like Jamie Farr. They sucked out my internal organs and they took some Polaroids and said I was a darn good sport, and as a way of saying thank you, they offered to transport me out to any point in history that I would care to go. *

And so I had them send me forward to Monday morning, so that I could bring you back this authoritative list of commercials that will be airing during Sunday’s Super Bowl.

* Just kidding, I didn’t time-travel. I just visited Mahalo!


The easiest way to find election results

Mahalo is by far the easiest way to find election results this year. The homepage has a big fat presidential election tracker on the top that can be read from across the room:

And the Guides have built a comprehensive (and I mean comprehensive) list of state election results pages:

Hey, I told you it was comprehensive.

Hawaii, Life, Mahalo

Mahalo huge in Hawaii

My wife and I spent a week on the big island of Hawaii last month, and I have to say that I was floored by how popular Mahalo is out there! As soon as we landed in Hawaii (and even on the flight from Newark), I couldn’t go more than a few minutes without overhearing someone talking about Mahalo.

Everywhere we turned, it was “Mahalo this,” “Mahalo that.” For some reason, Hawaiians just love human-powered search! (Frustratingly, I would only hear people say “Mahalo” right before the conversations ended, so I never heard exactly what they thought about the site. Nevertheless, they were usually smiling when they said it, so I took that as a good sign.)

And talk about free advertising! “Mahalo” was plastered all over the place – on welcome signs, trash cans, in bathrooms, and even on souvenir placards in gift shops:

I’m not sure why they didn’t use our actual logo (probably copyright concerns), but we should really do a case study on what propelled our site to such ubiquity in the Aloha State.

Mahalo, Programming

Sprites and the new Mahalo homepage

On Friday, we at Mahalo launched a revamped homepage and site-wide redesign, the result of months of technical and editorial development. I’d like to talk specifically about one new technical aspect of the homepage.

The old Mahalo homepage had, at any given moment, between 8 and 10 content images. (By “content images,” I’m referring to images that are not design elements, like backgrounds or logos.)

Screenshot of old Mahalo homepage

The new Mahalo homepage, which packs much more data into the same space, has at any given moment, between 75 and 80 content images. (This isn’t obvious from a screenshot due to the number of tabbed sections; for example, in the top left section, each of the five tabs contains 10 items, each of which usually contains an image.)

Screenshot of the new Mahalo homepage

Displaying each of these images requires a separate request to the server, and according to some, each request can add about 0.2 seconds to the load time of the entire page; for 80 images, that’s 16 seconds of extra load time – unacceptable. Mahalo’s architecture is faster than the average site’s, but the general principle still holds true: more requests means longer load time and more stress on the servers.

To solve this problem, I was given the following tasks:

  1. Reduce the number of requests made for images when a user views the Mahalo homepage.
  2. Do so without affecting the productivity of the Guides, who upload the images and write the content for the homepage.

The solution for #1 is fairly obvious and is in widespread usage: CSS sprites. Using sprites means that all of the images for a given page are combined into a single image file, and then the browser displays sections of the master image in different parts of the page using CSS. If you dig around in the source of Mahalo’s index.html, you’ll see a reference to an image like this:

Several images stitched together into one image file

This image combines all of the separate images from the homepage into one, allowing the browser to download them all with a single request. Additionally, the total byte size of this single image is typically the same or smaller than the combined byte sizes of the images it contains, so it’s a win-win situation.

By setting the background-image CSS property of the images to this master image, we can then display only a section of the image by using CSS declarations like these:

#i-1 { background-position: -0px -230px; width: 149px; height: 115px; }
#i-2 { background-position: -0px -345px; width: 149px; height: 115px; }
#i-3 { background-position: -0px -460px; width: 149px; height: 115px; }

So problem #1: solved. Now, how to achieve this effect automatically, without affecting Guide productivity? Why, Python, of course!

Using a little Python and a touch of magic, we can retrieve the HTML for a given page, enumerate the images, retrieve the images, combine them into a single image, modify the HTML to strip references to the original images, generate the CSS necessary to implement sprites for the images, and save the HTML back out to the server. This allows our Guides to modify the homepage however they like, view their changes on a server that doesn’t use the sprites, and then sit back and enjoy as their changes are automatically published to the Mahalo production servers.

I don’t know of any other site of scale that is generating dynamic sprites, but the system we’ve set up has so far worked flawlessly. However, if you’re going to implement a similar system, there are a few caveats to keep in mind:

1. You need to be smart about how you stitch together your master image. Some poor planning (or none at all) can lead to a massive single image with tons of empty space, which will simply bloat the file size. Efficient use of space is key here.

2. By using sprites, any time a single image on the page changes, the user must re-download all of the other images, since they’re all contained in the same master image. Avoiding this problem might mean waiting for a certain number of images on the page to change before generating new sprites and HTML, or it might mean generating two or three master images for different sections of the page, so that master images for each section of the page can change independently of each other.

Have any of you ever implemented a similar system? What do you think of our implementation?

Life, Mahalo, Mozilla Firefox

Does Mahalo crash your Firefox?

We at Mahalo have had quite a few reports of Firefox 3 crashing when visiting Mahalo.com. (Here’s a video of it happening.) We’d love to get this fixed, but we are unable to duplicate the problem on our own machines.

If this happens to you, here is some information that you could send us to help us out:

  1. Your Operating System and Firefox versions. Example: Mac OSX 10.4.11, Firefox 3.0RC1.
  2. Whether you’re logged into Mahalo when it happens.
  3. prefs.js. This file is found in your Firefox profile directory, and it contains any changes you’ve made to Firefox’s default settings. It doesn’t contain any especially private or personally identifiable information. (Where is my Firefox profile directory?)
  4. If you can get Mahalo to crash Firefox in a clean profile (one without any personal information like passwords or an extensive browsing history), then sending us a ZIP of your entire profile directory would be extremely helpful. If the crashing happens in your regular, every-day browsing profile, please don’t send this to us if there’s any chance that it includes information that you don’t want anyone else to know, like usernames, passwords, or browsing history.

So if you’d like to help us fix this problem, send as much of this information as you can to finke@mahalo.com. Just remember: We’re all in this together. We don’t want Firefox to crash any more than you do.