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:
    TypeScript Fundamentals — Getting a Bit Deeper Apr 28, 2021
    Show notes

    In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases.

    Deque - Sponsor

    Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

    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.

    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 Deep end stuff

    03:30 - any vs unknown

    06:20 - never

    • https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts
    • Definition files
    • Usually for existing libraries that don’t have types
    • Can be generated or hand-written
    • Also really handy for pure JS projects, you still get good autocomplete because of these

    13:25 - Type generation

    • Can be generated from GraphQL, or Schemas, or from JSON Output

    17:20 - TypeScript generics (variables)

    • Kind of like functions, they return something different based on what you pass it
    • makeFood
    • makeFood
    • This function makes food and shares lots of the same functionality between making a pizza and sandwich
      • If the only thing that differs is the type returned, we can use generics
      • You often see this as a single char T
      • It can be anything
      • Promise is a generic
      • querySelector uses generics

    21:48 - Promises / Async + Await

    • Functions now return a Promise type, but with a generic
    • Promise
    • Promise
    • Promise, Request, Request
      • stringified
      • added headers

    29:48 - Type assertion (type casting)

    • Type assertion is when you want to tell TypeScript “Hey I know better than you”.
    • Two ways:
      • as keyword (most popular)
        • someValue as HTMLParagraphElement
        • Tagged before
          • someValue

    34:14 - TypeScript without TypeScript (JSDoc / TSDoc)

    • Really nice!
    • You can also add comments / descriptions
    • https://github.com/developit/redaxios/blob/master/src/index.js

    40:08 - Interfaces vs Types

    • Interfaces have better perf
    • https://twitter.com/wesbos/status/1362418379919937545
    • https://blog.logrocket.com/types-vs-interfaces-in-typescript/
    • What do you default to?
    How we write TypeScript

    44:27 - Interface or Types

    • Scott - Types
    • Wes - Interfaces

    44:50 - any vs unknown

    • Scott - any
    • Wes - unknown / any

    46:52 - Any (No Implicit or Implicit Allowed)

    • Scott - No implicit any
    • Wes - No implicit any

    48:31 - Return types (Implicit or Explicit)

    • Scott - Explicit always
    • Wes - Not always

    50:49 - Compile (TSC, Strip TS)

    • Scott - Strip
    • Wes - Both

    52:38 - Type Assertion (as or )

    • Scott - as
    • Wes - as

    53:09 - Arrays (Dog[] or Array)

    • Scott - Dog[]
    • Wes - Dog[]

    54:02 - Assert or Generic (if both work)

    • querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’);
    • Scott - querySelector(’.thing’);
    • Wes - querySelector(’.thing’);
    Links
    • Syntax 324: TypeScript Fundamentals
    • Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools
    • Axios
    • VS Code
    • Syntax 310: Serverless, Deno and TypeScript with Brian Leroux
    • Cloudinary
    • Notion
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Powerowl 16 Battery Recharger
    • Wes: Fairywill Pro P11
    Shameless Plugs
    • Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
    • Wes: Beginner Javascript - 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 - Git Rebase Explained Apr 26, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about Git Rebase — what it is and how and when to use it!

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

    05:12 - Why and when to rebase?

    • git rebase -i is interactive
    • Rebase allows you to rewind your current branch, apply the changes of another branch to it, and then on top of that, apply your new commits.
    • Common uses:
      • Squash all commits into one or multiple commits
      • Reword commits
    • These lines can be re-ordered — they are executed from top to bottom.
      • p, pick = use commit
      • r, reword = use commit, but edit the commit message
      • e, edit = use commit, but stop for amending
      • s, squash = use commit, but meld into previous commit
      • f, fixup = like “squash”, but discard this commit’s log message
      • x, exec = run command (the rest of the line) using shell
      • b, break = stop here (continue rebase later with ‘git rebase --continue’)
      • d, drop = remove commit
      • l, label = label current HEAD with a name
      • t, reset = reset HEAD to a label
      • m, merge [-C | -c ] [# ]
    Links
    • Git Rebasing
    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

    Selling and Shipping T-Shirts with TypeScript Apr 21, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!

    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.

    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.

    Deque - Sponsor

    Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

    Show Notes

    01:58 - T-Shirts 101

    • T-Shirts are cool
    • I sold 100 right away to get the kinks out
    • Then I did pre-order
    • The stack
      • TypeScript
      • React
      • Next.js

    09:08 - Selling: Front-end

    • Snipcart
    • It’s a button
    • When Someone buys, they scrape the site for the HTML
      • If you only have a client-side rendered button, you use the JSON API instead
    • Integrated into Gatsby pretty easily
    • Wrote one custom hook to count inventory and disable when sold out
    • I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment.

    10:10 - Selling: Shipping Quotes

    • Snipcart has integration for USPS, etc.
    • You can also do custom shippers
    • It’s a webhook
    • They also take care of customs declaration

    13:30 - Selling: Backend

    • Next.js Dashboard
      • Integrate with ChitChats, Stallion Express, and SnipCart.
    • The tech
    • Shipping Labels
      • Packing slip

    18:05 - Fulfilling

    • Printing labels
      • Designed with CSS + React
      • Print CSS is wild
      • Fan Fold labels were way better
      • I switched to Stallion Express
      • Cheaper
    • Printing packing slips
    • Batch scanning
    • Scanning → Mark as shipped
      • Started with webcam
      • Bought scanner for cheap
      • QR code was better because my tokens were long
      • Data matrix is often better
    • Sending notifications
      • Hit the endpoint via Snipcart

    28:48 - The physical part

    • T-Shirts printed from local supplier
      • U-Haul to get them here
    • Bags printed in China (about 40 cents each)
    • I wrote a bunch of code to organize by size
      • This cut down on moving around (14 hours if you save 30 seconds per shirt)
    • Some got stickers
    • Multiples were the hardest
      • 24 different types of shirts
        • some wanted 4xl
        • some wanted tall

    36:30 - Common questions

    • Why did you do this yourself?
      • Fun project
      • I learned a ton
      • This is how you don’t burn out
    • Why not print-on-demand? (DTG)
      • Tonal
      • Embroidery
      • Quality
      • Money
        • Pay people in my community
    • Control
      • Bags, stickers, etc…
      • stickermule
    • Why not $companyThatHandlesIt
      • I want to do stickers
      • I want to do decks
    • Why not Shopify
      • Large orders still need major fulfillment strategies
      • Code has to be written or money spent

    44:16 - Other lessons learned

    • Queues would be good here
      • Sometimes you had to wait 3+ seconds for the confirmation of shipping
    • No one reads, it was pre-order
    • Don’t buy shipping right away — people email about incorrect addresses
    • Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds)
    • Pre-order is great because you can offer many sizes
    • Async JS to do things at most 50 at a time
    Links
    • Wyze Plug
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Pixeleyes AutoMounter
    • Wes: Baratza Encore Conical Burr Coffee Grinder
    Shameless Plugs
    • Scott: Level 2 Node Authentication - 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 - Container Queries Are Here Apr 19, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.

    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.

    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

    07:22 - Why?

    • Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).
    • This is in line with how we write components.
    • It will change the way we write CSS.

    08:49 - The Syntax

    • Containers need to be defined as containers via containment context
    .container { contain: size layout; }

    New contain value:

    .inline-container { contain: inline-size; }

    This is the same as the logical properties. Assuming you read LTR, or RTL:

    • size - width and height
    • inline-size = width
    • block-size = height
    /* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } }

    18:49 - How to try them today

    1. Download and/or update Chrome Canary
    2. Go to chrome://flags
    3. Search and enable “CSS Container Queries”
    4. Restart the browser

    19:27 - Demos

    • Need Chrome Canary + Flag
    • https://codepen.io/collection/XQrgJo
    • https://codepen.io/una/pen/LYbvKpK?editors=1100
    Links
    • Miriam Suzanne
    • Susy
    • Miriam’s CSS Sandbox
    • https://css.oddbird.net/rwd/query/explainer/
    • Canary
    • @addyosmani
    • The CSS Podcast
    • @jon_neal
    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

    Dev Tools Tabs Explained — Plus Tips & Tricks Apr 14, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them.

    Vonage - Sponsor

    Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/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.

    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

    3:50 - Network

    • See all requests, filter by type or name
    • Used to understand all requests coming or going
    • Turn off caching
    • View timing
    • See the true GZIP size
    • Slow down network speed
    • See time for page load
    • Copy as fetch or CURL
    • View request, response, and headers
    • See CORS issues
    • See which requests have happened
    • See if an asset is cached (both in dev tools, also Cloudflare)
    • See blocked requests because of extensions
    • Tip: You can see the network info from the console in Firefox

    22:03 - Memory

    • See what is taking up memory
      • Strings
      • DOM nodes
      • Objects
      • Actual .js

    26:44 - Performance

    • Click record and use the site
    • Flame chart useful for finding slow functions and debugging janky animations
    • Get FPS in coordination with flame chart
    • Save performance recording data to be able to share for debugging
    • You can also upload saved data to debug without using the site

    30:48 - Console

    • Interfaces with the JS runtime
    • Shows errors, warnings, and logs
    • Tip: Negate noisy warnings/errors that clutter your console with -
    • Tip: Use $0 to select current element
      • $1 for second last
      • $r for current React element
    • Tip: Use $$ to shortcut Query SelectorAll and Array.from
    • Tip: Use $ to shortcut Query Selector

    40:28 - Storage / Application

    • Working with LocalStorage, Cookies, Index DB, and Session Storage

    44:56 - Audit / Lighthouse (Chrome and Firefox)

    • Run lighthouse to check for performance, accessibility, and UI stuff
    • Not the silver bullet audit that many people think it is
      • Colors are sometimes like “Really?!”
    • Can be helpful regardless

    50:28 - DOM Tab

    • Firefox only
    • Shows everything that is in the scope of the browser
    Links
    • Adam Wathan
    • Ben Vinegar
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: dupeGuru
    • Wes: Moccamaster Coffee Maker
    Shameless Plugs
    • Scott: Node Fundamentals Authentication - 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 - CSS Nesting 1 Apr 12, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about CSS nesting — what it is, when to use it, and why.

    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.

    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

    04:22 - What is it?

    • https://drafts.csswg.org/css-nesting-1/#nest-prefixed
    • https://twitter.com/argyleink/status/1371874777548267520

    06:02 - Why nest?

    • Easier to read
    • Easier to write
    • Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up.

    08:13 - When to use nesting

    • Nesting is often overused
    • Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it)
      • .container .item {} .container .item a {}
    • Use it for scoping

    10:06 - Nesting prefixes

    • In order to nest CSS, you must first start it with a nesting selector
    .tweet { & > p { } &.media-included { color: green; } & + .tweet { } // sibling & p { } // descentang }
    • Component-based — tweet, card, company, Link
    article{ color: blue; & { color: red; } }

    and must be the first child of a compound selector

    12:44 - @nest rule / media queries

    • Mostly just a visual way to show nested
    .foo { display: grid; @media(orientation: landscape) { & { grid-auto-flow: column; } } } .foo { display: grid; @media (orientation: landscape) { & { grid-auto-flow: column; } @media (min-inline-size > 1024px) { & { max-inline-size: 1024px; } } } } /* equivalent to .foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } @media (orientation: landscape) and (min-inline-size > 1024px) { .foo { max-inline-size: 1024px; } } */

    16:30 - How to use nesting today

    • Literally any CSS preprocessor
    • PostCSS to use spec
    Links
    • Syntax 274: How does stuff get added to CSS? Adam Argyle answers!
    • Sass
    • PostCSS
    • CSS Variables
    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 — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More! Apr 07, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk about how to keep your skill up to date when you have a job and a family, when you should start looking for your first job, monorepos, video hosting, TLDs, APIs, fake names, 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 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.

    Vonage - Sponsor

    Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.

    Show Notes

    02:10 - How do you handle token refresh when multiple API calls are made at the same time? Let’s says you get a 401 and do acquire a new token, but that will only be used by the first API call, while the other parallel APIs would still use the old one and error out. This has caused me to sort of artificially limit the total requests to be made to 1. How do you deal with it?

    06:40 - What service do you guys use for video storage and optimization? I am currently building out a side project that will require some video hosting so I figured I would ask the experts.

    15:22 - I’m trying to teach myself web development and I’m having problems making up the logic for my personal projects. I would have to watch YouTube tutorials or look at other people’s code in order to implement simple features to my website and I’ve been feeling pretty stupid for not spending the time to think of it. I feel like I’m missing out on knowing how to problem solve for myself whenever I copy other people’s code and try to understand them afterwards.

    19:27 - I just landed my first web development job after following The Odin Project and building personal projects for about a year. It tripled my income so I am incredibly excited! I have been using a PHP framework which was developed by one of my coworkers and has no documentation. In order to understand the code, I either have to read a bunch of source code or ask one of the other developers questions. While I am doing well, I can’t help but feel as if I am working way too slow and asking way too many questions. I assume this is imposter syndrome and lots of people deal with it, but how would you suggest dealing with this type of anxiety?

    25:11 - Monorepos, yes or no?

    29:43 - As a brand new self-taught web developer, how would you know if you’re ready to apply for junior positions?

    32:03 - Will there ever be a .eat domain or are the pre-order sites just ripping you off? Would like to know who decides what TLDs are possible or not.

    35:26 - I’m currently employed as a fullstack developer but want to build a portfolio for future job hunting. Would you say it’s ok to reference a project or two from an employer? My problem is that the only projects I have outside are mostly just smaller tools built for myself for fun.

    39:29 - Should developers always use their real first and last name when presenting themselves as a professional online (e.g. Twitter, LinkedIn, Github, personal site). Or is it acceptable to use a fake last name for example? My wife is quite conscious about privacy online, so would prefer I retain some anonymity. But also, my last name is a bit generic, and not very Googleable. I thought having a more snappy and interesting name would help me stand out, and be easier to find with a quick Google. You guys both have awesome names that are very unique and are hard to forget.

    43:59 - How do you find time to work and keep up with updates and libraries etc. having a wife & kids?

    46:06 - I am a beginner in making course content. I am trying to create a programming tutorial, but every time I try to record some tutorials I have to compromise on audio quality. Lots of background noises get captured on audio. Can you both share some tips to make soundproofing room? What tricks do you both use?

    53:33 - As someone who recently learned/is learning how to build websites using express/node/react, with a little know how with Python and Django too, how do you start building a portfolio that isn’t just a bunch of practice/show-pieces? How do I get a client?

    59:53 - Should I be using multiple web apps on a single site or try to make them all one? If I have a site that displays blog posts about parks for example, then a page with all the parks listed out that link to a page about each single park’s details, should I be making the entire thing in one app? Or make a blog app and publish it, then make a different app for the other content and publish it using a subdomain?

    Links
    • Syntax 266: Video for the Web 2020 and Beyond
    • Cloudinary
    • Mux
    • Vimeo
    • LesMills
    • Bitmovin
    • Brightcove
    • Wista
    • Cloudflare
    • AWS MediaLive
    • Keystone.js
    • Gatsby
    • Syntax 331: Hasty Treat - Hireable Skills for 2021
    • ICANN
    • dbx 286s
    • Electro-Voice RE20
    • reMarkable
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: CamLink 4k
    • Wes: TS80p Mini Soldering Iron
    Shameless Plugs
    • Scott: Node Fundamentals Authentication - Sign up for the year and save 25%!
    • Wes: Fullstack Advanced React & GraphQL - 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 - VSCode Extensions and Tips Apr 05, 2021
    Show notes

    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

    • https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet

    05:33 - Add Missing Function Declaration

    • https://twitter.com/wesbos/status/1369393437062074377

    07:30 - Error Lens

    • https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

    09:08 - Declare Missing Members

    • https://marketplace.visualstudio.com/items?itemName=tamj0rd2.ts-quickfixes-extension

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

    • https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

    11:59 - File Utils:

    • https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

    13:59 - GitLens — Git supercharged

    • https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

    15:15 - ES6-String-HTML

    • https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html

    16:41 - Wrap Console Log Simple

    • https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple

    17:18 - Text Pastry

    • https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry

    19:14 - Better Comments

    • https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

    20:14 - Tip: Use Emmet everywhere

    • https://emmet.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

    Servers with Matt from Caddy Mar 31, 2021
    Show notes

    In this episode of Syntax, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, 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.

    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.

    Cloudinary - Sponsor

    Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

    Guests
    • Matt Holt
    Show Notes

    02:08 - Who are you and what do you do?

    03:22 - Why would you want to build a web server?

    08:45 - How do SSL certs work?

    14:03 - Why do you even need a web server?

    23:03 - Is it better to have a web server serve your images?

    20:31 - What is load balancing and why might you need it?

    31:35 - Is server administration a lost art?

    38:03 - What is a sidecar proxy?

    38:50 - How do chron jobs work?

    39:50 - Why is GO so fast? Why is it good?

    46:32 - Should every website have an SSL certificate?

    Links
    • Floss Weekly 364
    • Caddy
    • Let’s Encrypt
    • Certbot
    • PM2
    • https://doesmysiteneedhttps.com
    • Tello Drone
    ××× SIIIIICK ××× PIIIICKS ×××
    • Matt: LG Stick Vacuum
    • Scott: Alen Pure BreatheSmart Air Purifier
    • Wes: Tello EDU
    Shameless Plugs
    • Matt: Matt Holt Sponsorships
    • Scott: All Courses - 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 - What is the n+1 problem? Mar 29, 2021
    Show notes

    In this Hasty Treat, Scott and Wes talk about a common problem you’ll encounter in your development career — the n+1 problem.

    Hasura - Sponsor

    With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

    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

    05:00 - What is the n+1 problem?

    • The N+1 problem can happen in any language but is especially prevalent in GraphQL because it’s so easy to query relationships.

    09:33 - The solution

    • The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids.

    11:11 - Should you care?

    • Sometimes no: its often fine to do multiple DB Calls
    • Facebook DataLoader
    • Mercurious
    • Many ORMs take care of this for you
      • These then break it down into my appropriate SQL
      • MongoDB Ruby: eager loading
      • Laravel ORM does it
      • Aggregation pipelines
    • Prisma N+1: https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en
    • Mongoose Populate
    • Apollo Studio
    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 69 70 71 72 73 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