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

Zpravodajství

Technologické zprávy

Technika

770: Design Systems With Brad Frost (Rereleased)

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 this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects. <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:49">00:49</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=01:14">01:14</a> Introducing Brad Frost.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://bradfrost.com/">Brad Frost.com</a>.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://atomicdesign.bradfrost.com/">Atomic Design by Brad Frost</a>.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://twitter.com/brad_frost">Brad (@brad_frost) on Twitter</a>.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://www.linkedin.com/in/bradfrost/">Brad on LinkedIn</a>.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://mastodon.social/@brad_frost">Brad on Mastodon</a>.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://www.youtube.com/@brad_frost">Brad on YouTube</a>.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://github.com/bradfrost">Brad on GitHub</a>.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://codepen.io/bradfrost/">Brad Frost on CodePen</a>.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://bigmedium.com/">Big Medium | Design for What’s Next</a>.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=06:26">06:26</a> What is a design system?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=11:48">11:48</a> How do you keep design and code in sync?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://m3.material.io/">Material Design</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://polaris.shopify.com/">Shopify Polaris</a>.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://carbondesignsystem.com/">Carbon Design System</a>.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://bradfrost.com/blog/post/the-design-system-ecosystem/">The Design System Ecosystem | Brad Frost</a>.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=15:52">15:52</a> How do you use Shopify, WordPress, React, etc. through a design system?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=19:19">19:19</a> How is CSS handled?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=25:19">25:19</a> What’s the benefit of going all in on web components?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=28:49">28:49</a> Do small startups need to worry about design systems?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=32:36">32:36</a> How do design tokens work?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=37:38">37:38</a> How do you deal with pushback on design systems?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=41:05">41:05</a> How do you go outside the guidelines?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=44:52">44:52</a> What system do you use for naming things?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=49:06">49:06</a> How do you best document your language choices?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=50:41">50:41</a> Supper Club questions.</li> </ul> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href= "https://www.amazon.com/Thinking-Systems-Donella-H-Meadows/dp/1603580557"> Thinking in Systems</a>.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://www.miriamsuzanne.com/">Miriam Eric Suzanne</a>.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://www.zeldman.com/">Zeldman on Web and Interaction Design</a>.</li> </ul> <ul> <li class="has-line-data" data-line-start="35" data-line-end="37"> <a href="#t=57:12">57:12</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"> Brad: <a href= "https://en.wikipedia.org/wiki/Rubblebucket">Rubblebucket</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"> Brad: <a href= "https://bradfrost.com/blog/post/frostapalooza/">Frostapalooza! | Brad Frost</a>, <a href="https://40.bradfrost.com/">FROSTAPALOOZA - A Concert Party Happening On August 17th 2024</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 this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects.
 Show Notes  00:00 Welcome to Syntax!
 00:49 Brought to you by Sentry.io.
 01:14 Introducing Brad Frost.
 Brad Frost.com.
 Atomic Design by Brad Frost.
 Brad (@brad_frost) on Twitter.
 Brad on LinkedIn.
 Brad on Mastodon.
 Brad on YouTube.
 Brad on GitHub.
 Brad Frost on CodePen.
 Big Medium | Design for What’s Next.
 06:26 What is a design system?
 11:48 How do you keep design and code in sync?
 Material Design.
 Shopify Polaris.
 Carbon Design System.
 The Design System Ecosystem | Brad Frost.
 15:52 How do you use Shopify, WordPress, React, etc. through a design system?
 19:19 How is CSS handled?
 25:19 What’s the benefit of going all in on web components?
 28:49 Do small startups need to worry about design systems?
 32:36 How do design tokens work?
 37:38 How do you deal with pushback on design systems?
 41:05 How do you go outside the guidelines?
 44:52 What system do you use for naming things?
 49:06 How do you best document your language choices?
 50:41 Supper Club questions.
   Thinking in Systems.
 Miriam Eric Suzanne.
 Zeldman on Web and Interaction Design.
  57:12 Sick Picks + Shameless Plugs.
  Sick Picks  Brad: Rubblebucket.
  Shameless Plugs  Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024.
  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

770: Design Systems With Brad Frost (Rereleased)

Poslechněte si podcast