917: AI Tools You Should Know

Is the Virtual DOM Bad? Are keyboard shortcuts important? What is S3 storage? In this potluck episode of Syntax, Wes and Scott answer your questions. Show Notes 00:08 Welcome 01:27 Syntax Brought to you by Sentry.io 02:45 Welcome Randy, our new Producer! Randy’s YouTube 04:14 A ‘Canadian Podcast’ 04:43 Is Alpine JS or HTMX a replacement for pug or other templating libraries? 08:21 What powers the “in-app” browsers and how can we test our sites on it? Inject tracking code Tauri 13:16 A deep dive on generators and iterators. An Insight into Iteration Protocol through Infinite Scroll in Angular 15:25 Video podcast observations 17:18 PROBLEM I need a way of managing state. 22:34 Why is Virtual Dom (a la React) suddenly bad? 28:31 In a recent episode (659), Wes mentioned he updated the OG image cards, and noticed a higher click through rate. 29:07 Updated logo and monster truck intro. 30:19 Back to OG Images. 31:51 Are “import * as X” exports build stripped? 36:46 What is the difference between S3 storage and a CDN. Backblaze CDN 45:00 How important are keyboard shortcuts or extensions? Are they necessary to be a good developer? 50:04 Sick Picks + Shameless Plugs Sick Picks Scott: Perplexity.ai, Serversideup Wes: Zojirushi Rice Cooker Shameless Plugs Wes: Wes Bos Courses Scott: Sentry Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Randy: YouTube Scott: X Instagram Tiktok LinkedIn Threads

31 Tammi 202457min

Unveiling Svelte 5! delving into its latest features. From the impressive speed and simplicity to its compact size, discover what makes this new release so exciting. Show Notes 00:00 Welcome 00:39 Syntax Is A Video Podcast! @syntaxfm on YouTube 01:52 Brought To You By Sentry.io 02:42 Svelte 5 Introduction Svelte 5 Intro 05:45 What Are Runes? 06:21 $state() 11:49 $props() Class as a rest prop 16:41 $effect() 21:17 $inspect() 23:03 What Are Snippets? 27:33 What Are Events? 30:02 Built In Functions 32:42 Smaller Output Reddit example 33:31 Speed Benchmarks 35:00 Anticipated Release Try it today Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

29 Tammi 202437min

Thomas Steiner talks with us about Project Fugu, an effort from Google to enable new classes of applications to run on the web. What is Project Fugu? What are some of Thomas’ favorite APIs to use? What is an IWA vs a PWA? And more! Show Notes 00:32 Welcome 01:52 Who is Thomas Steiner? 02:57 What is the overall goal of Project Fugu? 08:17 When might we see these APIs come to all browsers? 14:10 Do you have examples of companies pushing for an API? 18:53 What happens with the face detection API? 28:33 What is an IWA? 35:17 What is the web transport API for? 37:11 What is MIDI? 41:20 Nintendo Joycon hack 45:28 File handlers in a PWA 50:38 File System Observer API coming soon 56:26 Sick Picks Onnx HuggingFace Chrome for Developers Fugu API Tracker Google I/O 2023 LEGO Education SPIKE Igalia CapCut Descript Better Touch Tool Sick Picks Laser printers Shameless Plugs HowFuguIsMyBrowser Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

26 Tammi 20241h 2min

We’re doing a Tasty overview of Drizzle in this episode. What is Drizzle? What are different types of databases? How do you host databases? What have we built with Drizzle? And how does Drizzle handle relational data, TypeScript, querying, selects, transactions, and more! Show Notes 00:10 Welcome 00:52 Syntax Brought to you by Sentry 01:50 What is Drizzle? 09:11 Different types of databases 17:58 Why pay for SQLite hosting? 20:36 Defining your data structures 24:27 What we’ve built using Drizzle 28:28 Relational data 36:17 TypesScript and Drizzle 40:53 Querying + Selects with Drizzle 46:23 Transactions 47:09 Syntax Drizzle Studio theme 48:27 Sick Picks Drizzle ORM Drizzle ORM - Overview Meet Drizzle Studio Benchmarks Sequel Pro TablePlus phpMyAdmin Cloudflare D1 Bun habitpath.io Chartable Neon Answer Overflow Drizzle Studio Themes Sick Picks Scott: BlackBerry - Apple TV (CA) Wes: Candle Warmer Lamp Shameless Plugs Syntax Tiktok Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

