Devcards aims to provide a visual REPL experience for ClojureScript
wildermuthn 2015-10-09T13:16:48.000078Z

Been using devcards for a week now. It’s really magnified the power of Figwheel tremendously, and in unexpected ways. I have a card that renders a modal component, and it renders the component 6 different ways with 6 different values passed into it. Styling this component became so efficient that a task I usually pass on to others became joyful.

wildermuthn 2015-10-09T13:17:07.000079Z

I ended up completing work on a css-generation module that I’d neglected for the last month.

fdserr 2015-10-09T14:46:02.000081Z

@wildermuthn: just came to ask about the css matter =] Do you just stuff your styles in resources/styles.css, or inline, or...?

wildermuthn 2015-10-09T14:46:47.000082Z

I use goog.cssom css functions to add styles to the “cssom” which I had never heard about before. So it is fake inlining, but you get the benefits

wildermuthn 2015-10-09T14:47:12.000083Z

sorry, that’s goog.cssom

fdserr 2015-10-09T14:48:55.000086Z

@wildermuthn: looks like what I need, thanks much, I would not want to screw the beautiful devcards UI 😉

wildermuthn 2015-10-09T14:49:18.000087Z

It’s pretty nice isn’t it!

wildermuthn 2015-10-09T14:49:51.000088Z

If you want to modify styles that are already in place, I think someone mentioned Enlive is a good tool for that. Have you used it?

fdserr 2015-10-09T14:51:04.000089Z

@wildermuthn: nice is one of an understatement for devcards, indeed =]

fdserr 2015-10-09T14:51:20.000090Z

Enlive is for server side

wildermuthn 2015-10-09T14:52:04.000091Z

ah, ok. I see there’s too

fdserr 2015-10-09T14:52:34.000093Z

Can't figure myself how it'd be used in devcards, but anyway I just want to safely style my content, not devcards

fdserr 2015-10-09T14:52:43.000094Z

I mean enlive

fdserr 2015-10-09T14:53:44.000095Z

@wildermuthn: thankies!

bhagany 2015-10-09T16:02:28.000096Z

@wildermuthn @fdserr I plan on looking into kioo for this - as I understand it, it's enlive for React.

bhagany 2015-10-09T16:03:45.000098Z

Also, very happy to see there's a closure thing for cssom. I'm hoping to port some code to cljs that manipulates the cssom someday. Thanks @wildermuthn

frankhale 2015-10-09T17:27:28.000099Z

I want to do a prod build of my devcards but when I do and open index.html it's always blank. Essentially what I want to do is treat devcards as a blog and just deploy it but I want to build using advanced compilation in the prod build. Anyone doing this? Is there something I'm missing? Why is my index.html not displaying my devcards?

frankhale 2015-10-09T17:32:38.000100Z

actually I don't think this will work at all, doing a build of the "devcards" profile and then just opening the cards.html also shows a blank page. Maybe it was not intended to be used in this fashion?

shaun-mahood 2015-10-09T17:34:06.000101Z

@frankhale: Can you post your config?

frankhale 2015-10-09T17:34:20.000102Z

it's just the one created from lein new devcards foo

frankhale 2015-10-09T17:34:27.000103Z

it all works fine doing lein figwheel

frankhale 2015-10-09T17:34:38.000104Z

I just want to copy the html/js/css and deploy it to a server

shaun-mahood 2015-10-09T17:35:06.000105Z

How are you running your prod build?

frankhale 2015-10-09T17:35:14.000106Z

lein cljsbuild once prod

frankhale 2015-10-09T17:35:37.000107Z

I'll keep trying

shaun-mahood 2015-10-09T17:38:37.000108Z

I'll take a look and see if I can get it working

frankhale 2015-10-09T17:39:36.000109Z


frankhale 2015-10-09T17:41:23.000110Z

essentially I just want to take everything in the resources/public folder and deploy it and then open index.html and see my devcards. Not sure why it just shows an empty page.

frankhale 2015-10-09T17:41:38.000111Z

