Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

What are Headless Components?

Syntax - Tasty Web Development Treats

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.

<p class="has-line-data" data-line-start="0" data-line-end="1">In this episode of Syntax, Wes and Scott talk about what headless components are, the why and when to use headless components, and how to best implement them.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:07">00:07</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:33">02:33</a></strong> Tailwind Connect</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://connect.tailwindcss.com/">Tailwind Connect 2023 | Tailwind CSS Live Event</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=04:37">04:37</a></strong> Headless component overview</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://www.downshift-js.com/">Downshift</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://headlessui.com/">Headless UI</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=06:57">06:57</a></strong> A country dropdown component</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=12:52">12:52</a></strong> Possibly like Svelte actions?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=18:46">18:46</a></strong> What do headless components provide?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=19:13">19:13</a></strong> Examples of headless component projects</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://microsoftedge.github.io/Demos/selectmenu/">Microsoft Edge Demo</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=24:24">24:24</a></strong> How does this compare to web components?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://tanstack.com/table/">Tanstack Table</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://tanstack.com/virtual/">Tanstack Virtual</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=26:29">26:29</a></strong> Checking out Shoelace</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://shoelace.style/">Shoelace</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=28:42">28:42</a></strong> Figma announcements</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://www.figma.com/whats-new/">What’s New in Figma</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=31:21">31:21</a></strong> What does headless mean?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=36:24">36:24</a></strong> SIIIIICK ××× PIIIICKS ×××</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <strong><a href="#t=41:20">41:20</a></strong> AI Voices</li> </ul> <h2 class="code-line" data-line-start="26" data-line-end="27"> <a id="_SIIIIICK__PIIIICKS__26"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Scott: <a href="https://hackernewsrecap.buzzsprout.com/">Hacker News Recap</a> /<a href= "https://podcasts.apple.com/us/podcast/hacker-news-recap/id1681571416">Hacker News Recap on Apple Podcasts</a></li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Wes: <a href="https://amzn.to/44ikUz3">Calipers</a></li> </ul> <h2 class="code-line" data-line-start="31" data-line-end="32"> <a id="Shameless_Plugs_31"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="34" data-line-end="36"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="36" data-line-end="37"> <a id="Tweet_us_your_tasty_treats_36"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this episode of Syntax, Wes and Scott talk about what headless components are, the why and when to use headless components, and how to best implement them.
 Show Notes  00:07 Welcome
 02:33 Tailwind Connect
 Tailwind Connect 2023 | Tailwind CSS Live Event

 04:37 Headless component overview
 Downshift

 Headless UI

 06:57 A country dropdown component
 12:52 Possibly like Svelte actions?
 18:46 What do headless components provide?
 19:13 Examples of headless component projects
 Microsoft Edge Demo

 24:24 How does this compare to web components?
 Tanstack Table

 Tanstack Virtual

 26:29 Checking out Shoelace
 Shoelace

 28:42 Figma announcements
 What’s New in Figma

 31:21 What does headless mean?
 36:24 SIIIIICK ××× PIIIICKS ×××
 41:20 AI Voices
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Hacker News Recap /Hacker News Recap on Apple Podcasts

 Wes: Calipers

  Shameless Plugs  Scott: Sentry

 Wes: Wes Bos Tutorials

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

What are Headless Components?

Poslechněte si podcast