Project Eleven: Social Feed

Have you been scrolling your social feed today yet or do you prefer to do that during lunch hours?

Nonetheless, I'm sure you've familiar with the endless wall of social media posts - an endless source of entertainment, news and god knows what else.

So how about today we try and implement an endless list of different media posts? That would give you a good intro into mobile first development and hands on experience with intersection observer. And who knows - vertical social networks are quite popular startup theme - you might as well use it for a future project.

Endless Posts Feed: requirements and recipe

As a user I want to be able to see new posts once I reach end of current least, so that I can keep viewing interesting content

Here's an example from Mastodon feed:

As always, you're free to style the feed any way you'd like, but some requirements are to be met:

Requirements

1. There should be no layout shift: e.g. no change of size when image is loaded or new post is added
2. As soon as user is close to the end of the screen - a new batch of posts should be added
3. Feed should be accessible: images should have descriptive alt texts, elements should have sufficient contrast etc
4. Feed should be usable on mobile devices first and foremost

Recipe

1. Start with a static markup of a post for a mobile-sized device
2. Create a function to render a post given the post information
3. Prepare information for several posts
4. Create a feed of those posts
5. Add logic to push more posts on the feed when user scrolls to the end of the page
6. Fine tune scroll threshold for a seamless experience
7. Ensure that accessibility requirements are met with e.g. Lighthouse
8. Create a simple desktop version by keeping main feed the centered on the screen and adding white space on the sides.
9. Scroll, scroll, scroll and enjoy!

Hints

To ensure that image doesn't change it size on load - consider either having a pre-defined aspect ratio for all the posts or provide width/height on ratio of each image along with the post data.

As already mentioned, you could use Intersection Observer API to trigger load of more posts.

You can use a library like FakerJS to generate tons of different posts or get your hands on some mock JSON with images.

Hard mode: Optimised Endless Feed

How long can one person scroll a social media feed before their browser would go nuts from the amount of elements on and off the screen? There certainly is a limit and there might be a way to optimise that.

First rule of any optimisation: measure first! Luckily for us most of browser dev tools come with a profiler that allows to do just that.

Modern browsers seem to optimise invisible pixels, but internal resources (like a list of objects) and just the raw count of elements on the page would still use more and more memory as user scrolls.

How can you optimise that while meeting the requirements (specially the one about the layout shifts)? Is it possible to have a truly eternal feed?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?