Show HN: Niui 3.0 – lightweight, rich, accessible front end | Hacker News Reader

Show HN: Niui 3.0 – lightweight, rich, accessible front end

niui.dev

79 pointsrado39 comments

Here is a library of the most common components I've created in the last decade. It aims to solve the toughest UI problems like Carousel, Modal and Select, while using native browser capabilities as much as possible, and focusing on accessibility, stability and customisation. 14 KB of CSS, JS optional.

https://rado.bg/niui-3-0-native-internet-user-interface/

Open articleView on HN

There are things that you do not touch in this world without clear consent: the scrollbar is near the top of that list, right under the back button and other people's food.

That should be a motivational poster or a tshirt

And the cursor if you're extra polite.

Hi, the scrollbar is hidden, because that's a carousel, as indicated by the tabs on the left. Overflowing slides have standard scrollbars. Thanks!

Regardless of the reasoning, it's pretty jarring to scroll through the site and have it lock back to a heading.

The sections must be at viewport height, because they demo features like fixed background, parallax scrolling and indeed the vertical carousel. It's not mandatory to use it on actual pages, like the demo sites show. Thank you.

Make the landing page a clean experience with no alteration of standard scroll behaviour.

It's unusable for me, so as a demonstration the first thing it tells me is: I can't trust any of it will function well.

Instead, were I to discover a bit later after exploring the site more that one particular thing wasn't working, it'd be easier to forgive. But, as it is now, it creates an instant wrong impression, and with no way to explore to rectify it.

Thanks, will do. Cheers

It's a pretty bad experience "scrolling" through the site. Go to a section, scroll a bit up and it jumps a whole page to the beginning of the previous one, now you have to scroll a lot to go back to where you left. Scroll up a bit again, and now you are in the end of the previous page.

> as indicated by the tabs on the left

No, the links on the left don't indicate it's a carousel at all. They are just links, they could indicate different pages, relative anchor links, popups or any other things, among which they might be a carousel. But they don't "indicate" that it's a carousel in particular.

Thanks, I'll move the homepage out of the carousel component, as it seems to be too confusing. Have a nice day

Indeed, the vertical scrolling behavior on mobile (Chrome) is terrible: it is flickering, and it is jumping around the site randomly, and it doesn't let the user see what was a few lines below the current text.

Please don't ever override the scrolling behavior of the browser of a website, it too often leads to inaccessible content and/or the user getting lost.

"ctrl+f" looks at github "home" looks at youtube

Yes, it seems search hits inside an inactive slide are inaccessible. Great point. Will look into fixing it. Thanks!

I bet Joey would hate his scrollbar touched

On Mobile Chrome, it's basically unusable. Scrolling ruins the back button. Everything is horizontally smooshed. The scroll snapping is broken to the point that it snaps me to places I've already scrolled past. The animation on the tabs is visually confusing and seems to necessitate the tab is a fixed height that scrolls. Tooltips and scrolling break each other. The forms don't accommodate mobile widths unless you manually use the wide option. Even then, they have no border. The checkbox looks checked when it's unchecked because it has a dark background. The active and focused states on buttons aren't differentiable from disabled (opacity versus gray?). Sorry, but this is just not good to use.

Thanks for the great feedback. The back button navigates to the previous slide. The tabs take the height of the tallest tab, I thought that was normal. Tooltips should hide on scroll, indeed. The forms have border when --nui-border-color and --nui-border-size are set. The focus indicator is the native style on purpose to avoid confusion. Thanks again.

> The back button navigates to the previous slide.

Nobody comes to this page thinking it's slides. There's no expectation it would or should work like this. It adds a feature that makes the site harder to use.

Please, do not hijack the page scroll that way. It makes using the scroll-wheel really difficult, even unusable.

Hi, this is a vertical carousel with native scrolling inside the slides. Carousel sliding is also native scrolling with scroll snap.

That scroll snap -or something- is messing up.

Yes, it's the natural browser behaviour with mouse wheel and snapping and maybe I need to think of a workaround. Thanks

I don't care whether it's native or natural browser behaviour, I just don't see what problem it solves and I find it irritating.

I understand scroll snapping for a gallery, but this is text, and there's nothing more natural and ingrained then scrolling through text, so I don't think the default behaviour should be changed here.

Why shouldn't this be one long page that you can scroll through normally?

The reason is dogfooding. The homepage uses one of the components (viewport carousel) and every section must be viewport to demonstrate its features. Now I understand that's irritating and will change it. Thanks!

Not sure why I can't reply to @amadeuspagel below. The reason is dogfooding. The homepage uses one of the components (viewport carousel) and every section must be viewport to demonstrate its features. Now I understand that's irritating and will change it. Thanks!

Just FYI, you sometimes can't reply to very new comments, the button appears after a few minutes :)

Interestingly, I can scroll across the carousel pages with a Magic Mouse but not with a normal scroll-wheel mouse on Safari 16.4.

Looks interesting. So used to coming across things like this, and then in section N of the documentation is the first time the developer bothers to mention that it’s React-only. A breath of fresh air that this looks genuinely framework-independent.

For what it’s worth, the scroll stuff this whole thread is complaining about doesn’t bother me at all (on mobile). Feels like quite reasonable use of scroll snapping. It’s native, so your platform is providing the implementation.

Thank you. I think the native web can do so much without dependencies or bloat, and had to try and demonstrate its abilities.

Well, I can't read it at all. The scroll behaviour is really off. It jumps around on the slightest scroll. Why even do that?

Edit: on firefox it works better (I was on qute), but it still snaps into places while scrolling which makes reading it annoying still.

Looks like some very large scroll snap, that is nearly impossible to actually navigate.

It uses the native CSS scroll-snap, which is why it varies by browser. But being unable to scroll down to read the rest of any given section because it snaps back up to the top is awful.

It's almost usable with a trackpad, if you can scroll the entire length of the section with a single gesture. Then you can just hold your digits in place to prevent the snap. But if your trackpad isn't the size of an Apple Magic Trackpad, you're gonna have issues. Same with if you don't even have a trackpad, or are using your trackpad over RDP (as I am).

This is really neat. "Javascript optional" is awesome! I'm very glad to see UI libraries look towards functioning on the web without JS.

Looks very complete too. I laughed at the "Overpowered, undersized" description.

Does it allow theming? It's all very flat which I know is fashionable but it looks to me like it's really in need of a few gradients or shadows or something on the buttons, dropdowns etc.

Thanks. It has CSS variables for controls colors, border radius, shadows and borders: https://niui.dev/#colors

I always find hyper-opininated micro-frameworks like this quite neat as you're seeing exactly how its author thinks.

But if I'm going to use a quirky framework, I'd rather use my own.

The concept is nice, but the implementation done wrong. Re-educating users how they should use interfaces is a bad idea

Click a button, a modal opens, click the close button, the modal closes. Click an arrow, the carousel advances. Seems to be standard interaction, what do you mean by re-educating? Thanks

Updated with normal homepage scroll. Thanks for all the feedback! Cheers

I despise whatever you did with the scroll, it is AWFUL

It is not up my a11y

Accessibility was one of the reasons I did it like that, because inactive slides weren't focusable. Now we're tabbing through the whole huge page at once.

Reply on news.ycombinator.com