Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Troubleshooting

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="code-line" data-line="7">In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code.</p> <h2 id="logrocket---sponsor" class="code-line" data-line="9"> LogRocket - Sponsor</h2> <p class="code-line" data-line="11">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 title= "https://logrocket.com/syntax" href="https://logrocket.com/syntax" data-href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 id="freshbooks---sponsor" class="code-line" data-line="13"> Freshbooks - Sponsor</h2> <p class="code-line" data-line="15">Get a 30 day free trial of Freshbooks at <a title="https://freshbooks.com/syntax" href= "https://freshbooks.com/syntax" data-href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the "How did you hear about us?" section.</p> <h2 id="mux---sponsor" class="code-line" data-line="17">Mux - Sponsor</h2> <p class="code-line" data-line="19">Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit <a title="https://mux.com/syntax" href= "https://mux.com/syntax" data-href= "https://mux.com/syntax">mux.com/syntax</a>.</p> <h2 id="show-notes" class="code-line" data-line="21">Show Notes</h2> <ul class="code-line" data-line="23"> <li class="code-line" data-line="23"><strong><a title="#t=01:13" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=01:13" data-href="#t=01:13">01:13</a></strong> Furniture shortages</li> <li class="code-line" data-line="24"><strong><a title="#t=02:29" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=02:29" data-href="#t=02:29">02:29</a></strong> Managing stuff</li> <li class="code-line" data-line="25"><strong><a title="#t=03:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=03:05" data-href="#t=03:05">03:05</a></strong> Basic troubleshooting skills are missing</li> <li class="code-line" data-line="26"><strong><a title="#t=06:09" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=06:09" data-href="#t=06:09">06:09</a></strong> Sanity check</li> <li class="code-line" data-line="27"><a title="https://codepen.io/" href="https://codepen.io/" data-href= "https://codepen.io/">CodePen</a></li> <li class="code-line" data-line="28"><a title= "https://codesandbox.io" href="https://codesandbox.io/" data-href= "https://codesandbox.io">Codesandbox</a></li> <li class="code-line" data-line="29"><strong><a title="#t=08:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=08:05" data-href="#t=08:05">08:05</a></strong> Isolate the issue</li> <li class="code-line" data-line="30"><strong><a title="#t=08:57" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=08:57" data-href="#t=08:57">08:57</a></strong> Commenting out code is free</li> <li class="code-line" data-line="31"><strong><a title="#t=12:17" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=12:17" data-href="#t=12:17">12:17</a></strong> Replicate the issue</li> <li class="code-line" data-line="32"><strong><a title="#t=15:07" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=15:07" data-href="#t=15:07">15:07</a></strong> Svelte and VS Code error</li> <li class="code-line" data-line="33"><a title="https://svelte.dev" href="https://svelte.dev/" data-href= "https://svelte.dev">Svelte</a></li> <li class="code-line" data-line="34"><a title= "https://code.visualstudio.com" href= "https://code.visualstudio.com/" data-href= "https://code.visualstudio.com">VS Code</a></li> <li class="code-line" data-line="35"><strong><a title="#t=17:02" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=17:02" data-href="#t=17:02">17:02</a></strong> Wes' course upgrades</li> <li class="code-line" data-line="36"><a title= "https://parceljs.org/blog/v2/" href= "https://parceljs.org/blog/v2/" data-href= "https://parceljs.org/blog/v2/">Parcel 2</a></li> <li class="code-line" data-line="37"><a title= "https://www.npmjs.com/package/patch-package" href= "https://www.npmjs.com/package/patch-package" data-href= "https://www.npmjs.com/package/patch-package">Patch package</a></li> <li class="code-line" data-line="38"><strong><a title="#t=18:07" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=18:07" data-href="#t=18:07">18:07</a></strong> Sponsor: Logrocket</li> <li class="code-line" data-line="39"><strong><a title="#t=19:15" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=19:15" data-href="#t=19:15">19:15</a></strong> Rollback</li> <li class="code-line" data-line="40"><strong><a title="#t=20:30" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=20:30" data-href="#t=20:30">20:30</a></strong> Reading the error message</li> <li class="code-line" data-line="41"><a title= "https://syntax.fm/show/047/how-to-get-better-at-debugging" href= "https://syntax.fm/show/047/how-to-get-better-at-debugging" data-href= "https://syntax.fm/show/047/how-to-get-better-at-debugging">Syntax 47 - How to Get Better at Debugging</a></li> <li class="code-line" data-line="42"><a title= "https://syntax.fm/show/152/debugging-tools-tips" href= "https://syntax.fm/show/152/debugging-tools-tips" data-href= "https://syntax.fm/show/152/debugging-tools-tips">Syntax 152 - Debugging Tools</a></li> <li class="code-line" data-line="43"><strong><a title="#t=23:59" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=23:59" data-href="#t=23:59">23:59</a></strong> Crack open the node modules directory</li> <li class="code-line" data-line="44"><strong><a title="#t=26:06" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=26:06" data-href="#t=26:06">26:06</a></strong> Sponsor: Freshbooks</li> <li class="code-line" data-line="45"><strong><a title="#t=27:29" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=27:29" data-href="#t=27:29">27:29</a></strong> Write step by step comments to the code</li> <li class="code-line" data-line="46"><strong><a title="#t=29:01" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=29:01" data-href="#t=29:01">29:01</a></strong> Consider outside sources</li> <li class="code-line" data-line="47"><strong><a title="#t=30:56" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=30:56" data-href="#t=30:56">30:56</a></strong> Using the right tools for the job</li> <li class="code-line" data-line="48"><strong><a title="#t=33:19" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=33:19" data-href="#t=33:19">33:19</a></strong> Rubber ducking it</li> <li class="code-line" data-line="49"><strong><a title="#t=34:16" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=34:16" data-href="#t=34:16">34:16</a></strong> Wes' Big Mouth Bass story</li> <li class="code-line" data-line="50"><strong><a title="#t=37:20" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=37:20" data-href="#t=37:20">37:20</a></strong> Scott's blown away by his leaf blower</li> <li class="code-line" data-line="51"><strong><a title="#t=39:56" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=39:56" data-href="#t=39:56">39:56</a></strong> Copy paste a message into Google</li> <li class="code-line" data-line="52"><a title= "https://twitter.com/syntaxfm/status/1457736861976252416" href= "https://twitter.com/syntaxfm/status/1457736861976252416" data-href="https://twitter.com/syntaxfm/status/1457736861976252416"> Twitter - What are your tips for troubleshooting code or a system that doesn't work?</a></li> <li class="code-line" data-line="53"><strong><a title="#t=41:33" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=41:33" data-href="#t=41:33">41:33</a></strong> Logs and metrics</li> <li class="code-line" data-line="54"><strong><a title="#t=42:36" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=42:36" data-href="#t=42:36">42:36</a></strong> CI CD issues and Error Handler</li> <li class="code-line" data-line="55"><strong><a title="#t=43:41" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=43:41" data-href="#t=43:41">43:41</a></strong> Using a step debugger</li> <li class="code-line" data-line="56"><strong><a title="#t=44:24" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=44:24" data-href="#t=44:24">44:24</a></strong> Explain what's happening to someone else</li> <li class="code-line" data-line="57"><strong><a title="#t=45:31" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=45:31" data-href="#t=45:31">45:31</a></strong> Read the documentation</li> <li class="code-line" data-line="58"><strong><a title="#t=47:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=47:05" data-href="#t=47:05">47:05</a></strong> Take a break, have a cuppa</li> <li class="code-line" data-line="59"><strong><a title="#t=48:42" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=48:42" data-href="#t=48:42">48:42</a></strong> Sponsor: Mux</li> <li class="code-line" data-line="60"><strong><a title="#t=50:57" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=50:57" data-href="#t=50:57">50:57</a></strong> SIIIIICK PIIICKS</li> <li class="code-line" data-line="61"><strong><a title="#t=57:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/408%20-%20troubleshooting.md#t=57:05" data-href="#t=57:05">57:05</a></strong> Shamless plugs</li> </ul> <h2 id="links" class="code-line" data-line="63">Links</h2> <ul class="code-line" data-line="65"> <li class="code-line" data-line="65"><a title= "https://twitter.com/jimbomoso/status/1450473674709127174" href= "https://twitter.com/jimbomoso/status/1450473674709127174" data-href= "https://twitter.com/jimbomoso/status/1450473674709127174">@jimbomoso - Do you know of any resources for developing/improving code trouble shooting?</a></li> </ul> <h2 id= "%C3%97%C3%97%C3%97-siiiiick-%C3%97%C3%97%C3%97-piiiicks-%C3%97%C3%97%C3%97" class="code-line" data-line="67">××× SIIIIICK ××× PIIIICKS ×××</h2> <ul class="code-line" data-line="69"> <li class="code-line" data-line="69">Scott: <a title= "https://goodsnooze.gumroad.com/l/nASbe" href= "https://goodsnooze.gumroad.com/l/nASbe" data-href= "https://goodsnooze.gumroad.com/l/nASbe">Forehead</a></li> <li class="code-line" data-line="70">Wes: <a title= "https://www.kickstarter.com/projects/e-fusion/ego-exinno-240w-120w-the-king-of-charger?ref=9geph8" href= "https://www.kickstarter.com/projects/e-fusion/ego-exinno-240w-120w-the-king-of-charger?ref=9geph8" data-href= "https://www.kickstarter.com/projects/e-fusion/ego-exinno-240w-120w-the-king-of-charger?ref=9geph8">EGO EXINNO 240W/120W Chargers</a></li> </ul> <h2 id="shameless-plugs" class="code-line" data-line="72">Shameless Plugs</h2> <ul class="code-line" data-line="74"> <li class="code-line" data-line="74">Scott: <a title= "https://www.leveluptutorials.com/pro" href= "https://www.leveluptutorials.com/pro" data-href= "https://www.leveluptutorials.com/pro">Astro Course</a> - Sign up for the year and save 25%!</li> <li class="code-line" data-line="75">Wes: <a title= "https://wesbos.com/courses/" href="https://wesbos.com/courses/" data-href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code 'Syntax' for $10 off!</li> </ul> <h2 id="tweet-us-your-tasty-treats" class="code-line" data-line= "77">Tweet us your tasty treats</h2> <ul class="code-line" data-line="79"> <li class="code-line" data-line="79"><a title= "https://www.instagram.com/stolinski/" href= "https://www.instagram.com/stolinski/" data-href= "https://www.instagram.com/stolinski/">Scott's Instagram</a></li> <li class="code-line" data-line="80"><a title= "https://www.instagram.com/LevelUpTutorials/" href= "https://www.instagram.com/LevelUpTutorials/" data-href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="code-line" data-line="81"><a title= "https://www.instagram.com/wesbos/" href= "https://www.instagram.com/wesbos/" data-href= "https://www.instagram.com/wesbos/">Wes' Instagram</a></li> <li class="code-line" data-line="82"><a title= "https://twitter.com/wesbos" href="https://twitter.com/wesbos" data-href="https://twitter.com/wesbos">Wes' Twitter</a></li> <li class="code-line" data-line="83"><a title= "https://www.facebook.com/wesbos.developer" href= "https://www.facebook.com/wesbos.developer" data-href= "https://www.facebook.com/wesbos.developer">Wes' Facebook</a></li> <li class="code-line" data-line="84"><a title= "https://twitter.com/stolinski" href= "https://twitter.com/stolinski" data-href= "https://twitter.com/stolinski">Scott's Twitter</a></li> <li class="code-line" data-line="85">Make sure to include <a title="https://twitter.com/SyntaxFM" href= "https://twitter.com/SyntaxFM" data-href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code.
 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.
 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.
 Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax.
 Show Notes 
