Episode Details

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

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