intercooler-js/Lobby

intercooler & htmx discussion

1cg

@1cg

Proposal to change htmx event naming convention: bigskysoftware/htmx#109

Willem M

@wmoco_gitlab

Hi, htmx is so easy to develop with. Here a database application example: http://wmo.co/htmxapp2/static/htmxapp2.html (work in progress!) It's using htmx 0.0.6 to showcase amalegeni code generation. Have a look at demo x06, and if you are still interested then start looking at the simpler examples to get an understanding. It's using htmx <-> generated go <-> postgres-db. As stated: it's a work in progress, especially the documentation.

1cg

@1cg

@wmoco_gitlab beautiful! All in Go?

One thought would be adding some hx-push-url attributes so that the URL updates? Depends on how your backend works (you need to differentiate between an ajax request and a full page request) but that makes for bookmarkable URLs and back button support.

I'm glad you are finding it easy to work with :)

embarassing, but I finally set up my github sponsors page if anyone would like to sponsor htmx development: https://github.com/sponsors/bigskysoftware

Willem M

@wmoco_gitlab

All in go: yes. You write a mix of sql, an html-template and optionally a bit of go, all on 'the same page' (locality!), and a code generator turns it into Go code, using a template, so that you 'easily' switch to generating grpc code, or add container definitions, or generate java jdbc-template code,..

Willem M

@wmoco_gitlab

The only JS in the application is this bit, for displaying an error in the case that the server is down:

htmx.on("sendError.htmx", function(evt) {
    document.getElementById("globalerrorpane").innerHTML=
            "sendError.htmx: readyState:" +
            evt.detail.xhr.readyState + " status:" + evt.detail.xhr.status;
});

Could you guys come up with a feature in htmx so that I can drop this last line of JS, and I call my application a 'NoJS' web-application? ;-)

cscortes

@cscortes

@wmoco_gitlab sounds like an extension. Easy to generate one and add it to htmx.

cscortes

@cscortes

Don't know why, maybe I missed this, but is there a htmx:ready event? seems like the "load" event was it, but then it got reused elsewhere, but I could be misunderstanding it.

cscortes

@cscortes

nevermind.

1cg

@1cg

everyone, just a heads up: I am going to be insanely busy in July and might not be as responsive as I would like

Niall O'Brien

@niallobrien

Thanks for taking the time to respond to my recent tweets: https://twitter.com/htmx_org/status/1275170688383348737?s=20 - just wondering, do you think adding a frontend server in front of the REST API would add much latency or do you see this extra hop being very minimal in impact? Thanks

1cg

@1cg

@niallobrien My guess is that the extra hop will be minimal if the REST server is hosted in the same area. However, a big part of the advantage of htmx is removing layers in the software development process, so it's harder to recommend it when that isn't an achievable goal.

You will still get the advantages of REST/HATEOAS, but practically speaking I don't think you'll be amazed unless the server side sitting between the browser and the REST API is doing something interesting and server-sidey :)

I'd also consider how realistic is that this would eventually be a single-server hop, and how likely it is that other parts of the app might benefit from htmx eventually

Niall O'Brien

@niallobrien

Yeah, very fair points. Our current app is written in ExtJS, and hopping to another SPA-orientated framework doesn't terribly excite me atm

1cg

@1cg

Oof.

For extjs I might make an exception :)

1cg

@1cg

I had a very bad experience with ExtJS at a startup I worked for a while ago. I can't comment on the current state of affairs, and my sense was that it suffered from being early in the SPA game, but it was a bad time.

I think if you were to consider migrating to something else from ExtJS as a long term project, htmx would be an excellent choice. ;)

Niall O'Brien

@niallobrien

Agreed, but of course it would mean maintaining a frontend server to talk to the backend API. Though that's no different than using something like Next.js I guess.

1cg

@1cg

Channel, how does everyone feel about discord? Ben has suggested it as a permanent home for htmx discussion.

Niall O'Brien

@niallobrien

I personally prefer Discord

1cg

@1cg

Slack?

Is slack passé?

Ben Croker

@bencroker

Slack is primarily a team tool and doesn't work well for open communities, at least in my experience (https://craftcms.com/blog/discord).

Ed Guiness

@KiwiCoder_twitter

Could I check my understanding of Htmx parameters?

Reading the docs I note that

...an element that causes a request will include its value if it has one...

So therefore I had expected this...

        <button hx-post="serverAction"
                hx-target="closest .insert-me"
                hx-swap="afterbegin"
                value="abc"
                class="btn btn-primary btn-sm">

...to send the value "abc" to the server in Form data, but it doesn't?

What I do see is a header hx-active-element-value containing the "abc" value.

So I'm not stuck, since I can use the header, but I am a little puzzled. What do you think?

1cg

@1cg

Yeah, buttons are a little tricky

The way that forms work is that on submit they will include the clicked button value, but that is hard to do consistently from a dynamic ajax context

@/all I've created an htmx discord server here: https://htmx.org/discord

I'll monitor this chat too, but please try to migrate htmx related discussion over there

1cg

@1cg

@KiwiCoder_twitter to complete the thought: since I didn't feel I could consistently provide the value for buttons in all expected contexts, I chose to provide the active element (the usual hack work around for this button problem) as exactly that: the active element, so that there is truth in advertising.

Geoff Gallaway

@geoffeg_twitter

Re-writing a site with htmx, I've eventually gotten the place where instead of being able to replace a small component of the page, I have to basically replace the entire page, because multiple, independent parts of the page change with a single user interaction. Is there some way to cascade, chain or parallelize requests from a single trigger?

1cg

@1cg

@geoffeg_twitter is replacing the entire page bad?

do you have discord installed, we have a discord channel now: https://htmx.org/discord

Geoff Gallaway

@geoffeg_twitter

Oh, I do, thanks.

Cameron Elliott

@cameronelliott

@chg20 The docs say this: "It's worth mentioning that, if you prefer, you can use the data- prefix when using htmx", but there is no further explanation, or am I missing where that is explained more in-depth?

1cg

@1cg

@cameron-elliott you don't need to do anything further, just sub data-hx for hx

btw, the htmx chat is now over in the discord room: https://htmx.org/discord

Cameron Elliott

@cameronelliott

Sure, but how does this change the functionality? Sorry if I am thick, I am not really a web-dev. So I don't know what the data- prefix does, does it change the functionality somehow? Or is the data- prefix just for people who like to see "data-" in front of the attribute names?

@1cg Thanks for the Discord note, also.

1cg

@1cg

Oh, right. Yes, so technically using just the hx prefix is not legal HTML

Cameron Elliott

@cameronelliott

Okay, that's interesting to know, thanks for breaking that down for me.

1cg

@1cg

all the frameworks do it, but some strict verifiers will choke on it. No browsers, but someone who wants to verify strict adherence to the spec.

Cameron Elliott

@cameronelliott

Got, very interesting to learn. :)

Thank you

1cg

@1cg

practically, they are equivalent.

:beers:

glimmung

@glimmung

Hiya - I have a page using IntercoolerJS where I must remove jQuery because of a clash, so am migrating to htmx. I use a loader that I remove with ic-action="fadeOut;remove" , and in htmx I see how the trigger and target are implemented, but I cant get my head around what the equivalent of "ic-action" is - could somebody clue me in , please? Ta!

Where communities thrive

People

Repo info

Activity