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:
    The Fundamentals: HTML + CSS Jul 03, 2019
    Show notes

    In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations 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 and using the coupon code “tastytreat”.

    Freshbooks - Sponsor

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

    Show Notes

    1:54 - Learning fundamentals vs framework specialists

    • Learning vs getting a job
    • Abstractions work well until they don’t and you need to debug them

    HTML

    7:58 - Semantic markup

    9:15 - Accessibility basics

    9:57 - Attributes

    CSS

    16:13 - Specificity

    22:42 - Selectors

    24:52 - Layouts

    27:53 - Box model

    32:50 - Positioning

    36:42 - Forms and inputs

    40:45 - Block vs inline vs inline-block

    43:09 - Sizing units

    44:40 - Typography

    47:53 - Media Queries

    Links
    • Interviewing candidates with a lack of fundamentals - Tweet
    • Jean-Philippe Sirois Tweet
    • Syntax 72: Accessibility
    • Syntax 107: Hasty Treat - CSS Units
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: I Think You Should Leave with Tim Robinson
    • Wes: Forearm Forklift Lifting and Moving Straps
    Shameless Plugs
    • Scott’s new course - “Debugging and Dev Tools”
    • Wes’ 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 - What is a Headless CMS? Jul 01, 2019
    Show notes

    In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples 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 and using the coupon code “tastytreat”.

    Show Notes

    2:11 - What is a headless CMS?

    • It’s a system or CMS that has no front-end (aka head)
    • Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages

    4:37 - Some examples

    • Can be used with any type of website that can consume an API
    • WordPress API + Gatsby
    • Hosted Service + React App

    7:06 - Why?

    • Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc.
    • Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like
    • Optimizes for performance with static builds
    • Hide the implementation details and back-end from view

    10:19 - Live vs statically-generated website

    • Syntax 120 - Gatsby vs Next

    10:55 - How?

    • Connects to API via normal fetch calls/GraphQL/whatever you use
    • Needs to host your back-end either as a service or on a host
    • Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify
    Links
    • WordPress
    • Sanity.io
    • React
    • Syntax 120 - Gatsby vs Next
    • Netlify
    • GraphQL
    • Cobalt
    • Gatsby.js
    • Drupal
    • Next.js
    • Nginx
    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 - Career Switch at 33 × Cover Letters × Kids × Learning Quickly × More! Jun 26, 2019
    Show notes

    It’s another potluck! In this episode, Scott and Wes answer your questions about career changes, preprocessors, moving, “the gap”, hip hop 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 and using the coupon code “tastytreat”.

    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.

    Show Notes

    1:54 - Q: I am 33 with a wife and two young daughters, and am trying to change careers. My job pays $80,000 a year, but I hate it. My wife is ok with me doing university, but she wants me to stay at the job I don’t like. Should I stand my ground? Any tips on achieving my goals to make me happy, but also keep my family happy?

    10:10 - Q: What is your advice to very junior/junior devs in writing cover letters for jobs? I wonder what to say without sounding canned and fake.

    14:35 - Q: Scott, what was the stack you were using at Ford?

    17:09 - Q: Other than reading the docs, how do you guys go about learning/trying out new technologies? Do you rebuild similar applications or pick out individual features you think are “sIcK”?

    22:32 - Q: Is it always necessary to use setState in react when storing data (for example, a form input) even if you don’t intend on re-rendering the page, or can you get away without using state?

    25:04 - Q: Development has a stereotype for being a young person’s game. As someone who started their career out of university, I often wonder how long I can sling divs for? Do you think you could make it to retirement age or do you think the game will change out from under you?

    30:34 - Q: Scott, you’ve mentioned you love hip hop. Would you be willing to share any playlists of your all-time favorite hip hop artists?

    32:08 - Q: What are your thoughts on HTML pre-processors? If you use one, which one(s) do you prefer and why?

    36:04 - Q: What advice would you have for someone considering to “level up” their career by moving from a city with few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving possibly cross-country to further a career?

    42:11 - Q: What are your recommendations in terms of resources for first time dads (and moms) like books, podcasts, etc. and generally good co-parenting advice for working professionals?

    46:45 - Q: Loved the show with Travis. Had a question about “the gap”. Similar to design ambitions/taste surpassing current skill, when did you feel like your code had “grown up” and that you could actually DO what you envisioned with Javascript?

    Links
    • Syntax 044: How to Learn New Things Quickly
    • Scott’s Spotify playlist - “Rap Music To Code To = Level Up Tutorials”
    • Scott’s Spotify playlist - “Golden Era”
    • Scott’s music picks
    • Apache - Apache Ain’t Shit
    • MF DOOM - MM…Food
    • Kendrick Lamar - To Pimp A Butterfly
    • GZA - Liquid Swords
    • Gang Starr - Daily Operation
    • Slick Rick - The Ruler’s Back
    • Redman & Method Man - Blackout
    • Q-Tip - The Renaissance
    • Enter The Wu-Tang (36 Chambers)[Expanded Edition] - Wu-Tang Clan
    • Pete Rock on Spotify
    • Preemo on Spotify
    • Codeland Conference
    • Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Oculus Quest All-in-one VR Gaming Headset
    • Wes: Marpac Rhom Portable White Noise Sound Machine
    Shameless Plugs
    • Scott’s new course - “Dev Tools and Debugging”
    • Wes’ 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 - Making Yourself Uncomfortable To Grow Jun 24, 2019
    Show notes

    In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general.

    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 for more info.

    Show Notes

    3:50 - CCS Preprocessor parable

    6:09 - Efficiency

    10:40 - When to learn new systems

    13:03 - Common pain points

    14:42 - Pushing yourself to foster growth

    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

    SVGs with Sara Soueidan Jun 19, 2019
    Show notes

    In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG!

    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 and using the coupon code “tastytreat”.

    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.

    Show Notes

    6:05 - What are SVGs?

    • It’s an image you can edit

    16:17 - Icon fonts

    • Better tools
    • Fails in certain areas
    • SVG sprite icons
    • Grunticon

    24:24 - SVG files / Build tools

    • SVGO / SVGOMG

    31:50 - Where to find SVGs

    • Noun project
    • Exporting from Sketch/Illustrator/Figma
    • Freepik
    • Iconmoon

    33:48 - What is the viewbox?

    40:39 - Animating SVG

    43:41 - Accessibility & text with SVG

    45:44 - Graphing with SVG

    • D3.js

    47:58 - Filters

    Links
    • Font Awesome
    • Grunticon
    • Grunt
    • gulp.js
    • React
    • Vue.js
    • Sketch
    • Illustrator
    • Figma
    • imagemin
    • gulp-imagemin
    • Gatsby.js
    • gatsby-plugin-sharp
    • jakearchibald/svgomg
    • Noun Project
    • Freepik
    • Icomoon
    • GreenSock
    • Snap.svg
    • SVG Animations: From Common UX Implementations to Complex Responsive Animation By Sarah Drasner
    • Codrops
    • D3.js
    ××× SIIIIICK ××× PIIIICKS ×××
    • Sara: Netlify
    • Wes: Wise Contact Sensors
    Shameless Plugs
    • Sara’s Website & Workshop Dates
    • Wes’ 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
    • Sara’s Twitter

    Hasty Treat - New Intl Methods Are Straight Fire Jun 17, 2019
    Show notes

    In this Hasty Treat, Scott and Wes talk about internationalization - how to deal with different languages, different currencies, and more!

    Log Rocket - 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

    5:48 - Intl.NumberFormat

    9:17 - Intl.ListFormat

    12:17 - Intl.DateTimeFormat / Intl.RelativeTimeFormat

    14:27 - Intl.PluralRules

    Links
    • Standard built-in objects
    • Language Subtag Registry
    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

    Debugging Tools + Tips Jun 12, 2019
    Show notes

    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

    • CLDD - console.log driven development
    • How To Pause Your Code With Breakpoints In Chrome DevTools
    • Other types of break points
      • XHR
      • DOM break on attribute change
      • DOM break on children
      • Conditional break
      • Break on exception
      • Break on event listener

    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
    • Debugging Visual Studio Code (Node) - James Q Quick
    • CodePen
    • Spencer Carli’s Youtube
    ××× SIIIIICK ××× PIIIICKS ×××
    • Wes: DeWALT Lawn Mower
    • Scott: Cold Brew Coffee Maker
    Shameless Plugs
    • Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
    • Level 2 React Native with GraphQL
    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 - Std Lib in JavaScript Jun 10, 2019
    Show notes

    In this Hasty Treat, Scott and Wes discuss the Javascript standard library proposal — what it is, how it could influence dev, and what they’d like to see.

    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:38 - What is a Standard Lib?

    • Still experimental
    • Built-in modules don’t have to be downloaded because they ship with the browser
    • Not exposing built-in modules globally has a lot of advantages:
      • They won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker)
      • They won’t consume any memory or CPU unless they’re actually imported
      • They don’t run the risk of naming collisions with other variables defined in your code

    6:47 - Key Value Storage is the first one:

    • KV Storage: the Web’s First Built-in Module

    8:36 - What do we want to see?

    • Deep clone
      • Basically all of Lodash
    • util.isDeepScrictEqual
    • Async json.parse() / json.stringify
    • UUID
    • URL Lib for building and parsing URLs
    • Missing Array Methods
      • Most of underscore JS

    15:53 - International

    • Currency Formatting
    • Lists
    • DateTimeFormat
    • RelativeTimeFormat
    Links
    • JavaScript Standard Library Proposal
    • Add remaining Underscore / Lodash features
    • JavaScript standard library contents
    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

    Gatsby Themes Jun 05, 2019
    Show notes

    In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general.

    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.

    Freshbooks - Sponsor

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

    Show Notes

    2:18 - Jason Lengstorf - What do you do?

    9:37 - Gatsby refresher

    • Gatsby is statically generated
    • gatsby-config.js file determines which plugins you use
    • gatsby-node.js allows us to hook into Gatsby at different points and do things like source content and dynamically create pages
    • gatsby-browser.js contains code that should hook into browser events

    13:54 - Gatsby themes

    • Layouts in Gatsby are done the same way in React - simply create a component with children
    • How is this different than a plugin?
    • Is it a collection of plugins?
    • How do you share themes?
    • Can they include functionality (plugins?) Like Markdown rendering?
    • What about a theme that needs a UI once activated?
    • What about custom fields for Gatsby?
    • Do you foresee a marketplace like WordPress themes?
    • Are there some themes already out there?
    • What will come for themes soon?

    34:07 - Questions about Gatsby

    • What do you think about WordPress?
    • E-commerce?
    • How do you make money?
    • Suggested way of doing dynamic things
    • What is the future of Gatsby?
    Links
    • Gatsby
    • Jason Lengstorf
    • Livestream
    • Progressive Disclosure of Complexity
    • Gatsby Themes
    • Sanity
    • Gatsby + Sanity.io
    • Snipcart
    • Axios
    • Algolia
    • Netlify
    • Airtable
    • Hope in Source - Henry Zhiu
    ××× SIIIIICK ××× PIIIICKS ×××
    • Jason: Kamado Joe Grill
    • Scott: Zojirushi Hybrid Water Boiler and Warmer
    • Wes: Waterproof Digital Instant Read Meat Thermometer
    Shameless Plugs
    • Jason’s Weekly Live stream
    • Scott’s Courses
    • Wes’ 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 - Workshops Jun 03, 2019
    Show notes

    In this Hasty Treat, Scott and Wes talk about how to give a killer workshop, as well as benefits and best practices!

    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 and using the coupon code “tastytreat”.

    Show Notes

    3:00 - Types of workshops

    • Public
    • Private

    4:29 - Choosing a topic

    • Create original content
    • Create custom content for companies

    5:55 - Building content

    • Choose seven to eight different little things
      • ES6
      • Progressive web apps
    • Build a single application throughout the day, introducing a new feature or two at a time and then implementing it into your own application
      • Gatsby website
      • React Beer application
      • React Notes Application
    • Process:
      • Build the app
      • Rewind back to starter files
      • Build it again while writing notes
      • Follow your own notes to see if it makes sense

    13:25 - General information

    • How long should it be?
    • Fixed price vs split cost
    • How many people?

    16:46 - Other Tips:

    • Break away from your app and show other apps using - gives better context
    • Stop often and ask if anyone needs help
    • Give large breaks
    • Give challenges for those who need more to do
    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 88 89 90 91 92 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