Frontend Mentor - Article preview component solution

This is a solution to the Article preview component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• License

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See the social media share links when they click the share icon

Screenshot

Mobile (375px)	Mobile Share Menu (375px)	Desktop (1440px)

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Tailwind CSS
• Parcel

What I learned

I learned more about accessibility in this challenge, a topic I'm always interested in. I learned about linking toggle buttons with the element they toggle: aria-controls, and how to indicate the current toggle state: aria-pressed and aria-expanded.

Apparently there was also a semantic HTML element for displaying dates and times <time>, it isn't auto-completed by Emmet on VSCode so I never knew it existed until now :D.

Continued development

On this challenge I spent a good chunk of time on the share menu especially the desktop one and although I ended up creating two menus and toggling their display property between mobile and desktop, I'd like to continue to learn about how I can better re-use mobile elements to style them for desktop without duplicating them, although sometimes duplicating them is the best/only option.

Useful resources

• Parent onClick is not triggered when the child element is clicked inside button - This answer helped me fix an annoying issue where the <svg> inside the share menu toggle button was being set as event.target when I click the button in the center (within the svg element's box). Setting pointer-events: none on the svg did the trick so now wherever I click on the button, event.target is always gonna be the button element.
• How can I center an absolutely positioned element in a div? - This one trick I already knew and used in the past, but forgot about it and I used it to center the absolute share menu on desktop on top of the toggle button.

Author

• Website - Mohamed ELIDRISSI
• Frontend Mentor - @elidrissidev

Acknowledgments

This project is licensed under the MIT License.