devcards

Devcards aims to provide a visual REPL experience for ClojureScript https://github.com/bhauman/devcards
meow 2015-09-21T13:46:50.000090Z

(defn dragon-sequence
  "Returns a lazy sequence of vectors."
  []
  (let [axiom [:F :x]
        rules {:x [:x :+ :y :F :+]
               :y [:- :F :x :- :y]}]
    (basic-system axiom rules)))

(def dragon-render-rules {:F [:fwd 20]
                          :+ [:right 90]
                          :- [:left 90]
                          \[ [:save]
                          \] [:restore]
                          :x []
                          :y []})

meow 2015-09-21T13:48:37.000091Z

(defn show-x4! []
  (let [canvas (goog.dom/getElement "canvas-x4")
        context (.getContext canvas "2d")
        dragon (concat [:save] (nth (get-in @app-state [:dragon]) 10) [:restore])
        x4 (concat [:color-index 0]
                   dragon
                   [:right 90 :color-index 1]
                   dragon
                   [:right 90 :color-index 2]
                   dragon
                   [:right 90 :color-index 5]
                   dragon
                   )]
    (turtle/draw! (trc/->canvas context) x4 [900 900])))

2015-09-21T13:52:17.000093Z

just got rendering of graphs in my devcards: https://www.dropbox.com/s/7pgn93fy4jr58z2/Screenshot%202015-09-21%2015.50.37.png?dl=0

2015-09-21T13:53:03.000094Z

using https://github.com/cpettitt/dagre-d3

meow 2015-09-21T14:08:45.000096Z

@darwin: that looks sweet!

meow 2015-09-21T14:10:01.000097Z

I still need to create a proper React component for a canvas in devcards.

meow 2015-09-21T14:10:24.000098Z

What I have now is just a total hack.

2015-09-21T14:11:33.000099Z

@meow: thanks, canvas should be pretty straightforward, I think, I use reagent, it gives me access to react lifecycle functions, so I can render graphs using some non-react js-library (d3)

2015-09-21T14:11:40.000100Z

renders as svg

2015-09-21T14:12:29.000101Z

also working on this: https://www.dropbox.com/s/0mte4cfz9d6p0lc/Screenshot%202015-09-21%2016.10.01.png?dl=0, to visualize how tools.reader with postprocessing parsed given source file

meow 2015-09-21T14:30:04.000102Z

@darwin: Wow. Great stuff. Makes it so much easier when you can visualize stuff in living color, right? Very nice.

meow 2015-09-21T14:30:41.000103Z

I agree that canvas should be easy, but nobody has done it from what I can find.

2015-09-21T14:31:39.000104Z

@meow: and I have also tooltips and can encode some stuff into DOM, so I can easily inspect my nested data structures using devtools via “inspect element” :simple_smile:

meow 2015-09-21T14:36:09.000105Z

@darwin: no matter what becomes of plastic, it seems like you are developing some awesome capabilities with the work you are doing.

2015-09-21T14:36:18.000106Z

@meow: that last devcard with parsed data is quite handy, it is not obvious from the screenshot, but it is an overlay on top of original plain source code with some opacity, so I can immediately spot inconsistencies: https://www.dropbox.com/s/wjrqg4e9acc9rjd/Screenshot%202015-09-21%2016.34.54.png?dl=0

👍 1
meow 2015-09-21T14:38:38.000108Z

@darwin: now that's clever! :simple_smile:

2015-09-21T15:16:20.000109Z

@meow: FYI, just hit https://github.com/bhauman/devcards/issues/35, relevant to your recent PR

2015-09-21T15:20:12.000111Z

have to go...

bhauman 2015-09-21T17:24:02.000114Z

you guys !!!! this is awesome.

meow 2015-09-21T17:51:05.000116Z

@bhauman: :simple_smile:

bhauman 2015-09-21T18:00:19.000117Z

@darwin can I post you devcards pngs on twitter? "Devcards in the wild"

meow 2015-09-21T18:00:58.000118Z

@darwin: thanks for the bug report on devcards - I responded there.

bhauman 2015-09-21T18:03:01.000119Z

@meow: love the fractals man

👀 2
meow 2015-09-21T18:03:46.000120Z

@bhauman: I've got on my todo list to set up my github so that I can "publish" my devcards - not sure how much time/effort that represents

meow 2015-09-21T18:05:16.000121Z

I'm assuming that part of your project.clj file for devcards does this already for the cards you have at http://rigsomelight.com/devcards/#!/

meow 2015-09-21T18:05:48.000122Z

Was hoping I could do something similar using github or github pages?

meow 2015-09-21T18:06:11.000123Z

Would make it easier to show off the fractals.

meow 2015-09-21T18:06:14.000124Z

:simple_smile:

bhauman 2015-09-21T18:06:20.000125Z

I created a separate build that writes to a directory that I share with the gh-pages branch

meow 2015-09-21T18:07:38.000126Z

@bhauman: Any chance of devcards getting a "publish to gh-pages" feature?

meow 2015-09-21T18:08:28.000127Z

I actually have plans to create an entire site primarily using devcards so I could really use a feature like that.

meow 2015-09-21T18:10:03.000128Z

by site I just mean I have a github org that I plan to use as a sort of gallery/tutorial site: https://github.com/algorithmic-beauty

meow 2015-09-21T18:12:02.000129Z

If this was built into devcards then more of us might publish our cards, which would help spread the word about devcards... 😉

2015-09-21T18:21:51.000131Z

@bhauman: you are welcome to share them

bhauman 2015-09-21T18:22:45.000132Z

@meow Well look at the bottom of devcards core.cljs mount-namespace

2015-09-21T18:23:11.000133Z

I will also soon want to build gh-pages branch for plastic where I will show some devcards and editor states

