Just found out how they generate infinite scrolling text for movies and TV.
npm install *

I built an infinite scroll module today that loaded in more content when you scroll down. Issue was it sent a request for every pixel you scrolled.

Needless to say, many, many, many Ajax requests were sent to the server. Oops.

La me working on a new chrome extension:

- ok, this page has some hidden divs, I need to tell the extension to make windows scroll to the bottom while there are still elements with a hidden class
- creates a while(1) loop with a condition inside it to break if no elements with hidden class are longer there.
- happy with the code
- uploads the extension
- goes to page
- brings out developer tools
- goes to console
- clicks on extension on chrome
- right clicks the extension and then inspect
- ok here we go: la me click on button inside extension popup
- console shows some logs
- nice it's still looking.
.
.
.
- wait! Why is the page not scrolling ???
- looks at logs, WTF nothing changes in logs .....
- OMMMMG a infinite loop .... infinite loop inside chrome ....
- OMMMMMG my pc's gonna crash .
-stop please stop stop.
- wait! how do I stop this?
- tries CTRL+C ... nothing
- tries CTRL+Z ... nothing ...
.
.
.
.
Abort abort Aboooooort.
.
.
.
- Deletes extension from chrome.
-..... loop still running
- clicks on X to close Chrome.....
- not closing O_o
- Oh God, i need to do something before Chrome sucks all the RAM left.
- remembers the savior...
.
.
.
- Task Manager heeeelp me.
- opens Task manager
- chrome is consuming ~ 2 GB of RAM.
- WTF! Kills chrome.

Thanks for reading my lil adventure 😅

Holy shit firefox, 3 retarded problems in the last 24h and I haven't fixed any of them.
My project: an infinite scrolling website that loads data from an external API (CORS hehe). All Chromium browsers of course work perfectly fine. But firefox wants to be special...
(tested on 2 different devices)
(Terminology: CORS: a request to a resource that isn't on the current websites domain, like any external API)

1.
For the infinite scrolling to work new html elements have to be silently appended to the end of the page and removed from the beginning. Which works great in all browsers. BUT IF YOU HAPPEN TO BE SCROLLING DURING THE APPENDING & REMOVING FIREFOX TELEPORTS YOU RANDOMLY TO THE END OR START OF PAGE!
Guess I'll just debug it and see what's happening step by step. Oh how wrong I was. First, the problem can't be reproduced when debugging FUCK! But I notice something else very disturbing...

2.
The Inspector view (hierarchical display of all html elements on the page) ISN'T SHOWING THE TRUE STATE OF THE DOM! ELEMENTS THAT HAVE JUST BEEN ADDED AREN'T SHOWING UP AND ELEMENT THAT WERE JUST REMOVED ARE STILL VISIBLE! WTF????? You have to do some black magic fuckery just to get firefox to update the list of DOM elements. HOW AM I SUPPOSED TO DEBUG MY WEBSITE ON FIREFOX IF IT'S SHOWING ME PLAIN WRONG DATA???!!!!

3.
During all of this I just randomly decided to open my website in private (incognito) mode in firefox. Huh what's that? Why isn't anything loading and error are thrown left and right? Let's just look at the console. AND IT'S A FUCKING CORS ERROR! FUCK ME! Also a small warning says some URLs have been "blocked because content blocking is enabled." Content Blocking? What is that? Well it appears to be a supper special supper privacy mode by firefox (turned on automatically in private mode), THAT BLOCKS ALL CORS REQUESTS, THAT MAY OR MAY NOT DO SOME TRACKING. AN API THAT 100% CORS COMPLIANT CAN'T BE USED IN FIREFOXs PRIVATE MODE! HOW IS THE END USER SUPPOSED TO KNOW THAT??? AND OF COURSE THE THROWN EXCEPTION JUST SAYS "NETWORK ERROR". HOW AM I SUPPOSED TO TELL THE USER THAT FIREFOX HAS A FEAUTRE THAT BREAKS THE VERY BASIS OF MY WEBSITE???

WHY CAN'T YOU JUST BE NORMAL FIREFOX??????????????????

I actually managed to come up with fix for 1. that works like < 50% of the time -_-

What retarded way of writing a json feed is this? what the fuck!

Each product in the feed is translatable, but instead of creating a new object in the feed with the translated content, there's an additional field pointing to a language code (this applies to all translateable fields).
Then each translatable field is appended the number which matches the number appended to the language field containing the desired language code.

In addition to that, the keys doesn't have any sensible meaning, but appearently they abide by som obscure "GS1 / GDSN" standard.

So for each "distinct" field I have to look up the definition of that key

If just the language code and the actual value keys was grouped together.. but no, the feed is ordered by the number after the 'D'.

Yeah for being stuck with something that looks like infinite scrolling, because one product object is fucking gigantic.

FUCKING INSANE MANIAC PIECE OF TRASH.
@#%!#€&

The power of scrolling keep amazing me it’s not about fucking content, not about what fiends shared or about interesting shit, it’s about infinite scroll motherfuckers, people are simple as fuck.

It's CSS quick maffs time! Consider the following code:

<div class='container flex'>
<nav class='menu flex'>
<a href='#'>Menu item 1</a>
(arbitrary amount of links)
</nav>
<button type='button'>Sign in</button>
</div>

You want the layout to look like a horizontally scrolling, single line menu with a Sign in button to the right. Both container and menu are flex containers. So, here's the code for the menu:

.menu {
overflow: auto;
}

The problem is, as there is no flex-wrap, menu will not be wrapped, and it will occupy all the space it's needed to accommodate all the elements, breaking its container. Pesky horizontal scroll appears on the whole body.

Boubas will set menu's width to some fixed value like 800px, and this is a bouba approach because bye-bye responsiveness.

Here's what you should do:

.menu {
overflow: auto;
min-width: 0;
}

.menu * {
flex-shrink: 0;
}

This way, menu will occupy exactly the width of an empty div. In flexbox, its width will be equal to all free space that is not occupied by the Sign in button. Setting flex-shrink is needed for items to preserve their original width. We don't care about making those items narrower on narrower screens, because we now have infinite amount of horizontal real estate. Pure, inherent responsiveness achieved without filthy media queries, yay!

The menu will scroll horizontally just like you wanted.

aight bye

I've determined a simple formula for how to get people to stay in your app for long periods of time:

1. Infinity scrolling
2. OPTIMIZE BATTERY USAGE

Why? You can't infinitely scroll if your battery's dead.

Case Study: YouTube.

Fucking Reddit and their new infinite scroll crap. How am I supposed to view old posts now??

I just noticed something.... I think I read more rants if they're displayed in pages with a scrollbar instead of infinite scrolling in the app.

Guess the rewarding feeling of reaching the end of a page helps?

Posting here so everyone can tell me if they have the same problem. I can't scroll through older notifications, so I get stuck with notifications in the end since I can't read them (outside the limit fetched). I think @dfox should implement infinite scrolling like on the Rants screen.

Do any of you suffer from the same problem?