2005-08-29

Adopting and adapting AutoLink

It appears I've fallen back on reading Jesse Ruderman this summer, and on catching up again, I stumbled upon AutoLink, a userscript which linkifies things that looks like links, or that ought to become links (ISBN numbers, mail addresses, bugzilla ticket numbers et cetera). I haven't thought about that kind of script since my (web)server side programming days, some time on the other side of Y2k, but by now you can have as much, and indeed even more fun in client land as you only could server side back in those days. (Javascript was not by far as much fun then, either, but XMLHttpRequest, the DOM and emerging web standards have mended much of that since. :-)

Anyway, I was a bit surprised to find I'd be the first who would want to do contextual autolinking - linking bug id:s referred from web pages at work to the company Trac installation, bug id:s at Lysator pages to bugzilla.lysator.liu.se, and so on, but the adding that capability was a sheer joyful five minute task.

In short, AutoLink processes pages you visit for a list of regexp filters, trying each in turn for matches, and stylishly converts the matched text portion to a link. Each such filter is denoted by a name, a regexp, and a function returning a link, more or less creatively based on the matched text portion. I added an optional additional regexp scope parameter, limiting the match to only be considered for URLs matching the regexp, when given.

And that was it. I'll host my version here, but expect you might want to stick to Jesse's for future updates (there has got to be more people than me who feed things back up the pipe). Well, time I sent back my diff.

Something that has been puzzling me a bit since I started really getting to grips with GreaseMonkey, is that at least my 0.5.1 Final installation doesn't seem to want to play nice with the horde of user scripts out there who install themselves on the "load" event listener, with, typically, a window.addEventListener("load", init, false); call. Was there some unannounced API change to GreaseMonkey only trig scripts after the load event was already fired, rendering all such scripts ineffective? If so, I suppose it is a change for the better, script writing usability wise, but it might be a good idea firing off a faked load event to user scripts made for earler versions, if that is fasible.

My diff doesn't feature the change, but if my linked userscript won't work with your installation it just might be because I dropped the event listening portion from it.
Categories:

2005-08-28

Blogger: writing proper plurals with CSS 2

Looking for something very unrelated, I stumbled upon an article on how to tweak blogger pages to render proper plurals for comments (0 comments, 1 comment, 2 comments, ...). It was a particularly smelly javascript solution, in that it wouldn't write anything at all for javascript disabled browsers. Poor style.

And while doing anything like this client side is kind of sad, I got this sudden silly urge of doing it right, and came up with a CSS 2 selectors solution in the spirit of, well, I don't know what. Just mark any place with a plural in it with a <span class="plural" name="<$BlogItemCommentCount$>"><$BlogItemCommentCount$> comment</span> tag (<$BlogItemCommentCount$> being the server-side generated number you want to act on to find plurals) and tuck in this bit of CSS in your stylesheet somewhere:

.plural[name]:after    { content:"s"; }
.plural[name="1"]:after { content:""; }

and behold! :-) I use the same trick to tag my user scripts with a little GreaseMonkeyGreaseMonkey icon, by the way, so I just have to type <a class="userscript" href="....user.js"> whenever I tuck in a link to some new user script I've conjured up. Comfy.

But back to plurals. Downside? Internet Explorer (at least up to present day) doesn't grok CSS 2 selectors. So to get it working in at least as many (and probably more) browsers, we get to add a bit of javascript to post-process the page if needed:

<script type="text/javascript"><!--
// in case your browser is crummy and doesn't grok CSS 2 selectors:
function fixPlural()
{
var ua = navigator.userAgent, plurals, i, node;
// tweak <span class="plural" name="N">N Comment</span> blocks?
if( /MSIE [0-6]/.test( ua ) && !/compatible/i.test( ua ) )
{
plurals = document.getElementsByTagName( 'span' );
for( i=0; i<plurals.length; i++ )
if( /plural/.test( (node=plurals[i]).className ) && node.name != 1 )
{
node.innerHTML += 's';
// and just in case this browser does support CSS2, toss the class
node.className = node.className.replace( /plural/, '' );
}
}
}//--></script>

and then find your <body> tag and rewrite it to <body onload="fixPlural();">. Congratulations on your human readable blog! :-)

Blogger: edit template button user script

Just to play around a bit with Aardvark to do something creative, I thought I'd find a nice spot in my template to drop an Atom Feed icon. Having been rather frequent on the edit template page recently, I've also started to find it somewhat inaccessible, hidden deep in the depths of probably several page clicks away from where I am when I want to do something with it.

Common blogspot page header So there was a slight delay, and I made another user script, figuring, hey, if others share my concern, why not spend a quarter on doing it nicely once and for all? Since you already have your own blogger blog (at least if you are interested in this user
script), you're not particularly likely ever use the "Get your own blog" link in the common blogger header again. So let's replace it with another one, heading straight off to the template editor.

Upgraded blogspot page header The graphics dabbling was the big part of the job, but I like the feel of the finished script - the nice blend-in graphics makes for that finishing touch that does all the difference. Platypus, for all its supposed splendour (it does seem able to do many nifty things once you grok its user interface -- in fact, I tried using it to speed up the creation of this hack), ruins most of it early on with its hideous toolbar (in the default setup) -- which you fortunately can switch off to just go with a nice little icon somewhere in your own toolbars. But user impressions is a large part of an application. One of the reasons MacOS will most likely always outshine Windows.

But I digress. I actually had another thing on my mind, too -- before putting the final userscript together I drew up a quick scriptlet which addresses the same issue. In fact, it's perhaps even more useful to some of you, since it takes you to the template editor right away, from any blogspot entry, regardless of whether you kept the blogger page header or tossed it. Feel free to bookmark that instead, or too.

And should you want to contribute graphics for the edit button in any of the other blogger provided styles; tan, silver, black and what have you, I'll willingly update the script to pick the appropriate graphics and host the images for it, as well. My original graphics is available in PNG and Photoshop formats.

...I think I'll get back to adding that Atom Feed link now. :-)