Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Potluck — Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × 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 blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</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"> 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in <a href= "https://www.markdownguide.org/">markdown</a>, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website.</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your <a href= "https://code.visualstudio.com/">VS Code</a> windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 18:18 - With official support of <a href= "https://en.wikipedia.org/wiki/Internet_Explorer_11">IE11</a> coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 07:20 - Thanks for an awesome podcast! Have you looked into <a href="https://nestjs.com/">Nest.js</a> (not to be confused with <a href="https://nextjs.org/">Next.js</a>) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 22:48 - Do you think it’s worth learning <a href= "https://wordpress.org/">WordPress</a> for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money.</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 36:52 - Do you guys ever see your premium courses pirated on sites like <a href="https://www.udemy.com/">Udemy</a>, <a href= "https://www.skillshare.com/">Skillshare</a>, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 39:53 - Looking at <a href="http://uses.tech/">uses.tech</a> and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it?</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys!</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work.</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice?</p> <h2 class="code-line" data-line-start="41" data-line-end="42"> <a id="Links_41" name="Links_41"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://www.fastify.io/">Fastify</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://redwoodjs.com/">RedwoodJS</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.keystonejs.com/">Keystone.js</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://10up.com/">10up</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://vitejs.dev/">Vite</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href= "https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac"> Safari + Dev tools</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://browsersync.io/">Browsersync</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="http://localtunnel.github.io/www/">localtunnel</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://ngrok.com/">ngrok</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://developer.apple.com/library/archive/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSSimulator/GettingStartedwithiOSSimulator.html"> Xcode simulator</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.birbigs.com/">Mike Birbiglia</a></li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href= "https://www.youtube.com/channel/UC7iJhl4CsLxzKUWfAw69Qkg">Brian Douglas YouTube Channel</a></li> </ul> <h2 class="code-line" data-line-start="55" data-line-end="56"> <a id="_SIIIIICK__PIIIICKS__55" name= "_SIIIIICK__PIIIICKS__55"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> Scott: <a href="https://amzn.to/3moAF2A">3 in 1 Multi USB Charging Cable</a></li> <li class="has-line-data" data-line-start="57" data-line-end="59"> Wes: <a href= "https://www.amazon.com/s?k=milk+frother&ref=nb_sb_noss_1">Milk Frother</a></li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="Shameless_Plugs_59" name="Shameless_Plugs_59"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="63"> 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="63" data-line-end="65"> 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="65" data-line-end="66"> <a id="Tweet_us_your_tasty_treats_65" name= "Tweet_us_your_tasty_treats_65"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> 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 blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building.edu websites, transitioning to full-time freelance work, and more!
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 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 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website.
 05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line?
 18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support?
 07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular
 22:48 - Do you think it’s worth learning WordPress for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money.
 30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch?
 36:52 - Do you guys ever see your premium courses pirated on sites like Udemy, Skillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this?
 39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it?
 42:57 - Have you ever developed a.edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys!
 50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work.
 54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice?
 Links  Fastify

 RedwoodJS

 Keystone.js

 10up

 Vite

  Safari + Dev tools

 Browsersync

 localtunnel

 ngrok

  Xcode simulator

 Mike Birbiglia

 Brian Douglas YouTube Channel

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: 3 in 1 Multi USB Charging Cable

 Wes: Milk Frother

  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 — Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × More!

Poslechněte si podcast