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.

My New Portfolio

I’m looking to start doing some freelance design work and/or find a full-time web design position, so I figured it was time I built a legitimate portfolio website. I had an awesome time designing it and I learned a lot about jQuery and Ajax along the way. Anyways, check it out!

If you know anyone that needs some work done or is looking to hire a web designer, please do pass along my site. I’d much appreciate it. Thanks!

My Blog’s Personality

I just ran my website through Typealyzer, a tool that calculates your Myers-Briggs Type Indicator based on the content of your blog. According to the website, “When all features, words and sentences, are statistically analyzed, Typealyzer is able to guess which personality type the text represents.”

I assume it’s only analyzing the front page, so it might not be very reliable. However, at the time of submitting my site, the homepage was filled with content that is extremely reflective of my writing style and interests: a science/tech/futurist-related essay, an article related to the design of this website, a post about a movie trailer, and a few short blurbs regarding some of my photographs.

After a few seconds, Typealyzer declared the author of this blog (me) to be an INTP: Introverted iNtuitive Thinking Perceiving. Considering that this website is in many ways the digitized contents of my brain, I wasn’t surprised that Typealyzer was spot on. I Googled INTP and found this: Portrait of an INTP. INTPs are called the “Thinkers,” and I’ve extracted a few of the descriptions that I found to be very accurate, as if they were written just for me.

• INTPs live in the world of theoretical possibilities. They see everything in terms of how it could be improved, or what it could be turned into.
• They seek clarity in everything, and are therefore driven to build knowledge.
• They love new ideas, and become very excited over abstractions and theories. They love to discuss these concepts with others. They may seem “dreamy” and distant to others, because they spend a lot of time inside their minds musing over theories.
• The INTP is likely to be very shy when it comes to meeting new people. On the other hand, the INTP is very self-confident and gregarious around people they know well, or when discussing theories which they fully understand.
• The INTP is usually very independent, unconventional, and original. They are not likely to place much value on traditional goals such as popularity and security.

Typealyzer also drew up this visual analysis that shows the parts of the brain that were dominant during writing.

Again, quite accurate, particularly the almost 50/50 division between practical and idealist. Anyways, give Typealyzer a try. I’m curious if it works as well for anyone else.

Homo evolutis

Last year, I read a piece in WIRED about a man named Ray Kurzweil. He’s a futurist and inventor, among other things, and he takes “180 to 210 vitamin and mineral supplements a day” in an effort to live to witness what’s called the “Singularity.”

The Singularity Institute for Artificial Intelligence describes the Singularity as “the technological creation of smarter-than-human intelligence.” Some say it will render biological humans obsolete. Kurzweil, on the other hand, thinks it will immortalize us. What both parties agree on, however, is that the Singularity is near. So near that I, at 22, could live to see it.

I understand why Kurzweil would like to live to witness the Singularity, but in some ways I found it sad that he chooses to live life so cautiously. We are often taught to live each day as if it’s our last. Kurzweil, on the other hand, seems to live every day so that it’s not his last. Of course, a balance should exist between the two, but let’s just say that the WIRED piece didn’t convince me to skip out on any nights at the bar or pints of ice cream. That is, until…

The Arrival of Homo evolutis

Today I was on the TED website and excited to see some new videos had been uploaded from this year’s conference. A talk entitled Juan Enriquez: Beyond the crisis, mindboggling science and the arrival of Homo evolutis caught my attention. I watched.

By the end, I had chills running up and down my spine. Enriquez concludes with a slide that reads the following:

Homo evolutis (ho•mo ev•o•loo•tis) n. Hominids that take direct and deliberate control over the evolution of their species… and others.

Essentially, Enriquez predicts that Homo evolutis will be the next species in the evolution of the Hominid family (e.g., Homo habilis, Homo erectus, et cetera). So, when does he think this new species will arise? Soon. Like, really fucking soon. He points out that “the common stage of affairs is to have overlapping versions of Hominids, not one.” Obviously, one species of Hominid can’t evolve into another overnight. At any point in time, more than one has existed, which is why Homo evolutis will come into existence even while we Homo sapiens are still alive.

