Newsletter Signup Form

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

I’m most proud of how modular and reusable the components are in this project. Instead of relying on a monolithic script, I leveraged custom web components (e.g., <field-c>, <ctabutton-c>, and <benefit-c>), which made the project more scalable and maintainable. I also implemented an event-driven architecture with a singleton EventBus, which simplified communication between components without direct dependencies.

Next time, I would consider optimizing the styling approach. While CSS variables and @layer organization are great, a scoped styles approach using Shadow DOM can sometimes make debugging easier. I might also explore ARIA attributes for better accessibility in custom elements.

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

One major challenge was ensuring custom components interacted smoothly while maintaining encapsulation. Since each web component runs in its own Shadow DOM, accessing elements like the button inside <ctabutton-c> or the input in <field-c> required specific queries within their respective shadow roots.

To solve this, I:

Used event-driven communication via eventBus to manage state and actions globally. Ensured elements inside Shadow DOM were properly queried using .shadowRoot.querySelector() where necessary (e.g., resetting the field value). Carefully managed form validation by emitting an event when the email field was validated, allowing the CTA button to enable/disable dynamically. Another challenge was CSS consistency across components, given that styles inside a Shadow DOM are scoped. I handled this by leveraging CSS variables in the :root to maintain a consistent design.

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

While the project is well-structured, I’d like feedback on:

Accessibility: Are there improvements I can make to ensure the form and interactive elements are more accessible? Error handling: Right now, form validation only checks for a valid email format. Should I implement additional validation, such as checking for disposable email addresses? Performance optimizations: The event-driven approach is working well, but is there a more efficient way to handle component updates?