Spiffy!

Short version: if you enjoyed a post and don’t want to comment, click the Spiffy Button to let me know.

Feedback from people on the internet is hard; I can monitor hits and visits and bounces and loading times until the heat death of the universe and I still wouldn’t know whether the people visiting my site enjoy my content. Comments are often cited as a good indicator of blog interaction, some would say that a blog starts when its comments do, but especially with anime blogs (which I guess given the volume of content on the subject I’ve produced, mine falls into) comments tend to be about the subject (episode, series, movie etc.) rather than about what has been written. Just check out any well frequented anime blog (RandomC, The Cart Driver, Metanorn et. al.) for examples.

That’s not a negative, but it does favour popularity and quantity which could go some way to explaining episodic blog’s persistence - where better to discuss the latest episode than with other people in the same place? My content will never be popular or able to foster that kind of community, however the people that do read it - who I often talk to outside of this site - I know are often somewhat like me and favour silence. Sometimes you just don’t have anything to say which is why I’ve introduced The Spiffy Button to chaostangent.com.

It lives at the bottom of posts and is aimed at visitors who don’t want to comment but still want to let me know they enjoyed, thought about, agreed with or at least skimmed over what they read. It’s almost entirely anonymous, it doesn’t integrate with any social media malarkey and all it does is make a counter click up on my blog dashboard. It certainly isn’t a panacea for blog feedback, but it is another way to interact with a largely static site.

Background

If you haven’t ever visited Dustin Curtis’ site, then it’s unlikely you’ll have seen the “Kudos” button on each of his posts. It’s a fabulous bit of UI that, functionally at least, does exactly the same as my Spiffy Button. For a while at least it was executed almost identically as well. The act of hovering over an element seemed far more alluring than clicking on it; in practice though I couldn’t pull off the simplicity without wholesale ripping off the effect (see also OpenKudos).

With the idea still percolating, by accident (blame Tumblr) I came across a small sprite of Yoko from Gurren Lagann jumping with pixel-art glee. I figured I could do something with that animation - still keeping the hover interaction - but injecting something more than just a flat widget. This idea evolved into using a different character, specifically Makoto from BlazBlue who, true to this blog’s tag line, is more squirrel than sense.

The prototype for this system almost went to production until I baulked at the last moment with regards an artworked UI element mixed in with otherwise simple ones. In short: it didn’t fit. I attempted a quick fix with the “ct” marque that I’ve used elsewhere but was largely demoralised from spending a not insignificant amount of time on a feature I was unhappy with. I eventually removed the visual code but left the other functional code in, mothballed for over five months. When I came back to it, the first thing I did was sketch out some possible style replacements for it.

After some quick prototyping, I gave up on the hover to interact idea and switched back to tried and tested clicks. Thus the version you see now was put in place.

Technically

The initial, sprite based version of the kudos client side script used a pseudo state machine to animate between several different states. The initial “warm up” frames, the “hold” frame while a user held their mouse over the element, then the “success” frames that completed the animation. This was all rolled into a jQuery plugin and despite some fiddling in working out individual frame sizes on a sprite sheet, it for the most part worked.

The second version used CSS transitions to “spin” the logo and some JavaScript to work out when the transition had finished to trigger the relevant, element specific events. This allowed the CSS to control the “hold” length and not be passed or hardcoded into the script.

The production version uses clicks rather than hovers and does other mundane things like AJAX fetching the kudos count so I don’t have to re-key my caching system as well as a few other bits and bobs like localStorage caching of “spiffied” posts. Behind the scenes the system is still called “kudos”, primarily because I’m fairly sure “spiffy” is singular with no plural form.

Respond to “Spiffy!”

Community rules:

  1. Keep it civil: no personal attacks, slurs, harassment, hate speech, or threats
  2. No spam: includes marketing, pyramid schemes, scams etc.
  3. Notify of any spoilers: even if it's for something the post isn't about
  4. Your response may be edited or removed: if your response was in good faith, you may be contacted via email explaining why

Your address will never be shared

The following HTML tags are allowed: <b> <strong> <i> <em> <a href>