Comment by gibsonsmog | Hacker News Reader

Comment by gibsonsmog | Hacker News Reader

One thing that has been driving me bat shit as an FE for years is the lack of browser engine implemented basic UI elements as default HTML. The fact that we still need to build custom carousels[1], tooltips, and other common patterns instead of just dropping a <carousel><slide></slide><controls></controls></carousel> or <tooltip/> is baffling to me. Stop making me write so much JS to do something that we know as a community is going to be a pattern! Just gimme the damn elements and a decent API to manipulate it reasonably! Not to mention all the custom, half ass a11y implementations I see.

There are some groups out there like Open UI[2] trying to push for this stuff but it seems like the standards bodies have no interest in a decent UI ecosystem instead favoring bloated APIs that make up 5% of your application versus the 95%. I'm mad! I'm mad online!

[1] I'm familiar with the newer carousel CSS/JS stuff but it's kind of clunky. I'll take it either way but damn

[2] https://open-ui.org

> I'm familiar with the newer carousel CSS/JS stuff but it's kind of clunky

I think you've just answered yourself why.

Browsers are the most used applications on the planet. They have one chance to get an API right ("don't break the web"). They iterate on a new API for years. When they finally launch it, devs call it "clunky".

Counterpoint: the standardized surface area of a browser is already enormous, and while these components seem simple, there are a billion different options, variables or alternative implementations to consider.

At some point, functionality needs to exist in user space, even if it's common.

Yes, please! But browsers need to make it easier for things to exist in user space. That means reviving CSS Houdini, particularly reviving the animation and layout worklets. (It got abandoned because browser vendors (Chrome in particular) found them too difficult to implement. They would need to rearchitect a good chunk of their rendering pipeline. Instead we got a bunch of very limited but easier to implement features like scroll animation timelines)

The CSS-only Carousels have gotten really good and easy to drop in lately.

Most tooltips can be handled by ancient `title` attributes and the ones that can't should generally be popovers anyway. Firefox support for anchor positioning is out now so HTML+CSS-only/mostly popovers are in a great state today.

There's always more UI controls people think they need. The web will be forever chasing that. But so much has happened in recent years it feels good to stop a moment and appreciate all the little things like details/summary working great for JS-free expanders and accordions.

I'd really like to see some FE folks kicking around what sorts of new form elements they'd put into HTML 6. I miss WinForms, component libraries, Silverlight, WPF, that sort of thing. Browsing the sea of components somebody like Telerik or Infragistics or DevExpress give you brings so many ideas to my mind. The web has nothing to show for decades of being in the limelight. We have buttons, textboxes, checkboxes, drop down lists... the end. Oh I guess we have date pickers now, and reasonable large text areas. I mean we build apps this way so it's not impossible to live like this. I'm just jealous of folks with Blazor and a component library license.

> lack of browser engine implemented basic UI elements as default HTML.

I'd argue that browsers already have full set basic UI elements.

But the thing is that "basic set" is different for each developer / site and that is OK.

Attempt to make a browser to include everything is a path nowhere. Today we have carousel as the thing, tomorrow something else.

That's the moving target. And don't forget about versioning. Each feature has to have a fallback:

   <carousel>
      ...
   </carousel>  
   <nocarousel>
      ...
   </nocarousel>

Old browsers and old machines are still there.

Instead we should have really handy component system like

   <section class="carousel">
      ...
   </section>  

   <style>
      section.carousel {
        controller: Carousel url(/js/carousel-desktop.js); 
      }
      @media handheld { 
        section.carousel {
          controller: Carousel url(/js/carousel-mobile.js); 
        }
      }  

    </style>

Reply on news.ycombinator.com