Today, Scott and Wes dive into the 11 habits of effective web developers, from understanding stakeholder goals to maintaining a work-life balance. We’ll explore the importance of continuous learning, having a problem-solver mentality, and being empathetic towards coworkers and users—let’s get into it!

• 00:00 Welcome to Syntax!
  • Previous Episode: 754.
• 00:50 Brought to you by Sentry.io.
  • 01:24 Denver weather is something else.
• 02:15 Habit #1: You understand stakeholder and business goals.
• 05:34 Habit #2: You’re curious and always learning.
• 07:43 Habit #3: You have an open mind about new technology.
• 11:29 Habit #4: You ask for help.
• 13:43 Habit #5: You help others.
  • 16:51 Chicken drumsticks.
• 17:35 Habit #6: You have a “problem solver” mentality.
  • 24:44 Hose repair.
• 26:02 Habit #7: You have fun with what you do.
• 29:56 Habit #8: You understand work-life balance.
• 33:18 Habit #9: You are empathetic to your co-workers and users.
• 37:19 Habit #10: You pay attention to detail.
• 41:18 Habit #11: You’re part of the community.
• 45:55 Sick Picks + Shameless Plugs.

• Scott: Solar Lanterns.
• Wes: Ninja Obstacle Course.

• Scott: Syntax on YouTube.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Today, Scott and Wes are diving into Pocketbase, a fantastic tool for web developers to quickly set up a CMS without breaking a sweat. We’ll cover everything from its Go-based architecture to its slick admin interface and how you can get started hosting it for free on Fly.io.

• 00:00 Welcome to Syntax!
• 01:34 Brought to you by Sentry.io.
• 02:26 Overview of Pocketbase.
• 06:51 Written in Go, but no extending needed.
  • Host for free on Fly.io.
• 07:37 Hooks.
• 08:05 Authentication + roles.
• 09:23 The admin experience.
• 11:18 Managing export collections.
• 13:21 Creating your own schema.
• 13:53 Adding indexes.
• 14:08 API rules.
• 15:01 Adding complex roles.
• 16:15 Full-featured admin with a great UI.
• 16:59 Collection API preview.
• 17:41 Docs with app-specific context.
• 18:54 Logs.
• 19:02 Settings.
• 19:42 Executable vs npm install.
• 20:29 Are the collections fully typed?
• 21:01 Some more settings.
• 22:56 One click Coolify install.
  • Svelte Kit / Svelte 5 / Pocketbase Example.
  • Svelte / Pocketbase Starter.
  • Pocketbase Typegen.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Today we’re serving up an episode on 1Password with Senior Rust Developer Andrew Burkhart, delving into how 1Password works, tackling conflict resolution and security challenges, and exploring the benefits of using Rust.

• 00:00 Welcome to Syntax
• 00:57 Who is Andrew Burkhart?
• 01:36 How does 1Password work?
• 03:24 What’s the data flow on creating a new login?
• 05:40 The conflict resolution challenges of pull first, push second.
• 06:46 Merging strategies: How do you chose which device wins the conflict?
• 08:27 1Password’s sync is fast and reliable.
• 11:20 Nuances of the extension.
• 12:59 The value of Hackathons.
• 13:40 What’s the main benefit of 1Password using Rust?
• 15:41 Watchtower processing.
• 17:15 1Password SSH.
• 18:17 1Password env.
• 19:11 Some other cool tools.
• 20:33 Does the increased security make developing challenging?
• 25:26 What’s 1Password’s security onboarding like?
• 27:47 1Password and WASM.
• 31:45 Tokio as the asynchronous runtime for Rust.
• 34:25 Scott’s Rust based video app.
• 35:03 What is an FFI?
• 38:13 How did you learn Rust?
  • Jon Gjengset - Rust Nation UK YouTube.
  • Let’s Get Rusty YouTube.
• 41:13 Why is the 1Password team so big?
• 42:40 Are there teams that manage individual applications for errors?
• 43:45 Challenges with WASM.
• 48:59 Syntax horror stories.
  • Episode 586 with Eric Sartorius.
• 52:50 Sick Picks + Shameless Plugs.

• Andrew: Nix Mini 3, Asynchronous Programming in Rust.

• Andrew: 1Password.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons.

