Syntax - Tasty Web Development Treats

Alle afleveringen

1.049 afleveringen, van nieuw naar oud

1. Job Types Agency, Tech, Startup, Entrepreneur VS Tech company VS In House

   17 augustus 2022 · 1 uur 7 min

   Afspelen
   In this Hasty Treat, Scott and Wes talk about their thoughts on the different types of tech jobs you can get, and the pros and cons of each style of job in tech.
   Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
   Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
   Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/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 00:10 Welcome
   01:47 The types of jobs
   Wes’ tweet about developer jobs Lees meer

   03:02 Our experiences
   05:58 Tech company
   09:46 Freelancer or Entrepreneur
   11:14 What are the pros of working at a agency?
   18:38 Cons to agency life
   26:19 Sponsor: Lightstep Incident Response
   27:49 Pros of tech company jobs
   30:47 Cons of working at tech companies
   37:46 Sponsor: Freshbooks
   38:51 Pros of in house tech jobs
   46:01 Cons of tech work
   51:29 Sponsor: LogRocket
   52:28 Pros of freelance or entrepreneur
   57:20 Cons of entrepreneur life
   00:03 SIIIIICK ××× PIIIICKS ×××
   ××× SIIIIICK ××× PIIIICKS ××× Wes: Soap pump

   Scott: Pro breaking tour

   Shameless Plugs Scott: LevelUp Tutorials

   Wes: Wes Bos Tutorials

   Tweet us your tasty treats Scott’s Instagram

   LevelUpTutorials Instagram

   Wes’ I…

2. CSS Proposals @when, CSS Masonry, Carets

   15 augustus 2022 · 20 min

   Afspelen
   In this episode of Syntax, Wes and Scott talk about proposals to CSS including @when, CSS Masonry, CSS Caret, ENV Vars, and Media Query Ranges.
   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.
   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 00:11 Welcome
   00:58 Sponsor: Sentry
   02:17 Sponsor: Sanity
   03:32 CSS @when and @else
   CSS When and Else Lees meer

   @when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ } 05:42 CSS Grid 3 Masonry
   CSS Grid

   .grid { display: inline-grid; grid: masonry / repeat(3, 2ch); border: 1px solid; masonry-auto-flow: next; } David Desandro

   Rachel Andrew

   09:00 CSS Caret
   CSS Caret

   10:32 CSS Nesting
   CSS Nesting

   Syntax 343 CSS Nesting

   Postcss-preset-env

   13:14 ENV Vars
   ENV Variables

   14:58 Media Query Ranges
   MDN Media Queries @media (width < env(--small_bp)); @media (100px < width < 1000px);
   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

3. Supper Club × Headless Ecommerce with Shopify’s Josh Larson

   12 augustus 2022 · 52 min

   Afspelen
   In this supper club episode of Syntax, Wes and Scott talk with Josh Larson from Shopify about headless ecommerce, including Hydrogen from Shopify, how integrations work with Shopify, and what the tech stack is behind Hydrogen.
   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.
   Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
   Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
   Show Notes 00:38 Welcome
   01:12 Guest introduction
   03:16 What is Hydrogen from Shopify?
   Hydrogen Lees meer

   Shopify Oxygen

   11:23 Why would you want to go headless?
   15:26 Sponsor: Hasura
   16:56 Where does custom logic fit?
   18:45 What is the stack behind Hydrogen?
   24:16 Sponsor: Lightstep Incident Response
   25:33 How much code is JavaScript vs React?
   33:43 How do integrations work?
   38:28 Supper Club Questions
   In Bed By 7pm VS Code Theme

   Zsh

   Hyper

   Laravel

   Vite

   Cloudflare Workers

   Rust

   Rust for JS

   48:10 SIIIIICK ××× PIIIICKS ×××
   ××× SIIIIICK ××× PIIIICKS ××× The Story Of by Vice

   Shameless Plugs @JPLHomer

   Shopify Editions

   Tweet us your tasty treats Scott’s Insta…

4. Potluck - API Fetching × PDF Creation × tRPC × Stripe vs PayPal

   10 augustus 2022 · 1 uur 2 min

   Afspelen
   In this potluck episode of Syntax, Wes and Scott answer your questions about middleman for API fetching, when to introduce SvelteKit, generating PDFs serverside, trade offs of being an entrepreneur vs employee, and more!
   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.
   Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/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 00:18 Welcome
   02:50 Is there a way to create a “middleman” to fetch data from an API once a day?
   Redis Lees meer

   06:53 Should I wait before introducing team members to SvelteKit?
   SvelteKit V1 issues

   10:28 What options do we have for generating PDFs serverside?
   WKHTML to PDF

   Puppeteer

   PhantomJS

   html2canvas

   Generate Invoice Workers

   15:47 Sponsor: Prismic
   17:08 How do you say thank you to sponsors?
   18:32 How would you compare the tradeoffs of working at a tech company vs. an agency vs. freelancing vs. entrepreneurship?
   20:47 What’s the best way for an oldie like me to catch up?
   CSS Grid.io

   Modern CSS Layouts

   26:08 I’m wondering what do you think about tRPC?
   trpc.io

   Create t3 app

   29:00 Sponsor: LogRocket
   30:03 PDF creator Cloud…

5. Browsers, Engines, Support and the Other Guys

   8 augustus 2022 · 31 min

   Afspelen
   In this Hasty Treat, Scott and Wes talk about the various web browers that might show up in your analytics and whether you need to worry about supporting them or not.
   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.
   MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
   Show Notes 00:25 Welcome
   01:19 Sponsor: Sentry
   02:29 Sponsor: MagicBell
   03:51 Big browsers and their engines
   05:29 Cloaked browsers
   08:16 What’s so great about Arc?
   Arc Lees meer

   11:33 JavaScript engines
   13:30 iOS Browsers
   Open Web Advocacy

   15:07 Android browsers
   18:04 The rest of the browsers
   19:24 Tor browser
   20:20 Opera mini
   22:48 UC browser
   23:42 Opera mobile
   24:57 KaiOS
   26:26 Ringtone memories
   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

