A common theme in web development, and the crux of the so-called "Web 2.0" is scrolling through dynamic lists of content. Tildes is such an example: you can scroll through about 50 topics on the front page before you reach a "next" button if you want to keep looking.

There's a certain beauty in the simplicity of the next/previous page. When done right it's fast, it's easy, and fits neatly into a server-side rendered model. However, it does cause that small bit of friction where you need to hit the next button to go forward -- taking you out of the "flow", so-to-speak. It's slick, but it could be slicker. Perhaps more importantly, it's an interesting problem to solve.

A step up from the next/previous button is to load the next page of content when you reach the end of the list, inserting it below. If the load is pretty fast, this will hardly interrupt your flow at all! The ever-so-popular reddit enhancement suite does precisely that for reddit: instead of a next button, when you reach the bottom, the next page of items simply plops into place. If the loading isn't fast enough, perhaps instead of loading when they reach the last item, you might choose to load when they hit the fifth from last item, etc.

To try to keep this post more concrete, and more helpful, here's how this type of pagination would work in practice, in typescript and using the Intersection Observer API but otherwise framework agnostic:

/**
 * Allows the user to scroll forever through the given list by calling the given loadMore()
 * function whenever the bottom element (by default) becomes visible. This assumes that
 * loadMore is the only thing that modifies the list, and that the list is done being modified
 * once the promise returned from loadMore resolves
 *
 * @param list The element which contains the individual items
 * @param loadMore A function which can be called to insert more items into the list. Can return
 *   a rejected promise to indicate that there are no more items to load
 * @param triggerLoadAt The index of the child in the list which triggers the load. Negative numbers
 *   are interpreted as offsets from the end of the list. 
 */
function handlePagination(list: Element, loadMore: () => Promise<void>, triggerLoadAt: number = -1) {
    manageIntersection();
    return;

    function handleIntersection(ele: Element, handler: () => void): () => void {
        let active = true;
        const observer = new IntersectionObserver((entries) => {
            if (active && entries[0].isIntersecting) {
                handler()
            }
        }, { root: null, threshold: 0.5 });
        observer.observe(ele);
        return () => {
            if (active) {
                active = false;
                observer.disconnect();
            }
        }
    }

    function manageIntersection() {
        const index = triggerLoadAt < 0 ? list.children.length + triggerLoadAt : triggerLoadAt;
        if (index < 0 || index >= list.children.length) {
            throw new Error(`index=${index} is not valid for a list of ${list.children.length} items`);
        }

        const child = list.children[index];
        const removeIntersectionHandler = handleIntersection(child, () => {
            removeIntersectionHandler();
            loadMore().then(() => {
                manageIntersection();
            }).catch((e) => {});
        });
    }
}

If you're sane, this probably suffices for you. However, there is still one problem: as you scroll,
the number of elements on the DOM get longer and longer. This means they necessarily take up
some amount of memory, and browsers probably have to do some amount of work to keep
track of them. Thus, in theory, if you were to scroll long enough, the page would get slower and
slower! How long "long enough" is would depend mostly on how complicated each item is: if each one
is a unique 20k element svg, it'll get slow pretty quickly.

The trick to avoid this, and to get a constant overhead, is that when adding new items below, remove the same number of items above! Of course, if the user scrolls back up they'll be expecting those items to be there, but no worries, the handlePagination from before works just as well for loading items before the first item.

However, this simple change is where a key problem arises: inserting elements below doesn't cause any layout shift, but inserting an item above ought to--right?

The answer is: it depends on the browser! Back in 2017 chrome realized that it's often convenient to be able to insert items into the dom above the viewport, and implemented scroll anchoring, which basically ensures that if you insert an item 50px tall above the viewport, then scroll 50px down so that there's no visual layout shift. Firefox followed suite in 2019, and edge got support in 2020. But alas, safari both on mac and ios does not support scroll anchoring (though they expressed interest in it since 2017)

Now, there's two responses to this:

• Surely Safari support is coming soon, they've posted on that bug as recently as April! Just use simpler pagination for now
• Pshhhh, just implement scroll anchoring ourself!

Of course, I've gone and done #2, and it almost perfectly works. Here's the idea:

