Article Preview Component Solution

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

• Semantic HTML5 markup
• CSS custom properties and BEM methodology
• Vanilla JavaScript with ES6+ features
• Mobile-first responsive design
• Focus on accessibility
• Progressive enhancement

Key Features

• Responsive Design: Adapts seamlessly between mobile and desktop views
• Keyboard Accessibility: Full keyboard navigation support with focus trapping
• Screen Reader Support: ARIA attributes for enhanced accessibility
• Smart Animations: Respects user's motion preferences
• Click Outside: Closes share popup when clicking outside
• Performance Optimized: Debounced resize handling

What I Learned

The project provided great insights into creating accessible interactive components. Here are some key implementations:

Managing component state:

const state = {
  isShareActive: false,
  isMobileView: window.innerWidth < BREAKPOINTS.TABLET,
  focusableElements: [],
};

Implementing focus trapping for keyboard users:

function setupFocusTrap() {
  const focusableSelectors =
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
  state.focusableElements = Array.from(
    elements.sharePopup.querySelectorAll(focusableSelectors)
  );
}

Respecting user preferences:

if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  document.documentElement.style.setProperty("--transition-default", "0s");
}