I’m talking about allowing browsers to ‘discover’ the search functionality on a site so that users can add it in a couple of clicks to the list of search engines available in the browser’s built-in search box (to the right of the address bar in Firefox, Internet Explorer 7+, etc).

This can be achieved by describing your search engine with an XML file called an OpenSearch description document and providing browsers with a link to that XML in the head of your HTML:

<link rel="search" type="application/opensearchdescription+xml"
    href="/search.xml" title="Example.com Search" />

The specification is described in meticulous detail on the OpenSearch site but the examples of the XML description documents are breezily self-explanatory.

Just be aware that if, like me, you can’t be bothered to return results in RSS or Atom and would rather use your site’s existing old-school get query URLs, you probably want to use the following sort of Url element (instead of the fancy-pants RSS one in the “simple” example):

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Example.com Search</ShortName>
    <Url type="text/html" method="get"
        template="http://www.example.com/search?q={searchTerms}" />
    <!-- ...snip... -->
</OpenSearchDescription>

Shorten long URLs with attoURL.

I suppose the challenge that I want to relish is to add something unique to my variation on this simple concept in order that my variation will have a reason for existing. I’m still thinking about what that unique element might be.

I also have a fetish for the simple object ruthlessly made perfect for a single purpose. My new Sigg bottle is precision-engineered to carry liquid. That’s all it does. It doesn’t attempt to thermally isolate it. It doesn’t leak and it doesn’t impart any taste. (I bought the bottle for carrying water with me while commuting on the hot, cramped tube, in the hope that it might eventually save me money on buying expensive bottled water. Efficiency: another geek goal.)

Sigg bottles are available with some fairly fashionable designs, but mine is black. Why black, when I could choose from a myriad colours and patterns? It’s not that I don’t appreciate beautiful things. (If my girlfriend is reading this, you alone are proof of that!)

What started as me wondering about this turned into a revelation about what means to be a geek. As a geek I see beauty in function as well as form—and there is more beauty in the unadulterated functionality of the Sigg bottle than there could be in its exterior form.

MySpace. Home to some of the greatest user-created eyesores on the Internet. Inflictor of immeasurable pain upon web developers employed to shoehorn hacked and mangled code into custom profile layouts—creations of which Dr Frankenstein would be proud. Plagued by reliability problems and exploited by dangerous user-created scripts.

That’s my view of the social network, at least.

On MySpace’s developer site, the long preamble to OpenSocial on the MySpace Developer Platform is a gem of autobiographical prose which presents an entirely different (and patronisingly worded) perspective on MySpace’s code pedigree. A view from the inside, perhaps, where everything we thought MySpace were doing wrong was actually what they were doing right; where the apparently well-deserved repercussions of their shoddy code and lax security were no less than unwarranted assaults on their pioneering social “utopia”.

And a view where MySpace’s inevitable catching-up to Facebook’s well-executed application platform is varnished over with a smug account of how MySpace got there first:

MySpace has a very interesting history with applications written by users. You, gentle reader, may very well have participated in that history.

…

Through a little known technology known as “cut and paste”, users could “install” applications they liked on their own profiles.

There may be more to come here about MySpace’s application platform as I try to develop for it in the near future. If this introduction was supposed to repair relations with developers for whom MySpace has long been a source of mirth, however, it’s had the opposite effect on me.

Over the bank holiday weekend just passed, I took my girlfriend to stay in Liverpool at my parents’ place. We visited the Formby coast where in the “attractive pine woods” there are “playful red squirrels, often brave enough to scamper up close”. Red squirrels are a rare sight in Britain where they suffer from competition from the grey squirrel.

Can you spot the red squirrels?

Neither could we.

What I wrote is anything but groundbreaking and is widely used. And I’ve just found an even better way to do it, by using a button element instead of an input.

What prompted me to look for something better was noticing that Camino, the native OS X Gecko browser, lacks the depth of CSS support for input elements that the more popular browsers, namely Firefox, IE and Safari, have. This means that the many sites which use the technique I described in that post can be unusable in Camino, as form submit buttons appear grey and empty.

But apparently (and I did not realise this until today), using <button type="submit">Submit</button> is a valid and functional replacement for a form input element. And a button is more flexible, allowing you to put an image inside it instead of text, for example. Best of all, though, a button accepts styles more readily in most browsers.

