Syntax - Tasty Web Development Treats

In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. 01:49 Today’s format. 02:23 Beginner vs advanced TypeScript. DHH Tweet. 09:23 Does Sveltekit replace Svelte with Astro? 13:09 Handling multiple languages. 19:52 Falling out of love with React. 25:53 Shipping private packages via NPM. npm-install. Working with the npm registry. 29:00 How do you feel about importing packages from a URL? 30:36 VueJS vs Svelte. 36:15 Leetcode type interview questions. 41:58 Learning a new language for personal growth. 46:21 Always starting, never finishing. Scott’s Fluid Type Calculator. 50:23 Code quality vs tackling tickets. 55:36 Sick Picks + Shameless Plugs. Sick Picks Scott: Quick Look Plugins. CJ: Sony WFC700n-b. 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

Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more. Show Notes 00:00 Welcome to Syntax! 01:14 Brought to you by Sentry.io. 02:05 Why you might need a cloud storage provider. 03:07 How we use cloud storage. Dropshare. 08:16 Why you may need larger storage. 09:49 The big players in this space. Amazon S3. Cloudflare R2. Backblaze B2. Synology C2. Google Cloud Storage. Microsoft Azure. Digital Ocean Spaces. Oracle. Bunny.net. Amazon S3 Glacier. 14:34 Storage fees. 18:31 Why so cheap? 20:49 Bandwidth (egress). Cloudflare Bandwidth Alliance. 26:46 Operation fees - costs money. 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 CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it! Show Notes 00:00 Welcome to Syntax! 01:20 Who is Brian Holt? 02:26 Who is Marco Bambini? 05:12 Why are people starting to talk so much about SQLite now? 08:47 What makes SQLite special or interesting? 09:46 What is a big misconception about SQLite? 11:13 Installed by default in operating systems. 12:03 A perception that SQLite is intended for single users. 13:36 Convincing developers it’s a full-featured solution. 15:11 What does SQLite do better than Postgres or MySQL? 17:30 SQLite Cloud & local first features. 20:38 Where does SQLite store the offline information? 23:08 Are you typically reaching for ORMs? 25:00 What is SQLite Cloud? 27:29 What makes for an approachable software? 29:18 What make SQLite cloud different from other hosted SQLite options? 32:13 Is SQLite still evolving? 34:40 What about branching? 37:37 What is the GA timeline? 40:04 How does SQLite actually work? 41:19 Questions about security. 44:28 But does it scale? 45:52 Sick Picks + Shameless Plugs. Sick Picks Brian: Trainer Road Marco: Tennis Shameless Plugs Brian: SQLite Cloud, Frontend Masters - Containers. 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

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! Show Notes 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. Sick Picks Scott: Solar Lanterns. Wes: Ninja Obstacle Course. 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

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

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. Show Notes 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. Sick Picks Andrew: Nix Mini 3, Asynchronous Programming in Rust. Shameless Plugs Andrew: 1Password. 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 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. Show Notes 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. Sick Picks Scott: Supercommunicators. Wes: Klack, Mech Vibes. 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

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. Show Notes 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. 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 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. Show Notes 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. Sick Picks Robin: Awesome Sock Club Wes’ X Post. Shameless Plugs Guest: Infinite Red, ChainReactConf, React Native Radio. 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, 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

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

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

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

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

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

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

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

Join Scott and Wes as they delve into the fascinating realm of Biome.JS alongside Emanuele Stoppa, the mastermind behind it all. Why is it written in Rust? Why are other tools so slow? Could Biome be the ultimate successor to ESLint or Prettier? Grab a seat at the table and find out! Show Notes 00:00 Welcome to Syntax! 00:10 Brought to you by Sentry.io. 01:49 Who is Emanuele Stoppa and what is Biome? 03:18 What happened to Rome? 05:49 Who’s paying for Biome to be developed? 07:28 How many people are working on Biome? 09:24 Why do we even need Biome? 11:38 Why are other tools so slow? 12:55 Cost of compute. 14:01 The cache management. 14:30 Why was the decision made to move to Rust? 16:35 The bigger the company, the pricier the compute. 19:49 How to get started with Biome. 23:08 Will Biome offer more features than Prettier? 24:12 Language support. 26:02 A language parser for every language? 27:45 Will plugins need to be written in Rust? GritQL GitHub. 31:25 Ezno, TypeScript Compiler. 33:13 Will we ever see a new TypeScript type-checker? 35:38 What are your thoughts on the types proposal? Proposal Type Annotations. 38:03 What does your average day look like? 41:10 What is your role at Astro? 41:46 What other languages do you know? 43:22 Biome VCS. 45:14 GitHub action setup. 47:04 Supper Club Questions. 47:09 What text editor, theme and font are you using? 48:26 What do you do to stay up to date? 48:54 Sick Picks & Shameless Plugs. Sick Picks Emanuele: Ripley IMDB, Netflix. Shameless Plugs Emanuele: Astro, BiomeJS. 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

