Using Notebook in a Delicious Way

Okay, I'll admit it. I was a big user of delicious during my first year in the "web2.0 world", despite the fact that it'd take 5 tries to type "del.icio.us" correctly. It was great to be able to bookmark stuff and then share my bookmarks with other people easily (e.g. "Check out all these visualization bookmarks I've collected").

But then I started working at Google, and resolved that I would try to use Google services for everything possibly - mostly because I hate multiple logins, and Google does seem to offer almost every service possible, so it seemed a reasonable goal. So when it came to bookmarks, I discovered Google bookmarks. Excited to find a replacement for delicious, I started using it 24/7. But then someone asked me for a suggestion of campus maps mashups, and I realized that there was no "publish" option for Google Bookmarks... and that was a very sad day indeed.

Now, as it happens, I happened to try out Google Notebook around that time - and realized that all my bookmarks were actually in an unfiled bookmark. I moved them over to a new notebook and published it here. So I'd accomplished the first goal - publishing my bookmarks - but now I wanted to be able to let people easily view certain tags in my bookmarks, and have permalinks for them. Unfortunately, the published notebook page had nothing like that - it's just a list, and I actually had to tell people "visit this page and CTRL+F for campusmap".

But, never fear - APIs to the rescue! Notebook has a read-only Google data API, which means that I can retrieve my notebook feeds in JavaScript just via the JSONP output (alt=json-in-script). So I used the API to create a gadget that lets users view all the labels in a notebook, and filter by the labels. I think the UI is pretty nifty - it shows all the labels in cloud-tag format (sized based on bookmark count), and then when you select a label, it will figure out which labels are still relevant for filtering by and grey out the rest. That makes it super easy to find which combination of labels are useful. Try it out below:

There are a couple of neat tricks to the gadget:

• pagination: The Notebook API only gives 100 entries at a time - I wanted to be able to get all of my notes at once, so that I could show every category. So here's the code I used to get all the pages in the feed:

   function loadURL(url) {
      var script = document.createElement("script");
      script.src = url + "&callback=myCallbackFunction";
      document.body.appendChild(script);
    }
  
    function myCallbackFunction(root) {
      entries = entries.concat(root.feed.entry);
      var nextLink = findNextLink(root.feed.link);
      if (nextLink) { loadURL(nextLink);
      } else { createCategories(); }
    }
  
    function findNextLink(links) {
      for (var i = 0; i < links.length; i++) {
        if (links[i].rel == "next") {
          return links[i].href;
        }
      }
      return null;
    }
  

• user preferences: I wanted to be able to permalink to certain labels, and I also wanted to be able to let other users use the gadget for their own feeds. So I used Gadget user preferences for the user ID and notebook ID (string type) and for the categories (list type). You can play with customizing the gadget here and you can see a permalink with the "campusmap" category user preference set here (notice the "up_categories=campusmap" in that URL). Here's what the UserPref for the labels looks like in the Module spec:

  <UserPref name="categories"
            display_name="Categories"
            datatype="list"
            default_value="gmaps|streetview"/>
  

  And here's the code that toggles labels on if they're set in the preferences:

  var default_categories = prefs.getArray("categories");
      for (var i = 0; i < default_categories.length; i++) {
        toggleCategory(default_categories[i]);
      }
  

Note that you can actually extend this gadget for any Google data API feeds - you can test out feed URLs in this older version of the gadget. Youtube playlist feeds look kinda nifty in it - the tags are all over the damn place. Enjoy!

P.S. Notebook now has a bookmarklet, so it's easy to "note" any page in the browser directly into a published notebook. Whee!