In this supper club episode of Syntax, Wes and Scott talk with Justin Fagnani about working with web components, using Lit, how routing and state are handled, thoughts on signals, and what is the future of web components?

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.

• 00:49:11 Guest introduction

• 01:03:00 Sponsor: Sentry

• 02:02:11 Why do people use React when we have web components and lit?

• 03:57:14 Who is Justin Fagnani?

• Justin Fagnani

• Justin Fagnani (@justinfagnani)

• Justin Fagnani · GitHub

• Justin Fagnani - Fosstodon

• Lit (@buildWithLit)

• Lit

• Google App Maker

• 04:55:02 What are web components?

• The Extensible Web Manifesto

• 05:59:08 What is the shadow dom?

• 08:56:02 Was there an intention for a layer on top of web components?

• 13:22:09 What is Lit?

• 16:19:23 What are the benefits of using a library for web components?

• Custom Elements Everywhere

• 21:20:14 Why would write in React and not in web components?

• 24:24:18 How does CSS work with web components and Lit?

• 28:00:14 Using constructable stylesheets

• ::part

• Constructable stylesheets/

• 29:58:18 Does Lit do anything with CSS?

• 32:01:01 Does Lit do routing?

• Lit Mobx

• 34:06:02 How does Lit work with state?

• 34:52:15 What about signals?

• 38:49:00 Is Server Side Rendering possible with web components?

• 41:03:07 What websites are using Lit and/or web components?

• 44:26:08 What’s the difference between Lit and Polymer?

• 45:44:17 What is the future of web components?

• 48:09:14 Supper club questions

• GitHub - w3c/csswg-drafts: CSS Working Group Editor Drafts

• 56:36:20 SIIIIICK ××× PIIIICKS ×××

• 55:27 SIIIIICK ××× PIIIICKS ×××

• The Last of Us | Official Website for the HBO Series | HBO.com

• Lit
• Lit Discord

• 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 what to do with client projects, testing animations, evaluating front-end frameworks, tools to use when learning, and coding related injuries.

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.

• 00:10 Welcome
• 00:25 Sponsor: Sentry
• 01:22 Landscaping update
• 02:27 What do you do when you are done a client project?
• 10:09 Should I keep animations in our tests so our tests match prod behavior?
• 14:05 How does ChatGPT fill the responses to the prompt?
• 17:14 What is the best way to evaluate and choose a front-end framework for a project?
• 21:10 Should functions only be used strictly for code that is going to be re-used?
• 26:03 What kind of tools and processes do you use when learning?
• Obsidian
• Roam Research – A note taking tool for networked thought.
• 30:19 What are your opinions on using “display: grid” simply to be able use the gap property on the elements inside?
• 33:57 What do you guys think of being a 1-language dev?
• 36:38 What are some tips you have to push back on requirements from clients?
• 41:11 Have you guys ever had any coding related stress injuries, like back issues or carpal tunnel?
• MoErgo Glove80 Wireless Split Ergonomic Keyboard
• GitHub Next | Hey, GitHub!
• 48:41 What do you think of using “Feature Flags” in the codebase to enable / disable features at runtime?
• 51:19 SIIIIICK ××× PIIIICKS ×××

• Scott: History for Granite
• Wes: GreatScott!, bigclivedotcom

• Scott: LevelUp Discord
• Wes: Wes Bos Tutorials

• 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 what can be done with the OpenAI API, how to get started with it, pricing, tuning your model, and gotchas for getting started with the OpenAI API.

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.

• 00:26 Welcome
• 01:17 Sponsor: Sentry
• 02:39 What is the OpenAI API?
• 05:11 Getting started with the API
• 07:41 How run OpenAI
• OpenAI API
• 14:16 GPT4 update
• 17:58 Tune your models
• 19:46 Generating questions with ChatGPT
• 24:30 Speech to text
• Otter.ai - Voice Meeting Notes & Real-time Transcription
• Descript | All-in-one video & podcast editing, easy as a doc.
• 26:12 Related API
• 27:33 LangChain
• 32:12 Save your replies

