Fucked Up Infinite Scrolling and History API

Almost every day I see fucked up infinite scrolling and history API around the web.

Infinite Scrolling

The correct solution: use virtualized view, add and remove items from DOM as they are or aren’t in a viewport AND update URL accordingly. Silk smooth and responsive solution.

The solutions I see: Just add shit to DOM until page starts to be slow, RAM fills up or the browser freezes/crashes/is killed for excessive memory use. When user reloads a page, they have to scroll again for X seconds, maybe a minute or two. When they send a link to a page, the receiver has to scroll too. Yeah, why not? It will work most of the time. ~~Silk smooth and responsive solution.~~ Easiest and cheapest solution. What do you want from jQuery/vue.js/React, man?

History API

Did you know that since History API has been with us already for a couple of years, the back button in browser is not real back button. A browser provides a JavaScript API to manipulate tab history, so it can point to a very different URL, even when in fact it doesn’t do any new HTTP request (no more hashbangs in Twitter, i.e. http://twitter.com/blah#!/my/virtual/url just to bypass this limitation). So this makes sense for SPAs and other weird web applications.

Before we had infinite redirects back to current url when back button was pressed. With fast fingers it could be bypassed with slower double click.

If history API is really messed up, no help, just close the tab and open previous page again…..so much fun to open search engine and enter the term again. Fortunately I see this only once per two weeks or month.

The situation could be better. I guess we need better tools, better libraries, better control. Or don’t implement infinite scrolling, but a pagination and put react-router on a leash.

As a web developer I totally understand why these sites with bad scrolling logic and history exist, but it still enrages me sometimes. why? Why? WHy? WHY??? WHYYYYYYYYY!!!!!?????