Lazarus

hx-pod

Technology EN ↓ 131 episodes

Join me while I learn about web fundamentals and talk at you about itTwitter: @all__hype

Author

Lazarus

Episodes

Advanced htmx: hx-validate 10.03.2024 8:52

Your browser has built in types and validation on inputs in a form. But what happens when you use inputs without a form?? Note: I accidentally posted an incomplete episode at first, if you dont hear the end, try to re-download!

A conversation with the CEO of htmx 07.03.2024 12:58

Advanced htmx: hx-headers 06.03.2024 5:05

Every request has secret hidden headers. But what if you wanted to make your own? https://htmx.org/attributes/hx-headers/

Celebrate your little victories 04.03.2024 13:53

When you make your life easier, that's a win.

Advanced htmx: hx-sync 28.02.2024 10:54

Having any weird async ajax request issues? htmx got yer back 🤜 🤛

Advanced htmx: hx-push-url and hx-replace-url 24.02.2024 9:46

Push your ajax route to the url bar! Now you've got access to the back button again. .. but what happens when you refresh? Work with the browser history on any htmx request with hx-push-url and hx-replace-url. PUSH it to the Browser history stack: hx-get="/account/details" hx-push-url="true" REPLACE the current browser history stack: hx-get="/account/details" hx-replace-url="true"

Brain-coding an htmx to-do app V2 - NO MUSIC 22.02.2024 30:37

Per listener request: Same episode as last, but without the soundtrack! Keeping the other up for posterity's sake.

Brain-coding an htmx to-do app 21.02.2024 30:55

Every developer should have their own custom to-do app. Join me for my journey building this simple app in my head using htmx

The basics: Season 1 recap, grouping the attributes 17.02.2024 12:12

Every attribute so far and where they fit together.

The basics: hx-select 16.02.2024 7:46

What if.. you wanted just a part of the html from the response? In a perfect world, you could just use a simple css selector to get only what you need and filter everything else out. Well, welcome to the perfect world -- hx-select style.

A conversation with chat gpt, aka the htmx shillbot 2000 12.02.2024 27:38

NOTE: This is some Star Trek computer shit. You gotta hear it to believe it BIG interview today. We delve into where htmx fits in the broader dev world, how we might build a calendar with htmx, and even how to build and publish our own hx-load-class attribute.

The basics: hx-preserve 09.02.2024 2:32

Updating a chunk of the DOM is easy -- but what if you wanted to leave one element alone? <div id="leave-me-alone" hx-preserve>Content preserved</div> Content will NOT be swapped out in the request, as long as the id in the request data matches. https://htmx.org/attributes/hx-preserve/

The basics: hx-indicator and the special htmx loading classes 06.02.2024 7:54

Do you ever want to let the user know you are loading something? Of course you do. Just add the htmx-indicator class to any element (loading div, svg, gif), and the parent requests will make it show up. We discuss the magic you get for free in htmx and the way to customize it!

The basics: hx-params 03.02.2024 3:48

ok, you are submitting a form.. but what if you don't want to submit the whole thing? Use what only i call "the mysql selector of htmx" hx-params="first_name, last_name, state" or what if you wanted to exclude a field? hx-params="not secret_field"

The basics: hx-vals 01.02.2024 3:58

How do you feel about setting your request values right there inline? STATIC <button hx-get="/my/weather/data" hx-trigger="click" hx-vals='{"location": "01245"}' > Click for weather in one static location </button> DYNAMIC <button hx-get="/my/weather/data" hx-trigger="click" hx-vals='js:{location: document.getElementById("zi...

Bonus: The Single Source of Truth 30.01.2024 6:44

Your built-in advantage of building html on the server: everything important is already there. Here are the two server/client mental model discussions referenced in the audio: 1. Primagean "The truth about HTMX" Front end backend s=discussion starts around 12m https://www.youtube.com/watch?v=2hMrk7A8Wf0 2. Mostly Technical Podcast "High Floor vs. High ceiling" https://mostlytechnical.com/episodes/...

The basics: hx-boost 28.01.2024 6:47

How can you change your entire site to be faster and snappier with just one attribute? How can you recreate the entire libraries of turbolinks and pjax in a single line? How can you make your entire site essentially an SPA? <body hx-boost="true">

Bonus: HOWL (Hypermedia On Whatever you'd Like) 25.01.2024 7:39

Or, "How I learned to stop worrying and stack this stack on all other stacks." Essay on HOWL from htmx.org: https://htmx.org/essays/hypermedia-on-whatever-youd-like/

The basics: hx-on (htmx 1.x -> 2.0) 25.01.2024 6:25

ALERT ALERT hx-on is changing tomorrow! ...sort of 1->2 guide: https://v2-0v2-0.htmx.org/migration-guide-htmx-1/ hx-on attribute: https://htmx.org/attributes/hx-on/

The basics: hx-confirm 24.01.2024 4:00

What, you're too good for a regular javascript confirmation? Fine https://htmx.org/examples/confirm/

Bonus: htmx and gatekeeping 23.01.2024 8:01

Who gatekeeps the Gatekeepers? the coast guard? Thank you to rick @maverism for tweeting out the podcast!

The basics: hx-put, hx-patch, and hx-delete 23.01.2024 5:13

What on earth are PUT PATCH and DELETE and why would I use them instead of POST? Well, which do you like better? A) <button hx-delete="/articles/1"> B) <button hx-post="/articles/1/delete">

Bonus: A real-world example of using hx-swap-oob 22.01.2024 4:49

How to load a bunch of links to the after the page loads and place them anywhere you want with hx-swap-oob On site: <div hx-get="/load-podcast-links" hx-trigger="load"></div> In response: <div id="placement-1" hx-swap-oob="true">Placement 1 text and link</div> <div id="placement-2" hx-swap-oob="true">Placement 2 text and link</div> <div id="placement-3" hx-sw...

The basics: hx-swap-oob 22.01.2024 5:41

This is a new idea: let your response decide its own target(s)! <div id="my-update-div" hx-swap-oob="true">Updated html</div> <div id="my-update-div-2" hx-swap-oob="true">More updated html elsewhere on the page</div>

The basics: hx-include 18.01.2024 3:57

Uh oh. Your inputs are outside a <form> tag, what's to be done?