Logo
    Search

    debugging

    Explore "debugging" with insightful episodes like "Debugging Kubernetes: Part 1 - Introduction and Core Concepts", "Java Algorithms: Copying List with Random Pointer (LeetCode)", "Logging", "Code Styles: Readable Rules and Petty Preferences" and "Meta Tags" from podcasts like ""Programming Tech Brief By HackerNoon", "Programming Tech Brief By HackerNoon", "Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

    Episodes (15)

    Debugging Kubernetes: Part 1 - Introduction and Core Concepts

    Debugging Kubernetes: Part 1 - Introduction and Core Concepts

    This story was originally published on HackerNoon at: https://hackernoon.com/debugging-kubernetes-part-1-introduction-and-core-concepts.
    In this first part of our Kubernetes debugging series we take an in-depth view of the underlying technologies from containers to orchestration.
    Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #kubernetes, #kubernetes-explained, #debugging, #debugging-tutorial, #k8s, #kubernetes-guide, #why-kubernetes, #software-engineering, and more.

    This story was written by: @shai.almog. Learn more about this writer by checking @shai.almog's about page, and for more stories, please visit hackernoon.com.

    In this first part of our Kubernetes debugging series we take an in-depth view of the underlying technologies from containers to orchestration.

    Java Algorithms: Copying List with Random Pointer (LeetCode)

    Java Algorithms: Copying List with Random Pointer (LeetCode)

    This story was originally published on HackerNoon at: https://hackernoon.com/java-algorithms-copying-list-with-random-pointer-leetcode.
    A linked list of length n is given such that each node contains an additional random pointer, which could point to any node in the list, or null.
    Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #programming, #java-programming, #leetcode, #linked-lists, #programming-tips, #coding, #coding-challenge, #debugging, #hackernoon-es, and more.

    This story was written by: @rakhmedovrs. Learn more about this writer by checking @rakhmedovrs's about page, and for more stories, please visit hackernoon.com.

    Let’s start from solving the first subproblem. Let’s do simple thing iterate through linked list and create a copy for every node in it. I choose HashMap for storing pairs like old node -> new node. As long as we’re going to iterate from head of the list to tail let’s also introduce temp variable and set it to be the head of the list.

    Logging

    Logging

    In this Hasty Treat, Scott and Wes talk about the reasons why you should log errors, how it’s not just for debugging, where to save logs, and apps and packages to help with logging.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    Tweet us your tasty treats

    Code Styles: Readable Rules and Petty Preferences

    Code Styles: Readable Rules and Petty Preferences

    In this episode of Syntax, Wes and Scott talk about their preferred coding styles and preferences they use, and why.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    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

    Show Notes

    • 00:11 Welcome
    • 02:35 Function definition
    • 06:43 File path aliases
    • 09:36 Implicit vs Explicit Return
    • 13:49 Array.reduce() VS literally anything else
    • 17:37 Loop vs array method
    • 22:55 Sponsor: Linode
    • 23:37 Updating vs creating a new var
    • 30:36 Iterable to Array
    • 34:46 Sponsor: LogRocket
    • 36:16 Destructuring vs Object.property
    • 39:22 Destructuring Arrays vs Reference by index
    • 41:40 Number(string) vs +string
    • 43:35 Incrementing
    • 45:06 Multiple ifs
    • 47:48 Multiple ifs vs switch vs Ternary
    • 51:05 Promises / Error Catching
    • 53:50 if(falsy) block VS return false;
    • 55:51 Sponsor: Freshbooks
    • 56:26 Spaces vs tabs
    • 58:39 Trailing commas
    • 00:40 Semicolons
    • 02:49 SIIIIICK ××× PIIIICKS ×××

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Meta Tags

    Meta Tags

    In this Hasty Treat, Wes and Scott talk about Meta Tags.

    Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Show Notes

    Tweet us your tasty treats

    Troubleshooting

    Troubleshooting

    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

    ××× SIIIIICK ××× PIIIICKS ×××

    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

    Hasty Treat - Vite + Parcel 2

    Hasty Treat - Vite + Parcel 2

    In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.

    Prismic - Sponsor

    Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

    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.

    Show Notes

    03:08 - Next Gen Bundlers are here!

    • They are easy
    • They are fast
    • They are bundlers
    • They are code splitters
    • They are dev environments
    • HMR / Fast Refresh

    07:13 - What do they use under the hood?

    • Parcel uses SWC (Rust)
    • Vite uses esbuild (Go)

    10:29 - How do you use them?

    1. Usually point your app at an HTML file
    2. Your HTML file has an ES module
    3. It then goes and loads everything from there
    4. They have adaptors for different types of files
      • CSS
      • Images
      • Etc.
    • You can also point it directly at files

    14:59 - Common use-cases

    • React / JSX
      • OOTB
    • Vue
    • Svelte
    • TypeScript
      • Both just work
    • Custom Babel config
      • Plugins for both
    • Sass
      • Vite: Detects it, asks to install it
      • Parcel: Detects it, installs it for you
    • PostCSS Processors

    20:29 - Custom API

    • Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
    • Example use-case: a really nice WordPress dev package.

    20:57 - Which one?

    • Both are really good!
    • Parcel 2 has been in dev for 2+ years - unsure when it will launch.
    • Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
    • Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
    • Life is good!

    Links

    Tweet us your tasty treats!

    Dev Tools Power — Elements Tab

    Dev Tools Power — Elements Tab

    In this episode of Syntax, Scott and Wes talk about the Dev Tools Elements Tab — all the features, and when you would use them!

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    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

    03:13 - Elements

    • Learn to open the Elements panel and the console right away — right-click inspect element is weak!
    • Drag-and-drop elements
    • Edit as HTML
    • Click to select use in JS console
      • $0 →
    • Add Attribute
    • Breadcrumbs
    • Flex (Chrome now!)
    • Break on → Node removal
    • Scroll into view
    • Expand / Collapse

    16:59 - Styles

    • :hov
    • .cls
    • Element style
    • Layout - Box Model
    • Layout - Grid
    • Layout - Flexbox
    • Toggle Print/Light/Dark

    25:03 - Panel

    • Escape to open close
    • No longer has to be JUST Console
    • Computed Styles
      • Great to find out what value it’s actually using without scrolling through the cascade
      • Toggle browser styles on and off
    • Fonts Tab
      • Super handy to find the used font, spacing, size, weight, etc.
      • You can also see all fonts used on a page
    • Animations Tab
    • Changes
      • Shows the CSS that has changed since you have been goofing around.

    38:18 - Settings

    43:39 - Compatibility

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: Svelte Kit - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!

    Tweet us your tasty treats!

    Hasty Treat - VSCode Extensions and Tips

    Hasty Treat - VSCode Extensions and Tips

    In this Hasty Treat, Scott and Wes talk about their favorite VSCode extensions, tips, and workflows!

    .TECH - Sponsor

    .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.

    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.

    Show Notes

    04:05 - Easy Snippet

    05:33 - Add Missing Function Declaration

    07:30 - Error Lens

    09:08 - Declare Missing Members

    10:29 - ES7 React/Redux/GraphQL/React-Native Snippets

    11:59 - File Utils:

    13:59 - GitLens — Git supercharged

    15:15 - ES6-String-HTML

    16:41 - Wrap Console Log Simple

    17:18 - Text Pastry

    19:14 - Better Comments

    20:14 - Tip: Use Emmet everywhere

    Tweet us your tasty treats!

    Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

    Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

    It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more!

    Sanity - Sponsor

    Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow.

    03:20 - Which JS library/framework do you think beginners might find the easiest to understand?

    05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere?

    09:23 - My question is about the difference between a framework and a library. Should we have two separate words?

    12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas.

    17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library?

    21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects?

    29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored?

    35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something?

    38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website?

    40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER.

    47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.comtenant2.domain.com, etc.)

    48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev?

    50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)?

    54:20 - What’s your approach for handling padding + margin with components?

    57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do?

    59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    • Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%!
    • Wes: Master Gatsby - Black Friday Sale: All courses 50% off!

    Tweet us your tasty treats!

    How To Get Better At Problem Solving

    How To Get Better At Problem Solving

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

    Shameless Plugs

    Tweet us your tasty treats!

    Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!

    Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!

    It’s another potluck! In this episode, Scott and Wes answer your questions about Gatsby vs Next, Google Home and privacy, flat file CMS, working with designers, CSS frameworks and more!

    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.

    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.

    Show Notes

    6:15 - Q: Curious if you would ever consider running your course platform on Gatsby instead of NextJs? If not, what dynamic content would prevent you from doing so?

    10:48 - Q: What’s the difference between a software developer and a software engineer, in your opinion?

    13:11 - Q: How do you deal with designers who design without any thought about how dev will implement it?

    15:46 - Q: I saw that Wes has an example in one of his slides where the Array prototype is written onto the Nodelist prototype. Is this safe enough for production as it overrides all regular NodeList behavior?

    19:18 - Q: In a potluck episode you mentioned that you do not host your clients’ website. If you don’t host you clients’ website how do you usually go about handling clients that are less tech savvy? Or do you avoid those types of clients?

    21:30 - Q: I know you guys (especially Wes) have been pretty insistent recently on not hosting clients’ sites yourself, but what do you guys think about continuously hosting client sites with a service like Netlify? It’s highly unlikely to go down and scales all for you, so it might be a bit of reoccurring income if you bill them yearly for the minimal Netlify fees.

    24:44 - Q: I was listening to your episode on “The Smart Home” and I’m very interested in buying a Google Home Mini myself. However, I cannot stop thinking about the privacy implications of an always listening device around the house. What are your thoughts on this topic and on privacy related to online services in general?

    29:08 - Q: What are your thoughts about using a CMS that uses flat files vs one that uses a traditional MySQL or Postgres database for a company blog that won’t have insane traffic? We’re currently evaluating Grav CMS and Craft CMS.

    32:17 - Q: Have you used data attributes as custom elements in CSS and JS?

    37:32 - Q: Why do so many people jump on styled-components/CSS in JS? Are these all people who have never used Sass/SCSS?! It seems like such a PITA to get Sass working with either of these. It feels like coding tables vs HTML 5. To me it seems like a step backwards.

    44:26 - Q: When do you, if ever, reach for a component library, like Material or Bootstrap? Currently working a corporate job where it’s almost expected to use one of these for all internal applications. I usually prefer to make my own, but I’m wondering if I’m just making my life more difficult than it needs to be? Any advice?

    48:30 - Q: Could you guys chat about Git clients and which ones you guys use and why? Or are you guys hardcore terminal geeks?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Debugging Tools + Tips

    Debugging Tools + Tips

    In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible.

    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/syntaxfor more info.

    Freshbooks - Sponsor

    Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section.

    Show Notes

    1:41 - Tools

    21:49 - Network requests

    • Doesn’t take place in your site/dom, so might not always have all info in your console, debugger
    • Network tab in dev tools shows you all requests going in and out of your app
    • Filters by type, sees length in request
    • Sees headers, responses and more
    • Failed requests will be red

    26:50 - Debugging mindset

    • Check different browsers
    • Check the docs/examples
    • Isolate when possible
    • “What has changed?”
    • Get minimal working code
    • Rubber Duck Debug
    • Step back and re-think

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Hasty Treat - Bike Shedding

    Hasty Treat - Bike Shedding

    In this Hasty Treat, Scott and Wes talk about bike shedding - issues that are hotly debated, but may not matter that much in the long run.

    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 https://logrocket.com/syntax.

    Show Notes

    3:03 - What is Bike Shedding?

    • Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bike shed while the house is not finished.

    4:39 - Tabs vs spaces

    • Two spaces

    5:50 - Single vs double quotes

    • Single in JS, double in HTML

    7:05 - Semicolons or not

    • Semicolons

    9:01 - Grouping/ordering CSS properties

    • Wes: Format
    • Scott: Alphabetical

    12:35 - var vs let vs const

    • Scott: const for life — let when needed
    • Wes: const by default — change to let when needed

    14:24 - Default vs named exports

    • Use both
    • Mix-n-match

    15:58 - Should designers code?

    • If interested, sure

    17:58 - Which front-end framework

    • Whichever one best suits your needs

    19:30 - Vim/Emacs vs Atom/VS Code/Sublime

    • VS Code

    21:53 - Small perf wins

    • Micro optimization often aren’t needed

    25:14 - Browser support

    • If you’re required to support it, then support it

    25:47 - Block formatting

    • Function block
    • Else on a new line vs else after block

    29:07 - Trailing comma

    Links

    Tweet us your tasty treats!

    How to Get Better at Debugging

    How to Get Better at Debugging

    Scott and Wes detail the tips and tools you need to get better at debugging.

    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.

    Coffeecup’s CSS Grid Builder Tool

    Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

    Show Notes

    4:00

    • Read the stack trace

    7:35

    • Make sure you aren’t debugging production
    • Make sure you’re not cached

    8:40

    • Check the network panel for the whole response
    • CORS (Cross-Origin Resource Sharing)

    12:04

    • Use debugger commands in the browser
    • Set breakpoints (race conditions

    13:40

    • Use Source Maps

    15:29

    • Make full use of all console methods
      • console.group/groupEnd/info/
      • console.log({objNAme})

    17:02

    • View your code in other browers
    • Make sure your browser is up to date

    18:50

    • Step into and step over function
    • Useful for especially tricky issues

    19:47

    • Look into Scope in dev tools panel

    20:33

    • Recreate it in CodePen or Create React App
      • Helps to quarantine your code
      • Verify where the problem actually is

    24:12

    • Take a break
      • Helps clear your head and approach your problem from a different angle

    25:40

    • Rubber Duck Debugging
      • Forcing yourself to talk it out will often reveal problems/issues

    26:40

    • Check Github issues / ask in Slack
      • Leave your solution in the comments for others

    28:12

    • Use Node --inspect flag

    29:57

    • Read the code in your libs (if you can)

    32:34 - Chrome Dev Tools Tabs Rundown

    • 33:10 - Network tab
    • 34:15 - Preformance tab
    • 35:58 - Lesser known tools
      • 36:15 - Firefox Grid Debug
      • 36:20 - Firefox Fonts tab
      • 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window)
      • 37:39 - Chrome Animations Inspector
      • 38:34 - /dev tips & Modern DevTools Course
      • 39:41 - Chrome & FF Layers for 3d and full view of canvas & window
      • 40:51 - Sensors for overriding fake devices sensors
        • Hot tip: Use Instagram on the desktop - Go to Instagram and set the user agent to iPad and it will work as it does on that actual device
        • Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back
      • 43:12 - Favorite DevTools extensions
    • 44:06 - Application/Storage tab
    • 44:41 - FireFox Grid Inspector

    ××× SIIIIICK ××× PIIIICKS ×××

    • Scott: Hotel Tonight App
    • Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite

    Shameless Plugs

    Tweet us your tasty treats!