• 00:00 Welcome to Syntax!
• 01:48 Brought to you by Sentry.io.
• 02:53 Nav / Mobile Nav.
• 08:43 Header.
• 10:41 Toast message.
  • Wes’ TikTok Demo.
• 18:51 Portal.
• 21:02 Drawer.
• 22:56 Auth forms.
• 28:49 Dialog / Modal.
• 31:30 Whats the difference between popover and dialog?
• 33:48 Confirm.
  • Scott’s YouSureAboutThat.
• 35:46 Bonus tip on becoming a better developer.
• 36:29 Admin menu.
  • Level Up Tutorials - Side Menu Demo.
• 37:51 Scott’s package directory rant.
• 40:26 Mobile only / Desktop only.
• 40:41 Client only.
• 40:57 Admin table.
• 41:23 The dump.
• 43:39 Share / Social links.
  • Syntax ShareWindow.
• 45:44 Markdown renderer.
• 45:58 Tabs.
• 46:08 User menu.
• 46:18 Icon.
• 48:07 Loading.
• 49:21 Drop-down menu.
• 49:31 Accordion.
  • CSS Tricks - How to Animate the Details Element.
• 52:13 Sick Picks + Shameless Plugs.

• Scott: Supercommunicators.
• Wes: Klack, Mech Vibes.

• Scott: Syntax on YouTube.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

In today’s episode, Scott and Wes dive into the final part of our JavaScript Promises series, covering deferred promises, fetch, flow control, concurrency with libraries like p-map and p-limit, and integrating TypeScript.

• 00:00 Welcome to Syntax!
• 00:31 Brought to you by Sentry.io.
• 01:11 Deferred promises.
  • Promise.withResolvers().
  • Wes’ TikTok.
• 06:10 Fetch.
• 09:04 Flow Control.
• 12:19 Concurrency, Throttling, Queuing.
  • p-map.
  • p-limit.
• 16:13 TypeScript and Promises.

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 dish out a feast with Robin Heinze from Infinite Red, diving into the world of React Native. They discuss how React Native differs from other webview platforms, highlight popular apps built with it, and serve up essential tools and libraries to spice up every React Native project.

• 00:00 Welcome to Syntax!
• 01:13 Brought to you by Sentry.io.
• 01:30 React Native is different than Cordova or other webview platforms.
• 04:18 Is there a ‘write once deploy everywhere’ aspect?
• 05:48 What are some React Native apps people may not realize?
  • Mercari: Buying & Selling App.
• 07:13 What about Twitter + Facebook?
• 09:15 What is Expo? Is Expo Required?
  • expo.dev.
• 13:27 Does it require a Mac to build an iOS app?
• 14:58 React Native and routing.
  • Expo Router.
• 16:56 How do native apps normally work without a URL?
• 18:35 Can you use CSS with React Native?
• 20:27 Do React Native or Tamagui translate to CSS or Yoga?
  • Tamagui.
  • Yoga Layout.
• 21:02 React Native app styling on Android and iOS.
• 22:20 React Native’s own JavaScript engine.
  • React Native Docs: Using Hermes.
• 23:30 Does Hermes have full JS support?
• 23:52 What is the new architecture of React Native?
  • New Architecture.
  • React Native JSI.
• 26:11 Avoiding translation errors.
• 27:24 Will this change break a lot of older React Native apps?
• 28:24 Has React Native improved update stability?
• 29:55 Where else can React Native run?
• 32:52 JavaScript on smart TVs and other smart devices.
• 33:57 Bridging to native APIs.
  • Tauri.
• 37:14 State management.
  • Redux.js.
  • MobX State Tree.
• 39:30 What are some tools + libraries that you install on most projects?
  • JestJS.
  • Maestro.
  • Detox.
• 41:58 How do you manage authentication?
• 44:55 Does Facebook use React Native?
• 47:15 Supper Club Questions.
• 50:29 Sick Picks + Shameless Plugs.

• Robin: Awesome Sock Club Wes’ X Post.

• Guest: Infinite Red, ChainReactConf, React Native Radio.

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, 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.

• 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.

• Scott: Folex.
• Wes: CalDigit TS4.

• Scott: Syntax on YouTube

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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!

• 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.

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 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.

• 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.

• Brad: Rubblebucket.

• Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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!

• 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.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads