[HN Gopher] Show HN: Niui 3.0 - lightweight, rich, accessible fr...
___________________________________________________________________
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/
Author : rado
Score : 64 points
Date : 2023-05-03 11:58 UTC (11 hours ago)
(HTM) web link (niui.dev)
(TXT) w3m dump (niui.dev)
| vintagedave wrote:
| 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.
| rado wrote:
| Thanks. It has CSS variables for controls colors, border
| radius, shadows and borders: https://niui.dev/#colors
| gabrielgio wrote:
| 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.
| LoganDark wrote:
| 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).
| lagniappe wrote:
| 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.
| marban wrote:
| And the cursor if you're extra polite.
| rado wrote:
| Hi, the scrollbar is hidden, because that's a carousel, as
| indicated by the tabs on the left. Overflowing slides have
| standard scrollbars. Thanks!
| franciscop wrote:
| 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.
| rado wrote:
| Thanks, I'll move the homepage out of the carousel
| component, as it seems to be too confusing. Have a nice day
| ptspts wrote:
| 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.
| gnrlst wrote:
| Regardless of the reasoning, it's pretty jarring to scroll
| through the site and have it lock back to a heading.
| rado wrote:
| 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.
| detrites wrote:
| 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.
| rado wrote:
| Thanks, will do. Cheers
| BiteCode_dev wrote:
| That should be a motivational poster or a tshirt
| superbaconman wrote:
| "ctrl+f" looks at github "home" looks at youtube
| rado wrote:
| Yes, it seems search hits inside an inactive slide are
| inaccessible. Great point. Will look into fixing it. Thanks!
| tobr wrote:
| 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.
| rado wrote:
| Thank you. I think the native web can do so much without
| dependencies or bloat, and had to try and demonstrate its
| abilities.
| miragecraft wrote:
| 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.
| bastawhiz wrote:
| 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.
| rado wrote:
| 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.
| genezeta wrote:
| Please, do not hijack the page scroll that way. It makes using
| the scroll-wheel really difficult, even unusable.
| clnq wrote:
| Interestingly, I can scroll across the carousel pages with a
| Magic Mouse but not with a normal scroll-wheel mouse on Safari
| 16.4.
| rado wrote:
| Hi, this is a vertical carousel with native scrolling inside
| the slides. Carousel sliding is also native scrolling with
| scroll snap.
| genezeta wrote:
| That scroll snap -or something- is messing up.
| rado wrote:
| Yes, it's the natural browser behaviour with mouse wheel
| and snapping and maybe I need to think of a workaround.
| Thanks
| amadeuspagel wrote:
| 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?
| rado wrote:
| 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!
| rado wrote:
| 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!
| stefncb wrote:
| Just FYI, you sometimes can't reply to very new comments,
| the button appears after a few minutes :)
___________________________________________________________________
(page generated 2023-05-03 23:02 UTC)