Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × 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 web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</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="Linode__Sponsor_15" name="Linode__Sponsor_15"></a>Linode - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development.</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn’t seem super common to use since few GitHub projects have Dockerfiles in their repos.</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 32:19 - I’ve often heard you two talk about the idea of the “golden handcuffs”, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I’ve tried organizing my day so my time is better segmented. I can’t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what’s next would be much appreciated.</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google’s rendering engine?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the “traditional” way of doing things, 100% server-rendered. What’s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon “modern” way to do a server-rendered monolithic app?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code’s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 47:18 - Is there any benefit to using prop types in TypeScript for React projects?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 48:14 - I’m currently planning to build an audio-focused app (maybe even more than one actually), and I’ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I’ve got some deep reservations against AWS, although I’m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I’m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts?</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://www.npmjs.com/package/react-to-webcomponent">https://www.npmjs.com/package/react-to-webcomponent</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href= "https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9"> https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://learnnode.com/">LearnNode.com</a></li> <li class="has-line-data" data-line-start="43" data-line-end="45"> <a href="https://transistor.fm/">Transistor.fm</a></li> </ul> <h2 class="code-line" data-line-start="45" data-line-end="46"> <a id="_SIIIIICK__PIIIICKS__45" name= "_SIIIIICK__PIIIICKS__45"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Scott: <a href= "https://www.cbc.ca/listen/cbc-podcasts/904-a-death-in-cryptoland">A Death In Cryptoland Podcast</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Wes: <a href= "https://affinity.serif.com/en-us/designer/">Affinity Designer</a></li> </ul> <h2 class="code-line" data-line-start="49" data-line-end="50"> <a id="Shameless_Plugs_49" name="Shameless_Plugs_49"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> Scott: <a href="https://www.leveluptutorials.com/pro">Svelte Kit</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Wes: <a href="https://wesbos.com/javascript">Beginner JavaScript Notes</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="Tweet_us_your_tasty_treats_53" name= "Tweet_us_your_tasty_treats_53"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> 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 web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, and more!
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 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.
 Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
 Show Notes 04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component?
 11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev?
 22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development.
 26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn’t seem super common to use since few GitHub projects have Dockerfiles in their repos.
 32:19 - I’ve often heard you two talk about the idea of the “golden handcuffs”, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I’ve tried organizing my day so my time is better segmented. I can’t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what’s next would be much appreciated.
 37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google’s rendering engine?
 39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the “traditional” way of doing things, 100% server-rendered. What’s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon “modern” way to do a server-rendered monolithic app?
 43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code’s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation?
 47:18 - Is there any benefit to using prop types in TypeScript for React projects?
 48:14 - I’m currently planning to build an audio-focused app (maybe even more than one actually), and I’ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I’ve got some deep reservations against AWS, although I’m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I’m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts?
 Links  https://www.npmjs.com/package/react-to-webcomponent

  https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

 LearnNode.com

 Transistor.fm

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: A Death In Cryptoland Podcast

 Wes: Affinity Designer

  Shameless Plugs  Scott: Svelte Kit - Sign up for the year and save 25%!
 Wes: Beginner JavaScript Notes

  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 - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!

Poslechněte si podcast