Claim Ownershiphx-pod
Subscribed: 4Played: 187
Subscribe
© Fluency Software Inc
Description
Join me while I learn about web fundamentals and talk at you about it
Twitter: @all__hype
Twitter: @all__hype
122 Episodes
Reverse
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
Comments
Download from Google Play
Download from App Store
United States