• 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 Travis Neilson about his work at Google, YouTube music, and where AI is at now, and where it’s headed in the future.

• 00:37 Welcome
• 00:55 Guest introduction
• Travis Neilson (@travisneilson)
• Travis Neilson dot com
• Travis Neilson on Skills Gap, Design, Focus and Working at Google — Syntax Podcast 142
• Awwards Conference talk
• https://www.youtube.com/LittleMusicBoxes
• 06:29 Convos about AI
• 07:49 How do we keep humanity with AI?
• 15:42 Is this the printing press or is this putting everyone out of a job?
• 19:21 What is Google using AI for these days?
• 25:59 How do we keep human interface via AI?
• 31:18 What is the evolution of AI chat windows?
• 34:05 How do you nourish your AI with data?
• 39:59 Halluncinations in AI
• 47:46 What models are exciting to you?
• 52:01 We’re building the window for the next generation
• 54:55 SIIIIICK ××× PIIIICKS ×××

• The Age of Spiritual Machines
• The Singularity is Near
• The Shape of Design

• 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 answer your questions about learning web dev at an older age, making your apps look better, building a video streaming site, mono repo vs regular, and more!

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.

• 00:11 Welcome
• 00:31 Sponsor: Sentry
• 01:43 DST update
• Tales of Taboo
• 03:45 Is it too late to learn web dev at an older age?
• 10:20 How do people produce work so quickly?
• 13:47 How can I make my web apps look better visually?
• Dribbble - Discover the World’s Top Designers & Creative Professionals
• Tailwind UI - Official Tailwind CSS Components & Templates
• CSS · Bootstrap
• 18:41 Not losing the niceties with not having to do a full page load
• 22:23 Should I use a script to generate an index JS/TS file?
• 24:55 If you were going to make a video streaming website, what technologies would you use?
• The API to Video | Mux
• Vimeo – Video Experience Platform
• Live Streaming on AWS | AWS Solutions
• Video on Demand | AWS Solutions
• Cloudflare Stream | Video streaming made easy and affordable at scale
• 29:11 What should I do if my boss wants me to move up the business ladder?
• 31:58 I’m confused about hydration in frameworks like SvelteKit.
• 37:07 What’re the advantages of a mono repo over a regular one?
• 39:50 Is it better to stay put at a place even if you’re unhappy right now?
• 43:13 How should I ingest tv scripts into a database?
• 46:24 SIIIIICK ××× PIIIICKS ×××

• Scott: The Stronger By Science Podcast
• Wes: Merten and Storck Carbon Steel

• Scott: LevelUp Tutorials
• Wes: Wes Bos Tutorials

• 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 why you might need to tunnel to your local computer, and how to set that up securely.

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.

• 00:24 Welcome
• 01:09 GitHub tarball web streams
• 05:09 Sponsor: Sentry
• 05:48 Why would I need security locally?
• Caddy Server
• 11:23 Cookie issues
• 13:04 Examples of things that need a secure context
• MDN Features restricted to secure contexts
• 14:58 What is tunneling?
• 19:22 Cloudflare Tunnels
• Cloudflared
• Cloudflare Tunnel
• 20:50 nGrok
• ngrok
• 23:22 Local tunnel
• Local Tunnel
• 24:55 Tunnel to
• Tunnel to dev - Expose your local web server to the internet with a public URL
• 26:02 Cloudflare subdomain

• 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 Dax Raad about building on serverless infrastructure, Next.js, and SST.

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.