Did you know that there are nine women walking around Boston with regrown bladders? I didn’t.

Where will Homo evolutis come from? From science. Enriquez shares many of the experiments and procedures happening this very day in the field of stem cell research, including the growth of human organs. Did you know that there are nine women walking around Boston with regrown bladders? I didn’t. We’re talking real human organs being grown inside petri dishes at a laboratory near you. It’s incredible.

Enriquez goes on to explain how studies are finding that skin cells should be able to take the place of stem cells as the agents of regrowth. “That means that you can take the stuff right here,” Enriquez says as he pinches the flesh on his arm, “and turn it into almost anything in your body.”

Enter Homo evolutis, a species probably similar to the “valids” in Andrew Niccol’s film Gattaca. Except, the valids simply had incredible intelligence, perfect vision, and strong hearts. Enriquez predicts much more for Homo evolutis: the ability to hear bats and whales talk without aid, to see in ultraviolet and infrared, and to easily outpace any of today’s fastest Olympic runners. This isn’t speculation, people. This is inevitable.

The genetically superior valids exercise in Gattaca (1997).

Niccol deals with the negative implications of human genetic engineering in Gattaca, so I won’t tread on covered ground. To me, what’s most fascinating about Enriquez’s talk is his idea that genetic engineering might actually render a new species of Hominid. Imagine, being alive to see the declaration of a new species of human. These are exciting times.

Which brings me back to Ray Kurzweil, who takes 200 vitamins a day and receives “intravenous longevity treatments” once a week. Maybe he isn’t so crazy after all. How much would you pay for a retinal implant that lets you see in the dark? Or a cochlear implant that let’s you hear a wider range of frequencies? How would you modify your daily routine if you knew that in 20 or 30 years these things will be possible?

I’ll just say that I’m having a very healthy dinner tonight of brown rice, roasted peppers, and chicken breast, and I’m quite happy about it.

Problems and Solutions

Last night, I poked around the site a bit, making some changes here and there. Thought I’d share them with you, as well as the thought processes behind some of the updates. A great way to learn is simply to look at what someone else did and why they did it.

The biggest change is the new background. I’ve been achin’ for something to replace the pale beige tile I was using since this design, Sangria, launched last June. It wasn’t that I didn’t like the pattern I’d been using; quite the contrary, I liked it very much. It had a translucent, lace-like quality that I thought suited the other subtleties of the design quite well. However, I wanted something with more of a visual punch.

Over the past few months, I tried a lot of alternatives, but nothing ever looked or felt just right. Or, at least, nothing ever looked quite as right as the old pattern did. There’s no one, perfect answer to any design problem. There are simply solutions, and then solutions that are better. The tile pattern was the best solution I had found thus far. Still, I sought something better.

Last night, inspired by this post at Web Designer Wall, I went digging through Lightroom for some photographs that might work as a background image. I really like the texture and tonal variety that a giant, photographic background can bring to a website, so I looked for photos that were abstract and kind of simple: close-ups, long exposures, that sort of thing. I didn’t want images that were very representational because they would only distract from the website itself. After digging through thousands of photographs, this is the collection I had gathered.

Continue reading this entry →

10 Film Stills from the New Teaser Trailer for Transformers: Revenge of the Fallen

The teaser trailer for Transformers: Revenge of the Fallen (2009), which premiered tonight during the Super Bowl, did not disappoint. The amazing Peter Sciretta of /Film published a poll after the Super Bowl and 58% of voters thought that the Transformers trailer was the best movie ad during the game. Star Trek currently holds second place, with 18%, while GI Joe, Land of the Lost, and Pixar’s Up fight for the rest of the pie.

Of course, I headed straight to Apple’s movie trailer website where I could watch the entire thing over and over, frame by beautiful frame. Special effects porn has never looked so good.

I grabbed 10 screenshots and uploaded them to Flickr for everyone to enjoy. I tried to choose frames with as little motion blur as I could find, plus did a little sharpening in Photoshop to enhance the images. Here’s a few of my favorites. The rest are right over here: “Transformers: Revenge of the Fallen” Stills. Make sure you check out the originals!

