Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Bootcamps × Career Change × Figma × Gatsby × AMP × Mongoose × 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 bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "TECH_Domains__Sponsor_9" name="TECH_Domains__Sponsor_9"></a>.TECH Domains - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at <a href= "https://go.tech/syntax2020">go.tech/syntax2020</a>. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.</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"> 3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 5:36 - The dreaded monitor question, flat or curved?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 12:35 - What is AMP and should I be using it?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 21:46 - Would you ever consider moving from Mongo / Mongoose?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program.</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few myself, but I always come back to the same question: how exactly do I secure these endpoints? Because you are charged for compute time, and those endpoints are publicly available, couldn’t anyone just send requests to them and run up your bill?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 36:53 - I’ve decided to make a career out of coding and programming and I’m an absolute beginner starting out in HTML and CSS. It might be a weird question but how many/what percentage elements and declaratives do I need to memorize? It’s not that the info is necessarily difficult to parse, it’s the amount of tags that I’m bombarding my brain with is muddying my progress. I’m more of a theory-driven learner so it’s not the biggest obstacle in the world but I’m starting to see the breadth of this endeavor and I’m not sure how to focus my mental acuity.</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 40:39 - Do you have a standard folder structure that you follow for placing “utility” function JS files? Is there an “industry standard”? I’ve just been using <code>utils</code> or <code>utilities</code> inside <code>src</code>, but curious if there is a more common way.</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 44:12 - Is figuring out new techs/modules/plugins/whatever really as easy as reading the docs for most people? A common response to “what’s a good way to learn x” seems to be “the docs are good”. I then open the docs and am absolutely clueless. Are these people just giving bad advice, or do the docs actually give most people enough to go on? For example, I tried to implement username login with Passport using their docs, and a lot seemed to be left out, implying you’re supposed to just already know all this other stuff. It’s a bit demoralizing to feel like I can’t figure out much of anything on my own, and I’ve been doing web dev for a few years now, albeit not professionally, but I have done some big projects that are used regularly. So anyway, just wondering what your take on this common advice is, your experience with being able to figure out things on your own without needing an hour-long tutorial, and so on. I know you’re both tutorial makers, but I don’t get the impression that you two have to take a course to understand something new.</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 48:19 - Do you have any tips for getting over “code shyness” or “imposter syndrome”? I find myself struggling with this issue from time to time and was curious to know your suggestions for dealing with it.</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 53:36 - If I rename my GitHub repo, will all the links that are in the wild still work. For instance will <a href= "http://github.com/webruin">github.com/webruin</a> map to <a href= "http://github.com/newname">github.com/newname</a>?</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://www.cloudflare.com/">Cloudflare</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://amp.dev/">AMP</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://blitzjs.com/">Blitz.js</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://twitter.com/flybayer">Brandon Blitz</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.meteor.com/">Meteor</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://mongoosejs.com/">Mongoose</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html"> DynamoDB</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://uses.tech/">uses.tech</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.coursereport.com/schools/modern-labor">Course Report - Modern Labor</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="http://www.passportjs.org/">Passport.js</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href= "https://syntax.fm/show/058/advice-for-beginners-tech-skills-applying-for-jobs-focus-imposter-syndrome-more"> Syntax 058: Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href= "https://syntax.fm/show/015/advice-for-new-developers-imposter-syndrome-and-interviewing-at-google"> Syntax 015: Advice for New Developers, Imposter Syndrome and Interviewing at Google</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href= "https://syntax.fm/show/075/hasty-treat-feedback-and-criticism">Syntax 075: Hasty Treat - Feedback and Criticism</a></li> <li class="has-line-data" data-line-start="57" data-line-end="59"> <a href="https://twitter.com/BrendanEich">Brendan Eich</a></li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="_SIIIIICK__PIIIICKS__59" name= "_SIIIIICK__PIIIICKS__59"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> Scott: <a href= "https://www.strongerbyscience.com/podcast/">Stronger by Science Podcast</a></li> <li class="has-line-data" data-line-start="61" data-line-end="63"> Wes: <a href= "https://apps.apple.com/us/app/istat-menus/id1319778037">iStat Menus</a></li> </ul> <h2 class="code-line" data-line-start="63" data-line-end="64"> <a id="Shameless_Plugs_63" name="Shameless_Plugs_63"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> Scott: <a href= "https://www.leveluptutorials.com/pro">Animating React with Framer Motion</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="65" data-line-end="67"> 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="67" data-line-end="68"> <a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> 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 bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more!
.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and.TECH is perfect for representing your brand. Find out if your.TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
 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 3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode?
 5:36 - The dreaded monitor question, flat or curved?
 8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first?
 12:35 - What is AMP and should I be using it?
 16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js?
 21:46 - Would you ever consider moving from Mongo / Mongoose?
 24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program.
 33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few myself, but I always come back to the same question: how exactly do I secure these endpoints? Because you are charged for compute time, and those endpoints are publicly available, couldn’t anyone just send requests to them and run up your bill?
 36:53 - I’ve decided to make a career out of coding and programming and I’m an absolute beginner starting out in HTML and CSS. It might be a weird question but how many/what percentage elements and declaratives do I need to memorize? It’s not that the info is necessarily difficult to parse, it’s the amount of tags that I’m bombarding my brain with is muddying my progress. I’m more of a theory-driven learner so it’s not the biggest obstacle in the world but I’m starting to see the breadth of this endeavor and I’m not sure how to focus my mental acuity.
 40:39 - Do you have a standard folder structure that you follow for placing “utility” function JS files? Is there an “industry standard”? I’ve just been using utils or utilities inside src, but curious if there is a more common way.
 44:12 - Is figuring out new techs/modules/plugins/whatever really as easy as reading the docs for most people? A common response to “what’s a good way to learn x” seems to be “the docs are good”. I then open the docs and am absolutely clueless. Are these people just giving bad advice, or do the docs actually give most people enough to go on? For example, I tried to implement username login with Passport using their docs, and a lot seemed to be left out, implying you’re supposed to just already know all this other stuff. It’s a bit demoralizing to feel like I can’t figure out much of anything on my own, and I’ve been doing web dev for a few years now, albeit not professionally, but I have done some big projects that are used regularly. So anyway, just wondering what your take on this common advice is, your experience with being able to figure out things on your own without needing an hour-long tutorial, and so on. I know you’re both tutorial makers, but I don’t get the impression that you two have to take a course to understand something new.
 48:19 - Do you have any tips for getting over “code shyness” or “imposter syndrome”? I find myself struggling with this issue from time to time and was curious to know your suggestions for dealing with it.
 53:36 - If I rename my GitHub repo, will all the links that are in the wild still work. For instance will github.com/webruin map to github.com/newname?
 Links  Cloudflare

 AMP

 Blitz.js

 Brandon Blitz

 Meteor

 Mongoose

  DynamoDB

 uses.tech

 Course Report - Modern Labor

 Passport.js

  Syntax 058: Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More

  Syntax 015: Advice for New Developers, Imposter Syndrome and Interviewing at Google

 Syntax 075: Hasty Treat - Feedback and Criticism

 Brendan Eich

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Stronger by Science Podcast

 Wes: iStat Menus

  Shameless Plugs  Scott: Animating React with Framer Motion - 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 - Bootcamps × Career Change × Figma × Gatsby × AMP × Mongoose × More!

Poslechněte si podcast