Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck — Copilot × Glasses × Databases × Dealing with Stress × Employment vs Self-Employment × Auth in GraphQL × Headless CMS × 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 GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>Linode - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Freshbooks__Sponsor_15" name= "Freshbooks__Sponsor_15"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 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="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"> 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doctor’s prescription? If you guys have any sick picks about eyeglasses it would be great to hear it too. Thanks for the show and have a great week!!!</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 11:04 - Hi, I would like to know how the two of you deal with stress? I am a freelancer and sometimes clients can get the worst in me. When they do, I usually take a long walk and listen to a podcast, but I don’t always have the time for that. I can actually go into my commit history and show which one was under stress. I think a lot of developers especially freelancers could benefit from that. Thanks.</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 16:47 - Mike Varela: Question for you guys about dynamic database fields and API requests. How do you let the user store dynamic metadata? Thanks. Love the show, avid listener.</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 21:04 - Valentine Michael Smith: Can you touch on the use of the word “grok” in the dev world? I know a lot of people who have no idea what this word means. I just happened to have tried to read Stranger in a Strange Land, the novel the word originated from, a few years ago or else I wouldn’t have ever heard it before starting dev work. Have either of you read the book? Anyways, why do devs say this?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 24:50 - Steve Lewis: If you guys were not self-employed, would you prefer to work for a big company (like FAANG) or go to a smaller agency or startup, etc.?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 27:08 - So Many Localhost Errors: This may be a softball, but how do you set up your logging (Sentry and/or LogRocket) so your dev environment isn’t firing all the time? I can’t seem to find a way to do this well (and it’s probably because I’m trying to learn as I go).</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 31:03 - Josh J from Jersey: Hey guys, loving the podcast, I’ve been listening for about a month but bingeing through your episodes during my mind-numbing warehouse job, helps me keep my mind on JavaScript and what I have managed to learn in my spare time. I was wondering, when you’re sitting down to a new project, how do you design the website? Does it just slowly develop as you code or have you sat down and drawn out what you want it to look like ahead of time? I have heard talk of a remarkable pad. I’ve seen ads for this on Instagram and YouTube but always assumed it was a very gimmicky thing. Is this a good investment? Also wondering how you both met? Have you worked on any projects together outside of courses and Syntax? Keep the content coming!</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 38:14 - Andras: Hi Wes and Scott. You have talked a lot on the show about headless CMS’s like Sanity, Prismic or even WordPress being used as a headless CMS. I am curious what the setup in a real world project is like. How would you host the CMS? And what will the admin surface look like? Will the button styles, background color etc. be different than the actual website that the end user sees? Is that a problem for the admin users? Does the admin user see all the menu for creating new content types or adding new features? Or do they only see the input fields of all the contents that can be added to a specific page? Thank you!</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 42:14 - Dave: Hey guys, love the podcast! I understand that CORS prevention is in place in the browser to help improve security/prevent malicious requests across domains, but I don’t understand why you can get around this by performing the request server side, for example via cURL? If I were a malicious actor, surely I could just send my cross domain request through a proxy to avoid the CORS issue? I’m sure I’m missing something obvious here, can I please get your thoughts on this?</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 44:48 - Lemon: How do you implement authentication with GraphQL? Especially in Fastify, I know Scott recently moved over from Meteor to Fastify, so I too was checking Fastify but couldn’t find a satisfying auth solution that fits well with GraphQL.</p> <p class="has-line-data" data-line-start="41" data-line-end="43"> 48:08 - Zack Vogel: I love when you play games on the podcast. I’m a high school technology teacher and I play a game with my students called the 5 Second Rule. It’s based on a board game, but I have changed the topics to technology-themed questions. The game works like this. One person reads a topic “Name Three VS Code Extensions” and the other person has five seconds to respond with three correct answers.<br /> I think this could be a fun game to play on the podcast.</p> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="Links_44" name="Links_44"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href= "http://www.seeeyewear.com/">http://www.seeeyewear.com/</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href= "https://www.warbyparker.com/">https://www.warbyparker.com/</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.costco.com/">https://www.costco.com/</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href= "https://mariadb.com/kb/en/library/dynamic-columns/">MariaDB dynamic columns</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href= "https://en.wikipedia.org/wiki/Grok">https://en.wikipedia.org/wiki/Grok</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://twitter.com/argyleink">https://twitter.com/argyleink</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://remarkable.com/">https://remarkable.com/</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://figma.com/">https://figma.com/</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://graphql.org/">https://graphql.org/</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.meteor.com/">https://www.meteor.com/</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.fastify.io/">https://www.fastify.io/</a></li> <li class="has-line-data" data-line-start="56" data-line-end="58"> <a href= "https://docs.google.com/presentation/d/1oRqz1rSUXiLc5pJF2cMygNrodcRrRU77x0KdWGV67Iw/edit?usp=sharing"> https://docs.google.com/presentation/d/1oRqz1rSUXiLc5pJF2cMygNrodcRrRU77x0KdWGV67Iw/edit?usp=sharing</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://amzn.to/3mxqIl2">myQ Chamberlain Smart Garage Control</a></li> <li class="has-line-data" data-line-start="60" data-line-end="62"> Wes: <a href="https://amzn.to/31bh9zY">ATOTO Head Unit</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/pro">Level Up Tutorials Pro</a> - Sign up for the year and save 25%!</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 GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much more!
 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.
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 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 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off?
 05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doctor’s prescription? If you guys have any sick picks about eyeglasses it would be great to hear it too. Thanks for the show and have a great week!!!
 11:04 - Hi, I would like to know how the two of you deal with stress? I am a freelancer and sometimes clients can get the worst in me. When they do, I usually take a long walk and listen to a podcast, but I don’t always have the time for that. I can actually go into my commit history and show which one was under stress. I think a lot of developers especially freelancers could benefit from that. Thanks.
 16:47 - Mike Varela: Question for you guys about dynamic database fields and API requests. How do you let the user store dynamic metadata? Thanks. Love the show, avid listener.
 21:04 - Valentine Michael Smith: Can you touch on the use of the word “grok” in the dev world? I know a lot of people who have no idea what this word means. I just happened to have tried to read Stranger in a Strange Land, the novel the word originated from, a few years ago or else I wouldn’t have ever heard it before starting dev work. Have either of you read the book? Anyways, why do devs say this?
 24:50 - Steve Lewis: If you guys were not self-employed, would you prefer to work for a big company (like FAANG) or go to a smaller agency or startup, etc.?
 27:08 - So Many Localhost Errors: This may be a softball, but how do you set up your logging (Sentry and/or LogRocket) so your dev environment isn’t firing all the time? I can’t seem to find a way to do this well (and it’s probably because I’m trying to learn as I go).
 31:03 - Josh J from Jersey: Hey guys, loving the podcast, I’ve been listening for about a month but bingeing through your episodes during my mind-numbing warehouse job, helps me keep my mind on JavaScript and what I have managed to learn in my spare time. I was wondering, when you’re sitting down to a new project, how do you design the website? Does it just slowly develop as you code or have you sat down and drawn out what you want it to look like ahead of time? I have heard talk of a remarkable pad. I’ve seen ads for this on Instagram and YouTube but always assumed it was a very gimmicky thing. Is this a good investment? Also wondering how you both met? Have you worked on any projects together outside of courses and Syntax? Keep the content coming!
 38:14 - Andras: Hi Wes and Scott. You have talked a lot on the show about headless CMS’s like Sanity, Prismic or even WordPress being used as a headless CMS. I am curious what the setup in a real world project is like. How would you host the CMS? And what will the admin surface look like? Will the button styles, background color etc. be different than the actual website that the end user sees? Is that a problem for the admin users? Does the admin user see all the menu for creating new content types or adding new features? Or do they only see the input fields of all the contents that can be added to a specific page? Thank you!
 42:14 - Dave: Hey guys, love the podcast! I understand that CORS prevention is in place in the browser to help improve security/prevent malicious requests across domains, but I don’t understand why you can get around this by performing the request server side, for example via cURL? If I were a malicious actor, surely I could just send my cross domain request through a proxy to avoid the CORS issue? I’m sure I’m missing something obvious here, can I please get your thoughts on this?
 44:48 - Lemon: How do you implement authentication with GraphQL? Especially in Fastify, I know Scott recently moved over from Meteor to Fastify, so I too was checking Fastify but couldn’t find a satisfying auth solution that fits well with GraphQL.
 48:08 - Zack Vogel: I love when you play games on the podcast. I’m a high school technology teacher and I play a game with my students called the 5 Second Rule. It’s based on a board game, but I have changed the topics to technology-themed questions. The game works like this. One person reads a topic “Name Three VS Code Extensions” and the other person has five seconds to respond with three correct answers. I think this could be a fun game to play on the podcast.
 Links  http://www.seeeyewear.com/

 https://www.warbyparker.com/

 https://www.costco.com/

 MariaDB dynamic columns

 https://en.wikipedia.org/wiki/Grok

 https://twitter.com/argyleink

 https://remarkable.com/

 https://figma.com/

 https://graphql.org/

 https://www.meteor.com/

 https://www.fastify.io/

  https://docs.google.com/presentation/d/1oRqz1rSUXiLc5pJF2cMygNrodcRrRU77x0KdWGV67Iw/edit?usp=sharing

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: myQ Chamberlain Smart Garage Control

 Wes: ATOTO Head Unit

  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 — Copilot × Glasses × Databases × Dealing with Stress × Employment vs Self-Employment × Auth in GraphQL × Headless CMS × More!

Poslechněte si podcast