the assets are being loaded into the browser. I must be missing something.

frankhale 2015-10-09T17:44:24.000112Z

even if I do a cljsbuild devcards and use the unoptimized code it still shows a blank page

frankhale 2015-10-09T17:44:39.000113Z

of course running lein figwheel works

shaun-mahood 2015-10-09T17:46:04.000114Z

I think you might need to add the info from here into your prod profile

frankhale 2015-10-09T17:47:35.000116Z

Thanks I'm looking now. I tried :figwheel { :devcards true } in my prod profile but I suppose that was not enough. LOL!

frankhale 2015-10-09T18:02:40.000117Z

I'm still can't get this to work.

frankhale 2015-10-09T18:07:41.000118Z

This is not reassuring me: WARNING: Use of undeclared Var devcards.core/start-devcard-ui!*

frankhale 2015-10-09T18:07:53.000119Z

that is a private function in the devcards.core namespace

frankhale 2015-10-09T18:08:05.000120Z

this is probably why start-devcard-ui! is not working

frankhale 2015-10-09T18:09:20.000121Z

I'll just file an issue on Github since I've already blown this chat up and it'd be difficult to follow exactly what I'm trying to do

shaun-mahood 2015-10-09T18:10:18.000122Z

@frankhale: If I figure it out I'll let you know, taking a look right now.

frankhale 2015-10-09T18:10:33.000123Z

cool, thanks!

frankhale 2015-10-09T18:14:10.000124Z

Here is a succinct version of what I want to do:

bhauman 2015-10-09T18:16:35.000126Z

@frankhale: you need to require devcard.core

bhauman 2015-10-09T18:16:39.000127Z


frankhale 2015-10-09T18:16:43.000128Z

it's required 😃

frankhale 2015-10-09T18:17:07.000129Z

oh you mean outside of require-macros?

bhauman 2015-10-09T18:17:30.000130Z


bhauman 2015-10-09T18:17:39.000131Z

it's in the instructions

frankhale 2015-10-09T18:17:41.000132Z

okay, crap. Trying this now.

frankhale 2015-10-09T18:17:45.000133Z


bhauman 2015-10-09T18:19:07.000134Z

will have to clarify

frankhale 2015-10-09T18:22:16.000135Z

when I require [devcards.core :as dc] I get a compiler warning WARNING: Use of undeclared Var devcards.core/string

frankhale 2015-10-09T18:22:29.000136Z

my project is just a plain: lein new devcards helloworld

frankhale 2015-10-09T18:22:39.000137Z

then I'm doing lein cljsbuild auto prod

frankhale 2015-10-09T18:23:26.000138Z

I did modify the project.clj to include main and figwheel in the prod compiler section

bhauman 2015-10-09T18:27:19.000139Z

the warning doesn't matter that is from sablono

frankhale 2015-10-09T18:28:41.000140Z

okay, that's fine. I deploy the newly compiled prod files and I see the devcards basic ui but no devcards show up.

frankhale 2015-10-09T18:28:55.000141Z

eg. none of the namespaces show up

shaun-mahood 2015-10-09T18:31:34.000142Z

@frankhale: I'm getting the same thing here.

frankhale 2015-10-09T18:32:07.000143Z

Thanks for the confirmation @shaun-mahood

bhauman 2015-10-09T18:36:57.000144Z

@frankhale: hmmm interesting and you have devcards true in the :compiler options?

frankhale 2015-10-09T18:37:27.000145Z


bhauman 2015-10-09T18:37:28.000146Z

not the figwheel options

bhauman 2015-10-09T18:37:41.000147Z

the compiler options

frankhale 2015-10-09T18:37:48.000148Z

okay maybe I misundestood: this is in my prod build: :figwheel { :devcards true }

bhauman 2015-10-09T18:38:05.000149Z

@frankhale: please read the docs

frankhale 2015-10-09T18:38:26.000150Z

my god I'm sorry Bruce!

bhauman 2015-10-09T18:38:43.000151Z

