Grow your CSS skills. Land your dream job.

Quotes on Design API v2.0

Published by Chris Coyier

I know at least a couple of you ended up using the original Quotes on Design API. It was kind of an experiment, but it did the trick in that it was an easy way to quickly add random design-related quotes to any site, with full CSS control.

It's major weakness was that on every single page load on every single site using it, it had to hit the database. It was a tiny and quick query, but still, not a very efficient thing to do.

I have now updated it to v2.0, which works about the same way, but is far snappier.

Changes

  • Change to ID name on wrapping div (to a more specific "qod-quotes")
  • Faster loading
  • Only changes quotes every 2 minutes

What I Did

Instead of having the JavaScript (actually PHP in disguise) hit the database every time, it simply loads the quote content from a text file. This text file's contents is overwritten by a script that reads a random quote from the database every 2 minutes (a CRON job on the server fires it off). This, I believe, is known as "ghetto caching".

Future

As I learn more about this stuff, I'd like to ultimately have some options for what it returns. JSON or XML is a strong possibility. Some pre-formatted options are also a possibility.

Using It

This is all there is to it:

<div id="qod-quote">
    ... loading ...
</div>
<script type="text/javascript" src="http://quotesondesign.com/api/api-2.0.js"></script>

Comments

  1. Haha, you totally used my line :)

  2. “ghetto caching“

    haha that’s awesome.

  3. Maybe you can improve the API ;)

    First, you use window.onload = getQuote("qod-quote"); but window.onload = function() {
    getQuote('qod-quote');
    };
    will be better for calling getQuote with an argument (or if one day you would like to call sevral functions).

    In addition using the load event is bad -I think- because the browser will wait untill all ressources will be loaded (including images), so you should try to call getQuote when the DOM is ready, Jay Salvat posted a little code for doing this (whitout using a JS library) : “When DOM is ready (fr)”

    And finally if you plan to make an API with JSONP or XML, choose JSONP because it’s lighter than XML :).

    Just my 2cents.

    • Strange, the quote seems to be loaded before the load event…

    • Part of the theory here was that I thought it would be less obtrusive to not load the quote until the page itself has been fully loaded, that way there is no way adding this will slow down your site. Is that theory sound?

    • Great, I didn’t think about that, so you’re right to use load event, sorry.

    • Hey Chris, the theory is sound, but the implementation would replace any existing “onload” events with your event. Its important to use the onload event however… I just worked on a widget project that screwed up IE6 in certain cases.

      I think I can work out a lean version for v.3.0 if you want some help. Whats the best way to send you something to look at?

  4. “Instead of having the JavaScript (actually PHP in disguise) hit the database every time, it simply loads the quote content from a text file. ”

    But you’re still hitting the server to do a file read/write. What’s the performance gain from one db call to a file read call + a file write call every 2 minutes? Do you have any before/after metrics?

  5. I don’t have any metrics other than it felt sluggish before and feels snappy now. I guess one way to remove the extra sever hit would be to actually change the JS file every two minutes to hard-code the quote into it, but I’m not sure that’s a good idea (could have caching problems).

    I don’t really know, but I suspect that reading from a text file is far faster than doing a DB query, especially one that pulls a record randomly.

    • Interesting, I would think the opposite. Seems like I read somewhere that server bottlenecks were on file reads/writes as opposed to db queries. I wouldn’t think pulling a random record would cause it to be any slower, either, assuming you’re using a standard ORDER BY RAND() and I imagine we’re talking only low hundreds of records here.

      I suppose you could set up two test pages and use PHP’s time() at the start/end, then subtract the times, but it probably doesn’t even matter.

      I think your cron job of 2 minutes is overkill, though, I’d probably do it 2x day, but that’s just me.

      For a future screencast idea, it’d be cool to see you walk through creating this API especially if you get it setup to return other data formats.

    • Jack Feefofe

      I agree about the 2x a day (or maybe 3x if you want). I think that 2 minutes is overkill, like cancel bubble said. Even if new quotes are added during the day, you already have enough quotes to be used until the next cron. Why do new quotes need to be included within 2 minutes? Just my opinion…

      The whole Quotes on Design idea, as well as the API, is a great idea!

  6. That is awewsome!

  7. Mevaser

    hi Chris, I am using IE 8, and what I get to see is my side bar going bananas, and eventually I see nothing. It keeps loading more and more and more. Who knows when it stops. But I never get to see what you are showing in IE 8

  8. Nice job this project! ;)

    @Chris
    Why not a server side script, like a web service, to serve xml,json,html and text data? So developers could get the quote by php (or other server side languages) or in javascript too with ajax and “normal” web masters/bloggers could get the quotes with the “faster apis” like the current!

    Sorry for the bad english

    Bye

    Marco

  9. Nice. :-)

    Is there are particular reason why you are not using a blockquote (with the cite attribute) instead of div’s?

  10. This is pretty slick. Is there anyway that only short(er) quotes are called? I’m using a set footer height and the long quotes are just killing me. Just askin’… :)

    BTW, Chris, you may want to do a PHP for Noobs series, even if it’s outside the CSS-Tricks topic arena, ‘cuz before long us noobs are going to have to wrestle with personal home page madness…

  11. Its helpful to developers.

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".