6. Supper Club × Lee Robinson on React Suspense, Server Components

   5 augustus 2022 · 1 uur 3 min

   Afspelen
   In this supper club episode of Syntax, Wes and Scott talk with Lee Robinson from Vercel about React Suspense, server components, the edge, and more!
   Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
   Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
   Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
   Show Notes 00:35 Welcome
   01:34 Guest introduction
   LeeRob.io Lees meer

   Vercel

   02:25 Syntax hosted on Vercel
   04:08 What is suspense?
   06:50 Benefits of selective hydration
   13:15 Sponsor: Lightstep Incident Response
   14:24 How does suspense know you’re doing something inside of it?
   18:02 How does this connect to server components in React?
   22:00 How do we use this in NextJS?
   24:32 NextJS routing future
   Layouts RFC

   33:11 Will I ever be able to use web components inside NextJS?
   36:12 Sponsor: Gatsby
   37:14 What’s happening with the Edge?
   Edge Runtime

   47:37 What should we use for databases?
   50:39 Supper Club dessert questions
   OhMyPosh

   H…

7. Our Web Dev Wish List

   3 augustus 2022 · 54 min

   Afspelen
   In this episode of Syntax, Wes and Scott talk through their web dev wish list of things they want to just work already!
   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.
   Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
   Show Notes 00:11 Welcome
   02:20 Write Custom animation transitions
   03:32 date input translate to JavaScript date
   06:48 Smooth and animated drag and drop
   08:35 TypeScript Interfaces are faster than Types
   10:35 Request animation frame
   12:52 Custom Elements / Web Components
   13:52 Authentication
   Web Authentication API Lees meer

   16:12 Sponsor: Linode
   17:48 useIsomporphic vs useLayoutEffect
   19:48 useEffect dependency arr…

8. How to Spark your Imagination and Get Excited about Coding

   1 augustus 2022 · 18 min

   Afspelen
   In this Hasty Treat, Scott and Wes talk the appreciation of coding projects that supposedly serve no purpose, but can be great ways to learn something new.
   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.
   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.
   Show Notes 00:39 I am excited about coding
   02:40 Sponsor: LogRocket
   03:58 Sponsor: Linode
   04:24 Projects that serve no purpose
   Bookit Lees meer

   05:46 Scratching your own itch
   10:06 Discount finder
   11:20 Webcam or audio manipulation
   12:43 TTFS
   Parcel

   Vite

   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

9. Supper Club × Syed Balkhi and WordPress

   29 juli 2022 · 57 min

   Afspelen
   In this supper club episode of Syntax, Wes and Scott talk with Syed Balkhi about his experiences blogging and developing plugins in the WordPress ecosytem.
   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.
   Sponsorname - Sponsor Show Notes 00:32 Welcome
   01:52 Guest introduction
   WPBeginner Lees meer

   WP Beginner YouTube

   CSS Tricks

   Smashing Magazine

   04:33 What tips do you have for blogging and audience building?
   AnswerthePublic

   09:09 How do you manage so many people?
   13:07 What was your background before this all got big?
   13:43 Sponsor: Hasura
   15:01 How do you design your products?
   18:40 YouTube, TikTok, and video
   25:12 Why the WordPress hate?
   29:03 What types of websites are being created in WordPress?
   Easy Digital Downloads

   WooCommerce

   MemberPress

   34:13 Sponsor: Lightstep Incident Response
   35:26 What schools are you building?
   Balkhi Foundation

   Pencils of Promise

   40:51 Supper Club questions
   Copyhackers

   Swiped

   Uncanny Automator

   53:07 SIIIIICK ××× PIIIICKS ×××
   ××× SIIIIICK ××× PIIIICKS ××× Streaks App

   Ready Player Two

   WP Forms

   AwesomeMotive

   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

10. Potluck! Node Versions, Old Man Internet, Responsive Design + MORE

    27 juli 2022 · 1 uur 5 min

    Afspelen
    In this Potluck episode of Syntax, Wes and Scott answer your questions about resolving node version errors, using social media, bundler for building React component, and how does Syntax get made?
    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.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes OhMyPosh Lees meer

    OhMyZ.sh

    Warp

    02:34 How do you resolve errors when starting up a project with npm that you haven’t touched in awhile?
    07:50 Any advice for using social media to network?
    16:44 What bundler are you reaching for when building a React component library?
    tsdx

    Vite

    18:37 Do you have experience with optimizing third party scripts like Google Analytics?
    Partytown

    21:37 What’s your opinion on a “offline-first” mentality?
    PouchDB

    CouchDB

    Supabase

    MongoDB Realm

    25:09 Sponsor: Prismic
    26:48 How do you make web components with Svelte?
    Build web components in Svelte

    Using custom elements in Svelte

    30:35 When talking about “responsive” web design do people generally mean using flexbox or grid?
    Responsive Design at 10

    Responsive Web Design

    A Book Apart - Responsive Web Design

    35:24 Sponsor: Sentry
    36:53 Do you have any tips for staying in React-land for just spin…

11. What is Bun? The New JS Runtime

    25 juli 2022 · 24 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about Bun, a new all-in-one JavaScript runtime. What makes Bun so fast? What’s on Bun’s roadmap? And why do we need another JavaScript runtime?
    Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
    Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes 00:23 Welcome
    01:21 Sponsor: Freshbooks
    02:07 Sponsor: Lightstep Incident Response
    03:20 What is Bun?
    Bun Lees meer

    Deno

    08:20 Why is Bun so fast?
    Zig

    12:32 Module support
    15:11 What’s not implemented yet in Bun?
    What’s not implemented in Bun yet

    17:01 Config file in toml
    18:08 Bun roadmap
    Bun roadmap

    20:27 Why do we need another JavaScript environment?
    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

12. Supper Club × Adam Cowley and Neo4j Database

    22 juli 2022 · 57 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Adam Cowley about how Neo4j Database can help when working with data for your next app.
    Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
    Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
    Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
    Show Notes 00:15 Welcome
    01:24 Guest introduction
    03:15 Browser innovation and testing
    05:01 What is a graph database?
    Neo4j Cypher Lees meer

    Sanity Groq

    08:11 Is there a specific type of data that works best in a graph database?
    11:57 Sponsor: Lightstep Incident Response
    13:14 What’s AuraDB vs Neo4js?
    15:01 Whiteboard friendly data model
    19:52 How are GraphQL and graph related?
    23:08 Can you sync with MongoDB?
    24:41 How do you pull data into a div on the web?
    29:19 Why are you used for data science a lot?
    30:43 Sponsor: Gatsby
    31:51 Is visualization an important part of Neo4js?
    Neo4j Bloom

    36:01 Do you have to think about inde…

