Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × 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 freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Freshbooks__Sponsor_9" name="Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="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="Vonage__Sponsor_15" name="Vonage__Sponsor_15"></a>Vonage - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at <a href= "https://vonage.dev/syntax">vonage.dev/syntax</a>.</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"> 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work.</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful.</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 28:28 - Why are radio buttons called radio buttons?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible:</p> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Could make me money now</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Help me to hit the ground running when I graduate</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Get me a job easily</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> Make me all kinds of cash</li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> Thoughts?</p> <p class="has-line-data" data-line-start="43" data-line-end="45"> 35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js?<br /> (not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) )</p> <p class="has-line-data" data-line-start="46" data-line-end="47"> 39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing it back into the templates as well?</p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 45:31 - What’s the best way to be able to host personal projects (frontend + backend) for <em>free</em> on the web? I would like something where I can SSH into to install for example Node.js and a database. I already bought a domain, but I don’t want to pay for some premium plan for now since I’m short on money and it’s for personal projects anyway.</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://type-scale.com/">https://type-scale.com</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href= "https://www.leveluptutorials.com/tutorials/modern-css-design-systems"> https://www.leveluptutorials.com/tutorials/modern-css-design-systems</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href= "https://www.npmjs.com/package/soap">https://www.npmjs.com/package/soap</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://vercel.com/">Vercel</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://glitch.com/">Glitch</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://codepen.io/">Codepen</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://codesandbox.io/">Code Sandbox</a></li> <li class="has-line-data" data-line-start="58" data-line-end="60"> <a href="https://pm2.keymetrics.io/">PM2</a></li> </ul> <h2 class="code-line" data-line-start="60" data-line-end="61"> <a id="_SIIIIICK__PIIIICKS__60" name= "_SIIIIICK__PIIIICKS__60"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="61" data-line-end="62"> Scott: <a href="https://amzn.to/3ghvSiD">Wyze Sprinkler Controller</a></li> <li class="has-line-data" data-line-start="62" data-line-end="64"> Wes: <a href="https://amzn.to/3wR4T3a">Retevis</a></li> </ul> <h2 class="code-line" data-line-start="64" data-line-end="65"> <a id="Shameless_Plugs_64" name="Shameless_Plugs_64"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="65" data-line-end="68"> Scott:<br /> 1: <a href="https://forms.gle/PDEpDAGZpNHBDVou5">Become a Level Up Tutorials Author</a><br /> 2: <a href="https://www.leveluptutorials.com/pro">Github Actions with Brian Douglas</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="68" data-line-end="70"> 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="70" data-line-end="71"> <a id="Tweet_us_your_tasty_treats_70" name= "Tweet_us_your_tasty_treats_70"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> 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 freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and more!
 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.
 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.
 Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
 Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”?
 How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience?
 06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work.
 09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful.
 12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish?
 18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use?
 23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this?
 28:28 - Why are radio buttons called radio buttons?
 30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible:
  Could make me money now
 Help me to hit the ground running when I graduate
 Get me a job easily
 Make me all kinds of cash
  Thoughts?
 35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js? (not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) )
 39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing it back into the templates as well?
 45:31 - What’s the best way to be able to host personal projects (frontend + backend) for free on the web? I would like something where I can SSH into to install for example Node.js and a database. I already bought a domain, but I don’t want to pay for some premium plan for now since I’m short on money and it’s for personal projects anyway.
 Links  https://type-scale.com

  https://www.leveluptutorials.com/tutorials/modern-css-design-systems

 https://www.npmjs.com/package/soap

 Vercel

 Glitch

 Codepen

 Code Sandbox

 PM2

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Wyze Sprinkler Controller

 Wes: Retevis

  Shameless Plugs  Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - 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 — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!

Poslechněte si podcast