DEV Community

Josh Puetz for The DEV Team

Posted on

Changelog: New Home Feed Styling

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.

feed image

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

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?

alt_text

Discussion (38)

Collapse
terabytetiger profile image
Tyler V. (he/him)

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.

Collapse
terabytetiger profile image
Tyler V. (he/him)

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.

Collapse
ben profile image
Ben Halpern • Edited on

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

Collapse
amananandrai profile image
amananandrai

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

Collapse
ben profile image
Ben Halpern

Yeah, it's a nice detail

Collapse
waylonwalker profile image
Waylon Walker

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

Collapse
waylonwalker profile image
Waylon Walker

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

Collapse
ben profile image
Ben Halpern

🎉

Collapse
itsasine profile image
ItsASine (Kayla)

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.

Collapse
pp profile image
Paweł Ludwiczak

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 :)

Collapse
v6 profile image
🦄N B🛡

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

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

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?

Collapse
ben profile image
Ben Halpern

@pp I think we should work towards this

Collapse
pp profile image
Paweł Ludwiczak

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 :)

Thread Thread
vaibhavkhulbe profile image
Vaibhav Khulbe

Awesome!

Collapse
v6 profile image
🦄N B🛡

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

Collapse
pp profile image
Paweł Ludwiczak

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.

Thread Thread
v6 profile image
🦄N B🛡 • Edited on

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.

diskussr

Collapse
thoughtinstinct profile image
SparklingINsilence

Lovely new look. Well done 😍

Collapse
moopet profile image
Ben Sinclair

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.

Collapse
moopet profile image
Ben Sinclair

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.

Collapse
wrldwzrd89 profile image
Eric Ahnell

This is good! However, the tags are... kerned? too close to the article title on Safari, which definitely looks weird.

Collapse
pp profile image
Paweł Ludwiczak

I'll give it a look, thanks!

Collapse
rehmatfalcon profile image
Kushal Niroula

I am using the dark theme, but I still get this new light theme on my homepage. The articles pages are still in dark theme though. Is this intentional?

Collapse
joshpuetz profile image
Josh Puetz Author

Thanks @rehmatfalcon : we've noticed this too and are working on it!

Collapse
ben profile image
Ben Halpern

That was based on my hasty move to change another issue. But it's being reverted as part of this...

Adjust overflow in comments and revert inline css #7799

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

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

This makes an adjustment so longer comments subtly fade away... Maybe not the permanent solution but I think it works...

Screen Shot 2020-05-12 at 12 12 25 PM

This also fixes the ill-fated inlined <style>

Thanks for the quick debugging help everyone 😭

Thread Thread
iamschulz profile image
I am Schulz

Lights out now. That was fast :)

Collapse
waylonwalker profile image
Waylon Walker

Same Here

Collapse
waylonwalker profile image
Waylon Walker

Mine just came back.

Thread Thread
ben profile image
Ben Halpern

Fix has been deployed.... The issue that this was meant to fix now persists, but it's the far lesser of two problems. 🙃

Collapse
fultonbrowne profile image
Fulton Browne

Same here

Collapse
glennmen profile image
Glenn Carremans

The dropdown when you hover over the user icon (top right) doesn't work anymore on the home feed.
And as mentioned below the dark theme 😅

Collapse
ben profile image
Ben Halpern

fixed...

Collapse
glennmen profile image
Glenn Carremans

Am I the only one that is bothered by this 😅 could be only me
flare tag

I am referring to the flare tag text that isn't vertical centered

Thread Thread
ben profile image
Ben Halpern

Hmmmm looks a little different on my machine. Care to submit an issue?

Thread Thread
glennmen profile image
Glenn Carremans

Done! 😄

Flare tag text vertical alignment #7808

Describe the bug

The text in a flare tag (I believe that is the correct name for it) isn't vertically aligned anymore. I believe this is because of the font change.

To Reproduce

  1. Go to home feed
  2. Scroll to you find a post with a flare tag

Expected behavior

Text should be nicely centered.

Screenshots

image

Desktop (please complete the following information):

  • OS: MacOS 10.15.4
  • Browser: Brave
  • Version: 1.8.95 (Chromium: 81.0.4044.138)

Additional context

Thread Thread
pp profile image
Paweł Ludwiczak

Cheers, I'll give it a look!

Collapse
nickytonline profile image
Nick Taylor

All fixed.