Skull Counter using API

Display number of skulls for any project on an external website.

Similar projects worth following
For those who have external pages for a project and want to show off how many skulls they have, this little snippet of javascript and php will make that happen. A link to the code on github is below, here is a link to a working example: (scroll all the way to the bottom)

This code can be used for more than skulls with a few mods you could pull in any info you want. I really threw this together tonight just to test out the new API:

disclaimer: I am a self taught web design hack, use my code at your own risk. Any suggestions for improving this would be appreciated.

One of the cool things (I think) about this counter is that it's a "considerate" counter. By that I mean that it doesn't query the API every time someone visits the page, it caches the skull count in a csv file. It uses the cached value unless a set period of time passes by, only then will it get a fresh value.

  • Increased cache time

    Alex Rich06/29/2015 at 02:08 0 comments

    OK last month I hit the api over 30k times and tripped the monthly limit. Instead of refreshing every 30 seconds had to change it to 120. I thought 30s would be fine because it only refreshed when someone was on the page, and i had around 3k visits last month, visit duration avg wasn't more than a couple minutes so it shouldn't have been more than like 12k api queries. Not sure if bots caused the issue or what, but to be safe I increased the refresh time to 120s so it won't go over 21600 api queries.

  • Added a timer

    Alex Rich05/07/2015 at 00:44 0 comments

    Ok, I initially had this setup so the skull counter would only refresh its value on page load. After thinking about it I realized most people will expect to see this timer update without a page refresh so I decided to implement an ajax timer. First I use the jquery document ready shorthand to load a function called getskulls:

    $(function() {
      }); // end $(

    then I made a getskulls function with a timer at the end that calls itself every 10 seconds.
    function getskulls() {
        $.get("skullcount/return_skulls.php", function(result) {
          $('#skullcounter span').html(result);
        }) // end $.get(
        .done(function() { // chain this to the end of the $.get( function to restart the getskulls function on a timer
          setTimeout(getskulls, 10000); // refresh value every 10 seconds
        }); // end .done(
      } // end getskulls()
    this function makes a get request to my php file which handles the API calls. I have the php file set to only make API requests for "fresh" skull counts every 30 seconds, otherwise it uses a cached value. This is to handle a situation where the site gets a spike in views and say 20 people are viewing the page at one time. In this instance, the skull value will be pulled from the API and cached every 30 seconds and each viewer will have the most up to date skull count within 10 seconds of the cache being updated. I confused myself when choosing these timer values, someone tell me if that makes any sense.

View all 2 project logs

Enjoy this project?



TCYRUS wrote 07/23/2015 at 15:47 point

  Are you sure? yes | no

Mike Szczys wrote 05/29/2015 at 19:48 point

This is fantastic!

  Are you sure? yes | no

Alex Rich wrote 05/29/2015 at 19:50 point

Thanks Mike, it works if you skull Stickvise you can see it at work!

  Are you sure? yes | no

Mike Szczys wrote 05/29/2015 at 19:54 point

Sadly, I skulled stickvise already.

  Are you sure? yes | no

Alex Rich wrote 05/29/2015 at 19:55 point

haha - are you working on a post about the API?

  Are you sure? yes | no

davedarko wrote 05/06/2015 at 06:11 point

are you updating the picture on every skull? :) I like the caching part to take the load off, but in most cases the diy guy page server will be weaker than the server, or not? 

  Are you sure? yes | no

Alex Rich wrote 05/06/2015 at 12:06 point

@davedarko So my code doesn't know when a skull occurs on HaD, it just has to blindly poll the API every time a page loads and update the counter.   This is why I setup the cache because a spike in site traffic could cause my api key to get flagged for overlimit (I assume).   I can probably set the cache expiration closer to 5 seconds instead of 120, it would probably be fine.

For an iOT device that lights up when you get a skull, you would always want it to be checking on a timer, maybe the devs could advise you on how often you should poll the API for things that require timer.  If 10 people with an esp8266 set up 1 second timed api request, suddenly you're overlimit.

As I think you said, it would be great if the API could push select data like skulls to my server when a skull occurs on Hackaday.  This would minimize traffic back and forth and I would always have an accurate skullcount stored locally.

  Are you sure? yes | no

davedarko wrote 05/06/2015 at 12:17 point

I would have checked every 30 minutes so that wouldn't be the problem. Storing it gives you the advantage to check it against something and decide on an action. 

  Are you sure? yes | no

Alex Rich wrote 05/06/2015 at 12:16 point

and yes I am going to update the gallery pic every time my counter increments.  it will be a game.

  Are you sure? yes | no

davedarko wrote 05/06/2015 at 12:18 point

someday your api will do the updates for you ;)

  Are you sure? yes | no

Alex Rich wrote 05/06/2015 at 12:20 point

you're right, I forgot that might actually be possible now.  that would be a good trick.

  Are you sure? yes | no

Richard Hogben wrote 05/05/2015 at 18:19 point


  Are you sure? yes | no

Alex Rich wrote 05/05/2015 at 18:45 point

Thanks, I might try to make some other similar widgets with the API soon, stay tuned.

  Are you sure? yes | no


[this comment has been deleted]

Alex Rich wrote 05/05/2015 at 11:58 point

thanks! easy crowd pleaser

  Are you sure? yes | no

Edison Chen wrote 05/05/2015 at 06:32 point

Really cool! like this idea

  Are you sure? yes | no

Alex Rich wrote 05/05/2015 at 10:51 point


  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates