Tony 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
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
with 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
Direct your different response codes to different places!<head> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-response-targets@2.0.2"></script></head><body hx-ext="response-targets">Official Docs: https://htmx.org/extensions/response-targets/Hypecp example: https://hypecp.com/#htmx-response-targets
"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
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
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
Make your transition from htmx 1 to 2 easier with this extension"Flip the switch slowly"https://htmx.org/extensions/htmx-1-compat/
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/htmx-ext-head-support@2.0.2"></script><body hx-ext="head-support"><title hx-head="re-eval">
...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
<div hx-get="/sending-status/" hx-trigger="every 2s" hx-swap="outerHTML"> Sending...</div>
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)
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
https://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
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
Answer: Yes. But its different, because htmx is not a framework
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
Is Laz doing too many things at once?
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
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