Archive for the 'javascript' Category

Optimizing Autocomplete by Utilizing Browser Cache

Monday, March 29th, 2010

Say you have a snazzy AJAXified autocomplete field that gives instantaneous feedback to the user as she types — perhaps a username field on a signup form or something akin to Google Suggest. Except, it’s not performing as well as you thought it should. That round trip to the server for each character is taking too long.

The first thing you should do is to see if HTTP Keep-Alive is supported by your server.

Second, and this may seem obvious, but I’ve seen too many developers forget to leave a hint to the browser to cache the results. As a result, the page becomes sluggish due to a feature that’s meant to be responsive.

See what happens behind the scene when you sign up for a new Twitter account. Suppose you try to register the username “wil”, but it’s taken. For each character you type, the browser makes HTTP requests to check that the username in the input field to see if it’s available.

So that’s one for “w”, “wi”, “wil”. Then you find that all 3 are taken. Ok, perhaps time to add a numeric suffix? “wil1″ – nope, delete the “1”, and we’re back to “wil” again. Guess what? Another HTTP request is sent to Twitter for the same string “wil”!

Had Twitter set an “Expires” header to usernames that are taken, the browser wouldn’t have had to make that round trip!

Below are the headers sent by Twitter for the URI (courtesy of Hurl):

In the case of signup forms, usernames are rather involatile pieces of data, so it’s a prime optimization target. As your namespace becomes more scarce, you’ll tend to have people trying more strange combinations, increasing the number of requests to your servers.

In my case, I’ve applied it to our TLD management platform. Domain names that are registered gets a 10 minute cache timeout value (which is heaps short but good enough to ensure a snappy UI operations). However, with domain names, it’s a lot more volatile but we’re not guaranteeing success at the point of registering a name so anywhere between 1-5 minutes is usually sufficient.

A simple view snippet in Django does the trick and goes a long way to making your users happy.

/ Blogging from a HSDPA connection

GearSaver Bookmarklet

Sunday, July 29th, 2007

Google Gears is one of the most exciting technologies to be released IMO. It will push the web 2.0 envelope further and bring interactive web applications to the next level — offline! Well, not just offline, the whole point is that you can design your application synchronization strategy.

I’ve been experimenting with it a bit and it’s surprisingly (Javascript) developer friendly. The end product is a bookmarklet I call GearSaver. It’s really a shell that injects the gearsaver.js script hosted on my server into the current page that you’re viewing. It saves all your textareas (be it a blog post or wiki page that you’re editing, any multi-line text box in a form) into Gears.

This is pre-pre-pre alpha and is only a proof-of-concept, I haven’t tested it in IE and there isn’t a way to view the saved results yet. You can, however, use the DB query tool included in the gears samples and select the textarea table in the gearsaver database.

This is personally very useful to me because many a time I’ve lost valuable work in a textarea upon submitting a page and the network goes down. What this does is that it saves a version of each textarea found on the page, indexed by the URL and its xpath. It is also timestamped. My next enhancement would be to have a pull-down menu on each textarea to allow you to revert to older versions.

Without further ado:

Add the following bookmark and use it on any page: Launch GearSaver

Updated 20080812: bookmarklet to use version 0.4.