TopPodcast.com
Menu
  • Home
  • Top Charts
  • Top Networks
  • Top Apps
  • Top Independents
  • Top Podfluencers
  • Top Picks
    • Top Business Podcasts
    • Top True Crime Podcasts
    • Top Finance Podcasts
    • Top Comedy Podcasts
    • Top Music Podcasts
    • Top Womens Podcasts
    • Top Kids Podcasts
    • Top Sports Podcasts
    • Top News Podcasts
    • Top Tech Podcasts
    • Top Crypto Podcasts
    • Top Entrepreneurial Podcasts
    • Top Fantasy Sports Podcasts
    • Top Political Podcasts
    • Top Science Podcasts
    • Top Self Help Podcasts
    • Top Sports Betting Podcasts
    • Top Stocks Podcasts
  • Podcast News
  • About Us
  • Podcast Advertising
  • Contact
Not in our directory?
Add Show Here
Podcast Equipment
Center

toppodcastlogoOur TOPPODCAST Picks

  • Comedy
  • Crypto
  • Sports
  • News
  • Politics
  • True Crime
  • Business
  • Finance

Follow Us

toppodcastlogoStay Connected

    View Top 200 Chart
    Back to Rankings Page
    News

    Syntax – Tasty Web Development Treats

    Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

    Advertise
    • Apple Podcasts
    • Google Play
    • Spotify

    Latest Episodes:
    How To Get Better At Problem Solving Nov 20, 2019
    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.

    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

    Hasty Treat - Tips For Writing Good CSS Nov 18, 2019
    Show notes

    In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.

    Sizzy - Sponsor

    Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co.

    Show Notes

    4:08 - Use a system

    4:50 - Use overrides and cascading

    • Embrace the cascade
    • Don’t rewrite the same CSS over and over again
    • Understand why scoping is good

    9:07 - Nail down typography early

    • You can always revisit if it isn’t what you need

    10:36 - Pick a pattern and stick to it

    • BEM
    • Functional CSS
    • CSS in JS

    14:39 - Don’t style based on element type (kind of) — a class should describe the component

    17:09 - Good naming techniques

    • Describe what it is, not what it looks like
    • Thing
      • ThingChild
        • ThingChild-modifier
    • Scale sizes (e.g. s, m, l, xl)

    21:43 - Other tips

    • Group like CSS together
    • Chunk into different files
    • Write good comments
    • CSS properties FTW
    Links
    • Stylus
    • Webpack
    • Parcel
    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

    Design Foundations For Developers Nov 13, 2019
    Show notes

    In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better!

    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.

    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:35 - Our backgrounds in design

    12:41 - Foundations

    • Consistency makes a big difference
    • Use “training wheel” tools until you are confident
    • Always work within a system
    • Less is more - subtle is better

    19:39 - Color

    • Color theory
    • Complementary colors and shades
    • Stick to color pallet generators until you are good enough

    28:51 - Spacing

    • More spacing than you think you need
    • Vertical rhythm
    • Letter spacing: -1px
    • Consistent margin and padding

    34:47 - Typography

    • Sans vs serifs
    • Finding fonts
    • Use proven combinations until you know your way around

    41:49 - Interaction

    • Design for all states (e.g. standard, visited, active, hover, etc.)
    • Animations should be quick
    • Interactions should make sense

    45:04 - Concerns beyond visuals

    • Accessibility via color contrast
    • Thin fonts and light grey are awful
    • Think about the poor Windows users

    48:47 - Inspiration + Resources

    • Take inspiration from the best — you’ll find your own voice after enough work
    • Go easy on trends - blobby characters with purple hair
    • Take a trip around the world wide web
    • Stripe
    • Dribbble
    • Site Inspire
    • codrops
    • Refactoring UI
    Links
    • Designer Starter Pack - Andrea Crofts
    • LastPass
    • Colour Lovers
    • Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google
    • Bloomberg
    • Dropbox
    • FontPair
    • FontJoy
    • Figma - Google Font Pairings
    • Type Scale
    • Creative Market
    • Radnika Next
    • Stripe
    • Dribbble
    • Syntax 72: Accessibility
    • Firefox
    • Site Inspire
    • codrops
    • Refactoring UI
    • Adam Wathan
    • Steve Schoger
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Reelgood
    • Wes: Magnesium
    Shameless Plugs
    • Scott: FullStack React with NextJS - Sign up for the year and save 25%!
    • Wes: Beginner Javascript
    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

    Hasty Treat - Buying and Selling Domain Names Nov 11, 2019
    Show notes

    In this Hasty Treat, Scott and Wes talk about domain names — buying and selling, best practices and more!

    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

    2:50 - Buying a domain

    10:47 - Selling a domain

    13:50 - Transferring a domain

    Links
    • who.is
    • GoDaddy
    • JavaScript.co
    • BeginnerJavaScript.com
    • LearnNode.com
    • BeginnerJS.com
    • KitBos.com
    • Cloudflare
    • Learn.li
    • Learnli.co
    • Escrow.com
    • Hover
    • Bob.com
    • Sedo.com
    • Park.io
    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

    Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More! Nov 06, 2019
    Show notes

    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
    • Gatsby
    • Next.js
    • Bling.js
    • Syntax 118: The Smart Home
    • Grav CMS
    • Craft CMS
    • prismic
    • Sanity
    • Contentful
    • Tiny CMS
    • Forestry
    • Airdale Chemical
    • Material
    • Bootstrap
    • VS Code
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: HeavySet - Gym Workout Log
    • Wes: Baroness Von Sketch
    Shameless Plugs
    • Scott: FullStack React with NextJS - 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

    Hasty Treat - Spooky Stories Nov 04, 2019
    Show notes

    In this Hasty Treat, Scott and Wes bring you more web dev horror stories!

    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

    2:26 - Perf Woes

    3:42 - Always Backup Your Backups

    4:54 - Kill Children

    6:03 - Robots Don’t Eat Food

    8:32 - Email Goof Up

    9:44 - Hundreds of Thousands of Date Issues

    10:46 - Spooky August

    12:32 - You’re up to .bat

    13:17 - Printed Code

    15:12 - ThinkGeek

    16:12 - It would take a while to Ketchup on all these orders

    17:05 - This story makes me want to stick my head in async

    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

    Spooky Web Dev Horror Stories Oct 30, 2019
    Show notes

    In this episode of Syntax, Scott and Wes talk about web dev horror stories — things you can only hope will never happen to you!

    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.

    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.

    Show Notes

    2:09 - Scott’s Disastrous Git Clean

    4:35 - Magic Updates the Gathering

    8:52 - YAAAAS

    9:37 - Token Trouble

    12:16 - jQuery Plugins

    15:22 - Success!

    18:00 - Parental Advisory

    21:47 - Students Changing Grades

    22:46 - Lorem Sh!tsum

    26:22 - Drowning in a Waterfall

    28:53 - Magneto Upgrades

    30:00 - JOHN CENA

    33:24 - Migration Migraine

    35:39 - Primary Key Nightmare

    36:26 - The $20,000 YAML formatter

    Links
    • Adam J. Sontag
    • jQuery
    • GitLab
    • Gitlab Database Incident
    • Magento
    • Meteor
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Dyson Hand Vacuum
    • Wes: /r/ AbsoluteUnits
    Shameless Plugs
    • Scott: Fullstack React with JS9 - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
    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

    Hasty Treat - Scott Moves to iPhone Oct 28, 2019
    Show notes

    In this Hasty Treat, Scott talks about moving to iPhone — his experiences with both Android and iOS, the advantages and disadvantages of both, and more!

    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

    1:59 - My device history

    • OG Droid → Nexus → Pixel
    • Misconceptions of android
      • It’s Windows for phones
      • It’s cheaper or not as nice

    5:03 - Why switch?

    6:39 - Who wins what?

    • Android

      • Homescreen
      • Low light photography
      • Usability
        • Squeeze assistant
        • Google search integrated everywhere
      • Search
      • Keyboard
      • Notification
    • iOS

      • Apps
      • Performance
      • Camera overall
      • Device quality
      • Fun stuff
      • Haptics
    Links
    • 1Password
    • LastPass
    • Gboard
    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

    Migrating, Deploying, and Hosting WordPress Oct 23, 2019
    Show notes

    In this episode of Syntax, Scott and Wes talk with Brad Touesnard of Delicious Brains about migrating, deploying, and hosting WordPress.

    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.

    Hasura - Sponsor

    Hasura is an open-source GraphQL engine that helps you instantly setup a scalable and realtime GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and services that you can securely query from frontend clients. Get started at hasura.io to try it out in 30 seconds!

    Show Notes

    3:50 - Why did start Delicious Brains?

    5:25 - What plugins does Delicious Brains make?

    11:40 - Migrating WordPress

    16:50 - Migrating databases

    24:20 - How do you do version control with WordPress?

    37:06 - What’s the easiest way to deploy and host WordPress?

    40:23 - What are some examples of managed WordPress hosts?

    46:58 - What does your deployment process look like from beginning to end?

    50:22 - Thoughts on headless WordPress

    53:12 - Is serverless WordPress a thing?

    Links
    • Delicious Brains
    • WP Migrate DB Pro
    • WP Offload Media
    • WP Offload SES
    • SpinupWP
    • Heroku
    • Now.sh
    • WP Engine
    • Flywheel
    • Advanced Custom Fields
    • Composer
    • WP Packagist
    • WordPress.org
    • React
    • Laravel
    • Pagely
    • Kinsta
    • GoDaddy
    • WordPress.com
    • SiteFround
    • Buddy
    • Digital Ocean
    • Laravel Forge
    • npm
    • Codeship
    • Gatsby
    • Laravel Vapor
    • Installing via Composer
    • WordPress deployment workflow
    • Managing your WordPress site with Git and Composer
    ××× SIIIIICK ××× PIIIICKS ×××
    • Brad: Teppanyaki Grill
    • Scott: Succession and The Righteous Gemstones
    • Wes: Magnatiles
    Shameless Plugs
    • Brad: All Products
    • Scott: Svelte For Beginners - Sign up for the year and save 25%!
    • Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
    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

    Hasty Treat - React Server Side Rendering Oct 21, 2019
    Show notes

    In this Hasty Treat, Scott and Wes talk about server side rendering — what it is, how to use it, best practices, things to avoid, and more!

    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

    3:20 - What is SSR?

    4:16 - Why SSR at all?

    8:39 - Platforms that do SSR out of the box

    11:18 - Gotchas

    • useLayoutEffect import { useEffect, useLayoutEffect } from 'react' const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect export default useIsoLayoutEffect

    18:20 - Tools

    Links
    • Next.js
    • Gatsby
    • Webpack
    • Parcel
    • Meteor
    • React
    • NoSSR component
    • Syntax 127: Hasty Treat - React Suspense
    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

    Previous 1 84 85 86 87 88 105 Next

    Related Podcasts

    Inside Strategic Coach: Connecting Entrepreneurs With What Really Matters

    1

    Inside Strategic Coach: Connecting Entrepreneurs With What Really Matters Business
    WSJ Your Money Briefing

    2

    WSJ Your Money Briefing Business
    FORTUNE Unfiltered with Aaron Task

    3

    FORTUNE Unfiltered with Aaron Task Business
    FORTUNE OnStage Presents: The Most Powerful Women

    4

    FORTUNE OnStage Presents: The Most Powerful Women Business
    Slate Money

    5

    Slate Money Business
    In The Dark – The New Yorker

    6

    In The Dark – The New Yorker Business News
    footer-logo

    Contact Us

    Toll Free: 844-670-7747

    Links

    • Home
    • Top Charts
    • Networks
    • Apps
    • Independents Podcasts
    • Podcast Advertising
    • Podcast News
    • Contact Us
    • About Us
    • Analytics & Insights

    Stay Connected

      Privacy, Terms of Use & Our Code of Ethics Protecting Content Creators Copyrights