Playing: 198: How To Get Better At Problem Solving
Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components
Potluck - Tabs are better? × Coding Music × SEO × Is Angular good? × Biggie Smalls × Soy Sauce × More!
Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!
Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!
Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
Nov 20th, 2019
How To Get Better At Problem Solving👇 Download Show✏️ Edit Show Notes
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.
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
- 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
- Syntax 154: SVGs with Sara Soueidan
- Syntax 152: Debugging Tools + Tips
- Ryan Dahl on creating Node.js
××× SIIIIICK ××× PIIIICKS ×××
- Scott: Typescript in React Course - Sign up for the year and save 25%!