Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × 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 fonts, frameworks vs custom, drinking tea, learning to code, client work, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Kyle_Prinsloo_Freelancing__Sponsor_9" name= "Kyle_Prinsloo_Freelancing__Sponsor_9"></a>Kyle Prinsloo Freelancing - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at <a href= "https://studywebdevelopment.com/freelancing">studywebdevelopment.com/freelancing</a>. Use the coupon “SYNTAX” and get 25%.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</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"> 2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 5:30 - Q: What makes a font “good”? I stumbled upon <a href= "https://www.haleyfiege.fun/fonts">haleyfiege.fun/fonts</a>, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 21:17 - Q: I know both of you put out a ton of content, both together and individually. I’m just curious to hear if you listen to any other podcasts out there in the land, or any other types of content that you consume to hone your skillz to pay the billz. Thanks!</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 25:14 - Q: What are your thoughts on Blazor? Is it a good move to be an early adopter of a framework like this, or should you focus on the ones that are already in a fully released state like React, Vue etc.?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 28:51 - Q: I would like to ask Scott how you make subscriptions in a website? Also, how you give users a lifetime locked yearly subscription?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 39:53 - Q: I feel like other developers’ code is always shorter, better structured, and easier to read than mine. Any tips (or resources) on writing clean, ‘good’ javascript code (or any other functional programming language)?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 44:02 - Q: Both of you have CMS backgrounds, Scott with Drupal and Wes with WordPress. When you moved to freelancing, did you build for clients using a CMS? Or did you create custom admin interfaces for clients to manage their own site? You’ve mentioned some headless WordPress in the past, but was that the norm?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 47:02 - Q: Hey Scott + Wes, you’re obviously very successful with your course creation careers, but do you miss client work? If people for some reason ever stopped buying your courses, would you go back to client work?</p> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="Links_39" name="Links_39"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://github.com/GoogleChrome/lighthouse">Lighthouse</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href= "https://syntax.fm/show/203/hasty-treat-what-are-github-actions">Syntax203: Hasty Treat - What Are Github Actions?</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://www.npmjs.com/package/lighthouse-batch">Lighthouse Batch NPM Package</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href= "https://github.com/jakejarvis/lighthouse-action">Lighthouse Action GitHub Action</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href= "https://www.haleyfiege.fun/fonts">haleyfiege.fun/fonts</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://hanken.co/products/radnika-next">Radnika Next</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.sipsby.com/">Sipsby</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://babeljs.io/">Babel</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://shoptalkshow.com/">Shop Talk Show</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://blog.codepen.io/radio/">CodePen Radio</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.heistpodcast.com/">Heist Podcast</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://mixergy.com/">Mixergy</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href= "https://podcasts.apple.com/us/podcast/the-dream/id1435743296">The Dream</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://reactpodcast.simplecast.fm/">React Podcast</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.indiehackers.com/podcast">Indie Hackers</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.akimbo.link/">Akimbo</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.redhat.com/en/command-line-heroes">Command Line Heroes</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href= "https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor">Blazor</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.braintreepayments.com/">Braintree</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href= "https://syntax.fm/show/055/hasty-treat-user-role-systems">Syntax055: Hasty Treat - User Role Systems</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href= "https://github.com/ryanmcdermott/clean-code-javascript">Clean Code concepts adapted for JavaScript</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.codecademy.com/">codecademy</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://javascript30.com/">Javascript30</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://cakephp.org/">CakePHP</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.drupal.org/">Drupal</a></li> <li class="has-line-data" data-line-start="66" data-line-end="68"> <a href="https://wordpress.org/">WordPress</a></li> </ul> <h2 class="code-line" data-line-start="68" data-line-end="69"> <a id="_SIIIIICK__PIIIICKS__68" name= "_SIIIIICK__PIIIICKS__68"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> Scott: <a href= "https://www.smithsonianchannel.com/shows/aerial-america/701">Aerial America</a></li> <li class="has-line-data" data-line-start="70" data-line-end="72"> Wes: <a href= "https://apps.apple.com/us/app/streamer-for-chromecast/id1151425002">Streamer for Chromecast</a></li> </ul> <h2 class="code-line" data-line-start="72" data-line-end="73"> <a id="Shameless_Plugs_72" name="Shameless_Plugs_72"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> Scott: <a href="https://www.leveluptutorials.com/pro">Level Up Tutorials Pro</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="74" data-line-end="76"> Wes: <a href="https://beginnerjavascript.com/">Beginner Javascript</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="76" data-line-end="77"> <a id="Tweet_us_your_tasty_treats_76" name= "Tweet_us_your_tasty_treats_76"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> 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 fonts, frameworks vs custom, drinking tea, learning to code, client work, and more!
 Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelancing. Use the coupon “SYNTAX” and get 25%.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes 2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages?
 5:30 - Q: What makes a font “good”? I stumbled upon haleyfiege.fun/fonts, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective?
 9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework?
 12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out?
 15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load?
 21:17 - Q: I know both of you put out a ton of content, both together and individually. I’m just curious to hear if you listen to any other podcasts out there in the land, or any other types of content that you consume to hone your skillz to pay the billz. Thanks!
 25:14 - Q: What are your thoughts on Blazor? Is it a good move to be an early adopter of a framework like this, or should you focus on the ones that are already in a fully released state like React, Vue etc.?
 28:51 - Q: I would like to ask Scott how you make subscriptions in a website? Also, how you give users a lifetime locked yearly subscription?
 39:53 - Q: I feel like other developers’ code is always shorter, better structured, and easier to read than mine. Any tips (or resources) on writing clean, ‘good’ javascript code (or any other functional programming language)?
 44:02 - Q: Both of you have CMS backgrounds, Scott with Drupal and Wes with WordPress. When you moved to freelancing, did you build for clients using a CMS? Or did you create custom admin interfaces for clients to manage their own site? You’ve mentioned some headless WordPress in the past, but was that the norm?
 47:02 - Q: Hey Scott + Wes, you’re obviously very successful with your course creation careers, but do you miss client work? If people for some reason ever stopped buying your courses, would you go back to client work?
 Links  Lighthouse

 Syntax203: Hasty Treat - What Are Github Actions?

 Lighthouse Batch NPM Package

 Lighthouse Action GitHub Action

 Next.js

 haleyfiege.fun/fonts

 Radnika Next

 Sipsby

 Babel

 Shop Talk Show

 CodePen Radio

 Heist Podcast

 Mixergy

 The Dream

 React Podcast

 Indie Hackers

 Akimbo

 Command Line Heroes

 Blazor

 Braintree

 Syntax055: Hasty Treat - User Role Systems

 Clean Code concepts adapted for JavaScript

 codecademy

 Javascript30

 CakePHP

 Drupal

 WordPress

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Aerial America

 Wes: Streamer for Chromecast

  Shameless Plugs  Scott: Level Up Tutorials Pro - Sign up for the year and save 25%!
 Wes: Beginner Javascript - 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

Pro přehrání dalších podcastů se prosím registrujte.

Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!

Poslechněte si podcast