Fork me on GitHub

If I have a generated sequence of static image (SVG) files, what's the simplest way to make an interactive HTML page that allows me to navigate back and forth between them?


If you are serving the images to the frontend you can simply loop on the svg file names and render them like so:

(for [name ["icon1.svg" "icon2.svg"]]
  [:img {:src (str "images/" name)
         :key name}])


If you want to retain the capability to target with js your svg elements, then you have to use instead:

[:object {:data (str "images/" name)
          :key name}]


For the navigation, you can use the partition function to display say 3 at a time.. and I would store in an atom a simple int that would work basically as an offset


If you want a rough idea of what it could look like then:

(let [group-nth (atom {:offset 0})
      list-of-names (range 10)
      grouped (partition 3 list-of-names)]
  (fn []
     (for [svg-name (nth grouped (:offset @group-nth))]
       [:img {:src svg-name}])
     [:button {:on-click #(swap! group-nth update
                                 (fn [x] (if (> x 0) (dec x) x)))}]
     [:button {:on-click #(swap! group-nth update
                                 (fn [x] (if (< x (count grouped))
                                           (inc x) x)))}]]))


It should help as a guideline .. consider that the atom as to be a reagent.core/atom and the (range 10) should be replaced with the names of your svg files

Thijs Creemers08:10:40

I'm trying to set up a clojurescript project using deps.edn and shadow-cljs. I configure :dev-http {8080 "classpath:public"} but it does not start a dev http server. Do I miss something?


@thijs.creemers did you configure it at the top-level in shadow-cljs.edn? not inside a build config?

Thijs Creemers09:10:17

I did configure it in the top level.


and public is actually on the classpath? I mean you have something like :source-paths ["src/resources"] and src/resources/public?


or since you are using deps.edn :paths ["src/resources"]

Thijs Creemers09:10:33

yes it is, I tried all variants, using class path, the actual path like "resources/public/" etc.


and what does it say on startup?


there should be errors/warnings when it can't start the servers

Thijs Creemers09:10:36

It is :paths ["src/main" "resources"]

Thijs Creemers09:10:23

it starts the server and the nrepl server no further messages.

Thijs Creemers09:10:36

No further messages


how do you start it? there can't be no message, either it says that it was started or that it failed?


no message only when no config is found


I guess that could happen if you are using a really old version that didn't have :dev-http?

Thijs Creemers09:10:11

I start it with shadow-cljs server


which version doesn it print on startup?

Thijs Creemers09:10:57

2.7.24 node: v12.11.


something like shadow-cljs - server <version> ... ...


ok that seems rather old already but thats not the version that matters

Thijs Creemers09:10:20

shadow-cljs - server version: 2.7.24 running at http://localhost:9630


definitely bump that


2.8.64 is latest

Thijs Creemers09:10:19

okay I will bump it an d give it another shot. Thanks for your help.


