In the film Being John Malkovich, John Cusack plays a puppeteer who finds a portal to inside John Malkovich's head. Eventually John Malkovich himself goes through this portal, and the ensuing paradox means that every word he hears is "Malkovich", and every face he sees is his own.

Re-watching this film lately gave me an idea for the latest trivial entry in my ongoing bookmarklets collection, where every image on a website is changed to show the same one. So read below the jump to find out how to Malkovich a website - or customise the effect to use an image of your choosing!

How it works

Being a very simple and silly bookmarklet, the idea behind it is pretty simple:
- loop through each image on a website
- change the image on the site to a new image (John Malkovich, in this case)
- ensure the new image has the same height and width of the previous image, to keep the page layout the same

Step 1: Pick an image

Step 2: Loop through each image on the page

Step 3: Get the height and width of the existing image
We need to get the current height and width of the current image on the page. We do this as if the image dimensions haven't been explicitly specified in the target's site html and differ from our "Malkovich" image, the target site's layout can get quite borked.

Step 4: Enter Malkovich

Step 5: Wrap it all up in a bookmarklet
A void(0) is required at the end of the bookmarklet to stop the browser from trying to open a new page.

You can also drag the Malkovich Malkovich Malkovich bookmarklet to your browser's bookmarks bar, click it on any website, and behold the Malkovication of that site.

Make your own

The novelty of seeing John Malkovich all over the place is nice, but it would be better if you could customise the effect a little more.

Enter the address of any image you wish in the box above. Then drag your very own custom Malkovich bookmarklet to your bookmarks bar, and you're done! The bookmarklet updates in real time as you type in the box above.

A Daft idea

But why...

- Why not just use jQuery?
JQuery isn't loaded on all websites by default. Loading jQuery is possible in a bookmarklet, but adds far more overhead than using the more-verbose JS above.

- Why didn't all images on the site I tried change?
This bookmarklet works only on images loaded in an img tag. If an image is a background image on a div, then the bookmarklet won't catch it.

- Wait, a bookmarklet? What is that?
A bookmarklet is a small chunk of javascript that allows us to extend the functionality of a given page. See this explanation for a bit more detail.

- This is ridiculous. What's the point?
There is absolutely no point or useful function to this whatsoever. Any potential amusement you may derive from using it is linked directly to your imagination when selecting an image and website.

And that's it. If you've any thoughts on improving the implementation above, or have an hilarious screenshot resulting from use of the bookmarklet, let me know in the comments below!

Enabling Imgur preview in Twitter

Update 08/12/2010 - There's now a Firefox Extension in the Add-Ons sandbox available for adding this media preview to Twitter, as well as previews for Daft.ie and Adverts.ie ads.

With their recent site redesign, Twitter added a number of interesting new features. One of the more useful of these is the media preview. From the Twitter blog:

Media. Now, it’s easy to see embedded photos and videos directly on Twitter, thanks to partnerships with DailyBooth, deviantART, Etsy, Flickr, Justin.TV, Kickstarter, Kiva, Photozou, Plixi, Twitgoo, TwitPic, TwitVid, USTREAM, Vimeo, yfrog, and YouTube.

This is definitely one of the more useful features of the new Twitter web interface, and covers most of the more mainstream media sources that I'd notice showing up in my timeline. That said, there are some notable omissions..

Imgur.com

Anyone who has spent any time on reddit will be familiar with the image hosting service imgur.com. Run by redditor MrGrim, a quick browse through any of the more popular sub-reddits show how ubiquituous it has become for media sharing on reddit. It would be very handy if tweets mentioning imgur had the same preview functionality as those mentioning twitpic, yfrog, etc. I've recently been digging through the new Twitter javascript whilst working on a Declutter followup, so decided to take a break from that and see how hard it would be to bolt on imgur previewing to the web interface.

Luckily, it turned out to be very straight-forward indeed, and can be done with one simple bookmarklet!

If you're not interested in the technical nuts and bolts behind it, you can skip ahead to get the bookmarklet now. Otherwise, read on for a bit more technical explanation on the ins and outs of adding a custom media type to Twitter.

Ur Img, My Img, Everybody's Img..

The recent rewrite of Twitter.com pushed a huge additional amount of their logic in to javascript on the client side. My thinking was that the imgur preview functionality should work the same as the twitpic previewing. Taking a look through the main application logic for twitpic, we can see the declaration of

