5 ms·
There's nothing philosophically or aesthetically good about <button hx-get="/confirmed" hx-trigger='confirmed' onClick="Swal.fire({title: 'C
by robertoandred 2y ago
There's nothing philosophically or aesthetically good about
<button hx-get="/confirmed"
hx-trigger='confirmed'
onClick="Swal.fire({title: 'Confirm', text:'Do you want to continue?'}).then((result)=>{
if(result.isConfirmed){
htmx.trigger(this, 'confirmed');
}
})">
Click Me
</button>
or about
<div hx-get="/clicked" hx-trigger="click[ctrlKey]">
Control Click Me
</div>
or
<form id="example-form" hx-post="/test">
<input name="example"
onkeyup="this.setCustomValidity('') // reset the validation on keyup"
hx-on:htmx:validation:validate="if(this.value != 'foo') {
this.setCustomValidity('Please enter the value foo') // set the validation error
htmx.find('#example-form').reportValidity() // report the issue
}">
</form>
Htmx's own examples push you to code that is unorganized and inaccessible.
- bdangubic 2y agoyou can take anything in this type of context and it will look unorganized and inaccessible. react, angular, svelte, whatever-framework-du-jour … and much much worse than these examples
- robertoandred 2y agoNone of those will eval element attribute strings as JS.
- bdangubic 2y agoevery one of them has warts and insane shit
- WD-42 2y agoIronically I can read through this code and know exactly what it does with no other context. I don’t even know what swal is but I can still tell what it does.
- sensanaty 2y agoI mean sure, but compare that to <button @click="doThing"> In Vue. Or just plain old JS onclick in Svelte. By comparison, HTMX is illegible
- WD-42 2y agoWhat does "doThing" do? I can't tell by reading. The above examples, while maybe slightly verbose, are completely self contained!
- sensanaty 2y agoSorry was typing that on my phone so got lazy, `doThing` would be a method/function of some sort. You can also write it inline if you so wish, like `@click="console.log('hello')"`
- yawaramin 2y agoDunno where you got the first example from, but in idiomatic htmx it would be: <button hx-get="/confirmed" hx-trigger="Do you want to continue?">Click Me</button> Hardly the horror story you are trying to write. The second example: really? The words 'get' and 'trigger' don't tell you what it's going to do? > Htmx's own examples push you to code that is unorganized and inaccessible. You realize these are demo, ie sample code right? No one is forcing you to write exactly that code? You can write organized and accessible code in your own project?
- robertoandred 2y agoGot it from right here: https://htmx.org/examples/confirm/ https://htmx.org/examples/confirm/ And the second example is not accessible. It should be a button. A library’s demo/sample code should present best practices, not worst.
- yawaramin 2y agoIt says right there: > htmx supports the hx-confirm attribute to provide a simple mechanism for confirming a user action. This uses the default confirm() function in javascript which, while trusty, may not be consistent with your applications UX....In this example we will see how to use sweetalert2 to implement a custom confirmation dialog. It's implementing a custom confirmation dialog. Customized, non-default UI/UX usually means custom-written code in any framework I'm aware of. Maybe React has implemented magical customizations since the last time I checked.
- robertoandred 2y agoReact doesn’t require you to both abandon the principles of the library and write an inline string of code to run something slightly custom when you click a button.
- yawaramin 2y agohtmx doesn't require you to write inline code in strings either, it's just a convenient compact way to do it in a demo. Also, it's not 'abandoning' any 'principles' because the 'principle' is to leverage small bits of JavaScript in a high-impact way. Eg, https://dev.to/yawaramin/handling-form-errors-in-htmx-3ncg https://dev.to/yawaramin/handling-form-errors-in-htmx-3ncg
- yellowapple 2y agoIn two of those three examples, the entirety of the disorganization and inaccessibility comes from the Javascript shoved into them. In the remaining example, IMO it looks about as organized and accessible as I can imagine as far as HTML goes - my one complaint being the use of a div instead of something more semantically meaningful.
- gloosx 2y agoAny non-standard HTML attributes look cursed to me, it seems like HTMX claims to be a solution for JavaScript excessive complexity but at the same time creating complexity in another place where is doesn't belong. There is a reason not XML but imperative C-like syntax stuck around for doing procedural things on the web
- andybak 2y agoThat's not a common case and it's not that horrific. And even if it was - I would be prepared to suffer a lot of pain to avoid the javascript build pipeline and framework churn. SPA frameworks drove me away from front-end dev and HTMX is making me consider returning.
- fud101 2y agoI feel like there is a middle ground which is being excluded. I'm leaning towards alpine.js or similar lightweight JS frameworks which have better ergonomics than react or plain JS. Webcomponents also without Vue or React are a nice solution.
- andybak 2y agoOh definitely - I'm not an absolutist. I just want to have the least amount of contact with those aspects of the Javascript ecosystem that take me further away from HTML over HTTP and progressive enhancement. And I fully accept that "web apps" probably need complex frameworks. I just think most people aren't really building web apps - they are building web sites.