Clojurians Log v2

Hi, I'm trying to find a way to retrieve the string printed by the js/conlose.log to a clojurescript variable. For example, I retrieve a HTML element with canvas-elt (.getElementById js/document "svg") and I want to get the HTML string with the variable canvas-elt. Does anyone have any hint for me?

Hi, (.-outerHTML canvas-elt) should do this

Nice, it works, thank you 🙂 Is it possible to know which field/method are available on a given js object?

(js-keys canvas-elt)

nice, thank you for the sharing 🙂

Hey folks, I'm new-ish to frontend and I'm wondering if there's an idiomatic way in Re-frame/Reagent to do animated transitions between pages (secretary routes). There's sort of a two-step transition where the page 1.) goes blank, and then 2.) staggers in the elements one at a time. Example is here - click on "Get Care": https://projects.invisionapp.com/prototype/MC-Web-App-animation-ck57dkvx0008tgp01lho18cp8/play/d8eec5ea Do I need a stateful component for this? Or could I get away with just firing a "blank out the page" event and then (in setTimeout or something) a "load in page contents" event? Or something completely different?

If you use shadow-cljs framer motion is simple to use for this

look at animatePresence in framer motion. It does all what you want i think

(ns app.motion
  (:require
   [framer-motion :refer (motion AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion]
   [cljs-bean.core :refer [bean ->clj ->js]]))

(def div
  (.-div motion))

(def span
  (.-span motion))

(def li
  (.-li motion))

(def img
  (.-img motion))

(def button
  (.-button motion))

(def input
  (.-input motion))

(def textarea
  (.-textarea motion))

(def label
  (.-label motion))

(def transform #(motion/transform (->js %1) (->js %2) (->js %3)))
(def animate-presence AnimatePresence)
(def use-spring useSpring)
(def use-motion-value useMotionValue)
(def use-transform useTransform)
(def use-viewport-scroll useViewportScroll)
(def spring
  {:type :spring
   :damping 1000
   :stiffness 10700})

with somethiing like thiis you're able to do

(ns app.core
  (:require [cljs-bean.core :refer [bean ->clj ->js]]
            [re-frame.core :refer [dispatch subscribe]]
             [app.motion :as motion]
            [herb.core :refer [<class]]
(defn page
  [id content]
  [:> motion/div
    {:key (str "page" id) ; IMPORTANT UNIQUE ID 8
      :class [:page (<class styles/page)]
      :variants {:initial {:opacity 0}
                 :animate {:opacity 1}
                 :exit {:opacity 0}}
      :initial :initial
      :animate :animate
      :exit :exit
     content}])

(defn pages
  []
  (let [page @(subscribe [:page/current])]
    [:> motion/animate-presence
      (case page
        :page-1 [page :page-1 [page1]]
        :page-2 [page :page- ...]
        ...)]))

Hey!

I've been looking at Fulcro recently and I've somehow "rediscovered" full stack. Until now, full stack for me was always reagent and for example Liberator on backend. However, it really feels unnecessary to create full-blown REST API only to talk with UI which are both versioned together and developed together. Are there any interesting approaches to frontend-backend communication in reagent (+ possibly re-frame) stack? I don't have any experience with GraphQL, maybe it's what I am looking for?

may be look at #pathom ?

graphQL is good if you have multiple front-ends (e.g. a web app and a mobile app, or multiple web apps) that you want to serve from one service

so sort of the opposite of what you’re thinking of; GraphQL is possibly more general than REST

OK.

Pathom is used in Fulcro. But I haven't seen it used together with reagent.

it can be used without fulcro

and i find it really interesting and useful

Do you have any examples somewhere? I'd love to have a look.

did you look at the docs ? https://wilkerlucio.github.io/pathom/v2/pathom/2.2.0/introduction.html

I recently reviewed the docs, and they do not go into front-end usage at all

there’s a lot of information about how to build a parser and query it, but I would expect that to be done on the back-end. there’s no information about patterns or libraries that you can use to e.g. query, cache and re-render a component on the front-end

I expect this is because Fulcro currently handles that

framer-motion looks really promising. Thank you!

Yeah, it might be that the answer to my question is just fulcro. 🙂

wait a sec, is this not open source? I don't really have time to jump through procurement hoops for this project unfortunately. 😞