Responsive Article Preview Component with BEM & Flexbo

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

I’m proud of how I implemented BEM (Block Element Modifier) correctly, making my CSS more structured, reusable, and easier to maintain. I’m also particularly happy with how the tooltip smoothly follows the button when resizing the window, ensuring a seamless user experience. This project helped me strengthen my JavaScript event handling, especially for managing responsive interactions.

Next time, I would focus on optimizing event listeners further to improve performance on resize events. I’d also explore using CSS animations to enhance the tooltip’s appearance and transitions for a more polished UI.

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

One of the biggest challenges I faced was dealing with window.innerWidth behaving inconsistently near the breakpoint range. When resizing the window pixel by pixel, I noticed that innerWidth sometimes jumped unpredictably, especially between 418px and 496px (break point is set at 31rem=496px) This caused the tooltip to not transition correctly to the bottom position, and the user-info didn’t always hide as expected.

Sometimes in the dev tools the width was 470px but when I console.log innerWidth, it printed 510px...

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

One area I’d like to improve is handling window.innerWidth inconsistencies near breakpoints.