I fixed my form submit button in Camino by changing it to a button and applying exactly the same styles that I had applied to my input. Rather than link you to the post again, here’s the code with the “input” prefix to the class name, just to help you avoid making the same mistake I made.

.customSubmit {
 width : 76px;
 height : 36px;
 overflow : hidden;
 padding : 36px 0 0 0;
 background : url('/images/custom_submit.png') no-repeat;
 border : 0;
}

And the button code, for good measure:

<button type="submit" class="customSubmit">Submit</button>

Again, this probably isn’t groundbreaking stuff but many sites could do with using this alternative to increase their browser support.

It shows promise of breaking the monopoly that various social tools hold over certain types of social content. It will also help to mitigate one of the causes of these monopolies—the network effect; the runaway success of a particular service once its user base reaches a certain fraction of its market.

We already have services and tools which ease our simultaneous use of the many discrete social tools by helping us to post the same stuff to more than one place. A very simple example is the Twitter Facebook application, which solves the problem of many people using Twitter and their Facebook status for the same purpose by automatically updating their Facebook statuses whenever they tweet.

Most of these existing tools, as far as I’ve seen, require us to feed our data into the helper tool first in order that it can distribute it for us, or that the helper tool (e.g. the Twitter Facebook app) be controlled by the service from which we want to set free content (in that example, Twitter). If I understand it correctly, the paradigm shift in SwitchABit is that the helper tool becomes a transparent intermediate layer, distributing our social content without us needing to know how, or from where, it works.

I recently started using Dave Winer’s TwitterGram: Flickr-to-Twitter service, which has just been ported to become one of the first applications on the beta SwitchABit platform. Flickr-to-Twitter scans my Flickr photostream for me and finds photos which I’ve tagged with a ‘twitterthis’ tag. It creates a tweet-friendly TinyURL for the full Flickr URL of a photo, then tweets the photo’s title and the URL from my Twitter account. Simple steps, but ones which are tedious to perform myself at best, and downright awkward if I’m using a mobile device. Now I can email a freshly snapped photo from my iPhone to Flickr and see it tweeted to my friends very shortly afterwards.

I can’t wait to see more transparent helper tools like this come together to form a pervasive medium for the diffusion all sorts of social content.

So in lieu I now declare today “RSS Awareness Day” Awareness Day, because I’m very aware that yesterday was RSS Awareness Day.

During yesterday’s frenzied session I was reminded poignantly that not all of the data in an RSS feed is as reliably parseable as the XML itself. In this case, I was extracting tags from a comma-separated list and putting them into a database.

In my infinite wisdom I put an index on the table which forbade duplicate tags within an item. While parsing 50 items in a test feed nothing went awry but, of course, the very first item on the client’s real feed contained sloppy repetition of tags, exposing my lack of foresight with a nasty SQL duplicate key error.

I live and I learn.

Most of the sites I develop involve a form of some sort, and usually the designers style the forms with custom buttons.

A simple way to deal with this is to use <input type="image" ... /> which gives the desired appearance and functionality with no fuss.

This is fine for method="post" forms where the information sent to the server isn’t visible to the user. When using a method="get" form, though, there’s an unsightly side effect of using the image input type. The URL will turn into something like this:

http://www.example.com/form.php?foo=bar&x=36&y=18

The X and Y coordinates of where the user clicked on the image are being added to the querystring. Presumably this information was once useful back in the days when people did arcane things like server-side image maps.

I neither need nor want this information and it could even confuse the user. So I go back to my input element, change it back to a type="submit" and get to work on manipulating its appearance with CSS.

First, I take off the border, add a background-image, set the width and height and make the text invisible using color : transparent. This works fine in all of the browsers I want to support except Internet Explorer (6 and 7), which ignores the transparent colour value and displays text on the button in black.

I can still hide this text, though, by adding overflow : hidden and then making padding-top equal to the height of my button. Now it works, in Safari, Firefox and IE!

The full code:

input.customSubmit {
 width : 76px;
 height : 36px;
 overflow : hidden;
 padding : 36px 0 0 0;
 background : url('/images/custom_submit.png') no-repeat;
 border : 0;
}

The video streams are live now and I can see an empty thawing bath, a dissection table and some people walking around. I hope to catch them getting started tomorrow.

It would be great to see more engaging stuff like this from other museums and universities over the world. Science and nature encompass us; they’re not just things to be respectfully studied within the walls of a museum. In particular, the great but fairly static institutions in London would do a lot of good for themselves if they could offer something as fascinating as this.