Building a Readernaut Widget

My friend Jorge noticed the Readernaut widget at the bottom of my sidebar and asked how I implemented it. I’m going to post the answer here in case anyone else is interested in adding this widget to their sidebar as well.

If you don’t already know about Readernaut, it’s an awesome web app that Nathan Borror built to help people keep track of their books: what you’re reading, what you want to read, what your friends are reading, and so forth. Best of all, Readernaut makes it really easy to bookmark your reading progress, and pretty soon you’ll be able to publish your progress directly to Twitter. Nathan’s probably working on it as I write this.

Anyways, here’s the Readernaut API. I’m using JSON because, well, I am very fond of it. Since JSON is nothing more than JavaScript, it’s really easy to get at the information I need with just a few lines of code.

Step 1. Include the JSON file

The first step is to create a script element that requests your JSON file from the Readernaut server and includes it in your page.

Of course, replace “your_username” with your unique Readernaut username. I’m appending the callback parameter so that I can hand off my data to a parsing function. You can name the function whatever you want. In this case, I’m using the name “parseResponse”. Put this line at the end of your page, just before the </body> tag.

Step 2. Create a container

Next, I create an empty element where I want to display my widget. This acts as a container, which I will fill with the data I’ve parsed from Readernaut.

As you can see, I created a div that will be my container and assigned it an ID of “bookshelf” so it will be easy to access and manipulate via the DOM. I’ve also included the parsing script, which I’ve named “readernaut.js” and will explain in the next step. This file contains the parseResponse function, which was specified earlier as the receiver of my JSON data. Make sure you change the src attribute to match the location of your JavaScript file.

Step 3. Parse and display the information

Now I need to create the parseResponse function, which looks like so. Remember, this function goes in the “readernaut.js” file.

I’m not going to walk you through the function line-by-line, but I’ll point out some of the things you might want to change.

Number of Books

The number of books displayed is controlled by the test condition of the for loop. This is the little part that says i<6. Change the number 6 to the number of books you want displayed in your widget. At this time, the Readernaut API only returns 10 books, so don't make the number any larger than 10.

Size of Book Cover

The Readernaut API gives you access to three book cover sizes: small, medium, and large. I'm using medium. If you want to access one of the other sizes, change "cover_medium" to either "cover_small" or "cover_large". Of course, you can always use CSS (or the image width attribute) to make the covers a little smaller or larger per your requirements.

Finally, I wanted every other image to have a class of "odd" so that I could do some stuff with floats. If you don't need this, you can simply delete the entire if statement.

The end

Anyways, that's it folks! With a little CSS, you'll have your Readernaut widget looking exactly the way you want in no time. If you have any questions, leave a comment and I'll do my best to help you out.

Oh, and one last note. The API is still a draft and warns, "This API is under development and backwards incompatible changes can (and will) happen." As such, this script isn't guaranteed to work forever. If anything changes, however, I'll be sure to post about it here.

A Wee Project

I have this little piece of cork board that I’ve carried with me throughout college, and today I decided that it needed an upgrade. I had a really cool piece of paper printed with a wood pattern left over from a calendar and thought it would make a great veneer. Here’s how the project went.

Materials

One sheet of cork board:

One sheet of decorative paper:

Continue reading this entry →

Touching Up on Touch-Ups

I have recently delved into the world of digital photo touch-up, and have been having quite a good time doing it. It’s always exciting, once I’m done, to quickly switch between the original photograph and the new-and-improved photograph, making note of all the little details that helped improve the picture overall.

I’ve not only been touching up my digital family photos, but also some of my photography, including my recent Wine Bottles on Rack photo, which I’ll probably discuss in a later article. For now, I’m going to concentrate on people pictures. So, without further ado, here are some quick tips on touching up your digital portraits.

Continue reading this entry →

Sunflower Swirl

I created this image a few months ago, but I really like it and, therefore, thought I would share it. I created it in Photoshop 7, and although I don’t remember the exact process, here’s a brief summary of the steps I took to create it.

1. Follow the steps of carbonfour.com’s
   Starburst tutorial.
2. Change the Brightness/Contrast and Hue/Saturation until the desired colors are met.
3. Filter → Distort → Twirl
4. Use a few standard filters to create a glassier and softer effect.
5. Continue to play with the Brightness/Contrast, Hue/Saturation, and other color tools until the final image is achieved.

Hm… not the best explanation, but it’s hard to say exactly because it was mostly experimentation. Anyways, enjoy!