Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × 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 getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</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 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.io</a> and using the coupon code “tastytreat”.</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"> 01:58 - You’ve talked a couple times in the past about the security concerns around <code>target="_blank"</code>. You mentioned how adding <code>rel="noopener"</code> and / or <code>rel="noreferrer"</code> can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 03:48 - Why did you not mention <a href= "https://stenciljs.com/">Stencil</a> when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it?</p> <ul> <li class="has-line-data" data-line-start="21" data-line-end="23"> Example of a stencil component:</li> </ul> <pre data-initialized="true" data-gclp-id="0"> <code class="has-line-data" data-line-start="24" data-line-end= "43">import { Component, Prop, h } from '@stencil/core';  @Component({   tag: 'my-first-component', }) export class MyComponent {    // Indicate that name should be a public property on the component   @Prop() name: string;    render() {     return (       <p>         My name is {this.name}       </p>     );   } } </code> </pre> <p class="has-line-data" data-line-start="44" data-line-end="45"> 06:12 - Is <a href= "https://www.syntax.fm/">https://www.syntax.fm</a> supposed to not work? I get a 404.</p> <p class="has-line-data" data-line-start="46" data-line-end="47"> 07:34 - I’m wondering what advice you’d have for someone self-taught switching from a totally non-tech industry (non profit arts, in my case) where I work in a tech role. I’ve hustled and built a portfolio of projects and learned a ton from both of your courses, but I feel that my experience is seen as less valuable because I don’t work in a traditional software/web development environment. Any tips for getting over the final hurdle of getting a dev job?</p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 11:11 - What makes a software engineer senior?</p> <p class="has-line-data" data-line-start="50" data-line-end="51"> 13:08 - I have a Gatsby / Netlify client project about to launch. What’s the best approach in handing over to the (non technical) client? Do I keep in my Github account and just give the client the Netlify CMS login, or create the a Github account for the client that I can access for any maintenance? What do other devs do?</p> <p class="has-line-data" data-line-start="52" data-line-end="53"> 17:55 - I recently blocked all cookies on my mobile browser (Google Chrome), and I noticed something weird. A couple of sites that I know for a fact to have been built using NextJS weren’t working as expected (surprise surprise). They would load as usual, and after a second or so, all the content on the page disappeared, with the error message “sorry: an unexpected error has occurred”. In some cases, the error was printed in the site’s font, and with the same background color on the body. Why does blocking cookies do this to NextJS sites?</p> <p class="has-line-data" data-line-start="54" data-line-end="55"> 21:21 - How often do you make commits? I always hear, “commit often”, but I am hesitant because I feel like I may change my code later on before I make a pull request? I really liked your episode on Git Fundamentals, I would love to see a tutorial/deep dive into Git workflows and practices (when to commit / how often) Should I commit even though I know what I’m working on isn’t complete or I need to refactor it?? What is code review etiquette?</p> <p class="has-line-data" data-line-start="56" data-line-end="57"> 26:59 - Wes, how do you handle captioning and transcripts on your courses? Do you use some tool or service for that or do you do it by hand?</p> <p class="has-line-data" data-line-start="58" data-line-end="59"> 31:11 - I am a recent graduate of a code school that focused on React and Rails. The company that I currently work for uses Angular for part of their stack. I eventually would like to move into a dev spot, but I am finding that Angular feels a bit stuffy and I am not as excited about it as React, Svelte, Vue, etc. I am afraid that if I dive into Angular, I will become less relevant down the road. I want to learn everything, but I only have so much time and don’t want to stunt my growth as a developer. Any thoughts or advice on this would be sick!</p> <p class="has-line-data" data-line-start="60" data-line-end="61"> 36:38 - How do you handle SVGs in React? I know that SVGR exists, but I’d like to avoid adding another dependency if it’s something I can roll on my own. In the past, I’ve created functions that take parameters like fill or stroke to control color, and return a string of SVG code with the arguments interpolated in. Then I place that string into a component using dangerouslySetInnerHTML. I haven’t seen this method used anywhere else, and is probably not best practice. But also, it works, so maybe it’s fine?</p> <p class="has-line-data" data-line-start="62" data-line-end="63"> 39:52 - What social media platforms should you use as a Dev? What is cool to have? What are their benefits?</p> <p class="has-line-data" data-line-start="64" data-line-end="65"> 48:14 - Have you tried an ultrawide monitor for coding, such as 34" or 38"? I feel the extra width would be great for a single monitor setup, but haven’t been able to see one live where I live.</p> <h2 class="code-line" data-line-start="66" data-line-end="67"> <a id="Links_66" name="Links_66"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href= "https://syntax.fm/show/269/hasty-treat-target-_blank-security-issue-what-s-the-deal-with-noopener-and-noreferrer"> Syntax 269: Hasty Treat - Target=_blank security issue? What’s the deal with noopener and noreferrer?</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href= "https://syntax.fm/show/280/potluck-rip-firefox-safari-changing-careers-regression-testing-google-analytics-alternatives-malicious-github-users-mac-vs-windows-more"> Syntax 280: Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More!</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://www.imdb.com/title/tt0298203/">8 Mile</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://syntax.fm/show/286/git-fundamentals">Syntax 286: Git Fundamentals</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.rev.com/">Rev</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://angularjs.org/">Angular</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://reactjs.org/">React</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://svelte.dev/">Svelte</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://react-svgr.com/">SVGR</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://discord.gg/ccMC6kB">LevelUp Tuts Discord</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://dev.to/">Dev.to</a></li> <li class="has-line-data" data-line-start="78" data-line-end="80"> <a href="https://www.freecodecamp.org/">freeCodeCamp</a></li> </ul> <h2 class="code-line" data-line-start="80" data-line-end="81"> <a id="_SIIIIICK__PIIIICKS__80" name= "_SIIIIICK__PIIIICKS__80"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="81" data-line-end="85"> Scott: <ul> <li class="has-line-data" data-line-start="82" data-line-end="83"> 1: <a href="https://amzn.to/3cFraY8">Knife Cleaner</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> 2: <a href="https://amzn.to/336AvVA">Scraper</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> 3: <a href="https://amzn.to/3mZtfCY">Chainmail Scrubber</a></li> </ul> </li> <li class="has-line-data" data-line-start="85" data-line-end="87"> Wes: <a href="https://scriptable.app/">Scriptable App</a></li> </ul> <h2 class="code-line" data-line-start="87" data-line-end="88"> <a id="Shameless_Plugs_87" name="Shameless_Plugs_87"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="88" data-line-end="89"> Scott: <a href="https://www.leveluptutorials.com/pro">ReactJS For Everyone</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="89" data-line-end="91"> Wes: <a href="https://mastergatsby.com/">Master Gatsby Course</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="91" data-line-end="92"> <a id="Tweet_us_your_tasty_treats_91" name= "Tweet_us_your_tasty_treats_91"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="97" data-line-end="98"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="98" data-line-end="99"> 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 getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, and more!
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 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.io and using the coupon code “tastytreat”.
 Show Notes 01:58 - You’ve talked a couple times in the past about the security concerns around target="_blank". You mentioned how adding rel="noopener" and / or rel="noreferrer" can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack?
 03:48 - Why did you not mention Stencil when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it?
  Example of a stencil component:
  import { Component, Prop, h } from '@stencil/core'; @Component({  tag: 'my-first-component', }) export class MyComponent {  // Indicate that name should be a public property on the component  @Prop() name: string;  render() {   return (        My name is {this.name}    
   );  } }  06:12 - Is https://www.syntax.fm supposed to not work? I get a 404.
 07:34 - I’m wondering what advice you’d have for someone self-taught switching from a totally non-tech industry (non profit arts, in my case) where I work in a tech role. I’ve hustled and built a portfolio of projects and learned a ton from both of your courses, but I feel that my experience is seen as less valuable because I don’t work in a traditional software/web development environment. Any tips for getting over the final hurdle of getting a dev job?
 11:11 - What makes a software engineer senior?
 13:08 - I have a Gatsby / Netlify client project about to launch. What’s the best approach in handing over to the (non technical) client? Do I keep in my Github account and just give the client the Netlify CMS login, or create the a Github account for the client that I can access for any maintenance? What do other devs do?
 17:55 - I recently blocked all cookies on my mobile browser (Google Chrome), and I noticed something weird. A couple of sites that I know for a fact to have been built using NextJS weren’t working as expected (surprise surprise). They would load as usual, and after a second or so, all the content on the page disappeared, with the error message “sorry: an unexpected error has occurred”. In some cases, the error was printed in the site’s font, and with the same background color on the body. Why does blocking cookies do this to NextJS sites?
 21:21 - How often do you make commits? I always hear, “commit often”, but I am hesitant because I feel like I may change my code later on before I make a pull request? I really liked your episode on Git Fundamentals, I would love to see a tutorial/deep dive into Git workflows and practices (when to commit / how often) Should I commit even though I know what I’m working on isn’t complete or I need to refactor it?? What is code review etiquette?
 26:59 - Wes, how do you handle captioning and transcripts on your courses? Do you use some tool or service for that or do you do it by hand?
 31:11 - I am a recent graduate of a code school that focused on React and Rails. The company that I currently work for uses Angular for part of their stack. I eventually would like to move into a dev spot, but I am finding that Angular feels a bit stuffy and I am not as excited about it as React, Svelte, Vue, etc. I am afraid that if I dive into Angular, I will become less relevant down the road. I want to learn everything, but I only have so much time and don’t want to stunt my growth as a developer. Any thoughts or advice on this would be sick!
 36:38 - How do you handle SVGs in React? I know that SVGR exists, but I’d like to avoid adding another dependency if it’s something I can roll on my own. In the past, I’ve created functions that take parameters like fill or stroke to control color, and return a string of SVG code with the arguments interpolated in. Then I place that string into a component using dangerouslySetInnerHTML. I haven’t seen this method used anywhere else, and is probably not best practice. But also, it works, so maybe it’s fine?
 39:52 - What social media platforms should you use as a Dev? What is cool to have? What are their benefits?
 48:14 - Have you tried an ultrawide monitor for coding, such as 34" or 38"? I feel the extra width would be great for a single monitor setup, but haven’t been able to see one live where I live.
 Links  Syntax 269: Hasty Treat - Target=_blank security issue? What’s the deal with noopener and noreferrer?

  Syntax 280: Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More!

 8 Mile

 Syntax 286: Git Fundamentals

 Rev

 Angular

 React

 Svelte

 SVGR

 LevelUp Tuts Discord

 Dev.to

 freeCodeCamp

  ××× SIIIIICK ××× PIIIICKS ×××  Scott:  1: Knife Cleaner

 2: Scraper

 3: Chainmail Scrubber

 Wes: Scriptable App

  Shameless Plugs  Scott: ReactJS For Everyone - Sign up for the year and save 25%!
 Wes: Master Gatsby Course - 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 - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!

Poslechněte si podcast