This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-02-26
Channels
- # asami (5)
- # babashka (9)
- # beginners (19)
- # calva (14)
- # cider (13)
- # clj-kondo (9)
- # cljfx (2)
- # clojure (51)
- # clojure-bay-area (1)
- # clojure-europe (26)
- # clojurescript (23)
- # code-reviews (7)
- # core-async (1)
- # datahike (4)
- # datalevin (3)
- # emacs (2)
- # kaocha (2)
- # malli (6)
- # nrepl (3)
- # polylith (3)
- # re-frame (15)
- # reveal (1)
- # shadow-cljs (13)
- # tools-deps (6)
Hi, Is there a tutorial/article to create PWAs in cljs? I don't want to write service-workers in js. (I have been using shadow-cljs and reagent-frontend, have created a web app, now looking ways to make it pwa.. but I can restart from scratch) Thanks
It's a bit old but covers some of the basics https://github.com/eccentric-j/arrive/tree/master/frontend/pwa
I notice when running tests in the browser that if I screw up the way I write my async tests, it often is a confusing experience. e.g. the tests never complete after an async tests I never call done. or if I kick off some async operation, it can often lead to unrelated tests failing later
I'm curious if other people have discovered ways to ameliorate these issues. I have less trouble with it than others on my team because over the years I've learned the rules, but onboarding and ongoing maintenance is painful
I saw below code in reagent project io , why do we need to define #(delete id) using anonymous function , I meant we can define as (delete id) right?
(defn todo-item []
(let [editing (r/atom false)]
(fn [{:keys [id done title]}]
[:li {:class (str (if done "completed ")
(if @editing "editing"))}
[:div.view
[:input.toggle {:type "checkbox" :checked done
:on-change #(toggle id)}]
[:label {:on-double-click #(reset! editing true)} title]
[:button.destroy {:on-click #(delete id)}]]
(when @editing
[todo-edit {:class "edit" :title title
:on-save #(save id %)
:on-stop #(reset! editing false)}])])))It is because you want to associate an action with the :on-click handler. And #(delete id) is a function, while (delete id) is not (it's probably nil with the side effect of deleting the id.
It's a common gotcha for reagent, because sometimes even (delete id) seems to be working. The difference is that if you write (delete id) that will be called every time the inner function is evaluated (as it's just a form, which is evaluated using Clojure's usual evaluation rules), while you want the specific code to be executed only when the destroy button is clicked.
Thanks for the response, But I did not get the second part, Can yo elaborate more please?
Sure, I meant this: when you evaluate (foo (bar baz)), Clojure evaluates the call to (bar baz) first, and then the call to foo . That happens because, when you evaluate a form, inner forms are evaluated first.
So when you evaluate {:on-click (delete id)} the first thing which is called is (delete id) , independently from the button click.
when you evaluate {:on-click #(delete id)} instead, the #(delete id) part is evaluated to a function, and that is associated to the :on-click handler. Is this more clear?
tl:dr: (delete id) is not a function, #(delete id), which stands for (fn [event] (delete id)) is, and you have to provide a function for :on-click
yes, you want to just create the recipe using #(delete id) , and evaluate it only when the button is clicked
so if we do not define as anonymous function will run on page load, (no need to call button-click)
to be pedantic, it wouldn't run on page load, but whenever the enclosing (fn [{:keys [id done title]}]... runs
Jo I'm new to js and cljs and I like to make an animation where some some elements burst from a spot and move over the screen (I'm thinking a bit like a particle system from a game engine) for now just moving some image on the screen would be nice do you have ideas how I start having something?