Archive for the ‘Search’ Category

Bookmarklet to search current site using Google

Monday, April 10th, 2006

(This has been done before, but I’m putting my own spin on it.)

I often use Google to search a particular website, using “site:example.com” and my search terms. It gets a bit tedious entering “site:example.com”, so I made the following bookmarklet:

It prompts for the search terms, automatically adds the “site:” keyword and domain name, then goes to Google. You can select some text on the page before you click the bookmarklet, and your selected text will be used as the default search keywords.

For Firefox just drag-and-drop the link to your bookmarks toolbar. For IE, right-click the link then select “Add to Favorites…” (you might get a warning message since the bookmark contains javascript) then add it to your Links toolbar.

Inspired by: Search Bookmarklets

Screencast: Judge a Web App By Its Title

Thursday, April 6th, 2006
You're Killing Me Here!

The second episode of “You’re Killing Me Here!” (usability and design screencast series) discusses various uses of the page title (HTML TITLE element): in particular how you can use it to communicate with users of your web application.

View the Screencast (2.5 minutes)

You’re Killing Me Here! Web Usability Screencast

Friday, March 24th, 2006
You're Killing Me Here!

Introducing “You’re Killing Me Here!” a series of screencasts discussing web site and web application design, accessibility, and usability from the perspective of a power-user.

The first episode discusses “type ahead find” in the Firefox browser and the design implications that come along with it.

View the Screencast

Eliminating redisplay flashes in JavaScript

Thursday, March 9th, 2006

The Holy Grail in creating dynamic HTML is to have a page that works perfectly even when JavaScript is disabled. You want your page to be beautiful and dynamic, but you also want it to be accessible, search-engine optimized, and printable.

To make this happen you start with plain, semantic HTML, then you add a JavaScript layer to rework the page into something better:

JavaScript vs. No JavaScript

One problem with this technique is that your JavaScript must run after the HTML has been set up and rendered on the page, so a user with a slow connection might see something like this using my JavaScript tabbifier:

Animated simulation of HTML rendered then re-rendering using JavaScript

This is not too pretty, so obviously we want to make it stop.

Your first thought might be “I’ll just add a style to the content to make it hidden (CSS display:none), then my JavaScript will run and reveal it!” But that puts a big crack in our Holy Grail, because if you use CSS to hide the content, it will not be visible to users who do not have JavaScript.

Here’s the method I used:

  1. Add a class javascript-hide-me to the content you need to hide, but do not define that class in your CSS.
  2. Before the content, use JavaScript to define the CSS class. The easiest way to do this is by using document.write in the head section of the page, but you will have to directly modify the DOM if you are serving XHTML pages that use MIME type application/xhtml+xml.
  3. After the content has been transformed, use JavaScript to remove the CSS class and reveal the content.

Here are two examples, one that exhibits the flashing problem, and another that fixes it using the technique described above. Note that in order to see the flashing problem, you need a slow internet connection: I recommend throttling your connection using the excellent Charles Web Debugging Proxy.

Updates 2006-03-09

Welcome, Ajaxians!

Bobby describes an alternate technique in case you are serving XHTML pages that use MIME type application/xhtml+xml.

Steve Clay makes a valid point that we should check for DOM compatibility before writing the styles on the page.