Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

UI Elements - Basics, Best Practice, and Built Ins

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 UI elements and best practices with UI elements, as well as UI elements that exist in browsers.</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:10">00:10</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:10">01:10</a></strong> Making demos for fun</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:47">02:47</a></strong> Why we’re talking UI elements</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:48">03:48</a></strong> Bad UI elements in the browser</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://syntax.fm/show/602/modals-popups-popovers-lightboxes">Syntax 602: Modals, Popups, Popovers, Lightboxes</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter">Progress</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=10:47">10:47</a></strong> Decent UI elements in browser</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=19:49">19:49</a></strong> Enter Open UI</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://open-ui.org/">Open UI</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=34:39">34:39</a></strong> Accordion hunks</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=38:15">38:15</a></strong> Pop overs</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=42:15">42:15</a></strong> Focus group</li> <li class="has-line-data" data-line-start="16" data-line-end="18"> <strong><a href="#t=46:10">46:10</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="_SIIIIICK__PIIIICKS__18"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> Scott: <a href="https://fishskyn.com/">Fishskyn</a></li> <li class="has-line-data" data-line-start="21" data-line-end="23"> Wes: <a href="https://amzn.to/3Arvkzg">Flavacol</a> & <a href= "https://amzn.to/40PNBBn">Butter Flavoured Coconut Oil</a></li> </ul> <h2 class="code-line" data-line-start="23" data-line-end="24"> <a id="Shameless_Plugs_23"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> Scott: <a href="https://sentry.io/">Sentry replays</a></li> <li class="has-line-data" data-line-start="26" data-line-end="28"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="28" data-line-end="29"> <a id="Tweet_us_your_tasty_treats_28"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Wes and Scott talk about UI elements and best practices with UI elements, as well as UI elements that exist in browsers.
 Show Notes  00:10 Welcome
 01:10 Making demos for fun
 02:47 Why we’re talking UI elements
 03:48 Bad UI elements in the browser
 Syntax 602: Modals, Popups, Popovers, Lightboxes

 Progress

 10:47 Decent UI elements in browser
 19:49 Enter Open UI
 Open UI

 34:39 Accordion hunks
 38:15 Pop overs
 42:15 Focus group
 46:10 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Fishskyn

 Wes: Flavacol & Butter Flavoured Coconut Oil

  Shameless Plugs  Scott: Sentry replays

 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

Aplikace Youradio Talk

UI Elements - Basics, Best Practice, and Built Ins

Poslechněte si podcast