Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

758: Web Awesome with Konnor Rogers + Cory LaViska

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.

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome. <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=00:47">00:47</a> Brought to you by <a href="https://www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:49">02:49</a> What is Shoelace?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=07:21">07:21</a> What is Font Awesome?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=08:07">08:07</a> Font Awesome is getting into Web Components?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=11:35">11:35</a> What is Shoelace’s relationship with Web Awesome?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=13:33">13:33</a> Is the idea to make it quick to get up and running?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=15:46">15:46</a> What is the autoloader?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=16:29">16:29</a> Where does Web Awesome fit in the ecosystem?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=18:13">18:13</a> What does the styling game look like?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=20:33">20:33</a> What is Part in CSS?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Part mdn web docs</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=22:06">22:06</a> The reason we’re so stoked with Web Components.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=23:32">23:32</a> Custom elements are a natural progression.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=24:51">24:51</a> What are your thoughts on Open UI initiatives?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://floating-ui.com/">Floating UI</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://github.com/WICG/close-watcher">Close Watcher</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://caniuse.com/mdn-api_closewatcher">Can I Use</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=27:40">27:40</a> Wes’ escape key conundrum.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=30:21">30:21</a> A bug on the Syntax site.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=31:19">31:19</a> Let’s talk about <a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&result=project&term=webawesome"> Kickstarter</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=35:24">35:24</a> Do you know what premium inputs will be available in Web Awesome?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=36:12">36:12</a> Rich text editor.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=40:18">40:18</a> Setting goals.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=41:48">41:48</a> Kickstarter giveaways.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=42:47">42:47</a> Have you tried drag and drop?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://github.com/atlassian/pragmatic-drag-and-drop">Pragmatic Drag and Drop</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=44:57">44:57</a> The layout component.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=48:50">48:50</a> What are your favorite components?</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="#t=50:29">50:29</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="35" data-line-end="36"> <a id="Sick_Picks_35"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> Konnor: <a href="https://enhance.dev/">Enhance.dev</a>, <a href= "https://extism.org/">Extism.org</a></li> <li class="has-line-data" data-line-start="38" data-line-end="40"> Cory: <a href="https://lit.dev/">Lit.dev</a></li> </ul> <h3 class="code-line" data-line-start="40" data-line-end="41"> <a id="Shameless_Plugs_40"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Cory: <a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&result=project&term=webawesome"> Kickstarter</a></li> <li class="has-line-data" data-line-start="43" data-line-end="45"> Konnor: Everyone involved in open UI</li> </ul> <h3 class="code-line" data-line-start="45" data-line-end="46"> <a id="Hit_us_up_on_Socials_45"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome.
 Show Notes  00:00 Welcome to Syntax!
 00:47 Brought to you by Sentry.io.
 02:49 What is Shoelace?
 07:21 What is Font Awesome?
 08:07 Font Awesome is getting into Web Components?
 11:35 What is Shoelace’s relationship with Web Awesome?
 13:33 Is the idea to make it quick to get up and running?
 15:46 What is the autoloader?
 16:29 Where does Web Awesome fit in the ecosystem?
 18:13 What does the styling game look like?
 20:33 What is Part in CSS?
 CSS Part mdn web docs

 22:06 The reason we’re so stoked with Web Components.
 23:32 Custom elements are a natural progression.
 24:51 What are your thoughts on Open UI initiatives?
 Floating UI

 Close Watcher

 Can I Use

 27:40 Wes’ escape key conundrum.
 30:21 A bug on the Syntax site.
 31:19 Let’s talk about Kickstarter.
 35:24 Do you know what premium inputs will be available in Web Awesome?
 36:12 Rich text editor.
 40:18 Setting goals.
 41:48 Kickstarter giveaways.
 42:47 Have you tried drag and drop?
 Pragmatic Drag and Drop

 44:57 The layout component.
 48:50 What are your favorite components?
 50:29 Sick Picks + Shameless Plugs.
  Sick Picks  Konnor: Enhance.dev, Extism.org

 Cory: Lit.dev

  Shameless Plugs  Cory: Kickstarter

 Konnor: Everyone involved in open UI
  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott:X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

758: Web Awesome with Konnor Rogers + Cory LaViska

Poslechněte si podcast