UI Elements - Basics, Best Practice, and Built Ins

<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-