Below is how we clone the twitpic media type, then tweak for imgur:

The two key bits of code above are "matchers" and "render". Matchers specifies a regex which Twitter uses to detect whether there are any imgur links within a given tweet. The pattern of imgur urls are generally http://[OPTIONAL_DOMAIN].imgur.com/abcDEF819.jpg, although they're also accessible via http://imgur.com/abcDEF819 (note lack of extension!). The regex we use is:

Whatever is matched by the ([a-zA-Z0-9\.]+) part of the regex above gets saved in this.slug. We don't care what the optional domain is or if it even exists - we'll ultimately be using i.imgur.com as the host, as it gives direct access to an image. If no file extension is found, we'll stick on a ".jpg". Not ideal, but works in the vast majority of cases. In the process function, this slug is assigned to data.src for convenience during rendering.

Next up is the rendering of the matched data. We're piggy-backing on the twitpic version of this function here as we're essentially trying to achieve the same end goal. The basic html structure of the media preview is div -> href -> img. The twitpic structure is replicated in a var here, which then gets injected in to the expanded tweet pane to give the media preview.

Get the bookmarklet!

All of the above gives us a Twitter bookmarklet for Imgur previews.

Preview added successfully

Simply drag the above link to your browser's bookmark bar, click it when next on Twitter.com and any future tweets with imgur.com should now have a media preview enabled!

The quickest way to check that it's working right is to do a twitter search for "imgur.com", and the media icons should then be shown against the resulting tweets.

FAQ

- I've applied the bookmarklet, but the imgur links in my timeline still aren't showing a preview
This bookmarklet works for any new imgur links which show up after you apply it. Not ideal, but it's a start. The next version should apply itself retrospectively to any previously-loaded tweets.

- Wait, a bookmarklet? What is that?
A bookmarklet is a small chunk of javascript that allows us to extend the functionality of a given page. See this explanation for a bit more detail.

- Bookmarklets are a pain to use, having to re-apply them is annoying
True and true. This was more an exercise in seeing how readily extensible the twitter javascript was. Ultimately the plan is to roll this bookmarklet and the various Declutter ones up in to a chrome/firefox extension that is automatically applied on page load.
Update 08/12/2010 - basic Firefox extension to enable this media preview is now available in the Add-Ons sandbox. This extension also previews Daft.ie and Adverts.ie content.

Quick Links

• WHOIS Lookup
• Dual Site Toggle
• Down for everyone, or just me?

WHOIS Lookup

WHOIS is a protocol for finding out the contact details of the owner of a domain. Traditionally this information is accessed via the command line, however a number of websites now exist as wrappers for this information.

Sites such as Who.is allow accessing of domain ownership and contact info via a web browser. What's particularly nice about the who.is site is that you can query any site by placing the domain name you wish to query at the end of the who.is url, i.e. http://who.is/daft.ie will give WHOIS info for Daft.ie.

This simple WHOIS bookmarklet automates this process. Clicking this bookmarklet will query the WHOIS info for the site you're currently on, via the who.is site. Copy the code below in to a new bookmarklet, or drag the WHOIS bookmarklet link above to your browser's bookmarks bar.

Dual Site Toggle

This bookmarklet when you want compare the same page on two different sites which both use the same url structure, e.g. a local development environment (localhost) and the same page on the live server (example.com).
For this example, we'll compare property result pages on Daft.ie with the same ones on the mobile version of the site, m.daft.ie.

First, we decide on the two sites between which we want to toggle.

Next we need to grab the filename of the current page, as well as any query string arguments. This value will stay the same between both sites.

Finally, we need to figure out which host we're on, and then switch to the other one!

As it's a bookmarklet, we need to compress it all down to one line.

To use this toggle, you can either copy the above code to a new bookmarklet, or drag this Site toggle link to your bookmarks bar.