01:13 Furniture shortages

02:29 Managing stuff

03:05 Basic troubleshooting skills are missing

06:09 Sanity check
 CodePen
 Codesandbox

08:05 Isolate the issue

08:57 Commenting out code is free

12:17 Replicate the issue

15:07 Svelte and VS Code error
 Svelte
 VS Code

17:02 Wes' course upgrades
 Parcel 2
 Patch package

18:07 Sponsor: Logrocket

19:15 Rollback

20:30 Reading the error message
 Syntax 47 - How to Get Better at Debugging
 Syntax 152 - Debugging Tools

23:59 Crack open the node modules directory

26:06 Sponsor: Freshbooks

27:29 Write step by step comments to the code

29:01 Consider outside sources

30:56 Using the right tools for the job

33:19 Rubber ducking it

34:16 Wes' Big Mouth Bass story

37:20 Scott's blown away by his leaf blower

39:56 Copy paste a message into Google
 Twitter - What are your tips for troubleshooting code or a system that doesn't work?

41:33 Logs and metrics

42:36 CI CD issues and Error Handler

43:41 Using a step debugger

44:24 Explain what's happening to someone else

45:31 Read the documentation

47:05 Take a break, have a cuppa

48:42 Sponsor: Mux

50:57 SIIIIICK PIIICKS

57:05 Shamless plugs
 Links @jimbomoso - Do you know of any resources for developing/improving code trouble shooting?
 ××× SIIIIICK ××× PIIIICKS ××× Scott: Forehead

 Wes: EGO EXINNO 240W/120W Chargers

 Shameless Plugs Scott: Astro Course - 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

Troubleshooting

Poslechněte si podcast