@frankhale: they aren't clear enough

bhauman 2015-10-09T18:38:49.000152Z

they realy aren't

frankhale 2015-10-09T18:38:59.000153Z

it may be that I am just a terrible reader

frankhale 2015-10-09T18:39:03.000154Z

it's clearly there in the README

bhauman 2015-10-09T18:40:13.000155Z

the :fighweel config isn't seen by cljsbuild

frankhale 2015-10-09T18:45:25.000156Z

okay I think I've performed these steps correctly now: but I still see just a plain devcards UI but none of the devcards in the project. I'm still plugging away at this.

bhauman 2015-10-09T18:45:43.000157Z

clean the build

frankhale 2015-10-09T18:45:52.000158Z

I did several times

bhauman 2015-10-09T18:45:54.000159Z


bhauman 2015-10-09T18:46:00.000160Z

thats strange

frankhale 2015-10-09T18:46:06.000161Z

I'm gonna keep plugging away, it's probably me.

bhauman 2015-10-09T18:46:14.000162Z

now check for errors in the console

bhauman 2015-10-09T18:46:32.000163Z

your cards may have advanced compile errors in them

frankhale 2015-10-09T18:50:37.000164Z

my project is just a: lein new devcards helloworld with one card

frankhale 2015-10-09T18:50:39.000165Z

no errors

bhauman 2015-10-09T18:54:49.000166Z

no errors in the jsconsole?

frankhale 2015-10-09T18:58:38.000167Z


frankhale 2015-10-09T19:00:14.000168Z

maybe it's not clear what I'm trying to do. I just want to run: lein new devcards helloworld and then deploy a production copy of the resources\public files to a server and have it run the devcards. I think I've followed the README instructions but I still see an empty devcards UI without the one devcard created using the template.

bhauman 2015-10-09T19:15:58.000169Z

@frankhale: I just got it to work

bhauman 2015-10-09T19:16:29.000170Z

so you will need to post your project. Also, you are shift reloading your browser right?

frankhale 2015-10-09T19:17:01.000171Z


bhauman 2015-10-09T19:17:51.000172Z

how are you viewing your index.html

bhauman 2015-10-09T19:17:52.000173Z


frankhale 2015-10-09T19:19:18.000174Z

I just got it to work, LOL!

bhauman 2015-10-09T19:19:45.000175Z

also when you need to make sure you are cleaning the files in target

frankhale 2015-10-09T19:19:55.000176Z

again this is a failure on my part. I failed to comprehend the README. I had :devcards true outside of the compiler section of the prod

frankhale 2015-10-09T19:20:09.000177Z

oh yeah I'm cleaning, I got that one down, haha

frankhale 2015-10-09T19:20:38.000178Z

thanks for the help!

frankhale 2015-10-09T19:21:09.000179Z

and to clarify your question about how I'm viewing the files. I copy everything out of resources\public into it's own folder and use node live-server to serve the files. I'm good to go now!

frankhale 2015-10-09T19:21:40.000180Z

what I want to do ultimately is deploy these files to my site and use it as a make shift blog

shaun-mahood 2015-10-09T19:26:20.000181Z

@frankhale: Can you put the working project up on github?

frankhale 2015-10-09T19:26:56.000182Z

yes I will do that @shaun-mahood. Thank you for your help as well!

frankhale 2015-10-09T19:27:10.000183Z

gimme a few minutes. My 3 year old wants me to make pancakes, LOL!

shaun-mahood 2015-10-09T19:28:00.000184Z

@bhauman: I'll see if I can write up some instructions on how to do this from the lein template (specifically for this use case)

bhauman 2015-10-09T19:29:09.000185Z

@shaun-mahood: Thanks!!

bhauman 2015-10-09T19:29:40.000186Z

actually if someone could clarify the devcards docs around this that would be super helpful.

shaun-mahood 2015-10-09T19:30:42.000187Z

@bhauman: Happy to attempt it