To see it in action, we can pick a random house on Daft.ie (in this case, the house used by TV3's The Apprentice), then click the bookmarklet to toggle between the mobile and web versions of the same page.

Updating this for any other pair of sites is as simple as editing the siteA and siteB variables in the bookmarklet.

Down for everyone, or just me?

Downforeveryoneorjustme.com is a site that comes in handy when trying to check whether a site being inaccessible is a problem with the site itself, or your local network. It will basically ping the server from a location different to your own, and see if it's still available from there.

We're basically doing the same thing here as we did for the WHOIS bookmarklet above, so:

Dragging this DFEOJM bookmarklet to your browser's bookmarks bar will let you check the next time you get a "server inaccessible" error message whether the problem is on your network or with the site itself.

Most of the feedback I've received both in the comments here and on twitter has been very positive, but I've also heard from a few folk who have had difficulty actually saving the bookmarklets and getting them to work.

Admittedly, the posts on the bookmarklets did assume a certain level of technical know-how, so this post is intended as a quick intro for those who want to use the bookmarklets, but aren't quite sure where to start.

So what is a bookmarklet?

A bookmarklet is:

a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. [...] They are designed to add one-click functionality to a browser or web page. When clicked, a bookmarklet performs some function, one of a wide variety such as a search query or data extraction.

So bookmarklets basically allow us as a user to add some basic functionality to a web site from our browser, without needing to have access to that site's server. Once the bookmarklet is clicked, whatever javascript it contains will execute on the current page.

In this case, we have bookmarklets specifically crafted for twitter's web site (filtering our timeline, removing hovercards, etc) so when we go to twitter.com and click the bookmarklet, our custom code shall be run by our browser as if it were part of twitter's own code.

So, how do we save and then run these bookmarklets? Well, there are several different options..

Option 1 - Drag and drop!

Probably the quickest way of saving a bookmarklet is to drag it from it's location on the page and drop it on your bookmark bar.
First, we need to make sure the bookmarks bar is accessible. The bookmark bar is typically found immediately under the address bar in your browser (highlighted in red on the image below).

If you're running Firefox or Internet Explorer, then it should be showing by default. On Chrome, you may have to press "Ctrl+B", or go to "Settings" (spanner icon) then click "Always show bookmark bar".

Bookmark Bar (Firefox)

Once your bookmark bar is visible, you can click on a bookmarklet link, drag it to this bar, then have it ready to run!

So, given this Disable Hovercard link, all you need to do is:

• press your mouse down on the link above (do not let go of the mouse button!)
• drag your mouse to an empty spot on your bookmark bar
• let go of the mouse button

You should know see a "Disable Hovercard" bookmarklet on your bookmark bar. Go to twitter.com, click this bookmarklet and you should not see any more hovercards!

Success!

Option 2 - Let the browser do it

Most browsers have menu options which will do the same thing as the dragging-and-dropping above.

Internet Explorer

Adding a Bookmarklet - IE

• Right-click on the "Disable Hovercard" bookmarklet link
• Select "Add a Favourite.."
• You can re-title the bookmarklet using the "Name" field, if you want
• Select "Favourites Bar" from the "Create in" menu
• Press "Add"

Firefox

Adding a Bookmarklet - Firefox

• Right-click on the "Disable Hovercard" bookmarklet link
• Select "Bookmark This Link"
• If you want, you can rename the bookmarklet using the "Name" field
• Select "Bookmarks Toolbar" from the "Folder" drop-down
• Click "Save"

Chrome
Currently, Chrome doesn't have an easy right-click option for saving bookmarklets, so if you're on Chrome, you'll have to follow Option 1 above!

That's all folks!

And that's all there is to it! You should now have a "Disable Hovercard" bookmarklet on your bookmark bar. To see it in action:

• go to twitter.com and log in
• mouse over a username in a tweet to see the hovercard appear
• click the bookmarklet
• mouse over the same username, and - hey presto - the hovercard should now be gone

And that's all there is to it! The same process can be applied for any other bookmarklet, including the timeline filtering bookmarklet (remove those foursquare check-ins, xbox achievements and other such auto-tweets!)

So hopefully this post should help make things a little clearer for those who were having trouble with the bookmarklets previously - if not, let me know in the comments below!

Most of my twitter usage comes via applications that makes use of the API, such as Tweetie on the iPhone or the Echofon plugin for Firefox. However, I still spend a considerable amount of my time a-tweetin' via the web interface.

For the most part, twitter's web interface is reasonably clean, but there are still a few niggly bits that I'd rather do without. Luckily, one of the beauties of the web interface is that it allows the usage of bookmarklets, so if there's something you don't like, a quick line of javascript in the browser's address bar will sort it out!

I've written previously about using bookmarklets to hide tweets from your timeline that contain blacklisted words (sport-related, xbox achievements, etc). The next step is now to use bookmarklets to tweak the web interface itself. A nice side-effect of Twitter's use of jQuery for the web interface is that all of the jQuery selectors and functions are available to us, should we need them.

We'll start by hiding the Hovercard!

Hiding the Hovercard

Twitter recently launched "Hovercards" on the web interface. According to the blog announcement, hovercards are:

cards which appear when you hover over a username or avatar. The cards display additional information about the person and allow you to interact with them while staying within the context of your page.

Hovercards (via Twitter blog)

All good and well, and potentially useful. However, whenever I move my mouse up, down or across my timeline, these hovercards are springing up and obscuring other tweets in the timeline. Personally, I've been finding this feature far more annoying than useful, so would like to turn it off.

Fortunately, twitter have a very handy javascript function call available to do just that:

So, sticking

in to the browser's address bar will stop these hovercards from appearing again on the main timeline. So far, so good.

However, once any of the links on the right side of the interface are clicked ("@ replies", "Retweets", etc), then suddenly the hovercards are back in force. Now we need to ensure that the hovercards are disabled whenever these links are clicked. We can do this by attaching the disable() call to the click event for any of these links on the sidebar.

One unfortunate limitation of bookmarklets is that their effect only lasts while you stay on the same page - if you hit F5 or reload the page in any way, they need to be re-applied. For most of the links on the twitter web interface, this isn't an issue as they reload dynamically without refreshing the whole page (@ Replies, Direct Messages, etc).

However, somewhat erratically, the "Home" link and twitter logo at the top of the page both link to twitter.com in the traditional fashion. Clicking either of these out of habit to reload the page will mean that the effect of the bookmarklet is lost, and it must be re-applied.

This is a bit of a pain, so instead we will use the bookmarklet to make both of these links behave the same way as the "Home" link on the right hand sidebar.

Looking at the source of the twitter homepage, there are two things on each of the sidebar links which cause them to load content in situ, rather than requiring the browser to load a whole new page:

• A dispatch_action attached to a data attribute
• The class in-page-link

So we adjust our bookmarklet to add the same dispatch_action to the data attribute of the main logo link (id #logo) and the "Home" link at the top of the page (id #home_link). We want them to behave the same way as the "Home" link in the sidebar, so we assign the same data action.

Next we need to add the appropriate class, in-page-link. However, adding this class alone won't do anything. On initial page load, jQuery applies a handler to each link of this type which causes the opening of links without the need for a full page refresh. We need to re-call this function so that it is applied to our newly-classed links.

Finally, we want some visual confirmation that this has all worked as planned! We can re-use twitter's notification bar to display a success message.

Hovercards removed successfully!

Combining all of this in to a single bookmarklet gives us Hovercard removal. Drag this to your browser's toolbar then click it when logged in to twitter.com, and hovercards shall be no more.

Other quick-and-dirty bookmarklets:

Removing the "Trending Topics" list
The "Trending Topics" list is stored in a div named 'trends'. Removing this using jQuery is as simple as:

which gives a Remove Trending List bookmarklet.

Removing the Twitter ad
It's a small thing, but some people aren't too fond of the small twitter text ad in the top right of the web interface.
This ad has the associated class "promotion", so fortunately, removing it is as simple as

which gives the Remove Twitter Ad bookmarklet.

Quick-access Bookmarklets

Drag these bookmarklets to your browser's bookmarks bar for quick access when logged in to twitter's web interface.

• Hovercard Removal
• Remove Trending List
• Remove Twitter Ad
• Hovercard, Ad & Trends removal (all 3 of the above combined)

Unsure about how exactly to save a bookmarklet?
For those of you who may be a little unsure about how exactly you would save or run a bookmarklet, I've put together a quick introduction to bookmarklets, which will hopefully make things a little clearer!

Twitter can be a very useful tool, particularly once you've built up a decent-sized network of people with interests common to your own. The twitter timeline is often compared to being in a pub filled exclusively with your friends, and being able to hear all of the conversations going on at once.

However, just as you have that friend who occasionally likes to go in to excrutiating detail about his collection of porcelain squirrels, there are times when your interests diverge and you'd rather not hear the full details of next weekend's Porcelainathon. And so it is with Twitter.

Once you've started following more than a handful of people, you'll occasionally find your timeline filling up with tweets about things that you're really not that interested in. You'd rather not take the nuclear option and unfollow those involved, as they generally have interesting/useful tweets. But equally you'd rather not have to scroll through 3 pages of automated tweets about foursquare checkins, app downloads and the like.

Enter DeClutter

DeClutter is a javascript bookmarklet which will remove from your timeline any tweets which match a "blacklist" of keywords you've defined.

Below you can enter a series of terms which you want to banish from your timeline (one term per line). After entering them, you can either copy and paste the resulting javascript in to a bookmarklet in your browser, or drag the DeClutter link at the bottom of the page to your browser's bookmarks bar.

Once it has been saved, log on to twitter.com and click your new bookmarklet. Straight away you should see tweets disappearing from the timeline. This filter will re-apply itself automatically in the background every time you click "more", "@ replies", etc, so you don't need to re-click the bookmarklet whenever your timeline is refreshed.
This can lead to some odd behaviour, such as only 3-4 tweets appearing instead of 20 when you click "more", or not additional tweets appearing when you click the blue "new tweets" bar. This means that tweets which have been loaded matched your filters, and have been removed without ever being displayed to you.

Customise DeClutter

Enter words or phrases you wish to banish from your timeline below. Alternatively, you can try one of the below general category links to get you started!
Sport | Irish Politics | Computer games | Auto-tweets

Enter keywords below:
Election

Your bookmarklet

The text below will automatically update as you enter keywords above. When you're done adding, copy the below text in to a new bookmarklet.

Alternatively, drag this DeClutter bookmarklet to your browser's bookmark bar.

What now?

After dragging the bookmarklet to your browser's bookmark bar, log in to twitter.com, click it and that's all there is to it!

If you've got any suggestions for refinements to this bookmarklet, let me know in the comments below. Equally, feel free to share your own list of keyword filters for inclusion on the category list above!

The Tech Bit

The twitter web interface presents the timeline as a styled list. Each list element has a number of classes, chief amongst them "hentry".
The declutter function inside the bookmarklet loops through all elements with the class "hentry" on the currently-visible page, then checks whether any of the blacklisted keywords are present in the html of that element.

Updated 28/03/2010 - we're now using the ajaxSuccess event, rather than the crude, browser-crashery and slightly hacky setTimeout call!

Of course, this bookmarklet wouldn't be all that useufl if you had to re-apply it every time you click "@ replies", "more", "new tweets", etc. In order to have the filters be re-applied automatically, we can bind it to the ajaxSuccess event. This event is conveniently fired by jQuery

whenever an Ajax request completes successfully... Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.

As all of the various twitter timelines are loaded via ajax requests, binding the declutter function to this event ensures that it will be re-run after each successful loading of the timeline, meaning that we don't have to worry about manually re-applying the bookmarklet.

We then wrap the call to declutter() up in a void() call to prevent the browser from opening a new page, and that's all there is to it!

FAQ

- Will I still see the hidden tweets if I use Tweetie/Echofon/Twitter API?
Yes, this bookmarklet only affects the web interface to twitter.

- Will this bookmarklet automatically run every time I visit twitter.com?
If you have closed your browser or the tab in which you first ran the bookmarklet, then you will need to start it again.

- On which browsers have you tested this?
It's been tested in the latest versions of Firefox, IE & Chrome. If you're using an earlier version of any of these, it *should* work, but YMMV. If it fails horribly in earlier browsers, let me know via the comments below and I'll see about updating it.

- You say 'bookmarklet' a lot. What is that?
A bookmarklet is a small application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page, or so sayeth the wiki.

- I'm not particularly technical - can you explain how exactly I 'save' a bookmarklet?
I've put together a quick introduction to bookmarklets which will hopefully make things a bit clearer!

- Hmm. I think there's a better way of doing this
This has been hacked together very quickly using a few basic jQuery functions, I'm sure there's plenty of room for improvement! If you've got suggestions for improvement, let me know via the comments below.

- How very Web2.0 - why didn't you call it DeCluttr?
I did originally, then discovered that the name had already been taken. After that I tried to come up with a catchy new name, but naming things is hard.

- You should have some pictures on this post. I like pictures.
That's not really a question. Still, if you must, have an image.