Web scraping 101! Dive into the world of web scraping with Scott and Wes as they explore everything from tooling setup and navigating protected routes to effective data management. In this Tasty Treat episode, you’ll gain invaluable insights and techniques to scrape (almost) any website with ease. Show Notes 00:00 Welcome to Syntax! 03:13 Brought to you by Sentry.io. 05:00 What is scraping? Socialblade. 08:01 Examples of past scrapers. Canadian Tire. 10:06 Cloud app downloader. 16:13 Other use cases. 16:58 Scraping 101. 17:28 Client Side. 19:08 Private API. Proxyman. 22:40 Server rendered. 23:27 Initial state. 24:57 What format is the data in? Google Puppeteer Extension. 27:08 Working with the DOM. 27:12 Linkedom npm package. 29:02 querySelector everything. 31:28 How to find the elements without classes. 34:08 Use XPath selectors for select by word. 34:53 Make them as flexible as you can. Classes change! 35:10 AI is good at this! 36:26 File downloading. 38:20 Working with protected routes. Proxyman. 40:41 Programatically retrieve authentication keys because they are short-lived. Fetch Cookie. 43:20 Deal-breakers. Mechanical Turk. 44:58 What happened with Amazon? Uniqlo Self-Checkout 46:42 Wes’ portable refrigerator utopia. 47:25 Sick Picks & Shameless Plugs. Sick Picks Scott: KeyboardCleanTool. Wes: Yabai. 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 discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it. Show Notes 00:00 Welcome to Syntax! 01:57 Brought to you by Sentry.io. 02:26 What is okay to steal? 02:57 Color palettes. 03:14 Font stacks. 06:26 Type scales. Warp’s CSS Gradient Border. Sentry’s Date Picker. 08:52 General layout patterns. 10:39 General vibes. 11:20 What is NOT okay to steal? 11:26 Whole site designs. 13:32 Taking too many things from ‘what to steal’ list. 16:30 Text copy. Wes’ Parity Purchasing Power. 18:48 What we’ve had stolen + how it feels. 21:45 Where to find inspiration. 21:56 Code inspiration. CSS Scan Buttons. CSS Scan Box Shadows. Codrops. CodePen 25:18 Design inspiration. Bentro Grids. Dribble. Site Inspire. SaaS Landing Pages. One Page Love. Type Wolf. Mobbin. Syntax Newsletter. Hoverstat.es. Internet Gems. 32:48 UX inspiration. Good UI. The Component Gallery. Open UI. Nicely Done. 35:25 How to capture inspiration. 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 dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast. Show Notes 00:00 Welcome to Syntax! 01:17 Who is Ben Vinegar? Episode 434 with Ben. 02:21 Brought to you by Sentry.io. 04:00 Cloudflare analytics engine. Counterscale.dev. Episode 634 with Armin. 09:08 What is clickhouse? 11:01 Can Clickhouse be used for things outside of analytics tracking? 13:46 What kind of events are you able to track? 15:00 How do you assign values to track? Counterscale Schema. 18:40 Data type limitations. 19:55 The troubles with sampling data. 23:57 Sample intervals. 24:24 Pricing for these services. 25:34 How it actually runs. 27:31 Infrastructure costs and pricing models. 30:19 Running production apps in Cloudflare. 31:49 Cloudflare and HonoJS. 32:47 One year with Sentry and Ben’s role with Syntax. Episode 600 with David. 39:33 How does it feel going from a software project to a media project? Syntax Team. 43:00 How do you sell Syntax to Sentry? 48:37 Sick Picks & Shameless Plugs Sick Picks Ben: Randy’s YouTube, Boom. Shameless Plugs Ben: Counterscale.dev 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

Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game. Show Notes 00:00 Welcome to Syntax! 00:47 Brought to you by Sentry.io. 01:44 A recording bug. 03:18 VSCode versions. 05:59 Tabs or no tabs. 10:32 Navigation tips. 11:35 Mouse and trackpad input. 13:43 Move, select and expand by 19:07 Interface tips. 19:17 Sidebars. 24:23 Sticky headers. 26:21 Activity bar. 30:30 Show or hide? 31:35 Profiles. 32:43 Keyboard Shortcuts. 32:49 Renaming. 34:32 Extensions. 34:45 Text pastry. 36:43 Better comments. 39:03 Auto rename tag. 40:02 Change case. 40:25 Permute lines. 41:26 File utils. 43:20 Sort JSON objects. 43:50 SQLite viewer. 44:29 Spell checker. 45:42 APC. 49:19 Themes. Syntax Theme 53:05 Final tricks. Log Wrapper 57:44 What about the AI stuff? 01:00:10 Sick Picks & Shameless Plugs. Sick Picks Scott: Flicker Free Ultra Definition Phillips Bulbs. Wes: Clear Shoe Box Organizers. Shameless Plugs Scott: Syntax Newsletter. 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 top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights! Show Notes 00:00 Welcome to Syntax! 02:16 Brought to you by Sentry.io. 03:14 JavaScript Services. 03:43 Valtown. 05:44 Observable. 06:35 Notebooks. 08:23 Deno Juypter Notebooks. 09:51 Svelte Repl. 10:32 Playgrounds: TypeScript, Tailwind, etc… 11:05 CSS Services. 11:10 CodePen. 13:14 Full stack services. 13:47 Your own stack. Hot Tips & Cool Treats. Wes’s Hot Tips. Scott’s Cool Treats. 21:01 Bun file routing. 24:25 Tooling and tips. 26:30 Database. 26:51 Write to a file. 27:40 LowDB. 29:00 SQLite + Drizzle. 29:40 Google Sheets. 30:06 Sheet DB. 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

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome. Show Notes 00:00 Welcome to Syntax! 00:47 Brought to you by Sentry.io. 02:49 What is Shoelace? 07:21 What is Font Awesome? 08:07 Font Awesome is getting into Web Components? 11:35 What is Shoelace’s relationship with Web Awesome? 13:33 Is the idea to make it quick to get up and running? 15:46 What is the autoloader? 16:29 Where does Web Awesome fit in the ecosystem? 18:13 What does the styling game look like? 20:33 What is Part in CSS? CSS Part mdn web docs 22:06 The reason we’re so stoked with Web Components. 23:32 Custom elements are a natural progression. 24:51 What are your thoughts on Open UI initiatives? Floating UI Close Watcher Can I Use 27:40 Wes’ escape key conundrum. 30:21 A bug on the Syntax site. 31:19 Let’s talk about Kickstarter. 35:24 Do you know what premium inputs will be available in Web Awesome? 36:12 Rich text editor. 40:18 Setting goals. 41:48 Kickstarter giveaways. 42:47 Have you tried drag and drop? Pragmatic Drag and Drop 44:57 The layout component. 48:50 What are your favorite components? 50:29 Sick Picks + Shameless Plugs. Sick Picks Konnor: Enhance.dev, Extism.org Cory: Lit.dev Shameless Plugs Cory: Kickstarter Konnor: Everyone involved in open UI 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 answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home. Show Notes 00:00 Welcome to Syntax! 00:51 Brought to you by Sentry.io. 01:17 When should I use Light DOM or Shadow DOM? 03:43 Do you know of any good tools for extracting data/content from Markup/HTML? LinkeDOM on GitHub 08:29 Wanted to ask you guys your opinion on the state of Gatsby in 2024. LocalFirst.fm MeteorJS UI Updates 15:05 Please get the Goodhertz creator on the pod! Would be a great show. Goodhertz Audio Software 16:34 Effects that involve the JavaScript ‘wheel’ event. Runway.com GSAP Animate Anything CSS Scroll-Driven Animations 23:15 Best tool for rapidly creating UI from the ground up. Episode 751 Thinkmill.com 27:44 Wes, what’s with your frame rate? Frame Rate Testing Results on X 32:31 Is there any way to host a whole website setting on my PC at home? CJ and Self-Host 101 Hetzner.com Cloudflare Docs Create a Tunnel 36:52 Offline functionality like saving data and syncing data to database? Episode 739 Local-First Web Development Syntax Side Dish Explainer Playlist 39:41 Creating a GPT-like tool that can listen to long audio files. OpenAI Speech to Text Insanely Fast Whisper Deepgram 43:51 Sick Picks. Sick Picks Scott: Hair Powder Wes: Mini Grease Gun 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 chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools. Show Notes 00:00 Welcome to Syntax! 01:24 Brought to you by Sentry.io 03:00 CSS Is getting Functions and Mixins! CSS Mixins and Functions Explainer CSS Working Group Discussion 06:19 Functions and mixins, how are they different? 07:26 Don’t get hung up on the syntax, or maybe do. 09:12 CSS Functions. 12:02 Some use-cases. 15:58 CSS Mixins. 16:31 Tailwind-like classes. 17:53 Tailwind-like arbitrary syntax. 20:08 Fluid typography. 21:13 Let’s talk about logic. 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

