https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • b
    Hugo good
  • m
    i am right there
  • b
    do it
  • b
    join the gopher side
  • b
    we have cookies
  • b
    and other assorted snacks
  • m

    https://www.youtube.com/watch?v=1HrdMylx7tQ▾

  • l
    Seconded. I converted a church website to use Hugo before I passed it on to others to maintain (had previously used Hexo, so it wasn't a leap). The only issues I've had from them in the 2 years they've been running it have been related to my access key expiring for the scheduled job that updated the site on Mondays at 7am. LOL It would probably render the htmx website in < 500ms.
  • l
    Not related to Hugo - I just put htmx on my annual self-assessment. 🙂 Since it's part of a proof-of-concept that they haven't scheduled time to see yet, this is their first introduction to it. I hope the boss is intrigued!
  • g
    Yes. Hugo is the right answer. Migrating would still be a bunch of work, but Hugo is a joy!
  • w
    I just now realized that I never picked up the starter kit and therefore skipped step zero https://twitter.com/htmx_org/status/1306234341056344065
  • l
    Is there any way to hide and show in another div at hyperscript ?
  • l
    when i make antoher div to display:none
  • r
    You're looking for To toggle display on every div on the page, literally: 
    _="on click tell <div/> toggle *display"
  • r
    Copy code
    html
<div class="hey" _="on click tell .hey toggle *display">hello</div>
    more realistic lol
  • l
    Perfect... thanks it's working
  • r
    you're welcome
  • f
    how does alpine listen to htmx:afterRequest ? You submit something with htmx and want to do some action after the request. In hypertext it would be like this. _="on htmx:afterRequest put '' into #item's value" What is equivalent in alpine or vanila js?
  • r
    A really easy way is to use
  • r
    But you can do it in vanilla too.
  • r
    Its just a js event like any other, there's nothing special about it.
  • f
    Imagine you have a form, lets say a todo list, on submitting the form 2 actions can happen. 1. you got a validation error on some field and want to display the error under the field: example todo must be at least 5 chars long 2. you have a success and want to display the result somewhere in the todo list. I currently only understand how you do 1 at a time. But not how to do the action depending on 1 or 2? either add to list or either show validation error?
  • b
    Handle it server-side from the one endpoint: if success, return success fragment; if error, return error fragment
  • r
    Another nice trick you can use here is return inline js or hyperscript to invoke the post-success interactions: 1. Form validation, just return the fresh form with errors, maybe add some of these guys to the errors for extra niceness: 
    _="on click transition opacity to 0 then remove me"
    2. On success, return an inline script 
    <script>...
    that does the work, or attach some hyperscript to one of the returning elements.
  • r
    there's a LOT of ways to skin this cat basically, there's probably even a pure htmx way i'm not thinking of right now
  • f
    looking for the right pattern working with django
  • b
    As an add on, the hx-sync form validation example may be helpful: https://htmx.org/attributes/hx-sync/
  • r
    Ohhh here's a pure htmx one right here: On form submit success just return 
    <div hx-trigger="load" hx-target=".other_element" hx-get="/endpoint" />
  • r
    Basically fires a second htmx query using the fresh success content, that does the other swap.
  • r
    Yeah finding patterns that are most elegant is the biggest challenge with working in htmx I find. 😆
1...738739740...1146Latest