Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck Part 2 - Magic GQLess × Are classes dead? × Custom Hooks × Staying Up To Date × CSS × 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 custom hooks, static site generators, code management, CSS, 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="10" data-line-end="11">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="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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="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"> 04:02 - Q: Could you do a quick overview of how to effectively use a platform like <a href= "https://cloudinary.com/">Cloudinary</a>? I have a <a href= "https://www.gatsbyjs.org/">Gatsby</a> site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service.</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them.</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 23:56 - Q: Does ES2020 have <code>var</code>? Also, is ES2020 a real spec or just a term people are using?</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 27:37 - Q: Have you tried <a href= "https://gqless.dev/">gqless</a>, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code.</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved.</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file?</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects?</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice?</p> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Links_43" name="Links_43"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.imgix.com/">imgIX</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.netlify.com/">Netlify</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://sass-lang.com/">Sass</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="http://lesscss.org/">Less</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://getbootstrap.com/">Bootstrap</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://stylus-lang.com/">Stylus</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://postcss.org/">PostCSS</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://wordpress.org/">WordPress</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.reddit.com/">Reddit</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.staticgen.com/">StaticGen</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://gridsome.org/">Gridsom</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://vuejs.org/">Vue</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://laravel.com/">Laravel</a></li> <li class="has-line-data" data-line-start="57" data-line-end="59"> <a href="https://gohugo.io/">Hugo</a></li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="_SIIIIICK__PIIIICKS__59" name= "_SIIIIICK__PIIIICKS__59"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> Scott: <a href= "https://www.youtube.com/channel/UCYJdpnjuSWVOLgGT9fIzL0g">Jelle’s Marble Runs</a></li> <li class="has-line-data" data-line-start="61" data-line-end="63"> Wes: <a href= "https://www.amazon.ca/Hyundai-HHC2GNK-Vertical-Electric-Compressor/dp/B00ISLYLKI/ref=sr_1_4?keywords=nail%2Bgun%2Bcompressor&qid=1586882118&sr=8-4&th=1">Hyundai HHC2GNK Vertical Style Electric Air Compressor</a></li> </ul> <h2 class="code-line" data-line-start="63" data-line-end="64"> <a id="Shameless_Plugs_63" name="Shameless_Plugs_63"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> 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="65" data-line-end="67"> 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="67" data-line-end="68"> <a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> 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 custom hooks, static site generators, code management, CSS, 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.io 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 04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service.
 10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)?
 16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them.
 18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team?
 23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using?
 27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code.
 29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each?
 33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved.
 38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components?
 42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework?
 46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file?
 51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects?
 55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice?
 Links  imgIX

 Netlify

 Sass

 Less

 Bootstrap

 Stylus

 PostCSS

 WordPress

 Reddit

 StaticGen

 Gridsom

 Vue

 Laravel

 Hugo

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Jelle’s Marble Runs

 Wes: Hyundai HHC2GNK Vertical Style Electric Air Compressor

  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 Part 2 - Magic GQLess × Are classes dead? × Custom Hooks × Staying Up To Date × CSS × More!

Poslechněte si podcast