A while back I put together a little graphics package written in Racket for generating identicons. This summer someone at work stumbled across it and asked if I could generate some of those identicons in the browser. I decided to give it a shot and whipped up a small subset of the original package in ClojureScript: identikon-cljs

Usage

You can see the compiled JavaScript in action at https://pool-chatter.gomix.me/

To get an interactive development environment run:

lein figwheel

and open your browser at localhost:3449. This will auto compile and send all changes to the browser without the need to reload. After the compilation process is complete, you will get a Browser Connected REPL. An easy way to try it is:

(require '[identikon-cljs.core :as identikon] :reload)
(identikon/make-identikon "#idk0" 200 200 "identikon")

and you should see an identikon appear in the browser window:

From JavaScript you can import /resources/public/js/compiled/identikon_cljs.js and then use it like so:

identikon_cljs.core.make_identikon("#idk0", 300, 300, "identikon");
identikon_cljs.core.make_identikon("p.idkp", 60, 60, "small identikons");

Rationale

Since the original package was written in Racket it made a lot of sense to use a Lisp for the browser version as well. The only real player in this space at the moment is ClojureScript, which I’ve used before on other projects. The downside to ClojureScript is it brings along a largish compiled runtime and I wanted to keep this as small as I could. The Google Closure compiler does a great job with dead code elimination, but the runtime still incurs a hit, so I decided to do away with SVG rendering libs and generate elements on my own using Hiccups. I also needed to generate SHA-1 hashes of input strings, so I leaned on cljs-hash. Finally I needed to manipulate HSB and Hex colors so I included the excellent color library.

All in all it was fun to port Racket over to ClojureScript and also re-think a few things in the process.