Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Htmx in a Nutshell

htmx.org

Post reply on HN
Print view View original

171–180 of 414 posts

Re: Htmx in a Nutshell

#171

Post by mhitza »

artificialLimbs wrote: post #151
mhitza wrote: post #45

Earlier quoted context omitted.

Quick question, as it made me curious. Can I send the content that I want to swap to the server itself? Say I want to submit a form to the backend, will it only send form fields or is there a way to send the form html itself?

Why would you do that? Curious about use case.

I have a nifty (or so I'd like to think) slapped together HTML parser, that instead of building a DOM tree, streams the HTML nodes as a list. Which in practice makes it easier to validate a field, and insert the appropriate validation message at the right location, without switching from request -> data representation -> validation failure model -> templating language ifdefs to inline the validation classes and additional helper text.

Might sound not that convenient for basic things like login forms, but I have frontend code that builds dynamic form fields, which I'd like to not replicate via the backend templating language, if extracting data from HTML itself is a breeze in my case.

Of course I'm going to do that myself anyway, but I'd rather use an established library which also handles in browser page restoration/caching (possibly also fragments), instead of rolling my own JS lib.

Re: Htmx in a Nutshell

#172

Post by infogulch »

qbasic_forever wrote: post #19
candiddevmike wrote: post #6

htmx keeps getting posted here and choosing it comes down to "do you trust that your user's internet is stable" IMO. For a lot of interactive web apps, the answer is no, and htmx is not a good fit.

I don't see why it couldn't be used in a PWA with a service worker providing offline HTML responses to hx directive elements though. You can see an example here that uses a WASM-based service worker (but you don't have to do that, it could just be plain old JS generating HTML): https://github.com/richardanaya/wasm-service

Check out the live demo! https://richardanaya.github.io/wasm-service/

Last month I contributed the todos functionality to this project after it was submitted to HN. https://news.ycombinator.com/item?id=33228891

I think this is a great idea and could eventually enable htmx projects to transition from server-side-only to being a PWA with very little code changes (given the right backend).

Unfortunately this particular implementation exhibits some blocking issues which I was not able to solve yet:

1. The Service Worker is eventually unloaded from memory, which means all data is lost because it currently stores everything in memory. This isn't a defect as much as it is lacking a persistence feature; this is a MVP (emphasis on minimal) after all. The most promising solution in my opinion would be to use the OPFS/File System Access API with SQLite, which is yet to be shipped in all browsers.

2. The bigger issue is that once the SW is unloaded it doesn't come back. The SW getting reaped after being idle is fine, that's part of the expected behavior. But there are no events or any other indication that it was disconnected, at some point it just stops intercepting requests. I don't know why. If anyone can chip in here to say why it does this and how I can detect or somehow restart SW fetch interception on demand I would be glad to hear it.

( For some more detail see the "# Remaining Issues" in my PR #5: https://github.com/richardanaya/wasm-service/pull/5 )

Re: Htmx in a Nutshell

#173

Post by KyeRussell »

amne wrote: post #63
whichdan wrote: post #11

Earlier quoted context omitted.

https://htmx.org/docs/#parameters Simple doesn't mean "I should be able to intuitively understand this with under a minute of reading"...

With so many tools floating in this space the landing page MUST be clear enough. Sorry.

This project has seemingly picked up a bunch of traction. The number of times it has appeared on the front page of this website serves as some indication, as well as the plethora of conference talks.

You seemed unwilling to put more than 2 minutes into looking at an example, or 10 seconds into checking what page you were on, yet felt that your experience warranted these dismissive comments which cumulatively proportionally surely took up just as much time.

You aren’t acting in good faith. This doesn’t add to the conversation at all.

Re: Htmx in a Nutshell

#174

Post by benji-york »

casey2 wrote: post #69

I don't know any javascript, but is it really that bad of a language that you need new libraries every day and workarounds so that you don't have to write it?

The language itself isn't great, but the tooling it (appears to) necessitate and the fact that the browser isn't a great environment for what many people want to do combine to turn many people off.

Re: Htmx in a Nutshell

#175

Post by KyeRussell »

beauHD wrote: post #66

> The fastest way to get going with htmx is to load it via a CDN HTMLX is great and all, but loading it from a CDN is insecure and wrought with problems. Namely, the JS file in question could be hijacked and replaced with a malicious version that can steal data. It's unlikely, but still a plausible scenario. Also: the resource could just 404 and not be available due to work-in-progress scenarios on the CDN side. I wo…

An odd nitpick given that the CDN example in the documentation protects against exactly this.

Re: Htmx in a Nutshell

#176

Post by spjwebster »

donatj wrote: post #4

Makes me smile because everything old is new again. This is very similar to features MooTools had like 10+ years ago before JSON took off big.

Makes me smile too. Around 2008 while I was at Yahoo! I built a standalone library called Dhaka (literally stuck a pin in a map and used the place name as the project name) that did almost exactly this. It was used on a few of the EU sites but I left before I got chance to open source it. The problem I was trying to solve was eliminating a bunch of duplicate JavaScript that was essentially sending/fetching data to/from a remote source and inserting/replacing it into the current page.

Re: Htmx in a Nutshell

#177

Post by talideon »

HTMX is the perfect example of a project that, like jQuery, exists to be replaced with a W3C standard. And I don't think the people behind it would feel at all bad about that, as it fills a real niche that ought to have been filled a decade ago.

Re: Htmx in a Nutshell

#178

Post by caseyf »

spion wrote: post #167
recursivedoubts wrote: post #2

howdy, I'm the creator of htmx, happy to talk about it

I've never used htmx, primarily because I like the concept of "components" so much. (They serve two needs - standardizing larger blocks of UI and encapsulating them with an alternative interface, and providing islands of rich interactivity) Is there any material on successfully combining htmx with web components? It doesn't look to me like the original design takes this possibility into consideration... (note: at a s…

I use Unpoly and not HTMX but similar idea, what you do for components entirely is up to you.

My components look like this. The JS and CSS is included in the application's bundles. Ruby renders HTML on the server side.

  app/components/breadcrumbs
    - _breadcrumbs.scss
    - breadcrumbs_component.rb

  ...
  app/components/search_field
    - _search_field.scss
    - search_field_component.rb
    - search_field.js
    - selections.html.haml

Re: Htmx in a Nutshell

#179

Post by decross »

shireboy wrote: post #35

I want to like - I feel like the frameworks are all too much ceremony now. You need to buy into a bunch of different build tools, a cli or two, and are left wondering "where is my app again?" I've tried htmx, though, and like the simplicity, but am not 100% sold. In the olden days, ASP.NET Web forms Ajax had "Update Panels", which were similar to this. You'd wrap a section of markup in an "Update Panel" and that made…

the creator has already answered you, but I will add that there is an htmx extension called client-side-templates here: https://htmx.org/extensions/client-side-templates/

Re: Htmx in a Nutshell

#180

Post by runarberg »

wwweston wrote: post #165
runarberg wrote: post #129

Earlier quoted context omitted.

If you are burned out because of tooling, but trying to recover, I do recommend throwing out tailwind and just use pure CSS for your styling. Modern CSS is plenty fun, there is no need for an external framework to do a complex layout. CSS grid is the simplest way to do layout even if you include CSS frameworks. Custom properties (CSS variables) are more powerful then reusable styles from frameworks. The final peace o…

Do you have any specific suggestions for resources for exercising grid & shadow dom knowledge/chops? I'm updating my CSS understanding after having left the front end for ~6 years (but having done a lot of front-end work for the previous 10), loving custom properties and am intrigued with some of the systems built around them (e.g. Pollen), trying to figure out where else I should be directing attention.

The guides and references on mdn is pretty good for grid: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

As for the shadow DOM, it is pretty advanced, I don’t recommend going there unless you really want to learn it. Using web components without understanding can cause way more problems then it solves. And at the end of the journey you get a very verbose system with a lot of boilerplate just to get component scoped styles, which is not worth it. But if you still want to learn it, this is a good place to start: https://developer.mozilla.org/en-US/docs/Web/Web_Components

Post reply on HN