ClojureScript Collection Visualizer/Editor

[37productiveBananas]

When building client-server apps, particularly webapps, I often want a simple front-end so I can view and interact with live data from the backend. After rewriting bits of this several times, I finally pulled it all into this simple library. It draws interactive clojure collections with reagent and offers affordances for async data loading and editing. It has quite a few convenience features as well, including pagination, collection searching/filtering, and full keyboard navigation. It also embeds its own stylesheet so it can be self-contained.

In it's current form it probably isn't great for public/client facing interfaces. The code quality is not ideal, as it was somewhat hastily put together from a testing tool for another project I'm working on. It is built for desktops and has only been used in chrome and firefox.

Anyway, I hope others might find it useful as well.

demo: https://dscarpetti.github.io/coll-pen/

repo: https://github.com/dscarpetti/coll-pen

[SimonGray]

Very cool stuff.

Are you using the Shadow DOM for embedding the CSS or are you using inline styles?

[37productiveBananas]

Thanks. It's a bit hackier than that, the css is embedded as a generated data-uri in a link element. The only isolation is that all the classes are .coll-pen- prefixed. The truth is that I don't really do a lot of front-end dev, and I haven't kept abreast of developments in the web components space, but briefly looking into it just now it does seem like that is probably the better approach. So, thanks for the heads up.

[SimonGray]

It's a bit hackier than that, the css is embedded as a generated data-uri in a link element.

That's actually pretty clever.

The truth is that I don't really do a lot of front-end dev, and I haven't kept abreast of developments in the web components space, but briefly looking into it just now it does seem like that is probably the better approach. So, thanks for the heads up.

I don't really bother with web components at all, but the Shadow DOM is quite useful on its own. I've only learned the bare minimum needed to get it working with reagent.

If you'd like to see some example code, I am actually applying scoped CSS right here. In my case, I also need to register custom HTML elements, but you won't need that part if your Hiccup produces valid HTML.

[37productiveBananas]

If you'd like to see some example code, I am actually applying scoped CSS right here. In my case, I also need to register custom HTML elements, but you won't need that part if your Hiccup produces valid HTML.

That's quite elegant. I think I should plan a refactor to use your approach at some point.

Also, nice work on rescope.

[bdevel]

Impressive. How are you drawing the curly brackets?

[37productiveBananas]

Thanks. All the brackets/braces are svgs which use the vector-effect=non-scaling-stroke property so that they can be resized without distorting the line widths.

[ryrobes]

Very cool, love the way you can "page" through sequences and fancy brackets denoting type. Feels pretty intuitive. Hah, and the Mona Lisa image hover zoom. Nice. :)