In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer.

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.

Prismic - Sponsor

Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax.

Show Notes

2:43 - Gather info

• What is this thing trying to do?
• Use tools
• DevTools are your best friend during this phase

8:01 - Know where to look (and use tools)

• Dev tools for client side
• Error logs
• Sentry

LogRocket

The most experienced people in any field know how to ask the right questions.

Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve.

10:00 - Look at the end game

• What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture.

13:17 - Read Again

• Error logs provide the best clues. Read them closely.
• Actually read your code — don’t skim it.
• Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts.

18:08 - Make it simple (break it into smaller parts)

• Limit the number of inputs and outputs
• Get it working in a limited capacity (e.g. safe mode, Codepen, etc.)
• Comment out major sections of code until you have a working example
• Does this problem exist outside of the framework?
• Does this work in a clean environment?

25:35 - Take yourself out of your environment

• You should be able to take a look at the problem at all zoom levels
• Does it work locally but not on the server?
• Does it work in other browsers?

27:32 - Stay calm

• It’s easy to get nervous or worked up when the stakes are high
• It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath
• Take a shower, lift weights (seriously)

30:14 - Talk it over

• Getting the perspective of another developer can be invaluable

32:28 - Make things obvious

• Use debugger or label logs — don’t let it be ambiguous
• For CSS bugs, use primary colors to make things stand out
• Use the right tool to make the problem stand out
  • Layers for CSS issues
  • Network for network issues
  • Performance tab (etc.)

35:12 - Use Git correctly to free up your techniques

• If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix.

36:10 - Don’t jump at solutions

• Take the time to fully dissect the problem
• Question you assumptions
• It can’t possibly be a problem with ____. Well maybe it is.
  • Wes once spent hours trying to diagnose a check engine light when the gas cap was lose.

43:51 - Get good at pattern matching

• This comes with experience
• When did this problem start?
• Did we deploy any code? Did we change any logic?

44:54 - Get good at googling

• Being able to describe your problem is key.
• Search the error from Firefox

Links

• DevTools

Sentry

LogRocket

CodePen

Syntax 154: SVGs with Sara Soueidan

@walpolea

Syntax 152: Debugging Tools + Tips

@bowlendev

@dan_abramov

Ryan Dahl on creating Node.js

@LaurieonTech

Firefox

DuckDuckGo

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Jeremy Ethier Youtube Channel

Wes: Marpac Rohm Sound Machine

Shameless Plugs

• Scott: Typescript in React Course - Sign up for the year and save 25%!
• Wes: Beginner Javascript Course

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