Talks
Speakers
Events
Topics
Sign in
Home
Talks
Speakers
Events
Topics
Leaderboard
Use
Analytics
Sign in
Suggest modification to this talk
Title
Description
Have you ever tried to develop front end code that can be easily used in multiple projects? Reinventing the wheel is no fun. In this talk, I will use an example to share my design process for developing web components that are accessible, pretty, and most importantly easy to reuse. By Joy Heron https://twitter.com/@iamjoyheron Joy Heron is a consultant at INNOQ and develops software as a full-stack developer. She is passionate about developing responsive web applications using progressive enhancement and loves learning new things. Sketchnotes are a hobby. https://rubyonice.com/speakers/joy_heron
Date
Summarized using AI?
If this talk's summary was generated by AI, please check this box. A "Summarized using AI" badge will be displayed in the summary tab to indicate that the summary was generated using AI.
Show "Summarized using AI" badge on summary page
Summary
Markdown supported
In her talk "Web Components: Designing Frontends for Reusability" at Ruby on Ice 2019, Joy Heron explores how to create reusable and accessible frontend components that enhance user experience. She shares her personal journey as a software developer, highlighting her frustrations with front-end coding and her subsequent evolution into a more systematic and reusable component design approach. Key points discussed throughout the presentation include: - **The Importance of Asking the Right Questions**: Joy reflects on her early experiences where she often asked how to implement solutions instead of considering the reasons and potential alternatives. - **Abstraction in Development**: She emphasizes the need to break down repetitively implemented features and seek reusable abstractions in both backend and frontend work. - **Web Components Overview**: Joy discusses what constitutes a web component, including HTML, CSS, and JavaScript, while stressing the importance of starting with semantic HTML to ensure accessibility. - **Component Design Process**: Joy illustrates her design process through examples, such as creating a reusable filtering component called 'Bela' that demonstrates the application of user interface components in multiple projects. - **Accessibility**: The talk addresses how to make components user-friendly for individuals with disabilities, including using screen readers effectively and ensuring that components have clear instructions. - **CSS and Aesthetics**: Joy encourages minimal CSS styles for components to allow easy overrides, while balancing the need for functional and attractive designs. - **JavaScript Integration**: The talk concludes with the role of JavaScript in enhancing interactivity and user experience, particularly through asynchronous form submissions, debouncing techniques for live filtering, and creating custom elements. Ultimately, Joy concludes that effectively designing web components involves understanding the interplay between HTML forms, accessibility, CSS design, and efficient JavaScript integration, all contributing to the development of usable and attractive web applications. Her insights provide a valuable perspective for developers seeking to improve their frontend coding practices and deliver more reusable components.
Suggest modifications
Cancel
