TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Show HN: htmz – a low power tool for HTML

1020 点作者 Kalabasa超过 1 年前

62 条评论

keepamovin超过 1 年前
This 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.<p>A reminder to never give up good ideas, focus on excellence, and focus on refinement to a completion of an idea, and communicate well!<p>Also the comments here:<p>- <i>This is a great hack and shows how close the browser is to offering SPA natively.</i><p>- <i>This is a glorious demonstration of someone really understanding the platform.</i><p>- <i>Simple and powerful, as the vanilla web should be. Thank you for this (small) gem :)</i><p>- <i>This is a neat hack, I like it :). Thanks for sharing.</i><p>are <i>exactly</i> 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! :)<p>Thank you for being a genius! :)<p>And for inspiring about what&#x27;s possible! :)<p>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! :)
评论 #39432516 未加载
评论 #39433658 未加载
tambourine_man超过 1 年前
That&#x27;s a great hack and it shows how close the browser is to offering SPA natively.<p>Just a few attributes and we could avoid the iframe.<p>It&#x27;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.
评论 #39431985 未加载
评论 #39430577 未加载
评论 #39430600 未加载
评论 #39439266 未加载
评论 #39430576 未加载
spankalee超过 1 年前
I think there&#x27;s a pretty strong argument at this point for this kind of replacing DOM with a response behavior being part of the platform.<p>I think the first step would be an element that lets you load external content into the page declaratively. There&#x27;s a spec issue open for this: <a href="https:&#x2F;&#x2F;github.com&#x2F;whatwg&#x2F;html&#x2F;issues&#x2F;2791">https:&#x2F;&#x2F;github.com&#x2F;whatwg&#x2F;html&#x2F;issues&#x2F;2791</a><p>And my custom element implementation of the idea: <a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;html-include-element" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;html-include-element</a><p>Then HTML could support these elements being targets of links.
评论 #39442839 未加载
评论 #39441566 未加载
koliber超过 1 年前
In 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.<p>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.<p>We later used to joke that we used Ajax before Ajax was a thing.
评论 #39432871 未加载
评论 #39432052 未加载
评论 #39435066 未加载
评论 #39437389 未加载
azornathogron超过 1 年前
This is a glorious demonstration of someone <i>really</i> understanding the platform.<p>I don&#x27;t expect I would ever use it, but I think it&#x27;s excellent.
评论 #39432090 未加载
err4nt超过 1 年前
Further size reduction, you don&#x27;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`.<p>This will shave another 10 bytes off the snippet :D
评论 #39437967 未加载
评论 #39462607 未加载
Arch-TK超过 1 年前
Given that this uses `target`, doesn&#x27;t it mean that unlike htmx you can&#x27;t easily make this gracefully degrade when JS isn&#x27;t enabled?<p>And, yes, I know, saying &quot;when JS isn&#x27;t enabled&quot; in 2024 is a bit like saying &quot;when the user is on Mars and has a 10 minute RTT&quot; but forgive me for being an idealist.
评论 #39430400 未加载
评论 #39430270 未加载
评论 #39434255 未加载
评论 #39430950 未加载
评论 #39430373 未加载
评论 #39432872 未加载
评论 #39434461 未加载
jdp超过 1 年前
Reminds me of pjax [1], except pjax works over XHR instead of an iframe and uses pushState by default to keep the back button working.<p>[1]: <a href="https:&#x2F;&#x2F;github.com&#x2F;defunkt&#x2F;jquery-pjax">https:&#x2F;&#x2F;github.com&#x2F;defunkt&#x2F;jquery-pjax</a>
评论 #39436962 未加载
评论 #39435608 未加载
spankalee超过 1 年前
Reusing the &lt;slot&gt; element like this is a bad idea - it has very specific behavior in browsers. In a shadow root it&#x27;ll be replaced by the children of the host element, no matter what the library does.<p>HTML already has an inert &lt;output&gt; element for things like this.
评论 #39431087 未加载
评论 #39430859 未加载
cmgriffing超过 1 年前
I think the demo section needs work.<p>Clicking a &quot;tab&quot; to change the example code to Greeting, or anything else adds a history event but doesn&#x27;t update the url.<p>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.<p>For something that claims to &quot;just be html&quot;, it seems to be breaking some fundamental rules of the web&#x2F;UX. Whether it&#x27;s a simple mistake or not and easy to fix, it does not inspire confidence in the framework.
评论 #39435474 未加载
评论 #39435855 未加载
pier25超过 1 年前
This 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.<p>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&#x27;s internet weather etc which might result in unpredictable latencies over long distances.<p>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.
评论 #39433603 未加载
评论 #39433845 未加载
评论 #39435476 未加载
评论 #39441379 未加载
评论 #39436360 未加载
评论 #39439252 未加载
评论 #39437086 未加载
评论 #39434671 未加载
评论 #39433653 未加载
评论 #39433827 未加载
评论 #39435487 未加载
评论 #39439595 未加载
jallasprit超过 1 年前
It&#x27;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&#x27;m sure that&#x27;s simple enough to fix.
synergy20超过 1 年前
I happened to spend a little more time on htmx this weekend which htmz was inspired by.<p>htmx&#x2F;htmz does do well for simple use cases, htmx does well for SSR heavy cases(e.g. django).<p>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.
评论 #39431664 未加载
sublinear超过 1 年前
This seems likely to have issues with most &quot;Content-Security-Policy&quot; rules because of the inline script in &quot;onload&quot; and the iframe. Makes it a non starter in real world production environments.
评论 #39434263 未加载
评论 #39434052 未加载
internet2000超过 1 年前
Apparently it breaks your back button too.
评论 #39430182 未加载
socketcluster超过 1 年前
Interesting. I wrote a similar plain HTML&#x2F;WebComponent-based front end for my new no-code&#x2F;low-code serverless platform <a href="https:&#x2F;&#x2F;saasufy.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;saasufy.com&#x2F;</a><p>It lets you build just about any data-driven application using only a handful of declarative generic HTML components: <a href="https:&#x2F;&#x2F;github.com&#x2F;Saasufy&#x2F;saasufy-components?tab=readme-ov-file#saasufy-components">https:&#x2F;&#x2F;github.com&#x2F;Saasufy&#x2F;saasufy-components?tab=readme-ov-...</a><p>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: <a href="https:&#x2F;&#x2F;github.com&#x2F;Saasufy&#x2F;chat-app&#x2F;blob&#x2F;main&#x2F;index.html">https:&#x2F;&#x2F;github.com&#x2F;Saasufy&#x2F;chat-app&#x2F;blob&#x2F;main&#x2F;index.html</a><p>You can use it here - All hosted on GitHub pages: <a href="https:&#x2F;&#x2F;saasufy.github.io&#x2F;chat-app&#x2F;" rel="nofollow">https:&#x2F;&#x2F;saasufy.github.io&#x2F;chat-app&#x2F;</a><p>It would be great to add support for other front end tech like this. I kind of like HTMX (especially as it&#x27;s declarative). This HTMZ looks interesting. I&#x27;d like something with a big community and more components to handle more advanced cases (e.g. higher level components like calendars).
评论 #39435677 未加载
intrasight超过 1 年前
Very cool snippet.<p>This is what I now wished existed. A flowchart&#x2F;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&#x27;s needed. Or Vue, etc. - getting &quot;heavier&quot; platforms as needed.<p>Of course we don&#x27;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.
gpnt超过 1 年前
Well, you are using javascript anyway so here it is a 163 bytes solution without the back button problem and iframe hack:<p>&lt;script&gt;onclick=async e=&gt;{x=e.target.dataset.x;if(x){e.preventDefault();document.querySelector(x).innerHTML=await fetch(e.target.href).then(r=&gt;r.text())}}&lt;&#x2F;script&gt;<p>&lt;a href=&quot;&#x2F;somepage&quot; data-x=&quot;#lib&quot;&gt;Hi&lt;&#x2F;a&gt;<p>&lt;div id=&quot;lib&quot;&gt;&lt;&#x2F;div&gt;<p>doesn&#x27;t works with form though.
评论 #39472173 未加载
_ix超过 1 年前
This looks neat! I&#x27;ve never really been in to web development, but I&#x27;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?<p>If I had modest amount of data in JSON baked into html, what&#x27;s the barrier to something interesting, say... implementing a minimal spreadsheet or maybe just a sortable&#x2F;filterable table?
评论 #39433051 未加载
sodimel超过 1 年前
Simple and powerful, as the vanilla web should be. Thank you for this (small) gem :)
nymanjon超过 1 年前
This is fantastic. Right now in my PWA I&#x27;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.<p>Thank you for putting your code out in the public so I can learn from it!
评论 #39487288 未加载
h43z超过 1 年前
Why the &quot;||:not(*)&quot; in the iframe onload handler of htmz and not just &quot;null&quot;?
h43z超过 1 年前
Here a version that works for cross origin requests.<p><pre><code> &lt;iframe hidden name=xhtmz onload=&quot;onmessage=x=&gt;document.querySelector(x.data.target).innerHTML=x.data.content&quot;&gt;&lt;&#x2F;iframe&gt; </code></pre> but website you are requesting has to embed the below script tag.<p><pre><code> &lt;u id=t&gt;just some other text&lt;&#x2F;u&gt; &lt;script&gt; parent.postMessage({ target:location.hash, content:b.outerHTML },&#x27;*&#x27;) &lt;&#x2F;script&gt; </code></pre> You would still set the DOM destination on the main page.<p><pre><code> &lt;a href=&quot;https:&#x2F;&#x2F;xorigin.com#view&quot; target=xhtmz&gt;dog&lt;&#x2F;a&gt; &lt;div id=view&gt;&lt;&#x2F;div&gt;</code></pre>
评论 #39434576 未加载
yellowapple超过 1 年前
One downside of this approach is that it fills my browser history with a bunch of extra entries, which ain&#x27;t ideal (especially for my Back button). I&#x27;d guess that&#x27;s probably fixable as an htmz &quot;extension&quot;?<p>That aside, I love the concept.
lelandfe超过 1 年前
<p><pre><code> &lt;base target=htmz&gt; &lt;iframe hidden name=htmz onload=&quot;.. </code></pre> I&#x27;m somewhat frightened to ask if there&#x27;s some special voodoo need for leaving off the quotes on htmz...
评论 #39434162 未加载
评论 #39434895 未加载
naasking超过 1 年前
Very 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&#x27;t actually describe <i>how</i> to do so.<p>I was reading the docs because I had some thoughts on my own htmx-like take. You&#x27;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!
buremba超过 1 年前
I wonder how feasible it is to create htmz &#x2F; htmx -like lightweight library with the support for React&#x2F;Vue&#x2F;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.
评论 #39472097 未加载
d0utone超过 1 年前
Refreshed 10 times to see the neat animation on top again!
p4bl0超过 1 年前
This is a neat hack, I like it :). Thanks for sharing.
Xeoncross超过 1 年前
Where did those basic (&lt;100 loc) jQuery &#x2F; XHR wrappers go that simply hijacked all links &amp; 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.
mlekoszek超过 1 年前
Late to the party but I am so in love with that logo. And every other bit of this.
flanbiscuit超过 1 年前
Was curious to see the code so found the GitHub. Posting it here in case anyone is interested since the author doesn&#x27;t link to it on the site and also the npm page doesnt link to it either<p><a href="https:&#x2F;&#x2F;github.com&#x2F;Kalabasa&#x2F;htmz">https:&#x2F;&#x2F;github.com&#x2F;Kalabasa&#x2F;htmz</a>
评论 #39431539 未加载
andrewmcwatters超过 1 年前
Except 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?<p>Slot is also a part of the custom elements standard, but they say no custom elements.<p>Why use only web standards and then use them incorrectly?
评论 #39432195 未加载
franky47超过 1 年前
If anyone is wondering, `htmy` is available on NPM, and `htmx` there is not what you think.
atum47超过 1 年前
I&#x27;ll take a deeper look in the code later, but it seems useful.<p>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
评论 #39435332 未加载
qwertygnu超过 1 年前
ha, I&#x27;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<p><pre><code> &lt;custom-tag custom-param=&quot;value&quot;&gt;&lt;&#x2F;custom-tag&gt;</code></pre> 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 <i>one thing</i>.
Alifatisk超过 1 年前
Kind of impressive that the installation script was that small.
评论 #39431964 未加载
mofosyne超过 1 年前
Oh, 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.
hiccuphippo超过 1 年前
I think you can use null instead of &#x27;:not(*)&#x27; in the query selector, if only to make it a bit shorter and maybe a bit faster.
评论 #39435217 未加载
fractaledmind超过 1 年前
I cannot believe how simple and elegant this is. Using an iframe as a request&#x2F;response proxy to enable targeted replacement is just
评论 #39435837 未加载
hanniabu超过 1 年前
&gt; Not even a backend is required.<p>&gt; In a nutshell, htmz lets you swap page fragments with HTML from the server using vanilla HTML code.<p>So a backend is needed....
评论 #39430830 未加载
评论 #39430837 未加载
moritzwarhier超过 1 年前
It&#x27;s a fun one liner, but what is the use case?<p>When I want to replace some element using JS as the user clicks a <i>link</i>, it is progressive enhancement.<p>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).<p>If you don&#x27;t want history navigation and URLs, why do you use links?<p>This breaks history navigation and bfcache for no good reason, or am I missing something? bfcache already provides SPA-like speed, or even better.<p>No need to avoid regular links if you e.g. link from a list to a detail page.<p>Also:<p>&gt; No preventDefaults. No hidden layers. Real DOM, real interactions. No VDOM, no click listeners. No AJAX, no fetch. No reinventing browsers.<p>So many words saying nothing, just to cater to some sentiment. fetch is part of browsers by the way.<p>If I need to replace an element as the user clicks a <i>link</i>, I can code it myself (without using this abstraction layer, however thin it is). I also don&#x27;t need an iframe for doing this. And <i>preventDefault</i> is aptly named and a good reminder for what progressive enhancement should do. If it&#x27;s not meant to be a link, don&#x27;t use a link.<p>And if you want to react to clicks, you know, use click listeners (event handlers). Where&#x27;s the problem?<p>It is understandable to developers and uses native browser functionality as intended. As opposed to this hack, which I&#x27;d find pretty glaring, bug-prone and hard to understand, would I have to debug an issue on some page that uses this snippet.<p>To me this seems like useless indirection and technical debt. If you really need low-code AJAX &quot;links&quot; (who says you need that, if you don&#x27;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.<p>As a joke, I like it though…
评论 #39431627 未加载
评论 #39433229 未加载
评论 #39433070 未加载
tommica超过 1 年前
Can it trigger JS returned from the proxy? Something like &lt;script&gt;alert(123);&lt;&#x2F;script&gt;
agp2572超过 1 年前
This is very similar to how Hotwire does replacing of HTML generated on server side in Ruby on Rails.
kickofline超过 1 年前
At what point does it cease to be a framework and become just a regular line of code?
评论 #39430042 未加载
gardenhedge超过 1 年前
Better than HTMX but it&#x27;s a JS framework&#x2F;tool at the end of the day
germandiago超过 1 年前
How it compares to htmx?
评论 #39435451 未加载
account42超过 1 年前
Zero noscript fallback. Please don&#x27;t use this.
评论 #39472368 未加载
lyxsus超过 1 年前
This is incredible. I really want it to take off.
woah超过 1 年前
Waiting for htmz on rails, the 100k loc batteries included htmz framework to implement full featured UX patterns and make development delightful
评论 #39433277 未加载
Uptrenda超过 1 年前
HTML is already lightweight. It takes a very low IQ to make it seem complex.
begueradj超过 1 年前
wow ! Useful interactions in plain HTML !
revskill超过 1 年前
Why not htmy ?
评论 #39441619 未加载
d0utone超过 1 年前
Refreshed 10 times to see the neat animation on top!
fuzztester超过 1 年前
htmz is pronounced hit and miss.
lelanthran超过 1 年前
Jesus Christ, this is all at once simple, powerful and useful.<p>So little code, achieving so much!!!
ulrischa超过 1 年前
Me so: What? I looked at the code and it is really hacky. But so great
aitternh超过 1 年前
fdnl.kakjd
pwdisswordfishc超过 1 年前
Oh great, yet another way to break &quot;Copy link target&quot;.
overstay8930超过 1 年前
htmx in shambles &#x2F;s
评论 #39432005 未加载
sunshinerag超过 1 年前
Hi,<p>No babel plugin? Npm module… sheesh &#x2F;s
chuckadams超过 1 年前
It&#x27;s not my style, and I&#x27;ll stick with Vue SPAs thanks, but still... damn this is <i>elegant</i>.