エピソード
-
Let's talk big ideas like Locality of Behavior vs. Separation of Concerns by relentlessly attacking one of the best websites ever created
-
Set the outer layer of settings of your request with THESE THREE OPTIONS
-
エピソードを見逃しましたか?
-
Question: Do you want your users in the comment section to write htmx that runs on your site?
If the answer is yes, please ignore this episode.
-
What if you don't want your page kept into the browser history local storage?
-
This is a somewhat open thought process looking at the question I see online: what is htmx good for?
Mentioned in the episode: the htmx movies example from Andrew Rhyand:
https://htmx.andrewrhyand.com/
A great looking page with smooth animations and educational htmx content on it. -
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!
-
Every request has secret hidden headers. But what if you wanted to make your own?
https://htmx.org/attributes/hx-headers/
-
When you make your life easier, that's a win.
-
Having any weird async ajax request issues?
htmx got yer back 🤜 🤛
-
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" -
Per listener request: Same episode as last, but without the soundtrack!
Keeping the other up for posterity's sake.
-
Every developer should have their own custom to-do app. Join me for my journey building this simple app in my head using htmx
-
Every attribute so far and where they fit together.
-
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.
-
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.
-
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/
-
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!
-
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"
-
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("zipcode").value}'>
Click for weather in one static location
</button>OR
<button hx-get="/my/weather/data"
hx-trigger="click"
hx-vals='js:{location: someJavascriptCalculationFunction()}'>
Click for weather in one static location
</button> - もっと表示する