Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Design Systems with Brad Frost

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 supper club episode of Syntax, 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.</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:32">00:32</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:02">01:02</a></strong> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=01:34">01:34</a></strong> 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"> <strong><a href="#t=06:43">06:43</a></strong> What is a design system?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=12:12">12:12</a></strong> 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"> <strong><a href="#t=16:13">16:13</a></strong> 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"> <strong><a href="#t=19:41">19:41</a></strong> How is CSS handled?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=25:40">25:40</a></strong> 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"> <strong><a href="#t=29:13">29:13</a></strong> Do small startups need to worry about design systems?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=33:03">33:03</a></strong> How do design tokens work?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=38:17">38:17</a></strong> How do you deal with pushback on design systems?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=41:46">41:46</a></strong> How do you go outside the guidelines?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=45:24">45:24</a></strong> What system do you use for naming things?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=49:34">49:34</a></strong> How do you best document your language choices?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=51:09">51:09</a></strong> Supper Club questions</li> <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: International Bestseller: Donella H. Meadows, Diana Wright: 9781603580557: Amazon.com: Books</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 - Famous for stating the obvious.</a></li> <li class="has-line-data" data-line-start="35" data-line-end="37"> <strong><a href="#t=57:54">57:54</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="37" data-line-end="38"> <a id="_SIIIIICK__PIIIICKS__37"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="39" data-line-end="41"> <a href= "https://en.wikipedia.org/wiki/Rubblebucket">Rubblebucket</a></li> </ul> <h2 class="code-line" data-line-start="41" data-line-end="42"> <a id="Shameless_Plugs_41"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href= "https://bradfrost.com/blog/post/frostapalooza/">Frostapalooza! | Brad Frost</a></li> <li class="has-line-data" data-line-start="44" data-line-end="46"> <a href="https://40.bradfrost.com/">FROSTAPALOOZA - A Concert Party Happening On August 17th 2024</a></li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="Tweet_us_your_tasty_treats_46"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this supper club episode of Syntax, 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:32 Welcome
 01:02 Syntax Brought to you by Sentry
 01:34 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:43 What is a design system?
 12:12 How do you keep design and code in sync?
 Material Design

 Shopify Polaris

 Carbon Design System

 The Design System Ecosystem | Brad Frost

 16:13 How do you use Shopify, WordPress, React, etc. through a design system?
 19:41 How is CSS handled?
 25:40 What’s the benefit of going all in on web components?
 29:13 Do small startups need to worry about design systems?
 33:03 How do design tokens work?
 38:17 How do you deal with pushback on design systems?
 41:46 How do you go outside the guidelines?
 45:24 What system do you use for naming things?
 49:34 How do you best document your language choices?
 51:09 Supper Club questions
  Thinking in Systems: International Bestseller: Donella H. Meadows, Diana Wright: 9781603580557: Amazon.com: Books

 Miriam Eric Suzanne

 Zeldman on Web and Interaction Design - Famous for stating the obvious.

 57:54 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Rubblebucket

  Shameless Plugs  Frostapalooza! | Brad Frost

 FROSTAPALOOZA - A Concert Party Happening On August 17th 2024

  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
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

Design Systems with Brad Frost

Poslechněte si podcast