Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
Website : https://syntax.fm
IPFS Feed : https://ipfspodcasting.net/RSS/166/Syntax-TastyWebDevelopmentTreats.xml
Last Episode : January 27, 2023 6:00am
Last Scanned : 4.9 hours ago

Episodes
Episodes currently hosted on IPFS.

In this supper club episode of Syntax, Wes and Scott talk with Caleb Porzio about Livewire, Alpine.js, what is it with PHP devs making cool stuff, TypeScript thoughts, and more.
Show Notes
- 00:36 Welcome
- 01:05 Buffalo and Canada
- History of Target in Canada
- 06:23 Who is Caleb Porzio?
- @CalebPorzio on Twitter
- 09:26 What is Livewire?
- Livewire
- Alpine.js
- HotWired
- 12:58 Are these MVC frameworks?
- 18:11 What is the process behind the scenes?
- 20:36 How does Hotwire handle rendering?
- 25:38 What is Alpine.js?
- 33:19 Why are PHP devs making interesting things?
- Laravel
- Tailwind
- 40:32 What is a nextTick in JavaScript?
- Microtask Guide
- 46:20 TypeScript thoughts
- 48:05 Server side rendering?
- Morph
- 49:25 Supper Club questions
- Ergodox Keyboards
- Glove 80 Keyboards
- Natty Theme
- MonoLisa
- 59:40 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
Shameless Plugs
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

In this episode of Syntax, Wes and Scott look through the results of the State of JS survey for 2022.
Show Notes
-
00:26 Welcome
-
01:24 Thoughts on the survey in general
-
04:24 Country of origin
-
05:53 Salaries
-
08:14 Higher education
-
08:58 JavaScript features
-
15:41 Browser APIs
-
21:15 Library Usage
-
26:11 Interest in frontend frameworks
-
28:40 Framework usage
-
31:41 Rendering frameworks
-
34:57 Build tools usage over time
-
39:37 Monorepo tools
-
46:41 Backend frameworks
-
47:42 JavaScript run times
-
51:01 TypeScript JavaScript balance
-
52:17 JavaScript flavors
-
57:03 Resources
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

In this Hasty Treat, Scott and Wes explain what container queries are, use cases for them, new units of measurement, and possible issues with container queries.
Show Notes
- 00:28 Welcome
- 01:46 What are Container Queries?
- Tweet about Container Queries
- 03:28 Use cases for Container Queries
- Home Assistant
- Can I Use?
- 06:11 The syntax of container queries
- 13:42 New units
- 22:27 Old iOS versions may cause issues
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

In this supper club episode of Syntax, Wes and Scott talk with Simen & Espen from Sanity about what Sanity is, who uses Sanity, what is a content lake, how Sanity works with React or TypeScript, what GROQ is, how portable text works, and of course, the supper club questions.
Show Notes
-
00:36 Welcome
-
01:37 Who are you and what is Sanity?
-
04:04 What kinds of services use Sanity?
-
06:18 What is a content lake?
-
07:26 Enabling code access to Sanity Studio
-
13:12 Implenting Sanity into a React app
-
14:49 What is GROQ?
-
21:04 Is GraphQL still the best way to query data?
-
25:32 Workflows in Sanity
-
27:48 What is portable text?
-
35:19 How does Sanity work with TypeScript?
-
38:51 Ecommerce options with Sanity
-
41:29 Supper club questions
-
50:33 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
Shameless Plugs
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

In this potluck episode of Syntax, Wes and Scott answer your questions about HTML tags, budgeting, recession proofing your business, software dev vs software engineer, taking payments, and more.
Show Notes
- 00:11:11 Welcome
- 01:29:11 When should you use article and section in HTML?
- 08:03:08 Does your business suffer from the economic recession?
- 15:47:18 How do you manage your money or budget?
- PlainTextAccounting
- YNAB
- Copilot
- 20:51:11 What should I consider using? There’s a lot of options. CommonJS, AMD, UMD, es modules?
- 26:30:09 What’s the difference between a software developer and software engineer?
- 30:36:11 How do you handle payment for your course platforms?
- Braintree
- Gumroad
- Paddle
- Stripe
- 38:33:23 Why is this false? “I’m a string” instanceof String
- 40:38:22 Do you all use Mac spaces for organizing windows?
- Arc
- 45:55:21 Do you have any tips that would help my front end team avoid rendering a DOM with invalid element nesting?
- 48:48:14 Would you do an episode commenting on the CSS Nesting survey released this week?
- Help Choose CSS Nesting Syntax
- 53:57:01 How do you guys go about prioritizing your work?
- Height.app
- Things
- 58:50:19 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
- Scott: Bundle of Eucalyptus
- Wes: Recycling bin brackets
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

