17 ms·
Show HN: htmz – a low power tool for HTML
- fractaledmind 3y agoI cannot believe how simple and elegant this is. Using an iframe as a request/response proxy to enable targeted replacement is just
- naasking 3y agoYou accidentally the
- pwdisswordfishc 3y agoOh great, yet another way to break "Copy link target".
- Uptrenda 3y agoHTML is already lightweight. It takes a very low IQ to make it seem complex.
- account42 3y agoZero noscript fallback. Please don't use this.
- niutech 3y agoYou can easily add no-js fallback by setting base target in JS instead of HTML. Then append e.g. `?fullpage` to HTML <a> 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.
- nymanjon 3y agoA commenter above mentioned that when you target an `iframe` it sends back the header `Sec-Fetch-Dest: iframe`, so if it doesn't have that then you know it requires the full page and not the snippet. So, yes, easy no JS fall back by dynamically adding the `base` tag. Nothing else needed.
- niutech 3y agoNot all browsers support `Sec-Fetch-Dest: iframe`, URL param works everywhere.
- deleted 3y ago[deleted]
- revskill 3y agoWhy not htmy ?
- naasking 3y agoI'm guessing it's like "htmx-zero", given it's a superlightweight version of what htmx is doing.
- Kalabasa 3y agoGood guess! The initial intention was to use iframes. And so zero js needed. But iframes can't do * Deletion (e.g complete a todo list item) * Tail end append (e.g lazy loading infinite scroll list) So i pivoted to js...
- mofosyne 3y agoOh, if this snippet is just a search and replacer... would it be possible for this to be a preprocessor as well? Would allow for noJS websites.
- gpnt 3y agoWell, you are using javascript anyway so here it is a 163 bytes solution without the back button problem and iframe hack: <script>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())}}</script> <a href="/somepage" data-x="#lib">Hi</a> <div id="lib"></div> doesn't works with form though.
- niutech 3y agoYou can make it work with forms by using onsubmit and e.target.action
- mlekoszek 3y agoLate to the party but I am so in love with that logo. And every other bit of this.
- nymanjon 3y agoThis is fantastic. Right now in my PWA I'm using a little library I created called `html-form` (HTMF) and I need to implement it as a SPA to avoid service worker fetching on every page change. So, I used a similar attribute to `hx-select`. But it adds quite a bit of code to the code base. Using your pattern I can remove all that added code and I can stop using hash navigation. Nice and simple. Thank you for putting your code out in the public so I can learn from it!
- nymanjon 3y agoPlaying with the code it doesn't fit my use case. It seems like it would be really cool if you have a very narrow use case and that use case doesn't grow. Having your browser parse any scripts you have twice doesn't make much sense. Also, working with eventing would be an interesting problem to solve. I guess you would need to add an element for that, maybe something like `<template type=event>{"my-event": "my event data"}</template>`. So, it seems like this pattern could probably take you quite a ways. But the main issue I have is that you would need to parse all that JS out twice by the browser. But if you don't have the need for any `script` tags in what you pass back it would be pretty nice. Also, it wouldn't work for graceful degradation as the server wouldn't know if you need the whole page or a segment. As HTMX adds a header that lets you know that JavaScript is being used by the front end. Overall, I think it is really cool and it would be neat to see how far you could take this.
- lyxsus 3y agoThis is incredible. I really want it to take off.
- Alifatisk 3y agoKind of impressive that the installation script was that small.
- turnsout 3y agoThat’s not the installation script, it’s the entire “framework!”
- sodimel 3y agoSimple and powerful, as the vanilla web should be. Thank you for this (small) gem :)
- kickofline 3y agoAt what point does it cease to be a framework and become just a regular line of code?
- p4bl0 3y agoFrom the FAQ: > * Is htmz a library or a framework? > htmz is a snippet.
- vcg3rd 3y agoFrom the README: > htmz is a minimalist HTML microframework So, some ambiguity.
- Kalabasa 3y agoAuthor here. to be honest I have no idea
- joshfarrant 3y agoFinally, a Hacker News comment I can relate to.
- alexpetros 3y agoHah that's amazing
- p4bl0 3y agoThis is a neat hack, I like it :). Thanks for sharing.
- internet2000 3y agoApparently it breaks your back button too.
- rnmmrnm 3y agoIf you're talking about the tabs demo, I think it's reasonable for some use cases to respect back button as previous tab. as long as it's easy to opt out.
- troupo 3y agoThe inline editing demo also has a separate URL for the "we're editing" state
- Kalabasa 3y agoYeah it's terrible in some use cases. If only HTML provided a way to navigate <a> without adding a history entry, like <a nohistory href=...>. If this was a real product i would market it as "Native time travel debugging! Go through your application state as you would go through your browser history!"
- devmor 3y agoThat would be terrible UX. The real answer is that web developers should stop using anchor tags to target non-stateful links and should properly handle navigation to pages that are short lived. But that battle is a bit like asking people to use their turn signals when merging.
- ComplexSystems 3y agoCould you perhaps modify the iframe to clear the new URL from history using JavaScript? You could also make it optional; perhaps there'd be syntax like <a href="asdf.html#myElement;no history">...</a> or something. Probably would be better to make the no history default though.
- jdp 3y agoReminds me of pjax [1], except pjax works over XHR instead of an iframe and uses pushState by default to keep the back button working. [1]: https://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax
- captn3m0 3y agoGitHub itself used pjax heavily and I liked those interactions far more than the newer React ones, the HTML was much more semantic for one, with middle click always being respected.
- darylteo 3y agoNon jQuery version (and relatively newer ) https://github.com/MoOx/pjax https://github.com/MoOx/pjax
- Arch-TK 3y agoGiven 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.
- beretguy 3y agoI use Disable JavaScript extension with js disabled by default and only enable it if website is broken. https://addons.mozilla.org/en-US/firefox/addon/disable-javascript/ https://addons.mozilla.org/en-US/firefox/addon/disable-javas...
- efilife 3y agoYou should use uMatrix so you can only enable the scripts necessary to unbreak the site
- SushiHippie 3y agoOr uBlock origin (from the same author) which is still maintained
- pmontra 3y agoIt is maintained but the UI for dealing with JS is horribly time consuming and overly complex compared to uMatrix. I'll never really understood it and I keep using uMatrix on my laptop. I switched to NoScript on my phone. Maybe I can install uMatrix now if Mozilla really unblocked many extensions. If uMatrix stops working, I'll switch to NoScript everywhere for JS and uBO for all the other issues.
- samtheprogram 3y agoThis is what I do and it works great - uBlock Origin defaults, and NoScript. It’s surprising how well the internet works without JavaScript.
- tambourine_man 3y agoThat's a great hack and it shows how close the browser is to offering SPA natively. Just a few attributes and we could avoid the iframe. It's probably more useful to prove a point than an actual day to day tool. And the point seems to be: htmx is too much trouble for what it offers. We just need HTML native ajax.
- larodi 3y agoYou know... we've been doing something very similar 20 years ago for a stats dashboard web app - reloading only DIVs that need with new content server-generated. We didn't even bother to recreate the DOM, but directly innerHTML = content loaded. Perl on the back-end and some very tiny JS on the front-end. Do I need to tell U that this worked as absolute charm and was blazing fast. The only considerable downside was that indeed lots of traffic was going back and forth. But then 20 years later latency is much lower, traffic much cheaper, CPUs also, and I am very happy to see more and more people realize this bare-bones approach was actually a good thing to consider (the author lists the downsides). To me such approach is much more web-native in comparison to abomination UI frameworks, that try to reinvent presentation marginalizing the browser to be nothing more than a drawing surface. But guess what - their primary goal is to save on this network latency, that is anyway going down down down down with every year. The htmlz/htmlx approach is indeed much simpler and easy to live with in a large project, it is really sad that we put so much logic in the front-end in recent years...
- alexpetros 3y ago"Just a few attributes and we could avoid the iframe" could be the htmx/z motto
- Kalabasa 3y agoYes this was a response to htmx. It was a half-parody half-I wanna make it work project. Like https://github.com/vilgacx/aki https://github.com/vilgacx/aki I would fear if anyone wants to use this in production BUT I would love someone to get inspired and use the concepts rather than the actual code. Hmm maybe i should write a disclaimer...
- 3y ago
- azornathogron 3y agoThis is a glorious demonstration of someone really understanding the platform. I don't expect I would ever use it, but I think it's excellent.
- simplify 3y agoUnderstanding or not, certain decisions like overriding the semantic meaning of a hash in a url doesn't seem to be working with the platform. A better version would be adding a target to a `data-` attribute. It's a fun project overall, though.
- yawaramin 3y agoBut the hash doesn't have a semantic meaning when it is in an href or action attribute, because it is stripped out before the request is sent to the server. The hash only has a meaning when it's in the URL bar. That's kinda the point of this hack.
- sam2426679 3y agoOP addresses this at “We can do a hack that enables you to write the target ID selector in the target attribute itself!”
- mirekrusin 3y agoJust use target, if it starts with #, it's replacement, otherwise behaves as is.
- overstay8930 3y agohtmx in shambles /s
- recursivedoubts 3y agoalways has been
- hanniabu 3y ago> Not even a backend is required. > In a nutshell, htmz lets you swap page fragments with HTML from the server using vanilla HTML code. So a backend is needed....
- Kalabasa 3y agoOops, it's just a mistake on word choice in the nutshell summary. This works on static files like on a local filesystem (in that case the "server" is the local filesystem that serves me files that happen to be html) Edit: on second thought, direct filesystem access has different origins which would mess with iframes. I'm not on the computer now to test. But at the very least you need a basic web server that serves files.
- rizky05 3y ago[dead]
- spankalee 3y agoReusing the <slot> element like this is a bad idea - it has very specific behavior in browsers. In a shadow root it'll be replaced by the children of the host element, no matter what the library does. HTML already has an inert <output> element for things like this.
- KatrinaKitten 3y agoSlight correction - <output> is not inert for users who use screen readers, though in this case it shouldn't cause issues. If you need an actual inert element, use a div.
- Kalabasa 3y agoThanks for the suggestion, I'll update the examples. Edit: that is, after I wake up...
- Kalabasa 3y agoWoke up... It's at the top of HN... Anyway I chose div instead thanks to the other commenter https://github.com/Kalabasa/htmz/commit/153a5a448b60a0898604380f23e5781b5736e798 https://github.com/Kalabasa/htmz/commit/153a5a448b60a0898604...
- sublinear 3y agoThis seems likely to have issues with most "Content-Security-Policy" rules because of the inline script in "onload" and the iframe. Makes it a non starter in real world production environments.
- moritzwarhier 3y agoIt's a fun one liner, but what is the use case? When I want to replace some element using JS as the user clicks a link, it is progressive enhancement. Usually links enable history navigation. If you do stuff like this, you need to code it in a way that uses the history API to fix it for users with JS enabled (majority of users). If you don't want history navigation and URLs, why do you use links? This breaks history navigation and bfcache for no good reason, or am I missing something? bfcache already provides SPA-like speed, or even better. No need to avoid regular links if you e.g. link from a list to a detail page. Also: > No preventDefaults. No hidden layers. Real DOM, real interactions. No VDOM, no click listeners. No AJAX, no fetch. No reinventing browsers. So many words saying nothing, just to cater to some sentiment. fetch is part of browsers by the way. If I need to replace an element as the user clicks a link, I can code it myself (without using this abstraction layer, however thin it is). I also don't need an iframe for doing this. And preventDefault is aptly named and a good reminder for what progressive enhancement should do. If it's not meant to be a link, don't use a link. And if you want to react to clicks, you know, use click listeners (event handlers). Where's the problem? It is understandable to developers and uses native browser functionality as intended. As opposed to this hack, which I'd find pretty glaring, bug-prone and hard to understand, would I have to debug an issue on some page that uses this snippet. To me this seems like useless indirection and technical debt. If you really need low-code AJAX "links" (who says you need that, if you don't want an SPA?), code yourself some understandable JS that is properly tailored to your site and respects history navigation, or use a library that is a good fit for your concrete use case. As a joke, I like it though…
- oneshtein 3y agoIt can be used in Markdown with HTML enabled but JavaScript disabled.
- moritzwarhier 3y agoHaha I hope not ^^
- scwoodal 3y agoThe use case is a fun one liner.
- keepamovin 3y agoThis is great. I had an idea to use named iframes and targeted forms for simple, server-rendered pages with built-in style-scoped widgets, without leaning into complex JS client-side. But, I never simplified it well nor expressed a polished and elegant realization of that idea, as this htmz looks to me to be. A reminder to never give up good ideas, focus on excellence, and focus on refinement to a completion of an idea, and communicate well! Also the comments here: - This is a great hack and shows how close the browser is to offering SPA natively. - This is a glorious demonstration of someone really understanding the platform. - Simple and powerful, as the vanilla web should be. Thank you for this (small) gem :) - This is a neat hack, I like it :). Thanks for sharing. are exactly what I hoped to hear reflected about my creation, and are totally on point for what this type of thing should be. Close to the web-grain, using the given material of the web in the best way possible. Fuck yeah! :) Thank you for being a genius! :) And for inspiring about what's possible! :) P.S - also your communication and marketing skills are top notch! I think the way you have communicated this elegant technical thing, from the choice of name, API, examples, copy -- is just awesome. I learn from it! :)
- cschep 3y agothanks for a high quality top comment!
- safety1st 3y agoI am a little bit confused because your comments seem to imply initially that htmz is written by someone other than you, and then later that you wrote htmz. Who are you and what is your relationship with htmz and its creators? Please be honest and refrain from violating federal law and FTC guidelines in your response.
- RamblingCTO 3y agoWho the f are you then?
- jkingsman 3y agoI don't think this person is implying that at all (nor do I think that anyone needs to be trotting out federal law and FTC guidelines here :). "I had an idea to use named iframes [...] But, I never simplified it well nor expressed a polished and elegant realization of that idea, as this htmz looks to me to be. [...] the comments here [...] are exactly what I hoped to hear reflected about my creation, and are totally on point for what this type of thing should be." Seems pretty clear to me. This person had a similar idea but didn't complete it, and finds the flavor of appreciative "nice hack" energy (as opposed to "this is enterprise" or "this is a revolution" energy, I guess) appropriate for the project and the type of feedback they had wanted to hear had they completed their project.
- deleted 3y ago[deleted]
- synergy20 3y agoI 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 cases the way htmx does, but vuejs can do more, e.g. draw live chart from data returned via ajax calls where vuejs is json by default, htmx is html by default instead.
- angra_mainyu 3y agoThis. 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.
- niutech 3y agoHave a look at Petite Vue by Evan You.
- synergy20 3y agosame here, spent lots of time poking around, even tried svelte and react.js(heavily), and now firmly back to vue.js. vue.js does not mix SSR with SPA into one, make it much simpler compare to what React.js is doing today, and it provides way more than alpine.js and htmx etc, it's the best one in practice for me now.
- buremba 3y agoI also started with Vue and switched to React for work but still miss the simplicity of Vue. Sadly, it didn't take off as React.
- synergy20 3y agoReact has Meta behind it, Vue.js is a non profit project by individuals, very different, good news is that vue.js is good enough for serious projects nowadays and I especially like the fact that it does not mix SSR into SPA to make things complicated.
- deleted 3y ago[deleted]
- spankalee 3y agoI think there's a pretty strong argument at this point for this kind of replacing DOM with a response behavior being part of the platform. I think the first step would be an element that lets you load external content into the page declaratively. There's a spec issue open for this: https://github.com/whatwg/html/issues/2791 https://github.com/whatwg/html/issues/2791 And my custom element implementation of the idea: https://www.npmjs.com/package/html-include-element https://www.npmjs.com/package/html-include-element Then HTML could support these elements being targets of links.
- naasking 3y agoiframe is that kind of element, if they hadn't added the brain dead srcdoc attribute to it to show inline content. I think some of the proposals I see in that thread are kind of interesting, but to do it properly requires a new MIME type for html fragments, eg. text/html-fragment. This is arguably what htmx should also be using for fragments. I do kind of like the idea of adding this as an attribute to some existing elements, and they show the inner content by default until the target is loaded. Basically like adding an iframe-like rendering mode to existing elements. Then you could implement htmx's hx-boost behaviour just by setting this mode on the body element and using the htmz trick of links naming the body as a target.
- hnbad 3y agoWhen I read your comment I thought "hang on, I remember this discussion from years ago". Looks like the issue dates back to 2017 indeed. I remember this idea being shelved because of concerns around the handling of things like scripts and stylesheets, especially in the context of the idea of HTML imports (which were the next big thing when Google's Web Components advocates harassed other JS frameworks for not being Polymer - until it turned out that HTML imports had to be shelved and Polymer ended up being shelved in favor of the next big thing Google pushed out).
- flanbiscuit 3y agoWas curious to see the code so found the GitHub. Posting it here in case anyone is interested since the author doesn't link to it on the site and also the npm page doesnt link to it either https://github.com/Kalabasa/htmz https://github.com/Kalabasa/htmz
- atahanacar 3y agoIt is right at the end of the first sentence.
- flanbiscuit 3y agooh woops! I must have scrolled right past it too quick. sorry about that
- qwertygnu 3y agoha, I'm working on a dev-side version similar to this (mostly just for me, but hopefully publishable). I opted for an entirely pre-deplopyment build tool, where you just put <custom-tag custom-param="value"></custom-tag> in your HTML, run the build and it outputs the filled in file somewhere else. I know its functionality is very similar to many web frameworks (e.g. React, handlebars) but it does one thing.
- koliber 3y agoIn 2001 or so, I was building an HTML based email client. We used a hidden iframe to execute JS to load data from the server and manipulate the DOM with the result. It was not quite as neat and elegant as this—the browser support was not there. However, the basic mechanism was the same. It warms my heart to see the basic mechanism in such a compact package, without libraries upon libraries and machinations to make things work. This is probably perfect for 90% or so use cases where react or similar FE frameworks are used at the moment. We later used to joke that we used Ajax before Ajax was a thing.
- LispSporks22 3y agoThis brings back memories. We did the same thing with a giant Fortran 77 app turned CGI app. It was my first job, fun times.
- smrtinsert 3y agoI think I posted it before, but I had SPA using Spring Webflow running in dom nodes (no iframes required) with animation event handling, csrf, all back around 2006 or so. The calling html was also pure save for a jQuery include at the top and my app include. The backend used JSP. No back button issues, no client or server state (I used a db instead of some options webflow gives you), it was a dream. Completely lost on the company I worked for at the time. I was up and running with a new user flow, in half a day or so. Static blocks suddenly would "do stuff" from the perspective of the business team in about half a day. This is the problem with technology. When it works well and really solves the problem, it is invisible. No one gets promoted for invisible.
- deleted 3y ago[deleted]
- xutopia 3y agoOmg! Same story for me! I was working in a billing company and we used an iframe that we'd reload with JS that would run to change the DOM. Around the same time as well!
- atum47 3y agoI'll take a deeper look in the code later, but it seems useful. If been using the window location hash to do some simple navigation on my SPA, but i use JS. (Just hide all sections and shows the one that matches the hash i.e.: #main
- Kalabasa 3y ago> hide all sections and shows the one that matches the hash Oh there is a good hack you can do here! I've been meaning to write a blog post about this exact thing! See CSS `:target` selector section { display: none; } section:target { display: block; }
- tambourine_man 3y agoYou’re full of great hacks. That one I may actually use. Looking forward to that article.
- deleted 3y ago[deleted]
- franky47 3y agoIf anyone is wondering, `htmy` is available on NPM, and `htmx` there is not what you think.
- andrewmcwatters 3y agoExcept using a URL fragment refers to a “resource that is subordinate to another, primary resource” not a destination. They point out the URL abuse, so why do it? Slot is also a part of the custom elements standard, but they say no custom elements. Why use only web standards and then use them incorrectly?
- chuckadams 3y ago> Why use only web standards and then use them incorrectly? Because it's a clever hack, not a standards proposal. Lighten up, Francis.
- ulrischa 3y agoMe so: What? I looked at the code and it is really hacky. But so great
- yellowapple 3y agoOne downside of this approach is that it fills my browser history with a bunch of extra entries, which ain't ideal (especially for my Back button). I'd guess that's probably fixable as an htmz "extension"? That aside, I love the concept.
- chuckadams 3y agoIt's not my style, and I'll stick with Vue SPAs thanks, but still... damn this is elegant.
- germandiago 3y agoHow it compares to htmx?
- mixmastamyk 3y agoIt's a subset.
- lelanthran 3y agoJesus Christ, this is all at once simple, powerful and useful. So little code, achieving so much!!!
- woah 3y agoWaiting for htmz on rails, the 100k loc batteries included htmz framework to implement full featured UX patterns and make development delightful
- sesm 3y agoWe need to keep the naming convention, so: - htmz on handcar (still on rails but you have more manual control) - htmz on horseback (if you want to reject modernity)
- _ix 3y agoThis looks neat! I've never really been in to web development, but I'm curious... is it possible to create a standalone .html file for a browser-delivered app? Like, not just PWA or SPA, but... a single HTML App? If I had modest amount of data in JSON baked into html, what's the barrier to something interesting, say... implementing a minimal spreadsheet or maybe just a sortable/filterable table?
- SushiHippie 3y ago> This looks neat! I've never really been in to web development, but I'm curious... is it possible to create a standalone .html file for a browser-delivered app? Like, not just PWA or SPA, but... a single HTML App? Yes, you can include your JavaScript and CSS directly inside the <script> [0] and <style> [1] tags, so you don't need to include any other file. Images like PNG, JPEG, ... can be either embedded with a base64 data URL [2] or an SVG with the SVG tag [3]. > what's the barrier to something interesting, say... implementing a minimal spreadsheet or maybe just a sortable/filterable table? Well, you could go the easy route and use an already existing JavaScript library for this. Libraries are normally included via a URL, but you can just copy the contents of this library into the script tag as mentioned above. Otherwise, I think it's manageable to do develop it yourself (sortable/filterable tables) much knowledge, but frontend development can be a PITA very fast [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc... [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style https://developer.mozilla.org/en-US/docs/Web/HTML/Element/st... [2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_... [3] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
- eproxus 3y agoThat’s how TiddlyWiki works for example: https://classic.tiddlywiki.com/ https://classic.tiddlywiki.com/
- sunshinerag 3y agoHi, No babel plugin? Npm module… sheesh /s
- jallasprit 3y agoIt's quite good. I noticed that my back button had to be repeatedly pressed to go back to write this comment, after interacting with the examples a few times. I'm sure that's simple enough to fix.
- d0utone 3y agoRefreshed 10 times to see the neat animation on top!
- d0utone 3y agoRefreshed 10 times to see the neat animation on top again!
- aitternh 3y agofdnl.kakjd
- pier25 3y agoThis seems snappy from the US but I doubt someone in say NZ will have a good experience. Going back and forth between the client and the server on every interaction can result in terrible UX. Users will be happy waiting 1-2 seconds after submitting a form but waiting that much to switch a tab is not gonna fly. Plus there's internet weather etc which might result in unpredictable latencies over long distances. Yes, you can move the compute layer of your app close to the user in multiple ways. Moving the data to the edge is much harder.
- jdthedisciple 3y agoThis is my biggest gripe with this approach as well as HTMX. Avoiding delays for what should be purely client-side actions is a non-negotiable to me.
- recursivedoubts 3y agohttps://htmx.org/essays/hypermedia-friendly-scripting/ https://htmx.org/essays/hypermedia-friendly-scripting/ https://hypermedia.systems/client-side-scripting/ https://hypermedia.systems/client-side-scripting/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...
- Malix_off 3y agoHyperscript/AlplineJS would do the job
- miroljub 3y agoIf you need to fetch data from the server side, you need to fetch data from the server side. It doesn't matter much if it's a 10k json that you have to load and parse, or a 12k html snippet that you can directly display, the delay would be the same. If you are concerned about the delay when switching a tab, nothing prevents you to load both tabs during the first page load, and then just display the content without a new network requests. Whether you should do this or not is completely unrelated to whether you should use htmx, htmz or react.
- intrasight 3y agoVery cool snippet. This is what I now wished existed. A flowchart/wizard that let you choose a development framework based on some questions and answers. So that a minimum framework (HTMZ) is used if it can satisfy. Or HTMX if one of your answers indicates that it's needed. Or Vue, etc. - getting "heavier" platforms as needed. Of course we don't always know ahead of time the answers to the question. But being given the questions and the flowchart would be beneficial for the up front analysis.
- lelandfe 3y ago<base target=htmz> <iframe hidden name=htmz onload=".. I'm somewhat frightened to ask if there's some special voodoo need for leaving off the quotes on htmz...
- wild_egg 3y agoQuotes are completely optional on attribute values in HTML5 if the value doesn't have certain characters like spaces which will require quoting I've found this article a handy reference on all the stuff it's safe to leave out https://meiert.com/en/blog/optional-html/ https://meiert.com/en/blog/optional-html/
- Kalabasa 3y agoNah 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
- arispen 3y ago:O
- hiccuphippo 3y agoI think you can use null instead of ':not(*)' in the query selector, if only to make it a bit shorter and maybe a bit faster.
- Kalabasa 3y agoNice, it works! I was a bit scared here because the querySelector() MDN docs say > A string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SyntaxError exception is thrown. I'll test it out. If this works good, we shave off 5 bytes towards a 176-byte snippet!
- begueradj 3y agowow ! Useful interactions in plain HTML !
- agp2572 3y agoThis is very similar to how Hotwire does replacing of HTML generated on server side in Ruby on Rails.
- tommica 3y agoCan it trigger JS returned from the proxy? Something like <script>alert(123);</script>
- h43z 3y agoHere a version that works for cross origin requests. <iframe hidden name=xhtmz onload="onmessage=x=>document.querySelector(x.data.target).innerHTML=x.data.content"></iframe> but website you are requesting has to embed the below script tag. <u id=t>just some other text</u> <script> parent.postMessage({ target:location.hash, content:b.outerHTML },'*') </script> You would still set the DOM destination on the main page. <a href="https://xorigin.com#view" target=xhtmz>dog</a> <div id=view></div>
- chatmasta 3y agoCareful with that snippet, targetOrigin of * is dangerous. I could embed your iframed content on my own site and then you'd happily send me the entire HTML inside the iframe.
- cmgriffing 3y agoI think the demo section needs work. Clicking a "tab" to change the example code to Greeting, or anything else adds a history event but doesn't update the url. I probably would have done the exact opposite in both aspects. Use replace to prevent extra navigation entries, but still update the url for bookmarking etc. For something that claims to "just be html", it seems to be breaking some fundamental rules of the web/UX. Whether it's a simple mistake or not and easy to fix, it does not inspire confidence in the framework.
- phinnaeus 3y agoSo that's why my back button didn't work the first time when I tried to return to HN...
- hwillis 3y ago...You realize this "framework" is 181 characters long, right? <a> elements add to the history, it's what they're supposed to do. If you don't want them to do that, don't use <a> elements for UI. Use a button and change the iframe src with javascript. That's not really the library's problem, and it's not really hypertext's problem what the browser is putting into history. > For something that claims to "just be html", it seems to be breaking some fundamental rules of the web/UX. Yes, obviously. HTML+CSS are meant to put boxes and words and images on a screen. If you want to show a spreadsheet with cell formulas, use javascript. Fundamental rules of web/UX are not the same as fundamental rules of hypermedia. > Whether it's a simple mistake or not and easy to fix, it does not inspire confidence in the framework. There's a section on the page titled "Is this a joke?" (not to mention, "Is htmz a library or a framework?"- its a snippet). Confidence is not the point. The point is to demonstrate how little it takes to turn HTML into a stateful UI. As the author says: > If you need something more interactive than the request-response model, you may try the htmz companion scripting language: javazcript. Sorry, I meant JavaScript, a scripting language designed to make HTML interactive. > htmz does not preclude you writing JS or using UI libraries to enhance interaction. You could, say, enhance a single form control with vanillaJS, but the form values could still be submitted as a regular HTTP form with htmz.
- h43z 3y agoWhy the "||:not(*)" in the iframe onload handler of htmz and not just "null"?
- socketcluster 3y agoInteresting. I wrote a similar plain HTML/WebComponent-based front end for my new no-code/low-code serverless platform https://saasufy.com/ https://saasufy.com/ It lets you build just about any data-driven application using only a handful of declarative generic HTML components: https://github.com/Saasufy/saasufy-components?tab=readme-ov-file#saasufy-components https://github.com/Saasufy/saasufy-components?tab=readme-ov-... I built a chat app with both group chat and private chat (with access control) using only plain HTML; only ~250 lines of HTML markup for the entire thing, no front end or back end code was used: https://github.com/Saasufy/chat-app/blob/main/index.html https://github.com/Saasufy/chat-app/blob/main/index.html You can use it here - All hosted on GitHub pages: https://saasufy.github.io/chat-app/ https://saasufy.github.io/chat-app/ It would be great to add support for other front end tech like this. I kind of like HTMX (especially as it's declarative). This HTMZ looks interesting. I'd like something with a big community and more components to handle more advanced cases (e.g. higher level components like calendars).
- torgoguys 3y ago>I built a chat app with both group chat and private chat (with access control) using only plain HTML; only ~250 lines of HTML markup for the entire thing: https://github.com/Saasufy/chat-app/blob/main/index.html https://github.com/Saasufy/chat-app/blob/main/index.html I think I know what you mean, but we clearly have different definitions of "plain HTML." Mine wouldn't involve 9 javascript files. :-D Either way, I'm interested and will check out what you made!
- socketcluster 3y agoAh yes good point. By plain HTML, I meant apps which can be assembled without custom JavaScript logic needed.
- duckman1 3y ago[dead]
- gardenhedge 3y agoBetter than HTMX but it's a JS framework/tool at the end of the day
- buremba 3y agoI 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 bottleneck is state management.
- niutech 3y agoThere is https://github.com/justinfagnani/html-include-element https://github.com/justinfagnani/html-include-element as a web component.
- err4nt 3y agoFurther 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
- niutech 3y agoIf you write `document.querySelector(contentWindow.location.hash||null)?.outerHTML=contentDocument.body.innerHTML`, you'll make it even shorter.
- ericlewis 3y agoWe can bring that down to 16 since query selector can handle undefined. 12% reduction. setTimeout(()=>document.querySelector(contentWindow.location.hash)?.replaceWith(...contentDocument.body.childNodes))
- Kalabasa 3y agoYeah, querySelector(undefined) works Although location.hash defaults to the empty string '' when there is no hash, which gives a SyntaxError, so we still need the fallback selector to select none.
- naasking 3y agoVery neat use of existing HTML. One thing this highlighted for me is that the MDN docs on the target attribute are incomplete, because I was recently reading them and while they mention that you can target iframes, they didn't actually describe how to do so. I was reading the docs because I had some thoughts on my own htmx-like take. You've used some of the same attributes I was going to use but slightly differently than how I was going to approach it. Some good food for thought!
- fuzztester 3y agohtmz is pronounced hit and miss.
- Xeoncross 3y agoWhere did those basic (<100 loc) jQuery / XHR wrappers go that simply hijacked all links & forms and turned them into AJAX requests? That seemed like the sweet spot of having apps that worked well for search engines to index (SSR) and yet still offered better page transitions than regular full-page-load requests when you had JavaScript enabled.
- deleted 3y ago[deleted]