I'm preparing for production of my v1 app. Looking to setup some kind of latency monitoring for the server. Since htmx-based apps make a lot of requests, and my Node is single-threaded, I want to understand when singe thread becomes a bottleneck. So crucial to see the latency for hx requests. How do you typically monitor that?

My approach may sound crazy here, but I use nunjucks and write type-safe boundaries by hand. It looks like this:

js
// in controller:
const context: Context = {/*...*/}
renderTyped['template.njk'](res, context)

type Context = {
  field: string,
}


// then in a separate file: html-contract.ts:
export const renderTyped = {
    'template.njk': (res: Response<any>, context: ContextContract) => {
        res.render('template.njk', context)
    },
}
type ContextContract = {
  field: string, // if you change field Context, then the compiler will force you to go here and change field in ContextContract
}

Initially I was using ejs, then migrated to Nunjucks because I needed more advanced features in templates. But then got frustrated keeping templates and backend code in sync, and invented this hack. So far it proved to be the best thing (for me). It's simple and I get to use my favorite templating that doesn't limit me as JSX otherwise would. And it solves the contract type-safety issue.

There is one gotcha with this. Type definitions in html-contract have to be separate from your codebase types. That way if you changed types, the html-contract still expects the old types, so it demands you to change it by hand - and at this moment you understand that the template must be changed as well.

Another side-effect which turned out to be huge for me, was that when profiling for performance, I see nice

template.njk()

in stack-trace as a method name. I immediately understand what template took long time to render. Compared to generic

render()

in stacktrace, it's very satisfying to work with.

Is there an htmx version of copytoclipboard? Thanks.

It's not the kind of thing that HTMX handles, because there's no AJAX component to copytoclipboard, but it's very easy in javascript:

js
async function copyLink() {
  const domain = window.location.origin
  navigator.clipboard.writeText(`${domain}/my-link-here`)
}

And you can just

onclick="copyLink()"

to the element of your choosing

Some thoughts on the

hx-on

proposal, since I'm the one who made it: > Isn’t it basically x-on from alpine.js? I know a lot of people like using alpinejs here, but "another library has a similar feature" is a sign that the feature is useful, and might benefit from being included in this library > imo this is exactly what hyperscript is for hyperscript is for specifying what happens after a browser interaction (an event, a click, etc). The

hx-on

proposal adds an additional when that lets people trigger the effects described by hyperscript within the event-processing framework set up automatically by HTMX. hyperscript can do it with "on", but you shouldn't have to pull in a whole additional library to take advantage of something HTMX is already doing for you I'm not really wedded to

hx-on-*

, because while that might be useful and idiomatic, it's a big surface area that deserves some consideration. I really want to be able to call out to some action based on an HTMX trigger, i.e.

hx-on-trigger

. You can already do this with events, but you cannot specify them inline, which means that you are responsible for setting and removing the listener (and not setting a new listener each time another element is swapped in). The

hx-

attributes are basically just inline event listeners that HTMX takes care of adding and cleaning up for you, so it would be very handy to extend that paradigm to HTMX's existing client-side triggers (whether you want to use hyperscript, alpinejs, or just plain JS without additional libraries)

is there an example of pagination in htmx? could only find the "Click To Load" and "Infinite Scroll" example on the website

Worth checking out this section of the book: https://hypermedia.systems/book/htmx-in-action/#_another_application_improvement_paging

why is htmx so good

sorry was drunk

htmx is so good - why?

Are you asking why it's so awesome, or are you looking for a defense from those who believe it to be so?

I wasn't convinced htmx was the way until I saw the memes section on the website.

At the risk of own-horn-tooting, I think what htmx does really well is extend a great concept, hypermedia, to its logical conclusion. Hypermedia is such a great concept that HTML, even with only two hypermedia controls and two HTTP actions available, was so good that the remainder of the idea wasn't necessary for broad adoption. With htmx we are just completing the idea, and trying to fold in other web technologies (e.g. transitions) along the way. That makes htmx: - relatively small - relatively powerful - relatively consistent when compared with other approaches, which, for the right person with the right mindset, feels very good.

The single greatest thing about htmx is that it lets me not touch javascript for 80% of my interactions and that is priceless

Wait what

Well maybe they fixed it

but when I was working with svelte last time, if you ever did

arr[0] = value

or

object.prop = value

, or called a function that mutates the object inplace, the compiler does not actually know that the values was updated

it only tracks assignments to "top-level" variables

*tracked

So you have to somehow let it know about it. You could make a store, refactor your code, use immutable operations or, the simplest way,

arr = arr

maybe this has changed, maybe not

Oh yeah

That's most likely still a thing

The best way about htmx is that you can use it with whatever other language you want, whatever template engine suits you best. Also I really like the fact it doesn’t require any build step, just plug script tag into your HTML document and you are ready to go.