• Right before loadMore, find the first item in the list which is inside the viewport. This is the item whose position we don't want to move. Use getBoundingClientRect to find it's top position.
• Perform the DOM manipulation as desired
• Use getBoundingClientRect again to find the new top of that item.
• Insert (or remove) the appropriate amount of blank space at the top of the list to offset the change in client rect (note that if there's scroll anchoring support in the browser this should always be zero, which means this effectively works as progressive enhancement)

Now, the function to do this is a tad too long for this post. I implemented it in React, however, and combined it with some stronger preloading object (we don't need all the items we've fetched from the API on the DOM, so we can use before, onTheDom, after lists to avoid getting a bunch of api requests just from scrolling down and up within the same small number of items).

What's interesting is that it still works perfectly on chrome even with scroll-anchoring disabled (via overflow-anchor: none), but on Safari there is still, sometimes, 1 frame where it renders the wrong scroll position before immediately adjusting. Because I implemented it in react, however, my current hypothesis is I have a mistake somewhere which causes the javascript to yield to the renderer before all the manipulations are done, and it only shows up on Safari because of the generally higher framerates there

If it's interesting to people, I could extract the infinite list component outside of this project: I certainly like it, and in my case I do expect people to want to quickly scroll through hundreds to thousands of items, so the lighter DOM feels worth it (though perhaps it wouldn't if I had known, when starting, how painful getting it to work on Safari would be!).

What do you think of this type of "true" infinite scrolling for web? Good thing, neutral thing, bad thing? Would you use it, if the component were available? Would you remove it, if you saw someone doing this? Are there other questions about how this was accomplished? Is this an appropriate post for Tildes?

Hey folks,

A few years ago I went in to the basement room where the cool kids hung out while they did video conversions and such. They had a playlist in the background of "Haunting Covers" or something like that. It was a take on all different music, but played in a really chilled, gothic style and by a mix of un/lesser-known artists.

Does anyone have some recommendations? To give you an idea, one of the more known tracks I heard while I was there was Nirvana's Smells Like Teen Spirit but covered by Tori Amos.

Thanks.

I recently discovered Paperless-ngx and have immediately fell in love. I must now decide whether to host it on my VPS (risky with personal documents), on a Pi at home or finally invest in a proper home server (something cheap but with a bit more power than a Pi4). It can totally be run a Pi, but performance may not be as good.

Does Tildes have a big self-hosted community? What are you self-hosting currently, and what do you enjoy about it?

Just popped in my head, with the massive influx of users, there's been a lot more meta discussion happening in regular threads.

Perhaps it might be useful to have that as a label on comments. I'd almost go so far as to have the label highlighted like Exemplary for new users to help highlight when discussion function and culture of the site.

I recently acquired the criterion release of Stalker (1979), a film I have not seen since I was a teenager. I remember liking it back then, but I didn't appreciate how much it would simultaneously wash over me as well as work it's way into the back of my mind, like an eel of a tone poem.

For those who have not seen Stalker, it is a journey of three men into a mysterious and beautiful "Zone" in search of their deepest desires.
I full throatedly recommend. Gorgeous film.

While the symbolism has been thoroughly discussed elsewhere on the internet, a less talked about aspect (of this and other films) is how it makes the viewer feel.

For me personally, the three moments that most affected me on a visceral level all involve people lying down.
Why, I'm not sure.
But they are: The scene where The Stalker lays in the tall grass, I felt such a calm bliss as he soaked in the lush green nature of The Zone;
The scene where The Stalker sleeps on a tiny dry piece of ground in a large flooded canal, I felt a sense of sublime misery. The only thing I could compare it to is when you get suddenly awoken when you haven't had enough sleep, and have to go out into the cold early morning still nodding off, and nothing feels real;
and third is the lingering shot of the dog sitting guard over the entwined bodies near The Room.
I felt a profound longing sadness. I imagined that the entwined lovers died together in some relation to their deepest desire.

I really love films that wash over the viewer in this way like a tide, and I hope that some of you do as well.

Another film that has a similar aspect is Upstream Color (2013), and while the creative mind behind that film is....perhaps a mentally unwell abuser, I can't dismiss the art he has created. I guess my relationship with his work is complicated.

How do you Feel about stalker?

Are there any films that had a similar effect on you as this one did to me?

Always looking for recommendations!

I started playing Rocket League at the beginning of Season 9, and am only plat (1s/2s) and gold (3s), so take with a grain of salt. However, knowing that it's very difficult to adjust to new controller bindings, I took a lot of time to find a layout that was as ergonomic and low-effort as possible. I think this is objectively better than the alternatives.

