Hi, I'm Lokesh Dhakar.

I build web apps at Getaround in San Francisco SF.
I created Lightbox and Color Thief.

Lightbox2 Page Redesign

It’s hard to imagine that I released the Lightbox2 script almost 5 years ago! The script still gets a fair bit of use. I spent an evening giving the demo page a fresh coat of paint. Use the slider on the right to see the new design.

Changes behind the scenes

I didn’t add any new features to Lightbox but I did do some tinkering behind the scenes:

  • Now using jQuery. Previously Prototype and Scriptaculous.
  • Javascript written in Coffeescript.
  • CSS written with SASS & Compass.
  • Code available on Github

Color Thief

Ever wanted to grab the dominant color or color palette from an image? Probably not. But now you can! Take a look at the Color Thief Demo Page to see it in action.

Usecase #1: Color search

This script could be useful for sites that sort and search by color. But you should probably save your user’s computer some work and handle the color processing on the server. A couple of color search site examples:

Usecase #2: Color adapting UI

With this script you can build a UI that adapts to the colors of an image. For example, you could add color accents to the UI by changing the font or border color depending on what image is currently being displayed in your portfolio. To get a bit fancier you could darken the dominant color and use it as a background color or invert the dominant color and use it as the text color. Fancy indeed!

A recent example of a color adapting UI is seen on Google Chrome’s new home tab. The dominant color of the favicon is used as the bottom border color on the screenshot:

size screenshots of websites with favicons on top and bottom borders colored with the favicon dominant color

Usage

Include jquery, quantize.js, and color-thief.js on your page. Using the script is as simple as this:

myImage = $('#myImage');
dominantColor = getDominantColor(myImage);
paletteArray = createPalette(myImage, 10); // 2nd argument sets # of colors in palette

Grab the code and read more on usage on Github. Dig through the code as well.

Next steps

In the short term I’m not planning on doing any more work on the script. But if you’d like to make improvements or just clean up the code, please go for it!

Demo Page | Github

MobileMe Particles

The soon to be retired, MobileMe service from Apple, has a beautiful login page with wispy particles floating about. There is a lot to love on this page and an unbelievable attention to detail.

Inspired by the login page and a wanting to tinker with canvas and particles I set out to recreate the wispy particle effect. You can see the progress I made at the following page: mobileme-particles

I’m happy with how it turned out but there are a few things that could be improved. For one, the movement in the original is less rigid with more twists and turns. Is a flocking algorithm being used? Also, the mouse interaction with the particles in the original is livelier and has a nice bounce back effect when the mouse moves away from the particles.

If you’d like to look at or use the code you can grab it on GitHub.

Learning about particle systems

There are quite a few places on the web to learn about simple particle systems. If you want to go a little further and add forces, I found the following two posts useful:

Design Observations in the Wild

Close of up fuel gauges in cars showing small gas pump icon with arrow

Gas Tank Direction Icon

I recently learned that the gas pump icon near your car’s fuel gauge has an arrow indicating which side the gas tank is on.

aisle sign at Target that reads "I Want Candy"

Target - “I Want Candy” Aisle Label

I’m not sure if this is meant to tap our unconscious or to provide a script to small kids on exactly what to say to pester their parents.

Krups coffee maker menu showing yes and no options, unclear what is selected

Krups - Coffee Machine UI

Which menu option is currently selected, ‘Yes’ or ‘No’? I’m not sure either. I sometimes get the same feeling when an OSX dialog pops up.

Close-up of Irving gas pump showing buttons for different grades of gas

Irving Gas Station - Bottle Ratings

Notice the use of one, two, and three bottles over the fuel grades. They are subtly implying that ‘clean supreme’ is three times as good as ‘clean regular’. Three times is more impressive than the 7% better octane rating ‘clean supreme’ has over ‘clean regular’.

The Economist - Misleading Graph

I found this bar chart in an old issue of The Economist. A quick scan of this graph would give you an impression that foreclosures are skyrocketing. Look at the date ranges on the x-axis to see the absurdity.

Ira Glass on Storytelling

Concise and well articulated pointers on storytelling from the host of This American Life.

These videos are a couple years old but worth rewatching. Ira discusses the building blocks of storytelling with broadcast in mind (tv and video), but most of what he talks about isn’t tied to any medium. I’ve included some notes I jotted down below each video.

Archives