13. Our Code Styles

    20 juli 2022 · 59 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/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.
    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 00:07 Welcome
    01:56 Functional vs object oriented
    03:49 Interfaces vs types
    05:38 Tabs vs spaces
    07:02 Semicolons vs no semicolons
    08:10 Let vs const
    09:33 Do you explicitly type or allow TypeScript do it’s magic?
    11:26 Naming variables
    Naming convention for programming Lees meer

    15:13 Methods of looping
    18:03 if statement curlys
    20:57 Naming files
    24:46 Inline testing vs running test as a process
    25:31 Sponsor: Freshbooks
    26:37 CSS property:val; or property: val;
    27:40 CSS nesting?
    29:49 Alphabetizing CSS properties
    31:11 Rems, Ems, PX, Etc…
    33:37 How do you center something in CSS?
    35:22 How do you make something 100% height?
    36:52 Sponsor: Sentry
    37:30 Should comments exist?
    Better Comments

    Wes’ custom parser for VS Code

    Todo Tree

    42:31 Creating HTML
    45:28 Components in app or in isolation?
    47:41 Sponsor: Sanity
    48:45 Single component per file vs multiple
    Storybook

    50:22 Naming components
    51:19 General stuff
    53:55 ××× SIIIIICK ××× PII…

14. STUMP’D Interview Coding Questions

    18 juli 2022 · 26 min

    Afspelen
    In this Hasty Treat, Scott and Wes try to stump each other with coding interview questions like what is a higher order component? What is functional programming? And more!
    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.
    Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
    Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
    Show Notes 00:26 Welcome
    01:47 Sponsor: Lightstep Incident Response
    03:00 Sponsor: Sentry
    04:10 What is a higher order component?
    05:34 What is functional programming?
    09:00 What’s the purpose of cache busting and how do you achieve it?
    Wes’ course for Beginner JavaScript Lees meer

    10:37 What is short circuit evaluation?
    13:19 What is a closure?
    15:49 What is the reason for wrapping the contents of a JavaScript source file in a function that is then invoked?
    17:30 Can you describe how CSS specificity works?
    20:15 How does prototypal inheritance differ from classical inherita…

15. Supper Club × 70,000 Serverless Functions with Kristi Perreault of Liberty Mutual

    15 juli 2022 · 56 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Kristi Perreault of Liberty Mutual about why they’re using serverless functions, what languages they write in, managing security and montoring, and Kristi’s journey into tech as a career.
    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.
    Stack Overflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code.
    Listen to new episodes twice a week, wherever you get your podcasts.
    Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
    Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
    Show Notes 00:33 Welcome
    03:24 Guest introduction
    @kperreault95 Lees meer

    Kristi Perreault on Dev.to

    Kristi Perreault AWS Hero

    Liberty Mutual

    04:55 Developers at Mutual Liberty
    07:05 What did you do before serverless functions?
    08:36 Why are you u…

16. Potluck - Peer Dependencies × Vitest × NVM and PNPM × Sprites

    13 juli 2022 · 1 uur 6 min

    Afspelen
    In this potluck episode of Syntax, Wes and Scott answer your questions about peer dependencies, Vitest, NVM and PNPM, using sprites for images, common MongoDB operations, and more!
    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.
    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 00:03 Welcome
    01:53 Configuring home internet routers
    04:42 Scott’s Home Assistant update
    Mushroom Theme Lees meer

    07:52 Could you explain to me peer-dependencies and how does it work?
    13:24 Using Vitest do you still have to transpile code?
    16:14 Can you talk about helpful and common MongoDB operations, beyond just CRUD.
    18:49 How can I update the “updatedAt” field of the document on every save automatically?
    20:40 What is aggregation, and when do you use it?
    25:33 Sponsor: Prismic
    27:27 How does NVM relate to PNPM?
    pnpm

    nvm

    30:45 I’m looking to upskill from front-end JavaScript?
    33:53 Is it possible to have a private NPM repo I can “npm install” from, or do I put my components up on NPM publicly?
    Creating a private npm package

    37:51 Sponsor: LogRocket
    39:14 Should a majority of lodash functions be considered deprecated?
    angus c just

    42:36 Please do an episode on programming/learning with ADHD.
    44:04 Should I still be putting images in sprites?
    49:20 Does Mux have a simple mechanism for adding au…

17. Clamp & Interpolate

    11 juli 2022 · 19 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about clamp and interpolate and how you might want to use them in your next project.
    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.
    NAME - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
    Show Notes 00:25 Welcome
    00:52 Sponsor: Sentry
    01:31 Sponsor: Payments Hub
    02:40 Topic introduction
    05:05 What is Clamp?
    CSS clamp: font-size: clamp(1rem, 10vw, 2rem);
    JavaScript Clamp: const clamp = (num, min, max) => Math.min(Math.max(num, min), max)
    09:12 What is Interpolate?
    D3 Interpolate Lees meer

    12:56 Interpolate in colors
    14:37 Quantize
    D3 Quantize

    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

18. Supper Club × Voice Coding with Pokey Rule

    8 juli 2022 · 58 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Pokey Rule about using his voice to code, and the current state of voice coding software.
    Stackoverflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code.
    Listen to new episodes twice a week, wherever you get your podcasts.
    directus - Sponsor Directus is an open-source data platform that instantly layers on top of any SQL database. Our Data Engine empowers engineers with dynamic REST+GraphQL APIs, workflow automation, built-in auth, caching, and asset transformations. And the included Data Studio democratizes your database, allowing even non-technical users to browse, manage, and visualize database content through a no-code data collaboration app.
    Get started in minutes with a free Directus Community Cloud project.
    Show Notes 00:33 Welcome
    01:35 Guest introduction
    Con 2021 - Cursorless: keyboards and mice are sooo last year!! by Pokey Rule Lees meer

    Emily Shea

    05:12 How does coding with your voice work?
    Talon Voice

    Cursorless Talon

    09:45 How do you handle triggering wrong words?
    11:41 Sponsor: The Stack Overflow Podcast
    12:26 Example of voice coding
    Parrot

    14:21 What are the noises you make for?
    24:29 Working on multiple lines at the same time
    27:37 How do you decide where the hats go?
    31:18 Sponsor: directus
    32:59 What is the community of users like for this?
    Tree Sitter

    “Incremental, zero-config Code Nav using stack graphs” by Douglas Creager

    35:20 Does eye tracking work?
    36:48 What kind of mic do you use?
    DPA Microphone

    The Voice Book

    39:25 Supper Club questions
    Dark Abyss VS Code theme

    Kinesis Freestyle 2

    Charybdis Nano keyboard

    Nexstand

    Arxiv Sanity

    Subvocal Recognition

    Imagen Research

    Midjourney

    54:11 ××× SIIIIICK ××× PIIIICKS ×××
    ×…

