Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × 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 frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, 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="16" data-line-end="17"> 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow.</p> <p class="has-line-data" data-line-start="18" data-line-end="19"> 03:20 - Which JS library/framework do you think beginners might find the easiest to understand?</p> <p class="has-line-data" data-line-start="20" data-line-end="21"> 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere?</p> <p class="has-line-data" data-line-start="22" data-line-end="23"> 09:23 - My question is about the difference between a framework and a library. Should we have two separate words?</p> <p class="has-line-data" data-line-start="24" data-line-end="25"> 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas.</p> <p class="has-line-data" data-line-start="26" data-line-end="27"> 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library?</p> <p class="has-line-data" data-line-start="28" data-line-end="29"> 21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects?</p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored?</p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something?</p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to <a href="http://angular.io/">Angular.io</a> (v10) instead of the AngularJS (v1) website?</p> <p class="has-line-data" data-line-start="36" data-line-end="37"> 40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER.</p> <p class="has-line-data" data-line-start="38" data-line-end="39"> 47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e <a href= "http://tenant1.domain.com/">tenant1.domain.com</a>, <a href= "http://tenant2.domain.com/">tenant2.domain.com</a>, etc.)</p> <p class="has-line-data" data-line-start="40" data-line-end="41"> 48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev?</p> <p class="has-line-data" data-line-start="42" data-line-end="43"> 50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)?</p> <p class="has-line-data" data-line-start="44" data-line-end="45"> 54:20 - What’s your approach for handling padding + margin with components?</p> <p class="has-line-data" data-line-start="46" data-line-end="47"> 57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do?</p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines?</p> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="Links_50" name="Links_50"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://syntax.fm/show/002/webcam-and-audio-access-with-webrtc-and-getusermedia"> Syntax 002: Webcam and audio access with WebRTC and getUserMedia()</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href= "https://syntax.fm/show/256/webrtc-and-peer-to-peer-video-calling-with-ian-ramzy"> Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="http://daily.co/">Daily.co</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.twilio.com/">Twilio</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://svelte.dev/">Svelte</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href= "https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case"> https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://mastergatsby.com/">Master Gatsby</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href= "https://syntax.fm/show/292/how-to-make-freelancing-easier">Syntax 292: How to Make Freelancing Easier</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://github.com/formium/tsdx">https://github.com/formium/tsdx</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://nx.dev/react">https://nx.dev/react</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href= "https://github.com/lerna/lerna">https://github.com/lerna/lerna</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href= "https://www.npmjs.com/package/babel-plugin-module-resolver">https://www.npmjs.com/package/babel-plugin-module-resolver</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://deno.land/">Deno</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.rust-lang.org/">Rust</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://rustwasm.github.io/wasm-pack/">wasm-pack</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://rocket.rs/">https://rocket.rs/</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href= "https://syntax.fm/show/290/potluck-is-angular-good-stencil-js-self-xss-svgs-in-react-social-platforms-for-devs-project-handoff-cleaning-knives-more"> Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href= "https://www.leveluptutorials.com/tutorials/modern-css-layouts">Modern CSS Layouts</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.leveluptutorials.com/tutorials/modern-css-design-systems"> Modern CSS Design Systems</a></li> <li class="has-line-data" data-line-start="70" data-line-end="72"> <a href= "https://www.digitalocean.com/products/app-platform/">Digital Ocean App Platform</a></li> </ul> <h2 class="code-line" data-line-start="72" data-line-end="73"> <a id="_SIIIIICK__PIIIICKS__72" name= "_SIIIIICK__PIIIICKS__72"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> Scott: <a href="https://amzn.to/31JTjZQ">Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook</a></li> <li class="has-line-data" data-line-start="74" data-line-end="76"> Wes: <a href="https://rstyle.me/cz-n/enxwrncdguf">Levi’s Barstow Western Shirt</a></li> </ul> <h2 class="code-line" data-line-start="76" data-line-end="77"> <a id="Shameless_Plugs_76" name="Shameless_Plugs_76"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> Scott: <a href= "https://www.leveluptutorials.com/pro">Animating Svelte</a> - Black Friday Sale: Sign up for the year and save 50%!</li> <li class="has-line-data" data-line-start="78" data-line-end="80"> Wes: <a href="https://mastergatsby.com/">Master Gatsby</a> - Black Friday Sale: All courses 50% off!</li> </ul> <h2 class="code-line" data-line-start="80" data-line-end="81"> <a id="Tweet_us_your_tasty_treats_80" name= "Tweet_us_your_tasty_treats_80"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> 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 frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, 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:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow.
 03:20 - Which JS library/framework do you think beginners might find the easiest to understand?
 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere?
 09:23 - My question is about the difference between a framework and a library. Should we have two separate words?
 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas.
 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library?
 21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects?
 29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored?
 35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something?
 38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website?
 40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER.
 47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.)
 48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev?
 50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)?
 54:20 - What’s your approach for handling padding + margin with components?
 57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have.env files on a small thumb drive on my keychain. What do you do?
 59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines?
 Links  Syntax 002: Webcam and audio access with WebRTC and getUserMedia()

  Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy

 Daily.co

 Twilio

 Svelte

  https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

 Master Gatsby

 Syntax 292: How to Make Freelancing Easier

 https://github.com/formium/tsdx

 https://nx.dev/react

 https://github.com/lerna/lerna

 https://www.npmjs.com/package/babel-plugin-module-resolver

 Deno

 Rust

 wasm-pack

 https://rocket.rs/

  Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!

 Modern CSS Layouts

  Modern CSS Design Systems

 Digital Ocean App Platform

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook

 Wes: Levi’s Barstow Western Shirt

  Shameless Plugs  Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%!
 Wes: Master Gatsby - Black Friday Sale: All courses 50% 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 - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

Poslechněte si podcast