Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × 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 new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, 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="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"> 00:47 - Roch Tolinski — You guys are doing a downtown job!!!</p> <p class="has-line-data" data-line-start="18" data-line-end="19"> 02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition?</p> <p class="has-line-data" data-line-start="20" data-line-end="21"> 10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro?</p> <p class="has-line-data" data-line-start="22" data-line-end="23"> 13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute.</p> <p class="has-line-data" data-line-start="24" data-line-end="25"> 19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains.</p> <p class="has-line-data" data-line-start="26" data-line-end="27"> 24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I’ve been asking to actually use a language rather than the software but the teacher doesn’t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling “required” courses?</p> <p class="has-line-data" data-line-start="28" data-line-end="29"> 31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don’t have any inside info, but kind of wondering how Scott feels about this and what he’s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version?</p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 35:17 - I’m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients?</p> <p class="has-line-data" data-line-start="32" data-line-end="33"> 39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there’s no “API-only” mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it’s going to be discoverable online. I’d hate to have people find the WordPress API site and think it was my website — or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn’t happen?</p> <p class="has-line-data" data-line-start="34" data-line-end="35"> 42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don’t want to recompile every time.</p> <p class="has-line-data" data-line-start="36" data-line-end="37"> 44:24 - I’ve heard you mention previously that you have used WordPress to host sites in the past. I’m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I’m hoping to learn a bit more about developing for WordPress as it’s a skill I’d like to have in my back pocket, and would love to hear about any resources you would recommend for this.</p> <p class="has-line-data" data-line-start="38" data-line-end="39"> 47:51 - I’ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I’ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I’m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do?</p> <p class="has-line-data" data-line-start="40" data-line-end="41"> 53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved?</p> <h2 class="code-line" data-line-start="42" data-line-end="43"> <a id="Links_42" name="Links_42"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href= "https://isapplesiliconready.com/">https://isapplesiliconready.com/</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href= "https://github.com/ThatGuySam/doesitarm">https://github.com/ThatGuySam/doesitarm</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href= "https://www.electronjs.org/blog/apple-silicon#how-does-it-work">https://www.electronjs.org/blog/apple-silicon#how-does-it-work</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://missiveapp.com/">Missive</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://code.visualstudio.com/">VS Code</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href= "http://www.telestream.net/screenflow/overview.htm">Screenflow</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.figma.com/">Figma</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.sketch.com/">Sketch</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://brew.sh/">Brew</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.mongodb.com/">MongoDB</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://iterm2.com/">iTerm2</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://hyper.is/">Hyper</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href= "https://www.blackmagicdesign.com/products/davinciresolve/">Davinci Resolve</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://remix.run/">https://remix.run/</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://reactrouter.com/">React Router</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://expressionengine.com/">ExpressionEngine</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.keystonejs.com/">Keystone.js</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.advancedcustomfields.com/">Advanced Custom Fields</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href= "https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://sapper.svelte.dev/">Sapper</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://svelte.dev/">Svelte</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href= "https://svelte.dev/blog/whats-the-deal-with-sveltekit">https://svelte.dev/blog/whats-the-deal-with-sveltekit</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://rollupjs.org/">Rollup</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href= "https://www.snowpack.dev/">https://www.snowpack.dev/</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.udemy.com/">Udemy</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://laravel.com/">Laravel</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys"> https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://vercel.com/">Vercel</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://www.netlify.com/">Netlify</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://syntax.fm/show/297/hasty-treat-certifications-government-specified-javascript-skills"> Syntax 297: Hasty Treat - Certifications? Government Specified JavaScript Skills?</a></li> <li class="has-line-data" data-line-start="73" data-line-end="75"> <a href="https://abookapart.com/products/design-is-a-job">Design is a Job by Mike Monteiro</a></li> </ul> <h2 class="code-line" data-line-start="75" data-line-end="76"> <a id="_SIIIIICK__PIIIICKS__75" name= "_SIIIIICK__PIIIICKS__75"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="76" data-line-end="79"> Scott: <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> 1: <a href= "https://podcasts.apple.com/us/podcast/chameleon-hollywood-con-queen/id1532225667">Chameleon: Hollywood Con Queen</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> 2: <a href= "https://podcasts.apple.com/us/podcast/q-clearance-the-hunt-for-qanon/id1534027012">Q Clearance: The Hunt for QAnon</a></li> </ul> </li> <li class="has-line-data" data-line-start="79" data-line-end="81"> Wes: <a href="https://trulocalusa.com/">truLOCAL</a></li> </ul> <h2 class="code-line" data-line-start="81" data-line-end="82"> <a id="Shameless_Plugs_81" name="Shameless_Plugs_81"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="82" data-line-end="83"> Scott: <a href="https://www.leveluptutorials.com/pro">Deno 101 For Web Developers</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="83" data-line-end="85"> 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="85" data-line-end="86"> <a id="Tweet_us_your_tasty_treats_85" name= "Tweet_us_your_tasty_treats_85"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> 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 new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, 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.
 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 00:47 - Roch Tolinski — You guys are doing a downtown job!!!
 02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition?
 10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro?
 13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute.
 19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains.
 24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I’ve been asking to actually use a language rather than the software but the teacher doesn’t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling “required” courses?
 31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don’t have any inside info, but kind of wondering how Scott feels about this and what he’s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version?
 35:17 - I’m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients?
 39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there’s no “API-only” mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it’s going to be discoverable online. I’d hate to have people find the WordPress API site and think it was my website — or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn’t happen?
 42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don’t want to recompile every time.
 44:24 - I’ve heard you mention previously that you have used WordPress to host sites in the past. I’m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I’m hoping to learn a bit more about developing for WordPress as it’s a skill I’d like to have in my back pocket, and would love to hear about any resources you would recommend for this.
 47:51 - I’ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I’ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I’m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do?
 53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved?
 Links  https://isapplesiliconready.com/

 https://github.com/ThatGuySam/doesitarm

 https://www.electronjs.org/blog/apple-silicon#how-does-it-work

 Missive

 VS Code

 Screenflow

 Figma

 Sketch

 Brew

 MongoDB

 iTerm2

 Hyper

 Davinci Resolve

 https://remix.run/

 React Router

 ExpressionEngine

 Keystone.js

 Advanced Custom Fields

 Dreamweaver

 Sapper

 Svelte

 https://svelte.dev/blog/whats-the-deal-with-sveltekit

 Rollup

 https://www.snowpack.dev/

 Udemy

 Laravel

  https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys

 Vercel

 Netlify

  Syntax 297: Hasty Treat - Certifications? Government Specified JavaScript Skills?

 Design is a Job by Mike Monteiro

  ××× SIIIIICK ××× PIIIICKS ×××  Scott:  1: Chameleon: Hollywood Con Queen

 2: Q Clearance: The Hunt for QAnon

 Wes: truLOCAL

  Shameless Plugs  Scott: Deno 101 For Web Developers - 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 — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!

Poslechněte si podcast