@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

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

yeah the todo is a demo

using defn is only simpler in this contrived simplified case

so I didn't miss anything, yay

re:tabify

i can't find the original examples

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

https://github.com/hoplon/twitter-bootstrap/blob/master/src/hoplon/twitter/bootstrap.cljs.hl#L60-L67

you'd use it like this: https://github.com/hoplon/demos/blob/master/google-maps/src/index.cljs.hl#L69-L94

there are other variations

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

things like that

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

with your own cell as the value

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

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

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

the interesting thing about that implementation is the layering

like the tabs are built up from simpler abstractions

deck, selector, activeness

this is kind of where we want to end up eventually

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

which part?

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

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

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

well bootstrap requires coordinating css classes with special html structure

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

this encapsulates those relationships in defelems

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

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

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

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

well it will do the right thing

that might be adding a class

or it might be doing something else

bootstrap isn't consistent or anything

because it's not a real programming environment

like they don't have composable things in there

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

but the hoplon defelems fix that for you

you can encode a concept as an abstraction

(I mean bootstrap)

and then have the implementation emit the crazy bootstrap stuff

which is what's happening there

yeah, lisp magic

i just want to do like

(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")))

i don't want to do

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

https://github.com/hoplon/twitter-bootstrap/blob/master/src/hoplon/twitter/bootstrap.cljs.hl#L54

so the general idea of tabs is pretty abstract

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

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

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

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

toggle makes it stateless with respect to DOM manipulation

which is why i always prefer that

static allocation is always simpler than malloc, basically

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

is that what you meant before?

like your tabs are being populated by loop-tpl?

yes

in my mind that's a simpler model

it corresponds to what the user sees

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

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

well the tabs model there is intended to be visual

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

take for example the built-in select element

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

because it encapsulates its own state

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

there is no wasted configuration there

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

oh, that could be

i haven't seen the loop-tpl implementation

I'll fix something up then 😄

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

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

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

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.

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

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

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

🙅

haha yea

that's how bootstrap is

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

lol i try

i'm interested to see the loop-tpl implementation

me too 😂

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.

right now the tabs and their content are intertwined