Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

76f23d3e-93cd-11ec-abb9-005056011137

Potluck — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × 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 job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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="15" data-line-end="16"> <a id="Cloudinary__Sponsor_15" name= "Cloudinary__Sponsor_15"></a>Cloudinary - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast"> Cloudinary</a> is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.</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"> 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected.</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over!</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem.</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue?</p> <h2 class="code-line" data-line-start="37" data-line-end="38"> <a id="Links_37" name="Links_37"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://snipcart.com/">SnipCart</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href= "https://syntax.fm/show/228/more-on-severless-databases-files-secrets-auth-more"> Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More!</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/FileReader">FileReader API</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://syntax.fm/show/322/the-deno-show">Syntax 322: The Deno Show</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://syntax.fm/show/044/how-to-learn-new-things-quickly">Syntax 044: How To Learn Things Quickly</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.twilio.com/">Twilio</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://postmarkapp.com/">Postmark</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://begin.com/">Begin.com</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.rabbitmq.com/">RabbitMQ</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> <a href= "https://syntax.fm/show/035/keeping-up-with-the-codeashians-dealing-with-our-fast-paced-industry"> Syntax 035: Keeping Up with the Codeashians. Dealing with our fast paced industry.</a></li> </ul> <h2 class="code-line" data-line-start="49" data-line-end="50"> <a id="_SIIIIICK__PIIIICKS__49" name= "_SIIIIICK__PIIIICKS__49"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> Scott: <a href="https://amzn.to/3oqyvyQ">Hario Filter-In Cold Brew Tea Bottle</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Wes: <a href= "https://www.amazon.com/s?k=slnoik+us+led+headlamp&ref=nb_sb_noss">Slonik USB Headlamp</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="Shameless_Plugs_53" name="Shameless_Plugs_53"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> Scott: <a href="https://www.leveluptutorials.com/pro">Testing With Cypress</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="55" data-line-end="57"> Wes: <a href="https://advancedreact.com/">Advanced React</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="57" data-line-end="58"> <a id="Tweet_us_your_tasty_treats_57" name= "Tweet_us_your_tasty_treats_57"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> 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 job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, and more!
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 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.
 Cloudinary - Sponsor  Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
 Show Notes 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected.
 04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions?
 08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee?
 12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over!
 18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this?
 22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it?
 29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new?
 35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem.
 42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue?
 Links  SnipCart

  Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More!

 FileReader API

 Syntax 322: The Deno Show

 Syntax 044: How To Learn Things Quickly

 Twilio

 Postmark

 Begin.com

 RabbitMQ

  Syntax 035: Keeping Up with the Codeashians. Dealing with our fast paced industry.

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Hario Filter-In Cold Brew Tea Bottle

 Wes: Slonik USB Headlamp

  Shameless Plugs  Scott: Testing With Cypress - Sign up for the year and save 25%!
 Wes: Advanced React - 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 — Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More!

Poslechněte si podcast