These bindings are for a DS4 with the official back button attachment. They can apply to any traditional controller layout with at least one set of back paddles.

The key points:

1. Reverse is moved from an analog trigger to a binary button, freeing up an analog input for boost
2. Boost is moved from a binary button to an analog trigger, making feathering the input easier
3. Directional air-roll is bound to the right thumb-stick, giving analog adjustment precision

Full control bindings:

• LB: powerslide
• LT: drive forwards
• L paddle: drive backwards
• RB: jump
• RT: boost
• R paddle: toggle ballcam
• LS: pitch and yaw
• RS: directional air roll left and right

Camera bindings can be put on the face buttons or sacrificing some of the d-pad buttons. If you're using DS4Windows, you can also do a macro to make holding L3 toggle RS into a camera input. In either case, you lose precision since the camera input is no longer analog, but I think that tradeoff is worth it because most camera use is just checking teammate position before kickoff.

Ok ok disclaimer, I am a cosmology PhD candidate, don’t have the degree yet. However I do feel comfortable at this point calling myself a cosmologist (I think for the first time ever). In any case, with all the new people here, I think an AMA might be fun. I will try my best to answer all of the questions I get asked, but it may not happen quickly!

A bit about my research. I study the conditions in the early universe, specifically when the cosmic microwave background was forming, and I use CMB data to test our understanding of this era. The CMB formed roughly 300,000 years after the big bang, when the universe was 1/1000th its current size. The patterns that we see in the temperature fluctuations of the CMB can tell us a lot about the universe at this early time, and specifically we can try to use them to see if anything ‘unexpected’ happened at this time, like a hitherto undiscovered particle annihilating into ‘normal’ particles (for example).

Ask me anything about the early universe, or physics writ large, and I will do my best to answer!

I'm curious to know where ~ users are from!

I live in the United States in the greatest state in the union (Minnesota, of course!) The land of Target, passive-aggression, and wishing Prince wasn't dead. Oh, and 10,000 11,842 lakes.

Edit 9: Super Ultra 2019 Updated Crappy Map of the World

*Edit- If you'd like to be counted, add a top level comment. I've counted all child comments up to this point, but may not catch all of you. Also, I may slow down here pretty quick.

Current count:

Australia: 5
Austria: 3
Belgium: 3
Brasil: 7
Canada: 22
Chile: 1
China: 2
*Hong Kong: 1
Croatia: 1
Czech Republic: 1
Denmark: 1
Egypt: 2
Estonia: 1
Finland: 4
France: 5
Germany: 10
Hungary: 1
Iceland: 2
India: 12
Ireland: 3
Israel: 1
Italy: 3
Japan: 1
Kenya: 1
Kosovo: 1
Lebanon: 1
Lithuania: 2
Malaysia: 1
Mexico: 2
Mongolia: 1
Morocco: 1
Nepal: 1
Netherlands: 5
New Zealand: 5
Norway: 2
Philippines: 1
Poland: 2
Portugal: 2
Romania: 1
Russia: 3
Singapore: 3
Slovenia: 1
South Africa: 2
South Korea: 1
Spain: 4
Switzerland: 1
Sweden: 3
Thailand: 1
Turkey: 1
UAE: 2
Ukraine: 1
UK: 15
USA: 119
*Puerto Rico: 1
Vietnam: 1

For those of you who are new I usually post awards predictions from time to time. Some people seem to like it, at least when it was just a handful of active users.

Anyways these are predictions I currently have for “the guilds” meaning industry awards that are not the Oscar’s. Segmented by different unions. They usually are more populist than the Academy, due to many members being from the TV and commercial world. Whenever there’s an artsy contender that they avoid, the Academy nominates it anyway (Drive My Car, Triangle of Sadness, Phantom Thread being some recent examples that come to mind).

Producers Guild of America Awards (PGA):

1. The Holdovers
2. Killers of the Flower Moon
3. Oppenheimer
4. Dune: Part Two
5. Barbie
6. Past Lives
7. The Zone of Interest
8. The Killer
9. Saltburn
10. Mission Impossible: Dead Reckoning - Part 1

Directors Guild of America Awards (DGA):