19. 10 years of Speaking + Conferences

    6 juli 2022 · 1 uur 2 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk about their experiences speaking at conferences, why they’ve done it, how they prepare talks, and tips for anyone interested in wanting to give talks.
    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.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes 00:02 Welcome
    01:38 Stanley Cup update
    03:13 Legoland update
    04:09 Topic introduction
    Nicole Sullivan Lees meer

    Tweet looking for questions

    05:03 Why speak at conferences?
    08:56 Travelling for free
    09:50 Getting paid to speak at conferences
    12:23 Doing in person workshops
    14:55 How do you get into speaking?
    19:25 Meetups
    20:30…

20. CSS5 Color Functions

    4 juli 2022 · 24 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about new CSS color functions, and tips for viewing the different options and ways of presenting color that are coming.
    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.
    Show Notes 00:25 Welcome Lees meer

    01:35 Sponsor: Linode

    02:22 Where the CSS spec for Color functions are at the moment

    05:13 New CSS Color mix function

    10:29 Color for the color challenged

    12:53 Color contrast function

    15:06 Programatically alter colors

    Anyone have a really great CSS Variables color system strategy?

    Color for the color challenged

    Better color tools

    the color-contrast() function

    Benjamin Moore Paints as CSS Colours

    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

21. Supper Club × Developer Experience with Shawn Wang

    1 juli 2022 · 54 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Shawn Wang about his thoughts on developer experience, why DX is important, and the importance of learning in public.
    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.
    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 00:32 Welcome
    01:56 Guest introduction
    swyx.io Lees meer

    Why Temporal?

    06:09 What is Developer Experience?
    Sarah Drasner

    08:35 Is VS Code considered DX?
    09:28 Why is internal DX important?
    Vercel

    NextJS

    11:44 Is DX helpful to small organizations as well?
    15:27 Parsimony
    Parsimony

    16:43 Is productivity the main focus?
    21:09 Sponsor: Hasura
    22:48 What are your thoughts on React?
    27:31 Designing for API success
    30:44 Sponsor: LogRocket
    32:07 What is external developer experience?
    36:05 Learning in public
    40:46 Supper Club questions
    dx.tips

    Retreon VS Code Theme

    Agnoster ZSH Theme

    freeCodeCamp

    Frontend Masters

    QConf

    Learn in Public

    ××× SIIIIICK ××× PIIIICKS ××× Scott: The Stormlight Archive

    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    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

22. Tips for Communicating

    29 juni 2022 · 59 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk about their tips for better communication in email, Zoom calls, code reviews, or asking for help.
    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.
    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.
    Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
    Show Notes 00:10 Welcome
    01:39 Furnace wiring fun
    Ecobee Lees meer

    Tweet asking for communication tips

    05:37 Email communication
    SavvyCal

    Calendly

    15:07 Recognizing a big ask
    Simeon Griggs - How to ask for things

    24:01 Sponsor: Sentry
    25:52 Code review communication
    30:39 Sponsor: Sanity
    32:22 Sharing information with a video
    35:42 In person or one on ones
    39:36 Video calls
    Storyboard.fm

    40:54 Realize it’s ok to stop talking
    42:27 Sponsor: Auth0
    44:13 Tips from Twitter
    53:08 ××× SIIIIICK ××× PIIIICKS ×××
    ××× SIIIIICK ××× PIIIICKS ××× Scott: Drachinifel

    Wes: Lepy LP-2020A Hi-Fi Stereo Audio

    Sha…

