https://htmx.org logo
Powered by
# htmx-general
  • m
    :/
  • m
    I'll keep playing w/ it
  • m
  • m
    there's a noticable delay on first load so I gotta get this thing pared down
  • m
    I wimped out and just reused the htmx layout: https://dev.hyperscript.org/
  • m
    good enough for government work, and an 0.0.4 release, and I've got other stuff to worry about for now
  • m
  • s
    according to https://htmx.org/attributes/hx-vals/
    Copy code
    * hx-vals is inherited and can be placed on a parent element.
    * A child declaration of a variable overrides a parent declaration.
    * Input values with the same name will be overridden by variable declarations.
  • s
    But I'm observing a different behaviour with regards to A child declaration of a variable overrides a parent declaration
  • s
    Copy code
    html
<!-- GET /article/1 -->
<section>
  <h2>Latest Comments</h2>
  <div
    hx-get="/article/1/comments"
    hx-vals='{"after": 0}'
    hx-trigger="every 30s"
    hx-swap="afterbegin"
  ></div>
</section>
<!-- 
    ...30 seconds pass
    GET /article/1/comments?after=0
-->
<p hx-vals='{"after": 5}'>Comment #5</p>
<p>Comment #4</p>
<p>Comment #3</p>
<p>Comment #2</p>
<p>Comment #1</p>

<!--SWAP into html -->
<section>
  <h2>Latest Comments</h2>
  <div
    hx-get="/article/1/comments"
    hx-vals='{"after": 0}'
    hx-trigger="every 30s"
    hx-swap="afterbegin"
  >
    <p hx-vals='{"after": 5}'>Comment #5</p>
    <p>Comment #4</p>
    <p>Comment #3</p>
    <p>Comment #2</p>
    <p>Comment #1</p>
  </div>
</section>
<!--
    GET ...~30 seconds pass
    GET /article/1/comments?after=0
    should be after=5 ???
-->
  • s
    Or am I mis-interpreting the docs?
  • b
    hx-vals
    is inherited, but the 
    hx-vals
    child will only work if it has 
    hx-get
    on it.
  • s
    Thank you, I get it now
  • s
    I thought you could override the parent's hx-vals by adding a child with a new value to it
  • b
    So it turns out that 
    localStorage
    capacity varies by browser and that there's no way to check how much space is available without filling it up first. I can't think of a better way of limiting it than using the number of pages to cache, in other words how it works right now. Allowing it to fill to capacity (5MB on Chrome) doesn't seem like a very sensible thing to do.
  • b
    There might be an opportunity to improve the error handling here though, so rather than failing it frees up some space. Summarised this here: https://github.com/bigskysoftware/htmx/issues/377
  • m
  • m
    going out today or tomorrow, with some history improvements
  • m
    @User I added a config variable that allows you to have the page always refresh on a cache miss (which should be more infrequent now since we actually have a cache of size 10!)
  • s
    That's great, it might actually be more useful than you think, because getting browsers to consistently stop doing weird things with the back button can be hard.
  • s
    also let me know if you need any help with tailwind, though im no expert and don't know what yor build pipeline looks like I have used it a fair bit and can probably find some time some day.
  • s
    the whole, nothing is styled is a little wierd when you come from something like bootstrap, but after learning the classes and layout, I find it so much more liberating to design in, things just..work because you are using built in padding/marging classes instead of prebuilt components.. it is so much easier to get everything to line up nicely.
  • m
    I buy it
  • m
    I just need time
  • m
    so I wussed out for now and kept it simple
  • m
    i have about 5MB of documentation to write, so learning a new styling system isn't in the cards
  • m
    but I like the idea
  • s
    ya, i can see that.
  • s
    using something like https://play.tailwindcss.com/ to design a component in can also be a big help
  • s
    then when it looks nice you just copy it over and done 🙂
1...156157158...1146Latest