PURVEYOR OF FINE WORDS

June 22, 2005

June 22 2005

del.icio.us direc.tor

I have always been intrigued by the idea of using a client-side application to act as a service broker, integrating various services like Google Maps, Flickr, and del.icio.us. Unfortunately, after doing the research, I found that the security blocks in the browser prevent normal untrusted code to poll sites that are not from the same server, so that grand service idea couldn’t be a reality. What I was able to do, though, was provide a service for a single website: del.icio.us.

Part research, part appreciation for del.icio.us, del.icio.us direc.tor is a prototype for an alternative web-based rich UI for del.icio.us. It leverages the XML and XSL services of modern browsers to deliver a responsive interface for managing user accounts with a large number of records. Try it out, and let me know what you think.



73 Comments »

  1. Impressive stuff! The interface feels really responsive and fast (not that I have a zillion of links in my profile, but anyways), it looks nice and clean.

    If I was to make any suggestions it would be to tone down the yellow mouseover (make it light gray?) in the result listing, since it’s not consistent with how the tag filtering works (where the yellow is used to mark a selection, not a hover event)

    Once again, nice work! gonna read up on your articles about the technology behind it…

    Comment by Björn Carlsson — June 24, 2005 @ 6:10 am

  2. Looks like a great start. Yes, the yellow is a bit insane! It has similar function to TagSense. MetaFilter is down right now, but I just asked a question that speaks to this very issue… The gist was: What utilities are available to del.icio.us power users? My specific question was about ways to bulk edit or bulk delete. Take a look at the question (I’d give you the link if the server weren’t down!). The question was written by abbyladybug on 6/23/2005 fairly late at night (with a bit ole editing mistake - whoops!) and del.icio.us is one of the tags.

    Also, I came for del.icio.us director, but I will subscribe because of the photography. Nice work!

    Signed,
    Abby, A fellow shutterbug

    Comment by Abby — June 24, 2005 @ 7:06 am

  3. A few more comments: The font is awfully small, even to my stellar visioned eyes. When I hover over the tags, my mouse doesn’t change to a little hand or an arrow or anything, so I wasn’t sure it was working. It was, but it’s something to look into. Hope these comments help. :D

    Comment by Abby — June 24, 2005 @ 7:09 am

  4. Awesome! Now, If I could use that one with my Scuttle… :-)

    Comment by David Collantes — June 24, 2005 @ 3:06 pm

  5. del.icio.us direc.tor

    Interesting things are always being done with the design and layout of del.icio.us. Perhaps it’s because the initial design is so…let’s just call it ’sparse’. So, there is an interesting and very well thought-out Ajax i…

    Trackback by pixies.ca — June 24, 2005 @ 6:23 pm

  6. Great idea! Unfortunately, doesn’t seem to work for me. I followed the steps to create the link, and when I go to the Director link I’m prompted to log in, and up comes the Director page. So far so good. But the columns (the tag columns) are all empty. The static demo works fine. (I’m using Firefox 1.0.4, with JS enabled.)

    Comment by zer0halo — June 24, 2005 @ 8:16 pm

  7. Delicious Direc.tor

    Johnvey.com  tiene un interesante instrumento para sacar provecho a del.icio.us.  Prubelo!

    Trackback by H A L L A Z G O S ! — June 25, 2005 @ 4:48 am

  8. Very nice: smart, pretty, and useful. And it comes complete with comments in the code!

    Yet more proof that I need to give up my snobbery about browser-side scripting; while I wasn’t looking it turned into a cool platform. Thanks for such a rocking example!

    Comment by William Pietri — June 25, 2005 @ 12:29 pm

  9. As a “heavy” delicious user, I can only thank you. Great Job, I posted about it my blog (Hebrew blog about Social Bookmarkings), and so far I got only good responses. Rock on!

    Comment by Koby — June 25, 2005 @ 3:08 pm

  10. Really impressive script!

    David: I think the edit link is hard-coded to del.icio.us, but everything else seems to work fine with Scuttle. Keen.

    Comment by Marcus — June 25, 2005 @ 3:50 pm

  11. This is a really slick interface to delicious, both in the backend and visually. Thanks!

    Comment by Thomas Sibley — June 25, 2005 @ 6:06 pm

  12. very very impressive. it works flawless in firefox. i’m troubleshooting as to why it doesn’t work with safari. any hints?

    Comment by bwana — June 26, 2005 @ 3:29 am

  13. i have two question.
    firstly, afrer query, some list are represented by bold letter and other are not, what that mean?
    secondly, when i query in the textarea which show list as typing. but when i hit enter key after typing query words i was sent to the top page of del.icio.us. which i don’t wanto to.
    i want still be in the list page after hit enter key.
    any hints?

    Comment by yopi — June 26, 2005 @ 11:31 am

  14. Good show - quite useful and good application

    Comment by Aaman — June 26, 2005 @ 2:50 pm

  15. This is awesome! We put a profile of it up at http://www.techcrunch.com/?p=46. very cool

    Comment by Michael Arrington — June 26, 2005 @ 7:12 pm

  16. That is just so very sweet. This makes tag handling so much easier! I love it. Thank you very much.

    Comment by Ashwin Bharambe — June 26, 2005 @ 8:38 pm

  17. Outstanding! Superb!
    An incredible useful application on a technology breakthrough. And you are sharing with us!
    Thank you a lot.

    Comment by Hernan Foffani — June 27, 2005 @ 9:57 am

  18. it also works in camino 0.9a1.

    finally ajax put to good use.

    Comment by pfig — June 27, 2005 @ 5:19 pm

  19. I don’t go deep in your code but maybe you can use AjaXSLT (http://sourceforge.net/projects/goog-ajaxslt/) to extends it to Opera and Camino. What do you think? Is it possible?

    Comment by Rafael Muñoz — June 28, 2005 @ 4:01 am

  20. Opps … I want to say “to Opera and Safari”

    Comment by Rafael Muñoz — June 28, 2005 @ 4:02 am

  21. Really cool. Now listed on Absolutely del.icio.us tools.
    http://pchere.blogspot.com/2005/02/absolutely-delicious-complete-tool.html

    Comment by Quick Online Tips — June 28, 2005 @ 5:30 am

  22. This is great. It’s a pity I have to keep clicking the bookmarklet. Could this be encapsulated in a Firefox plugin?

    Comment by Iain Cheyne — June 29, 2005 @ 2:11 am

  23. A dream delicious client

    A little over a month ago I mentioned my contemplation of tag based bookmark management. Since then I have made a commitment of sorts to move my links to del.icio.us. Lately, instead of working though my bookmarks and uploading the links I want to keep…

    Trackback by ollicle — June 29, 2005 @ 5:33 am

  24. I’m both really impressed of and really happy for this wonderful tool. Not only because the unheard of cleverness, but also because it is a great and useful interface.

    Like a few other I would appreciate a larger font for the bookmarks though.

    And I think I’ve found a bug - my tag “watch” shows up like a cryptic “watch ( function watch() { [native code] } 1111111111111111)” in the tag browser.

    Comment by Daniel — June 29, 2005 @ 7:30 am

  25. I’m impressed with the functionality of the tool. I think it will change the way I use del.icio.us. I used to be a minimalist in that I would only use one or two tags to describe each link.

    With direc.tor, I can put way more tags and still stay organized.

    One enhancement request I have is to pass along the list of recommended tags when Edit is selected, as in the current del.icio.us interface.

    Comment by Ust — July 1, 2005 @ 6:35 am

  26. Very nifty. I suggest adding a menu allowing us to select a bundle and then showing only thetags in that bundle in the left column.

    Comment by John Abbe — July 3, 2005 @ 2:53 am

  27. About the XSLT and Safari. Don’t know if you’ve looked at using this, perhaps it might be of some help.

    Comment by Tom — July 3, 2005 @ 6:39 pm

  28. Great work, but can you zip up the files for download?

    Comment by GPLDOG — July 4, 2005 @ 1:27 pm

  29. Very impressive! Has made del.icio.us even more useful than it already was, which is saying something. However, when I click my tag for ‘art’, it also pulls up ‘articles’, which isn’t so handy.

    Comment by Jaytee — July 6, 2005 @ 11:15 pm

  30. Great work. You’ve taken something great (del.icio.us) and made it even better - that doesn’t happen very often.

    Comment by Dave Fravel — July 12, 2005 @ 3:30 am

  31. Your tools usability, including its ability to sort by Description make it a winner for me.

    One problem I’ve noticed is when I highlight a tag in the Tag Browser the pattern match is not exact. For example if I click on my tag “ar” then bookmarks tagged with “ar”, “article”, “search”, “software” etc. are shown. This gives me bookmarks I didn’t want to see. This is in Firefox 1.0.4 on Windows XP.

    Comment by CJ — July 12, 2005 @ 3:31 pm

  32. I love it.

    Comment by Andrew Schamess — August 2, 2005 @ 11:33 am

  33. It is normal that you have to go to delicious first and the enter the bookmarked script all times you want to use director?
    For me this is not nice!

    Comment by calevais — October 3, 2005 @ 5:11 am

  34. wowwiieee! Great thing!

    Comment by querdenker — October 23, 2005 @ 3:59 pm

  35. very cool!

    Comment by dude dude — October 23, 2005 @ 11:20 pm

  36. I went and made a Del.icio.us Director Greasemonkey script out of your bookmarklet. Thank you so much for such an amazing service!

    Comment by Danny Dawson — October 27, 2005 @ 2:56 pm

  37. Just one word : Excellent !!!
    This should definitely be the default del.icio.us GUI

    Comment by Julien Coupard — November 2, 2005 @ 1:02 am

  38. Why this bookmarklet doesn’t work in Opera?

    Comment by adas — November 8, 2005 @ 2:49 pm

  39. The is problem with case of tags , and with cyrillic tags

    Comment by agens — November 14, 2005 @ 7:06 am

  40. del.icio.us direc.tor: Delivering A High-Performance AJAX Web Service Broker

    Trackback by cnjiao — January 9, 2006 @ 1:37 am

  41. Awesome tool. Looking forward to more features.

    Comment by Can — January 16, 2006 @ 11:52 pm

  42. Hey how about a “refresh” button that automatically refreshes the delicious page and the director?

    I keep the director window open at all times, but everytime I hit refresh on the browser I have to load the director again.

    Comment by Can — January 18, 2006 @ 11:39 pm

  43. This is the killer app for tagging, not just links, but everything. I want to manage every bit of information I have this way. How about this client for RememberTheMilk.com. More more more more.

    Comment by digeratess — January 30, 2006 @ 11:08 am

  44. Great stuff…I have one question though..

    Does this support a similar UI for the delicious popular page? That would be really cool….

    Comment by Karthik — February 2, 2006 @ 10:10 pm

  45. Awesome stuff!!!
    I am really hoping th day when the whole web (or atleast the whole del.icio.us would work like this)

    Comment by chesss — February 10, 2006 @ 3:30 am

  46. After installing Johnvey Hwang’s del.icio.us direc.tor Javascript bookmarklet for Firefox or Internet Explorer, browse any page on del.icio.us, click the bookmarklet, and your browser will show the del.icio.us data in an entirely different user interface. - ‘direc.tor offers a richer UI for browsing del.icio.us’ http://www.josschuurmans.com/josschuurmans/2006/03/director_offers.html

    Comment by Jos — February 28, 2006 @ 8:13 pm

  47. Excellent tool! I hope you get more time soon, and I will contribute to that end when I get more money. Now I don’t necessarily need to choose between the bookmark tags extention in Firefox and del.icio.us. They both work the same!

    Best,

    Nick

    Comment by Nick — March 16, 2006 @ 5:10 am

  48. You definitely on the right track, but what you have in no way addresses what i need from delicious? I can’t quite see what value your product has helping me use delicious or i don’t understand how to use it. That no way diminishes the wow i got when i first logged in. Use the columns for managing tags and bundles instead of keyword would open this up as the interface is nice and fast. You should make this into the editor for heavy delicious users

    Great job. I’d like to talk to you about using your interface for mashup of delicious

    You need to build an editor that allows me to manage my bundles and tags easier

    The tech spec is excellent.

    What about RSS out? I see you can parse it but can you generate it ;)

    Comment by Brian — March 22, 2006 @ 6:43 am

  49. Please include a column that shows which entries are marked private (del’s “Do not share” checkbox)

    Comment by hans — June 3, 2006 @ 1:19 am

  50. Very slick! Thanks for a wonderful tool, great papers and some fine code!

    I was wondering if it might make sense to use “matches” rather than “conmtains” in the XPath expression. I have tags like “elementary-schools” and “schools” which are semantically different (to me) but selecting “schools” also shows “elementary-schools”.

    OK, that was a labored example, but the issue is more than can be solved by simply renaming my tags.

    Am I right? Can one simply use “matches” instead? I guess I should try it, huh?

    Thanks again,
    –johnt

    Comment by John Tangney — July 11, 2006 @ 3:06 pm

  51. Great tool, make browsing my bookmarks much more easier,

    couple of thing: as this is GPL’ed is it possible to download it, i want to try and modify it to work with www.scuttle.org (which is pretty much a GPL’ed del.icio.us)

    Cheers

    Justin Kelly

    Comment by justin — July 16, 2006 @ 6:09 pm

  52. I apologize if someone else already suggested this, but I don’t feel like reading through all your comments ;)

    I would love it if you added some way to refresh the interface to reflect the most recent data. This helps mainly when you edit entries or add an entry from another browsers. Simply running the bookmarklet again works, but a link on the page would be so nice ;) Thanks.

    Comment by Mike Bulman — July 26, 2006 @ 4:46 am

  53. This does work in Opera 9+. The problem is that in the code you check for ‘document.all’ and if found you assume IE although Opera supports lookup via doc.all.
    So to remedy this, I added ‘document.all=null’ to the beginning of your bookmarketlet. Result:

    javascript:void((function() {document.all=false;var%20element=document.createElement(’script’); element.setAttribute(’src’, ‘http://johnvey.com/features/deliciousdirector/dboot.js’); document.body.appendChild(element)})())

    Opera compatible. Its Firefox compatible too but just not IE obviously. Enjoy Opera users.

    Comment by fearphage — August 30, 2006 @ 1:34 am

  54. Great job! but… I’ve started to work whith it and I’ve found a little bug, Direc.tor can’t find tags whith special Latin letters:
    Ñ Ñ LATIN CAPITAL LETTER N WITH TILDE
    ñ ñ LATIN SMALL LETTER N WITH TILDE

    Á Á LATIN CAPITAL LETTER A WITH ACUTE
    á á LATIN SMALL LETTER A WITH ACUTE
    and so on…

    Comment by atlas — January 9, 2007 @ 11:45 am

  55. Direc.tor is very good to view and use.

    I am using it for serching instead of delicious interface.

    But , It cannot work when I activate diretor page from second time use.

    As a result , I have to wait some to renew director page..

    What is this problem caused from…?
    Could you fix it plz…?

    Regards~.. from Korea. Jamb

    Comment by jamb — February 26, 2007 @ 3:09 am

  56. I started googling this morning for exactly this kind of del.icio.us interface. The speed and presentation are great.

    Few ideas;
    - When I search for t:tag I would like it to highlight in the Tag Browser as well. At present, scrolling to find one of my many tags is tedious.
    - Allow resizing of the screen layout, I would like more vertical space for the Tag Browser
    - Predict the tab that is being typed

    May thanks for writing this. David

    Comment by David — March 10, 2007 @ 6:47 am

  57. We use a client-side application, but our speciliast quit his josb last month. We need some help. If there is somebody who is interested, please contact me. Thanks Jürgen.

    Comment by Jürgen — March 16, 2007 @ 10:14 am

  58. We tried it out and we want to says thanks_great_work. Stefan

    Comment by Stefan — March 18, 2007 @ 3:44 pm

  59. Fantastic extension. Does exactly what I want, allowing me the convenience of an ad-hoc hierarchical tag search without having to pre-plan anything. Previously I used the Bookmark Tags extension for Firefox (https://addons.mozilla.org/firefox/998/), but that build an exponentially expanding number of bookmark folder hierarchies so it wasn’t ideal.

    The one improvement I would suggest is in the tag pools displayed at the top of the window. The leftmost one contains all my tags, the second displays all tags used in combination with the one selected in the first, the third contains all tags used in combination with the first two, and so on. What I’d prefer to see is a single tag pool. Each time I click on a tag, it gets highlighted and all unrelated tags disappear from the pool. That way I’d end up with the equivalent of the contents of the rightmost tag pool plus the highlighted ones from the other pools. Just to round things off, clicking on a highlighted tag would unhighlight it and the tag pool content would be recalculated.

    This ides would make it easier to use direc.tor from the Firefox sidebar, where screen real-estate is at more of a premium.

    Thanks for a great tool.
    Kevin

    Comment by Kevin Broadey — March 19, 2007 @ 3:56 am

  60. This is great. Thanks 4 it. :-) John

    Comment by John — March 27, 2007 @ 11:57 am

  61. Fantastic extension. This is great. Thanks a lot.

    Comment by Rechtsanwalt Strafrecht — April 18, 2007 @ 4:03 pm

  62. direc.tor is great, but urls which are tagged with names containing special characters like ‘ü’ | ‘ä’ | ‘ö’ are not displayed in the details view.

    greetings from austria,
    Peter

    Comment by hellblau1970 — June 4, 2007 @ 9:37 am

  63. Just started using del.icio.us and direc.tor is probably the only thinking keeping me using it. However, just a few comments:
    -On page refresh I only get the message: Unable to load your bookmarks!

    Comment by Alex — July 22, 2007 @ 12:27 pm

  64. Just started using del.icio.us and direc.tor is probably the only thinking keeping me using it. However, just a few comments:
    -On page refresh I only get the message: Unable to load your bookmarks!
    I cant seem to get this to reload thereafter unless I close the browser and reopen it. Also changes made during the use don’t seem to be changed in direc.tor although they are changed on del.icio.us
    -Also just a wish - it’d be awesome if there was batch editing

    And just a comment - it is awesome that you don’t only search by tag but also in the title

    Comment by Alex — July 22, 2007 @ 12:33 pm

  65. Sorry to bother you, but there’s no way to get this script working now. I remember using it on previous versions of Firefox, but on Firefox 2.0.0.11. Thanks!

    Comment by Juan Ignacio — February 4, 2008 @ 7:00 am

  66. Suspect it is not your code, but FYI: Firefox 3b4 seems to have broken direc.tor. Someone has mentioned JS engine changes between b3 and b4, and direc.tor worked fine in b3.

    This is one of my favorite pieces of code, a thousand thanks for developing it. Once has to wonder why del.icio.us itself hasn’t formalized it as an extension…

    The Mozilla forum message can be tracked at:

    http://forums.mozillazine.org/viewtopic.php?t=636488

    Comment by richard — March 12, 2008 @ 4:28 am

  67. Truly awesome! Congratulations on this brilliant piece of software!

    I have a request for a new feature (it’d be a huge help for me and thousands of others):

    - An import of bookmarks from PowerMarks 3.5

    This guy tells the problem better than me:

    http://tech.groups.yahoo.com/group/ydn-delicious/message/215

    PowerMarks is a Windows program that works pretty much just as your script. But many users, like me, are stuck with the bookmark file (Netscape-like) because del.icio.us can’t read it correctly. The tags aren’t imported anyway and the result is poor.

    So this import feature would be very helpful for thousands of people. Please, please, please …?

    Comment by Bjorn T. Jonsson — March 14, 2008 @ 11:16 pm

  68. Your addon works a bit like the del.icio.us extension for firefox, 5.44, by Yahoo — but yours is better, with a tags column included in the bookmarks list. In this regard, I have a lot of untagged bookmarks that need tags. It would be a huge help to have something like the flat bookmark extension: a data edit window that changes as you highlight different bookmarks. Thne one just types in relevant tags, without having to click “edit” for each bookmark.

    Also, I guess it takes two clicks on two linnks: first the API page, and then the direc.tor link — to start your director?

    Comment by howard schwartz — March 19, 2008 @ 2:03 pm

  69. Excellent job.
    Beautiful, Wonderful, Helpful, and just Works.
    Thanks a lot.

    Comment by addone — April 23, 2008 @ 10:29 am

  70. I have just tried it, but it doesn’t work any longer.
    It says: unable to load bookmarks.

    Is there a fix?

    Comment by Andrei — January 5, 2010 @ 4:01 am

  71. Doesn’t seem to be working anymore since Yahoo deepened the merge.

    Comment by Ty — January 9, 2010 @ 3:42 am

  72. Unable to load your bookmarks!

    I just started using del.icio.us direc.tor today and it suddenly stopped working. I tried clearing my cache and even switched to another browser but it just won’t work =/

    Comment by Sarah — May 14, 2010 @ 2:55 am

  73. Doesn’t work for me. Changing the url to api.delicious.com also did nothing. Too bad.

    Comment by Harald — August 27, 2010 @ 4:56 am

RSS feed for comments on this post. TrackBack URI

Leave a comment