• 00:36 Welcome
• 01:05 Sponsor: Sentry
• 02:05 Who is Dax Raad?
• Dax on Twitter
• thdxr.com
• Tomorrow.fm Podcast
• SST.dev
• 04:22 Why doesn’t AWS have a simple way to build on top of it?
• 07:46 What is Open Next?
• Vercel
• Next.js
• Open-Next.js
• 10:25 How many people are involved in building Open Next?
• 11:14 Mapping Next.js to Amazon products
• 14:25 What is the edge?
• 18:56 Pricing in serverless
• 23:33 What about image assets?
• 25:02 Is the CDK a layer on top of something Amazon is doing?
• Amazon CDK
• 27:23 What is terraform?
• Terraform
• 28:50 What is SST and why SST?
• 30:54 Do I build with SST or on top of SST?
• 32:06 How do you do local development with SST?
• 37:01 What about databases with SST?
• 40:12 What about build pipelines?
• 42:28 What is Seed?
• Seed
• 43:52 Any advice for someone learning AWS?
• SST on YouTube
• 46:05 Supper Club questions
• Neovim
• Toyko Night theme
• Nerd Fonts
• Astro
• TypeScript
• Alacritty
• i3
• Cloudflare
• Inside the Meteoric Rise—and More Epic Flop—of HQ Trivia
• 52:45 SIIIIICK ××× PIIIICKS ×××

• Planetscale

• Rebase.tv
• @RebaseTV on Twitter
• Tomorrow.fm episode on Rebase.tv

• 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 are in the same room together brainstorming new ideas for the Syntax.fm website: search, transcripts, video, tags, audio player, podcast hosting, and more!

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.

• 01:08 Sponsor: Sentry
• 01:43 Brainstorming for Syntax’s new website
• 02:27 Are there good podcast websites out there?
• 03:26 Homepage design
• 07:33 How would you handle login?
• 09:40 Search on the site
• SvelteKit docs
• Flexsearch
• 13:59 Transcripts
• Open AI Whisper
• Whisper AI for podcasters
• 18:25 The player
• 21:11 Tagging
• 23:45 Video
• Linus Tech Tips - WAN Show
• 27:45 Show notes
• 29:57 Surfacing good content on the podcast
• 35:30 Interactions
• 36:25 Deploy to Podcast Host
• Libsyn
• Editor Chris on Mastodon
• 38:43 Code base
• Syntax website on GitHub
• 45:21 Listener feedback
• 46:27 SIIIIICK ××× PIIIICKS ×××

• Scott: Screen door dog
• Wes: Apple Watch bands

• Scott: LevelUp Tutorials
• Wes: Wes Bos Tutorials

• 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 the what, why, and how of web streaming, and some of the jargon you might encounter with web streams.

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.

• 00:26:11 Welcome
• 00:59:07 Sponsor: Sentry
• 01:39:17 What are Web Streams?
• 03:15:11 Why are web streams picking up steam lately?
• 04:41:21 How are web streams streaming?
• 09:28:11 Searching a database can use streaming
• 13:07:11 Web stream jargon
• 18:06:11 FileReader is a Stream
• 19:31:05 Other Types of Streams
• Cloudlfare HTML Rewriter
• 21:50:05 ReadableStream and Writable Stream
• 27:23:00 Creating a Writable Stream
• 28:39:11 TextDecoderStream

• 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 Eric Sartorius about his life as a digital nomad - including recently climbing Kilimanjaro, his tips for travel deals, crazy experiences while travelling, and what he brings on the road with him.

• 01:02 Guest introduction
• EricSartorius.com
• Eric on GitHub
• PureFunc
• Train Surfing
• Get Stream
• 02:51 Where have you travelled?
• 04:27 What are the challenges of being a digital nomad?
• 09:08 How do you research before travel?
• 13:04 How do you approach applying for a job?
• 21:10 Do you travel with other digital nomads?
• R16 video
• 22:43 What are the best locations you’ve been?
• 24:21 What about health and insurance?
• Tiny Toones
• TSA post raw meat on carousel
• 28:21 What motivated you to want to climb Kilimanjaro?
• 41:14 What gear do you travel with for web dev?
• Osprey Talon 33
• Packing cubes
• Outlier
• Google Fi
• Google Flights explore
• 51:12 Using credit card points for flights
• 54:45 How do you handle customs?
• 00:13 SIIIIICK ××× PIIIICKS ×××

• Comfort 2.0 Czech sock shoes

• PureFunc
• @TheEpicLife on Instagram
• Pamoja Safaris

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets