Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

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="7" data-line-end="8">It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 01:37 - Q: Why does React bill itself as a library instead of a framework?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 03:14 - Q: Are y’all still using Firefox now that it has been six months?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace!</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 09:34 - Q: Who would win in a thumb war, Wes or Scott?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache.</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 14:53 - Q: Should I start a new project with jQuery or React?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 17:21 - Q: I’m a young teen (<16) with a passion for all things web dev. However, without being able to legally have a job, I’m unable to make any money and am therefore running on a $50 Raspberry Pi and a 10+ year old monitor. As much as I love my Pi, just running <code>npm install</code> can be agonizing sometimes, not to mention the amount of space node_modules take up on a device with 16GB of storage! So basically, any pointers on getting income (and practice!) in the web development field when your under 16? And just in general, what advice do you have to young teen learning to code? Thanks in advance! P.S. You know you’ve got something going when a teenaged boy would rather listen to your podcast than watch Star Wars or Marvel with his friends! ;) So keep up the amazing work.</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 22:12 - Q: Is it worth my time to learn design patterns in JavaScript?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 24:28 - Q: I have a question regarding Figma design to HTML/CSS conversion. When translating the design into code, do you keep the font-size, padding, height of images the same as defined in design or do you take something different? Let’s suppose top nav bar is 115px, then do you make it the same as well, or something else?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 29:03 - Q: You both are great at technical communication — how do you get better at technical communication when self-learning?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 33:06 - Q: What tools (or other methods) do y’all use to manage spinning up new projects with all the assorted directory structures, tools, and configs, you prefer? For example, when I start a new project, these days I like TS, Prettier, ESLint, and want those to play nicely together. I find I’m constantly copying files from one project to the other but haven’t found a good abstraction that allows me to setup a new project with the assorted files. Bonus points for a solution that can keep shared configs and deps up to date.</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 36:10 - Q: I am 26 years old and working a full-time job. I am currently looking at the possibility between work and spending time with my partner. I get maybe an hour a week (maybe two) to focus on learning Javascript. I feel like it is taking me literally forever to get anywhere, and when I do learn something, there is always a better way of doing it! And then when I do sit down and get the time I just feel like I have no direction. Your podcast has been giving me small boosts of motivation, so thanks for that. But is 26 too old to make a move into development?</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 39:39 - Q: How do you step up a web development project to an enterprise-level? There are so many simple tutorials and quick wins all over the internet, but how do you get more knowledge about bigger enterprise-ready technical stuff. E.g. How to organize a Vue app with >60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management?</p> <p class="has-line-data" data-line-start="43" data-line-end="44"> 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it?</p> <h2 class="code-line" data-line-start="45" data-line-end="46"> <a id="Links_45" name="Links_45"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://reactjs.org/">React</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://brave.com/">Brave</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://codesandbox.io/">CodeSandbox</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://github.com/cdr/code-server">VS Code in the browser</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://codepen.io/">CodePen</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://sourcemaking.com/design_patterns">Source Making Design Patterns</a></li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href="https://www.figma.com/blog/announcing-auto-layout/">Figma Auto Layout</a></li> </ul> <h2 class="code-line" data-line-start="55" data-line-end="56"> <a id="_SIIIIICK__PIIIICKS__55" name= "_SIIIIICK__PIIIICKS__55"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="59"> Scott: <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> 1: <a href="https://www.mythpodcast.com/">Myths and Legends Podcast</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> 2: <a href="https://www.fictional.fm/">Fictional Podcast</a></li> </ul> </li> <li class="has-line-data" data-line-start="59" data-line-end="61"> Wes: <a href="https://amzn.to/2A9c5P0">Parchment Paper Baking Sheets</a></li> </ul> <h2 class="code-line" data-line-start="61" data-line-end="62"> <a id="Shameless_Plugs_61" name="Shameless_Plugs_61"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> Scott: <a href="https://www.leveluptutorials.com/pro">Sapper For Beginners</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="63" data-line-end="65"> Wes: <a href="https://beginnerjavascript.com/">Beginner JavaScript Course</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="65" data-line-end="66"> <a id="Tweet_us_your_tasty_treats_65" name= "Tweet_us_your_tasty_treats_65"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more!
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 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 01:37 - Q: Why does React bill itself as a library instead of a framework?
 03:14 - Q: Are y’all still using Firefox now that it has been six months?
 06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace!
 09:34 - Q: Who would win in a thumb war, Wes or Scott?
 10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache.
 14:53 - Q: Should I start a new project with jQuery or React?
 17:21 - Q: I’m a young teen (60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management?
 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it?
 Links  React

 Firefox

 Brave

 CodeSandbox

 VS Code in the browser

 CodePen

 Source Making Design Patterns

 Figma Auto Layout

  ××× SIIIIICK ××× PIIIICKS ×××  Scott:  1: Myths and Legends Podcast

 2: Fictional Podcast

 Wes: Parchment Paper Baking Sheets

  Shameless Plugs  Scott: Sapper For Beginners - Sign up for the year and save 25%!
 Wes: Beginner JavaScript Course - Use the coupon code ‘Syntax’ for $10 off!
  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

Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

Poslechněte si podcast