Code Styles: Readable Rules and Petty Preferences

In this Potluck episode of Syntax, Scott and Wes tackle community questions on handling overwork, teaching programming to family, and React’s Server Components. They also discuss quantifying accessibility improvements, choosing course platforms, and navigating professional growth in challenging workplaces. Show Notes 00:00 Welcome to Syntax! Thanks to Codeium. Syntax Episode 728 with Codeium. 01:37 Brought to you by Sentry.io. 02:38 Rewarding hard work with more work. 07:14 April Fools Episode. Syntax Episode 750 on April Fools. 09:03 Teaching programming to your family. Codespark. 15:56 React Server Components using JS runtime. 19:58 What happened to the intro music? 23:06 How can I quantify my work to the executive leadership team? 29:16 Should I host my own course website or use Udemy? 35:34 Navigating professional growth in toxic workplaces. 40:43 Getting started in native dev with tools like Tamagui. Syntax Episode 601 on Tamagui. 45:42 Cloudflare, what the heck is it? 50:49 Sick Picks + Shameless Plugs. You’re looking for this > Swag Drop. Sick Picks Scott: Folex. Wes: CalDigit TS4. Shameless Plugs Scott: Syntax on YouTube Wes: Ditto 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

22 Maj 202459min

We’re diving into part 2 of our 3-part series on Promises, focusing on error handling, aborts, and essential helper methods. We’ll explore how to manage errors effectively and improve performance with abort signals. Let’s get into it! Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io. 02:00 Cancelling promises. 05:16 Why would you reach for an abort signal? 06:26 Promise helpers. 07:04 Promise.all() vs Promise.allSettled(). 09:12 promiseInstance.finally() 09:26 Promise.any() and Promise.race() 12:08 Error handling strategies. Tuple await-to-js. Youtube - 5 Async + Await Error Handling Strategies. 17:30 Promise.race() example. 18:54 Static Promise.reject() and .resolve() methods. 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

20 Maj 202421min

In this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects. Show Notes 00:00 Welcome to Syntax! 00:49 Brought to you by Sentry.io. 01:14 Introducing Brad Frost. Brad Frost.com. Atomic Design by Brad Frost. Brad (@brad_frost) on Twitter. Brad on LinkedIn. Brad on Mastodon. Brad on YouTube. Brad on GitHub. Brad Frost on CodePen. Big Medium | Design for What’s Next. 06:26 What is a design system? 11:48 How do you keep design and code in sync? Material Design. Shopify Polaris. Carbon Design System. The Design System Ecosystem | Brad Frost. 15:52 How do you use Shopify, WordPress, React, etc. through a design system? 19:19 How is CSS handled? 25:19 What’s the benefit of going all in on web components? 28:49 Do small startups need to worry about design systems? 32:36 How do design tokens work? 37:38 How do you deal with pushback on design systems? 41:05 How do you go outside the guidelines? 44:52 What system do you use for naming things? 49:06 How do you best document your language choices? 50:41 Supper Club questions. Thinking in Systems. Miriam Eric Suzanne. Zeldman on Web and Interaction Design. 57:12 Sick Picks + Shameless Plugs. Sick Picks Brad: Rubblebucket. Shameless Plugs Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024. 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

17 Maj 202459min

Welcome to a special live edition of Syntax, recorded at React Miami! Join Scott and Wes as they dish out games galore, from Spot the Syntax Error to JS or NAYS, all while engaging with the audience in this lively session of coding camaraderie. Plus, who’s the better programmer? Stay tuned to find out! Show Notes 00:00 Welcome to Syntax! 00:54 Meet the Syntax team. 01:22 The plan for today. 02:38 .map() .filter() .reduce() 06:39 Syntax Error. 15:37 JS or NAYS. 21:08 Audience Stump’d. 24:51 Q + EH. 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

15 Maj 202434min

Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io. 02:03 What’s in the update? React 19 Beta Release Notes. 03:03 Actions + server actions. Syntax Episode 766. 04:54 Using server actions for a checkout. 06:11 Web components. Custom Elements Everywhere. 09:44 use() API. 10:31 With promises. 14:25 With context. 17:32 How does Zustand work? Stately.ai. X @DavidKPiano. 18:26 No more ForwardRef. 20:05 Ref cleanup. 20:43 Document metadata. 24:14 Upgrading to React 19. 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

13 Maj 202426min

In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality. Show Notes 00:00 Welcome to Syntax! 01:10 Brought to you by Sentry.io. 01:28 What is Overtone? 03:45 Can you explain the experience you’re trying to achieve? 06:43 What makes the best music app? Is it local first? 08:03 Is it best to create a local first app from the ground up? 10:31 What are the considerations when making a local first app? 13:04 What database are you using? Riffle. 16:12 How do you handle authentication? 19:15 Pick the tech based on the problem. 20:40 WASM for Non-JS or heavy lifting tasks. 24:39 How did you get SQLite running in the browser? 27:58 What about WA-SQLite, how does it compare to Riffle? TLDraw Make-real. 29:24 The backstory of Effect for TypeScript. 34:04 What actually is Effect? 39:32 Consolidating tools. 42:30 What’s a cool aspect of Effect that is often overlooked? 45:47 Building a web server with this. EffectTS RPC. 48:16 Will this ever get “Bluebirded”? 50:29 What about promises? Zio World 52:19 Sick Picks + Shameless Plugs. Sick Picks Johannes: Open Telemetry, Sentry Open Telemetry. Shameless Plugs Johannes: localfirst.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

10 Maj 202456min

Scott and Wes are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications. Show Notes 00:00 Welcome to Syntax! Show 718 React Server Components. 02:04 Brought to you by Sentry.io. 03:04 What are form actions? GitHub Add React.useActionState PR 04:05 Almost entirely React. 04:31 What is the ‘server’ in Vanilla React? 06:10 Would React ever ship their own server? 07:29 What are actions? 08:34 Two huge benefits to actions. 08:45 Avoid custom useEffects or third party libraries. 09:17 Calling server code from the client without any APIS. 11:31 Some examples of actions. 12:54 Can these actions be done in a client component? 13:40 Where to use actions. 13:49 On a form submit. 15:30 In an event handler. 15:57 In a useEffect(). 17:13 How to actually use an action. React Hooks 17:30 useActionState() hook. 18:49 The state of the action. 19:35 The bound action. 19:46 The pending state. 23:16 useFormStatus() hook. 24:38 Action inputs. 26:13 Server vs client. 28:30 This is not PHP. 30:31 What is optimistic UI? 33:26 useOptimistic() hook. 37:02 Some final thoughts. 40:18 Sick Picks + Shameless Plugs. Sick Picks Good Follows: Alex Katt. Scott: Tiny Portable Ultra-Mini Air Pump. Wes: AVerMedia 4k Capture Card. 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

8 Maj 202446min

In this 3-course series, Scott and Wes serve up some JavaScript Promises treats. In part 1, they unravel the concept of promises and delve into common examples of their usage, from creating and waiting on promises, to database queries and user permissions. Show Notes 00:00 Welcome to Syntax! 01:27 Brought to you by Sentry.io. 02:32 What is a promise? Promise mdn web docs. 03:27 Common examples of promises. 03:45 A fetch call to an API returns a promise. 05:54 A database query or Insert command 07:18 A request for user permissions. 07:37 A wait function. 08:08 Resolve or rejecting promises. 09:33 Creating promises. 09:46 New promise. 11:09 Promise.withResolvers(). 11:37 An async function. 14:34 Waiting on a promise. 15:09 .then(). 16:50 Await. 17:44 Why use one wait method over the other? 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

6 Maj 202422min