Fork me on GitHub
#clojurescript
<
2019-10-17
>
yuhan07:10:20

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?

Lu08:10:55

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}])

Lu08:10:22

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}]

Lu08:10:37

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

Lu08:10:36

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 []
    [:div
     (for [svg-name (nth grouped (:offset @group-nth))]
       [:img {:src svg-name}])
     [:button {:on-click #(swap! group-nth update
                                 :offset
                                 (fn [x] (if (> x 0) (dec x) x)))}]
     [:button {:on-click #(swap! group-nth update
                                 :offset
                                 (fn [x] (if (< x (count grouped))
                                           (inc x) x)))}]]))

Lu08:10:23

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?

thheller08:10:25

@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.

thheller09:10:26

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

thheller09:10:24

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.

thheller09:10:11

and what does it say on startup?

thheller09:10:24

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

thheller09:10:55

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

thheller09:10:08

no message only when no config is found

thheller09:10:27

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

thheller09:10:36

which version doesn it print on startup?

Thijs Creemers09:10:57

2.7.24 node: v12.11.

thheller09:10:03

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

thheller09:10:18

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

thheller09:10:29

definitely bump that

thheller09:10:54

2.8.64 is latest

Thijs Creemers09:10:19

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

thheller09:10:54

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

thheller09:10:41

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

Thijs Creemers09:10:46

Yes, it now works> Thanx

👍 4
martinklepsch11:10:57

Would it be possible/a good idea to extend native JS dates to implement cljs-time’s DateTimeProtocol? https://github.com/andrewmcveigh/cljs-time/blob/v0.5.2/src/cljs_time/core.cljs#L104

sysarcher11:10:16

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: https://www.mattgreer.org/articles/embedding-svg-into-a-reagent-component/ but, I get an error that pl.danieljanus.tagsoup is not defined

hkjels12:10:27

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

hkjels12:10:58

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

sysarcher12:10:34

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

hkjels12:10:34

then you shouldn’t need that tagsoup

hkjels12:10:09

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

sysarcher12:10:20

so I just need an img tag? coool

hkjels12:10:42

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

hkjels12:10:49

that is the image-file

hkjels12:10:23

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

sysarcher12:10:13

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

sysarcher12:10:03

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

👍 4
benzap14:10:50

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 https://github.com/district0x/ethlance/blob/newlance/src/ethlance/ui/component/inline_svg.cljs

benzap14:10:24

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

Roman Liutikov11:10:43

if this is one time thing you can try https://htmltohiccup.herokuapp.com/

👍 8
sysarcher12:10:39

actually I wish I knew about this site earlier 🙂

Roman Liutikov12:10:40

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

sysarcher13:10:18

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

Roman Liutikov13:10:29

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

👍 4
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

Roman Liutikov13:10:59

@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

Roman Liutikov13:10:57

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

sysarcher14:10:21

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

Darrell15:10:08

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”.

sysarcher16:10:22

I found this tutorial really helpful (I started learning Cljs on Monday):- https://dev.to/kendru/why-clojurescript-matters-227f

sysarcher16:10:57

You have an advantage over me: you already know Javascript

Darrell16:10:47

Haha. Thanks!

sysarcher16:10:05

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

👍 4
Darrell16:10:27

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.

Darrell16:10:34

That said, I avoid NPM at all costs.

erwinrooijakkers16:10:40

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

erwinrooijakkers16:10:30

Some other comparison of React versus Reagent

erwinrooijakkers16:10:35

This is also good, but not much javascript: https://youtu.be/R07s6JpJICo

erwinrooijakkers16:10:37

What do you want to build?

Darrell16:10:15

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

Darrell16:10:17

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.

erwinrooijakkers16:10:14

ClojureSCript works really well with React

erwinrooijakkers16:10:58

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

Darrell16:10:03

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.

erwinrooijakkers08:10:59

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

erwinrooijakkers08:10:09

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

erwinrooijakkers08:10:41

The README of re-frame I can highly recommend: https://github.com/day8/re-frame. One of the most enjoyable READMEs I’ve ever read

erwinrooijakkers09:10:25

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

erwinrooijakkers09:10:40

Comparison versus cljs’s reagent and js’s react

erwinrooijakkers09:10:47

Vue I have no experience with

Darrell14:10:41

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.

Darrell14:10:54

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

sysarcher14:10:34

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

Darrell14:10:57

What’s Hiccup?

sysarcher14:10:43

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

Darrell14:10:55

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

sysarcher14:10:13

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

sysarcher14:10:15

and it takes up much less space 🙂

sysarcher14:10:09

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

Darrell14:10:53

Pretty cool!

sysarcher14:10:00

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

sysarcher14:10:50

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

Darrell14:10:53

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.

sysarcher14:10:19

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

Darrell14:10:29

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

Darrell14:10:48

From about the late 90's to ~2004ish

sysarcher14:10:00

that's before I got internet 😉

scknkkrer20:10:03

Is Tower library deprecated or obsolete?

d21: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

d21:10:32

From the README of the project

scknkkrer20:10:57

I need a localisation and internationalisation library four Clojurescript.

p-himik06:10:37

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