[question] Twitter Lite's empty div + flexbox technique for layout about disco.chat HOT 5 CLOSED

not really. Just reverse engineered it with chrome dev tools and determination hehe 😉. The empty div and height of 1px does some forced layout within the scrollable chat area that’s super performant IIRC.

from disco.chat.

Just curious, how close are the iframe techniques used in disco to how you do it at live chat?

from disco.chat.

😉

at the moment we have initialization script installed by our customers which creates an iframe containing React app. The initialization script has also some other, mainly imperative, logic - but it's pretty small. The React app renders both minimized and maximized states and holds connection, most of our business logic etc.

We had pretty terrible experiences in the past with running code on our clients' sites (i.e. mootools installed, but also many other issues) - so we've decided to do as least as possible in this initialization script (truth to be told it doesn't handle initialization only, so maybe I shouldnt call it that, but whatever). This comes with a price though - when we do app resizing (maximized <-> minimized transitions) we have to postpone actual transition, send a resize request up to a parent page and resize upon receiving confirmation. It sounds terrible, but is just a matter of orchestrating few promises and for the user it seems instantaneous anyway.

Other than that we have to sync some states between both scripts (stockroom-style).

Interesting possible technique (which we dont use at the moment) is creating src-less (about:blank) iframe with js script tag in it to create a separate, isolated JS context there, but at the same time it being src-less grants access to parent's page DOM. So it can act as isolated logic hub and still manipulate main page content synchronously.

For security reasons though we also want things like localStorage isolated and combining both src-less iframe technique with regular iframe from our domain seemed to much of a hassle at this point.

Your preact/react combo is also neat, we've considered doing it that way too. Each technique has its own pros and cons though, hard to decide what's best 😉

from disco.chat.

@Andarist Thanks for that response. Based on what you've described, and my reverse engineering spidey sense, I think Intercom does a similar thing.

from disco.chat.

Yeah, I think Intercom uses src-less iframes (without any iframe in their domain) and renders sometimes multiple of them to minimize non-clickable transparent area for non-rectangular "layouts" (and CSS isolation etc ofc).

from disco.chat.