Warning: Code ahead …
What is a perfect tool for a lazywebber like me, who wants to maintain a directory of resources? I need a tool that makes adding stuff to my database very easy. I want my bookmarklets. These small pieces of code that are used in the browser are not ideal, but does a great job, and are able to do small, disruptive wonders. The first generation bookmarklet were simple, but efficient tool, such as the dictionary look-up helper that redefined “smart tags”. We currently see a new generation of bookmarklets adding LibaryLookup, auto-discovery, trackback pinging feautes, and …
I’m going to look again on my bookmarklet. It looks like this [1]:
javascript:
1. if (m0=document.getElementsByTagName(‘META’)[‘name’,’description’]){metatagged=m0.getAttribute(‘content’)};
2. else if (metatagged=document.selection?document.selection.createRange().text:document.getSelection());
3. 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));
4. void(window.open(openstring,”,’width=900,height=400′));
Let us go through the lines one by one:
Line 1: getElementsByTagName (surprise!) gets elements by tagname, here the -tag, specifically the metatag with name=description. If there are such tag, it’s content is put into an array (?) called metatagged.
Line 2. If there is no metatag called description, we use the selection mechanism and createRange instead grab selected text, and put that in the array instead.
Line 3. We use openstring to call a carefully designed, but rather long, URL which we now start constructing.
First, we set a few constant parameters, such as who I am.
Second, to get the location (URL) we use window.location.href. [This is not W3C-DOM!]
Third, to get the title we use document.title. I guess we could use the metatagged method too, but why should we? [I’m not sure whether this is W3C-DOM]
Fourth, we add the description we have in the metatagged to the URL-string.
Line 4: We open a new, smaller window in which we call up the designed URL.
In action, the bookmarklet would open a window with a form with pre-filled content:
I can now edit everything, for example pick another category (I pre-set one in the URL-string, Line 3 above), or edit the description. But I can also just confirm everything, and click Add Link. Can it be any easier? The full operation of adding a link consists of three clicks: one on the bookmarklet, one on Add, and one to close the resulting window.
#
Up next: more automation.
One of the interesting “new things” on the web is markup for auto-discovery. This is a code snippet you add in the HTML-document head, such as:
<link rel=”alternate” type=”application/rss+xml” title=”RSS” href=”http://slashdemocracy.org/gotzespace//index.rdf” />
<link rel=”alternate” type=”application/xfml+xml” title=”XFML” href=”http://slashdemocracy.org/gotzespace/xfml.xml” />
These two examples point to two XML-files (RSS and XFML), which can then be auto-discovered by tool that can go and discover things.
Specifically, I want to have my bookmarklet auto-discover RSS-feeds. Mark Pilgrim has looked at this for Amphetadesk. Diving into his code:
1. javascript:void(d=document);void(el=d.getElementsByTagName(‘link’));
2. for(i=0;i<el.length;i++){if(el[i].getAttribute(‘rel’).indexOf(‘alternate’)!=-1 && el[i].getAttribute(‘type’).indexOf(‘application/rss+xml’)!=-1)
3. {void(location.href=’http://127.0.0.1:8888/add_a_channel.html?unknown_url=’+el[i].getAttribute(‘href’)+’&go=1′)};};
First, in Line 1, the author has also found getElementsByTagName, which here is used to check the link tag. In Line 2 we check for relevant tags in order to find the RSS feed. If we find such, we go to a special URL. I’ve tried it in my Amphetadesk, and it works. Exactly as described, that is. If there is no auto-discovery tag for RSS, the bookmarklet does nothing.
Hacking on this, we get:
javascript:void(d=document);void(el=d.getElementsByTagName(‘link’));for(i=0;i<el.length;i++){if(el[i].getAttribute(‘rel’).indexOf(‘alternate’)!=-1 && el[i].getAttribute(‘type’).indexOf(‘application/rss+xml’)!=-1){void(location.href=’http://slashdemocracy.org/links/page.php?do=add&URL=’+el[i].getAttribute(‘href’)+’&Contact_Name=John’)};};
That actually works, but is not good enough.
So, let’s see: Something like this should work, I thought:
javascript:void(d=document);void(el=d.getElementsByTagName(‘link’));for(i=0;i<el.length;i++){if(el[i].getAttribute(‘rel’).indexOf(‘alternate’)!=-1 && el[i].getAttribute(‘type’).indexOf(‘application/rss+xml’)!=-1){rssfeed=el[i].getAttribute(‘href’))};void(location.href = ‘http://slashdemocracy.org/links/page.php?do=add&Contact_Name=John&Contact_Email=john@slashdemocracy.org&cat_id=84&URL=’ + window.location.href + rssfeed + ‘&Title=’ + document.title + ‘&Description=’ + escape(metatagged));
But it doesn’t. What’s wrong? Please HELP! Any real coders out there?
[1]: A bookmarklet is literally a string of code (javascript). No line-breaks nor line-numbers should occur in bookmarklets, but have been added here for the sake of readability.
1 Comment.
Funny when you think about it, how much of the “space” that’s being used for thought, ideas, descriptions, technicalities and what not about the web and how to make it all work.
I guess about 90% of my websurfing is related to “making the web”. When we finally get there, is anybody going to use it anymore??