23. Browser CSS Page Transitions API aka Shared Element Transitions

    27 juni 2022 · 21 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web.
    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 WICG Shared Element Transitions Lees meer

    00:21 Welcome

    01:33 Sponsor: Prismic

    02:43 Sponsor: LogRocket

    04:18 Browser animations on the web vs native apps

    06:15 What is the targeted use case for it?

    06:56 Shared Element to Root Transitions

    11:14 Entry and Exit

    17:33 How to enable this in Chrome

    Example Code

    Shared Element Transition history

    Sarah Drasner’s demo

    async function doTransition() { let transition = document.createDocumentTransition(); // Specify offered elements. The tag below is used to refer // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message"; // The start() call triggers an async operation to capture // snapshots for the offered elements, await transition.start(async () => { // This callback is invoked by the browser when the capture // finishes and the DOM can be switched to the new state. // No frames are rendered until this callback returns. // Asynchronously load the new page. await coolFramework.changeTheDOMToPageB(); // Clear the old message if that element is still in the page document.querySelector(".old-message").style.pageTransitionTag = ""; // Set new message as the shared element 'message' document.querySelector(".new-message").style.pageTransitionTag = "message"; // …

24. Supper Club × Authoring Browser Extensions with Tim Leland

    24 juni 2022 · 48 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Tim Leland - developer of browser extensions like WeatherExtension and Link Shortener Extension.
    Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco.
    If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.
    Listen to new episodes every Tuesday, wherever you get your podcasts.
    WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time.
    WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more!
    Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
    Show Notes 00:33 Welcome
    02:21 Guest introduction
    @tim_leland Lees meer

    TimLeland.com

    WeatherExtension

    Link Shortener Extension

    03:40 Why develop browser extensions?
    07:58 How did you market your extensions?
    09:43 Where is a Chrome extension running?
    Caddy

    14:29 What’s your URL shortener extension?
    18:50 OneLink service
    20:30 SSL Domains
    21:35 Sponsor: The Postlight Podcast
    23:00 Maliciousness with URL shorteners
    28:26 How do you come up with ideas?
    30:03 Running Chrome extensions as Firefox extensions
    34:03 Does blogging still work?
    36:38 Sponsor: Sendlayer
    37:53 Supper club questions
    Tim Leland /uses/

    45:12 ××× SIIIIICK ××× PIIIICKS ×××
    Tchibo Coffee machine

    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    Tweet us your tasty treats Scott’s Instagram

    LevelUpTutorials Instagram

    Wes’ Instagram…

25. Home Automation - A Look Ahead

    22 juni 2022 · 1 uur 10 min

    Afspelen
    In this Tasty Treat, Scott and Wes talk about the current state of home automation, and the kinds of software and hardware they’re using in their homes to automate their lives.
    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.
    Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes 00:11 Welcome
    Syntax Ep181 Automating Stuff Lees meer

    02:18 Protocols
    07:35 Software
    Homebridge

    Hoobs

    Home Assistant

    11:28 Using Homebridge
    16:51 Home Assistant vs Homebridge
    24:35 Home Assistant automations
    27:26 Wyze cams
    33:13 Sponsor: Sentry
    34:31 Hardware
    Philips Hue

    Leviton

    Synology

    Node-RED

    Docker Wyze Bridge

    U-Tec

    38:00 Bulbs
    40:24 Buttons
    Lutron Aurora Smart Bulb Dimmer Switch

    Flic Button

    42:53 IR Blasters
    45:57 Sensors
    47:56 Motion sensors
    52:05 Sponsor: Auth0
    53:28 Switched switches
    57:36 Sprinklers
    58:54 NFC
    /r/Homeassistant

    Shelly

    01:04:03 Sponsor: Freshbooks
    01:05:01 ××× SIIIIICK ××× PIIIICKS ×××
    ××× SIIIIICK ××× PIIIICKS ××× Scott: Severence on Apple TV+

    Wes: INKZALL

    Shameless Plugs Scott: Leve…

26. New Viewport Units

    20 juni 2022 · 19 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk about the new viewport units coming to the web - what are they and when can we use them?
    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.io - 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 00:25 Welcome
    01:14 Sponsor: LogRocket
    02:24 Sponsor: Sanity
    04:19 What are viewport units?
    The Large and small and dynamic viewports Lees meer

    05:22 What are the new viewport units?
    Large small and dyanmic viewports

    07:57 What’s small and large?
    11:52 How do viewport units help developers?
    12:39 What about the keyboard on mobile?
    Keycode.info

    16:37 When can we start using new viewport units?
    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

27. Supper Club × Edge Functions and Deno with Eduardo Bouças of Netlify

    17 juni 2022 · 55 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk edge functions and Deno with Eduardo Bouças of Netlify.
    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.
    Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco.
    If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.
    Listen to new episodes every Tuesday, wherever you get your podcasts.
    WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time.
    WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more!
    Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
    Show Notes 00:36 Welcome
    02:31 Who is Eduardo?
    EduardoBoucas.com Lees meer

    @eduardoboucas

    04:29 What is a serverless function?
    06:42 What is the edge and an edge function?
    Edge Functions Explained

    Deno

    08:41 Sponsor: Hasura
    09:18 The internet is global, and server locations matter
    17:09 Chaining multiple edge functions
    20:18 Sponsor: WP Mail SMTP
    21:18 Why use Deno?
    25:06 What are the limitations of using Deno?
    28:12 Why not run NodeJS servers on the edge?
    30:02 Do you see a future where people a…

28. Potluck - Headless WordPress, Databases, Regex

    15 juni 2022 · 1 uur

    Afspelen
    In this episode of Syntax, Wes and Scott answer your questions about headless WordPress, Regex, their health and fitness, CSS custom properties in media queries, and more.
    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.
    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.
    .TECH Domains - 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”.
    Show Notes 00:10 Welcome
    03:30 If I host a NextJS app on Digital Ocean, should I use a Digital Ocean database?
    09:14 Will either of you ever do a regex course?
    Regex101 Lees meer

    13:58 Is it possible to use the WordPress users database as the same database that the app uses?
    WPGraphQL

    18:46 Sponsor: Sentry
    19:43 How is health and fitness going for the both of you?
    26:08 Does Wes know who Gendo Ikari is?
    27:36 Dart popularity follow up
    29:40 Is it vital that I should learn another programming language?
    33:42 Sponsor: Sanity
    34:54 If I’m trying to get my first job in web development, do I need to be familiar with design software?
    Figma

    40:01 Th…

29. I can has() new CSS Selector?!

    13 juni 2022 · 25 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.
    MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
    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 00:25 Welcome
    01:19 Sponsor: MagicBell
    02:31 Sponsor: LogRocket
    03:40 Don’t say stupid
    05:03 :Has
    MDN :Has Lees meer

    // Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find Hi
    // would not find hi
    06:13 Jargon check
    11:01 Some examples
    13:25 Nest navigations
    13:51 Can I use it?
    15:52 Is and Where
    MDN :where

    In the past we would write
    header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } :where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer
    :where(header, main, footer) p:hover {} Also super handy in avoiding css blocks being ignored for unsupported features.
    // Doesn't work div:has(p), div:some_new_selector(p) // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p)) When to use :Where

    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

30. Supper Club × Is No Code going to take our jobs? with Connor Finlayson

    10 juni 2022 · 1 uur 1 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Connor Finlayson about his experience building and teaching no code projects.
    Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco.
    If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.
    Listen to new episodes every Tuesday, wherever you get your podcasts.
    SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd, a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster.
    You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code.
    Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
    Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo, find your missing content workflow piece on our marketplace, and learn more about Strapi and how it help you on our Youtube.
    Show Notes 00:38 Welcome to Syntax
    01:54 Guest introduction
    Unicorn Factory Lees meer

    ConnorFinlayson.com

    Connor’s YouTube channel

    04:49 What is no code?
    10:57 Is no code going to replace programmers?
    14:57 Sponsor: Postlight Podcast
    15:59…

