Live data from Hacker News

Show HN: htmz – a low power tool for HTML

leanrada.com

241–250 of 256 posts

Re: Show HN: htmz – a low power tool for HTML

#241
post #164

Earlier quoted context omitted.

I'm the creator of htmx and think this is a great library/snippet. Much closer to what htmx-like functionality in HTML would/should look like in that it is following existing norms (iframes, the target attribute) much more closely than htmx. From a practical perspective, a lot of the bulk of htmx is bound up in things like history support, collecting inputs, a lot of callbacks/events to allow people to plug into thin…

Thanks for HTMX, I think it's showing the world what the web browser could be. I'm going to be doing a lot of web pages in HTMX in the next couple of years, and it will be much easier to develop/debug than javascript.

jQuery has easily done it for years: $(selector).load(url)

Re: Show HN: htmz – a low power tool for HTML

#242
post #180

Further size reduction, you don't need the `this.` on the inline event listener, so it can be: `contentWindow.location.hash` and `contentDocument.body.childNodes` instead of `this.contentWindow.location.hash` or `this.contentDocument.body.childNodes`. This will shave another 10 bytes off the snippet :D

If you write `document.querySelector(contentWindow.location.hash||null)?.outerHTML=contentDocument.body.innerHTML`, you'll make it even shorter.

Re: Show HN: htmz – a low power tool for HTML

#243

Earlier quoted context omitted.

Yeah it breaks without JS. You could add the iframe behind JS, so the target would default to a new tab. But the server would still be designed to return HTML fragments. I never found a way for a server to check if the originating request is for an iframe or a new tab. It's not quite a graceful degradation.

> I never found a way for a server to check if the originating request is for an iframe or a new tab. There is no such technique. One way to distinguish is to pick a URL convention and modify the URL (before the hash) of the iframe URL. For example, add ?iframe=true to the URL, and then have the server check for that. Perhaps more usefully you could include information about the parent URL, e.g. url += '?parent=${doc…

There is a new request header: `Sec-Fetch-Dest: iframe`

Re: Show HN: htmz – a low power tool for HTML

#244
post #9

Given that this uses `target`, doesn't it mean that unlike htmx you can't easily make this gracefully degrade when JS isn't enabled? And, yes, I know, saying "when JS isn't enabled" in 2024 is a bit like saying "when the user is on Mars and has a 10 minute RTT" but forgive me for being an idealist.

Yeah it breaks without JS. You could add the iframe behind JS, so the target would default to a new tab. But the server would still be designed to return HTML fragments. I never found a way for a server to check if the originating request is for an iframe or a new tab. It's not quite a graceful degradation.

There is a new request header: `Sec-Fetch-Dest: iframe`

Re: Show HN: htmz – a low power tool for HTML

#245

I wonder how feasible it is to create htmz / htmx -like lightweight library with the support for React/Vue/Stelve using web components. I agree that 90% of the use-cases you don’t need React but for the last 10%, most of us are stuck with these bloated frameworks. Astro has a similar idea but it’s working as a full framework instead of being a library. Considering the limitations with Astro, I guess the biggest bottl…

There is https://github.com/justinfagnani/html-include-element as a web component.

Re: Show HN: htmz – a low power tool for HTML

#246

I happened to spend a little more time on htmx this weekend which htmz was inspired by. htmx/htmz does do well for simple use cases, htmx does well for SSR heavy cases(e.g. django). in the end I returned to vue.js, with a few lines code(put in a library) I can mimic htmx easily plus all the extra stuff vue.js brings, and no I do not need use a build tool for that, vuejs works fine via CDN inside a html for simple use…

This. I think Vue.js "scales down" excellently. You can just load it via the cdn and write some widgets and go about your day. In the past I've tried to make use of "microframeworks" like alpine.js and such but often found myself returning to Vue.js.

Have a look at Petite Vue by Evan You.

Re: Show HN: htmz – a low power tool for HTML

#247
post #240

Well, you are using javascript anyway so here it is a 163 bytes solution without the back button problem and iframe hack: onclick=async e=>{x=e.target.dataset.x;if(x){e.preventDefault();document.querySelector(x).innerHTML=await fetch(e.target.href).then(r=>r.text())}} Hi doesn't works with form though.

You can make it work with forms by using onsubmit and e.target.action

Re: Show HN: htmz – a low power tool for HTML

#248

Zero noscript fallback. Please don't use this.

You can easily add no-js fallback by setting base target in JS instead of HTML. Then append e.g. `?fullpage` to HTML elements and remove this query param with JS. With no JS, links will open in the same window with `?fullpage` query param, which return a full page from the backend instead of a fragment.

Re: Show HN: htmz – a low power tool for HTML

#250

I'm somewhat frightened to ask if there's some special voodoo need for leaving off the quotes on htmz...

Nah it's a stylistic thing. It's so that you can see the `=htmz>` logo in code if you order the target attribute last :D

:O
Post reply on HN