Syntax - Tasty Web Development Treats

In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem. Show Notes 00:00 Welcome to Syntax! 00:34 What is Deno? 05:08 Deno 2.0 07:49 NPM compatibility 09:40 What parts of Node aren’t doable in Deno? 11:22 Do we need a hard break from Require? 13:51 Package management 16:25 Security and performance benefits of Deno 20:57 Brought to you by Sentry.io 20:57 Thoughts on Bun and Node additions 26:25 Ryan’s favorite Deno projects Lume Fresh webgpu-examples gpucraft minecraft clone + deno + webgpu gpucraft example Shaderplay Orillusion 28:42 Will we ever see a unified file system API? 31:49 Typescript 36:12 Jupyter Notebooks with Deno Polars 39:11 AI and WASM in JavaScript 42:01 Deno 2.0 features and future 43:08 Sick Picks & Shameless Plugs Sick Picks Ryan: McCarren Park Shameless Plugs Ryan: https://deno.com/enterprise Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more. Show Notes 00:00 Welcome to Syntax! 02:33 Brought to you by Sentry.io 03:25 Why HTML is important 06:52 Semantic vs non-semantic 07:58 The basic structure of an HTML page HTML elements reference The Main element 08:45 Doctype 15:24 Nav 18:47 Section 20:41 Aside 22:09 Article 22:54 Span 27:18 Why use a span when you have a div and a paragraph tag? 29:29 Figure and Caption 31:16 Fieldset 31:53 UL vs OL 32:44 DFN The Definition element 34:16 Form 36:56 Button vs Anchor 38:22 Headings 674 - A11y Treats - Heading Design 40:21 Output The Output element 41:46 Dialog 42:04 Tables 44:03 Media media-chrome 45:06 Canvas https://githubuniverse.com/ https://maximeheckel.com/ 46:07 On graphics programming 47:38 Search 354 - The Surprisingly Exciting World of HTML Elements 48:27 Sick Picks + Shameless Plugs Sick Picks Scott: 2Pack Traditional Natural Bamboo Wok Brushes Wes: Logitech MX Master 3S Shameless Plugs Syntax YouTube Channel The Easiest Way to Infinite Scroll with React | Full Example Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions. Show Notes 00:00 Welcome to Syntax! 00:46 Brought to you by Sentry.io. 01:35 Scroll-driven animations. Syntax 695: 5 New CSS Features You Should Know Scroll-driven animations demos and tools. 04:13 @keyframes. 05:22 animation-timeline. 11:35 animation-range. 08:49 View-based timelines. 17:45 Neat uses: Dave Rupert on styling :stuck. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more! Show Notes 00:00 - Welcome to Syntax!. 01:43 - Brought to you by Sentry.io. 02:19 - The evolution of CSS. 04:07 - CSS versioning and spec levels. CSS RFC. 17:49 - Use-cases for allow-discrete. 20:34 - State queries. 24:19 - Where does the baseline data come from? 25:17 - Will the RFC become official? The latest in Web UI (Google I/O ‘24). 27:33 - New features Una is excited about. 29:44 - Select. https://open-ui.org/components/customizableselect. https://codepen.io/argyleink/pen/YzoEPOG. 38:31 - New features Adam is excited about. 39:24 - text-box-trim. 40:59 - State queries. 54:56 - Sick Picks + Shameless Plugs. Sick Picks Una: Logitech MX Master 3 Adam: Teenage Engineering K.O. II Shameless Plugs Una: Una.im Adam: The CSS Podcast Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about the latest features in Node.js, including native support for TypeScript, .env parsing, a built-in test runner, watch mode, SQLite integration, glob support, and top-level await. They also discuss some wishlist items, and experimental features like WebSocket support and the require module. Show Notes 00:00 Welcome to Syntax! 01:13 Brought to you by Sentry.io. 01:37 Node.js new features. Deno. Bun. 02:51 TypeScript. tsx. swc/wasm-typescript. 10:03 SQLite v22.5. 14:35 .env support. 16:24 Test runner. Jest. 19:42 Watch Mode. nodemon. 21:22 Glob support. 22:48 Top-Level Await. Top-level await is a footgun. 26:40 Experimental require module. Default ESM Detection. Web request standards. HonoJS. 29:39 Experimental WebSocket support. 30:13 Async local storage. 31:43 Single file executables. 32:46 Wishlist. 32:54 Hot reload. 34:20 Window shim. globalThis. 35:30 Better server. 35:56 Better terminal integration. NIM. styleText. chalk. warp. 41:36 Twitter responses. Coolify. n. 46:54 Sick Picks + Shameless Plugs. Sick Picks Scott: Cascadia Wes: Roborock Qrevo Shameless Plugs Scott: YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about the latest CSS theming properties and techniques for better controlling light and dark modes, as well as creating comprehensive color systems for applications and websites. Make sure to check out the video version of this episode for practical code examples, and explanations of light/dark function, CSS variables, meta tags for theme colors, accent color, color mix, and upcoming features like style queries and color contrast. Show Notes 00:00 Welcome to Syntax! 01:36 Brought to you by Sentry.io. 03:45 theme-color. 10:12 color-scheme. 15:14 light-dark(). 17:44 How to force light or dark mode. 23:03 Live debugging box-shadow. 28:05 color-mix(). 29:53 accent-color. 31:27 Relative color syntax. 35:49 Style queries and color-contrast(). Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Scott and Wes talk with Daily.dev’s Francesco Ciulla about the platform's history, community features, and significant growth. They dive into the core ideas behind daily.dev, including its personalized feed for developers, new features like squads, community contributions, and tech stack. Francesco also shares his passion for Rust, and highlights the importance of content creation in the ever-evolving tech landscape. Show Notes 00:00 Welcome to Syntax! 00:36 Brought to you by Sentry.io 01:24 Overview and features of daily.dev 07:05 daily.dev's origin story 10:06 How Product Hunt fueled initial growth 12:21 Monetization and business model 13:53 Content and user experience Syntax Squad 22:21 Written content vs video content 24:29 Tech stack Terraform Pulumi React Vercel Fastify Postgres Go 25:37 Building a positive community 30:32 Moderation and tagging 35:03 Francesco's favorite place to publish right now 36:56 Quadrupling down on Rust Rust 39:38 Francesco's favorite Rust framework Actix 41:18 Sick Picks & Shameless Plugs Sick Picks Francesco: daily. dev Shameless Plugs Francesco: Francesco's YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and more! Show Notes 00:00 - Welcome to Syntax! 01:48 - Brought to you by Sentry.io 04:37 - The future of JavaScript frameworks 09:09 - How to use Caddy for local development SvelteKit Vite 14:27 - When to use an API Strapi 17:38 - Where does Scott get his amazing t-shirts? Sentry.shop Syntax Snack Pack 21:33 - Best screwdriver for kids toys PicQuic Sixpac Plus LTT Screwdriver 24:31 - Strategies for database design MongoDB Prisma 30:21 - Do we need frameworks? 796 - Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native Frontend Masters 32:19 - Best tech stack for building a basic login system 336 - How To Build Your Own Auth 37:56 - Syntax video episodes 40:25 - Component props in JSX 45:26 - Sick Picks & Shameless Plugs Sick Picks Scott: Loop Quiet Ear Plugs Wes: Gecko’s Toes Water Hose Rack Shameless Plugs Scott: Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them. Show Notes 00:00 - Welcome to Syntax! 01:30 - Brought to you by Sentry.io. 02:11 - What makes a good CSS component system? 07:54 - Component vs part of a component 13:26 - CSS Modules 15:56 - Scoped CSS @scope - (82% support!) ff behind flag https://developer.mozilla.org/en-US/docs/Web/CSS/@scope 21:07 - How is Panda different from style components? Panda StyleX 00:00 - Utility CSS TailwindCSS Uno 31:08 - Utility Sprinkles 34:13 - CSS variables open-props.style Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks. Show Notes 00:00 Welcome to Syntax! 01:18 Brought to you by Sentry.io. 01:51 What Alex does at Atlassian react-beautiful-dnd Pragmatic drag and drop 04:38 What makes drag and drop tricky. 06:38 Use-cases. 10:54 What security is in place? 12:30 How to make it feel native. 19:20 Is the drag and drop spec ongoing? 20:03 How do you build this headless? 21:33 How does drag and drop work with frameworks? 23:48 Making drag and drop feel the same across mobile and desktop. 26:09 What’s the key to really good drag performance? 29:58 How do you make drag and drop accessible? 34:57 Pragmatic drag and drop code vs application code. Shoelace shadcn 40:00 How does testing work? Playwright Cypress 43:15 Internal adoption at Atlassian. 44:27 Working on high-impact projects. 49:15 Versioning and internal adoption at Atlassian. 51:29 Sick Picks + Shameless Plugs. Sick Picks Alex: Coffee, James Hoffmann YouTube Channel. Shameless Plugs Alex: Dom Events. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem. Show Notes 00:00 Welcome to Syntax! 01:41 Brought to you by Sentry.io. 02:28 The State of React 2023. 03:11 The Main API Painpoints. 04:31 forwardRef. 05:27 memo. 06:39 Context API. 07:18 StrictMode. 08:45 Double rendering. 09:36 State management. 11:58 Hooks Pain Points. 12:11 useEffect. 12:33 Dependency arrays. 13:11 New API Pain Points. 13:19 React Server Components. 14:40 Taint API. 15:19 Libraries. 17:02 Jotai. 17:45 Apollo Client. 19:05 Redux. 20:57 Redwood. 21:26 React Aria. 21:55 Astro. 22:04 The most negative. 23:35 Component Libraries. 25:50 Other Component Libraries. 25:53 Mantine. 27:47 Details element. Tolin.ski/demos. 28:59 Honorable mentions. 29:07 Animations. 29:28 Data Visualization. 31:26 CSS Tools and Libraries. 33:14 Styled Components. 34:16 Meta Frameworks. 38:50 Hosting. 40:08 Other Services. 40:45 Back-end language trivia. 43:00 State management. 43:40 Data Loading. 44:08 Other Tools. 44:09 Testing Libraries. 44:45 React Renderers. 47:58 Podcasts, thank you! 48:14 Sick Picks & Shameless Plugs. Sick Picks Scott: Thermacell. Wes: Nerf Guns Shameless Plugs Wes: Syntax.fm. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes debate whether your website really needs JavaScript to function. They explore the principles of web standards, progressive enhancement, and test popular websites like Shopify and Netflix to see how they perform without JavaScript. Show Notes 00:00 Welcome to Syntax! 00:11 Take 2 01:43 Brought to you by Sentry.io. 02:19 The clip summarized. 03:16 Your website should load, be readable and be (mostly) styled without JavaScript. 07:32 Web standards first. If it can be done without JavaScript, it should be. 08:09 What if the CSS doesn’t load? 10:20 Linking 10:24 Forms. 12:11 Links (Duh, but also c’mon!) 12:35 Query parameters. 13:57 Server render if possible. 15:20 Progressive Enhancement. 17:24 CSS Page Transitions. 19:07 Let’s test websites out. 19:15 Shopify. 22:16 Syntax.fm. 25:23 Netflix. 27:27 Local first and offline service workers. 29:27 TikTok. 29:33 GitHub. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes chat with Glauber Costa from Turso about the evolution of databases and the fascinating technology behind Turso. They dive into topics like the benefits of massive multi-tenancy, vector search, and why Glauber made the switch from NoSQL to relational databases. Show Notes 00:00 Welcome to Syntax! 00:36 Turso’s relationship with Drizzle. 02:10 What is Turso? 04:23 Brought to you by Sentry.io. 04:48 Using libSQL without Turso. 06:21 An explanation of Vector Search. 07:16 Vector databases are being ‘Sherlocked’ by larger databases. 09:24 Why did you move from NoSQL to Relational? 12:00 Allows for massive multi-tenancy - what does that mean? 15:27 Transactional schema changes. 16:30 Why would you want 10,000 databases? 19:02 What makes SQLite cheaper? 22:59 The strategy for building a business around an inexpensive tool. 26:13 Pull requests and branching within SQLite. 28:52 Database snapshots for rollbacks. 31:14 Driving the cost of a database to zero allows for rethinking architecture. 32:35 SQLite informing Turso’s edge functionality. 36:56 Automatic replica database syncing. 39:10 Is the database a bottleneck? 39:25 Embedded Replicas. 40:04 How do embedded replicas handle conflict resolution from offline users? 41:43 If the server is offline, can the database live in the client or WASM? 43:09 Conflict resolution. 44:47 What makes Turso stand out? 47:51 What was it like working on the Linux Kernel? 51:57 Do you use Linux? 52:46 Sick Picks & Shameless Plugs. Sick Picks Glauber: Understanding yourself, What is Aphantasia. Shameless Plugs Glauber: React Rally Park City, UT, Turso, Laravel. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up a gameshow-style quiz with STUMP’d, challenging each other on web development trivia. From the differences between useMemo and useCallback to the intricacies of the JavaScript event loop, join them for a fun and informative session packed with web dev insights! Show Notes 00:00 Welcome to Syntax! 01:17 Brought to you by Sentry.io. 02:03 The longest game of Rock, Paper, Scissors. Round 1 03:22 In React, what is the difference between useMemo and useCallback hooks, and in what scenarios would you choose one over the other? 05:56 Explain the concept of “tree shaking” in modern JavaScript build tools. How does it work, and what are its benefits? Round 2 09:11 In the context of CSS Grid, explain the difference between grid-template-areas and grid-area. 11:34 What is the “Temporal Dead Zone” in JavaScript, and how does it relate to variables declared with let and const Round 3 13:29 Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue. 17:10 What is the “Shadow DOM” in web components, and how does it differ from the regular DOM? Round 4 20:05 Explain the process of Critical Rendering Path optimization in modern web browsers 26:14 Describe the purpose and functionality of the Intl.Segmenter API in JavaScript. Round 5 30:03 Explain the concept of Web Assembly (WASM) and its role in modern web development. 32:11 Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores. Round 6 35:26 Explain the concept of “code splitting” in modern JavaScript applications. 37:00 Describe advanced techniques for maintaining an accessible focus order in web accessibility. Round 7 45:15 Explain the concept of “Server-Sent Events” (SSE) in web development. 47:37 What’s the difference between contain layout and contain paint? 49:30 Sick Picks & Shameless Plugs. Sick Picks Scott: diskprices. Wes: Slime Tire Sealant. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up six exciting new JavaScript proposals, including Promise.try and Math.sumPrecise. They break down what each proposal means for developers and how these new features could change the way we write JavaScript. Show Notes 00:00 Welcome to Syntax! 01:45 Understanding the stages of JavaScript Proposals. 04:04 Promise.try - Stage 3. 05:39 Math.sumPrecise - Stage 2.7. 07:28 Floating point math. 09:07 ShadowRealm - Stage 2.7. 11:39 Brought to you by Sentry.io. 12:03 Regex Escape - Stage 2. 13:33 Defer Module Evaluation - Stage 2.7. 15:09 Iterator Sequencing - Stage 2. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

