Quotes on Design API v3.0 (+ Widgets!)

Back in the sad ol’ days of the v1.0 API, everytime any site using it loaded the script, a database call was made to pull a fresh quote from the Quotes on Design archives. It worked, but it was slow and clearly not going to scale well.

Version 2.0 was put together to solve those problems. A CRON job was used to run one DB query every 10 minutes and write the quote and markup to a .TXT file. Then when the script was called, it just read the content of that file and used that to work the magic. It actually worked great. I learned that this technique is referred to as “Ghetto Caching” which I love.

But 2.0 was limited in a number of ways, hence we bring you version 3.0! Credit where credit is due, Doug Neiner spearheaded this project. As with everything Doug does, he did a great job with all of it. </megapraise>

What does it do?

It inserts random quotes from Quotes on Design onto any website. It’s also a JSON file, for use in more advanced scenarios.

Different Strokes for Different Folks

To use the API at its simplest, you can just copy and paste some code. For slightly more advanced use, you can add parameters to the end of the JavaScript URL to do more advanced things like specify the ID of the element to append to, or use a custom formatting function. For the pros, there is a JSON file you can access directly and use however you might want to use that data.

See the documentation for information on all these cases.

How does it work?

Fundamentally it’s similar to version 2.0. A CRON job runs (shell script) on the server every 10 minutes. Only instead of writing a TXT file, it creates the JSON file. The JavaScript file that you reference to use the API is really PHP in disguise. Unlike the previous version where we needed PHP to read in the text file, we don’t really need it here since the file is already in JavaScript-usable JSON format. However, since we are allowing parameters to be passed to the JavaScript, we need PHP to read in those parameters and act accordingly.

The JavaScript has all the quote information it needs. It attaches an onload event to the window and when that fires it formats the quote into HTML and pops it into the element on the page with the ID(s) specified.

Sound complicated? I guess it kinda is. There are a lot of different technologies at work here all coming together to ultimately make things simple for people using it. It’s really pretty beautiful looking at all of it together.

Can we see it?

Keep an eye on Fuel Your Coding where eventually Doug is going to talk about the considerations of building a JSON API like this and will probably reference this at least somewhat during it.

Oh, and a widget!

If you are an OS X user, there is now a Dashboard Widget for you! On that widgets page, you’ll find a link to download it as well as a link to Github where the project is hosted (and open sourced!)

It looks cool there but even more lovely on the faded gray of the dashboard. It’s really quite sweet. Again, Doug did an awesome job translating the design of the site into a widget. Windows folks, sorry this is OS X only for now, but remember there is a JSON file out there which surely other widgets may be built.

Do share

If you use the API for a site or a widget or anything else, do share by commenting here or sending in an message. It’ll be fun to see how this might be used. And if you have some great quotes to share, send them in (click the Got One? link). Getting near 500 now!