you need to add it to deps.edn directly nowadays. so :deps {thheller/shadow-cljs {:mvn/verison "2.8.64}} or in an alias

Thijs Creemers09:10:01

I think it is on the path somewhere I have the latest in y package.json


installing the latest npm version wouldn't hurt either but thats not as important

Thijs Creemers09:10:46

Yes, it now works> Thanx


Would it be possible/a good idea to extend native JS dates to implement cljs-time’s DateTimeProtocol?


can anyone give me an example of how I can add an SVG image in Reagent? I am very new to Clojure.. so sorry about that in advance 🙂 I'm trying this right now: but, I get an error that pl.danieljanus.tagsoup is not defined


Depends what you want to do with it. If you want to use it like a static asset, you can use an img-tag


If you want any sort of animation etc, you should use hiccup


I'm already using Hiccup for the assets I generated (and I like Hiccup better than HTML now)


then you shouldn’t need that tagsoup


svg is just markup like html, so that will be processed with hiccup just fine


so I just need an img tag? coool


that’s if you want to include the svg-asset


that is the image-file


if not you can just add your hiccup [:div [:svg {}]]


that I've already done... I want to include an svg image from an .svg file as well


I think the img tag would work... I'll try that first I guess 🙂


If you're looking to inline your svg file within the DOM so you can animate it, I wrote a reagent component that does just that


If you're just looking to display an svg, this is overkill, just use [:img {:src <url>}] as suggested


if this is one time thing you can try


actually I wish I knew about this site earlier 🙂


if you are using Cursive IDE it will ask to convert HTML string into Hiccup when pasting HTML into Clojure/Script files


O.o ... I'll try it... but I'm very used to VS Code


Cursive is very nice, self contained setup, feels very solid to my taste. I’m using VS Code for other things, but Clojure is good in Cursive

Filipe Silva13:10:43

Calva, a clojure extension, works well on VSCode

Filipe Silva13:10:58

it doesn't do that conversion though

Filipe Silva13:10:20

it's mostly self contained but doesn't include a linter

Filipe Silva13:10:44

clojure-lint, based on clj-kondo, seems to be the best option there

Filipe Silva13:10:59

clj-kondo doesn't work on windows though


@UJVKWJTGE this html->hiccup conversion could be useful I think, are you still funded by clj together btw?

Filipe Silva13:10:29

I'm not part of the Calva org, just a user


ah ok, sorry 🙂

Filipe Silva13:10:01

did a quick search on the issue tracker and couldn't find any issue about the conversion though, so it might be worth it to open one

Filipe Silva13:10:21

the site you mentioned is a cljs app anyway, and seems to basically run hiccup-bridge

Filipe Silva13:10:28

so it shouldn't be too hard to do

Filipe Silva13:10:25

Calva itself is build with shadowcljs so that's easy to integrate


I'm actually using Calva... the more popular "Clojure" extension just caused the built-in git capabilities to go awry for me


Can anyone recommend a good ClojureScript tutorial? Ideally, I’d like something along the lines of “here’s the JS and now here’s how you’d do it in ClojureScript”.


Can anyone recommend a good ClojureScript tutorial? Ideally, I’d like something along the lines of “here’s the JS and now here’s how you’d do it in ClojureScript”.


I found this tutorial really helpful (I started learning Cljs on Monday):-


You have an advantage over me: you already know Javascript


Haha. Thanks!


I came here from C++/C ... but after 3 days of trying, I don't feel too intimidated


JavaScript is actually a nice language in my opinion. While its syntax is heavily C-based, it’s quite LISP-like in how it works.


That said, I avoid NPM at all costs.


I love this remark of Douglas Crockford in JavaScript: The Good Parts:


Some other comparison of React versus Reagent


This is also good, but not much javascript:


What do you want to build?


I don’t have any one thing in particular in mind. I prefer to use vanilla code rather than frameworks though.


But I’ve been wanting to learn more about Lisp’s in general and Clojure in particular lately and I thought that doing some ClojureScript might help me learn Clojure in general better.


ClojureSCript works really well with React


I mean hiccup for specifiying html and the reactive atoms that rerender the state


Framworks are always black boxes that trend toward bloat (Angular). There is always something my customer wants that the framework developers didn’t think of so inevitably I find myself working for the framework instead of it working for me. I’ve been using JavaScript since it was in beta so I know the language well enough that I don’t feel like frameworks provide me a whole lot of benefit.


> find myself working for the framework instead of it working for me I see


This experience I did not have with Reagent or re-frame


The README of re-frame I can highly recommend: One of the most enjoyable READMEs I’ve ever read


Of course you have to do things the re-frame and Reagent way, but I found it to be natural


Comparison versus cljs’s reagent and js’s react


Vue I have no experience with


Reagent sounds interesting. I’ll take a look. Despite my nay-saying about frameworks I do think they have their place. My company builds a lot of prototypes and frameworks are excellent for that kind of work.


@UPEGYT4G4 Thanks for that link! It’s turning out to be a pretty informative article.


no worries... Today is day-4 of my Clojure journey and that article introduced me to both webdev and clojure! I didn't know about React before this. I checked it out on the side... And now I'm not scared... I'm studying SVG now and drawing out a few ugly sprites in Hiccup


What’s Hiccup?


it's this language to describe your HTML in Clojure-native syntax and data structures


Oh, interesting. So in theory Hiccup makes your HTML more composable huh?


well, I'm currently doing Clojure-stuff in Hiccup e.g. moving a slider to move a line across on an svg image


and it takes up much less space 🙂


here's my masterpiece... Moving the slider moves the verticle line (up and down)


Pretty cool!


I'd like to connect all this to an actual water-tank and motor in the end and show the level etc.


and draw better SVG images (right now, the tank is 3 lines)


I really think SVG is underused. I was thinking about it last night spurred a HackerNews article I had read about how great Flash was in its heyday. Seems like SVG could be a good (and more secure) replacement. There was some wonderful creativity with Flash that you don’t see a whole lot of anymore, sadly.


hmmm... I don't exactly know what flash did, but I used to watch cricket matches on shady sites that required it


I’m thinking of before Adobe realized they could do video with Flash.


From about the late 90's to ~2004ish


that's before I got internet 😉


Is Tower library deprecated or obsolete?

André Oliveira21:10:24

Tower’s latest beta (3.1.0-beta4) is stable and quite useable in production, but is likely the last major release for the library (modulo unexpected bug fixes). Future development work is going to be focused on: Tempura - Clojure/Script translations API To be determined - Clojure/Script localization API

André Oliveira21:10:32

From the README of the project


I need a localisation and internationalisation library four Clojurescript.


tempura. It's from the author of tower. I had a nice experience with it.