hx-pod
128 episodes — Page 1 of 3
Code Independence
Have you ever wanted to build a phone app?
bonushypeapps.devShare your ideas, follow the build!
S7 Ep 3Hypermedia Wars **LOST PROMO**
Primer @ JSCONF 2010 https://www.youtube.com/watch?v=wHlyLEPtL9oAn htmx interview with Makinde Adeagbohttps://htmx.org/essays/interviews/makinde-adeagbo/This is the lost promo for the full 3-part Hypermedia Wars seriesEpisode 1: Inflection 2010Episode 2: Virtual DOMinationEpisode 3: Hypermedia Strikes Back
S7 Ep 2Idempotency
The word software devs know in their soul but not in their vocabulary
S7 Ep 1Hypermedia in the age of AI
What does AI mean for the future of Hypermedia?1. React takes over in an AI feedback loop?2. Frameworks don't matter -- back to basics?3. Full-stack frameworks are everything?
S6 Ep 6Thinking strategically about your career
bonusJust some thoughts about preparing while you are in a good space to prepare
Html is actually good and it's getting better with Tony Ennis
bonusTony Ennis joins me to talk about how websites can be built with simplicity and power using new html and browser standards.================== EPISODE LINKSTony on X: https://x.com/tonyennisHtml First: https://html-first.comMini JS: https://mini-js.comBase Styles: https://base-styles.comTony's talk at big Sky: https://www.youtube.com/watch?v=aknX6xq8VfgUna at Google IO: https://www.youtube.com/watch?v=VTCIStB6y8s================== CHAPTERS00:00 Intro to Tony00:34 Tony's work at Really Good Software02:17 "My whole thing though is ..."05:03 The Platform and a Stylesheet talk07:18 Html tag list07:26 Una and the Chrome dev team making progress09:10 Popovers11:56 New UI Elements in Html 2023 vs 202512:34 Modal15:48 select with selectedcontent tag16:27 Multi-selects (they are still bad, but working on it)16:50 datalist (autocomplete)20:22 Async in HTML (replacing htmx?)28:57 Where React is preferred34:40 The Front-end spectrum -- Mini JS 45:52 Mini-js code example50:43 Laz on why html is great at UI52:30 Why a five-year-old can learn html55:21 Building mobile apps with React Native and webviews59:50 Server-driven web apps1:05:45 Base styles (unreleased minimal CSS framework)1:10:25 CSS Layers for siloing your libraries
Hypermedia in the wild
Who are the big names in hypermedia, even if they don't know it?Obviously: Carson Gross (Htmx, fixi), Delaney Gillilan (Datastar), Alex Petros (HTML triptych), Adam Stepinski (Hyperview)BUT ALSO: Caleb Porzio, Aaron Francis, Levels io, and DHH??Embrace the backendhttps://www.youtube.com/watch?v=uQO4Xh1gMpY
3d and flappy bird htmx
bonuswith Jon-Michael Hartway47:16 MY MIND IS BLOWNJon-Michael does something pretty crazy here. His entire 3D scene is static HTML. The 3d movement only comes from swapping out the style tag and the CSS!?!???!===================== BIG SKY DEV CON TALKBuilding things for Twitter Clouthttps://www.youtube.com/watch?v=yQzpyIXdzcE===================== 3D GAMEDemo: https://htmx-3d.deastl.com/Github: https://github.com/DeaSTL/3d-htmx-game===================== FLAPPY BIRDGithub: https://github.com/DeaSTL/flappybird-htmx **** Includes video!===================== Chapters (From AI)00:00 Introduction to Jon-Michael Hartway02:22 Development Background and Programming Journey05:10 HTMX Experiments and Flappy Bird Game07:35 Technical Insights on Game Development10:09 Challenges and Server Management12:47 Exploring Twitter Clout Projects18:54 Rule #1: Viral19:34 Rule #2: Ridiculous20:56 Rule #3: The wrong tech26:56 Rule #4: Low scope29:42 Rule #5: Fun29:50 Challenges of 3D Rendering in CSS33:39 Understanding Gimbal Lock and Camera Mechanics37:57 Implementing Multiplayer with WebSockets41:18 Innovative Use of CSS for 3D Positioning46:21 Future Projects and Learning Experiences
S6 Ep 5Htmx extension: response-targets
Direct your different response codes to different places!<head> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></head><body hx-ext="response-targets">Official Docs: https://htmx.org/extensions/response-targets/Hypecp example: https://hypecp.com/#htmx-response-targets
Big Sky Dev Con 2025
bonus"We do these things not because they are easy, but because we thought they would be easy."-Lazarus, on creating conference recaps=================== CHAPTERS:00:00 - Intro, Aaron Francis, Primeagen 01:19 - 01 - Carson Gross - API Design 04:40 - 02 - Stephanie Gredell - From Human To Bots 07:04 - 03 - typecraft (Chris Power) - VaaS (Vim as a service) -- How to teach vim to thousands of people with Rails and Go 10:28 - 04 - Robbie Wagner - HTML is stealing our jobs! 13:20 - 05 - Warren Buffering - Browsers are for Reads, Native Apps are for Writes16:49 - 06 - Jon-Michael Hartway - Building things for twitter clout20:00 - 07 - Ken Wheeler - you can just build things 22:55 - 08 - Duncan Lutz - Potatoes Go Brrr: Adventures in High-Speed Embedded Rust 25:08 - 09 - Mike Amundsen - Making Connections and Solving Problems : Hypermedia's Legacy and Future 29:22 - 10 - Barrett A Breshears - Backends?!? Where we are going we don't need backends 32:41 - 11 - Adam Stepinski - Extending vs Scripting: Lessons from building the Hyperview client 36:47 - 12 - Alex Petros - What's Left for Frontend Engineers? 41:30 - 13 - Dennis Ivy - Why good developers fail interviews44:55 - 14 - Turner Houghton - JSX minus react plus htmx 47:23 - 15 - Tony Ennis - The Platform and a Stylesheet (A path to Platform / SPA Parity) 54:23 - 16 - Dan Vail I'm dumb and so can you!57:27 - Closing=================== TALKS MENTIONED:Aaron Francis "Publishing Your Work" - Laracon US 2023 Nashvillehttps://www.youtube.com/watch?v=2YaEtaXYVtIThe Primeagen on Lex Fridmanhttps://www.youtube.com/watch?v=tNZnLkRBYA8Big Sky Dev Con 2025 Playlisthttps://www.youtube.com/watch?v=dTstnhS3moc&list=PLE57lymIlIyVXwAO-pO6gvMmnd6isAFTR01 - Carson Gross - API Design https://www.youtube.com/watch?v=dTstnhS3moc02 - Stephanie Gredell - From Human To Bots https://www.youtube.com/watch?v=9Sd_09Ci2cM03 - typecraft (Chris Power) - VaaS (Vim as a service) -- How to teach vim to thousands of people with Rails and Go https://www.youtube.com/watch?v=IfH-hzl3al804 - Robbie Wagner - HTML is stealing our jobs! https://www.youtube.com/watch?v=cdocEPDlwYM05 - Warren Buffering - Browsers are for Reads, Native Apps are for Writeshttps://www.youtube.com/watch?v=ojy5pQLJ_RQ06 - Jon-Michael Hartway - Building things for twitter clouthttps://www.youtube.com/watch?v=yQzpyIXdzcE07 - Ken Wheeler - you can just build things https://www.youtube.com/watch?v=p8WcV7LdnvU08 - Duncan Lutz - Potatoes Go Brrr: Adventures in High-Speed Embedded Rust https://www.youtube.com/watch?v=uu0hUxz6cJ009 - Mike Amundsen - Making Connections and Solving Problems : Hypermedia's Legacy and Future https://www.youtube.com/watch?v=i-GQhQs671k10 - Barrett A Breshears - Backends?!? Where we are going we don't need backends https://www.youtube.com/watch?v=c4CECgmr96s11 - Adam Stepinski - Extending vs Scripting: Lessons from building the Hyperview client https://www.youtube.com/watch?v=GJdgZsnihnM12 - Alex Petros - What's Left for Frontend Engineers? https://www.youtube.com/watch?v=z7M2inHiT4Y13 - Dennis Ivy - Why good developers fail interviewshttps://www.youtube.com/watch?v=3uWfmFCwmII14 - Turner Houghton - JSX minus react plus htmx https://www.youtube.com/watch?v=x51t1pQ_gAg15 - Tony Ennis - The Platform and a Stylesheet (A path to Platform / SPA Parity) https://www.youtube.com/watch?v=aknX6xq8Vfg16 - Dan Vail I'm dumb and so can you!https://www.youtube.com/watch?v=ZlmsRmarXA0
S6 Ep 4Htmx extension: preload
Adds pre-loading to your links and hx-get requests for that extra bit of speed.https://htmx.org/extensions/preloadExamples: https://hypecp.com/#htmx-preload
S6 Ep 3Htmx extension: idiomorph
Adds the hx-swap="morph" option.Let's you do fine-grained swapping and unlocks smooth css transitions between swapped elements.<body hx-ext="morph"><hx-swap="morph">https://htmx.org/extensions/idiomorphExamples:https://hypecp.com/#htmx-idiomorph
S6 Ep 2Htmx extension: htmx-1-compat
Make your transition from htmx 1 to 2 easier with this extension"Flip the switch slowly"https://htmx.org/extensions/htmx-1-compat/
S6 Ep 1Htmx extension: head-support
Core htmx extension head-supportAdd support for modifying, updating, or replacing items in the <head> tag of your page.Working example:https://hypecp.com/#htmx-head-support<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><body hx-ext="head-support"><title hx-head="re-eval">
S5 Ep 21Datastar 1.0 launch with Delaney Gillilan
...and why Laz thinks htmx is here to stay.A wide-ranging conversation with the creator of the real-time hypermedia framework Datastar Delaney Gillilan.1.0 launches with a full rewrite, a new website, and a non-profit foundation.* What is datastar?* What's different in 1.0?* Why datastar got rid of all dependencies* Going bigger and planning for the future* Web devs can learn a thing or two from game devs* Is SSE going to have its 'moment'?* Lazarus on why htmx is here to stay* Taking on Tailwind CSS (Stellar)* Rethinking web components (Rocket)* Utilizing UDP (Darkstar)================ GENERAL LINKS ===============Datastar: https://data-star.devDelaney Gillilan on X:https://x.com/delaneygillilanThe Datastar Podcast channel (w Ben & Delaney): https://www.youtube.com/@data-star============== REFERENCED VIDEOS ============Our first conversation (2024):Hypermedia at 144fpshttps://www.youtube.com/watch?v=HbTFlUqELVc00:23 V1 and Beyond (The journey to Datastar 1.0 blog post)https://data-star.dev/essays/v1_and_beyond03:18 Anthony AlaribeYou can’t build interactive web apps except as SPA (and other myths) https://www.youtube.com/watch?v=uVKSmR_hBMs&t=9142s03:58 Sam SelikoffHigh Floor, High Ceilinghttps://www.youtube.com/watch?v=uVKSmR_hBMs&t=5693s01:11:21 Daniel Colbourne - Put Verbs in your database - Event Sourcinghttps://www.youtube.com/watch?v=-mb2L97Yq882:26:20 Ben Croker Bug fixhttps://www.youtube.com/watch?v=pdbaGOibJkc&t=1051s============= CHAPTERS (from AI) ==========00:00 The Journey to DataStar 1.002:57 Hypermedia and Modern Web Features05:46 Understanding DataStar's Philosophy08:42 The Core Concept of DataStar11:17 Embracing Server-Sent Events (SSE)14:13 The Evolution of DataStar's Signals17:04 DataStar's Rewrite and New Features20:03 Comparing DataStar with Other Tools22:41 The Future of DataStar and SDKs28:22 Community Building and SDK Evolution29:55 Dependency Management and Performance Optimization32:40 Testing and Metrics in Development35:06 The Importance of Size and Speed38:06 Plugins and Core Functionality42:31 Version 1 Launch and Nonprofit Structure45:20 Introducing Rocket and Stellar54:45 The Evolution of CSS and Semantic HTML59:32 Introducing Darkstar: A New Era for Web Development01:04:12 Event Sourcing and Real-Time Collaboration01:08:15 The Future of Hypermedia and DataStar vs HTMX01:26:44 The Limitations of Polling and State Management01:33:12 Comparing DataStar and HTMX: A Functional API Discussion01:38:18 The Future of Frameworks: DataStar vs. HTMX01:43:35 Hypermedia as the Future of Web Development01:50:39 The Journey of Open Source Development01:54:21 Embracing Collaboration and Innovation01:56:51 The Challenge of Popularity and Engagement01:59:09 Navigating the Landscape of Hypermedia02:03:17 Building a Community and Onboarding02:07:24 Understanding Preferences in Development02:12:04 The Future of SSE and Hypermedia
S5 Ep 20Self-destructing polling
<div hx-get="/sending-status/" hx-trigger="every 2s" hx-swap="outerHTML"> Sending...</div>
S5 Ep 19Building with no build step
Is it ok? Can you make "real" apps without npm?Original X post:"we are now at a point that we can ditch build systems for many projects & many people underestimate the amount weight doing so would lift off their burdened shoulders"- htmx_orghttps://x.com/htmx_org/status/1928819921376395580Chapters:0:14 What is no-build?1:35 The X arguments4:25 Why the build process is (was) good5:26 Build process in practice6:31 Got money to burn?8:25 Do your own thing9:12 Tailwind CSS and Remix 3 (!!!) are introducing no-build setups11:00 There's always new ways to build great things11:20 (but learn build steps and React to get a job)
S5 Ep 18Ronan Berder: Basecoat UI (ShadCN without React)
I talk to Ronan Berder, the creator of Basecoat UI, a tailwind-based version of ShadCN for non-React projects.Built specifically for use with server-rendered templates, htmx, vanilla js, alpine, and other hypermedia-based solutions.Basecoat UI: https://basecoatui.com/Basecoat Repo: https://github.com/hunvreus/basecoatRonan on X: https://x.com/hunvreusI ask him how he built it, why he built, and what he has in store for it.Chapters (from AI)00:00 Introduction to Basecoat UI06:51 The Journey of Building Basecoat UI11:09 Understanding Theming and Customization18:57 Complexity in UI Libraries24:01 Design Principles and Aesthetics30:06 Future of Basecoat UI and Community Engagement38:24 Navigating Browser Compatibility Challenges41:49 The Evolution of Web Technologies45:25 Performance Optimization in Web Development51:14 The Aesthetic Appeal of Modern Web Applications54:29 Generative UI and the Future of Development01:01:21 Simplifying Complexity in Web Development01:11:42 Open Source Contributions and Community Engagement
Carson Gross: The Grug Brained Developer (the book)
bonushttps://grugbrain.devread the essay. buy the book. it's so good00:00 Intro01:00 What is the Grug Brained Developer?06:13 Carson's dev cred12:12 Web dev is hard!13:08 The Eternal Enemy: Complexity17:27 Saying No19:07 Saying ok22:28 Factoring Your Code26:45 Testing32:56 Agile35:04 Refactoring38:42 Chesterton's Fence41:03 Microservices45:12 ToolsType Systems53:58 Expression Complexity57:07 DRY1:00:22 Separation of Concerns (SoC)1:04:28 Closures1:07:57 Logging1:08:14 Concurrency1:09:44 Optimizing1:11:31 APIs1:18:17 Parsing1:19:44 The Visitor Pattern1:19:55 Front End Development1:22:55 Fear Of Looking Dumb1:28:20 The Essay vs. The Book
S5 Ep 17Clean code vs. codin' dirty
Codin' Dirty essay: https://htmx.org/essays/codin-dirty/One of many in the htmx/uncle bob twitter feud:https://x.com/unclebobmartin/status/1917306604267135311
S5 Ep 16Does htmx application structure exist?
Answer: Yes. But its different, because htmx is not a framework
S5 Ep 15Datastar signals
Datastar signals let you do front end stuff like alpine & hyperscriptDemo: https://hypecp.com/demos/datastar-signalsVideo: https://youtu.be/csPFLpm8OYIBad Apple: https://data-star.dev/examples/bad_apple
hx-pod behind the scenes (cross-posted from the CST podcast)
bonusIs Laz doing too many things at once?
S5 Ep 14World's easiest live dashboard with htmx
This might be the fastest, easiest way possible to make your dashboard live!Basically just do polling with an hx-get, hx-select, and an hx-triggerThe visual version of this episode:https://www.youtube.com/watch?v=NU3FEHJRMEs
S5 Ep 13A unified theory of hypermedia
Any Back-end. How html is generated doesn’t matterHATEOAS - No virtual DOMNo build step, No Node or npmDon’t care about package size - as long as no dependency chainLoad things as you need them (page and assets) Nothing is faster or more efficient than html
S5 Ep 12Going Live
yes my first one was a technical debacle, and that's ok
S5 Ep 1Getting inspired by efficiency
bonusUniversal Studios in Orlando is a master class in efficiency.
Brock Benson - From vuejs to htmx: the good, the bad, and the ugly
bonusMayples on Twitter: https://x.com/mayples_coIn this episode I talk to Brock Benson, creator of Mayples, a business valuation SaaS. Last year, Brock made the decision to rewrite his large-scale, Live VueJS production app into an htmx app. During this rebuild, Brock went on a journey into the internals of htmx, built his own extensions, embraced _hyperscript, and pushed against the limits of htmx.Does it scale? What were the pain points? What tricks did he come up? How does it compare with his earlier Vue version of the same app? I hope you enjoy this in-depth conversation with premiere htmx application developer Brock Benson.
Introducing Fixi, the minimalist hypermedia library by Jason Cross
bonusFixi: https://github.com/bigskysoftware/fixiFixi is a new hyper-minimalist javascript library. At less than 4kb, it gives much of the power of similar hypermedia libraries like htmx, with a new stream-lined approach. Use attributes like fx-action, fx-method, fx-trigger, and fx-swap to perform ajax requests to work with html from your server.In this episode Lazarus talks to its creator, Jason Cross.Chapters (from AI)00:00 Introduction to Hypermedia Frameworks02:49 Exploring HTMX and HTMZ05:58 The Philosophy Behind Fixi09:03 The Lean Software Approach11:59 Minimalism in Fixi15:06 Attributes and Functionality of Fixi17:55 Comparing Fixi and HTMX21:03 Copy and Paste Philosophy in Development23:51 Debugging and Size Considerations26:57 Future of Fixi29:45 The Philosophy of Open Source and Simplicity31:33 View Transitions and User Experience36:32 Design Decisions in Fixi vs HTMX38:27 Collaboration and Maintenance of Open Source Projects41:11 Attribute Inheritance and Locality of Behavior42:07 Event Handling and Extensions in Fixi46:32 JavaScript and the Future of Web Development
S5 Ep 11The core difference between htmx and datastar (correction)
Datastar experiment: https://hypecp.com/waveYoutube: https://www.youtube.com/watch?v=UXPD3LblwVA
S5 Ep 10Where datastar fits in (for me, right now)
datastar fills some gaps in htmx
S5 Ep 9Building the perfect hypermedia modal
The 100-year modalhttps://hypecp.com/#htmx-hx-essentials-examples
S5 Ep 8Speedify your site by dumbening your browser
The original tweet with the tweet that breaks your browser:https://x.com/defnotbeka/status/1878009000161407021Hypermedia shines when the data on the page gets big
S5 Ep 7The basics of css specificity
#my-id -> 1 0 0.my-class -> 0 1 0button -> 0 0 1#my-id .my-class -> 1 1 0id | class | typehttps://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
S5 Ep 6Do two things at once
2 things > 1 thing
S5 Ep 5Htmx "essentials" - 4 or 5 attributes?
Building hypecp.comWhat are the htmx "essential" attributes?
S5 Ep 4The "Hypermedia hot reload"
<meta http-equiv="refresh" content="5">
S5 Ep 3Building hypecp.com - hx-get
https://www.youtube.com/watch?v=QSCiNKWC24c
S4 Ep 15Exploring Unpoly JS with creator Henning Koch
Henning Koch, creator of Unpoly, discusses where his hypermedia framework sits in the ecosystem, why he built it, and why he favors Convention over Configuration.https://unpoly.comUnpoly has been around for a decade and is used in production by companies all around the world, including Bosch, Volkswagen, Audi, and Siemens.https://github.com/unpoly/unpoly/discussions/666
S5 Ep 2What does building in public mean?
hypecp.comhttps://www.youtube.com/watch?v=QZipE9zn-Og
S5 Ep 1Building hypecp.com - 01 - Public suggestions
New season of building in public!Want to upvote or downvote people's suggestions?
S4 Ep 14Server-driven web apps w/ R. Mark Volkmann
The exceptionally prolific R. Mark Volkmann talks about his book "Server-Driven Web Apps with htmx", along with his approach to learning, writing, teaching, hx-swapping, and much more!The book: https://pragprog.com/titles/mvhtmx/server-driven-web-apps-with-htmx/A talk on htmx: https://www.youtube.com/watch?v=U3CYrD2ry-UA blog on EVERYTHING: https://mvolkmann.github.io/blog/topics/The Notes directory: https://github.com/mvolkmann/MyUnixEnv/tree/master/notes
S4 Ep 13Hyperview: Server-driven mobile app development
Adam Stepinski, creator of Hyperview and co-author of Hypermedia Systems, explains how and why developed Hyperview.Hyperview lets you create a shell for your iOS/Android app, then populate it using XML and hypermedia, htmx-style inspired concepts.Hyperview is extensible, so you can find or build your own plugins.Links discussed:Website: https://hyperview.orgHyperview Github Repo (best place to ask questions): https://github.com/instawork/hyperviewDiscussion about client-side validation: https://github.com/Instawork/hyperview/discussions/332Examples of defining multiple behaviors: https://hyperview.org/docs/reference_behavior
S4 Ep 12hypecp.com, the hypermedia copy and paste site
Lazarus is joined by guest Lazarus to talk about his new project, hypecp.com, which bears a striking resemblance to his old project, htmxlabs.com
S4 Ep 11I rewrote my entire product in a weekend with htmx
Eric Harrison, MakeStartupsOriginal twitter post:https://twitter.com/blister/status/1752357600547545356For-Profit: https://makestartups.comNon-Profit (school): https://makestartups.orgPersonal website: https://ericharrison.info
S4 Ep 10The 100-year web service w/ Alex Petros
Home site: https://alexanderpetros.com/Utah JS talk (100 year web service): https://www.youtube.com/watch?v=lASLZ9TgXycBig Sky Dev Con Talk (Life and Death of Htmx): https://www.youtube.com/watch?v=1g5ruM-16_Y&t=2684sTriptych Proposals: https://alexanderpetros.com/triptych/Blog: https://unplannedobsolescence.com/
S4 Ep 9Tanner Bass reaches out with an "opportunity" on htmx labs
Tanner Bass claims to speak on behalf of the CEOS
Soon: Building htmxlabs.com in public
bonusGot a problem? Tell me all about it athttps://htmxlabs.com
S4 Ep 83 years of htmx + Django
Lucas Pires of CheckSec on when to use htmx and django -- and when NOT tooLinks:PyCon PT 23 | Building advanced back-office interfaces using Django & HTMXhttps://www.youtube.com/watch?v=hdLWZQb8pkE