Million dollar markup?

Lazywebbing, continued. I enjoy Jon Udell’s adventures with scripting an interactive service intermediary via his ever more creative bookmarklets. It is at times like this, I wish I was a better coder, because Jon’s ideas makes a lot of sense to me, and I want to do some practical coding. As mentioned earlier, I’m tempted to try the lazy way. But today has been strange, because as I sat down and started looking at code, it all made a lot of sense, and I am proud to say, that I have produced usable and in fact very useful code. This is going to be a bit technical, so click MORE to “Dive into Bookmarklets”.

Dive into Bookmarklets
I have a use case, and will build code to a particular purpose, namely making life easier for myself and other lazy people. I specifically want a new bookmarklet for submitting entries to my GotzeLinked directory.

Adding data to a database is often a pain. Lots of fields to fill in, with many clicks to click and keys to press on the way. In our agency, our hopefully-soon-to-be-retired CMS is a good example of how bad things can go, but that’s another story …

To add to Brent’s Law, The more expensive the CMS, the crappier the URLs, one might say: The more expensive the CMS, the crappier the interface. This might not be as true as Brent’s Law, but I’d dare to state it as John’s Law anyway, because it is true in many cases – and doesn’t give any hits in Google, so I’ll “claim it” ;-).

Back to the use case. Filling in a form, basically. Giving details about links, in my case. URL, Title, Description, what not. So, what does a lazy person do? Copy-and-paste is too much work here, and forget about submitting the same old stuff again and again (such as username). Challenge, huh? We’ll see.

My system
The system I use on GotzeLinked is Links SQL, a commercial LAMP-product from Vancouver-based Gossamer-Threads. The user base is in the thousands, and there is a good user community, and lots of good sharing and co-coding going on in the community.

I am proud to be the originator of bookmarklets for Gossamer-Threads’ Links 2 scripts. That was back in 2000, when we used flatfile databases. The bookmarklet I came up with was rather RESTian, BTW, relying on URL-design and -use. I know of hundreds of happy and lazy users. It automated away the need for filling in URL and Title as well as user details, which was a big step forward.

When Gossamer-Threads came out with the SQL-version, it unfortunately was build in a way that rendered the bookmarklet useless, and I never managed to reconstruct it. I did eventually manage to find a solution using a third-party spider plug-in, but that was later “retired” by its author, and was too slow anyway to be anything worth fighting for.

A few days ago I was playing with the php-interface to Links SQL, and found a way to make a new bookmarklet. I was quite pleased with it. Until today.

Mastering DOM
When I saw Jon’s new bookmarklet I got inspired. Things like getElementsByTagName and getAttribute were new to me, but I thought, hey, that’s exactly what I need.

The first working example, I managed to make:
javascript:m0=document.getElementsByTagName(‘META’)[0];metatagged=m0.getAttribute(‘content’);t=document.selection?document.selection.createRange().text:document.getSelection();void(openstring = ‘http://slashdemocracy.org/links/page.php?do=add&Contact_Name=John&Contact_Email=john@slashdemocracy.org&cat_id=84&URL=’ + window.location.href + ‘&Title=’ + document.title + ‘&Description=’ + escape(metatagged));void(window.open(openstring,”,’width=900,height=400′));
It’s not very useful on most websites, since it picks the first meta tag, regardless of it’s content. Character definitions and what not.

So, let’s try and contextualise the code a bit: Replacing [0] with something more useful. Why not try [‘name’,’description’]? Hola:
javascript:m0=document.getElementsByTagName(‘META’)[‘name’,’description’];metatagged=m0.getAttribute(‘content’);t=document.selection?document.selection.createRange().text:document.getSelection();void(openstring = ‘http://slashdemocracy.org/links/page.php?do=add&Contact_Name=John&Contact_Email=john@slashdemocracy.org&cat_id=84&URL=’ + window.location.href + ‘&Title=’ + document.title + ‘&Description=’ + escape(metatagged));void(window.open(openstring,”,’width=900,height=400′));
It works! Pretty damn cool on a lazy New Year’s Day, if I may comment on the code 😉 But wait …

It’s not production-ready code, however. The bookmarklet now dies if you are on a site without the description metatag. Which is, unfortunately, still quite common out there. So, we need to add some if-else statements. From older bookmarklets, I got the idea to add, in the else statement, a text selection grabber, for getting highlighted text. Lo and behold, my scripting abilities today are at their best, I got it to work:

javascript:if (m0=document.getElementsByTagName(‘META’)[‘name’,’description’]){metatagged=m0.getAttribute(‘content’)}; else if (metatagged=document.selection?document.selection.createRange().text:document.getSelection());void(openstring = ‘http://slashdemocracy.org/links/page.php?do=add&Contact_Name=John&Contact_Email=john@slashdemocracy.org&cat_id=84&URL=’ + window.location.href + ‘&Title=’ + document.title + ‘&Description=’ + escape(metatagged));void(window.open(openstring,”,’width=900,height=400′));

Try it out: GotzeLink this

A few notes:
* The bookmarklet is set to add new links directly to my category of examplary blogs (which I use for my blogroll). That suits my use these days.
* The bookmarklet uses my name and email. Should be changed if used by others.
* I can whip up an installer, but will only do so on request.
* The bookmarklet can easily be modified for any other Links SQL database. All it takes is a change in the URL.