We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization. Show Notes 00:00 Welcome to Syntax! 00:32 Who is Oliver Dunk? 02:00 Brought to you by Sentry. 03:17 Manifest V3. 08:59 How many rules can you add? 09:56 What even is a rule? 10:52 Is Google trying to kill ad blockers? 13:56 What are the bad guys doing with Chrome extensions? 15:17 Can a browser extension access HTTP-only cookies? 16:06 Is Chrome reviewing all of these extensions? 19:06 Is there a way to side-step Google’s review process? Reddit Thread, The real threat of Manifest V3 20:32 Do you see the negative chatter? 21:18 Service workers - how do do you access the DOM? 23:32 Do you think we’ll see more DOM APIs in service workers? 25:58 Do you have a favorite Chrome extension? 28:33 Has Google ever explored something comparable to Boost? SidePanel 33:09 Let’s talk about the development stack. 35:54 1Password and Chrome. 38:39 What is the best way to debug an extension? YouTube Chrome for Developers 40:33 Manifest V3 and the web request blocking API. 41:57 Known tracking payloads. 44:04 Do you think there is a path forward that makes ad-block developers happy? 44:45 Do you run an ad blocker? 45:20 Whitelisting and opt-ins. 46:38 What’s your tech setup? 47:18 What do you do to stay up to date? 47:51 Sick Picks + Shameless Plugs. 51:47 Wait, is Safari adopting V3 as well? Sick Picks Oliver: Defunctland YouTube, LEMMiNO YouTube Shameless Plugs Oliver: Chrome Extensions Getting Started, WebExtension Playground 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

Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career. Show Notes 00:00 Welcome to Syntax! 00:17 How can a front-end developer advance in their career? 01:10 Brought to you by Sentry. 01:30 Syntax newsletter. Snack Pack 02:02 How do you get better at being a developer? 02:22 Asking questions. 08:09 Get your hands dirty. Hot Tips, Cool Treats 14:07 Share what you know. 17:35 Target your skills for what is needed. Ryan Carniato Tweet Episode 577 Justin Fagnani Tweet Episode 595 21:12 Get out of your comfort zone. 26:55 Getting a better job. 27:27 Understand the stakeholders. 29:18 Find the metric the business cares about and do that. 30:01 Make an impression as being the person that gets things done fast and reliably. 31:47 Improve communications. 35:04 Be the person they want to have in meetings. 37:44 Use systems and tools to help your deficiencies. 39:01 Dress to impress. 39:32 Care. 39:40 Cut the cynicism. Energy Vampire 42:16 Don’t put bad stuff out into the world publicly. 44:29 Get your camera + mic dialed in. 46:23 Leveling up at life. 46:32 Take care of your shit. 47:40 Exercise. Episode 748 47:57 Eat well. 48:22 Sleep as much as you can. 48:26 Clean your workspace. 49:17 Learn new skills. 49:31 Take care of yourself. Habit Path 54:09 Sick Picks. Sick Picks Scott: Zeiss Lens Care Pack Wes: Woosh Screen Cleaner 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 dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching. Show Notes 00:00 Welcome to Syntax! 01:22 Syntax is on YouTube. 02:16 Let’s talk about the cache problem. 03:33 User-specific data and caching security. 06:27 Why might this pop up? 06:29 Marketing A/B testing - cookie based. 06:55 User-selected features - such as themes. 06:58 Language or geo-based items - accept language. 07:11 Images - WebP for some browsers, jpg for others. 07:45 JSON/HTML based on accept header. 08:17 Different encoding. 08:26 Content negotiation. 08:54 The solutions. 09:04 Provide different URLs/Query parameter. 11:19 Don’t cache the page, cache the data based on query. 15:01 Implement a “Cache Key” - one render for every option. Netlify Fastly Cloudflare 18:17 Use edge logic. 19:52 Just do it client-side. 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

Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development. Show Notes 00:00 Welcome to Syntax! 00:48 Who is Corbin Crutchley? 02:08 Brought to you by Sentry.io. 02:32 Hilton, like the hotel? 05:57 What is the best framework? 07:23 How do you compare these frameworks? 10:00 Do you feel like the metaframeworks are comparable? 11:02 Exciting announcements from ng-conf? 11:42 Are Wiz and Angular merging? 14:17 Angular signals and Vue comparison. PreactJS Signals 17:53 Adding signals to vanilla JavaScript and browsers. 21:02 What is derived state? 23:11 How can we store state within these different frameworks? 24:37 Passing children. 26:40 Which has the best implementation for passing children? 28:52 What’s the approach for building framework agnostic components? TanStack Store 30:31 How much of it is framework specific? 31:35 Headless or DOM-based? 32:48 What are the best practices for writing this? 35:28 What’s the biggest framework pain point? 36:21 Is there a language that requires significantly more code? 38:52 What about Web Components? 39:58 Your book is free? Framework Field Guide Shout-out Eduardo Pratti and Kevin Aguilar. 42:42 What’s the process of writing a book like this? 45:44 Not a physical book? 46:17 Walk us through the tech stack. 48:27 Supper Club Questions. 48:33 What text editor, theme and font do you use? 49:53 What terminal and shell do you use? 50:19 How do you stay up to date? 53:39 Do you have advice for beginners? 55:26 Sick Picks + Shameless Plugs. Sick Picks Corbin: Shiki Syntax Highlighter Shameless Plugs Corbin: Framework Field Guide 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 explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game. Show Notes 00:00 Welcome to Syntax! 02:39 We’re on YouTube. 03:14 The four categories of UI libraries or frameworks. 03:46 What does a UI component need to do? 04:14 Must be functional. 06:20 They must fit styling. 06:33 They must be accessible. 08:09 “Internationalizationable.” 09:29 They must handle theming and variants. 10:05 A few common UI components. 10:14 Date Pickers. 12:10 Dropdowns. 13:21 Toast message. Svelte French Toast 15:11 Some honorable mentions. 16:10 Headless components. 18:54 React Aria. Behavior, Accessibility, Internationalization 19:34 Radix UI Primitives. 20:16 Downshift JS. 21:29 Tanstack Table and Forms. 26:00 Unstyled components. 28:04 Shoelace. 32:47 React Aria Components. 33:00 Headless UI. 33:04 Radix UI. 37:12 Base UI. 38:23 What’s up with Google’s design? 40:22 Styled Starters. React Aria Components Starter ShadCN Tailwind Catalyst MeltUI 47:50 What is the process for overriding with custom elements. 51:10 UI Kits and Design Systems. 53:06 Some things to consider. JS Nation 55:41 A few more options to consider. Pigment CSS Base UI Shoelace BaseLayer JollyUI DraftUI Radix UI PenguinUI Tailwind CSS TailwindUI VerveUI DaisyUI ChakraUI Flowbite FloatingUI Downshift JS Mantine 59:02 Sick Picks & Shameless Plugs. Sick Picks Wes: Battery Daddy Scott: Lazy Susan, Rechargeable Batteries, Charger 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

Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year. Show Notes 00:00 Welcome to Syntax! 01:16 Brought to you by Sentry.io. 02:17 jQuery 1.2 released! 07:38 jQuery Mobile. 09:34 Skeuomorphism. 10:25 How do you slice up your .PSDs? Slicy By MacRabbit 12:34 Cufon, new font method. 14:06 CSS rounded corners. CSS3Please 15:17 Coda Tip. 16:48 Top 5 CoffeeScript Features. 18:44 Conference Talks to Spotlight. BatmanJS, your new favorite JavaScript superhero 20:35 WordPress 2.3! 21:15 PHP 5.2.0 PHP 5.2.0 Release Announcement 21:53 Sponsored by Media Temple. 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 are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites. Show Notes 00:00 Welcome to Syntax! 00:59 Who is Anne Thomas? 02:30 Who is Trudy MacNabb? 04:06 Shopify themes, how does one build a theme? 05:34 Do you have enough control with LiquidJS? 07:52 Changing components of a liquid template. 08:58 LiquidJS improving their dev tools. 09:29 LiquidJS email marketing. 10:32 Can you make your own LiquidJS methods? Too Many Tabs 11:34 How would you create a theme from scratch using modern tools? 13:30 What about local dev and live reload? Shopify Tools CLI 15:17 Is Shopify improving? 17:13 What do you hate about Shopify themes? Shopify Tools Theme Kit 18:59 Have you used Hydrogen? Shopify Hydrogen 20:09 Headless has sacrifices. 22:02 Are people building full websites in Shopify? 23:56 Apps and integrations. 25:56 Are people creating businesses around these integrations? 29:16 What are design packs? 31:26 Do you run your own servers? 31:57 How does billing work with clients? 33:18 Apps being ‘Sherlocked’. ‘Sherlocking’ Explained 35:21 Where is the data stored? 36:35 Can you make a custom UI? 38:40 What are the downsides of building apps on Shopify? 39:17 Are you expected to maintain versions? 40:46 Do you manage all the support independently? 42:01 How do you match with their existing themes? 43:54 What are the most popular blocks? 45:17 Does Shopify provide bundlers or compilers? 46:47 Shopify moving to blocks. 47:38 Living as a digital nomad. Syntax Episode 586 on Nomad Developing 49:48 A new app Anne and Trudy launched. 51:35 Limited by block size. 54:08 Sick Picks + Shameless Plugs. Sick Picks Trudy: Bar of Shampoo Anne: Alie Ward Ologies Podcast Shameless Plugs Trudy: 25% off using SYNTAX25 at Design Packs 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

Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements. Show Notes 00:00 Welcome to Syntax! 01:14 Brought to you by Sentry.io. 03:10 A very quick disclaimer. 03:32 A brief view of our fitness history. 06:19 Why is fitness important for developers? 09:12 Setting your goals. 13:06 Getting started with fitness. 13:13 Body-weight. 13:58 Stretching. 16:47 Fun activities that don’t feel like workouts. 17:48 Lifting weights. Stronglifts StartingStrength 25:47 Home gym gear. Rogue Stall Bar 37:14 Fitness programs. 40:53 I guess we have to talk about diet. MacroFactorApp 46:37 Motivation. 47:42 Supplements. BulkSupplements.com Creatine 51:23 Sick Picks. Sick Picks Wes: Wikday Pull Up Bands Scott: Booty Bands 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

Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills! Show Notes 00:00 Welcome to Syntax! 00:41 Syntax on YouTube. 01:28 What is middleware? 05:04 Some real-world examples of middleware. 05:10 Authentication. 07:44 Redirecting users to a specific instance. 08:28 Logging + statistics. 09:41 Debugging. 10:00 Timers. 10:46 A/B testing. 11:59 Error handling + logging. 12:23 Caching. 13:02 Multi-tenant applications. 15:08 Where does it run? 18:07 What are the limitations? 21:52 Next.js middleware is one file only. NextJS Middleware 23:35 Sveltekit solution. Sveltekit Hooks 24:31 Connect style. Fastify Express Fastify Middle 25:28 One last thing, NPM Installing. 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

Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work. Show Notes 00:00 Welcome to Syntax! 01:55 Should developers know how to run their own servers? 04:57 What is “bare metal”? 11:49 What the hell is Kubernetes? 12:25 Why would somebody need Kubernetes? 15:37 Using Kubernetes to spin up different instances on cloud providers. etcd 16:43 Kubernetes managing traffic spikes. 18:46 How much downtime can you handle? 22:11 What exactly is a container? 24:06 What containers do you prefer? Docker Containerd 25:28 Some additional terminology. OCI Open Container Initiative 26:43 What about WASM? WASM WebAssembly 29:31 Building a Docker container. 31:11 Why would someone want to use a WebAssembly container? 32:12 Are people shipping this technology? 33:36 What functions would you put in WASM? 36:57 How does someone make a WASM image? 39:22 A little more about Spin. Fermyon Spin 39:56 What type of processors are used in these servers? 42:27 What are home servers running on? Turing Pi 2 Daniel Mangum Universal Blue 46:40 How should someone get started with Kubernetes? Kubernetes.io Rawkode YouTube Kubesimplify Learnk8s 48:51 Infrastructure as code. CDK for Terraform GraalVM 55:19 Sick Picks & Shameless Plugs. Sick Picks David: Golem.cloud Restate.dev Shameless Plugs David: Rawkode 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

Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers. Show Notes 00:00 Welcome to Syntax! 01:37 Syntax is on YouTube. 02:09 Do we really need tooling? 04:02 Popular tools are predominantly plug and play. 06:15 What can tooling do for us? 07:16 The tools in today’s workflow. 07:21 Linters. 11:29 Compilers and transpilers. 13:30 Formatters. 16:18 Tokenizers and Parsers. 16:46 Bundlers. 17:59 Macros. 20:26 The new tools in the space. 20:47 Biome, one toolchain for your web project. 28:27 Oxc, the JavaScript oxidation compiler. 33:01 Deno, code formatting. 34:13 ESBuild, an extremely fast bundler for the web. 34:37 Rolldown, fast Rust-based bundler for JavaScript. 38:34 Ezno, TypeScript type checker. 40:24 UnJS, Unleash JavaScript’s Potential. 41:45 Lightning CSS, CSS parser, transformer, bundler, and minifier. 42:31 Is JavaScript good enough to handle these tools? 43:26 Sick Picks + Shameless Plugs. Sick Picks Scott: Shinobi-Geddon: The 1980s Ninja Craze Wes: Bachans Japanese Barbecue Sauce 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

