Ben’s Techy Musings

This is one of those things onto which I’ve been really slow to catch, but which seems to have eluded many other developers so far, so I don’t see sharing it being a waste of time. I eventually decided to look into it this evening and found it’s just as simple to implement as I’d hoped.

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>

It’s not as if there aren’t already several URL-shortening services, but nonetheless I decided not long ago to start making this and now I’ve got a working version (of sorts) running on the web.

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’ve found an even better way of doing this. See HTML/CSS: Buttons are more styleable than inputs.

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;
}

NB: This post is not about the Prototype framework.

AJAX has caused something of a renaissance for JavaScript over the past couple of years, so I’m still learning (and relearning) a lot of things about it despite having started using it seven years ago. One thing I revisited today was adding a method to an existing JavaScript object as an elegant alternative to defining a procedural-style function.

JavaScript is object-oriented, which makes it elegant and powerful when manipulating the DOM, because objects in an OO language belong to one another just like elements of an HTML page belong to one another, i.e. in a hierarchical model.

JavaScript’s OO capabilities are, however, limited compared to other languages. You can’t take one object and use it as a basis for new one using extends.

You can, however, add your own home-made methods and properties to existing objects, including pre-made ones (such as String and Array). For example, you could add a function to the Array object to help you find out if an array contains a certain value.

Array.prototype.contains = function(value) {
 for (var i=0; i<this.length; i++) {
  if (this[i] == value) {
   return true;
  }
 }
 return false;
}

Now, any Array which you create has the contains function. It’s more elegant than writing a procedural function, e.g. contains(array, value), which is what I’ve become used to as a result of using the many useful inbuilt procedural functions in PHP.