bhauman 2015-09-21T18:23:34.000134Z

I wrote code to render a ns as a webpage but it is still early

bhauman 2015-09-21T18:25:23.000135Z

The idea is you can call the mount namespace call from js at the bottom of your HTML file

meow 2015-09-21T18:28:44.000136Z

This is one of those cases where I just want something easy. I don't really care how it works. :simple_smile:

bhauman 2015-09-21T18:34:39.000137Z

Thanks @darwin

bhauman 2015-09-21T18:35:08.000138Z

@meow: can you post a shot of your cards I can share?

2015-09-21T18:35:59.000139Z

@bhauman: I hope that at some point in future I will be able to present whole plastic editor instance as a devcard, so I will be able to show/test different editor states

2015-09-21T18:36:15.000140Z

that will be my ultimate devcard :simple_smile:

bhauman 2015-09-21T18:36:25.000141Z

That would be amazing!

bhauman 2015-09-21T18:55:59.000142Z

@darwin did you look at the iDevcardOptions protocol? It allows you to intercept the devcard options and manipulate them.

2015-09-21T18:57:10.000143Z

@bhauman: no, didn’t know about it, how it could help? btw. I solved my edn/code problem by building markdown code block and passing in a string

bhauman 2015-09-21T19:15:39.000147Z

@darwin: it would let you implement your functionality without going so low level with register-card because you can intercept the options and change them as you will. for your case you could write a function that reifys a IDevcardOptions and just return the options as you need them, that way you don't have to mess with the path stuff etc.

bhauman 2015-09-21T19:15:48.000148Z

I need to document it of course

2015-09-21T19:19:12.000149Z

@bhauman: thanks, good to know, actually I started messing with macros and then switched to this low level solution, because top-level macro defcard didn’t work well for me, I needed to define documentation as string concatenation and the macro parameter detection logic worked against me, will look into IDevcardOptions

bhauman 2015-09-21T19:22:07.000150Z

well this protocol would allow you to specify any parameters you want to the defcard macro (defcard name (mything options))

2015-09-21T19:23:11.000151Z

why path isn’t part of the options? I like that I can simplify it, my namespaces are too long for display

bhauman 2015-09-21T19:23:50.000152Z

well I just didn't think that would be a problem

bhauman 2015-09-21T19:24:04.000153Z

:simple_smile:

meow 2015-09-21T19:24:53.000154Z

@bhauman: I'll see if I can come up with a screenshot. Would really love to just be able to publish the darn page.

bhauman 2015-09-21T19:27:19.000156Z

Yeah I get that

bhauman 2015-09-21T19:28:03.000157Z

:simple_smile:

meow 2015-09-21T19:29:56.000158Z

Have I mentioned that one way to view Devcards is as a publishing platform? 😉

bhauman 2015-09-21T19:32:48.000163Z

That is beautiful

bhauman 2015-09-21T19:33:15.000164Z

Thanks

meow 2015-09-21T19:33:23.000165Z

Cool. NP.

meow 2015-09-21T19:34:29.000166Z

I'm really happy with my L-system code. Finally. Took a while to get it to where I wanted it to be. Can't wait to max it out and do really crazy things with it.

meow 2015-09-21T19:35:08.000167Z

The fractals are nice, but they've been done to death.

bhauman 2015-09-21T19:35:44.000168Z

That is great!!! I saw a talk yesterday about cellular automata

meow 2015-09-21T19:35:44.000169Z

I need to do them, just because I can. But I really want to push beyond what's already been done.

meow 2015-09-21T19:36:30.000170Z

Funny, the next thing I'm working on is supporting CA in L-systems. It can be done, but I want to make it even easier.

bhauman 2015-09-21T19:36:54.000171Z

Very cool...

meow 2015-09-21T19:38:26.000172Z

I'm really leveraging transducers, which worked out really well. I absolutely love those things. Transducers, for me, are one of the most foundational things that Clojure has brought to the table. I think transducers will be implemented in all sorts of languages and ultimately taken for granted.

meow 2015-09-21T19:39:41.000173Z

And then working on support for parametric L-systems drove me to finally learn deftype, defrecord and protocol. And that worked out really well.

👍 2
2015-09-21T19:46:50.000174Z

transducers are cool, but for most common cases laziness is enough when working with sequences, that is why I don’t think many people will learn transducers and will be using them on day-to-day basis

meow 2015-09-21T19:52:39.000175Z

I like that they allow me to think about a problem like these L-systems from a process point-of-view and that I can comp a bunch of xfs together and they will efficiently perform those operations on that data stream.

meow 2015-09-21T19:54:38.000176Z

I'm still tickled that after having a number of variations of processes to support every variety of L-system that I can find documentation about that I've managed to boil it down to such a small amount of code, including recently getting it down to just one process function:

(defn produce
  "Returns a lazy sequence of words from a recursive, axiomatic, transducible
   process."
  [get-xf]
  (letfn [(process [w]
                   (lazy-seq
                     (when (seq w)
                       (let [v (vec w)
                             word (into [] (get-xf v) v)]
                         (cons word (process word))))))]
    (process jumpstart)))

meow 2015-09-21T19:56:57.000177Z

And the most sophisticated L-system is built out of parts with just this little bit of code:

(defn parametric-context-sensitive-system
  "Returns a lazy sequence of words from a context-sensitive rewriting
   process. Allows a rewrite successor to (optionally) be a function that will
   get called with the current context as arguments."
  [axiom rules]
  (produce (gen (fn [g w]
                  (comp (modulating)
                        (rewriting axiom rules g)
                        (calling g w)
                        cat)))))

👍 2
meow 2015-09-21T19:57:48.000178Z

Anyhow, sorry for hijacking this channel...

meow 2015-09-21T19:58:31.000179Z

@bhauman: What CA talk did you see?