31. Syntax Live at Reactathon

    8 juni 2022 · 51 min

    Afspelen
    In this episode of Syntax, Wes and Scott are live from Reactathon 2022!
    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.
    Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes Live video version Lees meer

    00:32 Welcome

    04:10 Hot Take Tweets

    What is your JavaScript Hot Take or unpopular opinion?

    05:42 Semi colons are not optional

    06:11 For loops are not needed

    07:19 People forget about ES Harmony

    08:11 Sponsor: Sentry

    09:23 A good website should function without JavaScript

    10:28 Classes were a mistake

    10:54 Stay as close to the platform primatives

    11:36 TypeScript is overrated and overhyped

    11:50 Kickin it old school

    PNG Fix

    MM Swap image

    Rounded Corner images (sliding Doors)

    var that = this;

    IE CSS Hack

    Test for Opera var test = /^function \(/.test([].sort);

    25:09 Sponsor: Payments Hub

    26:29 Syntax Error

    Mercurius Library

    31:19 JS or NAY-S

    39:02 Sponsor: Freshbooks

    39:23 Q&A

    Syntax episode with Josh Wardle

    39:57 Using Array methods or for loops

    41:12 What web tech is overhyped and what’s under hyped?

    43:01 Would you rather use Dvorak…

32. Stopping Malicious Actors

    6 juni 2022 · 22 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about ways to prevent malicious people from using or abusing your app.
    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.
    Show Notes 00:26 Welcome
    01:04 Sponsor: Linode
    02:06 Sponsor: Sentry
    02:59 What kind of bad things can happen to your application?
    06:24 How do you stop bad actors?
    12:20 Nonce tokens
    14:10 CSRF
    CSRF Explained Lees meer

    14:50 Captcha
    hCaptcha

    17:06 DDOS
    Cloudlfare DDOS

    17:38 Ban known bad ASNS
    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

33. Supper Club × Coding Burnout and Gardening with Anselm Hannemann

    3 juni 2022 · 1 uur 2 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Anselm Hannemann about burning out, trying out gardening, and how getting away from the screen can help restore your creative energy.
    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.
    Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo, find your missing content workflow piece on our marketplace, and learn more about Strapi and how it help you on our Youtube.
    SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd, a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster.
    You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code.
    Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
    Show Notes 00:39 Welcome
    01:58 Guest introduction
    HelloAnselm.com Lees meer

    Anselm on Twitter

    Web Development Reading List Newsletter

    10:04 Doing things yourself as a form of therapy
    14:33 Sponsor: Hasura
    16:34 Rules for digital usage?
    19:25 Ho…

34. Git in VS Code

    1 juni 2022 · 1 uur 2 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk all about how they use Git inside of VS Code, extensions they use, and the various ways to interact with Git in VS Code.
    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.
    SPONSOR - 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.
    SPONSOR - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes 00:21 Recording Syntax in Riverside
    Riverside Lees meer

    01:22 Welcome
    04:57 CLI vs VS Code
    VS Code

    07:27 Git Jargon
    11:50 UI tools we’ve used
    Git Tower

    Git Kraken

    GitHub for Desktop

    iTerm

    Warp

    Git SCM

    14:09 Ways to interact with Git in VS Code
    19:41 Source control tab
    26:28 Sponsor: Linode
    27:47 File History
    30:29 Diffing or Compare
    36:24 Conflict resolution
    42:56 Automation with post-commit commands
    46:10 Sponsor: LogRocket
    47:14 Extensions
    GitLens

    Git History

    Git Graph

    Conventional Commits

    53:59 Git config tip
    55:24 Sponsor: Freshbooks
    56:02 ××× SIIIIICK ××× PIIIICKS ×××
    ××× SIIIIICK ××× PIIIICKS ××× Scott: Espanso

    Wes:…

35. Cache Control Headers Explained

    30 mei 2022 · 26 min

    Afspelen
    In this Hasty Treat, Scott and Wes answer a question about caching, cache control headers, an explanation of the fields for caching.
    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.
    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 Time to live calculator Lees meer

    Reminx Conf

    Opera

    The United States of Insanity - Official Trailer

    00:24 Welcome

    01:11 Sponsor: Sentry

    02:28 Sponsor: LogRocket

    03:08 My struggle has been with caching, cache control headers and would love a better explanation on some of the fields?

    04:48 What is a header?

    06:05 What is caching?

    08:21 Time to live (TTL)

    09:08 Benefits of a cache

    10:03 Specifying how long to cache

    11:06 max-age

    12:45 stale-while-revalidate

    16:17 stale-if-error

    16:54 must-revalidate

    17:21 private

    18:03 immutable

    19:29 no-transform

    20:45 Cache Control Request Directives

    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

36. Supper Club × Redwood JS with Tom Pretson-Werner

    27 mei 2022 · 58 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Tom Pretson-Werner about his work on RedwoodJS, the importance of documentation, and the new Redwood Startup Fund.
    AIOSEO - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, AIOSEO, also known as All in One SEO for WordPress. It’s becoming one of the most powerful SEO toolkit and is now used by over 3 million websites to improve search rankings.
    Shipshape (Whiskey, Web and Whatnot) - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey!
    Show Notes 00:34 Welcome
    01:36 Guest introduction
    Tom Preston-Werner on Twitter Lees meer

    Kai’s Power Tools

    04:23 Math is weird
    07:21 User interface design
    08:53 Sponsor: AIOSEO
    10:24 What is RedwoodJS?
    RedwoodJS

    Chatterbug

    15:31 Is JavaScript the stack you should be using these days?
    18:40 Freedom vs decisions in software
    Where Good Ideas Come From

    23:10 RedwoodJS docs and video strategy
    RedwoodJS Docs

    Readme Driven Development

    29:13 The tech behind RedwoodJS
    Apollo

    Storybook

    36:20 Sponsor: Shipshape (Whiskey, Web and Whatnot)
    36:58 Redwood Startup Fund
    The Redwood Startup Fund

    42:28 Supper club questions
    VS Code

    Netlify

    Hacker News

    RedwoodJS on Discord

    RedwoodJS Discourse

    RedwoodJS on Twitter

    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    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

37. TypeScript Tooling Explained

    25 mei 2022 · 53 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk through TypeScript tooling, build tools, configs, and editors.
    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.
    MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes 00:08 Welcome
    01:57 Tooling
    tsc Lees meer

    esbuild

    swc

    bun

    Zig

    13:45 LogRocket
    15:01 Server side or node-ish
    Deno

    ts-node

    wds

    26:09 MagicBell
    27:42 Build tools
    Vite

    Parcel

    Nextjs

    Svelte Kit

    Rome

    33:25 Configs
    tsconfig

    typescript-eslint

    39:08 Sponsor: Freshbooks
    40:00 Editors
    VS Code

    Webstorm

    44:58 ××× SIIIIICK ××× PIIIICKS ×××
    ××× SIIIIICK ××× PIIIICKS ××× Scott: Tonie

    Wes: Burst Toothbrush

    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    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

38. Scott’s New Office × The Levelup Lodge

    23 mei 2022 · 40 min

    Afspelen
    In this episode of Syntax, Scott talks about his new office setup where he records videos and podcasts, writes codes, and gets his steps in.
    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.
    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 00:15 Welcome
    01:24 Office ideas
    Heat pumps on Technology Connections Lees meer

    Neewer lighting

    05:00 Sponsor: Sanity
    06:10 Sponsor: Sentry
    07:37 Levelup Lodge tour
    09:40 Lighting
    13:57 The desk
    Karlby Countertop

    Fully Jarvis legs

    Desk Haus

    19:32 Audio gear
    M-Audio BX8

    Gik Acoustics

    Nero

    Scarlett 2i2

    Caldigit TS3 Plus

    Electrovoice RE20

    Cloudlifter cL1

    DBX 286s

    Sony Alpha 7 III

    Audeze LCD 1

    25:25 Tech setup
    33:00 Misc items
    35:43 Movie posters
    Shaw Brothers posters

    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    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

39. Supper Club × Turbo Repo with Jared Palmer

    20 mei 2022 · 58 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Jared Palmer about Turbo Repo, how it fits in your tech stack, and what it was like being acquired by Vercel.
    Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey!
    Show Notes 00:35 Welcome
    Jared Palmer Lees meer

    02:15 What is Turbo Repo?
    Turbo Repo

    Vercel

    tsdx

    03:27 Where does Turbo Repo fit in your stack?
    06:04 What are Google, Meta, or Twitter doing?
    15:35 Sponsor: Whiskey, Web and Whatnot
    16:45 What’s the cost of adding Turbo Repo to a project?
    21:19 Changing based on environmental variables
    23:18 Does this replace how you define your workplace?
    24:08 How do you share the cache?
    25:25 What don’t you cache?
    27:35 What about Gatsby images?
    28:44 Can Turbo Repo help with re-running compiles?
    36:54 Supper Rapid Fire Questions
    Oceanic Next

    GitHub Dark

    Kotlin

    52:47 Selling Turbo Repo to Vercel
    55:49 Shameless Plugs
    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    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

40. Potluck - Protestware × NoSQL × Next.js × ESM × Jest

    18 mei 2022 · 54 min

    Afspelen
    In this potluck episode of Syntax, Wes and Scott answer your questions about protestware, NoSQL, Next.js, the Syntax.fm website, ESM, Jest, and more!
    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.
    Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
    Show Notes 00:10 Welcome
    01:30 What are the good reasons to use nextjs apart from personal preference?
    05:15 How did you decide to build Syntax.fm?
    Uses.tech Lees meer

    09:09 Why does my M1 Mac feel slower than my Intel Mac?
    14:44 Do you alphabetize your larger javascript objects by key name?
    17:14 Sponsor: Prismic
    19:06 Why did you choose noSQL database over SQL databse?
    25:13 What does it mean to support ESM?
    30:23 Sponsor: LogRocket
    31:35 Are open source maintainers doing harm by inserting protestware into packages?
    Protestware found lurking in popular npm package

    40:30 Should I write the game logic on the backend or on the frontend?
    46:30 Sponsor: Auth0
    48:20 Sick Picks
    ××× SIIIIICK ××× PIIIICKS ××× Scott: Eons Mysteries of Time podcast

    Wes: Mr Bio Multi cable

    Shameless Plugs Scott: LevelUp Tutorials

    Wes: W…

41. Why do we need Web Interop? Another Standards Body?

    16 mei 2022 · 22 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about why we need Web Interop? Yet another standards body? Our thoughts on Serverless, Edge Compute, and more.
    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.
    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 00:23 Welcome
    01:25 Sponsor: Sentry
    02:25 Sponsor: Sanity
    04:10 The Syntax Lift adventure
    06:04 A new Community Group for Web-interoperable JavaScript runtimes.
    07:07 JavaScript environments
    09:19 What’s bun?
    Bun Lees meer

    13:28 Are we excited about this?
    16:27 What’s the future of this?
    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

42. Supper Club × NX Monorepos with Victor Savkin

    13 mei 2022 · 1 uur 4 min

    Afspelen
    In this supper club episode of Syntax, Wes and Scott talk with Victor Savkin about NX Monorepo development.
    Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey!
    Visit whiskeywebandwhatnot.fm or find them wherever you listen to podcasts.
    Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at strapi.io/demo, find your missing content workflow piece on our marketplace,and learn more about Strapi and how it help you on our Youtube channel.
    Show Notes 00:29 Welcome
    02:42 Guest introduction
    04:07 What tools did Google use?
    10:49 What do bigger companies use for version control?
    14:40 What is Nx?
    Nx Lees meer

    21:02 How does Nx help you upgrade projects?
    27:42 Sponsor: Whiskey Web and Whatnot
    28:33 How does Nx fit into the existing tooling?
    37:27 Sponsor: Strapi
    39:02 Caching and skipping builds
    44:50 The problem with caching
    48:44 Is it used for images or video?
    51:40 Small projects can benefit as well
    53:13 Lightning questions
    Happy Hacking KB

    IntelliJ

    LunarVim

    VS Code

    02:23 Shameless Plugs
    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    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

43. 10 Nifty Browser APIs

    11 mei 2022 · 1 uur 1 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk about 10 browser API’s you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, and more!
    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.
    Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
    Show Notes 00:13 Welcome
    01:05 Dishwasher talk
    04:30 getUserMedia
    Hair.WesBos.com Lees meer

    Javascript 30

    07:22 FileSystem
    Level Up Tutorials: Browser APIs

    Electron

    12:50 Geolocation
    15:07 Sponsor: Prismic
    16:41 Permissions
    22:36 Web Animations
    Web Animations API

    Framer Motion

    Motion One

    26:31 Resize Observer
    Resize Observer API

    29:33 Sponsor: LogRocket
    30:45 Clipboard
    Clipboard API

    34:10 Web storage
    Web storage

    37:11 Sponsor: Freshbooks
    38:09 SpeechSynthesis
    41:32 SpeechRecognition
    46:14 ××× SIIIIICK ××× PIIIICKS ×××
    ××× SIIIIICK ××× PIIIICKS ××× Scott: RCA to HDMI adapter

    Wes: SlimLED

    Shameless Plugs Scott: LevelUp Tutorials

    Wes: Wes Bos Tutorials

    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

44. TypeScript Fundamentals × Narrowing, Discriminating Unions, and Type Guards

    9 mei 2022 · 23 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about TypeScript Fundamentals, including narrowing, discriminating unions, and type guards.
    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.
    Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
    Show Notes 00:24 Welcome
    01:35 Sponsor: Sentry
    02:23 Sponsor: Payments Hub
    05:21 Intro to TypeScript fundamentals
    06:28 What is Type Narrowing?
    09:32 typeof
    11:58 instanceof
    13:29 Custom typeguards
    16:12 this is
    17:59 discriminated unions
    Tweet us your tasty treats Scott’s Instagram Lees meer

    LevelUpTutorials Instagram

    Wes’ Instagram

    Wes’ Twitter

    Wes’ Facebook

    Scott’s Twitter

    Make sure to include @SyntaxFM in your tweets

45. WTF is the Edge? Edge Compute / Functions

    4 mei 2022 · 57 min

    Afspelen
    In this episode of Syntax, Wes and Scott talk about what edge functions are, the upsides and downsides of edge functions, and what they’re used for.
    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:10 Welcome Lees meer

    01:56 A big announcement

    04:33 What is the Edge?

    08:27 The upsides of edge functions

    12:13 Cold start

    18:21 Sponsor: Linode

    19:24 What are downsides of edge functions?

    27:27 Sponsor: LogRocket

    28:35 What is the use case for an edge function?

    34:52 Authentication

    37:23 Caching

    40:51 Are there flavors of edge functions?

    44:00 Sponsor: Freshbooks

    46:06 What are edge functions not used for?

    47:39 What companies offer this?

    50:58 Sick Picks

    Netlify announcing serverless compute with edge functions

    Syntax 310 Serverless, Deno and TypeScript with Brian Leroux

    Vercel Middleware

    AWS Lambda

    ××× SIIIIICK ××× PIIII…

46. Why do people still use Axios over Fetch?

    2 mei 2022 · 19 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about why people still use Axios over Fetch, and why people wouldn’t use Axios.
    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.
    Show Notes 00:22 Welcome
    Twitter thread of questions from listeners Lees meer

    01:25 Sponsor: Linode
    02:07 Sponsor: Sentry
    03:04 What’s Axios?
    Syntax 224 - Serverless Cloud Functions

    04:10 Why someone wouldn’t use Axios?
    07:06 Interceptors
    09:30 Catching expired JWT and renewing it
    10:26 Upload or download progress events
    12:03 Valid status API
    13:45 Defaults
    15:32 Custom timeouts
    Tweet us your tasty treats Scott’s Instagram

    LevelUpTutorials Instagram

    Wes’ Instagram

    Wes’ Twitter

    Wes’ Facebook…

47. JavaScript × STUMP’D

    27 april 2022 · 51 min

    Afspelen
    In this episode of Syntax, Wes and Scott ask each other hiring questions asked of JavaScript developers in job interviews.
    Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
    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 JavaScript Interview Questions Lees meer

    00:13 Let’s get STUMP’d
    01:08 Cleaning out the garage
    05:05 What are 4 methods available on weakmap?
    07:07 How do you make an object iterable in JavaScript?
    09:29 How do you make the first letter of a string into uppercase?
    10:26 What is the typeof operator?
    11:53 What are classes in ES6?
    13:21 How do you enumerate key and value pairs of an object?
    15:44 Kontent by Kentico
    17:08 What is an event queue?
    21:05 Why do you need JSON?
    24:49 Why do you need a promise?
    25:45 Explain the range overflow property
    28:21 How do you return all matching strings against a matching expression?
    30:14 Sponsor: LogRocket
    30:51 What is a thunk function?
    33:46 Can you redeclare let or const variables?
    34:17 What are enhanced object literals?
    35:56 What is the difference between call, apply, and bind?
    38:52 Sponsor: Freshbooks
    39:57 What are benefits of modules and why would you need them?
    43:50 ××× SIIIIICK ××× PIIIICKS ×××
    48:47 Shameless Plugs
    ××× SIIIIICK ××× PIIIICKS ××× Scott: Who ARTed Podcast

    Wes: Patio furniture
    Shameless P…

48. Building a Coupon Engine

    25 april 2022 · 26 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about the coupon engines they’ve built and use on their courses.
    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 00:26 Welcome
    01:12 Sponsor: Prismic
    02:32 Sponsor: LogRocket
    04:06 What we use for coupons
    Stripe Lees meer

    Braintree

    06:27 Structure of our coupons
    10:43 Products and carts
    13:59 Country validation
    15:11 Affiliate codes
    16:36 Chaining rules together
    19:41 Tracking coupons
    20:54 Automatically applied coupons
    22:12 Quick tips for coupons
    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

49. Potluck - Working on a Team × Dealing with Imposter Syndrome × Animating on the Web × Icon Libraries × Demanding Clients

    20 april 2022 · 1 uur 1 min

    Afspelen
    In this potluck episode of Syntax, Wes and Scott answer your questions about working on a team, dealing with imposter syndrome, animating on the web, using the table element, landing pages for apps, and building full stack apps with NextJS.
    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.
    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.
    Show Notes 00:10 Welcome
    01:05 The mustard bandit podcast
    02:54 How can Developers work with designers and Product managers seamlessly?
    06:37 How do I deal with imposter syndrome?
    10:46 Any good coffee shops in Denver?
    17 of Denver’s Best Coffee Shops Lees meer

    11:38 Do you use Table element or CSS Grid for tabular data?
    13:18 How do you manage animations without a library?
    Greensock

    17:05 Sponsor: Sentry
    18:01 What do you use for icon libraries?
    Icons8

    Font Awesome Icons

    React Icons

    Flat Icons

    25:10 How do you unregister the service worker to clear site data?
    Syntax 346 - Selling T Shirts

    29:15 Sponsor: Sanity.io

    30:47 Since NextJS has API routes, could you build a full-stack application using just NextJS?
    35:41 Do you keep your landing pages and home pages seperate from your app?
    37:35 Where’s the line for moving something hosted on a developer server to moving it to production?
    CodePen

    R…

50. Svelte Cubed + 3D In Browser

    18 april 2022 · 20 min

    Afspelen
    In this Hasty Treat, Scott and Wes talk about Svelte Cubed and working in 3D in the browser.
    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 00:21 Welcome
    01:00 Sponsor: LogRocket
    01:41 Sponsor: Prismic
    02:45 Intro to 3D in the browser
    Svelte Cubed Lees meer

    Getting started with Svelte Cubed

    03:49 Declarative vs imperative
    07:43 How does Three.JS work?
    ThreeJS

    12:28 Orbit controls
    15:47 Svelte Cannon
    Svelte Cannon

    Blender

    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