1. Martin Scorsese - Killers of the Flower Moon
2. Christopher Nolan - Oppenheimer
3. Alexander Payne - The Holdovers
4. Denis Villenueve - Dune: Part Two
5. Greta Gerwig - Barbie

Writers Guild of America Awards (WGA):

Original:

1. The Holdovers
2. Past Lives
3. Saltburn
4. May/December
5. Air

Adapted:

1. Barbie
2. Killers of the Flower Moon
3. Oppenheimer
4. Dune: Part Two
5. The Killer

Screen Actor’s Guild Awards (SAG):

Ensemble:

1. The Holdovers
2. Barbie
3. Killers of the Flower Moon
4. Oppenheimer
5. The Color Purple

Lead Actor:

1. Paul Giamatti - The Holdovers
2. Cillian Murphy - Oppenheimer
3. Leonardo DiCaprio - Killers of the Flower Moon
4. Colman Domingo - Rustin
5. Barry Keoghan - Saltburn

Lead Actress:

1. Margot Robbie - Barbie
2. Greta Lee - Past Lives
3. Natalie Portman - May/December
4. Zendaya - Challengers
5. Fantasia Barrino - The Color Purple

Supporting Actor:

1. Robert Downey Jr. - Oppenheimer
2. Ryan Gosling - Barbie
3. Robert DeNiro - Killers of the Flower Moon
4. John Magaro - Past Lives
5. Dominic Sessa - The Holdovers

Supporting Actress:

1. D’avine Joy Randolph - The Holdovers
2. Lilly Gladstone - Killers of the Flower Moon
3. Emily Blunt - Oppenheimer
4. Julianne Moore - May/December
5. Taraji P. Henson - The Color Purple

American Cinema Editors Awards (ACE):

Comedic Editing:

1. Barbie
2. The Holdovers
3. Next Goal Wins
4. Poor Things
5. No Hard Feelings

Dramatic Editing:

1. Dune: Part Two
2. Killers of the Flower Moon
3. Oppenheimer
4. Past Lives
5. The Killer

Do we have any football fans here that are following the Champions League? Who do you folks think will win?

For how successful Man City have been this year, I am hoping that they can secure the Treble. I still feel like Inter is going to give them a lot of issues.

I’m thinking a 2-1 win for City.

Further questions:

• If you go by both, do you ever mix them or do you keep them totally separate?
• Do you let your real life friends, family and peers know about your online pseudonyms?
• For people building an online presence as a kind of brand, how does this impact your choice?

I’m attending college this fall and moving cross country for this move. I wanted to ask everyone who’s currently in college or graduated not too long ago on whether if it’s worth it to stay on-campus in the dorms.

I heard you get assigned a roommate and some dorms, depending on which one you get, can have 1-3 additional roommates.

I’ve always had my own room and the closest thing I’ve had to a roommate was my little sister…but she had her own room as well.

I know staying on campus it’s easier to get to class and I get to live the traditional college experience. I don’t mind having a roommate but I heard if you have a shitty one, it’s not gonna be fun.

The perks of having your own apartment you get the ability of having your own space and doing whatever you want with no dorm monitors right? Only downside is paying rent?

If you have any insight or experience to share I'd love to hear them! 🙏

Anyone into SUP/iSUP? I got my iSUP about 3 years ago and use it all the time. It’s a big one, able to carry 400 lbs so my entire family gets on it and cruises around lakes and rivers sometimes. What does everyone else have?

Imagine if some of the everyday things we take for granted were invented today. What are some examples that would face significant pushback due to various concerns or perceived negatives?

Some ideas might be coffee (caffeine), internal combustion engines, plastic bags, smartphones, net neutrality, photoshop, etc…

Have you watched any TV shows recently you want to discuss? Any shows you want to recommend or are hyped about? Feel free to discuss anything here.

Please just try to provide fair warning of spoilers if you can.

Was looking for the best club house sandwich in Vancouver, BC. Found “Green’s and Beans Deli” across from Royal Colombian Hospital in New West.

Not only were their sandwiches priced as if it was still 20 years ago, but the owner new everyone’s preferences and their urgency to go back to work (“Sorry, let me take her order first - she’s only got 15 minutes.”). When it came time to pay (credit card tap), there was NOT TIP SCREEN. If you’re from the area you’ll know what I mean and probably fall out of your chair.

Oh, and the sandwiches were obviously amazing. Highly recommend.

Any places you recently found worth raving about?