Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × 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 transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="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"> 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips.</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, <a href= "https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/">as described by Philip Walton</a>, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel).</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 18:01 - Why should you choose Styled Components over other ways of writing CSS?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa.</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal.</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do.</p> <h2 class="code-line" data-line-start="35" data-line-end="36"> <a id="Links_35" name="Links_35"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://inputmag.com/">inputmag.com</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href= "https://apps.apple.com/us/app/focus-time-management/id777233759?mt=12"> Focus app</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://www.npmjs.com/package/tsdx?activeTab=readme">TSdx</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://rollupjs.org/">Rollup</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://webpack.js.org/">Webapck</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://parceljs.org/">Parcel</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://beginnerjavascript.com/">Beginner Javascript</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.typescriptlang.org/">Typescript</a></li> <li class="has-line-data" data-line-start="44" data-line-end="46"> <a href="https://darknetdiaries.com/">Darknet Diaries</a></li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="_SIIIIICK__PIIIICKS__46" name= "_SIIIIICK__PIIIICKS__46"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> Scott: <a href="https://malicious.life/">Malicious Life Podcast</a></li> <li class="has-line-data" data-line-start="48" data-line-end="50"> Wes: <a href= "https://www.amazon.com/s?k=LaCie+Rugged+USB-C&ref=nb_sb_noss">LaCie Rugged USB-C External HDD</a></li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="Shameless_Plugs_50" name="Shameless_Plugs_50"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Scott: <a href="https://www.leveluptutorials.com/pro">Modern CSS Design Systems</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Wes: <a href="https://beginnerjavascript.com/">Beginner Javascript</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> 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 transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader and more!
 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.
 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 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”?
 06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips.
 11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel).
 13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level?
 18:01 - Why should you choose Styled Components over other ways of writing CSS?
 22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa.
 26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better?
 31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal.
 37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do.
 Links  inputmag.com

  Focus app

 TSdx

 Rollup

 Webapck

 Parcel

 Beginner Javascript

 Typescript

 Darknet Diaries

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Malicious Life Podcast

 Wes: LaCie Rugged USB-C External HDD

  Shameless Plugs  Scott: Modern CSS Design Systems - Sign up for the year and save 25%!
 Wes: Beginner Javascript - 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 - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More!

Poslechněte si podcast