DeClutter Twitter

Updated 27/10/2014 to handle new twitter layout.

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 excruciating 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 Twitter 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:

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.

function declutter()
{
    // Remove tweets containing these terms!
    var rk=['election'];
    // Twitter timeline entries have class "stream-item" - loop through them,
    // removing those that match blacklisted term
    $.each($('li.stream-item'), function()
    {
        var c = $(this).html();
        var p = $(this);
        // Iterate through the keywords, removing the parent element
        // where a match is found
        $.each(rk, function(i, v)
        {
            // Lower-case the text so case issues don't trip us up
            if(c.toLowerCase().indexOf(v.toLowerCase()) > 0)
            {
                  p.remove();
            }
        });
    });
}

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 useful 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.

$('body').bind('ajaxSuccess',declutter);

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.