Fitness for Developers

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 Helmi 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 Helmi 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 Helmi 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 Helmi 202459min

Scott and Wes unravel the mysteries of HTMX, exploring the essentials for getting started, its powerful capabilities, limitations, and possible stacks for building primarily server rendered applications. Show Notes 00:00 Welcome 02:07 Brought to you by Sentry.io 02:53 What exactly is HTMX? 04:30 What you need to know before working in HTMX. 04:35 You need a server. 05:35 You’ll most likely need a templating engine. 06:42 You most likely do not need as much client-side JS. 08:33 You don’t work in JSON 11:15 Not something you can swap out your UI with in a SPA. 11:48 Brings back AJAX 13:32 So, what can it do? 15:20 And what it doesn’t do. 18:25 It doesn’t do server-side responses. 19:09 What about animations? 19:20 What about CSS? 19:57 What about Web Components? 20:06 What about third-party client-side JS? 20:18 What about WebSockets and SSE? HTMX WebSockets 20:30 What about extensions? HTMX Extensions 21:00 Wes’ “bomb” question. 24:16 What Scott likes about HTMX. 25:45 What Scott doesn’t like about HTMX. HTMX Multi-Swap 30:33 Hype, Meta Framework. Hype 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

5 Helmi 202432min

Wes and Scott talk with Jen Simmons about the latest updates to Safari, reporting bugs to Apple, understanding color in CSS, new CSS switch controls, and testing your websites in Vision Pro hardware. Show Notes 00:00 Welcome to Syntax! 00:03 Brought to you by Sentry.io 01:05 Meet Jen Simmons. 03:15 Safari has been killing it lately Safari Release Notes WebKit Features in Safari 17.0 WebKit Features in Safari 17.1 WebKit Features in Safari 17.2 10:25 Wes’ cOnSpirACy about Apple and APIs 18:18 Where is the best place to report bugs to Apple? Bugs.Webkit.org Jen on Mastodon Web Compat 20:35 What’s happening with CSS Color gamuts and models? 33:57 Is contrast color ever going to to land? 36:25 Where is the CSS Grid and Masonry proposal at? 44:20 Will we be able to target a specific row in a grid? 46:17 What are CSS switch controls? 48:44 How can web devs view their websites in Vision Pro devices? Apple Vision Pro Running your app in Simulator or on a device 54:26 In what ways are HTML / CSS / JavaScript running where we don’t realize it? 58:43 Sick Picks Sick Picks Jen: Walking. Shameless Plugs Jen: webkit.org X Feedback Assistant at Apple Sessions - WWDC23 - Apple Developer Webkit Standards Positions Safari Technology Preview Safari Technology Preview Release Notes What’s new in CSS at WWDC23 Rediscover Safari developer features at WWDC23 What’s new in Web Apps at WWDC23 Meet Safari for spatial computing at WWDC23 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott:X Instagram Tiktok LinkedIn Threads

2 Helmi 20241h 2min

Is the Virtual DOM Bad? Are keyboard shortcuts important? What is S3 storage? In this potluck episode of Syntax, Wes and Scott answer your questions. Show Notes 00:08 Welcome 01:27 Syntax Brought to you by Sentry.io 02:45 Welcome Randy, our new Producer! Randy’s YouTube 04:14 A ‘Canadian Podcast’ 04:43 Is Alpine JS or HTMX a replacement for pug or other templating libraries? 08:21 What powers the “in-app” browsers and how can we test our sites on it? Inject tracking code Tauri 13:16 A deep dive on generators and iterators. An Insight into Iteration Protocol through Infinite Scroll in Angular 15:25 Video podcast observations 17:18 PROBLEM I need a way of managing state. 22:34 Why is Virtual Dom (a la React) suddenly bad? 28:31 In a recent episode (659), Wes mentioned he updated the OG image cards, and noticed a higher click through rate. 29:07 Updated logo and monster truck intro. 30:19 Back to OG Images. 31:51 Are “import * as X” exports build stripped? 36:46 What is the difference between S3 storage and a CDN. Backblaze CDN 45:00 How important are keyboard shortcuts or extensions? Are they necessary to be a good developer? 50:04 Sick Picks + Shameless Plugs Sick Picks Scott: Perplexity.ai, Serversideup Wes: Zojirushi Rice Cooker Shameless Plugs Wes: Wes Bos Courses Scott: Sentry Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Randy: YouTube Scott: X Instagram Tiktok LinkedIn Threads

31 Tammi 202457min

Unveiling Svelte 5! delving into its latest features. From the impressive speed and simplicity to its compact size, discover what makes this new release so exciting. Show Notes 00:00 Welcome 00:39 Syntax Is A Video Podcast! @syntaxfm on YouTube 01:52 Brought To You By Sentry.io 02:42 Svelte 5 Introduction Svelte 5 Intro 05:45 What Are Runes? 06:21 $state() 11:49 $props() Class as a rest prop 16:41 $effect() 21:17 $inspect() 23:03 What Are Snippets? 27:33 What Are Events? 30:02 Built In Functions 32:42 Smaller Output Reddit example 33:31 Speed Benchmarks 35:00 Anticipated Release Try it today Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

29 Tammi 202437min