intercooler-js/Lobby

intercooler & htmx discussion

1cg

@1cg

there are a few possibilities

@inouire_twitter I am going to be cranking on docs tonight (I have to do my day job today unfortunately) and tomorrow lets talk. You may be the first official user of hyperscript in the world. Brave man!

1cg

@1cg

Https://dev.hyperscript.org

Edouard

@inouire_twitter

cool !

I'll try it out

Edouard

@inouire_twitter

It does not work unless unless unsafe-eval in enabled in my CSPs :(
Is it really mandatory ? (I guess it's for the "call" feature?)
Another thing, do you plan to add a built-in visibility toggling feature? (That's what I use the most, nut I know I could do it with css classes)

Thanks !

1cg

@1cg

Unfortunately yes we transpile to JavaScript so it is necessary for now. Eventually I’d like to offer a command line tool to precompile everything but that’s a way off. Can you post the html in question and I can make sure there is a good solution for it?

Seth Livingston

@sethlivingston

can i put an hx-post and hx-target on the outer form, and then add something to the select elements inside the form that just says, submit the form when you change?

i could see how that's not an htmx concern

<form>
  <select ... hx-post="/foo" hx-target="#data-table">
  ...
  <select ... hx-post="/foo" hx-target="#data-table">
</form>

i'm just trying to remove that duplication

Seth Livingston

@sethlivingston

also, is there a way to throttle the posts and gets? so if the user make a quick change to the first AND second select, i'd like to combine them into a single post call

1cg

@1cg

you can move the hx-target up

and you can move the post up too, but you'll need to explicitly catch the "change" event on the form, since it will bubbling

From twitter:

Alright, happy to announce htmx 0.0.5:

https://htmx.org/posts/2020-6-19-htmx-0.0.5-is-released/

and the shiny, new and almost certainly completely broken hyperscript 0.0.1-alpha2:

https://hyperscript.org

And as luck would have it 0.0.5 shipped with a "throttle" modifier on the hx-trigger attribute.

Looks like I didn't document it though :/

https://htmx.org/attributes/hx-trigger/

it's like delay

hx-trigger="changed throttle:100ms"

1cg

@1cg

updated the docs for hx-trigger

Seth Livingston

@sethlivingston

hahaha that's funny about the hx-trigger throttle. thank you!

two great releases

Cameron Elliott

@cameronelliott

Hello, I just discovered Intercooler/Htmx, and boy is it exciting! I am working on developing a site, but I am really a 99% backend guy.

Two question: Should I be choosing Htmx at this point to get started?? Also, are there any articles/posts/etc on the different ways to setup authentication with Intercooler? ie: (auth0, jwt, something else??) Thanks a lot

Cameron Elliott

@cameronelliott

Actually, maybe I should be asking what is the simplest way to put authentication in front of Intercooler/Htmx ?? That's really the big puzzling item for me at the moment.

cscortes

@cscortes

@chg20 Just checking if I missed something, but what happened to handling localstorage variables as parameters?

1cg

@1cg

@cscortes I didn't port that to htmx, not sure I am going to. Extension?

@cameron-elliott I would just use whatever auth mechanism is standard for your preferred web framework

Do authentication the "normal" way (no htmx) and then use htmx after the user is logged in.

Once you have a session cookie it should be sent along with all ajax requests, so you can use the normal authentication mechanism of your server side framework

Geoff Gallaway

@geoffeg_twitter

With htmx, is there some way to trigger an event from Javascript? I'm using a geolocation API, and I'd like to reload a part of the page from the server when the location becomes available.

1cg

@1cg

@geoffeg_twitter you can add a custom trigger event to the element you want to refresh and then trigger it manually from javascript:

<div id="map-data" hx-get="/some/url" hx-trigger="mapUpdated">
   ...
</div>
<script>
  htmx.trigger(htmx.find("#map-data"), "mapUpdated")
</script>

Where the javscript is fired in the callback from your geolocation API

Geoff Gallaway

@geoffeg_twitter

Great, thanks!

Cameron Elliott

@cameronelliott

@chg20 Thank you for the insight! I very excited about Htmx!

1cg

@1cg

no prob, glad to help

Alexander Graef

@pzTV_twitter

Just trying out htmx, as a big fan of intercooler. Is there an easy way to sync page titles and specific meta data, when using boost ? Thanks

Alejandro Schmeichler

@jreviews

@chg20 Just wanted to quickly stop by and say thanks for all the work you and other volunteers are putting into this tool! Just tried the latest update to test how swapping an element with inputs with a copy of itself works, and even without morphdom, input focus is preserved! Very cool.

1cg

@1cg

@pzTV_twitter We don't do anything with titles or metadata right now. I'm open to suggestions and/or extensions though.

@jreviews glad to hear it is working well for you, I'm happy with how it has developed :)

cscortes

@cscortes

@chg20 okay, I will see if I can add ic-localvars as a extension.

Matthew Blott

@matthewblott

Hi guys, I've just started using htmx, seems pretty cool - does it work with turbolinks? I couldn't find any info, hence the reason for posting the question here, thanks :-)

Matthew Blott

@matthewblott

Hmm, I just tried the following with no joy :-(

document.addEventListener('turbolinks:load', () => {
  htmx.trigger(document.body, 'load.htmx', {});
});

1cg

@1cg

hey @matthewblott try this:

document.addEventListener('turbolinks:load', () => {
  htmx.processNode(document.body);
});

Alexander Graef

@pzTV_twitter

@pzTV_twitter We don't do anything with titles or metadata right now. I'm open to suggestions and/or extensions though.

Thanks, I guess I can use the response header / event trigger for that.

Matthew Blott

@matthewblott

It just throws an error to the console ...

Uncaught TypeError: htmx.processNode is not a function
    at HTMLDocument.<anonymous> (posttest?Message=abc:51)
    at Object.e.dispatch (turbolinks.min.js:9)
    at r.notifyApplicationAfterPageLoad (turbolinks.min.js:10)
    at r.pageLoaded (turbolinks.min.js:10)
    at turbolinks.min.js:9
(anonymous) @ posttest?Message=abc:51
e.dispatch @ turbolinks.min.js:9
r.notifyApplicationAfterPageLoad @ turbolinks.min.js:10
r.pageLoaded @ turbolinks.min.js:10
(anonymous) @ turbolinks.min.js:9

Matthew Blott

@matthewblott

Okay, I'm not a JavaScript programmer (hence the reason for using this library) but my rudimentary skills enabled me to find this workaround.

//====================================================================
// Initialization
//====================================================================

function ready(fn) {

  // if (getDocument().readyState !== 'loading') {
  //       fn();
  //   } else {
  //       getDocument().addEventListener('DOMContentLoaded', fn);
  //   }

  document.addEventListener('turbolinks:load', () => {
    fn();
  });

}

1cg

@1cg

@matthewblott sorry, I got the code wrong above

Where communities thrive

People

Repo info

Activity