Creating "Feed" components

•

Something I've been doing a lot of recently is creating "Feed" components. They solve 3 main headaches I was tired of dealing with 👇

First, I'll share some context about when this happens and what the headaches are. Then I'll share some specific examples of what my components look like for Maven. Let's dive in 👇

For context, let's say you have a container set to clip content... And then a long set of UI that scrolls within the parent container. Pretty common, right? In that case, you're probably pretty familiar with these headaches:

Headache 1: If you want to edit content that's below the fold you have to unclip content. After a while, I get tired of doing that every time I want to make a change. And for long mobile feeds it often overlaps my other flows too 🤦‍♂️

Headache 2: Every time I duplicate my content feed I increase my sources of truth. So in this example, any changes I make to the content (even if it's just basic text/avatar overrides) I'll have to perform 4 times otherwise my prototypes become inconsistent 🤦‍♂️

Headache 3: Lots of valuable handoff assets are clipped out of view. Across a single feed, I might have 5+ different contextual states that I want to indicate. But I feel like I have to pick between optimizing for my prototype or optimizing for handoff 🤦‍♂️

So instead what I've been doing at Maven is pulling out my content feeds and creating new main components. In this world that's the "Sidebar Content". It might feel weird turning pure content into a component but it has a lot of benefits:

Benefit 1: All of my UI is exposed for easy editing Benefit 2: I can use an instance of my "Sidebar content" in all kinds of layouts while maintaining a single source of truth for overrides Benefit 3: My feed becomes a resource for handoff (ex: adding annotations like below)

Another place this is super valuable is mobile b/c my content frequently extends beyond the frame. Creating a "Feed" component to then insert in my default mobile template has quickly become second nature 💪

This idea is also tangential to how I use "switchboards". So if you enjoyed this thread you'll definitely like this one as well 👇 twitter.com/Ridderingand/status/1533478577236193281?s=20&t=gSd4CD8THGkCBQL2HcD34A