Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

300th LIVE SHOW SPECTACULAR!

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 the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners.</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="Netlify__Sponsor_12" name="Netlify__Sponsor_12"></a>Netlify - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href= "https://netlify.com/syntax">netlify.com/syntax</a> for more info.</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"> 03:30 - How is this going to work?</p> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Ask a Potluck Question</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Do a Sick Pick</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Take on a Stump’d Question</li> <li class="has-line-data" data-line-start="21" data-line-end="23"> Do a Shameless Plug</li> </ul> <p class="has-line-data" data-line-start="23" data-line-end="24"> 04:45 - Brad</p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://bradgarropy.com/">https://bradgarropy.com/</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Sick Pick: <a href= "https://www.roguefitness.com/bodyweight-gymnastics/body-weight/weight-vests">Rogue Fitness Weighted Vests</a></li> <li class="has-line-data" data-line-start="26" data-line-end="28"> Shameless Plug: <a href= "https://murphy.bradgarropy.com/">Murphy</a></li> </ul> <p class="has-line-data" data-line-start="28" data-line-end="29"> 11:54 - Brittany</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> Shameless Plug: <a href= "https://zerotomastery.io/academy/">ZTM Academy</a></li> <li class="has-line-data" data-line-start="30" data-line-end="32"> <a href= "https://zerotomastery.io/about/instructor/andrei-neagoie/">Andrei Neagoie</a></li> </ul> <p class="has-line-data" data-line-start="32" data-line-end="33"> 16:43 - Jesse</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> Stump’d Question: What are portals in React?</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> Shameless Plug: <a href= "https://www.youtube.com/codestackr">codeSTACKr YouTube Channel</a></li> <li class="has-line-data" data-line-start="35" data-line-end="37"> Shameless Plug: <a href="https://vscodehero.com/">VS Code Hero Course</a> - Use coupon code “Syntax” for discount</li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 23:44 - Henri</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> Shameless Plug: <a href= "https://twitter.com/HenriHelvetica">https://twitter.com/HenriHelvetica</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> Shameless Plug: <a href= "https://twitter.com/JAMstackTORONTO">JamstackTORONTO</a></li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 31:27 - Jason</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="44"> Stump’d Question: What does “use strict” do and what are the benefits?</li> </ul> <p class="has-line-data" data-line-start="44" data-line-end="45"> 36:48 - Spence</p> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.mdx-embed.com/">mdx-embed</a></li> <li class="has-line-data" data-line-start="46" data-line-end="48"> <a href= "https://github.com/PaulieScanlon/mdx-embed">https://github.com/PaulieScanlon/mdx-embed</a></li> </ul> <p class="has-line-data" data-line-start="48" data-line-end="49"> 41:33 - James</p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> Potluck Question: How do you keep people engaged in a workshop?</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators?</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Shameless Plug: <a href= "https://www.youtubefordevelopers.com/">YouTube for Developers</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Shameless Plug: <a href= "https://www.youtube.com/jamesqquick">James Q Quick YouTube Channel</a></li> </ul> <p class="has-line-data" data-line-start="54" data-line-end="55"> 54:24 - Austin</p> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together</li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Shameless Plug: <a href= "https://erickka.art/">https://erickka.art/</a></li> </ul> <p class="has-line-data" data-line-start="58" data-line-end="59"> 66:21 - Dave</p> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Sick Pick: <a href="https://www.mmhmm.app/">mmhmm</a></li> <li class="has-line-data" data-line-start="60" data-line-end="62"> Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS?</li> </ul> <p class="has-line-data" data-line-start="62" data-line-end="63"> 78:56 - Gareth</p> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> Potluck Question: What do you think about the future of mobile development vs traditional mobile app development?</li> <li class="has-line-data" data-line-start="64" data-line-end="65"> Sick Pick: <a href= "https://darkreader.org/">https://darkreader.org/</a></li> <li class="has-line-data" data-line-start="65" data-line-end="67"> Shameless Plug: <a href= "https://discord.com/invite/ccMC6kB">Level Up Tutorials Discord</a></li> </ul> <p class="has-line-data" data-line-start="67" data-line-end="68"> 89:51 - Ackzell and Lewis</p> <ul> <li class="has-line-data" data-line-start="68" data-line-end="71"> Ackzell: <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> Sick Pick: <a href="https://jsconf.mx/">JSConf Mexico</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> Shameless Plug: <a href= "https://www.youtube.com/ackzell">Ackzell YouTube Channel</a></li> </ul> </li> <li class="has-line-data" data-line-start="71" data-line-end="74"> Lewis: <ul> <li class="has-line-data" data-line-start="72" data-line-end="74"> Potluck Question: What is your daily routine like, and you do you decide to prioritize projects?</li> </ul> </li> </ul> <h2 class="code-line" data-line-start="74" data-line-end="75"> <a id="Links_74" name="Links_74"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.twitch.tv/videos/786606195">What Syntax 300 live on Twitch</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://discord.com/">Discord</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://mux.com/">Mux</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.npmjs.com/package/react-hls-player">React HLS Player</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href= "https://30secondsofinterviews.org/">https://30secondsofinterviews.org/</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href= "https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek"> https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href= "https://madewithsvelte.com/mdsvex">https://madewithsvelte.com/mdsvex</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://obsproject.com/">OBS</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://streamlabs.com/">Streamlabs</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://eslint.org/">ESLint</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://prettier.io/">Prettier</a></li> <li class="has-line-data" data-line-start="86" data-line-end="88"> <a href="https://missiveapp.com/">Missive</a></li> </ul> <h2 class="code-line" data-line-start="88" data-line-end="89"> <a id="Shameless_Plugs_88" name="Shameless_Plugs_88"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="89" data-line-end="90"> Scott: <a href="https://www.leveluptutorials.com/pro">Level Up Pro</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="90" data-line-end="92"> 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="92" data-line-end="93"> <a id="Tweet_us_your_tasty_treats_92" name= "Tweet_us_your_tasty_treats_92"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="97" data-line-end="98"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="98" data-line-end="99"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="99" data-line-end="100"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners.
 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”.
 Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
 Show Notes 03:30 - How is this going to work?
  Ask a Potluck Question
 Do a Sick Pick
 Take on a Stump’d Question
 Do a Shameless Plug
  04:45 - Brad
  https://bradgarropy.com/

 Sick Pick: Rogue Fitness Weighted Vests

 Shameless Plug: Murphy

  11:54 - Brittany
  Shameless Plug: ZTM Academy

 Andrei Neagoie

  16:43 - Jesse
  Stump’d Question: What are portals in React?
 Shameless Plug: codeSTACKr YouTube Channel

 Shameless Plug: VS Code Hero Course - Use coupon code “Syntax” for discount
  23:44 - Henri
  Shameless Plug: https://twitter.com/HenriHelvetica

 Shameless Plug: JamstackTORONTO

  31:27 - Jason
  Stump’d Question: What does “use strict” do and what are the benefits?
  36:48 - Spence
  mdx-embed

 https://github.com/PaulieScanlon/mdx-embed

  41:33 - James
  Potluck Question: How do you keep people engaged in a workshop?
 Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators?
 Shameless Plug: YouTube for Developers

 Shameless Plug: James Q Quick YouTube Channel

  54:24 - Austin
  Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together
 Shameless Plug: https://erickka.art/

  66:21 - Dave
  Sick Pick: mmhmm

 Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS?
  78:56 - Gareth
  Potluck Question: What do you think about the future of mobile development vs traditional mobile app development?
 Sick Pick: https://darkreader.org/

 Shameless Plug: Level Up Tutorials Discord

  89:51 - Ackzell and Lewis
  Ackzell:  Sick Pick: JSConf Mexico

 Shameless Plug: Ackzell YouTube Channel

 Lewis:  Potluck Question: What is your daily routine like, and you do you decide to prioritize projects?

  Links  What Syntax 300 live on Twitch

 Discord

 Mux

 React HLS Player

 https://30secondsofinterviews.org/

  https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek

 https://madewithsvelte.com/mdsvex

 OBS

 Streamlabs

 ESLint

 Prettier

 Missive

  Shameless Plugs  Scott: Level Up 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

300th LIVE SHOW SPECTACULAR!

Poslechněte si podcast