Clojurians
#hoplon
<
2015-12-12
>

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

xifi22:12:53

@micha: in one of your talks you mentioned a function that you called tabify. Is there a snippet where you implemented that logic? Is it something you often use? Almost any application will have some tabs at some point

xifi22:12:27

also, what is the reason for using defelem in the todo-list implementation on http://hoplon.io? To me it seems like (defn todo-list [title] ...) would accomplish the same with less ceremony

micha22:12:34

yeah the todo is a demo

micha22:12:51

using defn is only simpler in this contrived simplified case

xifi22:12:38

so I didn't miss anything, yay

micha22:12:37

re:tabify

micha22:12:44

i can't find the original examples

micha22:12:52

but this is a thing that's similar, using bootstrap:

micha22:12:51

there are other variations

micha22:12:49

the parts are all open to extension, like you could make your own tab function that customizes the tab trigger or the content area

micha22:12:52

things like that

micha22:12:07

you could also provide a :state attribute to the tabs element

micha22:12:15

with your own cell as the value

micha22:12:40

that would allow you to change tabs via formula cell instead of or in addition to the user clicking on the tabs

micha22:12:02

javelin lens there would allow you to use a formula for the tabs state

micha22:12:18

but the lens would make it possible for the user to click to change tabs, too

micha22:12:47

the interesting thing about that implementation is the layering

micha22:12:55

like the tabs are built up from simpler abstractions

micha22:12:06

deck, selector, activeness

micha22:12:36

this is kind of where we want to end up eventually

xifi22:12:54

yeah, I'm still lost when reading the code and your explanation

micha22:12:07

which part?

xifi22:12:34

the code is split into several smaller functions, so I'm working my way back through the functions

xifi22:12:10

and I'm failing to see where does this connect with bootstrap

xifi22:12:26

which I'm still avoiding as I only want to tackle 1 thing at a time

micha22:12:49

well bootstrap requires coordinating css classes with special html structure

micha22:12:13

usually you have to just look at the examples from the getbootstrap website in your browser debugger to figure that out

micha22:12:28

this encapsulates those relationships in defelems

micha22:12:50

so you don't need to know how to make the thing that looks like "tabs" in twitter bootstrap

micha22:12:20

like that requires making certain specific structural html, and then adding specific classes to various parts

micha22:12:33

it's ridiculous but that's how they do it

xifi22:12:38

ah so {:active state} will generate the css class "active"

micha22:12:49

well it will do the right thing

micha22:12:01

that might be adding a class

micha22:12:06

or it might be doing something else

micha22:12:19

bootstrap isn't consistent or anything

micha22:12:24

because it's not a real programming environment

micha22:12:39

like they don't have composable things in there

xifi22:12:48

ok that doesn't sound like something I'd enjoy then simple_smile

micha22:12:54

but the hoplon defelems fix that for you

micha22:12:08

you can encode a concept as an abstraction

xifi22:12:13

(I mean bootstrap)

micha22:12:23

and then have the implementation emit the crazy bootstrap stuff

micha22:12:30

which is what's happening there

xifi22:12:31

yeah, lisp magic

micha22:12:37

i just want to do like

micha22:12:24

(tabs
  (tab :name "first tab"
    (p "this is the first tab contents"))
  (tab :name "second tab"
    (p "this is the second tab contents")
    (p "the second tab also says more things")))

micha22:12:29

i don't want to do

xifi22:12:23

I don't see the tabs' links though, where are they generated?

micha22:12:28

so the general idea of tabs is pretty abstract

xifi23:12:24

ok so tab "returns" [a div] and tabs captures those, takes all the as and puts them in a ul and the same with the divs in a div

xifi23:12:02

what I wrote right now was something like having links that on click change the contents of a cell which is rendered with a loop-tpl

xifi23:12:17

which is more tedious as I'm writing out the :clicks. It's also a very different implementation though because you have a static content that gets shown with a css toggle while I wrote something that goes in and changes the DOM to match the current state

xifi23:12:30

so you have everything dumped in the DOM with only something visible, I only have the active content in the DOM

micha23:12:56

toggle makes it stateless with respect to DOM manipulation

micha23:12:03

which is why i always prefer that

micha23:12:18

static allocation is always simpler than malloc, basically

micha23:12:36

loop-tpl lets you allocate statically but not have allthe things in the dom

micha23:12:00

is that what you meant before?

micha23:12:09

like your tabs are being populated by loop-tpl?

xifi23:12:27

in my mind that's a simpler model

xifi23:12:36

it corresponds to what the user sees

micha23:12:05

yes but the model is different because loop-tpl transforms data into dom

xifi23:12:09

with your model I need to think of the view and the internal representation separately

micha23:12:31

well the tabs model there is intended to be visual

micha23:12:52

you're not dealing directly with data, the state is completely managed by the element

micha23:12:06

take for example the built-in select element

micha23:12:14

that's a complex thing, but it's easy to use

micha23:12:21

because it encapsulates its own state

micha23:12:41

that's what i was trying to achieve with the tabs thing

micha23:12:14

there is no wasted configuration there

xifi23:12:18

but the loot-tpl implementation could be wrapped the same way. Or am I missing something, I haven't actually tried it yet

micha23:12:33

oh, that could be

micha23:12:43

i haven't seen the loop-tpl implementation simple_smile

xifi23:12:58

I'll fix something up then 😄

micha23:12:06

but i don't really think about what's going to be in the dom when i look at that code

micha23:12:21

like once the tabs thing is done i can just use it

xifi23:12:30

I'm building a small static page for showing a CV

xifi23:12:00

yeah I understand. I just remember the surprise when I first saw a page that had this implementation and I opened the source of that page. Everything dumped in the DOM but classes toggling their visibility.

xifi23:12:48

from the usage perspective the tabs element you showed is completely self-managed though, that's right. You can treat it as a black box

xifi23:12:21

which is always good. I try to stay away from stuff that leaks nowadays. It's funny how easy it is to spot that

xifi23:12:10

Note: in order for this to function you should 1) ... 2) ... 3) ...

micha23:12:11

that's how bootstrap is

xifi23:12:18

as always, thank you for your time @micha, you are a wise and patient man

micha23:12:44

lol i try simple_smile

micha23:12:08

i'm interested to see the loop-tpl implementation

xifi23:12:26

me too 😂

xifi23:12:23

looking at the code I probably explained (and imagined) it wrong though, I'm using loop-tpl to list stuff in a tab, which means it doesn't relate to the abstraction in any way. Still the implementation is different as I'm swapping out DOM nodes. Once I build the tabs abstraction though I will probably lose the loop-tpl part because that will become a static component.

xifi23:12:53

right now the tabs and their content are intertwined