Altmetric Blog

Bake Your Own Donuts

Will Roe, 20th February 2014

The Altmetric embeddable badges are a highly configurable addition for any website with scholarly content. However, the number and combinations of configurations for the badges can be overwhelming. What do each of the badge types look like? What do they look like with details on the right? How about with the popover? I realised it would be much simpler if somebody could directly configure a badge so that they can see how each option affects the final result.

At Altmetric we have been trialling the idea of employee-driven projects on Thursday afternoons – called Hackternoons. I decided to have a go at creating an “Interactive embed” during our Hackternoons. Here is the result, a configurable, tweakable, toggle-able embed:

Here is the HTML you can put in your webpage for the above result:

We have included this DIY embedinator in our documentation pages for the embeds.

The technical stuff

I decided to try ReactJS (from Facebook) for this project because it looked useful for creating isolated components. This turned out to be a very good choice and ReactJS’s component design fits very well. There are three components that comprise the “Interactive embeds” – the form, the embed preview and the HTML code required to reproduce that embed configuration on a website. There is one state structure that all those components read from and only the form component modifies. This allows for seperation of each component, they don’t communicate with each other and don’t even need to be aware of each other.

Once I’d created a proof of concept in Javascript with ReactJS, my colleague Paul rewrote that using Om (a ClojureScript interface to ReactJS). The result is a completed version of Paul’s Om code. Using ClojureScript meant using cljsbuild‘s auto-rebuilding ability which sped up development somewhat.

ClojureScript and Om provide value on top of ReactJS that is hard to resist. First and foremost for me is having the expressive power of Clojure available (and compiling down to Javascript), e.g. being able to specify callbacks as partially applied functions. I also took advantage of ClojureScript’s inclusion of the Google Closure toolkit to use the cross-browser DOM utility functions (reminder: IE8 does not have getElementsByClassName).

The source code for these configurable badges is up on Github, called golden-kestrel.

4 Responses to “Bake Your Own Donuts”

February 28, 2014 at 12:00 am

“Bake Your Own Donuts” — using @swannodette’s Om to interactively generate @altmetric donuts by @wjlroe,

Altmetric (@altmetric)
February 28, 2014 at 12:00 am

Introducing a new way to use our embeddable badges: build (or bake) your own donuts! #altmetrics

Keita Bando (@KeitaBando)
March 3, 2014 at 12:00 am

Bake Your Own Donuts - #Altmetric

March 11, 2014 at 12:00 am

Bake Your Own Donuts via @feedly #altmetrics

Leave a Reply

Your email address will not be published. Required fields are marked *