53 likes
·
36.2K reads
4 comments
It’s worth being aware that this approach to front-end development produces inaccessible UIs that may only be appropriate for personal projects and prototypes.
For example, showing a modal by only adding a single class to an element means that keyboard focus isn’t moved inside it automatically and a blind screen reader user won’t even know it’s opened.
One of the benefits of a framework with critical mass community adoption is that you can easily find open source examples of accessible UI components to learn from. You’ll be on your own in that respect if you find yourself needing to productionise something built with this approach.
Very very cool and inspiring to see so much behaviour captured in so little code here. Don’t mean to take away from that at all but felt it was worth commenting to add a little footnote mention of accessibility since this approach is somewhat presented as a general purpose alternative.
Absolutely, and bear in mind this is just a small personal project where my main focus is on the Django ORM and back end. I'm sure the hypermedia approach could be used to build more accessible UIs, but as you say it would need wider community adoption and concerted effort to get there.
How do I retrieve the value of a HX-Trigger item on the client side using _hyperscript?? I want to retrieve the dynamic value of showMessage for a notification message eg added, deleted, updated messages.
return HttpResponse( status=204, headers={ "HX-Trigger": json.dumps( { "movieListChanged": None, "showMessage": f"{movie.title} added.", } ) }, )
This ought to be possible with event destructuring: hyperscript.org/docs/#event_destructuring
The htmx docs say that the value of showMessage in your case is put in the event.detail.value slot, and the hyperscript docs linked above say that you can destructure properties found either on the event or on the event.detail properties. So it should be possible to use the syntax 'showMessage(value)' (or maybe 'showMessage(detail.value)') in your hyperscript.