Supper Club × tRPC With Alex KATT Johansson

In this Potluck episode of Syntax, Scott and Wes answer your questions, from weighing the trade-offs between numerous small npm packages and a few larger ones to managing the challenges of work-from-home life. They also explore CSS modules, strategies for shrinking JavaScript bundles, and even where to find the best replacement ear cups for your headphones. Show Notes 00:00 Welcome to Syntax! 00:38 Commentating basketball. 01:16 Brought to you by Sentry.io. 02:09 The video podcast doesn’t translate well to audio. 04:08 Many small npm packages vs a few large. 09:55 Developers dealing with WFH, ADHD, and kids. 15:59 CSS modules for scoping styles to components. 20:55 Scoped CSS in React? 23:21 Reducing JS bundle sizes. Bundle Phobia. Javascript Bundle Analysis [Beta]. 29:44 Balancing learning, doing, and teaching. 33:04 Making maps local first. 36:20 How to pronounce ‘schema’. Wes Bos Tweet. 37:09 HTML tag. 40:11 Where to get replacement ear cups for headphones? wickedcussions. Scott’s Audeze Headphones. 42:21 ESLint and hiding errors. 48:48 Sick Picks & Shameless Plugs. Sick Picks Scott: Allen Wrench Set. Wes: Clarkson’s Farm – Amazon Prime. Shameless Plugs Wes: Syntax.fm, 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

11 Sep 202456min

Scott and Wes serve up a hasty discussion on side projects, sharing their latest Hack Week experiments and tips on how to turn fun ideas into profitable ventures. They cover everything from finding inspiration to choosing the right tech, and even offer advice on how to finish what you start. Show Notes 00:00 Welcome to Syntax! 01:11 Brought to you by Sentry.io. 01:27 Wes’ Hack Week project. 02:30 Scott’s Hack Week project. 04:18 Where do you get ideas for side projects? 09:22 End goals for a side project. 14:47 Other end goals. 16:45 What tech should you use? drop-in. 20:34 Keeping notes. 23:14 Finishing side projects. 26:39 Shameless Plugisode! 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 Sep 202428min

In this episode of Syntax, Wes and Scott talk with CJ Reynolds about the resurgence of meetups in a post-COVID world. They discuss the benefits of attending and speaking at meetups, and the logistics of organizing them. CJ also shares his experiences running the DenverScript meetup, including sourcing speakers, finding venues, and ensuring a welcoming community. Show Notes 00:00 Welcome to Syntax! 01:35 Brought to you by Sentry.io 01:49 CJ’s history hosting meetups DenverScript Code Talent 06:35 How do you structure a meetup? 09:50 How do you raise awareness for a meetup and get people to attend? Meetup.com Guild 13:27 How to pay for a meetup 15:22 How to get speakers at meetups 16:50 The length of these talks 17:03 Does live-streaming hurt attendance? Syntax 806 - The King of Drag and Drop: Alex Reardon 19:32 Is there a vetting process for finding speakers? Syntax 019 - How to Get Into Speaking at Conferences 24:26 A meetup doesn’t have to be talks Develop Happy Hour 27:48 What’s the worst part about hosting a meetup? 29:37 What was your first meetup like? 33:27 What’s the best meetup you’ve been to and why? 37:10 How to be a good attendee 40:45 Are meetups back? 44:00 Tips for organizing a great meetup 45:29 How to find a meetup 47:37 Sick Picks & Shameless Plugs Sick Picks CJ: Fillo’s Walking Tamales Shameless Plugs CJ: DenverScript You Should Use Hono in your Next Project 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 Sep 202450min

Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow. Show Notes 00:00 Welcome to Syntax! 01:03 Brought to you by Sentry.io. 01:27 File management applications. 01:43 DaisyDisk. 04:19 Marta. 07:50 EasyFind. 10:16 Czkawka. 12:53 Backblaze. 14:40 Hazel. 17:42 AutoMounter. 18:43 Media applications. 18:52 Automator HIEC to JPG. 20:04 Rant on QuickView. 20:32 DVD idea. 22:06 IINA. 24:07 Capture One. 25:02 YouTube Enhance. 27:16 HandBrake. 28:05 MakeMKV. 30:33 Overkill for Mac. 33:42 Search by Image. 37:09 eqMac. 37:37 Utility applications. 37:52 Stats & iStat Menu. 40:19 Alternatives to popular Mac applications. 40:23 Ice. 41:03 PearCleaner. 43:08 Numi. 44:17 Bottom (btm). 44:53 Sip Color Picker. 50:25 Sick Picks & Shameless Plugs. Sick Picks Scott: Wilde Chips Wes: Apple TV+: The Big Conn 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

4 Sep 202457min

Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess. Show Notes 00:00 Welcome to Syntax! 00:33 Breakdancing in the Olympics. 05:29 Brought to you by Sentry.io. 05:44 Why your CSS sucks. 07:01 You’re styling the wrong element. 11:01 Nesting too deep. 12:37 You don’t understand specificity. 14:56 Your classes don’t use a system. 16:24 You’re using values instead of CSS vars. 20:16 You don’t understand block vs inline vs inline-block. CSS Logical Properties 21:16 You aren’t using the right tool for the job. CSS Flexbox, CSS Grid. 24:15 You’re setting the value in too many places. 24:31 You’re scoping to tightly or not tightly enough. 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 Sep 202428min

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

30 Aug 202444min

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

28 Aug 202455min

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

26 Aug 202421min