Josh Puetz for The DEV Team

Posted on May 12, 2020

Changelog: New Home Feed Styling

#changelog #meta

Starting today you'll notice a new look on the home page. Thank to a huge effort by Pawel/@pp many components in the home page new feed has been changed and generally cleaned up to align with the Crayons visual design language that has been rolling out across the site. We've also taken this opportunity to add some new functionality: prominent article comments are displayed right in feed card.

I know that style changes can be, ahem, controversial, so feel free to give us your feedback below. You can also log visual bugs as issues in our issue tracker.

Psst: interested in the work it took to make this happen? You can check out the PR:

Home Page Feed redesign + top comments #7579

joshpuetz posted on Apr 28, 2020

What type of PR is this? (check all applicable)

[X] Refactor
[X] Feature
[ ] Bug Fix
[ ] Optimization
[ ] Documentation Update

Description

This PR is a merge and rebase of two different previous spikes: Pawel's excellent styling and markup changes to the feed (#7151), and adding top comments to article feed cards (#7426).

Known Issues / Punted Issues

Top comments are only shown in the initial articles loaded, and not those loaded upon scroll:

While top comments were added to the feed generation in app/views/stories/feeds/show.json.jbuilder, the were not added to the ElasticSearch index. As a result top comments only appear for the initial set of posts loaded, and not posts loaded upon scroll. This work should be done, but I'm punting to a future cycle.
Podcast results in search are still using legacy styling: it would be nice if the were migrated to the new style language. Punting this to a future cycle with help from @ludwiczakpawel

Things I need help with:

[x] Let's make sure the loading state placeholder cards for featured post maintain the 100:42 aspect ratio while it's loading so there isn't that jump.
[x] I think we'll need some truncation/max-height for the comments, though I do currently like that it includes rich content.
[x] There seems to be an issue with loading paginated posts... reactionsDisplay is not defined (@joshpuetz May 4 2020: I think this was resolved: pagination/loading working for me locally both logged out and logged in)
[x] Looks like the logged out/server-rendered cards are stuck in the "saved" state for readinglist button. (@joshpuetz May 5 2020: this appears to be fixed: logged out reading list buttons are say 'save' now)
[x] Logged in: 'Save' buttons (as well as search result follow buttons) don't update visual state until mouse moves off of them
[x] If there's only one comment and it happens to be the top one, we probably want something besides "See all 1 comments". Although this is an unlikely scenario, may as well account for it now. I'd say we can probably just remove the button.
[x] Are the cards intended to be separated in narrow devices again? They had been changed to touching in a prior PR.
[x] (@nickytonline tackling in #7638) I think the whole card should remain clickable as a link to the post, including the whitespace, with the other links being clickable to their various specific locations, like tags, username etc if clicked specifically. This is sort of a hack but I think it's good UX. This could be accomplished with an "empty" position:absolute link as the first child within crayons-story__body before the crayons-story__top div which had top:0;left:0;right:0;bottom:0; and as long as crayons-story__bodywere positioned relative and all the variousz-index` worked out it would work fine.
[x] I think we'll need to temporarily include some of the stylesheets right in the HTML of index to make sure it's included for folks on the "old shell" via serviceworkers. We don't yet have a really solid solution in place for migrating substantial style changes like this besides that.. but I think that would be a fine solution. (@joshpuetz Verified styles are already included in the base HTML document)
[x] Styling problems with alignment of Flare tag
[x] Styling problems with the Reading Time label in both regular in and mobile view
[x] Styling problems with controls in the mobile view
[x] Search results "Save" button not working
[x] Follow buttons not showing on 'People' search results
- [x] 422 uparseable entry showing when attempt to follow/unfollow from this page)
[x] Verify podcast card layout/interactions

Related Tickets & Documents

#7151 - [WIP] Feed cards #7426 - Display top comments on home page feed

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added tests?

[X] yes
[ ] no, because they aren't needed
[ ] no, because I need help

Added to documentation?

[ ] docs.dev.to
[ ] readme
[X] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

View on GitHub

Top comments (38)

Tyler V. (he/him) • May 28 '20

I really liked the way this looked initially, but I've found that since the changes were made, I'm no longer looking at any articles that aren't coming through as notifications.

