942: Mental Health Q&A w/ Dr. Courtney Tolinski

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

23 Feb 202452min

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

21 Feb 202459min

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

19 Feb 202426min

Scott and Wes are joined by security expert, Alex Sexton of Stripe to cover all things: client security, XSS, attack vectors, and CSP (content security policy). Show Notes 00:00 Welcome to Syntax! 00:31 Brought to you by Sentry.io. 00:57 Who is Alex Sexton? 04:44 Stripe dashboard is a work of art. 05:08 Tell us about the design system. React Aria 08:59 Who develops the iOS app? 09:50 Stripe’s CSP (content security policy). 12:50 What even is a content security policy? Content Security Policy explanation 13:57 Douglas Crockford of Yahoo on security. Douglas on GitHub 15:13 Security philosophy. 16:59 What about inline styles and inline JavaScript? 19:41 How do we safely set inline styles from JS? 20:20 Setting up with meta tags. 22:52 What are common situations that require security exceptions? 26:24 Potential damage with inline style tags. 32:45 Looping vulnerabilities. 36:32 What about JavaScript injection? 37:09 Myspace Samy Worm. Myspace Samy Worm Wiki Sentry.io Security Policy Reporting 42:02 Does a CSP stop code from running in the console? 43:28 What are some general security best practices? 46:35 Strategies for rolling out a CSP. 51:49 Final tip, Strict Dynamic. Strict Dynamic 56:36 Where does the CSP live within Stripe? Original Black Friday story 59:35 One last story. 01:01:20 Sick Picks + Shameless Plugs Sick Picks + Shameless Plugs Alex: Wes Bos’ Instagram 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

16 Feb 20241h 3min

Scott and Wes talk about the benefits of owning your own PaaS (platform as a service), the main alternatives in the space, and ways to make passion projects more financially viable. Show Notes 00:00 Welcome to Syntax! 01:12 Brought to you by Sentry.io. 01:56 What is a PaaS? NGINX 04:21 Challenges with payment structures. Render 07:02 What is Kubernetes? Kubernetes 07:51 What are the differences between Kubernetes and Docker? Docker Swarm 09:15 Reasons to own your own PaaS. Nelify Bluehost 15:05 “Pokémon or Web Service” Original 150 Pokémon Characters 16:49 The players and their pros and cons. 18:51 Where can you host these services? 19:47 Kubero. Kubero 21:50 Coolify. Coolify Coolify pricing 28:15 Caprover. Caprover 29:03 Dokku. Dokku Shokku Ledokku Atlas Nixpacks 32:53 Piku. Piku 33:24 Cuber. Cuber 34:13 Acorn. Acorn Coolify creator, Andras Bacsai on X 36:44 The challenges of hosting your own PaaS. 38:46 Jekyll ran on a PC under a desk. Jekyll 39:36 Sometimes less is, in fact, more. 40:09 Final thoughts. 45:03 Scott got Bun to work on Coolify. 51:01 Sick Picks + Shameless Plugs. Sick Picks Wes: GripStic Chip Bag Sealer Amazon, GripStic Chip Bag Sealer Aliexpress Scott: Caseta Diva Smart Dimmer 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

14 Feb 202457min

In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations. Show Notes 00:00 Welcome to Syntax! 01:00 Brought to you by Sentry.io. 01:33 Why scope your CSS? 03:21 Scott’s hot take. 05:43 How does @scope CSS work? 07:31 Similar to a component-based workflow. 08:00 Not having to specify a selector for your scope. 09:52 Pseudo inline hover styles. 11:31 Donut scope. 13:01 “Inverted donut-hole scope” 14:50 Browser support + limitations. Mozilla @scope The Style Element Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

12 Feb 202418min

In this supper club, Scott and Wes welcome Kevin Hou, Head of Product Engineering at Codeium, a blazing fast AI-powered code completion and chat tool for developers. Show Notes 00:00 Welcome to Syntax! 05:31 An introduction to Codeium. 07:56 What information are you sending the AI to get such good completions? Codeium compliance 09:15 Codeium runs a 'Language Server'. 11:15 Crawling dependency tree and abstract syntax tree. 12:07 Using Codeium Live. 12:34 How big of a codebase can you run this on? 14:39 Sending select amounts of data to AI. 16:06 Does Codeium maintain codebase preferences and styling (ie. snake case)? 17:39 Will Codeium scan the dependency? 19:23 AI UI, have we found the best format? 21:55 Crazy ideas in tech. 22:53 Additional AI UI inputs. 24:14 How do you make an AI model? 28:42 How does Codeium manage the product roadmap? 32:09 Do AI models get worse over time? How does Codeium validate that it's not? Open AI Evals 35:39 How is Codeium THAT fast? 36:49 What programming langauges does Codeium use? 38:55 Codeium Playground. Codeium Playground 39:15 Caching as a performance improvement. 39:58 What is the pipe between Codeium and editor? 40:17 Codeium chat service. 41:44 A WebSocket system allowing push and pull communication. 43:13 Closed Beta for GPT 4.0. 46:12 The dreaded closing quote bug. 48:26 Sometimes bugs bug Wes. 49:49 Supper Club Questions 51:40 Perplexity.ai 52:35 What editor does Kevin use? 55:31 Sick Picks + Shameless Plugs Sick Picks Kevin: Lapse.com Shameless Plugs Kevin: Codeium.com 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 Feb 202458min

Join Wes and Scott for a 30,000 foot, ‘soup-to-nuts’ view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting. Show Notes 00:00 Welcome! 00:21 30,000 foot view of web development 02:37 Brought to you by Sentry.io 02:55 Starting with design tools. 06:10 Code Tooling 06:22 Text Editors 09:34 Terminal 14:28 Build Tools 16:07 Browser and dev tools 18:21 Formatter and linter. 21:43 CSS (how you style your website). 25:34 Programming languages. 27:14 Backend with metaframework. 29:36 Backend without metaframework. 32:20 Runtimes (JavaScript). What is Bun? The New JS Runtime The Deno Show 34:02 User interface libraries. Shoelace.style 39:43 Data management: Databases 41:42 Data management: ORM WTF is an ORM You should learn Drizzle, the TypeScript SQL ORM 42:53 Other data management considerations. 43:33 Image pipelines. 45:52 Hosting, CDN, CI. Where Should You Host Your App? Hosting Providers Compared Hasty Treat WTF × SSR vs JamStack vs Serverless? 47:21 Hosting your site. 50:19 The finishing touches. 50:26 Brought to you by Sentry.io 52:18 Captcha 55:03 Sick Picks + Shameless Plugs. Sick Picks Scott: GreatScottLab, Show #594 Wes: AliExpress Board, Wes’ Demo Shameless Plugs Scott: Syntax on YouTube Wes: 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

7 Feb 202459min