Join Scott and CJ on a rapid-fire journey through Docker. From unraveling containerization to practical advice on incorporating Docker into your workflow, this quick-paced episode has everything you need to navigate the world of container technology. Show Notes 00:00 Welcome to Syntax! 01:19 Brought to you by Sentry.io. 02:20 Easily reproducible environments. 02:57 Containerization technology. Containerization OS-level Virtualization 04:42 Docker is brand name containerization, there are others. Podman Containerd Buildah LXD 05:26 Why would a web developer want to use Docker? 08:19 How do you get started with Docker? Download Docker Desktop Start With Docs Docker 101 09:14 How does Docker work? Docker Sentry Docker Registry Docker Layers 16:46 Adding Docker to an existing project. SvelteKit Dockerfile Node.js / Express CLI Runner Twitchbot Development PHP / Mongodb Dockerfile 21:37 What is Docker Compose? Docker Compose 22:50 What are some ‘gotchas’ or things to look out for when setting up a project? Coding Garden Example Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads CJ: X Instagram Tiktok TwitchTV YouTube Randy: X Instagram YouTube Threads

Wes and Scott welcome Cameron McEfee, a seasoned creative director whose journey spans GitHub, Sentry.io, and the innovative realm of JavaScript plugins with his creation, GuideGuide. Cameron explores plugin building, iterating on the iconic Octocat for GitHub, and shedding light on the multifaceted roles of a creative director. Show Notes 00:00 Welcome to Syntax! 01:06 Who is Cameron McEfee? 03:00 What does a Creative Director do? 09:47 In a creative and collaborative field, how do you deal with hurt feelings? 12:32 Experiences at GitHub (404/500 pages). 15:35 Who is responsible for all the Octocat variations? GitHub Octodex 17:18 Did you ever get in trouble for using famous IP? 21:07 Working at Sentry.io. 25:08 What is your illustration process? 27:04 What is GuideGuide? GuideGuide Moo Tokenizer/Lexer 33:13 Grid Notation. 36:10 Can ‘good colors’ be calculated, can good design be math’d? 40:46 What was the process of building your own plugin? 43:37 Adding guides with JavaScript APIs. 44:44 Recreating application UIs within plugins. GoodHertz 50:22 How are you architecting these plugins? 52:44 Sick Picks & Shameless Plugs. Sick Picks Cameron: Ember Mug Waterparks Spotify Execute Program Shameless Plugs Cameron: GuideGuide 50% off 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 CJ dive into a potluck of developer queries, from their favorite tech reads to essential web dev fundamentals. Tune in as they dish out expert advice on migrating React projects to TypeScript, crafting precise timers for countdown apps, and navigating the world of free-tier plans. Show Notes 00:00 Welcome to Syntax! 01:20 Brought to you by Sentry.io. 02:16 What book changed your life? Whatever you think, think the opposite It’s not how good you are, it’s how good you want to be Crucial Conversations thanks @benvinegar 04:58 What are the web development fundamentals for beginners? Command Line Power User 08:39 What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks? Chris Coyer’s Post 11:51 Advice for migrating an existing React project to TypeScript. 20:38 Countdown apps, performance vs accuracy. 25:19 Are you listening to podcasts? Which ones? 31:46 With AI on the rise, will free-tier plans become a thing of the past? Coolify Syntax 730: Own Your Own Paas 35:59 What is SemVer anyway? semver.org npmjs TypeScript on Semantic Versioning 40:14 A question on ergonomics, home office aesthetics and productivity. 47:59 Do you ever stop to consider VueJS in 2024? Why or why not? unjs.io 52:12 Sick Picks + Shameless Plugs. Sick Picks Scott: Ellenos Yogurt CJ: Flat Iron Pepper Shameless Plugs 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

