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

Zpravodajství

Technologické zprávy

Technika

775: Components We Need on Every Project

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.

In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons. <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=01:48">01:48</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:53">02:53</a> Nav / Mobile Nav.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=08:43">08:43</a> Header.</li> <li class="has-line-data" data-line-start="8" data-line-end="10"> <a href="#t=10:41">10:41</a> Toast message. <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://www.tiktok.com/@wesbos/video/7355529411547942150">Wes’ TikTok Demo</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=18:51">18:51</a> Portal.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=21:02">21:02</a> Drawer.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=22:56">22:56</a> Auth forms.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=28:49">28:49</a> Dialog / Modal.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=31:30">31:30</a> Whats the difference between popover and dialog?</li> <li class="has-line-data" data-line-start="15" data-line-end="17"> <a href="#t=33:48">33:48</a> Confirm. <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://github.com/stolinski/the-break/blob/main/src/lib/YouSureAboutThat.svelte"> Scott’s YouSureAboutThat</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=35:46">35:46</a> Bonus tip on becoming a better developer.</li> <li class="has-line-data" data-line-start="18" data-line-end="20"> <a href="#t=36:29">36:29</a> Admin menu. <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://svelte.dev/repl/d7d81d10ada74b83a574492964c3e5d0?version=3.44.0"> Level Up Tutorials - Side Menu Demo</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=37:51">37:51</a> Scott’s package directory rant.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=40:26">40:26</a> Mobile only / Desktop only.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=40:41">40:41</a> Client only.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=40:57">40:57</a> Admin table.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=41:23">41:23</a> The dump.</li> <li class="has-line-data" data-line-start="25" data-line-end="27"> <a href="#t=43:39">43:39</a> Share / Social links. <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href= "https://github.com/syntaxfm/website/blob/main/src/lib/share/ShareWindow.svelte"> Syntax ShareWindow</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=45:44">45:44</a> Markdown renderer.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=45:58">45:58</a> Tabs.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=46:08">46:08</a> User menu.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=46:18">46:18</a> Icon.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=48:07">48:07</a> Loading.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=49:21">49:21</a> Drop-down menu.</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="#t=49:31">49:31</a> Accordion. <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href= "https://css-tricks.com/how-to-animate-the-details-element/">CSS Tricks - How to Animate the Details Element</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="35" data-line-end="37"> <a href="#t=52:13">52:13</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="37" data-line-end="38"> <a id="Sick_Picks_37"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Scott: <a href= "https://amzn.to/3y6Aenm">Supercommunicators</a>.</li> <li class="has-line-data" data-line-start="40" data-line-end="42"> Wes: <a href="https://tryklack.com/">Klack</a>, <a href= "https://mechvibes.com/">Mech Vibes</a>.</li> </ul> <h3 class="code-line" data-line-start="42" data-line-end="43"> <a id="Shameless_Plugs_42"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="44" data-line-end="46"> Scott: <a href="https://youtube.com/@syntaxfm">Syntax on YouTube</a>.</li> </ul> <h3 class="code-line" data-line-start="46" data-line-end="47"> <a id="Hit_us_up_on_Socials_46"></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>

In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons.
 Show Notes  00:00 Welcome to Syntax!
 01:48 Brought to you by Sentry.io.
 02:53 Nav / Mobile Nav.
 08:43 Header.
 10:41 Toast message. Wes’ TikTok Demo.

 18:51 Portal.
 21:02 Drawer.
 22:56 Auth forms.
 28:49 Dialog / Modal.
 31:30 Whats the difference between popover and dialog?
 33:48 Confirm.  Scott’s YouSureAboutThat.

 35:46 Bonus tip on becoming a better developer.
 36:29 Admin menu.  Level Up Tutorials - Side Menu Demo.

 37:51 Scott’s package directory rant.
 40:26 Mobile only / Desktop only.
 40:41 Client only.
 40:57 Admin table.
 41:23 The dump.
 43:39 Share / Social links.  Syntax ShareWindow.

 45:44 Markdown renderer.
 45:58 Tabs.
 46:08 User menu.
 46:18 Icon.
 48:07 Loading.
 49:21 Drop-down menu.
 49:31 Accordion. CSS Tricks - How to Animate the Details Element.

 52:13 Sick Picks + Shameless Plugs.
  Sick Picks  Scott: Supercommunicators.
 Wes: Klack, Mech Vibes.
  Shameless Plugs  Scott: Syntax on YouTube.
  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

775: Components We Need on Every Project

Poslechněte si podcast