Part of it I think is that it feels like the Titles of posts are blending into the comments that are being shown? Maybe there isn't enough whitespace separating individual posts vertically?

I also find it off-putting when something like this happens:

The comments are shown and have an image, causing the actual post information to feel secondary to the comment w/ the image from the post/user preview.

Tyler V. (he/him) • May 28 '20

Admittedly, the screenshot I took doesn't exemplify the issue very well - making me think that part of it is the articles being too close together vertically, or a lack of distinction between where the previous article ends and the new article begins.

Ben Halpern • May 28 '20 • Edited

This articulates something we've also noticed, so we'll be looking to make adjustments. Thanks a lot for the feedback.

amananandrai • May 12 '20

I like the new like and comment icons and also the way profile picture is represented in the cards along with the organisation

Ben Halpern • May 12 '20

Yeah, it's a nice detail

Waylon Walker • May 12 '20

The new design looks 👌 very nice. It feels a bit more lightweight.

Waylon Walker • May 12 '20

Just saw it on mobile... Even better than desktop. 🤩 Well done.

Ben Halpern • May 12 '20

🎉

ItsASine (Kayla) • May 12 '20

Initial thought is I don't care for it. I'd rather see text blobs on the home page as a preview of the article rather than a preview of a reaction to the article I haven't read yet. It's also jarring to see article article article wall of text article article. Before I found this post, I assumed my CSS got all garbled and the walls of text were unstyled article headings somehow.

Paweł Ludwiczak • May 13 '20

This is also something we wanna add in the future but previous feed cards were not ready (in terms of frontend code etc) to bring in article preview. Now they are, so I think it's a matter of time :)

🦄N B🛡 • May 13 '20

I kind of had the same reaction. But I feel silly complaining because of how much better it all is than, ahem, competing platforms.

Vaibhav Khulbe • May 12 '20

Definitely liked the new icons for like and comments! 💯

But...can we get a feature where we can like the post from the home feed?

Ben Halpern • May 12 '20

@pp I think we should work towards this

Paweł Ludwiczak • May 12 '20

yeap, that's definitely the plan but not sure on the timeline though :) since this brings some questions like how should we treat multiple reactions etc - things that we haven't really thought-through yet. BUT again - that's definitely our plan :)

Vaibhav Khulbe • May 13 '20

Awesome!

🦄N B🛡 • May 13 '20

That way lies darkness, because I will judge these things even more by the titles than I already do.

Paweł Ludwiczak • May 13 '20

That's one thing we wanna address somehow before letting people react to articles from the feed. We still want reactions to have certain weight... I don't think we want reactions to mimic Facebook approach - we definitely want users to read through an article first before reacting to it instead of almost automatically hit "like" "like" "like" "like" "like" under every post in the feed.

🦄N B🛡 • May 13 '20 • Edited

Above Response Too Long

Can you please put a title in bold for your reply? That way I can give my reaction before reading it.

But seriously, I commend your attention to the finer points of UX and the kinds of relationships it can enable among readers, platforms, and writers.

Becoming yet another Social Media extreme of the shallow, trite, and immediate is still in the cards for dev.to.

SparklingINsilence • May 14 '20

Lovely new look. Well done 😍

Ben Sinclair • May 30 '20

I like the comments in my feed, but what makes a comment "prominent"? I can't see a pattern to why I see some comments and not others.

Ben Sinclair • May 30 '20

Oh, I found it, in app/models/article.rb:31

  has_many :top_comments,
            -> { where("comments.score > ? AND ancestry IS NULL and hidden_by_commentable_user is FALSE and deleted is FALSE", 10).order("comments.score DESC") },
            as: :commentable,
            inverse_of: :commentable,
            class_name: "Comment"

So it's top-level visibile-to-you comments in order of score, which is... wait...

(number of reactions) + (number of child comments / 2) + (bonus) - (spamminess)

and bonus is 2 points for (> 200 characters) and 1 point for including a code block.
and spamminess is 0 for normal users and 100 for anonymous users.

So it's mostly top-level visibile-to-you comments from non-anonymous users based on number of reactions and replies, and the rest is important but uninteresting to general users.