Wes and Scott tackle TypeScript trivia, from combining string literal types to unraveling the mystery of d.ts files. Join them as they challenge each other on conditional types, interfaces, triple-slash directives, and TypeScript records. Show Notes 00:00 Welcome to Syntax! TypeScript 01:05 Brought to you by Sentry.io. 03:20 How do you combine string literal types? Template Literal Types 06:34 What is a TypeScript Generic and why would you use one? TypeScript Generics 08:12 How do you write a conditional type? TypeScript Conditional Types 09:58 Generating TypeScript type from a function. Stricter Generators 14:09 How do d.ts files work? Module .d.ts 16:25 Name one difference between a type and an interface. Types vs Interfaces 19:15 What is a tripple-slash directive and why would you use them? Tripple-Slash Directives 20:52 What is a TypeScript record and what is it used for? Utility Types 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 are joined by special guest Xenova to explore local AI models in JavaScript. From Hugging Face to Transformers.js and practical applications like real-time speech recognition and object detection, this episode dives deep into the world of machine learning. Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io 01:05 Who is Xenova? 02:08 What is Hugging Face? 03:29 What is Transformers.js? 06:16 How was the library developed? SponsorBlock 09:04 How is it able to run? 10:09 Do they have to run in Python and how does Onnx work? Onnx.ai Hugging Face Optimum 14:19 What are some things you can do with this tech? 16:15 Vision tools. 17:38 This is actually running locally. 18:35 Doodle Dash 21:09 They currently run on CPU, what is required to make it run on GPU? 24:44 Can you run in JavaScript? 28:32 How it works with image vectors. 34:23 Why would people want to run it in another language? 35:55 Resizing images in the browser instead of on the server. 38:55 Applications distributed on the web vs running locally. 43:54 Electron has Node and Chrome, where would you run Transformers.js? 44:32 The API of Transformers.js 46:30 Object Detection. Semantic Image Search Client Real-Time Object Detection Background Removal Tool 48:33 What is the easiest way to get started? 51:26 Real-time speech recognition on the horizon? 52:08 Will we ever be able to run Stable Diffusion via JavaScript? 56:10 The Web LLM. 57:22 Practical applications for YouTube. 59:39 What we want to build for Syntax.fm. 01:06:43 Mean pooling, why it’s necessary. 01:09:30 Stopping YouTube spam comments. 01:10:34 K-Means Clustering. Text Clustering 01:13:49 Quantization. 01:17:35 Sick Picks + Shameless Plugs. Sick Picks Xeonva: WebGPU Shameless Plugs Xenova: Xenova on X 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

Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights. Show Notes 00:00 Welcome to Syntax! 03:18 Brought to you by Sentry.io. 04:08 What is LoFi? localfirst.dev 05:02 The Seven Ideals for Local-first. 05:29 1: No Spinners. 06:48 2: Your work is not trapped on one device. 07:56 3: The network is optional. 08:50 4: Seamless collaboration with your colleagues. 09:35 Oops, we for got to read 5: The Long Now. 09:37 6: Security and privacy by default. 09:45 7: You retain ultimate ownership and control. Actual Budget Finance App Ink & Switch 13:01 Sounds great, let’s go! Not so fast, this stuff is hard. 14:07 The technology involved. 14:30 CRDT (Conflict-free Replicated Data Types). Wikipedia Definition James Long dotJS 2019 dotconfrences 17:48 How does it prioritize conflict resolutions? 19:36 Websockets. 20:17 IndexedDB + SQLite. 21:23 Service Workers. 22:16 The software involved. 22:24 Replicache. 24:48 YJS. 25:06 Electric SQL. 25:51 The most basic LoFi application. 31:26 Some bigger concepts. 32:34 Answering some common questions. 35:19 Some real-world examples of LoFi. Habit Path by Scott Tolinski 37:18 What about Apple PWA nonsense? 38:20 This seems similar to real-time software and multiplayer. 38:47 Sounds like too much work. Triplit Fullstack Database Electric SQL Evolu 40:46 Some useful links. Local-First Web Development Local-First Lo.fi YouTube Local-First Ink & Switch Local-First Reddit Syntax GitHub Local-First 43:30 Sick Picks + Shameless Plugs. Sick Picks Wes: Dresscode.dev Scott: Monarch Money 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

