Potluck - MDX × Portfolio Projects × Code Commenting × CSS Properties × Reusable Components × More!

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

14 Aug 202452min

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

12 Aug 202437min

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

9 Aug 202455min

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

7 Aug 202456min

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

5 Aug 202431min

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

2 Aug 20241h

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

31 Juli 202457min

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

29 Juli 202418min