In this Hasty Treat, Scott and Wes talk about the differences between building it yourself vs paying for a service to do it for you, such as cron jobs, checkout, hosting, images, video, and more.
Show Notes
- 00:24 Welcome
- 03:19 Buying vs building topic
- 07:09 Strategy
- 09:50 Escapability
- 14:56 Services You Could Use
- Sentry
- Postmark
- 16:34 Efficiency of using a service
- 18:08 Cron jobs
- 20:43 Checkout
- Recurly
- Lemon Squeezy
- Stripe
- Braintree
- 24:29 Hosting
- 26:00 Screenshots and open graph images
- Cloudinary
- Vercel OG
- Puppeteer
- 29:25 Search
- Algolia
- Elastic
- MongoDB
- 33:32 Auth
- PasswordJS
- 36:55 Images
- 39:46 Video Hosting
- Vimeo
- Mux
- Amazon Kinesis
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

In this supper club episode of Syntax, Wes and Scott talk with Katherine Mello about her journey into coding from liberal arts to bootcamp education, data visualization, and coding for a sustainable focused company.
Show Notes
- 00:34 Welcome
- 01:10 Guest introduction
- Rolling With Kat
- 03:05 Bag milk?
- 04:34 What is Tangible Materials?
- Tangible Materials
- 07:27 How did you end up at Tangible?
- Full Stack Academy
- 10:05 Are bootcamps worth it?
- 14:46 How important were in person classes to you?
- All We Can Save
- Braiding Sweetgrass
- 20:46 What do you enjoy about data visualization?
- D3
- Data visualization society
- Three.js
- Observable
- Color Wheel
- 27:21 Working at WeWork
- WeWork: Or the Making and Breaking of a $47 Billion Unicorn • Official Trailer
- 34:14 What is your tech stack at Tangible?
- 38:26 What backend would Wes use for a project?
- Svelte Kit
- Supabase
- Super Bass
- 42:10 Is there environmental web hosting?
- 43:47 Supper Club Questions
- Uplift Desks
- 50:22 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
Shameless Plugs
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

In this episode of Syntax, Wes and Scott talk through their goals for 2023 including coding, tooling, courses and platforms, social media, and fitness.
Show Notes
- 00:17 Welcome
- 02:38 What’s a cantina?
- 06:33 Scott’s coding goals
- Animated grid layouts
- Tauri
- 14:39 Wes’ code goals
- Uses
- Stripe
- Stripe Elements
- Shoelace
- 23:17 Tooling
- Vite Plugin List Directory Contents
- 26:39 Scott’s courses and platform
- LevelUp.video
- 29:36 Wes’ courses
- Wes Bos Tutorials
- 31:11 Scott’s fitness goals
- 35:55 Wes’ fitness goals
- 39:44 Apple Watch for fitness
- 41:54 Syntax podcast goals
- 50:13 Scott’s social media goals
- Scott on TikTok
- LevelUp Newsletter
- 52:35 Wes’ social media goals
- Wes on TikTok
- 58:02 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
- Scott: The Menu
- Wes: JB Weld Clearweld, big version
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

In this Hasty Treat, Scott and Wes talk about Satisfies and as const.
Show Notes
- 00:25 Welcome
- 02:04 Xmas recap
- Peloton
- 04:09 Satisfies and as const
- 06:16 What is const?
- 10:30 Helping with currency
- 12:44 Bos monster server update
- 14:13 Satisfies
export const currencies = { USD: 'US Dollars', CAD: 'Canadian Dollar', EUR: 'Euro', } as const; export type Currency = typeof currencies; export type CurrencyCode = keyof Currency;
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

In this supper club episode of Syntax, Wes and Scott talk with Sarah Drasner about her new book, Engineering Management for the Rest of Us, what it’s like moving from management to coding and back, the book writing process, and her Fortnite VS Code theme.
Show Notes
- 00:36 Welcome
- 01:59 Who is Sarah Drasner?
- @Sarah_Edo on Twitter
- @Sarah_Edo on Mastodon
- @Sdras on CodePen
- @SDras on GitHub
- SarahDrasnerDesign.com
- Engineering Management for the Rest of Us
- Amazon: Engineering Management for the Rest of Us
- Netlify
- 05:25 How did you figure out what to do in management?
- 07:20 How do you get out of engineer’s way?
- The Engineer Manager pendulum
- 09:39 Do you spend time on making the person happy in the job?
- 15:51 Should managers code?
- 19:16 Was it difficult to step out of coding?
- 21:07 Why do people leave jobs?
- 24:04 Dealing with conflict and reorgs
- 28:36 What makes a good retro?
- 31:25 What was your process for writing a book?
- SVG Animations: From Common UX Implementations to Complex Responsive Animation
- Scrivener
- Egghead
- Mayfly Design
- Sarah Drasner’s articles on CSS Tricks
- Sarah Drasner’s articles on Smashing Magazine
- 43:44 Supper Club questions
- Sarah Drasner’s VS Code snippets and themes
- Creating a VS Code theme
- Wes Bos Cobalt 2 VS Code theme
- Partytown beta
- 53:10 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
Shameless Plugs
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

