Responsive Article Preview Component HTML / CSS / JS

What are you most proud of, and what would you do differently next time?

I'm most proud of creating a component that works well across different screen sizes with distinct behaviors appropriate to each. The way the share functionality adapts between mobile and desktop demonstrates good responsive design thinking.

Next time, I would:

• Plan my HTML structure more carefully to avoid issues with overflow and positioning.
• Create a more modular CSS approach to handle the speech bubble styling.
• Consider using CSS custom properties for values like the mobile breakpoint to maintain consistency.
• Implement proper focus management from the beginning rather than adding it later.

What challenges did you encounter, and how did you overcome them?

1. Maintaining accessibility while toggling visibility - I initially struggled with properly updating aria-hidden attributes. I solved this by consistently checking the element's hidden state and setting the aria attribute accordingly.

2. Different behaviors across screen sizes - The mobile vs. desktop layout required different behaviors for the same components. I implemented conditional logic based on screen width to handle these differences.

3. Positioning issues with the toast component - I had challenges with the toast being cut off by overflow settings. I had to carefully balance maintaining border-radius on images while allowing the toast to be fully visible. Because I had overflow: hidden set on the article initially, the toast pop-up on larger devices was getting cut off. When I updated my stylesheet to have overflow: visible at larger devices, my border-radius on the image disappeared. I solved that by manually adding the border-radius to both the top-left and bottom-left corners of the image. This allowed me to have the toast visible while maintaining the border-radius on the image.

4. Focus management - The button staying in focus state after closing the toast was confusing. I learned to use the blur() method to programmatically remove focus when appropriate.

What specific areas of your project would you like help with?

1. Creating a more elegant solution for the speech bubble styling that works well across all screen sizes

2. Improving my CSS Grid implementation to better handle complex layouts

3. Implementing smooth transitions/animations when toggling the visibility of elements

4. Developing a more comprehensive focus management system for better keyboard accessibility