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


Bookmarklet:
- 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]

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:
!grid2

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]

!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... :)

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 web-graphics.com]

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

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.

SVG WhiteBoard - Armand of nokiko.com 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)

!oo - yep, more childish bookmarklets... click and see.
(IE-only)

!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... ;-)

Update:
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'))));

show comments bookmarklet - funky script that shows little exclamation marks to indicate html comments throughout the page. document.all.tags("!"), aha. [via scottandrew.com, 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 bodytag.org. The bookmarklet overlays a transparent iframe over the current page, pointing to milov.nl/code/linedraw.html, 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:

javascript:if(!document.z){void(document.z=1);}void(document.z*=2);void(document.body.style.zoom=document.z);void(document.body.parentNode.style.zoom=document.z);

javascript:if(!document.z){void(document.z=1);}void(document.z*=0.5);void(document.body.style.zoom=document.z);void(document.body.parentNode.style.zoom=document.z);

Update: I forgot, pup already made these.

!ZoomOut

!Invert

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

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

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


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.

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



riothero.com has an important message.

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 squelched.com, including a list of the Top Ten Arm Wrestling Movies. [via my erroneous referrer list]


Something new at i.am/bald. 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.

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 i.am/bald #81.

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


New at i.am/bald: 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 Kempa.com]

Note-to-self: Low sez to check these Flash-sites when I get home:
- Lunarmedia lunarbook
- Flashwave.net 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.am/bald' - 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

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>

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.

Yow!

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?