Fork me on GitHub

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)

👍 4

nice, thank you for the sharing 🙂

👍 4

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": 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?


(ns app.motion
   [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

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


framer-motion looks really promising. Thank you!


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


Well, anyway I'm having a decent amount of luck with react-reveal. It's surprisingly easy. Framer looks cool regardless, thanks for the link!


Framer motion is open source ! But framer is a another tool from the same company


i think you should go directly with framer motion as it is a breeze to use and so powerful


huh. I wonder how I failed to find this. Error exists between keyboard and chair, apparently. 😛 Thanks a ton!!


I will definitely give Motion a shot, it's definitely more expressive than what I'm hacking on currently.


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


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


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.


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


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


May be i am missing something here but for me it is just a data provider. So you should be able to insert the library you need to get the data from the server in each resolver ?


for large applications I want something like Apollo GraphQL or Relay, to handle sharing and subscribing to queries across components


so the server uses pathom, and the client uses something else to interface with pathom and intelligently cache

👍 4