Interaction design • webdevelopment • web art • photography

June 2012

fun with Chrome css filter: javascript:void(deg=0,setInterval(function(){'hue-rotate('+(++deg)+'deg)'},55))

October 2005

Flickr view big bookmarklet

I wrote this little bookmarklet to help me instantly grab the large/original version of any Flickr photo. Funnily enough, because of Flickr's consistent filenaming scheme, it also works for photos where the See different sizes option normally remains hidden:

view big (gets 1024px version; should work for most photos)

view original (gets full version as uploaded; works for photos pre-March 2007)

Drag the link above to your Bookmarks Toolbar (or right click, Add to Favorites), then click it when viewing a single Flickr photo page.

Here's the formatted source code, if you're into that sorta thing:

for (m in M=document.getElementsByTagName('img'))
  s = M[m].src;
  if (s && s.match(/static/) && !s.match(/_s|buddy/))

June 2005

New bookmarklet: counters
(drag to Links-bar or right-click to Add to Favorites)

Tested in IE6 and Firefox. For every mouseclick, a small [1], [2], [3] incrementing counter will appear. Handy if you want to easily count the number of times something occurs on a page, such as the number of films you've seen of a specific IMDb actor/director (which prompted this idea in my case).

read more »

March 2005 pop-up dictionary for Japanese, Chinese and Korean (includes bookmarklets) [via]

February 2005

Mouseover DOM Inspector favelet [via]

January 2005

Bookmarklet Crunchinator [via]

September 2004

Password generator bookmarklet [via]

August 2004

Update 2007-02-05:
- since the activation of the new Metafilter url scheme, this bookmarklet is broken; I'm working on a new version :)

- detect deleted Metafilter threads
(update 2006-01-15: now also works for Ask Metafilter)

Drag the link above to your browser's Links toolbar and click it while viewing the Metafilter front page (or one of the archived months); this will open up a new window with links to recently deleted threads (works by detecting the gaps in the sequence of thread ids). Tested in Firefox and IE6.

[Inspired by this MetaTalk thread]

read more »

July 2004

Jesse Ruderman: Flash seek bar bookmarklet (really works too!!)

November 2003

bookmarklets voor webdesigners

Naar Voren - bookmarklets voor webdesigners - my second Naar Voren article has been published! (the first one being de kunst van minimaal coderen, which coincided with the 5K contest last year.) Those of you that can't read Dutch might want to scroll down a couple of pages, where you'll find a big list of handy bookmarklets.

I quickly thought up a new bookmarklet to use as an example in the article; as it turns out, it's pretty handy:
count used tags (drag to Links-bar)

The other article in the current edition is Breng detail aan in je markup by Anne van Kesteren. Coincidentally we both refer to Simon Willison in our articles... :)

October 2003

New bookmarklet:
!grid (drag to Links-bar)

Click once to overlay the current page with a div containing a 50x50 grid pattern. Click again to hide. Should be handy for testing alignment, quick dimension estimates, etc. Tested in IE6 and Firebird 0.7.

(Suggestions for better grid patterns are welcome; grid9.gif looks OK here but looks a bit iffy on lighter backgrounds.)

Update: here's a new version using a different grid pattern, having alternating bright and dark pixels per P01's suggestion, and without the inner 10x10 lines:

September 2003

Show Classes and IDs bookmarklet - loads a stylesheet that uses (non-IE-compatible) css attribute selector types and the :before pseudo type to add little coloured labels to each page element, indicating the class or id. [via webgraphics]

May 2003

!top (drag to Links-bar)

A bookmarklet simulating how I would like the Home key to behave in browsers: press once to jump to top of page, then press again to jump back to where you were.

I've already found this to come in quite handy while reading various Metafilter threads, deciding halfway down the page I'd better check out the link people are talking about... :)

March 2003

centricle : show specific elements - useful bookmarklet; prompts for an element name (such as A or DIV or whatever) and colour, then highlights each occurence of said element. [via]

February 2003