Process is important. This show is dedicated to examples of non-developer tasks that can be improved by coding scripts. Join Scott and Wes for a deep dive into automation magic. Show Notes 00:00 Welcome to Syntax! 02:11 Brought to you by Sentry.io. 03:02 FFmpeg, a tool for video producers. FFmpeg FFprobe 06:35 Markdown validation. Syntax Markdown Validation 09:21 AI timestamps for inform editing process. Episode 456 Transcript 12:19 Generating clips for social media. 13:31 YouTube find and replace tool. YouTube Find & Replace - work in progress 15:03 What other scripts can you create? 16:17 Packaging a tool for a non-developer to use. 16:54 Apple Scripts 17:45 Stand-alone website. 19:25 Script Kit: Shortcut to Everything 20:19 Other ways to run scripts. ZX Dax 22:05 Get in touch with your tips. 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

Get ready to learn all about the JSR package registry with Wes, Scott, and special guest Luca Casonato of Deno, as they discuss its benefits, share insights on when to use it, and teasing some secret features that promise to enhance your coding journey. Show Notes 00:00 Welcome to Syntax! 00:37 Brought to you by sentry.io. 00:51 Who is Luca Casonato? 01:18 Why do we need another package registry? Wes Bos Tweet 04:35 Is it ESM only? 06:08 What exactly is JSR? 07:22 How do you install things from this registry? 09:38 NPM specifier in NodeJS? 12:18 Why can’t we just fix NPM? 14:28 When you make things easier, people make cooler stuff. 17:49 A little bit about auto-documentation. 21:18 Auto-Types. 22:33 Can’t you just put TypeScript files on an NPM? 24:04 Package Provenance. NPM Package Provenance 25:14 Does JSR have any plans for scanning dependencies? 27:56 GitHub action integration. 30:08 Does JSR replace url imports in Deno? Import Maps, Ep.596 32:15 What about publishing JSX, TSX, CSS, WASM, etc? 34:16 What are Slow Types? 36:34 Do you think we’ll ever see another implementation of a TypeScript type checker? 38:23 Types as comments or adding types to JavaScript. 40:10 What is the anticipated timeline? 41:52 Are there any parts of TypeScript that you don’t like? 43:32 What about when TypeScript breaks? 46:20 JSR community funding. 49:39 Are you planning on pre-registering popular names? 52:26 Super secret new features! 56:39 Sick Picks + Shameless Plugs. Sick Picks Luca: Hono Shameless Plugs Luca: jsr.io 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 introduce Syntax’s new Senior Content Producer, CJ Reynolds, who will be creating video deep-dives and companion content for topics covered on the podcast. CJ, also known as the host of Coding Garden, shares his passions for web development, teaching and experimenting with new technologies. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. 04:39 What got you into web development? 09:23 Does a degree in computer sciences help you in your day to day as a web developer? Bell Curve Meme 11:39 Wes downloads every single .com domain name. 15:19 What was your very first web development job? 18:12 How did you go from C# to websites? 21:12 What is the worst thing you’ve had to do as a developer? 22:31 What are some of your favorite projects? Is It New Years Day Dung Hero 26:32 What tech are you into right now? What inspires you? 27:52 Why do you like experimenting with new technologies? 29:39 Hono v4.0.5. 30:29 HTMZ 31:44 If you were to build a startup today, what would your stack be? 32:39 What’s your tech setup? Coding Garden GitHub RK Royal Kludge Keyboard 37:51 What got you into live-streaming? 40:13 Why do you use a blue screen? 41:19 What’s your philosophy on teaching? Bloom’s Taxonomy 43:56 What are your non-developer hobbies? CJ Skateboarding with Syntax deck CJ’s floofy doggo, Pig Sony VX10000 Sony Mavica 51:00 Sick Picks + Shameless Plugs. Sick Picks CJ: Ergonomics, More on Ergonomics Scott: Project Farm YouTube trash bag comparison Wes: Kitchy Pizza Cutter Wheel Shameless Plugs CJ: Coding Garden 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

