One of the interesting side effects of getting involved in your programming language community of choice is that you often get access to cool projects being done by your community buddies before the rest of the riffraff (aka the general public). One such project is Gimme Bar, a "capture anything you want and read later" web site. Created by the fine folks at Fictive Kin, Sean Coates and Ed Finkler were kind enough to not only give me access to their application (My user type apparantly is "The Betanaut") but also an early peek at their API.

Now, it's changed a bit since their earliest work but now they are starting to promote not only the site but showing how easy it is to use their API to play around with not only your content but other's public-facing content too. I fooled around with the API and tried to write some Python stuff but lots patience when trying to work with OAuth from the command line. Hey, it's not their fault that I couldn't be bothered to slog through it all.

Funkatron was kind enough to put together a blog post about building a Tumblelog with Gimmer Bar and PHP so I told him I would write up what I did on my own blog.

One of my intents was to use the Gimme Bar API to pull in a list of my latest Gimmies for the sidebar on this blog. Ed had posted a very simple example in Javascript (I cannot remember where it is) so I took it and ran with it to modify it to work with the blogging software used here.

I went and asked some questions in the Freenode IRC channel for Octopress and found out that they recommended the use of JS libraries that are compatible with Ender.js. Okay, so that was no problem. So what to use to make the actual AJAX request call to the API? Reqwest was mentioned by some as the best fit for using with Ender. Reqwest is an easy-to-use JS AJAX library that the #octopress guys suggest I use since jQuery doesn't currently play nice with all the other JS libraries that Octopress is using.

Finally, I used Underscore to help with templating.

Even though I'm not much of a JS whiz, I was able to take Ed's example and very quickly modify it to work exactly the way I wanted it to. Below is the code I used to putt in my 10 latest Gimmes and insert them into the DOM exactly where I wanted them.

<section>
  <h1>My Latest Gimmies</h1>
  <ul id="gb_assets"></ul>
  <script type="text/javascript">
  reqwest({
      url: 'https://gimmebar.com/api/v0/public/assets/grumpycanuck.js?jsonp_callback=?',
      type: 'jsonp',
      success: function(data){
          var list_tpl = "<% _.each(records, function(record) { %> <li><a href='https://gimmebar.com/view/<%=record.id%>'><%=record.title%></li></a> <% }); %>";
          var list_html = _.template(list_tpl, data);
          $('#gb_assets').html(list_html);
      }
  });
  </script>                                                                                                                                                     
</section>

For those who aren't JS-savvy, I'll explain what goes on here:

• Execute an AJAX call that...
• calls the Gimme Bar public API to get the latest 10 public posts...
• and on success generate an unordered list of posts...
• linking to the item on Gimme Bar and show the title...
• and insert it into the DOM where I asked it to

Easy peasy, lemon squeezy. Ender.js + Reqwest + Underscore + 15 lines of markup and JS gives me the latest 10 posts. Hope this inspires you to play with the Gimme Bar API yourself.