Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × 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 deploying applications, the value of Typescript, live coding via Twitch and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="11" data-line-end="12">If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href= "https://sentry.io/">Sentry</a> and using the coupon code “tastytreat”.</p> <h2 class="code-line" data-line-start="13" data-line-end="14"> <a id="Freshbooks__Sponsor_13" name= "Freshbooks__Sponsor_13"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="15" data-line-end="16"> Get a 30 day free trial of Freshbooks at <a href= "http://freshbooks.com/syntax">freshbooks.com/syntax</a> and put <strong>SYNTAX</strong> in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="17" data-line-end="18"> <a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis.</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up.</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.).</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :)</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it!</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well.</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 34:15 - Q: Do you plan to launch a <a href= "http://syntax.fm/">Syntax.fm</a> app?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation?</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://developdenver.org/">Develop Denver</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://aws.amazon.com/">AWS</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://zeit.co/">Zeit</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.heroku.com/">Heroku</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://circleci.com/">CircleCI</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://buddy.works/">Buddy.works</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://travis-ci.org/">Travis CI</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href= "https://about.gitlab.com/product/continuous-integration/">Gitlab CI</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://kubernetes.io/">Kubernetes</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://code.visualstudio.com/">VSCode</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.typescriptlang.org/">Typescript</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor">Blazor</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href="https://www.linkedin.com/">Linkedin</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="_SIIIIICK__PIIIICKS__54" name= "_SIIIIICK__PIIIICKS__54"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Scott: <a href="https://amzn.to/31DHdyJ">VIVO Premium Heavy Duty Arm</a></li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Wes: <a href= "https://www.amazon.com/AmazonBasics-Pro-Style-Spring-Sprayer-Kitchen/dp/B07F2R728S">AmazonBasics Pro-Style Spring Sprayer Kitchen Faucet, Oil-Rubbed Bronze</a></li> </ul> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="Shameless_Plugs_58" name="Shameless_Plugs_58"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Scott: <a href= "https://www.leveluptutorials.com/pro">LevelUpTutorials Pro - Gatsby Ecommerce</a></li> <li class="has-line-data" data-line-start="60" data-line-end="62"> Wes: <a href="https://wesbos.com/courses/">All Courses - Beginner JS Course</a></li> </ul> <h2 class="code-line" data-line-start="62" data-line-end="63"> <a id="Tweet_us_your_tasty_treats_62" name= "Tweet_us_your_tasty_treats_62"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> 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 deploying applications, the value of Typescript, live coding via Twitch and more!
 Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
 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 1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis.
 4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up.
 9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.).
 13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project?
 18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :)
 22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it!
 26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well.
 29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project?
 34:15 - Q: Do you plan to launch a Syntax.fm app?
 45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation?
 Links  Develop Denver

 AWS

 Zeit

 Heroku

 CircleCI

 Buddy.works

 Travis CI

 Gitlab CI

 Kubernetes

 VSCode

 Typescript

 Blazor

 Linkedin

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: VIVO Premium Heavy Duty Arm

 Wes: AmazonBasics Pro-Style Spring Sprayer Kitchen Faucet, Oil-Rubbed Bronze

  Shameless Plugs  Scott: LevelUpTutorials Pro - Gatsby Ecommerce

 Wes: All Courses - Beginner JS Course

  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 - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!

Poslechněte si podcast