Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2015-08-19

Channels

#hoplon
<
2015-08-19
>
micha00:08:23

you could have an image of your website while it's loading simple_smile

micha00:08:41

like ios does

alandipert00:08:43

or maybe a boot task that inlines all styles? i guess that would make the page bigger and defeat caching

micha00:08:54

i don't think that has anything to do with it

micha00:08:01

bexcause all those things get wiped away

micha00:08:05

as soon as the page loads

micha00:08:35

the prerendering is really just for SEO so web crawlers can index

onetom00:08:08

which is why we might even see the prerendered page for awhile but then hoplon kicks in and kills it and gradually rebuilds it

micha00:08:50

that's an interesting idea

micha00:08:56

but i think you'd see weird glitches

micha00:08:34

currently hoplon blows it away and starts over when the page loads

micha00:08:46

so we hide the prerendered content from the user

micha00:08:54

so they don't see it flash in a weird state

alandipert00:08:27

i wonder about a prerender task specially for making laoding pages

alandipert00:08:41

that bakes in the CSS to present a nice loading page, which is SEO-able markup underneath

micha00:08:34

i don't know how much difference the inline vs stylesheet styles make, what's the benefit there?

alandipert00:08:53

the inline styles take effect before the external ones

alandipert00:08:00

that's how daniel's trick works afaict

micha00:08:15

i think the problem was loading stylesheests asynchronously

micha00:08:27

so we have a stylesheet in the <head> because of prerendering

micha00:08:40

which means the browser will parse that before displaying the following content

micha00:08:42

so that's fine

micha00:08:56

but then we remove that <link> tag when we start the app

micha00:08:08

and we replace it with one we made in js and appendChild

micha00:08:19

appendChild will now cause it to parse async

micha00:08:29

which means content is being built without styles

micha00:08:38

until the css is fully parsed

micha00:08:53

it's weird though becuase the browser is usually good at caching that

alandipert00:08:58

daniel's fix appears to be a style tag though, not a link tag

micha00:08:59

but maybe we just have too much

alandipert00:08:24

which seems to take effect before hoplon does anything to the head

micha00:08:34

yes but then hoplon blows that away

micha00:08:41

and starts rebuilding the page from scratch

micha00:08:56

removing a style tag unloads the styles

alandipert00:08:23

i see. so daniel's fix reduces but does not eliminate the amount of unstyled time?

micha00:08:26

i don't have a complete understanding of why the fouc happens though

micha00:08:34

he did other things with events though

micha00:08:41

and display:none

micha00:08:54

and sniffing when page is rendering in phantom

onetom00:08:59

have you seen my video, btw? did it help in understanding?

micha00:08:04

so the app is loading itself in a special way

micha00:08:39

it would be good to know what the actual cause is

micha00:08:47

@onetom: your fouc video?

onetom00:08:38

yeah, we talked about this before

onetom00:08:46

i was also pointing to ng-cloak

onetom00:08:35

so if i have that display:none in the head and a (body :style (cell "display: block") ...) the flashing disappears indeed

alandipert00:08:21

is there significance in having cell there?

onetom00:08:36

it needs hoplon to be initialized

alandipert00:08:37

oh i get it - interesting

micha00:08:06

that is interesting

onetom00:08:07

i think we actually did something like this in the past but it didn't help 100%

onetom00:08:50

ah, for the subpages of our app which normally appear when u click a menu item are all :style "display:none" with a :toggle which depends on the route-cell

onetom00:08:40

the previous hack is obviously not nice, because it assumes u want the body to be block, but your css frameworks might set it to flex for example..

onetom00:08:33

thats not a nice coupling, but will do it for today simple_smile

onetom00:08:12

see u guys and thanks again! gotta catch the ferry.

micha00:08:16

if we knew what was causing the issue we could solve it completely

micha00:08:24

later dude!

martinklepsch09:08:07

A friend of mine wants to create a discourse instance for the broader Clojure community, providing categories/mailing lists for individual projects. You have your setup already but if it causes extra work might be worth considering. He's @plexus

alandipert12:08:06

@martinklepsch: thanks! yes i saw that. although i think it's probably best to leave ours where it is, we have a lot of content on it

martinklepsch12:08:10

@alandipert: yeah, definitely makes sense too

mynomoto12:08:34

!m alandipert

alandipert12:08:53

@martinklepsch: congrats on clojutre! looks like a great lineup

martinklepsch12:08:20

yeah, it really is. Now I better get going haha

martinklepsch12:08:30

nothing as motivating as an approaching talk :d

martinklepsch12:08:10

talk will feature lots of boot-cljs awesomeness

martinklepsch12:08:13

@alandipert: maybe a good time to send some sticker resupplies to Juho or me 😛

alandipert12:08:39

good point! will order more and load up micha

martinklepsch12:08:58

ah right, he’s also coming, lol 😄

onetom15:08:17

@alandipert: thanks for the mentions in your announcement! we could also make some use of some more stickers. the team likes your ecosystem a lot and they are proud to be able to use it at work (at least that's what i sense simple_smile

alandipert15:08:34

it's great to hear that people enjoy 😄

micha15:08:12

@onetom: have you tested your alpha5 build in firefox lately?

onetom15:08:30

nope, but i can do it rightnow

micha15:08:23

alpha needs more cross browser testing

micha15:08:43

definitely need to set up CI for hoplon

micha15:08:57

@alandipert: we should use that google thing

micha15:08:06

looks amazing and they have a service for free i think

alandipert15:08:45

i am unaware of a thing such as this

onetom15:08:13

micha: i don't see any issues on FF 39.0.3

onetom15:08:00

though the FOUC issue is not solved on FF with that cell trickery

micha15:08:46

it's just something in my application then

micha16:08:37

does anyone know how i can get the stack trace associated with an error in the js console in firefox?

micha16:08:55

in chrome there is a little arrow to toggle a trace for any log message

micha16:08:14

i feel like bisecting my application to see where an error originates must be the wrong way to do it

peterromfeld16:08:54

not sure maybe need firebug?

micha16:08:17

firebug seems the same as the built-in console

peterromfeld16:08:37

didnt do much debug on firefox yet

peterromfeld16:08:11

you tried: 

Stack traces

Just call console.trace() and Firebug will write a very informative stack trace to the console. Not only will it tell you which functions are on the stack, but it will include the value of each argument that was passed to each function. You can click the functions or objects to inspect them further.

peterromfeld16:08:37

from firebug wiki

peterromfeld16:08:55

let me know if you found solution 😉 we also should check on more browsers then just chrome haha 😄

micha16:08:03

also source maps aren't working

onetom17:08:48

@micha: 

e = Error("asd"); e.stack
"Error: asd
    at Error (native)
    at <anonymous>:2:5
    at Object.InjectedScript._evaluateOn (<anonymous>:905:140)
    at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34)
    at Object.InjectedScript.evaluate (<anonymous>:694:21)"

micha17:08:31

@onetom: :thumbsup: thanks, i tryit

donmullen17:08:34

Hello! @micha - late the Slack party 😉