Simon Willison: Image Drag bookmarklet - clever and fun to use! (but doesn't work in IE)

January 2003

New bookmarklet: !usedcolors (drag to Links-bar)
This opens a new window with a listing of all hex colour values specified in the current webpage's source and in its stylesheets. Internet Explorer-only at the moment.

Remaining bugs:
- doesn't read stylesheets linked with "@import";
- mistakes entities like { for colour values;
- doesn't detect colour values specified in words or in rgb() syntax;
- thinks #ffffff and #FFFFFF are two different colours.

read more »

July 2002

Mados made a Rank Finder bookmarklet.

March 2002

SVG WhiteBoard - Armand of made an SVG bookmarklet similar to my vml-based !lineDraw bookmarklet.

Color Vision - by Cal Henderson - interesting, educational. [via 990000 and others]

Here's a bookmarklet solution if you quickly wanna see how dependant your design is on colour - works by applying the IE 'Gray' filter to the entire page body:

  !Gray (drag to Links-bar to easily apply it to any website)

January 2002

!oo - yep, more childish bookmarklets... click and see.

!forms (bookmarklet; drag to Links-bar)
This one loops thru and shows all form-actions and all input-names and values in the current page.

!classes (drag to Links-bar)

Clicking this bookmarklet shows a list of all class="..." params found in the current page, and indicates how often each class is used. Handy when cleaning stylesheets of unused .class definitions.

Update: fixed it to work in IE5 as well... ;-)

Here's a version that lists the classes in a new blank window, for easy selecting/copying to clipboard:
!classes in new win

!cookies (drag to Links-bar; click to view list of cookies)

Wow, split() and join() are really quite useful - wish I'd discovered them sooner... Observe the simple source code of this bookmarklet:

javascript:void(alert(unescape(document.cookie.split('; ').join('\n\n'))));

November 2001

show comments bookmarklet - funky script that shows little exclamation marks to indicate html comments throughout the page. document.all.tags("!"), aha. [via, who notes its cross-domain scripting potential]

Here we go, possibly the coolest bookmarklet ever(?):

  !lineDraw (drag to Links-bar)

An adaptation of Glen Murphy's clever js/vml linedraw at The bookmarklet overlays a transparent iframe over the current page, pointing to, in which multiple lines can be drawn using the mouse. Handy for quick mockups and whatnot. Should also be helpful in preventing people from touching the screen during a presentation (beh, fingerprints).

IE6 required (maybe IE5.5 works too.)
Update: yep, also works in IE5.5.

!Shake (Warning: lame)

Okay, here's another quick one: !elInfo - lets you hover over elements to see their html code in the statusbar. Handy if you forgot the class or id of certain elements. Note: it shows IE's rendition of the html tag, not the actual tag as typed. Source:

javascript:void(document.onmousemove=new Function('window.status=event.srcElement.outerHTML'))

Incremental zoom bookmarklets: !ZoomInIn and !ZoomOutOut (drag to Links-bar). Works best in IE5 (IE6 won't resize positioned elements). Source:



Update: I forgot, pup already made these.

Bookmarklet: !XY (drag to Links-bar)

Clicking it will make current x,y-coordinates appear in statusbar when moving mouse over page. Source:

javascript:void(document.onmousemove=new Function('window.status=event.clientX+\', \'+event.clientY'))

October 2001



Voor de IE gebruikers: Tom's handige Nederlandse Weblogs Sidebar kan je ook direct met deze javascript-link openen, zonder eerst een .reg-file te hoeven installeren (en je Zoekknop blijft ook werken):


(Tip: sleep de link naar je Links-bar.)

September 2001

Here's a double-set of experimental bookmarklets I made the other day after getting rather envious of IE5Mac's autofill-form ability. To use, drag the links to your Links-bar:

!GET - loops thru all form fields on a page and stores values in a cookie named 'formfields'.

!PUT - fills all form fields in current page based on value of cookie 'formfields'.

(Note: use at own risk.)

Update 020115: One problem with these is that they also get and set hidden input values - messing up some web-apps... So be careful, please ;)

July 2001

A bookmarklet-based fix for those suffering from IE6's tendendy to center texts which need not be centered:
left-align text (drag to linksbar).

May 2001

Miracles of the next 50 years (written in 1950). [via]

Annoyed by those big ads in CNET articles like this one? Try this bookmarklet: Hide ads (drag to Links-bar). It'll hide any IFRAMEs and any standard 468x60 banner IMGs on the current page.

January 2001

Researching a school-presentation on Application Servers, I came across this site: Web Tools Review, a nice collection of reviews and commentaries with a very personal style.

(This #999999 background modifying bookmarklet should make the lengthy white pages somewhat more readable.) has an important message.

November 2000

Some sites can make you waste a lot of time hovering over links, trying to read all the possibly interesting title-tooltips. But now there's a solution in the form of a new bookmarklet: Titles (drag to your links bar).

Try clicking it when reading title-abusing sites such as Zeldman and Interconnected, and the titles for each link will magically appear inline in parentheses.

Update 1: if you try it on this page, you'll see quite a mess because each of my referrer-links also has a title... Oh well, at least it works... [reported by Mihir]

Update 2: I fixed the problem by removing the titles from the referrer-links. Wasn't really a need for them anyway.

Lots of funny and weird Onion-esque articles at, including a list of the Top Ten Arm Wrestling Movies. [via my erroneous referrer list]

Something new at IE5.5 recommended.

'I have nothing to tell or sell you for the moment'

Updated the Design-page, now with thumbnails!

Invasion of the Web Snatcher [via CiPHER]

THREE.OH - The fast-loading K10K.

September 2000

My brother has a new homepage. Don't be fooled by the appearance, the totally retro '96 homepage look is by design.

Random linkage (click, explore, enjoy):
- BlogStart random blog
- Webloggers Webring random blog
- IMDB random movie

Using a MS tutorial on browser extensions, a copy of MicroAngelo 98 and the Up-bookmarklet I found at Anil Dash, I managed to add my own working 'Up Button' to the IE5 toolbar, using the same icon as the up button in regular Explorer. Very handy for traversing webserver directories.

For an instant Up Button, drag this link to your linksbar: Up

I'm still amazed at the potential speed of Java applets, after years of programming mostly in Javascript/DHTML. Here's #81.

July 2000

Eep! What happened to AltaVista? Actually, it doesn't look all that bad... The dark header is a bit distracting though.

New at 79 - I started experimenting with Java-applets recently hoping to one day be able to create one of those cool "plasma" effects, when in fact I managed to create one today using plain ol' Javascript. Go figure...

Here's another fun javascript bookmarklet for IE-users: stretch imgs - drag the link to your linksbar, then click it when visiting a site with plenty of images.

Or try this slightly modified version: switch imgs - instead of stretching out images, this randomly swaps the source of an image with that of another one.

Non-trailer excerpts from the X-Men movie. [via memepool]

Must-download: Kevin Spacey's SNL appearance in 1.2MB RealVideo (lower-left thumbnail). [via]

Note-to-self: Low sez to check these Flash-sites when I get home:
- Lunarmedia lunarbook
- sunflowers
- ...

New bookmarklet: random link - opens a random link chosen from all the links on a page. Something to try on mega link page Factory512 for example.

I can stop wondering what the author of 404 meant with 'fajne' - I just received an email from one Piotr explaining that 'fajne' means 'impressive'. Thanks!

Very cutesy and informative comparison between the benefits of both Flash and animated GIFs. Wacht Flash and GIF walk hand-in-hand into the sunset at the end! [via retecool]

Kijk eens aan, Smoel heeft het bannertje opgemerkt dat ik vanmiddag op jandevries had geplaatst - het verdwijnt echter telkens weer snel. Da's het gevaar van een open bron webportaal, je bent er nooit zeker van dat jouw links blijven staan... Maar om daar nou een heuse oorblog om te voeren...

New bookmarklet: random imdb movie

April 2000

Internet Explorer 5 users: you know that built-in IE search-pane you almost never use? Well, you can now view a trimmed-down version of this page in your search-pane. Clicking on links will simply open them in the main window, while my page remains visible until the search-pane is closed again.

A well-constructed frameset could provide the same functionality, but that would hide the address and title of clicked links.

The trick to opening a URL of your choice in the search-pane is the following Javascript-command:

_search=open('your_url_here', '_search')

You would probably want to call this command via a hyperlink, like so:

<A HREF="javascript:void(_search=open('your_url_here', '_search'))">click me</A>

March 2000

I expanded the IE-only pageGray-bookmarklet (see 00/03/12) so that it desaturates not just single pages, but entire framesets as well:
- pageGray (drag to Links-bar)

Radiohead are maintaining an online journal detailing the process of making their new album. It's a 50k page, going all the way back to July 1999.

The official Matrix website contains an amazing collection of Matrix-based comics and stories. The artists' names in the left-frame each open a different comic.


New SHIFT online. Nice cover design.

I just came up with some neat one-click javascript-tricks for use in IE5. Drag-n-drop these links to your Links-toolbar, then click them whenever you want to transform the page you are viewing:
- flipH: flip page horizontally
- flipV: flip page vertically
- flipHV: rotate page 180 degrees
- unflip: return page to normal

This is fun! Here's another one:
- pageGray: remove all color from page

Apparently, students at some Australian university have to make a weblog as a school-assignment. Why don't we ever get to do cool assignments like that?