Skip to content
loading...
The DEV Team profile image The DEV Team

Changelog: New Home Feed Styling

joshpuetz profile image Josh Puetz twitter logo github logo ・1 min read

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

twitter logo DISCUSS (38)
The team behind this very platform. πŸ˜„
Discussion
markdown guide
 

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

 
 

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.

 

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.

 

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

 

The new design looks πŸ‘Œ very nice. It feels a bit more lightweight.

 
 

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.

 

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

 

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

 

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?

 
 

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

 

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

 

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.

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

 
 

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.

 

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.

 

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

 
 

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?

 

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

 

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 😭

 
 
 

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

 

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 πŸ˜…

 
 

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

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

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

 
Classic DEV Post from Aug 1 '19

Which dev.to loading GIF do you prefer?

I made some dev.to loading gifs

The DEV Team profile image
The hardworking team behind dev.to ❀️

Want to contribute to open source and help make the DEV community stronger?

All the dev.to code is freely available on GitHub.

You're welcome to jump in!