Article preview component

Community feedback

• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted over 3 years ago

  Fantastic work, Igor! Your solution looks excellent! As @Dev-Martinien mentioned, I'd recommend reviewing the accessibility report and resolving those issues.

  To answer your question about the animations, how you've done it by toggling classes and keeping the styles in your CSS is perfect. Wherever possible, it's best to keep your styles in the CSS. JS libraries like GSAP are brilliant for more complex animations and sequences, but that would be overkill for this.

  When reviewing your code, I noticed a couple of areas where I'd recommend tweaking things:

  • You're using Sass, which is great. However, you're nesting a lot of selectors unnecessarily. Nesting selectors adds to the specificity of the generated selector chain in the compiled CSS file. For example, in your CSS, you've got this selector section .right_section .social_wrap .name_and_date .avatar which would be much be as .avatar. Creating overly specific selector chains can lead to specificity issues, especially in larger codebases. So it's best to keep selectors as simple as possible.
  • You're using max-width media queries at the moment. Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and benefit from loading in fewer styles for mobile users, which can be a nice performance gain.

  I hope these tips help. Keep up the great work! 👍

  21

  Marked as helpful
• Account deletedPosted over 3 years ago

  hey good work. just try to fix the view reports

  10

  Marked as helpful