HN Explorer

39 comments

[ 3.4 ms ] story [ 98.7 ms ] thread
genezeta
Please, do not hijack the page scroll that way. It makes using the scroll-wheel really difficult, even unusable.
rado
Hi, this is a vertical carousel with native scrolling inside the slides. Carousel sliding is also native scrolling with scroll snap.
genezeta
That scroll snap -or something- is messing up.
rado
Yes, it's the natural browser behaviour with mouse wheel and snapping and maybe I need to think of a workaround. Thanks
amadeuspagel
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
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
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
Just FYI, you sometimes can't reply to very new comments, the button appears after a few minutes :)
clnq
Interestingly, I can scroll across the carousel pages with a Magic Mouse but not with a normal scroll-wheel mouse on Safari 16.4.
vintagedave
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.

gabrielgio
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
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).

bastawhiz
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
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.
bastawhiz
> 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
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.
BiteCode_dev
That should be a motivational poster or a tshirt
marban
And the cursor if you're extra polite.
rado
Hi, the scrollbar is hidden, because that's a carousel, as indicated by the tabs on the left. Overflowing slides have standard scrollbars. Thanks!
gnrlst
Regardless of the reasoning, it's pretty jarring to scroll through the site and have it lock back to a heading.
rado
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
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
Thanks, will do. Cheers
franciscop
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
Thanks, I'll move the homepage out of the carousel component, as it seems to be too confusing. Have a nice day
ptspts
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.

superbaconman
"ctrl+f" looks at github "home" looks at youtube
rado
Yes, it seems search hits inside an inactive slide are inaccessible. Great point. Will look into fixing it. Thanks!
tobr
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
Thank you. I think the native web can do so much without dependencies or bloat, and had to try and demonstrate its abilities.
miragecraft
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.

KomoD
I despise whatever you did with the scroll, it is AWFUL
quickthrower2
It is not up my a11y
rado
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.
leetwito
The concept is nice, but the implementation done wrong. Re-educating users how they should use interfaces is a bad idea
rado
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
rado
Updated with normal homepage scroll. Thanks for all the feedback! Cheers