Every now and then I visit one of my frequently-used JavaScript sites and realize I've never mentioned it here. Today's example of this sort of neglect is Jesse Ruderman's Bookmarklets Site. If you're unaware, a bookmarklet (a.k.a. favelet) is a small JavaScript program written entirely within a URL, so it can be used as a bookmark. Jesse's bookmarklets are generally meant to solve browsing annoyances—for example, changing a site's background color to something readable or removing Flash objects. There are also some web development bookmarklets that are almost as good as the Web Developer Extension for Firefox (and many of them work in IE.) One thing I hadn't seen before on Jesse's site: keyword bookmarklets. These take advantage of Mozilla/Firefox's bookmark keywords feature to turn the browser into a command-line interpreter: for example, type j statement to execute any bit of JavaScript you need to test. Useful! ...

Cameron Adams (The Man in Blue) has created a JavaScript Calculator bookmarklet. While creating a JavaScript one-liner to evaluate an expression is trivial, this one's a bit nicer—it automatically switches to a smaller font when your expression fills the box, fades out nicely when you're done with it, and stops you from typing invalid letters. It's loosely based on Calq, a nice pop-up calculator for Mac and Windows. The bookmarklet is Firefox-only for now, mostly due to IE's limitation on the size of a link. ...

One nuisance I've lived with since switching to Firefox a year or so ago was that pop-up windows opened by bookmarklets tend to open behind the browser window rather than in front of it. This meant that clicking on my most frequently-used bookmarklets (one to post to WordPress and one to post links to del.icio.us) required an extra step to bring the window to the front. This is no big deal, so I lived with it for a long time. Some time last week I reached a peak of frustration with this little quirk, and I had lots of real work to avoid doing, so I decided to find a solution. A google search found a few things like this ask Metafilter thread that suggested that it only happened for some people, and changing some Firefox settings may help. Nothing worked for me, and it happens the same way on my Windows XP and MacOS X machines. I next tried adding various .focus() method calls to the bookmarklets, but the windows stubbornly remained in the background. Next I tried adding modal=yes ...

Jesse Ruderman, creator of one of the best collectionos of bookmarklets, has a note about the trouble he's having with bookmarklets in Internet Explorer—specifically with the latest security patch. Reading the comments, it looks like this is a problem with drag and drop, and not everyone is affected. If you have trouble dragging a bookmarklet to your IE toolbar, the best solution seems to be to right-click the link and select "Add to Favorites" instead. [via Simon] ...

Jesse Ruderman has updated the JavaScript Shell tool / bookmarklet to version 1.4. The new version includes history navigation and some improvements to the built-in props function. Here's the announcement. Test the shell here or install the bookmarklet (Firefox only). The JavaScript Shell is one of my essential JavaScript debugging tools. The bookmarklet version opens a shell in the context of the current page, so it's great for poking around other people's scripts, or debugging my own. ...

Jesse Ruderman has announced version 1.2 of the indispensable JavaScript Shell bookmarklet. If you're unfamiliar with this tool, it opens a window that allows you to type JavaScript commands and view their results, along with viewing object properties and a few other convenient functions. The bookmarklet opens the shell in the context of the current page, so it's great for exploring the DOM of a page. The latest version adds multiple-line input—you can even paste a script with multiple lines into the window—and fixes the bookmarklet to work with the new Firefox 1.0.3. There's an online version of the JavaScript shell that works in Internet Explorer, Firefox, and Opera. The bookmarklet version is Firefox-only. ...

Sometimes when I'm not certain about how JavaScript behaves, I want to just type a few commands and try it out. Creating an HTML document as a test takes too long, so when I was learning JavaScript, I created a simple shell to test commands. (Don't laugh, I wrote it in 1996.) I still find a use for it from time to time. Jesse Ruderman, known for his great bookmarklets site, has created a much better JavaScript testing environment: JavaScript Shell acts just like a command-line shell. You can type a command or expression and it's executed immediately, displaying the result. Better yet, there's a bookmarklet version (Mozilla only) that runs in the context of an existing window, great for debugging. Also useful is the JS Development Enviroment, a semi-IDE that lets you type an entire script and then execute it, and the rest of Jesse's Web Development Bookmarklets. ...

Although my Bloglines fix is no longer necessary, lots of other great examples of the Greasemonkey scripting engine have turned up. Jeremy Dunck and Aaron have launched a user scripts Wiki with links to a wide variety of scripts, ranging from fixing the colors on Slashdot to skipping interstitial advertisements. This is really turning out to be an amazing tool—it's like bookmarklets on steroids. ...

Rich JavaScript applications are taking the world by storm this year, and the current poster child is Google Maps. Here are some of the Google Maps-related pages that sprung up while I was on vacation: Simon Willison: Fun with Google Maps Joel Webber: Still more fun with maps A page of Google Maps Hacks including some cool bookmarklets to animate the route between two points on the map. Jon Udell's screencast showing off the route animation bookmarklet. Peter Merholz has some thoughts on the design and UI of Google Maps. Jeremy Dunck has set up a GoogleMapsHacking Wiki that is already expanding to cover more clever JavaScript tricks. All of this hacking points out one of the advantages of web-based apps: people can add their own features with JavaScript. Here's hoping Google takes the right attitude about this and publishes an official API rather than trying to lock down Google Maps to prevent it. ...

