Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Design Systems

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>In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more…</p> <h2><a id="VueSchoolios_Vuejs_Masterclass__Sponsor_9" name= "VueSchoolios_Vuejs_Masterclass__Sponsor_9"></a><a href= "http://vueschool.io/">VueSchool.io</a>'s Vue.js Masterclass — Sponsor</h2> <p>Check out <a href="https://vueschool.io/">VueSchool.io’s new Vue.js Masterclass</a> taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit <a href= "https://vueschool.io/syntax">VueSchool.io/syntax</a> to get 25% off.</p> <h2><a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p>Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put <strong>SYNTAX</strong> in the “How did you hear about us?” section.</p> <h2><a id="Show_Notes_16" name="Show_Notes_16"></a>Show Notes</h2> <p>2:40</p> <ul> <li>Design Systems 101 <ul> <li><a href= "https://twitter.com/wesbos/status/1012325994437529600">Wes’ Tweet about Design Systems</a></li> </ul> </li> </ul> <p>9:40</p> <ul> <li>Organizational elements of design systems <ul> <li>It’s all about consistency</li> </ul> </li> </ul> <p>23:07</p> <ul> <li>Best tools for building design systems and style guides <ul> <li><a href="https://figma.com/">Figma</a></li> <li><a href="https://relayforfigma.com/">Relay for Figma</a></li> <li><a href= "https://www.invisionapp.com/design-system-manager/">InVision Design Systems Manager</a></li> <li><a href="https://github.com/airbnb/lona">Airbnb Lona</a></li> <li><a href="http://patternlab.io/">Brad Frost’s Pattern Library</a></li> <li><a href= "https://github.com/dennisreimann/uiengine">uiengine</a></li> </ul> </li> </ul> <p>41:52</p> <ul> <li>Where to learn more</li> </ul> <h2><a id="Links_42" name="Links_42"></a>Links</h2> <ul> <li><a href= "https://www.invisionapp.com/blog/guide-to-design-systems/">Guide to Design Systems by InVision</a></li> <li><a href= "https://polaris.shopify.com/content/product-content">Shopify’s Design System</a></li> <li><a href= "https://styleguide.mailchimp.com/voice-and-tone/">Mailchimp’s Voice and Tone</a></li> <li><a href="https://garden.zendesk.com/">Zendesk Garden</a></li> <li><a href="https://material.io/design/">Material Design</a></li> <li><a href= "https://github.com/alexpate/awesome-design-systems">Awesome Design Systems</a></li> <li><a href="https://designsystemsrepo.com/">Design Systems Repo</a></li> <li><a href="https://www.designsystems.com/">Design Systems</a></li> <li><a href="https://www.docz.site/">Docz</a></li> <li><a href="https://yogalayout.com/">Facebook Yoga</a></li> <li><a href="https://storybook.js.org/">StorybookJS</a></li> <li><a href= "https://twitter.com/stuartfrisby/status/983274546802421760">Stuart Clarke-Frisby Tweet</a></li> <li><a href= "https://blog.figma.com/introducing-figmas-platform-ee681bf861e7">Figma’s Platform</a></li> <li><a href="https://blog.figma.com/figma-3-0-217d6c248f85">Figma Styles and Prototyping</a></li> <li><a href="http://news.design.systems/">Design Systems Newsletter</a></li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__60" name= "_SIIIIICK__PIIIICKS__60"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://amzn.to/2Mxz8nC">CalDigit TS3 Plus</a></li> <li>Wes: <a href="https://amzn.to/2IDzAOW">Picasso Tiles</a></li> </ul> <h2><a id="Shameless_Plugs_65" name= "Shameless_Plugs_65"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/pro">Scott’s Level 1 Electron Course</a></li> <li><a href="http://advancedreact.com/">Wes’ Advanced React Course (Coming Soon)</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_70" name= "Tweet_us_your_tasty_treats_70"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more…
 VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Show Notes 2:40
 Design Systems 101 Wes’ Tweet about Design Systems

 9:40
 Organizational elements of design systems It’s all about consistency

 23:07
 Best tools for building design systems and style guides Figma
 Relay for Figma
 InVision Design Systems Manager
 Airbnb Lona
 Brad Frost’s Pattern Library
 uiengine

 41:52
 Where to learn more
 Links Guide to Design Systems by InVision
 Shopify’s Design System
 Mailchimp’s Voice and Tone
 Zendesk Garden
 Material Design
 Awesome Design Systems
 Design Systems Repo
 Design Systems
 Docz
 Facebook Yoga
 StorybookJS
 Stuart Clarke-Frisby Tweet
 Figma’s Platform
 Figma Styles and Prototyping
 Design Systems Newsletter
 ××× SIIIIICK ××× PIIIICKS ××× Scott: CalDigit TS3 Plus

 Wes: Picasso Tiles

 Shameless Plugs Scott’s Level 1 Electron Course
 Wes’ Advanced React Course (Coming Soon)
 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

Design Systems

Poslechněte si podcast