frankhale 2015-10-09T19:55:30.000188Z

The README section for using devcards without figwheel is fine I think. It was my problem that I did not thoroughly read it and put it into practice.

frankhale 2015-10-09T19:55:55.000189Z

I'm going to upload my helloworld with some instructions on how to build and deploy as if devcards is the "main app"

frankhale 2015-10-09T19:58:24.000190Z

I think it'd be helpful for a section in the README or maybe wiki that talks about deploying devcards as if it is the "main app". I can see other people wanting to use it as a sort of programmers blog application. It has the perfect format. A namespace can be treated as if it's a blog post. That's how I want to use it on my site.

frankhale 2015-10-09T20:41:33.000191Z

Sample project and initial commit is here:

frankhale 2015-10-09T21:00:44.000193Z

Thanks @bhauman and @shaun-mahood for your help! I seriously appreciate it!!!

shaun-mahood 2015-10-09T22:24:44.000195Z

@bhauman @frankhale: Added a pull request to update readme to clarify deployment and running without figwheel

fdserr 2015-10-09T22:28:58.000197Z

'nabend! Can someone please paste in this card and see if it works for her/him?

fdserr 2015-10-09T22:29:02.000198Z


fdserr 2015-10-09T22:29:09.000199Z


fdserr 2015-10-09T22:29:31.000200Z

(defcard dom-node-not-updating
  "Seems dom-node doesn't update?"
    (fn [state node]
      (set! (.-innerHTML node) (str "Click me count: " (:count @state)))
      (set! (.-onclick node) #(swap! state update-in [:count] inc))))
  {:count 0}
  {:inspect-data true
   :watch-atom true})

frankhale 2015-10-09T22:39:21.000201Z

@shaun-mahood: I just looked at your pull request. Great stuff!!! Thank you!

fdserr 2015-10-09T22:40:02.000202Z


frankhale 2015-10-09T22:41:41.000203Z

@fdserr: I'm trying your card now

fdserr 2015-10-09T22:42:32.000204Z

Great, thx 👍

frankhale 2015-10-09T22:44:34.000205Z

what namespace is dom-node defined in? Is that Om or Reagent?

frankhale 2015-10-09T22:44:42.000206Z

something else?

fdserr 2015-10-09T22:53:40.000207Z

it is in devcards, just add it to the macros list:

   [devcards.core :as dc :refer [defcard deftest dom-node
                                  defcard-doc mkdn-pprint-source]])

fdserr 2015-10-09T22:54:48.000208Z

It's use is for peeps like me who don't use react yet =]

fdserr 2015-10-09T22:56:22.000209Z

Doc is at the bottom here:!/devdemos.defcard_api

fdserr 2015-10-09T22:56:40.000210Z

But it works not =[

fdserr 2015-10-09T23:00:52.000211Z

If not working for you either @frankhale I'll file an issue.

frankhale 2015-10-09T23:14:20.000212Z

let me check, I just didn't know what namespace it was in

fdserr 2015-10-09T23:14:32.000213Z

np, thanks

frankhale 2015-10-09T23:16:00.000214Z

looks to be an issue. Here is what I see after clicking several times. Click me count: 0 { :count 40 }

frankhale 2015-10-09T23:17:54.000215Z

whoa, hold on. I needed to add (def state (atom))

frankhale 2015-10-09T23:18:01.000216Z

it does update

frankhale 2015-10-09T23:18:46.000217Z

just not with each click

fdserr 2015-10-09T23:18:56.000218Z

mmmmh, no you should not have to add this

frankhale 2015-10-09T23:18:58.000219Z

if I resave the source file I can see that my state atom is updated

frankhale 2015-10-09T23:19:07.000220Z


fdserr 2015-10-09T23:19:26.000221Z

it updates because you save or reload, it should update without

frankhale 2015-10-09T23:19:49.000222Z

no worries, I'm new to devcards so don't really know all the ins and outs yet

fdserr 2015-10-09T23:20:30.000223Z

thank you, you helped much already 👍