Don't Fuck with Scroll
dontfuckwithscroll.com
dontfuckwithscroll.com
A good SPA works just like a regular website and other than it being fast and responsive, you shouldn't even notice it is one. But alas.
Most often though, I see it done inconsistently, and it's a painful mess
Blaming SPAs for such things is like blaming the ocean for a hurricane... Sure, you'd have less hurricanes without the ocean, but it's ultimately not the reason for them
I'm sorry but I have to disagree. I've never seen a fast or responsive SPA, not to mention the absurd amounts of resources they require. A tab taking up 400 mb of memory is pure insanity and this is the de facto standard these days. Look at HN: this is the definition of fast and responsive. It will work equally well on my dual-xeon workstation and a first gen raspberry pi zero. This is fast and responsive. Most people who use a computer to navigate the internet would not care if the browser blinks when you navigate a page. Mobile users don't really use the web beyond social media and chats so it makes no difference to them either. SPAs solved a problem no one had by creating 1000 other problems. Just take us back to server side html rendering and I guarantee most ordinary people as well as most developers will love it.
Here, let me blow your mind. It's in Czech, but you can click the orange buttons to try the activites: https://gramazing.com/features .
Made with NextJS (client side only), Django, hosted in Germany on a cheap VPS.
Statically generated site is something completely different and I couldn't make Gramazing like that.
The problem was: can we make the same data APIs to serve the web and mobile apps?
To be honest, server side rendering is always the king regard of performance. A properly optimized static html generator can make you see the page under 0.5s after you click the link even under most awful network. And it isn't even enough for most spa to download the javascript alone (it will at least need 3 rtt to see basic layouts, one time html, one time js, the js load the images and style)
This is why I typically fight SPAs every step of the way with our clients, if any other architecture will work I see if there is a good case to be made for it, because I know that SPAs are usually going to end up shipping broken in some way.
I'm aware that it is different under the hood.
You can long press the back button to choose an older history entry to go to directly.
Especially Microsoft TechNet articles and the like. Microsoft should be ashamed breaking back functionality on people searching for solutions to windows problems. Just adds one more complaint to the list.
For SPAs though, you need to do some non-trivial (at least for non-trivial apps) additional work to manage the history. Often teams so this step out butcher it, as they run out of time/budget.
Or use a complex bloated framework, creating other challenges.
IMHO, that assessment and corresponding answer applies perfectly not only to Momentum scrolling but also to most of the current trends in UX design. I wonder how we got into this worship of aesthetics to the detriment of everything else.
I'm not especially dumb but after they dropped "hamburger button" I think it took me about 10 years to ever look for the "hamburger button" for basic functionality, especially on non-touch devices.
What horrors lie beneath the hamburger? What void of regular function could there be?
Just today I googled how do I disable Apple's annoying "your password is required to enable touch ID" on macOS, not the one after reboot (that's understandable), but the one that seems to be based purely on time. The answer seems to be "you can't". The closest thing I found is the "bioutil" command that allows you to reduce that timeout but not increase it. I may try reverse engineering it to see where that check for maximum value is implemented, and if I can call the underlying API directly to bypass it.
Well, you don't know what tomorrow you will need. I remember my grandmother needing to make the house accessible after my grandfather lost control of half his body after a stroke.
And those accessibility enhancements are not a problem even if they're not directly needed anymore: no steps between rooms, big sliding doors, lot of space for the shower etc. Even able people can appreciate those.
Like: build a house on only one floor so no stairs => no need for elevators later on. But it requires more floor space.
not hiding the scrollbars on your website doesn't cost you thousands of dollars so I don't really see the equivalence
Is it not an extra step to intentionally hide the scroll bar? And thus, simply no extra work to just... not? Scrolls bars are a convenient feature for all users, nobody is judging the appearance of your website around how it looks with a scroll bar.
Art? Nah. (Maybe once.) Dead horse gimmick, now.
Give me a butt ugly but usable website/program over an overdesigned artwork with essential functionality hidden away to make room for even more pointless whitespace.
I guess folks who rotate their monitors to portrait mode would appreciate not wasting the entire height on a permanent scroll bar, but I like knowing how far I am into the page (not that that's really a true indication of where the page will end due to how large the modern header and footer regions tend to be nowadays).
Then the only way to scroll on desktop is to highlight text across the frame's edge.
If you really want your app to be ergonomic, make sure it works with one and two finger gestures, such as dragging a finger to scroll.
The boring, "ugly" built-in OS widget works extremely well. Every attempt to replace it with something better for one use case inevitably throws out a dozen others that the designer didn't think about.
As well, their link at the bottom to the website that inspired this opinion piece page is chef's kiss.
Viewing the page source on these kinds of pages gives me warn fuzzies, not in a nostalgic way, but in a "these folks get it" kind of way. It's like in the Helvetica documentary where the guy explains what it must have felt like for designers to newly be able to choose Helvetica instead of those 1950s crap script fonts.
Bravo.
Streaming media platforms are probably the most notorious offenders in this space, but are definitely not alone.
Don't fuck with the standard key combos.
Stop surprising users by taking away functionality from other applications.
In Google Sheets on the Mac recently, Cmd-F for searching within the spreadsheet has stopped working—and while it's true that the way it worked was by hijacking that system shortcut, it didn't actually replace it with anything. So the only way to search was to go to the Sheets menu bar and find it in the menu.
Alternatively, a browser extension could potentially provide a helpful solution.
I suspect the implementation may vary on a case-by-case basis. The example [1] on the page utilizes the luxy.js [2] library.
For this specific page [1], I found that I can disable the smooth scrolling behavior by running the following command in the developer tools console:
luxy.init({ wrapperSpeed: 1.0});
It's like Poe's Law but for insipid web UX.
It was far from obvious that this was the cause. In fact I completely forgot about this setting. I thought the problem came from the website or an extension or the browser or bootstrap, damn.
When I zoom on an image, it should zoom with the rest of the page, not resize itself to shrink to the same size. That behavior is infuriating.
But, if you are making something with plenty of precedent, please follow it. There is a reason we wind up with mandated nutrition labels and such. It is good to be similar to things. Especially if you are, in fact, similar
I don't think I even want to count how many hours total I've wasted a minute at a time rewriting a comment I accidentally deleted.
And of course, ideally I don't want to do much scrolling at all, I would prefer stable pagination for basically everything.
It appears that the plugin basically does two things:
1. Repeatedly calls window.requestAnimationFrame with a callback
2. Set a custom style on a specified element (position:fixed, width:100%, transform:translate3d)
You'd have to stop both to override the plugin.
To my recollection, I have never come across this on a website since the Flash days, however.
I hadn't even considered this existing. From the title, I assumed it was about those pages set up to stay fixed on one page and then change entirely to the next one when you've scrolled down far enough.
There was a period of time where this was popular for over-designed product landing pages, but that fad faded out as quickly as it appeared.
If a page with this behavior ever gets linked on HN you’ll know immediately by the 100s of comments raging about it. :)