Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Mobile First × Arrow Functions × Deno × JSON APIs × Refactoring Tips × 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 mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms 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="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"> 02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt.</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like <a href= "https://aframe.io/">A-Frame</a> and <a href= "https://facebook.github.io/react-360/">React 360</a>. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 21:37 - Q: I was curious knowing your opinions regarding <a href="https://jsonapi.org/">json:api</a> and its consumption in React. Is it still a good pick compared to <a href="https://graphql.org/">GraphQL</a> or normal rest/json?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 27:30 - Q: What’s your take on <a href= "https://blitzjs.com/">Blitz.js</a> and <a href= "https://redwoodjs.com/">RedwoodJS</a>? Would you use a framework like this to build a large & scalable web app?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 30:54 - Q: What do you think of <a href= "https://deno.land/">Deno.js</a> reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 34:34 - Q: When you are looking to refactor code, do you have a process you like to follow?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 41:35 - Q: Which technology stack would you choose in 2020 for an e-commerce website and why?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 46:32 - Q: I’m confused about developing a website for a client. I feel like most, if not all, clients want to take administrative control at the end of the project to be able to handle things themselves. Does this mean the only option for client projects is WordPress? I got really excited about making a client’s site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 49:52 - Q: How do I use prop types to check a component when getting the props from context instead of passing them down?</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 51:51 - Q: Should I use the <a href= "https://www.mongodb.com/">mongoDB</a> or <a href= "https://www.npmjs.com/package/mongoose">mongoose node module</a> in my project? What are the differences?</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 55:48 - Q: Is it a bad practice if I mix up <a href= "https://react-bootstrap.github.io/">React Bootstrap</a> and <a href= "https://material-ui.com/">Material UI</a> in one React project?</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://gqless.dev/">gqless</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.prisma.io/">Prisma</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href= "https://dev.to/flybayer/the-blitz-js-manifesto-a-new-react-framework-1gg7"> The Blitz.js Manifesto (A New Fullstack React Framework)</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://begin.com/">Begin</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.shopify.com/">Shopify</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://snipcart.com/">Snipcart</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://magento.com/">Magento</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.sanity.io/syntax">Sanity</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.gatsbyjs.org/">Gatsby</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href= "https://syntax.fm/show/157/hasty-treat-what-is-a-headless-cms">Syntax 157: Hasty Treat - What is a Headless CMS?</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://twitter.com/dog_rates">@dog_rates</a></li> <li class="has-line-data" data-line-start="56" data-line-end="58"> <a href="https://wondery.com/shows/joe-exotic/">Wondery - Joe Exotic</a></li> </ul> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="_SIIIIICK__PIIIICKS__58" name= "_SIIIIICK__PIIIICKS__58"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Scott: <a href= "https://www.jackboxgames.com/trivia-murder-party-two/">Jackbox Games - Murder Party Two</a></li> <li class="has-line-data" data-line-start="60" data-line-end="62"> Wes: <a href="https://www.netflix.com/title/81115994">Tiger King</a></li> </ul> <h2 class="code-line" data-line-start="62" data-line-end="63"> <a id="Shameless_Plugs_62" name="Shameless_Plugs_62"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> Scott: <a href= "https://www.leveluptutorials.com/tutorials/custom-react-hooks">Custom React Hooks</a> - Currently 50% off! - Use the coupon code ‘Syntax’ for an additional 10% off!</li> <li class="has-line-data" data-line-start="64" data-line-end="66"> 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="66" data-line-end="67"> <a id="Tweet_us_your_tasty_treats_66" name= "Tweet_us_your_tasty_treats_66"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> 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 mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms 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.
 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 02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt.
 08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around?
 13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like A-Frame and React 360. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future?
 19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers?
 21:37 - Q: I was curious knowing your opinions regarding json:api and its consumption in React. Is it still a good pick compared to GraphQL or normal rest/json?
 27:30 - Q: What’s your take on Blitz.js and RedwoodJS? Would you use a framework like this to build a large & scalable web app?
 30:54 - Q: What do you think of Deno.js reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype?
 34:34 - Q: When you are looking to refactor code, do you have a process you like to follow?
 41:35 - Q: Which technology stack would you choose in 2020 for an e-commerce website and why?
 46:32 - Q: I’m confused about developing a website for a client. I feel like most, if not all, clients want to take administrative control at the end of the project to be able to handle things themselves. Does this mean the only option for client projects is WordPress? I got really excited about making a client’s site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here?
 49:52 - Q: How do I use prop types to check a component when getting the props from context instead of passing them down?
 51:51 - Q: Should I use the mongoDB or mongoose node module in my project? What are the differences?
 55:48 - Q: Is it a bad practice if I mix up React Bootstrap and Material UI in one React project?
 Links  gqless

 Prisma

  The Blitz.js Manifesto (A New Fullstack React Framework)

 Begin

 Shopify

 Snipcart

 Magento

 Sanity

 Gatsby

 Syntax 157: Hasty Treat - What is a Headless CMS?

 @dog_rates

 Wondery - Joe Exotic

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Jackbox Games - Murder Party Two

 Wes: Tiger King

  Shameless Plugs  Scott: Custom React Hooks - Currently 50% off! - Use the coupon code ‘Syntax’ for an additional 10% off!
 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

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

Potluck - Mobile First × Arrow Functions × Deno × JSON APIs × Refactoring Tips × More!

Poslechněte si podcast