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

××× 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

31.13 Preaching judgment with tears (Adam Ch'ng)