Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=02:39">02:39</a> We’re on YouTube.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:14">03:14</a> The four categories of UI libraries or frameworks.</li> <li class="has-line-data" data-line-start="7" data-line-end="13"> <a href="#t=03:46">03:46</a> What does a UI component need to do? <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=04:14">04:14</a> Must be functional.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=06:20">06:20</a> They must fit styling.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=06:33">06:33</a> They must be accessible.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=08:09">08:09</a> “Internationalizationable.”</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=09:29">09:29</a> They must handle theming and variants.</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="19"> <a href="#t=10:05">10:05</a> A few common UI components. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=10:14">10:14</a> Date Pickers.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=12:10">12:10</a> Dropdowns.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=13:21">13:21</a> Toast message.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://svelte-french-toast.com/">Svelte French Toast</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=15:11">15:11</a> Some honorable mentions.</li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="25"> <a href="#t=16:10">16:10</a> Headless components. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=18:54">18:54</a> <a href= "https://react-spectrum.adobe.com/react-aria/">React Aria</a>.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://react-spectrum.adobe.com/react-aria/interactions.html">Behavior</a>, <a href= "https://react-spectrum.adobe.com/react-aria/accessibility.html">Accessibility</a>, <a href= "https://react-spectrum.adobe.com/react-aria/internationalization.html"> Internationalization</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=19:34">19:34</a> <a href= "https://www.radix-ui.com/primitives">Radix UI Primitives</a>.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=20:16">20:16</a> <a href= "https://github.com/downshift-js/downshift">Downshift JS</a>.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=21:29">21:29</a> <a href= "https://tanstack.com/table/latest">Tanstack Table and Forms</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="25" data-line-end="31"> <a href="#t=26:00">26:00</a> Unstyled components. <ul> <li class="has-line-data" data-line-start="26" data-line-

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

765: JS Promises Fundamentals - Part 1

syntax - tasty web development treats

Syntax - Tasty Web Development Treats

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game. Show Notes Welcome to Syntax! We’re on...

Episode Summary

Clips