Home Please Listen Carefully, as our options have changed

Here’s how search engine market share broke down in September 2010:

• Google: 66.1% of all searches
• Yahoo!: 16.7%
• Bing: 11.2%
• Ask: 3.7%
• AOL: 2.3%

In the same month, Rap Genius got 146k visits from search, 98.45% of which came from Google:

• Google: 98.45%
• Yahoo: .43%
• Search.com: .37%
• Bing: .34%
• Ask: .21%
• AOL: .19%

What’s going on here? Are Rap Genius visitors that much more likely to use Google? Is Google that much better for lyric searches? Does Google have the search game completely sewn up (despite what most people seem to think?)

Here is a common guide for how to orient your credit card before swiping:

But it’s ambiguous! Worse than ambiguous, actually – it screws me up nearly every time.

Meaning 1

Are you supposed to make your card resemble the instructions?

Meaning 2

Or – as I always think – is the image a guide for how to line up the underside of your card?

I always swipe like this

Am I the only person who consistently gets this wrong?

Instead of forcing users to click “Save draft” every few minutes, why not automatically save drafts every 30 seconds?

window.setTimeout(save_draft, 30 * 1000);

Unfortunately this approach unnecessarily saves the user’s work when he hasn’t changed anything in the last 30 seconds (who knows; he might leave his browser open over night)

To fix this, let’s save a draft only when something has changed:

window.setTimeout(function() {
  var current_value = $("#user_input").val();

  if ($("#user_input").data('old_value') != current_value) {
    save_draft();
    $input.data('old_value', current_value)
  }
}, 30 * 1000);

This still isn’t perfect – we’re still doing some work every 30 seconds (checking whether the user’s input changed).

Also, the user can enter a decent amount of text in 30 seconds; we want him to be confident that our draft saving mechanism will prevent all data loss.

If we wanted to be certain we wouldn’t lose data, we could save a draft after every key press:

$("#user_input").keyup(save_draft)

Of course saving 100 times every sentence is overkill. We really want to save whenever the user pauses typing for a few seconds — I.e.:

• Save 3 seconds after the last character the user types
• If the user types another character during the 3 second window, reset the timer

This technique is called “debouncing”:

Debouncing means to coalesce several temporally close signals into one signal.

For example, your computer keyboard does this. Every time you hit a key, the contacts actually bounce a few times, causing several signals to be sent to the circuitry. The circuitry determines that the bouncing has ended when no bounces are detected within a certain period.

Since people can’t really type faster than roughly 10 keys per second, any signals happening within 100ms of each other, for example, are likely part of the same key press.

Here’s how to implement this:

  var timeout;

  $("#user_input").keyup(function() {
    clearTimeout(timeout);
    timeout = setTimeout(save_draft, 3000)
  })

In any real application I suggest using Ben Alman’s doTimeout plugin, which abstracts this a bit:

  $("#user_input").keyup(function() {
    $.doTimeout('save-draft', 3000, save_draft);
  })