24 Tammi 202454min

It is time. Wes and Scott attempt to blow your minds by talking about time, who’s tracking time, where does time come from, what time is it in your browser vs someone else’s server, and standards around time. Show Notes 00:25 Welcome 00:55 Thanks to Chris Enns LemonProductions.ca Chris Enns on Twitter Podcast tutorials by Chris Enns on YouTube 03:14 What is time in the browser? 06:27 What are atomic clocks? Atomic Clocks and Cloudflare 08:22 Network time 09:35 Device time 11:11 Why is time so important? 14:35 Epoch time Syntax epoch convertor 16:58 ISO 8601 standard ISO 8601 19:20 RFC 3339 RFC3339 20:35 Time zone support 21:59 The Temporal API Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

22 Tammi 202427min

Wes and Scott talk with Brian LeRoux about not using a bundler, handling TypeScript, live reloading, Enhance being a meta framework, how Enhance handles CSS, his experience at AWS: Reinvent, and the state of JavaScript run times in 2024. Show Notes 00:31 Welcome 01:00 Introducing Brian Leroux 01:32 Syntax Brought to you by Sentry 01:54 You can’t fix bugs you can’t see 03:14 Not using a bundler 05:48 Downsides of not using a bundler 11:13 What about TypeScript? 13:58 Is there a waterfall of imports? 18:29 What happens to live reloading? 22:12 The browser upgrade path 26:39 Is Enhance a meta framework? 29:02 What are you doing about SSR web components? 33:24 Can you refresh part of the application? 36:22 What about state management and Enhance? 42:52 How does Enhance handle CSS? 48:26 How was AWS: Reinvent? 54:47 What’s happening with the Begin CLI? 55:55 Any thoughts on new JavaScript run times? 59:51 Sick Picks brian.io Quickstart - Architect documentation Enhance aws-lite Sick Picks Analogue Pocket Shameless Plugs Begin — The Cloud Platform for Functional Web Apps Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

19 Tammi 20241h 3min

Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more. Show Notes 00:10 Welcome 00:52 Syntax Brought to you by Sentry 01:39 New Heights with Scott and Wes 04:33 What are React Server Components? 10:52 The difference between server components and client components Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it. 11:37 Why would you want to run something server side? 15:22 Components are server rendered by default 16:40 What is JS sprinkles? 17:29 How do server components work? 18:51 Moving an existing site to React server components take a while 20:27 The rules 27:12 Form Actions + Server Actions 32:07 Buttons can have actions 36:32 React Suspense 39:13 What we like Ryan Florence thread 41:54 What we don’t like 47:13 Design patterns 47:35 Other things RSC Devtools Introducing Waku Mux 49:22 Sick Picks Sick Picks Scott: ASUS ZenDrive V1M External DVD Drive Wes: Leatherman Arc Shameless Plugs Scott: Syntax YouTube Wes: Wes Bos Courses Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

17 Tammi 202456min

We’re kicking off 2024 by talking about productivity tips we’re using to stay focused, to do apps, calendars, focus states, and customizing our code editor. Show Notes 00:25 Welcome 00:46 Syntax Brought to you by Sentry 01:11 Welcome to 2024 Anxiety and Uncertainty with Dr. Courtney Tolinski - Syntax #670 01:42 Getting systems in place 03:30 Examining your current habits 08:14 Tracking habits 12:16 Neural Pathway Chain Breakers habitpath.io/waitlist STREAKS A Passwordless Future Passkeys with Anna Pobletts - Syntax #710 Clerk 14:26 Todos Stronglifts app Getting Things Done Things Height 20:14 The calendar as the ultimate tool Cron Calendar 23:52 Using Focus states Focus App 29:09 Customizing VS Code with an extension Apc Customize UI++ - Visual Studio Marketplace 31:14 Momentum Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

15 Tammi 202432min