Grow your CSS skills. Land your dream job.

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

Published by Chris Coyier

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!

Comments

  1. Permalink to comment#

    Good to see this.

  2. Wow! this is handy… thanks

  3. Tracy
    Permalink to comment#

    Chris, this is great! How do you ever find the time to have so many projects?

  4. Thanks Doug and Chris. I have always loved Quotes on Design and this new API will make it easier than ever for people like me to share.

    PS. A feed for new quotes would be sweet as well!

  5. Permalink to comment#

    While I appreciate all of the work, and I do currently use the version 2 on the homepage of my website. I have recently considered removing it due to some of the content.

    90% of the quotes are great and very relevant. The other 10% I do not think send the correct message to my clientele.

    ie.

    I rarely agree with what my clients ask me to do
    (while true.. I do not know if it sends the right message)

    Anyone who see and paints the sky green and fields blue ought to be sterilized ~adolf hitler
    (while a poignant comment do I really want quotes from the world biggest mass murder on my site?)

    I guess in short please be very careful when vetting the content for this site. I work with quote a few very conservative people and work pretty hard to keep from offending them..

    Kevin

  6. Permalink to comment#

    I really like the idea of this, from reading the comment from Kevin Mist though, i’m just wondering if certain keywords maybe or is there someway of only allowing certain kinds. Im going to guess there isn’t but any tips would be great!

    Thanks Chris, nice find

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".