In this episode of Syntax, Wes and Scott talk about their predictions in web development for 2023.
Show Notes
- 00:07 Welcome
- 01:25 SSR JS sites more the norm
- 03:32 React doing forms
- 05:39 TypeScript Inferred becomes hot
- 08:11 Deno gets hotter
- 12:51 JS Runtimes Mature
- HTMX
- 15:00 We will see a new TS Type Checker written in Rust
- 19:20 New JS APIs
- 23:37 Writing towards Winter CG Spec Popular. “Worker Ready” script
- STC
- 27:05 A new JS framework
- SolidJS
- Qwik
- 29:44 Page Transitions API
- 32:40 Scott was right / Scotts gonna be right
- 34:06 Rust becomes more Popular
- 36:00 React Beta Docs launch after 5 year dev cycle
- 37:45 CSS Container Queries in Production
- 41:07 Svelte and Sveltekit Glow Up
- 43:38 CSS Subgrid
- 49:19 WASM
- 51:51 AI
- Open AI
- 53:16 Houdini
- 54:30 People souring on React, Eslint
- 57:47 Machine learning
- 01:08 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
- Scott: Cron
- Wes: Wyze Headphones
Shameless Plugs
- Scott: LevelUp SvelteKit Tutorial
- 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

In this episode of Syntax, Wes and Scott talk through some TypeScript Fundamentals around type narrowing, type guards, and type predicates.
Show Notes
- 00:24 Welcome
- 01:40 Rocking predicates
- 02:54 What is a type in TypeScript?
- 04:11 Type Narrowing
- 08:18 Type Guard
- 16:19 Type Predicates
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

In this supper club episode of Syntax, Wes and Scott talk with Kilian Valkhof about his work on Polypane, a browser for developers. How is Polypane built? Why does he have a focus on accessibility in Polypane?
Show Notes
- 00:39 Welcome
- 01:48 Who is Kilian Valkhof?
- kilianvalkhof.com
- @kilianvalkhof on Twitter
- 04:50 What is Polypane?
- Polypane
- @Polypane on Twitter
- FromScratch
- 09:31 How is Polypane built?
- 14:18 What about the Dev tools tab?
- 20:15 Outline tab
- 23:23 Color picker
- 27:33 Canvas rules and guides
- 32:16 Accessibility background and tools
- 40:28 How do you parse the CSS?
- 42:51 What else do you want people to know about Polypane?
- 44:42 Supper Club questions
- 53:59 SIIIIICK ××× PIIIICKS ×××
Shameless Plugs
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

In this episode of Syntax, Wes and Scott revisit their 2022 predictions and see which ones they got right, and which they got wrong.
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:09 Welcome
- Syntax 420: 2022 Predictions
- 01:44 Svelte popularity
- Svelte
- Svelte Kit
- 04:09 Next.js data layer
- 05:06 Web components UI
- Open UI
- 06:19 Rust popularity
- Rust
- 10:07 Serverless and Cloud functions
- 10:42 Tailwind popularity
- 16:20 Sponsor: Sentry
- 17:59 Next gen dev tools
- 19:46 CSS Container queries
- 21:45 GraphQL
- 26:26 Deno
- 29:44 TypeScript
- 34:28 Sponsor: Sanity
- 35:07 Server comeback
- 36:21 Checkouts and payment processers
- Lemon Squeezy
- 43:05 Sponsor: Auth0
- 44:18 Temporal API
- 46:44 Remote dev thin client popularity
- 49:49 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ×××
- Scott: JADENS Label Maker Machine with Tape
- Wes: Chipolo One Spot
Shameless Plugs
- Scott: LevelUp Svelte Kit Tutorial
- 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

In this Hasty Treat, Scott and Wes talk about the current state of building desktop apps with Electron or Tauri.
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.
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.
Show Notes
- 00:33 Welcome
- 01:18 Sponsor: Sentry
- 02:47 Sponsor: Prismic
- 04:01 Our experience with building desktop apps
- Level Up Tutorials: Level 1 Electron
- Hair.WesBos.com
- 10:04 Frameworks for building apps
- 10:56 Tauri vs Electron
- Tauri
- Electron
- 23:38 Tooling
- vite-plugin-electron
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