3 ms·

icons = ("mail", "linkedin", "github") return Card( DivLAligned( DiceBearAvatar(name, h=24, w=24), Div(H3(name), P(role))),

by johnfn 1y ago

icons = ("mail", "linkedin", "github") return Card( DivLAligned( DiceBearAvatar(name, h=24, w=24), Div(H3(name), P(role))), footer=DivFullySpaced( DivHStacked(UkIcon("map-pin", height=16), P(location)), DivHStacked(*(UkIconLink(icon, height=16) for icon in icons)))) > I specified the entire layout, font sizing, icons, and avatar using only Python. I controlled everything without needing special flexbox or CSS class knowledge. The provided Python looks even more difficult to understand than typical HTML/CSS. DivLAligned? DivFullySpaced? What if I only want it partially spaced? DivHStacked? Oh no... Flex and Tailwind already do this, it's trivial, and crucially online documentation is plentiful and AI understands it just fine. This seems to be reinventing Tailwind with different names.

drdaeman 1y ago
> This seems to be reinventing Tailwind I would rather think of this as Python bindings to HTML+Tailwind with a bunch of utility shortcuts. E.g. `DivFullySpaced(…)` is simply a convenience shortcut `Div(cls=("flex","justify-between","items-center","space-y-4"))(…)`, which turn becomes `<div class="flex justify-between items-center space-y-4">…</div>` (there are a few more levels of indirection there, but the source is easy to navigate). They don’t reinvent Tailwind, they build a Python library on top of it. Or it can be thought as a DSL translating into another DSL. That’s also a pretty common thing out there, and a perfectly valid idea if there’s some need for a different syntax, and/or some issue why the original language is not a good fit.
- pzo 1y ago
  For some one who actually did mostly native mobile dev in last decade and haven't touched web since react this still looks kind of weird to me. It feel like glueing into the name SwiftUI and HTML and just feel very awkward to me. Can't explain but I feel a little repellent by such names - would prefer either trying to sick convention more to SwifUI or Flutter or Compose or stick to more HTML/Tailwind convention. On the one hand I'm definitely more comfortable with python and wish I could use it fullstack on frontend as well rather than JS/CSS but on the other hand not sure if I like such abstraction.
erikgaas 1y ago
If you want a custom Div you can just define a function for it. The definition of DivLAligned is just for convenience. You can see its implementation is fairly trivial. https://github.com/AnswerDotAI/MonsterUI/blob/main/monsterui%2Ffranken.py#L1149 https://github.com/AnswerDotAI/MonsterUI/blob/main/monsterui...
cvwright 1y ago
It kinda looks like SwiftUI

by johnfn 1y ago

drdaeman 1y ago

> This seems to be reinventing Tailwind I would rather think of this as Python bindings to HTML+Tailwind with a bunch of utility shortcuts. E.g. `DivFullySpaced(…)` is simply a convenience shortcut `Div(cls=("flex","justify-between","items-center","space-y-4"))(…)`, which turn becomes `<div class="flex justify-between items-center space-y-4">…</div>` (there are a few more levels of indirection there, but the source is easy to navigate). They don’t reinvent Tailwind, they build a Python library on top of it. Or it can be thought as a DSL translating into another DSL. That’s also a pretty common thing out there, and a perfectly valid idea if there’s some need for a different syntax, and/or some issue why the original language is not a good fit.

pzo 1y ago
For some one who actually did mostly native mobile dev in last decade and haven't touched web since react this still looks kind of weird to me. It feel like glueing into the name SwiftUI and HTML and just feel very awkward to me. Can't explain but I feel a little repellent by such names - would prefer either trying to sick convention more to SwifUI or Flutter or Compose or stick to more HTML/Tailwind convention. On the one hand I'm definitely more comfortable with python and wish I could use it fullstack on frontend as well rather than JS/CSS but on the other hand not sure if I like such abstraction.

erikgaas 1y ago

If you want a custom Div you can just define a function for it. The definition of DivLAligned is just for convenience. You can see its implementation is fairly trivial. https://github.com/AnswerDotAI/MonsterUI/blob/main/monsterui%2Ffranken.py#L1149 https://github.com/AnswerDotAI/MonsterUI/blob/main/monsterui...

cvwright 1y ago

It kinda looks like SwiftUI