Fork me on GitHub
#devcards
<
2015-10-09
>
wildermuthn13:10:48

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.

wildermuthn13:10:07

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

fdserr14:10:02

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

wildermuthn14:10:47

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

wildermuthn14:10:12

sorry, that’s goog.cssom

fdserr14:10:55

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

wildermuthn14:10:18

It’s pretty nice isn’t it!

wildermuthn14:10:51

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?

fdserr14:10:04

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

fdserr14:10:20

Enlive is for server side

fdserr14:10:34

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

fdserr14:10:43

I mean enlive

bhagany16:10:28

@wildermuthn @fdserr I plan on looking into kioo for this - as I understand it, it's enlive for React. https://github.com/ckirkendall/kioo

bhagany16:10:45

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

frankhale17:10:28

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?

frankhale17:10:38

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-mahood17:10:06

@frankhale: Can you post your config?

frankhale17:10:20

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

frankhale17:10:27

it all works fine doing lein figwheel

frankhale17:10:38

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

shaun-mahood17:10:06

How are you running your prod build?

frankhale17:10:14

lein cljsbuild once prod

frankhale17:10:37

I'll keep trying

shaun-mahood17:10:37

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

frankhale17:10:23

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.

frankhale17:10:38

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

frankhale17:10:24

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

frankhale17:10:39

of course running lein figwheel works

shaun-mahood17:10:04

I think you might need to add the info from here into your prod profile https://github.com/bhauman/devcards#devcards-without-figwheel

frankhale17:10:35

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

frankhale18:10:40

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

frankhale18:10:41

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

frankhale18:10:53

that is a private function in the devcards.core namespace

frankhale18:10:05

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

frankhale18:10:20

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-mahood18:10:18

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

frankhale18:10:33

cool, thanks!

frankhale18:10:10

Here is a succinct version of what I want to do: https://github.com/bhauman/devcards/issues/46

bhauman18:10:35

@frankhale: you need to require devcard.core

bhauman18:10:39

devcards.core

frankhale18:10:43

it's required 😃

frankhale18:10:07

oh you mean outside of require-macros?

bhauman18:10:39

it's in the instructions

frankhale18:10:41

okay, crap. Trying this now.

bhauman18:10:07

will have to clarify

frankhale18:10:16

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

frankhale18:10:29

my project is just a plain: lein new devcards helloworld

frankhale18:10:39

then I'm doing lein cljsbuild auto prod

frankhale18:10:26

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

bhauman18:10:19

the warning doesn't matter that is from sablono

frankhale18:10:41

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

frankhale18:10:55

eg. none of the namespaces show up

shaun-mahood18:10:34

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

frankhale18:10:07

Thanks for the confirmation @shaun-mahood

bhauman18:10:57

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

bhauman18:10:28

not the figwheel options

bhauman18:10:41

the compiler options

frankhale18:10:48

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

bhauman18:10:05

@frankhale: please read the docs

frankhale18:10:26

my god I'm sorry Bruce!

bhauman18:10:43

@frankhale: they aren't clear enough

bhauman18:10:49

they realy aren't

frankhale18:10:59

it may be that I am just a terrible reader

frankhale18:10:03

it's clearly there in the README

bhauman18:10:13

the :fighweel config isn't seen by cljsbuild

frankhale18:10:25

okay I think I've performed these steps correctly now: https://github.com/bhauman/devcards#devcards-without-figwheel but I still see just a plain devcards UI but none of the devcards in the project. I'm still plugging away at this.

bhauman18:10:43

clean the build

frankhale18:10:52

I did several times

bhauman18:10:00

thats strange

frankhale18:10:06

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

bhauman18:10:14

now check for errors in the console

bhauman18:10:32

your cards may have advanced compile errors in them

frankhale18:10:37

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

bhauman18:10:49

no errors in the jsconsole?

frankhale19:10:14

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.

bhauman19:10:58

@frankhale: I just got it to work

bhauman19:10:29

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

bhauman19:10:51

how are you viewing your index.html

frankhale19:10:18

I just got it to work, LOL!

bhauman19:10:45

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

frankhale19:10:55

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

frankhale19:10:09

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

frankhale19:10:38

thanks for the help!

frankhale19:10:09

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!

frankhale19:10:40

what I want to do ultimately is deploy these files to my http://github.io site and use it as a make shift blog

shaun-mahood19:10:20

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

frankhale19:10:56

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

frankhale19:10:10

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

shaun-mahood19:10:00

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

bhauman19:10:40

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

shaun-mahood19:10:42

@bhauman: Happy to attempt it

frankhale19:10:30

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.

frankhale19:10:55

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

frankhale19:10:24

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 http://github.io site.

frankhale20:10:33

Sample project and initial commit is here: https://github.com/frankhale/hello-devcards

frankhale21:10:44

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

shaun-mahood22:10:44

@bhauman @frankhale: Added a pull request to update readme to clarify deployment and running without figwheel https://github.com/bhauman/devcards/pull/47

fdserr22:10:58

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

fdserr22:10:31

(defcard dom-node-not-updating
  "Seems dom-node doesn't update?"
  (dom-node
    (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})

frankhale22:10:21

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

frankhale22:10:41

@fdserr: I'm trying your card now

fdserr22:10:32

Great, thx 👍

frankhale22:10:34

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

frankhale22:10:42

something else?

fdserr22:10:40

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

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

fdserr22:10:48

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

fdserr22:10:40

But it works not =[

fdserr23:10:52

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

frankhale23:10:20

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

fdserr23:10:32

np, thanks

frankhale23:10:00

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

frankhale23:10:54

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

frankhale23:10:01

it does update

frankhale23:10:46

just not with each click

fdserr23:10:56

mmmmh, no you should not have to add this

frankhale23:10:58

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

fdserr23:10:26

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

frankhale23:10:49

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

fdserr23:10:30

thank you, you helped much already 👍