Ease into htmx with htmx-get
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
I recently attended python web conf 2022 and after seeing some incredible presentations on it I am excited to give htmx a try.
Date: March 25, 2022
I recently attended [4m[38;2;127;187;179mpython web conf 2022[0m <[38;2;122;132;120mhttps://2022.pythonwebconf.com/[0m> and after seeing some incredible presentations on it I am excited to give [4m[38;2;127;187;179mhtmx[0m <[38;2;122;132;120mhttps://htmx.org/[0m> a try.
[1m[38;2;167;192;128mThe base page[0m
[38;2;71;82;88m─────────────[0m
Start with some [4m[38;2;127;187;179mhtml[0m <[38;2;122;132;120m/html/[0m> boilerplate, pop in a script tag to add the [4m[38;2;127;187;179mhtmx[0m <[38;2;122;132;120m/htmx/[0m>.org script, and a button that says click me. I added just a tish of style so that it does not sear your delicate developer your eyes.
[38;2;122;132;120m[code][0m
Save this as [38;2;167;192;128mindex.html[0m and fire up a webserver and you will be presented with this big beefcake of a button.
Image: big beefcake of a button
If you don’t have a development server preference I reccomend opening the terminal and running [38;2;167;192;128mpython -m http.server 8000[0m then opening your browser to [38;2;167;192;128mlocalhost:8000[0m
[1m[38;2;167;192;128mThe Partial[0m
[38;2;71;82;88m───────────[0m
Now the page has a button that is ready to replace itself, notice the [38;2;167;192;128mhx-swap="outerHTML">[0m, with the contents of /partial. To create a static api of sorts we can simply host a partial page in a file at [38;2;167;192;128m/partial/index.html[0m with the following contents.
[38;2;122;132;120m[code][0m
hello
Image: the final results
[1m[38;2;167;192;128mTree[0m
[38;2;71;82;88m────[0m
To make it a bit clearer here is what the file tree looks like after setting this up.
[38;2;122;132;120m[code][0m
~/git/htmx v3.9.7 (git)
❯ tree
.
├── clicked
│ └── index.html
└── index.html
[1m[38;2;167;192;128mDemo[0m
[38;2;71;82;88m────[0m
I added htmx to this page and setup a partial below, check out this easter egg.
Click Me
[1m[38;2;167;192;128mLinks[0m
[38;2;71;82;88m─────[0m
- python web conf 2022
- htmx
- big beefcake of a button
- the final results