Quoted-Printable

I’m lucky enough to work at Canada’s bestest Ruby on Rails consulting boutique, Unspace Interactive. One of the great things about getting to work at Unspace is that I’m constantly exposed to new and innovative ideas from some of the smartest, most creative people I know. Among those innovators is Pete Forde.

Pete recently published an article in which he describes an interesting user interface technique: endless scrolling. You can read it on the Unspace site: Endless, Pageless

As a long-time web developer, I know the term ‘pagination’ all too well. When I have a set of search results, a set of articles, or a series of comments that exceed more than, say, ten items, I paginate them. This usually involves the ubiquitous ‘Next’ and ‘Previous’ links, either at the top, or bottom of the resultset. Of course, this invariably raises the question of how many results to display on a single page, whether or not to hide the pagination area if there are no results, and whether or not to hide the ‘next’ link on the last page and the ‘previous’ link on the first page.

Not only is pagination a pain from a development perspective, Pete argues that it’s a pain from a user experience standpoint as well. I wholeheartedly agree. When I’m scrolling through a list of articles on a person’s blog, or photos in a Flickr photostream, I hate having to click for the next page. If I’m still scrolling, it means I want to see more. I want more results. I want more articles. I want more photos. In fact, I often leave the page once I’ve viewed the first page. Particularly when reading blogs. I wonder how many more articles I would read on someone’s blog if I could just keep scrolling, if the information just kept flowing?

This is clearly an idea that’s catching on. I’ve recently become a huge fan of the new Google Reader which employs this technique to great success. I can simply scroll through my list of articles without ever having to use the mouse. And as I approach the ‘bottom’ of the page, more articles are appended to the list automatically. (Incidentally, if you’ve not tried Google Reader recently, try it again; they’ve updated it and improved it significantly.) I can see this technique eventually making its way into Gmail, making the ‘number of messages to display on each page’ preference obsolete. I’m told that Yahoo! Mail is doing this now, though I have yet to see it for myself.

The topic of opening new windows seems to come up pretty often, so I’ll attempt to provide a clear answer for everyone.

Frustrated designer writes:

I need to open up a new window and customize it’s appearance (i.e. remove the status bar). Ordinarily, this would be achieved with the help of JavaScript and Window.Open()—so much for cross-browser compatibility. Then there’s the old target=”_blank” anchor attribute, but this is disallowed by the DTD I’m using (XHTML1.1), that… plus it doesn’t offer a way to get rid of browser UI elements. What’s a jerk to do?

The short answer

Use the window.open() method defined as follows: window.open( URL, name [ , features [, replace ] ] ) making sure you create a valid anchor element with a valid href attribute. Instead of specifying the URL argument manually, use the DOM to read your href attribute like: this.href.

It should look like: onclick="window.open(this.href, '_blank'); return false;"

The long answer

Stick to what you know: create a standard anchor element with an href to your URL. Next, change this link so that it makes use of the onclick handler to call jabbascript’s window.open() method with a few arguments. We also need to make sure this onclick returns false to instruct the browser not to handle the link on its own.

Accessiblity gurus, please note that this is perfectly accessible despite the use of jabbascript. Even with jabbascript turned off in the client, any self-respecting browser will just handle the hyperlink as usual (because we have a ‘normal’ anchor element, right?).

If jabbascript is turned on (and come on, why should it ever be turned off?) it will respond to the onclick event and all will be right with the world.

You knew an example was coming, didn’t you?

onclick="window.open(this.href, '_blank'); return false;"

The explanation:

The first argument, this.href is key: By using this.href, we are accessing the value of the current element’s href attribute using the DOM. This means we don’t need to supply window.open() with the url manually—we stay DRY by using the href attribute in our link.

The second argument (the ‘name’ of the new window to be created) is given the special name (“_blank“) which serves to inform window.open() that it’s mission is to launch a new window (duh). Think of it like using <a target="_blank"> in older versions of html. Now stop thinking about it entirely.

Note again the return false follow-up to our call to window.open(). This is important as it prevents the browser from handling the link itself—If the onclick handler doesn’t return false, the browser will handle the click normally, and both windows will wind up at the url specified by the href attribute.

Controlling attributes

For those interested in controlling the attributes of the new window, there is an optional third argument that window.open() accepts—a string of properties for the new window.

Here’s an example of a call to window.open with the properties argument:

onclick="window.open(this.href,'_blank','width=500,height=500, menubar=no'); return false;"

It’s probably worth noting that, as per the xhtml spec, you need all your attributes to be lowercase (including attributes that pertain to event handlers). So, while onClick may work in most browsers, you’ll need to use onclick if you want xhtml compliance.

The end

While I generally try to avoid creating new windows for reasons I don’t care to get into, I do on occasion use this method as a straight-up replacement for target="_blank" when appropriate.

My dog’s breath smells like cat food.

I’ve been digging javascript a lot lately. Yeah, it’s always been around, lurking in the shadows of web development, but I’d never learned more than I needed to get by—open a new window here, select a group of checkboxes there, etc.

Inspired by the javascript remoting (AJAX) usage in Gmail, flickr, and all the apps resulting from the not so silent Ruby on Rails revolution, I’ve been mucking around with the old jabbascript more than ever.

I’ve also been reading a lot of other people’s work and making silly bookmarklets and things in my spare time for no good reason. If you don’t know what a bookmarklet is, then I’m not going to explain it. Move along.

New Instiki Page

Even though Backpack is quickly replacing Instiki for me, I still use Instiki a lot. This bookmarklet makes it easier to create a new Instiki page by using your selection as the title of the new page or prompting for one if there is no selection. Think of it like having a Backpack-style ‘Make a new page’ button for Instiki!

Tip: this bookmarklet assumes your Instiki wiki is running at http://localhost:2500/wiki/ if yours is not you’ll have to edit it (the bookmarklet, that is).

javascript:q = %22%22 + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text); if (!q) q = prompt(%22[Instiki] You didn't select any text. Enter a page name:%22, %22%22); if (q!=null) location=%22http://localhost:2500/wiki/new/%22 + escape(q).replace(/ /g, %22+%22); void 0

Google Maps Search

Takes the current selection as a street address (i.e. 19 Strathcona) and then prompts for a city and state/prov (i.e. Fonthill, ON). If you don’t make a street selection, you’ll get prompted for one. I made this when my wife and I were searching for houses this spring and I wanted a quick way to look up addresses that I’d selected from the various real estate sites were were visiting.

Tip: you should customize this so it includes the city/state you’re likely to use most often to save yourself some typing.

javascript:q = %22%22 + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text); if (!q) q = prompt(%22[Google] Enter a street address:%22, %22%22); c = prompt(%22Enter an city, state/province:%22, %22Anywhere, AZ%22); if (q!=null) window.open(%22http://maps.google.com/maps?q=%22 + escape(q) + %22, %22 + escape(c)); void 0

Whois Lookup from dnsstuff.com

Sometimes it’s handy to get whois information for the domain in your browser’s address bar. This bookmarklet will do just that, courtesy of http://dnsstuff.com.

javascript:location.href=%22http://dnsstuff.com/tools/whois.ch?ip=%22 + location.host + %22%22;