5 ms·
Show HN: Niui 3.0 – lightweight, rich, accessible front end
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/ https://rado.bg/niui-3-0-native-internet-user-interface/
- rado 3y agoUpdated with normal homepage scroll. Thanks for all the feedback! Cheers
- genezeta 3y agoPlease, do not hijack the page scroll that way. It makes using the scroll-wheel really difficult, even unusable.
- rado 3y agoHi, this is a vertical carousel with native scrolling inside the slides. Carousel sliding is also native scrolling with scroll snap.
- genezeta 3y agoThat scroll snap -or something- is messing up.
- rado 3y agoYes, it's the natural browser behaviour with mouse wheel and snapping and maybe I need to think of a workaround. Thanks
- amadeuspagel 3y agoI 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?
- rado 3y agoThe 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!
- rado 3y agoNot 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!
- stefncb 3y agoJust FYI, you sometimes can't reply to very new comments, the button appears after a few minutes :)
- clnq 3y agoInterestingly, I can scroll across the carousel pages with a Magic Mouse but not with a normal scroll-wheel mouse on Safari 16.4.
- vintagedave 3y agoThis 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.
- rado 3y agoThanks. It has CSS variables for controls colors, border radius, shadows and borders: https://niui.dev/#colors https://niui.dev/#colors
- gabrielgio 3y agoWell, 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.
- LoganDark 3y agoLooks 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).
- bastawhiz 3y agoOn 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.
- rado 3y agoThanks 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.
- bastawhiz 3y ago> 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.
- lagniappe 3y agoThere 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.
- BiteCode_dev 3y agoThat should be a motivational poster or a tshirt
- marban 3y agoAnd the cursor if you're extra polite.
- rado 3y agoHi, the scrollbar is hidden, because that's a carousel, as indicated by the tabs on the left. Overflowing slides have standard scrollbars. Thanks!
- gnrlst 3y agoRegardless of the reasoning, it's pretty jarring to scroll through the site and have it lock back to a heading.
- rado 3y agoThe 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.
- detrites 3y agoMake 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.
- tobr 3y agoLooks 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.
- rado 3y agoThank you. I think the native web can do so much without dependencies or bloat, and had to try and demonstrate its abilities.
- miragecraft 3y agoI 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.
- KomoD 3y agoI despise whatever you did with the scroll, it is AWFUL
- quickthrower2 3y agoIt is not up my a11y
- rado 3y agoAccessibility 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.
- leetwito 3y agoThe concept is nice, but the implementation done wrong. Re-educating users how they should use interfaces is a bad idea
- rado 3y agoClick 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