If you use tables (for tabular data, not layout, heaven forbid) you may be surprised to learn that there are several lesser-known table attributes that improve accessibility, such as summary, caption, and abbr. At any rate, I was surprised when I ran across them in a book recently. If you haven't seen those attributes before, check out Bring on the Tables at 456 Berea Street, a good introduction to accessible tables. Juicy Studio's Complex Table Inspector is a bookmarklet / favelet that reveals a bunch of normally hidden table attributes, displaying them in yellow-highlighted boxes within the table. Try it on the tables on that page to see it in action—it makes it very easy to see what's there and what's missing. [via 456 Berea Street] ...

Last week I wrote about the JavaScript Crunchinator, a tool for converting your well-indented, good-looking scripts into a less readable but more compact form. Thanks to some reader comments on that post, I have found out about a few similar tools: Angus points out his own tool, CodeTrimmer, which also crunches scripts and provides some useful options, like whether to remove comments. John and Ken mentioned Packer by Dean Edwards, a similar tool. Jeremy recommends Bookmarklet Builder, a specialized cruncher for bookmarklets that lets you work with a readable version of your code and produce a one-line compressed script as output. Jeremy also mentioned PrettyPrinter.de, the opposite of these tools. If you're faced with a crunchinated script, this tool adds appropriate whitespace and newlines to make it more readable. It works with JavaScript, PHP, Java, C, C++, Perl, and CSS. Last but not least, Marek has a good point in his ...

Steve at SlayerOffice has released a new version 2.0 of his excellent Mouseover DOM Inspector bookmarklet. MODI is one of my essential tools for developing web sites and it's great to see an update. MODI opens a pop-up layer that displays attributes, dimensions, and structure information for each element of a web page as you move the mouse over them. It gives you a lot of the functionality of Mozilla's DOM Inspector in a more convenient fashion—and it works in Firefox, Mozilla, MSIE (6+) and Opera (7.5+). New features include keyboard commands, a window that sits conveniently in the upper-left corner rather than follow the mouse cursor, and support for an external preference file. There's also a detailed help file that lists all of the keyboard commands and modes. If you already downloaded MODI a couple of days ago when 2.0 was released, be sure to clear your browser cache and grab the latest version, which includes a few fixes. ...

In case you haven't heard, Google's Blogger.com has been having all kinds of problems with spam blogs created on their system. I'm not going to link to any, but thanks to various RSS search feeds, I find several of them a day. Fortunately, Blogger has been dealing with the issue—they've added a "Flag" button at the top of every site where I can indicate that it contains spam or objectionable content. This worked well for a while—I flagged each one I found, and they were often taken offline the same day. Unfortunately, the spam blogs have recently upped the ante. The last 10-20 spam blogs I've found are conspicuously missing the Flag button, and sure enough, I found a bit of JavaScript in each one: document.getElementById('flagButton').style.display='none'; So, until Blogger provides a proper solution—such as a "report spam blogs by URLs" feature—I made a bookmarklet to re-enable the Flag button. Here's the link—just save it as a ...

Bored with normal solid information? Liquid Information is an ambitious research project dedicated to extending web users and creating a more flexible work environment. It turns web "browsers" into web "readers" and its goal is to "wake people up to the possibility of interactive text". It "turns words into hyperwords". Or at least that's what I've gleaned from reading the Liquid Information site. As for reality, it appears that they've created a simple JavaScript pop-up system to give you a menu (with options like dictionary links, highlighting, and Google searches) for each word you hover over, and they've created a server-side script that converts any page to use it: here's CNN with hyperwords and here's The JavaScript hyperweblog. I must admit I'm not too excited at the make-any-word-a-link aspect of this. Most of the features are already built into Firefox or the Google Toolbar, or are easy to add in other ways. But they seem to have some interesting ideas here and there, ...

One of the best things about user scripting is that you don't have to wait for a web application's UI to improve—you can create your own UI and hope they'll learn from it. One of the best examples I've seen is Johnvey Hwang's del.icio.us direc.tor, which offers an improved interface for the popular bookmarking service del.icio.us. Rather than using something like Greasemonkey, direc.tor uses a Client-Side Web Service Broker, which uses a bookmarklet to link a hosted script to the current page. So you visit any page on del.icio.us, click the bookmark, and direc.tor rips out the existing page and replaces it with the lovely UI shown here. The article explains this with a diagram. Due to this technique direc.tor works in Internet Explorer as well as Firefox. The script imports all of your bookmarks as an XML file, which is parsed entirely with JavaScript. It uses the XSL support of modern browsers to handle large amounts of data at reasonable speed, and Johnvey has ...