Dev Tools Power — Elements Tab

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

13 Mar 202334min

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. Show Notes 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 ××× ××× SIIIIICK ××× PIIIICKS ××× Comfort 2.0 Czech sock shoes Shameless Plugs PureFunc @TheEpicLife on Instagram Pamoja Safaris 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 Mar 20231h 3min

In this episode of Syntax, Wes and Scott talk through all the reasons your website might be slow, and how you can troubleshoot a slow website such as issues on the server, large assets, caching, CSS, JavaScript, latency, 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. Show Notes 00:11 Welcome Glove 80 keyboard Raycast 03:06 Sponsor: Sentry 05:15 What makes a website slow? Uses.tech 06:29 Server Generation Times 13:33 Large payloads Redis Gzip Brotli compression Cloudflare Cloudinary 18:13 Assets being too large 23:01 Caching assets 28:25 CDN 30:35 Caching 101 37:04 Render blocking requests 40:01 CSS 42:25 JavaScript 44:51 Latency 49:17 Flash of dark mode or unsigned out 55:00 Data uris Content-visibility vite-plugin-singlefile Pool in your URL 58:11 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: 3Blue1Brown Wes: Suavecito Firme Clay Pomade 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

8 Mar 20231h 5min

In this Hasty Treat, Scott and Wes talk about two new services that allow you to run Node in the browser, WebContainers + NodeBox. Why Node in the browser? How does it work? And what are the differences and limitations of the services? 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:25 Welcome 01:14 Sponsor: Sentry 02:45 Webcontainers and NodeBox Introducing WebContainers Code Sandbox CodePen Replit GitHub Codespaces 06:42 Why Node.js in the browser? 11:08 How does it work? 13:10 Clientside APIs 14:27 Using iFrame to proxy messages 17:39 Are these open source? 19:22 Differences between the two services 21:10 Wes to Figma, Scott to Penpot Figma Penpot 24:51 Limitations 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 Mar 202329min

In this supper club episode of Syntax, Wes and Scott talk with Steve Sewell about Builder.io, Qwik, Partytown, and the tricks and tips he’s learned in building apps for the modern web. Show Notes 00:37 Welcome 01:14 Guest introduction Steve on Twitter Steve on GitHub Builder.io Builder.io/demo 04:07 Builder works with any tech stack? 06:29 Where is the structure of the site coming from? 07:28 What is Builder.io? 11:34 What’s the workflow for updating content? 13:03 What is Builder built in? Mobx 14:36 Moving from Figma to HTML 18:41 Is an app like this divs all the way down? 24:55 Stories of browser gremlins building? 26:29 Advice for anyone building drag and drop Fullstory 29:04 Does FPS play a part in development? 33:31 Do you use SVG? 36:15 Where does Qwik and Partytown fit into all of it? Qwik Partytown 46:45 How does accessibility play into Builder? 49:44 Supper club questions 54:30 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Dead Space Remake 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 Mar 202359min

In this episode of Syntax, Wes and Scott talk about the current landscape of AI, how AI is trained, is AI going to take your job, who’s going to train AI, and adding AI to your applications. 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:11:10 Welcome 01:58:01 Sponsor: Sentry 03:16:05 What this episode is not going to be 07:36:11 The current landscape Chat GPT GitHub Copilot Warp Completions Midjourney Bing AI From Bing to Sydney Why a Chat with Bing Left Me Deeply Unsettled Tensorflow Stable Diffusion Amazing AI Dall E 15:26:11 Timeline of growth of AI AI Timeline 16:24:11 What is a model for AI? 24:20:11 How do you use AI? 33:14:00 Code brushes 35:57:18 Midjourney Yandex 40:13:18 Is it going to take your job? Canva Cal 50:22:19 Cost prohibitive 52:26:20 Who’s going to train the robots? 57:29:12 Adding AI to your apps 58:50:11 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Motion sensor Wes: Apple Watch Ultra 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

1 Mar 20231h 6min

In this Hasty Treat, Scott and Wes talk about the difference between sloppy code and clean code, how to establish rules for your code base, and how to enforce your rules. 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:24 Welcome 00:46 Sponsor: Sentry 01:51 Uses performance issues Uses.tech 04:23 Understand Sloppy Code 10:17 Syntax website timestamp issue 12:56 Establish rules to fix sloppy code 16:35 Adding a feature, do you refactor an unrelated function? 23:07 How do you enforce rules? GitHub Actions 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 Feb 202328min

In this supper club episode of Syntax, Wes and Scott talk with Fred Schott about all things Astro v2.0. What is Astro and why should you use it? How do islands work? Images, edge, AI, error overlays, hybrid rendering, and more! Show Notes 00:40 Welcome 01:08 Guest introduction FredKSchott.com @Fredkschott on Twitter Fred on GitHub 02:17 What is Astro and why should someone use it? 04:57 What can you build with Astro? 06:11 What’s an island in content? 09:43 How do routes work with Astro? 12:30 How is Markdown handled in Astro? mdxjs 14:32 How does Astro work on the edge? 18:15 How does Astro v2 handle data fetching? 23:25 Integrations with Astro 26:38 Astro AI bot? AI Langchain 30:40 Error overlay design 36:10 What are some of the most important upgrades in v2? 37:18 Hybrid rendering 40:27 Astro’s image component Squoosh 44:39 What happened to snowpack? Pikapkg? 46:48 What is the financial model for Astro? 50:28 Supper Club questions Obsidian ××× SIIIIICK ××× PIIIICKS ××× Chat Langchain Shameless Plugs Astro Astro Discord 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

24 Feb 202358min