https://htmx.org logo
Powered by
# htmx-general
  • m
    a few details to fill in 🙂
  • m
    as a hack you could scan to the first '(' that starts the line, treat everything before that a javascript to be eval'd and then start your sexpr parsing, which would be pretty simple
  • m
    I bet you could get this knocked out in a few days
  • m
    attribute components would be anything that has a colon after it, and you can scan the value following the colon using string, 
    {
    delimiting or whitespace, which would allow you to write the above like this:
    Copy code
    html
<script tag="my-thing" type="dzkscript">
let count = 0

(main 
  (h1.title 'Counter App')
  (button#increment onclick:count++ "Increment")
  (output `clicked ${count} times`))
</script>

<my-thing/>
  • m
    Support 
    @
    references to let people pass in stuff:
    Copy code
    html
<script tag="my-thing" type="dzkscript">
let count = 0

(main 
  (h1.title @title)
  (button#increment onclick:count++ "Increment")
  (output `clicked ${count} times`))
</script>

<my-thing title='Counter App'/>
  • m
    we could also make this an extension of hyperscript
  • m
    Copy code
    html
<script tag="my-thing" type="dzkscript">
set :count to 0

def increment()
  increment count
end

(main 
  (h1.title @title)
  (button#increment (on click increment()) "Increment")
  (output `clicked ${count} times`))
</script>

<my-thing title='Counter App'/>
  • c
    probably want to move this chat to #796428329531605032 then
  • m
    probably
  • m
    I'll wait for dzk to tell me this is dumb
  • m
    and then move it to hyperscript
  • g
    why did you put my name on this
  • k
    anyone using tailwind css with htmx? I'm debating the huge amount of html that will go over the line when using this combination.
  • b
    I use tailwind, what are you thinking makes the html so huge?
  • b
    I generally prototype with tailwind classes on html elements, and once I identify some reusable components, I move those classes out into 
    @layer components
    declarations using BEM.
  • k
    gotcha
  • b
    But really I don't think you should be worried. You can consider moving those classes out as an optimization step later.
  • k
    I'll have a look at it then. It's become a really popular framework I noticed
  • b
    Check out the 
    @apply
    directive. That's how I move stuff out.
  • b
    Anyone have experience with any attempts at HyperCard ports/spiritually aligned implementations in the web/html/js world? I'm really interested in trying to build something like that with hyperscript + htmx
  • m
    \> he doesn’t know I prefix everything w dzk now “Oh good morning dzkids one sec I haven’t had my dzkoffee yet...”
  • h
    it's dzk's name space, we're just all scoped to it
  • r
    Reminds me of KDE's naming sckeme
  • b
    If your responses are gzipped it doesn't make a huge difference. Using one of the free tailwind UI templates of an entire page https://tailwindui.com/preview#component-870de0c4ec620ad31bb8538a2886e3f0 This html page is 42k as is. If you strip every class from the html it is 24k. But the gzipped original is 4.1k and the gzipped classles one is 2.9k. This was with a compression level of 6. So You would. have to check other ratios but to me it seems using tailwind in line is easier since it preserves the LOB and if you reuse it then move it into a shared template partial file. But thats just my 2 cents 🙂
  • b
    That's my feeling exactly Drie, but I really appreciate the math. 2x might be a concern for some applications but probably only ones that stream updates, or have a megaton of users
  • k
    Thanks for the math, my main concern is send a bunch of repeated components over the line, a list of notifications for example, sending 20 of those to the client with full tailwind markup just seems inefficient. Gzipping would only be feasible for large static content I guess?
  • h
    no your web server will compress outgoing responses
  • k
    okay. I'll just have a go at it then đź‘Ś
  • f
    I have a setup that looks something like this...
    Copy code
    <form id="theform">...</form>
<div hx-post="/search" hx-trigger="from:#theform">...</div>
    Should I expect an event attached on the form, or on the div? Either way, should I expect the form's submission to be surpressed and overridden by the event handler?
  • w
    Since you don't have a 
    method
    defined on the form, I believe it woulldn't get submitted by anything. Also, I believe the event will come from the 
    div
1...595596597...1146Latest