Don’t fight the new hotness

I’ve been making stuff with node.js almost every day for a year now, and I’ve become an unapologetic fanboy. For almost every article I read about a cool use of node, there are commenters anxious to chime in and defend their favorite language, e.g. “Java has had that capability for years” or “why does everybody think node.js is so cool? Twisted has always been non-blocking!”

It reminds me of the reactions I’ve had as a Flash/Flex developer, which was my weapon of choice for 10 years but that I have barely touched in the past 18 months. My first major annoyance was when ajax came along, because making those behind-the-scenes calls was a common technique in Flash. Then I watched embedded fonts become a big deal. And drawing with canvas. And 3D transitions. And people pondering how to make large data transfers faster and more compact (AMF is tough to beat).

But nobody really seemed to care. And now I understand why.

Behind the App: Technical Overview of DonorZon

I’m very excited to be selected as the Javascript category winner in the Hacking Education contest sponsored by DonorsChoose. I thought I’d do a quick rundown of the simple tech bits I used to make it happen.

YQL

If I’m on a project that includes an API, YQL is in the mix. Even with clean, clearly-documented APIs that return JSON, YQL has two major benefits (and lots of minor ones):
Execute
You can easily write your own Open Data Table to use with YQL- it doesn’t need to be officially accepted into the community YQL library of tables. In the “execute” block of a table, you can write server-side Javascript which runs on Yahoo’s farm of servers before returning your results to you. This is often where I’ll make multiple calls to different APIs. The front-end of my app can then just make one call and get what it needs without client-side processing.
Limiting and Filtering
I like apps that load quickly. One way to speed up data loading is to only return what you need. In the case of DonorZon, I only needed a single matching entry, and I only needed a couple of info bits about the project. You can see for yourself the difference between the amount of data that gets sent back making the standard DonorsChoose call and the call I’m pushing through YQL. I’m effectively telling YQL to send me the results as soon as it gets the first result back from DonorsChoose, and to filter out all but the few properties I need.

Kynetx

Someday I’m going to learn the ins and outs of building browser extensions. But for the next 10 years I’ll keep using Kynetx. There’s a wee bit of learning curve, but if you use their platform as a base for your bookmarklet and/or browser extension, you can then do just about everything else using jQuery, which is loaded automatically via Kynetx.

jQuery

No surprises here. Sometimes I like using the less-popular libraries and technologies to do things, but it would take a lot for me to consider a different client-side javascript library.

The data flow

The extension detects when you visit the Amazon.com search results page. We grab the query term, call DonorZon API via YQL, and inject the matching project (if there is one) at the top of the results. The only part I got a little tripped up on is that subsequent searches are done via ajax, which doesn’t trigger the extension to do its thing. So the first time the extension runs, it starts watching that form for clicks or “enter” key presses, grabs the keywords from the search box, and raises the event back up to the main search function. That’s it! If you have any suggestions for improvement or spot any glaring bugs, please drop me a line.

Zappos Wishlist Alerts

NOTICE OF RETIREMENT I can only maintain so many hacks. This one has moved along to its place in hack heaven.

This is my entry for the Zappos Developer Contest. It’s not going to win the “funny and weird” category, but maybe I can score some points for “boring but useful.”

To use the ZappAlert, you just enter your email address and Zappos.com wishlist link in this form use your imagination. Then every morning the ZappAlert minions will go check the prices for you and see how they compare to the day before. If they’re lower, you’ll get an email alert. Here are a few screenshots showing where to find your wishlist link:

Find that little tiny link on your wishlist page:



Then copy that long crazy looking link. You’ll need that when you sign up.



SIGN UP! right now!

And you could get cool email alerts like this:

*this hack is not affiliated with nor endorsed by Zappos.

Rdio.com bookmarklet powered by Kyntex and YQL

UPDATE: I won the contest! Now I don’t have to wait in line to get my new iPad2.

With 5 minutes to spare, I just submitted my entry to the Kynetx + Mashery contest.

It’s a bookmarklet that allows you to select some text on a page (e.g. an album title), and then it’ll go off and snag the top search result from Rdio, which gets displayed in a little notification window with two links for listening and full details.

Before I get into all the fine print and boring technical stuff, give it a shot. Just drag the following link to your bookmarks bar, select an album title somewhere on the internets, and click the bookmark:

Find it on Rdio

Please drop me a note with your feedback.

I didn’t find out about the contest until a few days ago. By happy chance, Rdio had just released their API via the fine folks at Mashery. I love how quick it is to sign up for new APIs once you have a Mashery account.

So here’s what’s going on behind the scenes:

- If the bookmarklet is clicked and there’s no text selected, you get a simple Javascript alert. If there is text selected,

- Kynetx triggers a call to YQL, using an Open Data Table I created for searching Rdio. I can just send my key, secret (both of which are tucked away in the Kynetx app), and search terms to YQL, and it handles all the esoteric oAuth request signing, which Rdio requires even if you’re making a call the doesn’t require authentication. YQL is also doing some nice limiting and trimming of the results (not to mention caching), so things move along as quick as possible.

- If we’ve found no results, a little notification tells you so. If we do have a result, the album art and two links are embedded in a default “notifier” box, which is one of the handy built-in Kynetx UI bits. If you click the “Listen now” link,

- Kynetx makes yet another call, this time directly to the Rdio oEmbed API to get the HTML code we need for the embedded player. The main notification disappears and a slide-on-hover sidetab appears in its place.

My original (and still on the roadmap) plan was to allow albums to be saved to a “Listen Later” playlist. Those kinds of calls require oAuth from the user. After many painful hours I managed to get all oAuth calls working individually, but ran out of time before I could stitch them into one functioning whole.

This was my first time using playing around with Kynetx. The biggest challenge for me was learning what goes where. I kept trying to write jQuery and proper Javascript right within the KRL script. Eventually I caught on to the emit directive, which is how you actually spit Javascript out to the page and do anything that you can’t accomplish with the built-in KRL methods.

Rapleaf Spreadsheet Hack

Recently I’ve been using Google Spreadsheets in some of my prototypes and hacks as an early stage database and functional (albeit not pretty) UI. They’re easy to set up, they include nice permissions and security options, they can easily be manipulated by code or manually, and they make a great go-between for YQL to pull from.

But my colleague Bill takes spreadsheets to another level. He’s not (yet) very experienced with web scripting languages, and so like any good hacker he gets things done with what he knows.

In a recent newsletter, Rapleaf shared a spreadsheet that makes use of macros to pull data from the API. It’s a nice proof of concept, but it’s Windows-only. I asked Bill if he could help me take a crack at a Google Spreadsheet version.

To make use of this, open the example spreadsheet, click “File -> Make a copy…” and save it to your own Google account.

Then enter your Rapleaf API key into the “Key” sheet. Now you can enter email addresses in the first column, wait a couple seconds, and get the inside scoop on your peeps.

The most clever part, and what makes it a true hack, is that Bill isn’t even using the API directly. Rather, he’s taking advantage of Google’s importXML function, a bit of xpath, and the fact that Rapleaf has a developer playground page.

As with all Google Spreadsheets, you’re limited to 50 function calls, which in the case means you can only have 50 email addresses in there at a time.