Wes shares the story of how the Taliban stole his .af domain. Scott and Wes discuss top-level domain (TLD) best practices, how to find unique custom domain names for your website, and how to avoid having yours stolen. Show Notes 00:00 Welcome to Syntax! 00:16 Brought to you by Sentry.io 01:11 The story of how the Taliban stole my domain. 05:10 When you purchase a domain, does that country receive the registration fee? Country Code Top-Level Domain Infrastructure Top-Level Domain Generic Top-Level Domain Sponsored Top-Level Domain 07:29 Notion lost their .so domain. Notion 09:18 .ai domain names. 09:53 Other popular TLD options. tolin.ski wes.io 12:05 What are the best TLDs? 13:18 iwantmyname 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 welcome HTMX creator Carson Gross to discuss the versatile applications and optimal scenarios for using HTMX, alongside insights into its creation and evolution. Join us as we explore the future prospects and improvements as we look towards HTMX 2.0. Show Notes 00:00 Welcome to Syntax! 00:52 Brought to you by Sentry.io 02:22 Who is Carson Gross? BigSkySoftware GitHub BigSkySoftware 03:53 What exactly is HTMX? htmx.org htmx.org/examples 07:04 What made you want to create something like HTMX? intercooler.js 10:01 Would HTML look more like HTMX if we were to rebuild it today? 12:54 Isn’t HTMX a step backward into old-school AJAX? 16:09 When would you avoid using HTMX? 17:56 Does HTMX put an unnecessary load on the server? 21:46 What are your thoughts on rendering everything on the server? 26:29 What is your favorite stack? 28:49 Things that are lost moving to the JavaScript framework world. 30:16 HTMX coupling your front end and back end. 32:28 How do you feel about web components? 33:40 What are the big templating engines and your top pick? HTMX Essays 36:33 Object-oriented HTML. 37:38 Is there an offline story or a “local-first” story for HTMX? 38:44 What does the future of HTMX look like given its rise in popularity? 40:03 HTMX and X (Twitter). Syntax Show 726 HTMX on X 42:30 The Microsoft story. 45:26 Carson’s thoughts on de-escalating the language around HTMX. 47:44 Sick Picks + Shameless Plugs. Sick Picks Carson: AlpineJS, Datastar Shameless Plugs Carson: Hypermedia Systems, HTMX 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

