Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × 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 kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Prismic__Sponsor_12" name="Prismic__Sponsor_12"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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="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"> 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 11:13 - Q: Do my students NEED to understand recursion to be effective JS devs?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web <a href= "https://github.com/cdr/code-server">https://github.com/cdr/code-server</a>). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser.</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure this could be a fun little group activity. I see how much they struggle focusing on some of the online instruction they have through school, and they’re a bit fatigued with “learning” right now. We tried doing a bit of scratch/scratch jr. I figured a fun-themed project could help them stay engaged with learning, but I’m struggling with where to start. How would you go about creating a course/activities (like Wes’ Javascript 30 course) specifically designed for primary/elementary aged kids?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 30:52 - Q: How much should someone who wants to work as a web developer (starting in a junior position) know about data structures and algorithms? Should I practice algorithms and do questions before applying for jobs?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 33:53 - Q: I’m working with a friend to start up a website for our YouTube channel, and we’re getting into podcasts too (not tech-related so no competition, no worries). I’m thinking about trying to host my own RSS feed for podcasts to save some bucks. Am I crazy?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 36:27 - Q: Do you guys name your colors in terms of the color or the use of the color. For example, say you styled all your links to be purple. Would you name that color “purple” or “link”?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 41:00 - Q: I’ve been listening to you for about a month and really dig it. I’m working on an app that will require a couple of different databases. I’ll need a database for user information, and a larger database for application data. The app does some analytics stuff, so data is critical. I’m getting lost in the world of hosted database options (mLab, Digital Ocean, etc.) and big cloud providers (AWS, Google, etc.). Could you guys talk a little bit about how you choose database hosting? Bonus question - have you ever used Auth0 or Okta for user authentication?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 45:09 - Q: I’m a bit confused about using GitHub. What happens to the files that are ignored, but required for development? What’s the best practice for backing up both? I have used .env files, but not too sure how it works if it’s in the gitignore and the site is deployed via GitHub (like with Netlify). Right now I have a backup folder on my hard drive and I back up both the dev and the live versions with a timestamp, whenever I do a new ‘release’. Also, you spoke about Jetpack, and I’d be curious what’s the best way to do this with a cronjob for example.</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 48:50 - Q: I was laid off in early April because of COVID-19. I’ve been trying to file unemployment since then. The state unemployment office said they were launching an updated website for filing claims on Friday, April 24th. At 9:00am that day, they ran a banner saying demand has been so high that it’s affecting the process ‘despite rigorous testing.’ Why is this so hard to scale?</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 55:57 - Q: What is your take on all of these rails-like server side rendered React and GraphQL frameworks? Here is another one built by Michael Jackson, Ryan Florence and some others: <a href= "https://twitter.com/remix_run">https://twitter.com/remix_run</a>. This of course is in addition to Redwood and Blitz.</p> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Links_43" name="Links_43"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://prismjs.com/">Prism</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://code.visualstudio.com/">VS Code</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href= "https://www.gatsbyjs.org/packages/gatsby-remark-vscode/">gatsby-remark-vscode</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://codesandbox.io/">CodeSandbox</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href= "https://github.com/microsoft/vscode-textmate">vscode-textmate</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://system76.com/">System76 Linux Laptop</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor"> JS Refactor</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.scratchjr.org/">ScratchJr</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://javascript30.com/">Javascript30</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://sevinf.github.io/graphql-pokedex/">GraphiQL Pokedex</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://aws.amazon.com/products/databases/">AWS</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://auth0.com/">Auth0</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.okta.com/">Okta</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://mlab.com/">mLab</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://jetpack.com/support/backup/">Jetpack Backup</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://remix.run/">Remix</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://redis.io/">Redis</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://redwoodjs.com/">Redwood</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://blitzjs.com/">Blitz</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://en.wikipedia.org/wiki/Encarta">Encarta</a></li> </ul> <h2 class="code-line" data-line-start="67" data-line-end="68"> <a id="_SIIIIICK__PIIIICKS__67" name= "_SIIIIICK__PIIIICKS__67"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> Scott: <a href="https://egopowerplus.com/power-mowers/">EGO battery-powered lawn gear</a></li> <li class="has-line-data" data-line-start="69" data-line-end="71"> Wes: <a href="https://amzn.to/35tH7Na">AmazonBasics Notebook Laptop Stand Arm Mount Tray</a></li> </ul> <h2 class="code-line" data-line-start="71" data-line-end="72"> <a id="Shameless_Plugs_71" name="Shameless_Plugs_71"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="72" data-line-end="73"> 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="73" data-line-end="75"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="75" data-line-end="76"> <a id="Tweet_us_your_tasty_treats_75" name= "Tweet_us_your_tasty_treats_75"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> 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 kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more!
 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.
 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.
 Show Notes 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future?
 16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog?
 11:13 - Q: Do my students NEED to understand recursion to be effective JS devs?
 15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web https://github.com/cdr/code-server). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser.
 22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that?
 26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure this could be a fun little group activity. I see how much they struggle focusing on some of the online instruction they have through school, and they’re a bit fatigued with “learning” right now. We tried doing a bit of scratch/scratch jr. I figured a fun-themed project could help them stay engaged with learning, but I’m struggling with where to start. How would you go about creating a course/activities (like Wes’ Javascript 30 course) specifically designed for primary/elementary aged kids?
 30:52 - Q: How much should someone who wants to work as a web developer (starting in a junior position) know about data structures and algorithms? Should I practice algorithms and do questions before applying for jobs?
 33:53 - Q: I’m working with a friend to start up a website for our YouTube channel, and we’re getting into podcasts too (not tech-related so no competition, no worries). I’m thinking about trying to host my own RSS feed for podcasts to save some bucks. Am I crazy?
 36:27 - Q: Do you guys name your colors in terms of the color or the use of the color. For example, say you styled all your links to be purple. Would you name that color “purple” or “link”?
 41:00 - Q: I’ve been listening to you for about a month and really dig it. I’m working on an app that will require a couple of different databases. I’ll need a database for user information, and a larger database for application data. The app does some analytics stuff, so data is critical. I’m getting lost in the world of hosted database options (mLab, Digital Ocean, etc.) and big cloud providers (AWS, Google, etc.). Could you guys talk a little bit about how you choose database hosting? Bonus question - have you ever used Auth0 or Okta for user authentication?
 45:09 - Q: I’m a bit confused about using GitHub. What happens to the files that are ignored, but required for development? What’s the best practice for backing up both? I have used.env files, but not too sure how it works if it’s in the gitignore and the site is deployed via GitHub (like with Netlify). Right now I have a backup folder on my hard drive and I back up both the dev and the live versions with a timestamp, whenever I do a new ‘release’. Also, you spoke about Jetpack, and I’d be curious what’s the best way to do this with a cronjob for example.
 48:50 - Q: I was laid off in early April because of COVID-19. I’ve been trying to file unemployment since then. The state unemployment office said they were launching an updated website for filing claims on Friday, April 24th. At 9:00am that day, they ran a banner saying demand has been so high that it’s affecting the process ‘despite rigorous testing.’ Why is this so hard to scale?
 55:57 - Q: What is your take on all of these rails-like server side rendered React and GraphQL frameworks? Here is another one built by Michael Jackson, Ryan Florence and some others: https://twitter.com/remix_run. This of course is in addition to Redwood and Blitz.
 Links  Prism

 VS Code

 gatsby-remark-vscode

 CodeSandbox

 vscode-textmate

 System76 Linux Laptop

  JS Refactor

 ScratchJr

 Javascript30

 GraphiQL Pokedex

 AWS

 Auth0

 Okta

 mLab

 Jetpack Backup

 Remix

 Redis

 Redwood

 Blitz

 Next.js

 Encarta

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: EGO battery-powered lawn gear

 Wes: AmazonBasics Notebook Laptop Stand Arm Mount Tray

  Shameless Plugs  Scott: Level Up Tutorials Pro - Sign up for the year and save 25%!
 Wes: All Courses - 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 - Courses for Kids × Sub-Components × Recursion × DB Hosting × Frameworks × Data Structures & Algorithms × More!

Poslechněte si podcast