Clojurians Log v2

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.

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

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

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

sorry, that’s goog.cssom

https://google.github.io/closure-library/api/namespace_goog_cssom.html

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

It’s pretty nice isn’t it!

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?

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

Enlive is for server side

ah, ok. I see there’s https://github.com/ckirkendall/enfocus too

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

I mean enlive

@wildermuthn: thankies!

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

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

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?

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?

@frankhale: Can you post your config?

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

it all works fine doing lein figwheel

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

How are you running your prod build?

lein cljsbuild once prod

I'll keep trying

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

Thanks.

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.

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

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

of course running lein figwheel works

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

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

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

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

that is a private function in the devcards.core namespace

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

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

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

cool, thanks!

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

@frankhale: you need to require devcard.core

devcards.core

it's required 😃

oh you mean outside of require-macros?

yes!!

it's in the instructions

okay, crap. Trying this now.

haha

will have to clarify

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

my project is just a plain: lein new devcards helloworld

then I'm doing lein cljsbuild auto prod

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

the warning doesn't matter that is from sablono

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

eg. none of the namespaces show up

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

Thanks for the confirmation @shaun-mahood

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

yep

not the figwheel options

the compiler options

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

@frankhale: please read the docs

my god I'm sorry Bruce!

@frankhale: they aren't clear enough

they realy aren't

it may be that I am just a terrible reader

it's clearly there in the README

the :fighweel config isn't seen by cljsbuild

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.

clean the build

I did several times

hmmmm

thats strange

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

now check for errors in the console

your cards may have advanced compile errors in them

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

no errors

no errors in the jsconsole?

nope.

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.

@frankhale: I just got it to work

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

yeah

how are you viewing your index.html

?

I just got it to work, LOL!

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

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

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

thanks for the help!

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!

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

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

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

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

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

@shaun-mahood: Thanks!!

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

@bhauman: Happy to attempt it

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.

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

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.

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

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

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

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

`

gah

(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})

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

Indeed

@fdserr: I'm trying your card now

Great, thx 👍

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

something else?

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

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

Doc is at the bottom here: http://rigsomelight.com/devcards/#!/devdemos.defcard_api

But it works not =[

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

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

np, thanks

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

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

it does update

just not with each click

mmmmh, no you should not have to add this

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

ok

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

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

thank you, you helped much already 👍