In episode 800 of Syntax, Scott and Wes sit down with John Resig, the creator of jQuery, to discuss the current state of React and TypeScript. They dive into the evolution of frontend frameworks, the challenges of server-side rendering, and the tech stack at Khan Academy. Show Notes 00:00 Welcome to Syntax! 00:59 Brought to you by Sentry.io. 01:32 What is jQuery? 05:31 Did you anticipate the success jQuery had? 07:16 allow-discrete, @starting-style. Install Nothing: App UIs With Native Browser APIs - Scott Tolinski. 07:54 Building the community around jQuery. 11:16 jQuery plugins. 13:00 Did you ever make money from jQuery? 16:13 What is your role at Khan Academy. 17:58 What is the tech stack at Khan Academy? 21:56 Why do you want to change your CSS and JS framework? 24:03 TypeScript vs Flow. 25:25 GraphQL federation. 28:08 What was your frontend framework journey? 30:23 Is there any part of React you wish would improve? 32:37 Reservations using React Router. 33:14 Khan Academy web platform vs native platform. 35:21 What do you use for state management? 38:48 What’s harder than it should be on the web today? Kilian’s Question On X. Polypane.app. 42:46 Opinions on JavaScript Sprinkles. 44:04 What’s with the $ sign in jQuery? 45:29 The challenges of having your name in such a widely used software. 51:06 Challenges with server-side rendering in React. 52:42 Sick Picks & Shameless Plugs. 54:48 What are the performance issues associated with internationalization? 56:57 Back to Sick Picks & Shameless Plugs. Sick Picks John: Biome, Remix, Lingui. Shameless Plugs John: Khan Academy. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up the latest and most under-utilized browser APIs that are changing the game for web development. From the @starting-style CSS API to scroll-snap and popovers, they break down how these tools can elevate your projects with minimal effort. Show Notes 00:00 Welcome to Syntax! Install Nothing: App UIs With Native Browser APIs – Scott Tolinski. Tolin.ski Demos. 01:03 Brought to you by Sentry.io. 02:15 When to use these tools. 03:45 @starting-style CSS API. 08:23 Transition behavior allow-discrete. Dialog CSS. 11:56 calc-size(auto). 16:19 scroll-snap. Swiper Indicators. Slide Show. Scroll To Options Snap-Additions. Adam Argyle Tweet. 22:05 View Transitions. Cross-document view transitions for multi-page applications 33:28 Popover API. Tolin.ski Demos Popover Basic. Tolin.ski Demos Popover Action. Tolin.ski Demos Popover Anchor. Tolin.ski Demos Popover Compat Tolin.ski Demos Popover Mobile-Nav. 41:15 Dialog. Tolin.ski Demos Drawer CSS. 48:12 Details. Tolin.ski Cool-Treats Accordion. 53:26 Sick Picks & Shameless Plugs. Sick Picks Scott: Emerge Tools. Wes: Apple TV+ Hacks. Shameless Plugs Scott: Local First from Scratch. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes serve up an episode on reverse proxy servers. They discuss popular options like CF Tunnels, Caddy, Nginx, Apache, and more, explaining why you might need one for load balancing, SSL certificates, security, and managing multiple servers. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io. 02:25 What is reverse proxy? 03:16 Some examples of reverse proxies. 05:04 Why do you need a reverse proxy? 05:09 Combining multiple servers. 06:51 Load balancing. 07:23 SSL certificates. 10:30 Security. 10:37 Conceal your true IP. 11:24 Access management. 12:31 Routing static assets. 13:31 CDN / local. 15:55 Caddy × websocket support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes chat with Alex Blokh and Andrew Sherman, the co-founders of Drizzle ORM, about building a modern ORM from the ground up. They dive into the importance of type safety, creating filters with Drizzle, and the differences between Drizzle and other ORMs like Prisma. Show Notes 00:00 Welcome to Syntax! Syntax × Drizzle Swag. 01:15 What is Drizzle? 02:36 The genesis of Drizzle. 04:15 The process of building an ORM. 05:38 ‘100% Type-Safe’ and why that’s not a great goal. 07:50 Who is responsible for writing the complicated TypeScript? 09:40 Is an ORM necessary for anyone working with data? 12:15 Creating a product that fits different complexities. 13:19 Brought to you by Sentry.io. 13:44 Creating filters in Drizzle. Callback-based, or imported. Why? 19:22 Drizzle vs Prisma vs Kysely. 22:45 Are you friendly with Prisma? 23:35 Relational queries. 25:17 Query vs select. 27:42 Maintaining so many different technologies. 30:37 Switching databases. 31:39 Drizzle Studio. Drizzle Studio Syntax Theme. 35:00 Accessing Cloudflare D1 SQLite requires connection through a worker. 37:40 Drizzle Kit. 41:37 Will you ever support MongoDB? 42:10 Supporting PGlite and local data storage landscape. DrizzleORM v0.30.6 release notes. 44:00 Being a developer in Ukraine in 2024. How to support Ukraine: Savelife, United24. 51:07 Drizzle is expanding. 53:50 Sick Picks + Shameless Plugs. Sick Picks Andrew - Smart Swim Goggles. Shameless Plugs Andrew - Savelife, United24. Scott - Syntax × Drizzle Swag. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes tackle a variety of audience questions, from the nuances of over-engineering to the energy consumption of AI LLMs. They also discuss the pros and cons of monorepos, frameworks, and the ever-important question: Do you really need to learn all the developer tooling? Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io. 01:07 Challenges around a resume playback function. 05:56 Why use Google Forms for Potluck questions? 07:57 What constitutes over-engineering and how to avoid it. 13:28 Webview vs native component based mobile apps. 18:06 Running and managing monorepos. 20:59 Energy consumption of AI LLMs vs static web content. A guide to LLM inference and performance. From Words to Watts: Benchmarking the Energy Costs of LLM Inference. 25:19 Why do we need frameworks? Frank M Taylor Blog Post. 33:05 Handling ad-blockers blocking Sentry and other tools. Syntax GitHub. 38:25 Creating sites without JavaScript. 42:49 Do I really have to learn all the various developer tooling? Wes Bos Tweet. 44:47 What are the best ways to network and meet other developers? 50:16 Sick Picks & Shameless Plugs. Sick Picks Scott: Tweek App/ Wes: Rain-X Waterless Car Wash. Shameless Plugs Scott: Swag Store. Wes: Audio Player Updates. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads