Fork me on GitHub
#hoplon
<
2015-09-22
>
mynomoto01:09:30

@micha: shall the hoplon6 branch of demos be merged on master?

alandipert01:09:23

@mynomoto: many thanks for your work updating those!

mynomoto01:09:35

Done! You are welcome, and thank you guys for this amazing project!

donmullen11:09:20

Re: Docs - any change this mind be useful : https://github.com/weavejester/codox ?

Josh12:09:41

@donmullen: Looks nice! Was that on your radar last time you were looking @micha?

Josh14:09:32

When I include a google analytics snippet in a hoplon page (e.g. (script "(function(i,s,o,g,r,a,m){...) I get Uncaught NotFound error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.. Google is no help. Can anyone point the way?

Josh14:09:34

That error comes from core.cljs:92 but I can't use the js debugger to inspect cljs vars

Josh14:09:52

I take it you can't expect to be able to add script-elements-that-insert-script-elements this way

Josh14:09:15

Looking at the pre-rendered page, that script element doesn't get pre-rendered, which I'd want it to

Josh14:09:05

Does Hoplon offer a way to customize the static html before hoplonification?

Josh14:09:14

that would be the perfect place for this

Josh14:09:38

I grepped the hoplon demos repo for analytics and didn't find any examples, maybe i'll add one once I figure this out -- Google Analytics is a pretty common thing to want

Josh14:09:39

@alandipert: Just documented that wisdom you dropped on me yesterday at https://github.com/hoplon/hoplon/wiki/API-Documentation -- hope that's helpful

micha15:09:57

@jab: @onetom has this working, and I've done it in the past too

micha15:09:19

the issue is that a script tag you create with hoplon loads asynchronously

alandipert15:09:19

@jab: quick fix is (js/jQuery (fn [] (js* "... google analytics javascript ...")))

micha15:09:53

big thanks to @onetom for that simple_smile

onetom15:09:15

simple_smile u were faster; i was just about to paste

onetom15:09:13

i've also added this externs file https://github.com/exicon/homepage/blob/master/src/google-analytics.ext.js which is referenced from the deps.cljs (which should really be called deps.cljs.edn i guess) but i can't remember if that was necessary for this script tag solution or not

onetom17:09:14

is there any charting library people would recommend with hoplon?

onetom17:09:18

we tried c3 since it was cljsjs packaged already but when we call js/c3.generate it inserts a new chart every time into the specified div

Josh17:09:46

@alandipert, @micha, @onetom Thanks and sorry I only just saw your replies! But not before I submitted https://github.com/cljsjs/packages/pull/239 -- not sure if that's useful? (See my questions there if you get a chance.) The link to the exicon site source looks like it'll be a great reference, thanks. But taking a quick look, it still isn't clear to me it's doing what I'm curious about, i.e. hooking into hoplon's html generation process and providing a literal chunk of markup to include in certain places, that effectively remains outside the hoplon app's awareness. Google Analytics seems like a good example where you'd want this, since the goal is to fetch analytics.js and record the pageview as early as possible (in case the user closes the tab before domready) without blocking rendering of the page, hence the advice to make it the last element in <head>

onetom17:09:56

jab: hey, thanks for pointing out the externs! simple_smile

Josh17:09:03

my pleasure!

Josh17:09:18

(...and also unless your app's actually doing anything with the ga api beyond the typical record-a-pageview, you probably don't want to bog down your hoplon app code with this and just want hoplon to dump this chunk of markup in the right place and otherwise pretend it doesn't exist)

Josh17:09:11

@onetom: Is that cljsjs package useful? Would you switch to using that once it's merged?

Josh17:09:51

would it enable you to integrate it with the exicon site in some better way?

onetom17:09:55

i would switch probably, yes, because it very likely that our page would load faster

onetom17:09:13

and also ad-blockers might not affect it either

Josh17:09:37

i see, biggest win is just serving the js from your own domain

onetom17:09:39

unless they are blocking POST traffic too

Josh17:09:17

yeah, blockers might just blacklist any requests to any ga domains

onetom17:09:38

well, in theory it shouldn't be a win to take on the responsibility of serving this library since it's most likely to be cached already in the users' browser

Josh17:09:39

(i.e. the track-this-pageview request)

Josh17:09:19

(but worth it if it does somehow get past blockers?)

Josh17:09:01

@onetom: makes sense. so looking at the exicon site source, when you add integrations/google-analytics at the end of your (body...) element in homepage/layout.cljs.hl...

onetom17:09:04

we also had to trick around a bit for the original snippet to work: https://github.com/exicon/homepage/blob/master/src/homepage/layout.cljs.hl#L138-L139 i think it still throws errors under certain circumstances if we leave this dummy script tag out

Josh17:09:27

...doesn't that end up including the ga stuff as part of your hoplon app?

Josh17:09:58

which you really don't want to have to wait for the hoplon app to be up and running to do?

onetom17:09:05

when i put it into the head it behaved in a way which i couldn't quite understand...

Josh17:09:33

wait so was there a way to just dump inert markup into the head without it becoming part of the hoplon app?

onetom17:09:07

it's not markup, it's a script tag with some javascript as text

Josh17:09:00

(i meant markup as in <script> is markup, call it what you will)

Josh17:09:24

i mean it like a literal string

onetom17:09:26

which is the other thing annoying us. the execution model is quite tricky this way, because it looks like it's part of the markup which would make u think it gets executed serially, but in fact it gets into the dom dynamically...

Josh17:09:55

right, that's the escape hatch i'd think it'd be really useful for hoplon to provide

onetom17:09:56

but these are 2 orthogonal approaches; i don't really see a sane way to integrate them yet

onetom17:09:11

because no markup is generated by hoplon

onetom17:09:36

just like react is not generating markup either, but directly dom elements

onetom17:09:50

so your page doesnt really exist as a html string

onetom17:09:31

hence it makes no sense to talk about inserting a literal html string into the middle of hlisp

onetom18:09:32

though technically u can manipulate (.innerHTML (div))...

Josh18:09:15

onetom: i think i get all that, and am envisioning just one or two slots you can hook into, such as just before </head> and just before </body>, to tell hoplon you want a literal string to be injected there once, at pre-render time, and hoplon can thereafter forget it's there

Josh18:09:23

but maybe i'm just not getting something fundamental

onetom18:09:13

so that would be part of the boot-hoplon task, but hoplon at runtime should play well with that too both in production and development modes

onetom18:09:51

what r u trying to use hoplon for, btw?

onetom18:09:48

just as some semi-static site generator like we did with our homepage or r u building a "webapp"? if it makes sense to do such delineation at all...

Josh18:09:16

i'm really still a total n00b and don't even know hoplon well enough to tell if it'll be a good fit, but i really hope so, because what I know about it so far appeals to me much more than alternatives

Josh18:09:47

i'd want to use it for static site generation as well as single- and multi-page webapps. the boot stuff + hoplon pre-rendering is way more appealing to me than any other site building tool

Josh18:09:09

i came across assetgraph a long time ago after hitting all kinds of bugs in grunt due to unfixable design flaws and that seemed to address the problems, but never figured out how to use it

micha18:09:42

i think managing prerendering is the way to go there

micha18:09:03

i'm not sure you really need a way to printf into the html file when you have that

micha18:09:11

you can do like this

micha18:09:37

(when prerendering?
  (script ...))

micha18:09:50

that will only show up in the prerendered html

micha18:09:02

it won't be recreated when hoplon builds the dom

micha18:09:28

we used to have annotations in the page declaration

micha18:09:45

like (:prepend-head [(script ...) ...])

micha18:09:53

we could bring that back

micha18:09:01

if absolutely necessary

Josh18:09:02

thanks @micha, i did see prerendering? in the exicon source and it's good to have confirmation that's what you recommend. i'll use it!

micha18:09:38

i don't mean to discourage you, "idiomatic" means "it works" to us simple_smile

micha18:09:08

i just want to find the simplest way to abstract the concept

Josh18:09:43

totally with you on that and not discouraged at all, thank you

micha18:09:57

🚀

Josh18:09:39

@micha: hm, https://github.com/exicon/homepage/blob/9c5d79/src/homepage/layout.cljs.hl#L157-L161 uses (when-not prerendering?.... and neither is resulting in the (script) getting dumped into the prerendered html when i try it.

micha18:09:40

don't you want the opposite sense? eg (when prerendering? ...)

Josh18:09:55

(but noticed the other site uses when-not)

Josh18:09:12

but neither are doing the right thing after boot prod

micha18:09:01

and prerendering is being done?

Josh18:09:08

@micha: it's the last step in my "prod" deftask

Josh18:09:29

@micha: wait a second, maybe i'm misunderstanding...

Josh18:09:39

...i commented out the (when...) so i just have a (script) tag in my (head). when i use the chrome develoepr console to inspect the live dom, i see my script tag. but when i View > Developer > View Source to view the initial html that was served, i don't see it there. shouldn't it have been prerendered?

micha18:09:18

i believe so yes

micha18:09:25

although prerendering scripts is tricky

micha18:09:42

the prerenderer may strip those out

Josh18:09:50

facepalm

onetom18:09:02

jab: maybe thats why i put it into the body not the head?..

Josh18:09:40

(@onetom: did you mean (when prerendering? rather than when-not?)

Josh18:09:47

trying it in the body

onetom18:09:31

no, i meant (when-not prerendering? ... because if i have the script tag in the prerendered html, then as the hoplon code kicks in, that script dom element gets blown away and some scripts wont initialize correctly

onetom18:09:12

if i dont have a condition, then they get initialized twice...

onetom18:09:23

or rather loaded twice

Josh18:09:45

@onetom, @micha: wrapping my (script) in a (when prerendering?) isn't including it at all, and when i comment out the when, it's not ending up in the prerendered html whether it's in the head or body

Josh18:09:59

only the live dom once the hoplon script runs

onetom18:09:38

thats why i had the FIXME comment in my layout.cljs.hl too... i saw the same effect

Josh18:09:21

@onetom, when i try that it doesn't help

Josh18:09:31

also is there a bug open for that?

Josh18:09:12

@micha: should i open a new issue since the prerenderer is stripping out my script element? is there anything i can do to work around this as long as the (:prepend-head... hooks are no longer available?

micha18:09:07

the place to implement :prepend-head etc would be in the boot-hoplon compiler namespace

Josh18:09:12

@micha, well if prerender? is a more elegant solution like you said, i'd sooner just open a feature request asking for script to be pre-renderable. should i?

flyboarder19:09:40

@jab @micha could this be why my parallaxing in materializecss isnt working? the timing of the jquery?

flyboarder19:09:11

I thought it might be the cdn file taking too long to download

donmullen20:09:12

@onetom: http://dimplejs.org/ looks interesting though haven’t used it — used in https://github.com/omcljs/om-cookbook

mynomoto20:09:06

@onetom: @donmullen I'm experimenting with vega (https://github.com/cljsjs/packages/tree/master/vega). Simple example on http://mynomoto.github.io/#/chart (click on the header to add one to each column)

Josh20:09:45

@micha: just came across https://github.com/funcool/boot-codeina (via https://github.com/boot-clj/boot/wiki/Community-Tasks) in case that's another good contender for an api docs generator

donmullen21:09:54

@mynomoto: thanks for the reference to vega