The movie comes out on June 26th, 2009.

Copyright © 2009 Dreamworks LLC and Paramount Pictures. All rights reserved. Hasbro, Transformers, and all related characters are trademarks of Hasbro © 2009.

The Alphabet, According to Safari

I’m a Safari user. I really can’t stand Firefox’s UI, and while its plugins supply a great deal of added functionality, I much prefer the simplicity of Safari’s Cupertino-bred interface.

Safari has gotten to know me quite well so that now, when I want to head to one of my favorite websites, I simply click inside the address bar, tap a letter, and hit “Return.” About 95% of the time it predicts exactly where I want to go.

Here, ladies and gents, is the alphabet according to Safari:

• A adampolselli.com
• B boston.com/bigpicture
• C cnn.com
• D digg.com
• E expressionengine.com
• F facebook.com
• G gmail.com
• H hulu.com
• I imdb.com
• J jasonsantamaria.com
• K kottke.org
• L login.facebook.com
• M mail.google.com
• N notcot.org
• O Nothing here that I visit often.
• P psfk.com
• Q questionablecharacters.com
• R rottentomatoes.com
• S search.twitter.com
• T thegarmentor.com
• U uncrate.com
• V veer.com
• W weather.com
• X xkcd.com
• Y youtube.com
• Z zshare.net

So what can you learn about me from this list? Probably not much that you don’t already know. I check Gmail and Facebook way too much. I enjoy streaming video and blogs about design, fashion, technology, and ideas. I seek out movie details and reviews, as well as leaked music downloads. I’m constantly debugging ExpressionEngine and wondering what kind of weather next week will bring. And, finally, I have an aversion to domain names that begin with the letter “O.”

So, what’s the alphabet according to your browser?

The Garmentor

Back in August, I blogged about a new project I was working on called The Garmentor. It took a little longer to launch than I had anticipated, but it is finally live for all to read and enjoy.

To quote the site:

The Garmentor is a weekly fashion magazine for guys that features buying guides, trend tracking, and style tips geared specifically towards today’s busy, tech-savvy men who need to get advice and make a purchase, all in one stop.

I’m a fashion buff, always interested in the latest trends and the coolest new designers, and I figured that it was about time someone created a sleek, online fashion manual for men. I love what they do over at Uncrate, but because they cover such a wide range of topics, men’s fashion never receives the attention I think it deserves.

My goal for The Garmentor is simple: to find and share the greatest men’s fashion products in a way that is accessible and fun to consume. I wanted the clothes to be the star of the magazine, so I ultimately went with a very clean design that features a white background, black text, and lots of Helvetica. I’m a perfectionist and, therefore, never quite satisfied with my work, but I think that the design will serve its purpose as The Garmentor grows into the mature publication that I hope it will become.

One of the greatest lessons I learned while creating The Garmentor is the importance of having a specific objective and never losing sight of it along the way. It is very easy to forget your original intentions when you spend weeks working on a project like The Garmentor. Oftentimes, I had to take a break and remind myself exactly what I was trying to achieve. It’s probably a good idea to write down your objective and tape it to the wall so you never lose focus and try to do too much or accomplish more than you realistically can.

Perhaps in the future I will share some of the scrapped designs for The Garmentor, but for now I fear that some will look better than the finished product. I had to throw out a great deal of ideas because they simply didn’t work for a commercial website that was going to need specific ad placements. This brings me to another lesson I learned: know your design restrictions before you start working. This is an obvious one, but it’s easy to get excited and start working on a design before you establish its requirements. I’ve also had to accept that advertisements will uglify a design, no matter how hard I try to counter it. And so it is.

I’d really appreciate it if you guys could pass The Garmentor along to your friends, family, and anyone else that you think might like it. A great deal of time, energy, blood, sweat, and tears (yes, really, tears) went into launching The Garmentor and it’d be really gratifying to reach the large audience that I think is out there for a publication like this one. Thanks, and enjoy. :)