AI-powered
podcast player
Listen to all your favourite podcasts with AI-powered features
Tips for Implementing Interactive Front End Components and Considerations for JS vs Headless UI
This chapter covers tips for implementing interactive front end components without React, including the use of L transition library, considerations for rolling their own JS versus using headless UI, adhering to WCAG guidelines for dropdown menus, opinions on dropdown menu functionality, and the mention of a sponsor, Honey Badger.
In this episode, Jason, Chris, and Andrew are live at Rails World 2023 in Amsterdam, where they are joined by Adam Wathan, creator of Tailwind CSS. Today, they discuss the well-organized event, their excitement about being part of the Rails community, and Adam’s talk on making the most of Tailwind CSS for Rails developers. The conversation dives into topics like using Inertia with Rails, the challenges of creating accessible components, and the management of open source projects, all while shedding light on the nuances of web development. They also explore the pros and cons of using React and Vue.js in their projects, highlighting the flexibility and evolution of these frontend technologies. Press download now to hear much more!
[00:01:01] Adam talks about being at his first-ever Rails conference he’s attending.
[00:02:00] Adam discusses “Tailwind Connect,” an event that started as a team retreat and grew into a successful meetup.
[00:04:38] Jason asks about Adam’s upcoming talk at the conference. He discusses the content of his talk, focusing on helping Rails developers make the most of TailwindCSS.
[00:06:19] Jason inquires about using Laravel with Inertia, and Adam explains the benefits of Inertia, including how it preserves the monolithic feel of Rails while using React or Vue for the view layer.
[00:10:46] Chris and Adam discuss the history and challenges of using Inertia in Rails and its potential advantages. They talk about the limitations of web components and styling issues when using Tailwind CSS.
[00:13:50] Adam discusses the need for unstyled primitives with Stimulus or similar solutions to support keyboard navigation and accessibility, and the complexities of handling various scenarios and the need for continuous maintenance.
[00:16:07] Chris appreciates the high quality of Tailwind CSS, and they discuss the challenge of managing criticism and maintaining high standards for open source projects.
[00:19:02] Adam shares the company’s high standards for quality and handling GitHub issues, the ideal number of GitHub issues, and the importance of triaging effectively.
[00:21:15] We hear how issues are categorized, including bug reports and feature requests. Chris and Adam discuss how to handle feature requests in GitHub repositories. The conversation shifts to the challenges of managing open source project, including handling issues and feature requests.
[00:27:29] The discussion turns to implementing interactive frontend components without React, focusing on accessibility and keyboard navigation, and Adam brings up the “curse of React.” Then, Adam discusses the challenges of building frontend components in the context of a Rails project.
[00:33:32] The conversation shifts to a comparison of React and Vue.js and why Adam leans towards using React in recent projects. Adam explains that his shift towards react began when they needed interactive components for Tailwind UI and React was chosen due to better support and expertise in the team.
[00:35:35] Adam discusses the benefits of creating smaller components in React compared to Vue due to lower ext
HoneybadgerListen to all your favourite podcasts with AI-powered features
Listen to the best highlights from the podcasts you love and dive into the full episode
Hear something you like? Tap your headphones to save it with AI-generated key takeaways
Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more
Listen to all your favourite podcasts with AI-powered features
Listen to the best highlights from the podcasts you love and dive into the full episode