The dashboard would typically load up my list of sites, then freeze without actually fetching any data. Refreshing the page would usually sort this out, before the same thing happened again when I click in to a site's individual profile.

Still loading..

Occasionally, rather than the page just hanging, there would also be an error message to the effect of "This page has encountered an error which may prevent it from working correctly" which would appear in red at the top of the page. Again, refreshing the page would cause both of these to go away and normal service to resume.

We have a(n intermittent) problem

As a refresh would sort these issues out after a brief wait, they were minor annoyances, but never annoying enough to justify time and energy spent hunting the web for a cure - more an itchy finger than a bad foot cramp.

But eventually, that itch has to be scratched, so I looked in to it a little bit more. I eventually came across the following tid-bit on the analytics support forum:

mobpage: try to set your date an time of computer ..it will work after that

My local clock was running a bit fast, so I set it back by 10 minutes or so, and the errors magically disappeared!

So what's happening here?

Good question. As with all issues relating to google javascript, it's quite difficult to find out exactly what's at the root of this. The javascript is compressed and minified, so reverse-engineering it would require substantially more time than would be worth it!
My suspicion is that at some point in the javascript analytics attempts to evaluate the difference between the local clock and the remote server one. This difference can be handy to have when working with date-sensitive info stored remotely, such as the raw analytics data.

My suspicion is that somewhere along the line a bug snuck in, whereby this code allows for there to be 0 difference, or for the server to be ahead of the local machine, but forget the check for the local machine to be ahead of the server.
As such, when the local time is too far ahead, the code gets confused by the difference, hangs, and blocks the subsequent code from loading.

Why does it work fine when you refresh the page?

I'm guessing that this issue doesn't affect a page reload due to the combination of browser caching and black magic that appears when a js-heavy page is refreshed, namely that the initial checks are mostly cached and thus not capable of blocking the subsequent page load code which was previously prevented from running. As such, the rest of the page can be rendered without issue.

Again, most of the above is pure speculation on my part without any real assessment of the underlying code. However, the important point here is that I no longer get page freezes/red error bars in analytics, and the response time is noticeably faster, all from one clock change!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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!

Related posts:

1. DeClutter Updated 28/03/2010 - changed how the bookmarklet re-applies itself to...

Related posts brought to you by Yet Another Related Posts Plugin.

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.

Related posts:

1. DeCluttering Twitter, Part Deux If you're just here to learn how to kill the...

Related posts brought to you by Yet Another Related Posts Plugin.