In this potluck episode of Syntax, Wes and Scott discuss egress, scraping, Safari EU changes, and answer questions on updating dependencies and SetInterval. Show Notes 00:00 Welcome to Syntax! 01:35 Brought to you by Sentry.io. 02:49 I have over 100,000 user images on Cloudinary. How do I migrate to another service? Cloudflare-Cloudinary Proxy 07:27 Switching from Mac to PC. Figma, DaVinci Resolve 12:32 What’s your take on the Safari 17.4 PWA removal debacle for EU users? Bug Report Fullscreen API Bug Report 19:45 Is there any clear front-runner when it comes to monorepo tools? 23:44 Some big web apps have a div relatively high in the DOM with a class like “scroll-container” or “cursor-events”, why is that? 32:15 Is ChatGPT Plus worth it? I’m trying to avoid death by 1000 subscriptions. ElevenLabs 37:47 Performance vs accuracy when working with timers. 40:37 How do you update the dependencies to work with a current version of Node? Also, if you are building from scratch, how do you determine what dependencies to use? Syntax show 425: Updating Project Dependencies 45:52 Clarification on the browser blocking. Mozilla’s vision for Firefox MV3 49:19 Problems when working with JavaScript’s new Date(). 54:27 Sick Picks + Shameless Plugs. Sick Picks Scott: LED Flashlight Shameless Plugs Wes: Syntax 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

Wes and Scott explore the web standards and email authentication methods that keep your email from going to spam; DMARC, SPF and DKIM. If you send email via a custom domain name, you need to listen to this! Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. 02:08 What exactly are SPF, DKIM, and DMARC? 02:53 Different ways that you may want to send email. 03:23 Transactional emails. Resend, email for developers 05:07 Email marketing. 05:47 Anything else that sends email on your behalf. 07:13 SPF (Sender Policy Framework). Postmark defines SPF Postmark SPF in 5 Minutes 08:34 You can only have one SPF record. 10:18 DKIM (DomainKeys Identified Mail). Postmark defines DKIM 13:39 DMARC (Domain-based Message Authentication, Reporting, and Conformance). Convertkit 16:38 RUA Reporting. 18:03 How to set up reporting. 21:08 Does emails marked as spam hurt the IP that sends them? 22:18 Other things to consider. Special thanks to David Flanagan for the help on this! @rawkode 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