Fork me on GitHub
#hoplon
<
2016-07-23
>
alandipert18:07:06

@kenneth: i don't but i bet i could help, what's the widget in question?

chromalchemy22:07:01

@jumblerg: Howdy! I've been hacking around applying UI and having fun with it! I feel a bit shakey, like i'm probably still missing some basic CSS and Hoplon things are absent (I haven't tried to add to the api yet), but It feels like a very direct and responsive way to code up styling!

chromalchemy22:07:51

I've got a little repl function going so I can experiment and prototype in any file and the results show inline in a heads up display in the normal layout/page context. That kind of visual repl canvas is really exciting as a learning and creative platform (thx Hoplon! :)

chromalchemy22:07:04

@jumblerg: I'm currently having trouble getting breakpoints working does this look right? (elem :sh (b :h (r 1 1) 750 (r 1 2)) "text") I get error: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

jumblerg22:07:30

@chromalchemy: the breakpoint fn implementation has changed. you can now do:

(elem :sh (b (r 1 1) 750 (r 1 2)) “text”)
without the :h. the horizontal orientation is the default.

jumblerg22:07:10

however, that should work too

chromalchemy22:07:07

Cool. working now! It was the :refer-hoplon :exclude stuff getting in the way

chromalchemy22:07:46

I ran into trouble trying to refer stuff using the ns+ config, but I haven't tried it since it was update last.

chromalchemy22:07:57

@jumblerg: Is there a basic way to do "clipping" on a box or image. Basically overflow: hidden on a fixed or max size?

jumblerg22:07:37

ah, yeah, you were trying to pass it to the element constructor instead. always fun when that happens.

jumblerg22:07:03

that’s a case i haven’t encountered yet, so no

jumblerg22:07:58

there are css clip and clip-path properties i could use to implement it, however

chromalchemy23:07:34

Those might not have great browser support. Background positioning would do it for images. But that might be redunant to the general UI box model, which treats images with backgrounds as first class elements.

chromalchemy23:07:56

What about overlapping elements. z-index?

jumblerg23:07:16

i was looking at caniuse, iedge seems not to support them

jumblerg23:07:41

i’m shocked

chromalchemy23:07:32

It would definitely be nice to be progressive. Maybe we can fill in the blanks w js/jquery solutions. Polyfill-style..!

jumblerg23:07:40

the biggest problem we have right now is general support for elements over other elements, overlays, etc.

jumblerg23:07:39

i’d like to implement some notion of layering to do this

jumblerg23:07:51

but i haven’t figured out a good way to do this

chromalchemy23:07:53

Hmm. Is that why :o opacity doesn't seem to work for me?

jumblerg23:07:19

given that there’s not a way to put anything behind it right now, probably 🙂

jumblerg23:07:20

there are some hackish things i’ve experimented with and used on occassion in the codebase right now, but i’m reticent to advertise them.

jumblerg23:07:51

and they’re definitely not long-term, general solutions

jumblerg23:07:17

the challenge is implementing a layering scheme that accommodates both (1) the notion of depth and (2) implicit sizing where an elem can grow based on the size of its content.

chromalchemy23:07:39

Glad your thinking about it. I think a layered layout functionality would be essential for many common approaches to visual density, flourish, etc

jumblerg23:07:20

i was wondering what the consequences might be if we required all the sizes to be explicit

jumblerg23:07:53

and disallowed elements that grow based on the combined sizes of their children

jumblerg23:07:09

performance would improve

jumblerg23:07:17

layers would be easy to implement

chromalchemy23:07:03

like Anti-responsive..

jumblerg23:07:07

but take something like a pinterest style layout where you want the cards in the columns to adjust based on the size of the image, that would be problematic

jumblerg23:07:30

it would still be responsive, everything would reflow as the screen size changed

chromalchemy23:07:58

common vertical text too?

jumblerg23:07:21

an element would show a scrollbar when the flow of children pushed below the explicit height, or alternately clip the content

jumblerg23:07:39

unfortunately, there are also major perf issues associated with overflows too

chromalchemy23:07:10

Yeah, I think this is a fundamental tension or tradeoff. When you want to design for print and everything is explicit, there is so much control and you can nuance and gloriously fine-tune everthing. The web was a different beast and that set of aspirations got almost tossed out. And we realized it wasn't really graphics we were dealing with, but data and ux programming patterns, which tend to look rather generic.

jumblerg23:07:08

the underlying issue is lack of composeability due to the ad hoc nature of the various layout and positioning schemes in the browser.

jumblerg23:07:37

the result being all these delightful permutations of mutually exclusive scenarios

jumblerg23:07:45

finding a path through them is often tricky

chromalchemy23:07:37

True. You're really climbing the mountain to implement more sane primitives out of this stuff

jumblerg23:07:32

like trying to find the cheese at the end of a maze, basically

chromalchemy23:07:35

could clojure functions truncate data themselves instead of using the browsers overflow mechanisms?

jumblerg23:07:53

yes, but that requires the ability to read from the dom

jumblerg23:07:10

rather than simply declaring a layout to it

jumblerg23:07:18

and that’s another mess

jumblerg23:07:40

and somehow, fascinatingly, reading from the dom can actually trigger reflows

jumblerg23:07:03

gotta grab some breakfast/lunch/dinner… bbiab!

chromalchemy23:07:38

Seems like you've come a nice way. Dynamic layout and animation are some heady space. We believe lisp can do it.. hope to get out of this tarpit soon 🙂 Thanks for the advice.

chromalchemy23:07:42

If you dont mind I'll drop some more questions as I find them, and maybe you can answer later.. (unless you want me to post to github, etc)

jumblerg23:07:45

ty! and i think we’re almost there, it is just a question of how many scenarios we have to special case to round out the edges.

jumblerg23:07:26

and please create tickets if there are action items associated with them

chromalchemy23:07:44

Is there any way to get blank lines in the markdown function? (to separate paragraphs)

chromalchemy23:07:16

Is there anything for absolute positioning within an element (to attach something to side of a box)?

chromalchemy23:07:21

Is there a way to attach a class or id string on an elem to help inspect and debug stuff in the browser console?

chromalchemy23:07:47

Are css transitions on the roadmap? (they are GPU accelerated) Or should simply look towards jquery, etc for animation?

chromalchemy23:07:02

What is the :hidden keyword for, if there is no :overflow :hidden?

chromalchemy23:07:22

Can I use jquery to style elems if there is not currently a hoplon/ui attribute property for something? Are there any special precautions for Hoplon On/Do stuff with ui/elems?