HN

Comments (65)

• hn111
  I’ve tried replacing my modal components with the <dialog> element, but had to reverse everything due to this issue: https://github.com/whatwg/html/issues/9936In short: you can’t have an interactive popover (e.g. a toast notification) on top of a dialog modal.I’d love to use the new native elements but we’re sadly not quite there yet.
• Menu

  subdavis
  The details / summary thing absolutely kills me. There’s basically nothing you can’t do with them. Hiding and replacing markers is easy. But every component library just pretends they don’t exist.It even saves you the effort of all the aria control and expanded tags: these tags don’t need them.
• Menu

  Izkata
  Does it bother anyone else that it links to Codepen instead of just putting them on the page?Like I get this is a blog system but it still feels odd, especially for a "use this plain HTML"-style post...
• Menu

  montroser
  Most of this is great, except for the input/datalist bits, which are not sufficiently functional to be used in any real scenario. Users expect these interfaces to be tolerant of misspellings, optional sub text under each option, mobile ux niceties, etc -- and so everyone builds this with js...
• Menu

  troad
  Plain HTML is very cozy to me - I came of age in that era. Marquee tags 4eva.But as much as I hate to admit it, it is very difficult to build something functional today with plain HTML and no/minimal JS. If you want, say, a model form that manages its children as well, you're basically going to end up with a 2003-era ASP-feeling application with way too many views and forms (as seen on your employer's current HR system). Or you use HTMX... and you still end up with just as many (partial) views, but now with so much implicit state that you're veering into write-only code.I dislike modern JS to the extent that I opted for Phoenix LiveView, just so I could achieve interactivity without ever having to touch JS, but in truth it's not a comprehensive solution. Still had to write a web worker, a bridge to handle things like notifications, etc. Plus the future direction of Phoenix, all in on AI, is worrying.Honestly, I should probably just swallow my disdain and learn to appreciate and use modern JS, as painful as that sounds. I want to write and release cool things, not get caught up in navel-gazing language wars.
• anon
  undefined
• ronbenton
  One thing I am quite hopeful for is customizable selects! It's in WHATWG stage 3 right now. I have seen so many horrors with javascript-based custom dropdowns components. https://developer.chrome.com/blog/a-customizable-select
• avodonosov
  I am reading the CodePen example for summary/details. Especially the CSS part.Its so easy, like a breeze!
• Menu

  overflowy
  HTML and JavaScript serve distinct purposes, making better or worse comparisons logically flawed. Complex/interactive web apps requires JavaScript, period. Attempting to build sophisticated apps solely through HTML (looking at you HTMLX) eventually hits a functional ceiling.
• Menu

  prisenco
  When building out a new app or site, start with the simplest solution like the html-only autofilters first, then add complex behavior later.It's good to know these things exist so there are alternatives to reaching for a fat react component as the first step.
• Sephr
  I don't see any mention of HTTP 204 or multipart/x-mixed-replace. Those are both very helpful for implementing rich JavaScript-free HTML applications with advanced interactivity.
• Menu

  smlavine
  The Pentagram at the top of the page does not load without JS enabled.
• Dwedit
  Nobody tell them about how much stuff can go into SVG. That can even be inlined within HTML source code.
• theandrewbailey
  > Input with Autofilter Suggestions DropdownIt's great until you have a typo in the field, or want to show options that don't start with what you typed in but appear near the end of an option (think Google search's autocomplete). There's no way to filter in Javascript and force it to show certain options with <datalist>. I've resorted to <ol> for search suggestions.
• anidsiam
  Your blogs have very small amount solution, but the JS use cases are very large. How this little replacement can do more thing? I usually like the idea of being using as lean as possible, if it's can be possible to do more thing just with HTML and CSS that's obviously cool. Is it really possible to replace JS with HTML in near future?BTW the toggle solution (expanding content) is good.
• Menu

  suprjami
  Gimme a dark/light mode switch. CSS is allowed.
• Menu

  dpedu
  I didn't know about <datalist>, but how are you supposed to use it with a non-trivial amount of items in the list? I don't see how this can be a replacement for javascript/XHR based autocomplete.
• Menu

  iammrpayments
  I was trying to rewrite some UI library with html sometime ago following the W3C accessibility specs and found out a lot of patterns can’t be done with pure html and require javascript unfortunately.
• odie5533
  The Popover API looks really cool. Could see it for tooltips or lightboxes.
• Menu

  only-one1701
  Something I keep thinking about when I consider the trade-offs between building a site with HTML/CSS wherever possible vs JS is what the actual _experience_ of writing and maintaining HTML/CSS is vs JS. JS gets knocked around a bunch compared to "real" languages (although less so in recent years), but at the end of the day, it's a programming language. You can write a loop in it.Writing a web server in C++ is a way to get excellent performance. So why don't most people do it?
• 65
  It feels like some variation of this post gets submitted here every week.
• fnord77
  <blink>
• Menu

  superkuh
  Some of these new HTML features don't fully work in my "ancient" browser. But all of them partially work (ie opening the accordion element doesn't close others but it still opens and closes) and they still remain functional elements I can read and interact with. This puts them far ahead of any javascript implementation which almost universally fail to nothing.
• Menu

  econ
  I'm so not impressed by the toggle implementation... How nice it could have been.Nesting the elements is a truly hideous choice. The summary is part of the details?? I thought they were opposites.Should we also put the headings in the <p> from now on?Identifying a target should be done by id or by name. That it does use a name because js can't target it without makes it even more stupid.We already had labels for form fields. Inventing a completely different method for something very similar is a dumb idea. The old checkbox hack is more flexible and less ugly for some implementations.Why force the hidden content to be below or above the toggle? We aren't gaining anything with this.What is this nonsense for an element to not just be hidden or displayed but to have some weird 3rd state where only one of its children is shown?How should styling it even work for this new state? If I apply a style to the hidden content it must also apply to the link? The text is hidden but the style is visible??? Preposterous!Don't try style <details> to avoid unexpected behavior. Try wrapping the hidden content in a new element to make it behave normally.What is this ugly arrow? If you find 1000 websites using a toggle I doubt there is one using an ugly arrow like that.The default styling gives no clue about it being clickable?The pointer (awkwardly called the cursor) choice is the text selection?????Blue underlined "more" is what everyone does and everyone is used to. The cursor should be pointer. (This is css speak for "the pointer should be a hand")The number of js toggles you can find online where the button lives inside the hidden text is guaranteed to be zero. Forget about drop in replacement, you will have to reinvent your css.Maybe I'm dense but I also want my url to reflect the state of the page. I would have been impressed if that was supported. Personally I use actual links and disable default action in the listener if js is enabled/working or modify the state on the server if js isn't available/working.It would have been great if the toggle action was implemented as a simple attribute something like toggle="element name" so that anything can be clickable and anything can be toggleable. Have a "closed" as well as an "open" attribute for the target.Doesn't seem very hard. An open/closed attribute would be useful for other things too. Using display:none is terrible as display: is used for many things.
• FormerlyEL
  [dead]
• cantalopes
  The problem is that it's difficukt to style or animate those things. Unless you're builsing something for dun or technical where it's not important it's fine but i doubt any real world commercial project would be satisfied with just this