2021-07-22 Simple, Fast Frontends With htmx

• https://fediverse.org/paulweveritt

• https://fediverse.org/htmx_org

• https://blog.jetbrains.com/pycharm/2021/07/webinar-simple-fast-frontends-with-htmx-with-carson-gross/

• https://www.youtube.com/watch?v=cBfz4W_KvEI

The web has changed in recent years. Modern websites mean lots of JavaScript on the frontend, sometimes supplanting HTML all together. You’re left with an incomprehensible, brittle pile of 3,000 npm dependencies, knowing it will never work in 2 years from now, much less 20 years.

It doesn’t have to be that way. In this webinar we introduce htmx, part of a recent trend to slim down frontends and return to the original principles of the web, while still providing faster interactivity. htmx has taken off recently, and Carson Gross, its creator, is dropping by to explain the why, how and what. With htmx, you use HTML – yes, HTML – as the organizing idea.

We’ll give you an orientation then show lots of examples in action.

Carson is a WebStorm fan, and since his motto is the HOWL stack – hypertext on whatever language – he and Paul will collaborate to show usage on plain servers and Python backends.

Speaker: Carson Gross

Carson runs Big Sky Software, teaches CS at a university, and is the CTO of LeadDyno.

He is the creator of htmx, hyperscript and intercooler.js, and has been doing web programming since the late 1990s. His technical approach is to look for hot new trends in the industry and then do the opposite of that.

Outline

• https://blog.jetbrains.com/pycharm/2021/07/webinar-simple-fast-frontends-with-htmx-with-carson-gross/

• Quick demo

• What is htmx?

• The problem being solved

• Static demos

• FastAPI demos

• Django demos

• Advanced discussion

Simple, Fast Frontends With htmx

The web has changed in recent years. Modern websites mean lots of JavaScript on the frontend, sometimes supplanting HTML all together.

You’re left with an incomprehensible, brittle pile of 3,000 npm dependencies, knowing it will never work in 2 years from now, much less 20 years.

It doesn’t have to be that way. In this webinar we introduce htmx, part of a recent trend to slim down frontends and return to the original principles of the web, while still providing faster interactivity. htmx has taken off recently, and Carson Gross, its creator, is dropping by to explain the why, how and what. With htmx, you use HTML – yes, HTML – as the organizing idea.

We’ll give you an orientation then show lots of examples in action.

Carson is a WebStorm fan, and since his motto is the HOWL stack – hypertext on whatever language – he and Paul will collaborate to show usage on plain servers and Python backends.

Speaker: Carson Gross

Carson runs Big Sky Software, teaches CS at a university, and is the CTO of LeadDyno. He is the creator of htmx, hyperscript and intercooler.js, and has been doing web programming since the late 1990s. His technical approach is to look for hot new trends in the industry and then do the opposite of that.

Transcription

Transcription
===============

00:12 hi everyone and welcome to today's webinar organized by jetbrains
i'm paul everett pycharm and developer advocate and i'll 00:18 be
your host 00:20 the topic for today's webinar is simple 00:23 fast front
end with htmx 00:26 i'm really happy to be joined today by 00:28 carson
gross the creator of htmx 00:31 and intercooler.js before that carson
00:33 runs big sky software 00:35 i think the big sky gives it away i
00:37 think it's montana is that right 00:39 that's right yup i can do
geography 00:42 teaches computer science at a university 00:44 which
someone on twitter said that was 00:46 really cool 00:47 and as the cto
of lead dyno welcome 00:50 carson 00:52 thank you i'm really happy to be
here 00:54 i've been uh very pleased to see 00:56 how much htmx has been
accepted by the 00:58 python community 01:00 so i'm you know it's been
it's been 01:02 great especially the django and flask 01:04 communities
01:05 have really been hitting it hard and uh 01:07 it's been nice to 01:08
be able to give them a tool that lets 01:10 them stay in their preferred
framework 01:12 and in their preferred programming 01:13 language 01:15
yeah and uh for everyone that's out 01:18 there 01:19 that's watching
and listening a couple 01:20 of points first carson is everywhere 01:22
all the time recently including uh 01:26 talk python michael kennedy did
an 01:28 interview with you a couple of weeks ago 01:30 i thought it was
really good um 01:33 and uh the the 01:37 other part of this and in fact
you were 01:40 just in a 01:41 net one as well the other part of this
01:43 oh my god 01:45 this is like the thing that i care about 01:49 the
most 01:49 in my life and so i might get a little 01:52 loud 01:53 those
of you over there in the comments 01:55 that i'm looking at right now
01:56 anchor thank you that's a great comment 01:59 if i get too loud
02:00 let me know because over enthusiasm 02:04 and microphone distance
is a bit of an 02:06 issue 02:07 carson your mantra is um 02:11 your
technical approach is to look for 02:12 hot new trends in the industry
02:15 and then do the opposite of that i love 02:18 you 02:19 a little
bit about your background the 02:20 what and the why of htmlx 02:23 and
hell i don't care tell us what you 02:26 think what is the web 02:27 sure
uh well that and that is true i'm a 02:30 contrarian by nature 02:31
um i've just always been that way um and 02:34 uh that's fine 02:35 uh
it's you know sometimes it's uh it 02:38 can be a little 02:39 it can be
difficult uh and i it can be 02:41 obstinate at times so 02:43 as i've
gotten older i try to temper 02:46 that a little bit 02:47 but i do think
the industry is you know 02:49 the computer industry is subject to 02:50
trends 02:51 and uh some bad ideas have come and gone 02:54 um one that
sticks out in my mind you 02:57 know just because it happened early in
02:58 my career was enterprise java beans 03:00 uh the 1.0 version and i
remember being 03:04 really upset with the way that went down 03:06 and
so i have sort of 03:08 always looked with a jaundiced eye at 03:11 the
latest and greatest stuff to come 03:13 out of the thought leaders in
the 03:14 industry 03:15 and i think htmx and intercooler before 03:18
that reflect that 03:19 there were sort of reactions against the 03:21
complexity of much of the front end 03:23 uh uh many of the front-end
frameworks 03:26 that were coming out 03:27 in the javascript world um so
you know 03:30 i maybe try and thing approach things 03:33 from a little
bit simpler perspective 03:35 uh trying to go with the grain of the 03:36
web we'll talk about what the web is 03:39 um uh as far as htm x htmx
is a way to 03:43 add interactive behavior to a web 03:45 application
03:46 just with attributes in your html 03:48 directly 03:49 and so it
tries to take html and 03:52 improve html rather than saying okay 03:55
html is a thing that you're going to 03:56 have to produce eventually
but you're 03:58 going to focus on javascript you're 03:59 going to be
producing javascript 04:02 code to make your ui work and so it's 04:05
really 04:06 trying to take html as hyper media or 04:08 hyper medium
04:09 and extend it give you more power within 04:12 html 04:13 kind of
staying within html um and that 04:16 that 04:16 kind of folds into what
my idea of the 04:18 web is which i didn't really understand 04:20 i've
been programming in the web for a 04:21 long time i started in the late
90s um 04:23 right when the web was getting going 04:25 doing cgi scripts
and stuff like that 04:27 applets if you remember what an applet 04:29
is 04:30 um and uh but i didn't really i feel 04:34 like have a very good
04:36 understanding of what the hyper what 04:38 hypermedia was what 04:40
html was at a fundamental level and what 04:42 the the 04:43 the restful
architecture was for the web 04:46 until um i built intercooler js and as
i 04:49 was building 04:50 intercooler.js i had people pointing out 04:51
to me hey this is really this is neat 04:53 because it's an extension
of the 04:55 hypermedia model of the web and you know 04:58 eventually
i 04:59 read stuff and understood stuff well 05:01 enough to to really
get that and so

05:04 um htmx and intercooler before that 05:07 are really
trying to take the this hyper 05:10 media 05:11 idea you know you have
a document it has 05:14 hyperlinks and other things going on in 05:15 it
and then it's exchanging 05:17 in a stateless manner in a restful 05:19
manner with the back end 05:21 sort of simple large grain requests is 05:24
the way roy fielding would say it 05:26 and updating html it's just html
going 05:28 back and forth 05:29 and so to me that's what the web is um
05:32 you're 05:33 the thing that made the web so amazing 05:35 and so
05:37 reliable and so flexible was this idea 05:40 of hypermedia 05:41
and uh so htmx again is trying to take 05:44 that 05:44 and give you more
let you accomplish 05:46 more within that original 05:48 idea within that
original conceptual 05:50 model 05:52 i was just thinking that uh if the
ui of 05:55 the web 05:56 really is going to be put your html and 06:00 css
06:01 inside javascript that's minified and 06:03 tree shaken 06:04 and you
want to go view source that 06:07 we've come a long way 06:09 um so thank
you for putting html back 06:12 into the web 06:12 i'm gonna by the way
i'm looking at 06:15 carson here and i'm looking at comments 06:17 over
here 06:18 and misha points out that there's a 06:20 really good 06:21
interview um with django chat 06:25 that you did a couple weeks ago as
well 06:27 i really enjoyed that one also 06:29 yeah the django chat that
was a great 06:31 talk and 06:32 you know python bytes was awesome too
06:34 it's been it's been great a little 06:36 exhausting i'm 06:37 i'm
an introvert by nature 06:40 yeah i'm sorry and uh cars and i were 06:43
joking that in the future we'll do this 06:45 dressed as daft punk 06:46
so that you can be an introvert and we 06:49 can add a little bit of fun
to this 06:51 um my lead in was a little bit off i say 06:53 i'm the pie
chart developer advocate 06:55 i'm pycharm and webstorm which really 06:58
means i'm python and web 07:00 but you're not python and you're not 07:02
pycharm 07:04 you're actually a webstorm customer 07:06 happy user yep
07:08 yeah absolutely um i well i have a 07:10 subscription to everything
07:11 i have that all so um and i use uh 07:14 rubymine 07:16 intellij
what's the c 07:19 c and c plus one c lion i use c 07:23 line for some of
my classes um so i'm an 07:25 intellij person 07:26 um and uh web so htmx
intercooler 07:30 and hyperscript which we might talk 07:32 about um are
all developed in webstorm 07:34 it's just i picked up uh intellij tools
07:38 uh excuse me i picked up intellij so 07:40 jetbrains tools uh 07:42
very early on in my career um i actually 07:44 first saw 07:45 saw it at
google when i interned at 07:47 google for a little bit 07:48 and uh that
was one of the they 07:51 supported two 07:52 editors emacs and uh 07:55
intellij and so i picked up intellij 07:58 all right uh thanks for the
kind words 08:01 um 08:02 yeah absolutely people may ask uh carson 08:04
doesn't do python and so you may say 08:07 how can you bring a non-python
person to 08:10 a pycharm webinar 08:12 i'll explain but first carson
08:15 you like to say how 08:18 can you explain that yeah how so h-o-w-l
08:23 that's a stack that i've made up and i'm 08:26 trying to 08:26 get
people to use um so there's jam sack 08:29 and uh what's 08:30 lamp right
yeah 08:33 and there's a bunch of different sacks 08:35 that you can use
and so hal 08:37 stands for hyper hypertext on whatever 08:40 you'd like
08:41 and uh the the idea there is that if you 08:44 use hypertext as
your exchange 08:47 as your exchange with your back end then 08:49 you
can use whatever back end you'd like 08:52 and that's in contrast with
the 08:53 situation where you're using json 08:55 if you're using json
on the front end or 08:58 as your exchange with your back end 09:00 and
uh presumably writing a lot of 09:01 javascript on the front end there's
a 09:03 lot of pressure for you to adopt 09:04 javascript on the back
end 09:06 and so um you know i uh with htmx my 09:10 hope 09:11 is that
people can use 09:14 whatever back-end technology they'd like 09:16 for
example python now python's been 09:18 growing 09:19 very dramatically in
the last few years 09:22 whereas uh 09:22 javascript's actually flatlined
a little 09:24 bit um 09:26 in the last five years and so uh it's a 09:29
shame if people 09:30 feel pressure to adopt javascript on the 09:32 back
end just because that's what they 09:34 happen to be using on the front
09:36 end and so htmx there's some other 09:38 technologies i think fall
under this 09:40 idea as well 09:41 but htmx by putting the focus back
on 09:43 html and by 09:44 emphasizing this exchange of hypermedia 09:47
with the server 09:48 allows you to use whatever you want on 09:50 the
back end 09:51 python go julia you know there's a lot 09:54 of languages
that people are very 09:55 passionate about and so 09:56 fine that's fine
and if you adopt html 09:59 as your 10:00 exchange with your server then
you're 10:02 welcome 10:03 to use it it's just templating on the

10:04
back end and so uh 10:06 so that's the idea with that is you know 10:08
you should be able to use whatever you 10:09 want not everyone likes
javascript 10:11 i don't like javascript that's all right 10:13 i've written
a lot of javascript now 10:16 i wouldn't use um for something but i 10:19
wouldn't want to write javascript 10:21 yeah exactly as someone who doesn't
like 10:23 javascript i've written an awful lot of 10:24 javascript to
avoid writing javascript 10:27 um uh but uh you know 10:30 so it just my
hope is that it opens the 10:32 back end up and so 10:33 htmx is back-end
agnostic in that sense 10:36 we don't put any requirements on you 10:38 on
the back end and so if you want to 10:39 use net python 10:41 flask versus
django whatever it is it's 10:43 fine 10:44 htmx will work with it just
10:47 let's put an exclamation on that uh 10:50 carson is exactly right
10:53 the major javascript frameworks are busy 10:56 on the next step
that will really 10:59 encourage you 11:00 to render on the server that
is the big 11:03 thing coming 11:05 and so for us in the world of python
we 11:08 need to be able to have a story that 11:10 scratches the 11:11
itch of why people want some of this 11:14 interactivity in the front end
11:16 okay let's talk a little bit about how 11:18 we're going to do this
webinar it's 11:19 going to be different 11:20 why because i care a lot on
this one 11:24 i'm doing the driving and i'm going to 11:27 show 11:28 um
demos from the htmx website and 11:31 carson's going to sit in the peanut
11:33 gallery 11:34 it's going to explain he's also going to 11:36 tell
me where i got things wrong 11:38 so with that in mind let's go through a
11:40 little bit about the format of the 11:41 webinar 11:42 we'd like to
make this webinar as 11:44 conversational live as possible 11:46 as you
can see already so should you 11:48 have any questions or problems during
11:50 the webinar please feel free to ask them 11:51 at any time during
the presentation 11:53 right over there in the youtube chat 11:57 that
question about why don't you like 11:59 javascript carson 12:00 shall be
explained in the next 45 12:03 minutes 12:04 uh we'll have a few pauses
during the 12:06 webinar probably after each demo 12:08 where carson and
i will answer your 12:10 questions we the pie charm team 12:13 and others
will be over there answering 12:15 questions right now on the youtube
chat 12:17 don't wait for the end ask your 12:18 questions as soon as
you have them 12:23 usually the most important question is 12:25 is this
thing being recorded 12:27 yes it's currently being recorded and 12:29
the recording will be available in this 12:31 youtube channel basically
immediately 12:34 every webinar i do i've done 5 trillion 12:37 webinars
in the past five years 12:39 i make the same joke every time in five 12:41
minutes somebody's gonna ask if this 12:43 thing is being recorded 12:45
look over there wait for it see when 12:47 it's gonna happen 12:49 so
with all of that set we're ready for 12:51 the first demo 12:52 if we
could go ahead and switch over 12:54 nope we're already switched over
12:56 i'm going to get over into the browser 13:02 and get to the demos
first we're going 13:05 to be following along 13:07 the examples 13:10 on
the htmx website i've taken them i've 13:13 converted them to 13:15 some
that are static pages on disk some 13:17 that are fast api 13:19 and a
quick demo of django at the end 13:22 don't ask me to publish this i did
13:26 i got in a little over my head i got to 13:28 clean up my software
before i share it 13:30 but for for your viewing pres 13:34 pleasure we're
going to be going through 13:36 some of these demos and taking a look at
13:38 them 13:38 so we'll go ahead and begin 13:41 and uh carson will
follow along i'll 13:44 give a demo i'll talk about a little bit 13:46
and then carson 13:47 will talk with me a little bit i'll 13:49 switch
over to side by side 13:51 and we'll explain the what the why and 13:54
the how of this demo 13:55 and then i'll come back and take a look 13:57
at some of the questions 13:59 so click to load this demo is 14:03 i i
started with this one because i felt 14:05 like it's like the easiest
one to 14:07 understand it works off of files off 14:09 this 14:09 like
a static site generator doesn't 14:11 require a backend app server like
14:14 django or fast api it's just a 14:17 get but it's like 14:20 already
awesome because it lets you go 14:24 scratch the itch that might make
you 14:26 switch 14:27 to the 15 000 npm packages of gatsby 14:32 you can
howl stay with your own stack 14:35 and walk up to this and click and get
14:39 more data from the back end now how is 14:42 it doing it 14:44 over
in the source we have 14:47 a button that says 14:50 hx dash get and why
don't i go 14:53 over to pycharm and we'll take a look at 14:56 this one
14:58 so this is the example in um 15:02 jinja 2 basically rendered to a
static 15:05 html file 15:07 and what we have is this is the first 15:09
run and it's got 15:10 one row of data in it we don't want to 15:13 load
all the data because it would be 15:15 too big of a payload 15:16 we want
the user to be able to go get 15:18 the next data 15:20 and so what we
have is a button and we 15:23 add 15:24 this attribute to it uh 15:27 by
the way i was able to add this in 15:31 webstorm slash pycharm with alt
enter 15:33 and 15:34 teach it to learn that attribute name 15:36 and get
rid of the warning 15:38 so what i'm saying is when you click 15:39 this
button htmx is going to jump in 15:43 and it's going to take over that
click 15:44 handler and it's going to use this as a 15:47 dsl 15:48 to
feed the javascript that carson 15:52 already wrote for you and we're
using 15:55 the csl to give three instructions 15:58 go get this page
when the page comes 16:01 back 16:02 shove it in replace me 16:06 and
then use this strategy for how we do 16:09 the update 16:09 it could be
in our html outer html etc 16:13 and then maybe along the way we might
16:16 have a little loading indicator 16:19 all right this all worked
really well 16:21 for me the first time 16:23 carson i will put you up
side by side 16:26 with 16:26 me and talk a little bit about this 16:30
example 16:31 yeah actually would you mind if uh if we 16:33 looked at
the code just 16:34 yeah sure is that all right i think 16:36 that'd
be good uh good for me so 16:39 um yeah so what this is you know as you
16:41 kind of went through it the hx get is 16:43 saying 16:44 uh when
someone does something in this 16:46 case it's a button so that's 16:47
by default that something's going to be 16:49 click it's going to retrieve
16:51 that vna jax call and that html is going 16:54 to come back and it's
going to take that 16:56 html and swap it into the dom somehow 16:59 and
so you've got hx swap down below 17:01 which says outer html 17:02 and so
what that's going to do is it's 17:04 going to replace the entire 17:06
table row with the id replacement with 17:09 whatever content comes back
and 17:10 presumably that's going to be two rows 17:12 of content 17:13
in that in page two right 17:16 so the original row and then this new
17:18 row um 17:19 so uh and that's the basic idea with 17:22 htmx is
a few attributes that 17:25 tell the telehtmx hey go and get some 17:28
html 17:29 and then swap it into the dom somehow so 17:32 that's the big
idea here 17:34 and you can target whatever you want a 17:37 couple things
i'd say here in this 17:38 example 17:39 is um if for hx target you have
a you 17:41 have hash replacement and that's a css 17:43 selector 17:44
that we're all hopefully familiar with 17:46 um in this case what you
could do 17:48 instead of a uh 17:49 hash replacement is you could say
17:51 closest space 17:52 tr and uh what that would do is it would 17:56
replace the content of the closest uh 17:59 matching 18:00 uh selector
which in that case as a 18:02 parent the closest tr 18:04 is exactly that
idea and then you could 18:05 drop that id from that table row 18:08 and
that might be a little cleaner a 18:09 little bit more you know 18:11
it's your call um that's 18:14 this could i joked during the tech check
18:16 with carson this could be a 17-hour 18:19 webinar because i've got
like 50 things 18:21 that just popped in my head with one of 18:23 them
being 18:24 uh you support bubbling yep 18:28 so can you explain what
i just said um 18:31 so 18:32 uh when you mean bubbling you mean event
18:33 bubbling yeah like as far as yeah so 18:35 um so h htmx tries to
take concepts that 18:40 you're already familiar with on the web 18:42
and use them 18:43 and so the uh most of the attributes 18:47 that you
have 18:48 in htmlx are inheritable and so you 18:51 could move 18:52
for example hx target up um to a 18:56 to you could you even move it
up to the 18:57 tr if you wanted to 18:59 um so i mean there's a bunch
of 19:01 different ways to skin this gap but 19:03 um and uh you could
change that from 19:06 closest tr which is a little redundant 19:08 to
just this 19:09 yeah to this and then anything inside of 19:12 that table
row now 19:14 the default target for it is going to be 19:16 this you can
override it by putting 19:18 another hx target on something if you 19:20
want to target some other 19:21 element but but that's the idea is that
19:25 htmx has this concept of inheritance and 19:28 that lets you avoid
repeating yourself 19:30 some people don't like it you don't have 19:31
to use it and it does violate 19:34 um something that i call locality
of 19:36 behavior and that you're moving the 19:37 behavior away 19:39
you're moving the behavior away from 19:40 this button and now you kind
of have to 19:42 look in two places to understand exactly 19:44 what this
button does 19:45 and that's just uh something that's you 19:48 know you
have to make a 19:49 a judgment call as an engineer as to 19:52 whether
or not 19:52 that's a better way to go the other 19:55 thing that i want
to say about this 19:56 example is 19:57 it swaps the outer html and
in a paging 20:00 example like this

20:01 it would be more common in my
experience 20:03 to instead to i think it's append after 20:07 um there's
an hx swap hold on i'll have 20:09 to look it up 20:10 don't worry about we
got a lot of 20:12 questions to answer yeah okay so but uh 20:14 normally
20:15 the way uh with something like this is 20:17 you actually append the
content 20:18 after the the row rather than 20:22 replacing the whole thing
with the 20:23 entire new table and that's just 20:25 because that's the
way a paging library 20:27 would typically work 20:29 but this is perfectly
acceptable just to 20:31 zoom back out and summarize we're going 20:32
over to questions 20:34 carson is talking about some big things 20:37 the
biggest one to me is html is just 20:41 okay 20:42 yep he also likes to
talk about 20:45 hypermedia as the engine of application 20:47 state 20:48
we'll have a demo on that where you get 20:49 to wax prolific 20:51 about
it and then finally this uh 20:54 locality 20:55 of behavior yeah 20:58 um
and so there are some articles out 21:01 there 21:02 being written about
you wrote that one 21:03 back in the intercooler days if i 21:05 remember
correctly 21:06 no locality behavior i wrote about it 21:08 but locality
of behavior 21:10 there's an essay on htmlx on the talk 21:13 page if you
go to html.org 21:16 talk there's a locality of behavior 21:17 essay and
that's it's a term 21:20 it's a term i'm trying to popularize as 21:22
uh in contrast with separation of 21:24 concerns in particular 21:26 most
web developers are familiar with 21:27 separation concerns where you pull
21:29 things 21:30 into different files and there are 21:31 advantages to
that but there's also 21:34 disadvantages which you can 21:36 the primary
one being it's hard to 21:37 understand what a button does 21:39 and why
it looks like it looks like it 21:41 does 21:42 just by looking at that
button you have 21:44 to go into a bunch of different files 21:46 and
uh each with htmx you tend to put 21:48 the stuff on the button 21:49
and so it's much easier to understand oh 21:51 that's what this button
is doing 21:53 um in contrast with like you know jquery 21:55 handlers
over in some javascript file or 21:57 whatever 21:59 and alpine js are
kind of getting 22:01 popular for similar things 22:03 which i'm going
to do a speed round 22:04 through questions i apologize for going 22:06
so fast 22:08 if any of you want to follow up with me 22:09 for longer
22:11 semi-accurate answers come find me on 22:14 twitter 22:15 anchor
makes a good point you will still 22:17 need things like alpine js 22:20
for the islands that's another 22:24 idea that's starting to spread is
that 22:26 use javascript for your islands 22:28 not for your entire
page 22:31 question about what language we're back 22:33 in python or
javascript 22:35 i'll let the title of the webinar 22:46 what do we think
about wasm i will 22:48 answer that one 22:50 forget about it for the
next three years 22:52 at least 22:53 it's got a long way to go before
you 22:55 will ever 22:56 be using it um 23:00 a question from anthony
how does this 23:02 actually work 23:04 very well okay next question
no sorry 23:06 how does this actually work 23:07 is this listening to
mutations in the 23:10 whole page 23:11 and looking at hx-attributes
23:15 that then just apply some dom changes i 23:17 believe the answer is
23:18 no actually anthony corrects it 23:20 listening to events do you
want to take 23:22 that one 23:23 yeah um just when content is loaded
htmx 23:26 scans the dom 23:27 for these attributes and hooks and event
23:29 listeners so it's not 23:31 super sophisticated and we do 23:34 we
don't uh just because it's so 23:36 expensive and typically not needed if
23:38 you 23:38 adopt a a good hypermedia model we don't 23:41 listen for
mutations you can do it 23:44 uh if you'd like and there's a small 23:46
javascript api 23:47 for working with htmx to when you have 23:50 uh out
of what i would call an 23:52 out-of-band mutation to your dom 23:53 and
new attributes are added and so you 23:55 gotta hook stuff up again 23:57
um but it's not a bit it's not a focus 23:59 of the library 24:00 so um
okay one last question 24:04 you're on a time limit because i know 24:06
you could do three hours on it 24:09 so keep it under 30 seconds i know
the 24:11 answer because i heard you talking 24:13 uh i think to michael
kennedy about it 24:15 um 24:17 does the mat should the metal language
24:19 htmx get 24:20 adopted by the dom standards committee 24:23 in the
w3c 24:25 i yeah i do think htmx is how html 24:27 should work 24:28 in my
opinion um i think they should 24:30 look hard at it and 24:31 obviously
not adopt the syntax but if 24:34 they want to drive html forward as a
24:36 hyper medium 24:37 then yes this is in my opinion this is 24:39 the
way to do it 24:41 there are standards like html include 24:43 and some
things related to that and you 24:46 think 24:46 oh wow that's it that's
what i wanted 24:48 but it's really 24:49 about importing javascript at
the end of 24:52 the day i mean 24:53 yeah all roads go through javascript
24:55 okay let's go on 24:56 for html can't get nervous or html no 24:59
kidding hey i went through my 25:03 i put all my chips on xhtml2 25:06
x forms and x-link yep 25:10 i know didn't work out for me i 25:13
sympathize 25:14 okay toggle message this is a pretty 25:17 similar one
in a way this is even 25:18 simpler 25:19 um the 25:23 default message
gets changed to 25:25 something loaded 25:26 from the server and this
is 25:29 really simple but what i want to do on 25:31 this one is 25:32
reload this and show the network in 25:35 action 25:37 all right and i'm
going to leave it as 25:40 all 25:41 i'm going to do an exercise for the
25:43 audience 25:44 which one of these should i click 25:47 if i want to
see the request generated 25:51 when i click on default message anyone
25:54 anyone let's see how everyone does on 25:55 this 25:56 i'm gonna
click it so there you go 25:59 in the background it did 26:03 an xmlhttp
request to go get 26:07 something that was a response type of 26:10 html
26:12 and then did its little trick to jam it 26:14 into the dom 26:16
um carson any hidden complexity there 26:20 no not really um you know
we've got a 26:22 div here which some people might 26:24 complain about
because there's 26:25 accessibility issues 26:27 with that um and so uh
you know but it's 26:30 all it's doing is uh when it ran it ran 26:33
into that div and it saw that hx get is 26:35 it said okay 26:36 well
it's a div the default action on 26:38 divs and most stuff is uh 26:40
click so let's add a click listener and 26:42 when someone clicks that
we're going to 26:44 retrieve this content 26:45 and the default action
is to replace the 26:48 inner content of the current element 26:51 and so
you can you can change all that 26:52 with attributes like hx target hx
swap 26:56 nhx trigger excuse me 26:58 so you can change all those things
but 27:00 by default that's what it's going to do 27:02 so makes a real
simple example like that 27:06 all right over to one that gets into 27:10
a little bit more uh snazziness 27:13 um lazy loading 27:17 what happened
was when i loaded this 27:19 this 27:20 arrived after it's not actually
27:23 in the original content 27:27 uh what in what happens is 27:31 we
have some new stuff from 27:34 from htmx called trigger 27:39 and this is
saying basically what event 27:41 am i looking for to happen click or 27:43
something like that well i'm looking for 27:45 the 27:45 page load event
carson a second will 27:47 tell us what actual event we're looking 27:50
at for that 27:50 and then when that happens go perform 27:53 this action
and for that little bit of 27:56 time i mean if i had a slow 27:58 server
you would see this in there 28:02 a little indicator and then because of
28:05 the htmx styling i've got something 28:09 available 28:09 to grab
and do a little bit of css 28:12 styling on 28:14 carson how's that for an
explanation and 28:16 do you want to explain some of the 28:17 mechanics
28:18 no i think that's really good um this is 28:20 a great demo 28:21
um this so lazy loading in particular i 28:24 think is extremely useful
28:26 um it's a little surprising to people 28:29 but 28:29 this is really
good for perf issues so 28:32 very often you'll have a ui that has 28:36
some part of that ui that is very 28:37 expensive to calculate 28:39 and
unfortunately in the original web 28:41 model that meant you had to wait
28:43 for the entire ui to complete before you 28:46 could stream back all
the html well with 28:48 this pattern 28:49 you can pull out that expensive
part to 28:51 a separate request 28:53 and let the entire page render and
then 28:55 show a spinner 28:56 as you compute this more complicated uh
29:00 more expensive part of your ui and that 29:02 can make the perceived
performance 29:04 of your your uh your web application 29:06 much 29:07
better so this is a great pattern very 29:09 useful 29:10 i probably use
this pattern uh as much 29:13 as anything else 29:14 particularly when
i'm doing perf work 29:16 and i think everything you've explained 29:17
is 29:18 is great um the the styling that you're 29:20 doing there's a
29:21 we won't get into the details of it but 29:23 there's a there's a
model for swapping 29:26 in new content and so what you're saying 29:28
there is 29:29 as this thing goes from what's called 29:31 the settled
states to the 29:33 final state make its uh opacity one 29:37 and kind of
fade it in that gives that 29:38 nice transition effect you're looking
29:40 for 29:41 um and so that's another good example 29:43 where htmlx
is trying to work 29:45 with the technologies we already have in 29:48
the uh 29:48 in the web transitions which typically 29:51 had to write
javascript previously 29:53 to use them and now you don't because 29:56
htmlx provides these sort of 29:58 checkpoints for you to write transitions
30:00 between 30:01 which is really nice so a couple things 30:04 to 30:04
ask you on that is that whole

30:08 setting of the css class this one
and 30:10 then unsetting it 30:11 during the lifecycle of the directive
30:15 is that all just within this directive 30:18 yeah that's part of
the infrastructure 30:19 um htmx has a swapping model so 30:22 i can get
the it's i won't go into the 30:24 it's pretty complicated 30:25 but it
lets you write transitions uh 30:27 between without having to 30:29 write
javascript so if you have if you 30:31 have a div for example that has a
class 30:33 one on it and it switches to class 2 30:35 when it's replaced
30:36 in the content then you can write a 30:39 transition from class 1
to class 2 30:42 in css and that transition will occur 30:44 because of
the way 30:45 swapping is done internally in htmlx 30:48 it's a little
elaborate 30:49 i won't go into too many details on it 30:51 but uh it's
all there and there's 30:53 documentation on it i would call that 30:54
advanced html speaking of documentation 30:57 uh css transitions is what
you're 30:59 talking about right now 31:01 later we'll talk about animations
uh 31:03 lots of good content 31:05 uh in these docs um 31:08 one thing
i want to add you made the 31:10 comment about your brake accessibility
31:12 by having 31:12 a div be clickable and stuff like that 31:15 i'm
using the bulma css library and it's 31:18 got five 31:18 trillion ways
to make things a link that 31:21 shouldn't be 31:22 likable yeah you
know i'm sympathetic to 31:26 the 31:26 um to the accessibility folks
but i also 31:29 think sometimes 31:30 they can hurt their own cause
just by 31:32 being a little bit 31:34 doctrinaire about it and so i
like a 31:36 cooperative idea like hey let's try and 31:38 move this way
and but you know i i don't 31:41 know 31:41 i understand where they're
coming from 31:43 and by i've tried to start using buttons 31:45 as my
default element rather than divs 31:47 okay um how about you take some
31:50 questions 31:51 uh is it possible to do auth stuff with 31:54 htmx
i'm not going to show a demo of it 31:57 so i'll let you handle this one
yeah um 32:00 auth works what i call what i call the 32:02 normal way
32:03 so cookie based session based 32:05 authentication 32:06 if you're
using something like django 32:08 for example there's almost certainly an
32:10 a 32:10 a bunch of good authentication libraries 32:13 if it's not
32:14 available default out of the box and so 32:16 the traditional way
on the web 32:17 is you know you'd have a login page 32:19 you'd log in
that would establish a 32:20 session cookie and then that session 32:22
cookie was your identity 32:23 and so because htmx is working in that
32:25 html model it just works what i 32:27 again i call the normal way um
and so 32:30 that's 32:31 you know each back end is going to have 32:32
its own authentication mechanism that's 32:35 the preferred way to do it
32:37 and so you can just use that for your 32:38 login page and you're
good to go 32:40 because cookies are sent the normal way 32:42 with htmx
32:44 there's no header or anything like that 32:45 if you have the cross
site scripting 32:48 tokens and so forth 32:50 then those need to be wired
into the 32:51 requests the way that htmx works 32:54 is it includes the
closest enclosing 32:57 form 32:58 of an element and so that will include
33:01 that token if it's a hidden input for 33:03 example 33:04 and then
there are ways to you know 33:05 there are various plugins that have been
33:07 created 33:08 to integrate htmx with for example the 33:11 big one
that i'm aware of is htmx django 33:13 um and my understanding is that
wires 33:16 that uh token and automatically 33:18 you will see a demo of
csrf support in 33:20 jenga 33:21 yeah so you know it's kind of i would
33:24 again i'd call it the normal way 33:25 um there's nothing fancy
going on here 33:28 it's certainly 33:29 uh our job over in the world of
python 33:32 to 33:32 create really useful recipes um showing 33:35 with
the major frameworks how to do some 33:37 of this stuff 33:38 uh ruslan i
think we answered about 33:40 accessibility 33:42 craig asked do you have
a testing 33:43 preference for htmx 33:45 i know you talked about this in
one of 33:47 your podcasts 33:48 yeah um i i don't have a preference but
33:50 i use um 33:52 is it mocha chai yeah 33:55 and then um senon js's
mock server 33:59 um those are i'm not i don't like the 34:02 way the
java community 34:03 or javascript community excuse me um 34:06 builds
their 34:07 software for the most part and so um 34:09 just because 34:10
lots of dependencies lots of things 34:12 flying around um 34:14 but uh
but that's what i ended up using 34:16 um and 34:17 i i htmx is a 34:20
browser-only library so you don't have 34:22 to use any there's no build
step 34:24 you can just include it off of cdn and 34:26 it just works and
so because of that i 34:28 have to do browser testing 34:30 and browser
testing unfortunately isn't 34:31 a big focus of the javascript community
34:34 these days as far as i can tell anyways 34:36 and so i had to do a
lot of work to make 34:38 that 34:38 all work well but in fairness i mean
it 34:40 does work and 34:41 we have a pretty extensive test suite 34:43
for htmx so 34:45 i have a 12 part video series on react 34:48 type script
and tdd 34:50 in webstorm and pycharm and 34:54 hello world takes about
five seconds for 34:57 a single test to run 34:59 does not spark joy gabe
35:02 asks a question about um 35:05 providing credentials uh such as jot
35:09 tokens for authenticated api endpoints 35:11 i think that's outside
of the scope of 35:13 htmlx 35:14 yeah well we're just really quick um 35:16
htmx does have an event model 35:18 you know one and one of the primary
35:20 events is config htmlx colon or 35:22 config request and so you can
hook into 35:25 that event 35:26 using a javascript handler and then put
35:28 whatever header you want 35:30 into the the 35:33 ajax request so we
can work with all 35:35 that stuff it's just not a big focus 35:37 there's
actually a declarative way to do 35:39 it as well but so we can 35:40 we
can work with that if necessary but 35:42 it's a little bit more work sure
35:44 and if it um if there isn't something 35:47 out of the box you have
an extension 35:49 model 35:50 yep and extensions are drop dead simple
35:53 yep yeah really that was a big focus of 35:57 mine 35:57 yeah okay
and craig if your question was 36:00 about 36:01 testing full stack htmx
with 36:04 django or fast api or something in 36:06 python 36:07 this is
something i'm interested i've 36:08 been a tdd 36:11 unit test and when
i want to test html 36:14 i use beautiful soup but this requires 36:18
javascript 36:19 and so if i want to do end-to-end 36:21 testing 36:23
taking a look at the dom isn't enough 36:24 and so pilenium is something
i'm 36:26 interested it's 36:28 selenium python that feels like cyprus
36:30 they advertise 36:33 okay on to the next uh example 36:39 and um
let's see infinite scroll 36:43 i'll go through this one and but i want
36:44 to speed up and get to these two so that 36:46 we can then get
36:47 over to the backend stuff so infinite 36:50 scroll 36:51 is this
was a little hard to demo 36:53 because my div over here goes a long way
36:56 so i put it inside an overflow div 36:58 but as i'm scrolling along
i get near 37:01 the end 37:02 and when i get to the end i want more 37:05
stuff to load 37:11 so i got to the last one now how did 37:14 that work
37:16 i put let me go into pipe charm 37:25 i put on the last one little
sprinkles 37:30 and this is back to the whole dsl 37:31 declarative you
don't have to write 37:33 javascript 37:34 carson's giving you a dsl in
fact 37:37 he's going to give you a dsl called 37:40 hyperscript which is
even more of a dslr 37:42 for this an attribute oriented dsl 37:46 where
you just fill in the blanks and 37:47 the correct effects happen and the
37:50 correct effect here is 37:51 when the revealed event happens 37:55 i
want you to do this stuff and it's 37:58 just not that complicated 38:00
no it really isn't you wanna you wanna 38:03 cover this a little bit 38:05
yeah just you know again infinite scroll 38:07 i'm not a huge fan of the
pattern 38:09 uh in many situations but there are 38:12 places where it's
appropriate 38:13 and uh so yeah you wanna get page two um 38:16 that would
38:16 presumably be encoded as you're 38:18 generating this on the back
end you know 38:20 what page you're on so you put the next 38:22 page on
this last 38:23 row and then you want to trigger on 38:25 revealed and uh
so 38:27 that revealed event is a synthetic event 38:29 that hgmx 38:31
creates when something scrolls into into 38:33 view there's also intersect
38:35 which uses intersection observer which 38:38 is a little bit more
38:40 uh advanced unfortunately so 38:43 htmx tries to be ie 11 compatible
38:46 um it has been in the past and so 38:49 intersect doesn't work on
ie so you just 38:51 have to be aware of that you're giving 38:53 up ie
compatibility if you use that 38:55 event and then hx swap here is saying
38:57 after 38:58 end and so what that's saying is add the 39:00 content
that comes 39:01 down from the server after the end of 39:04 this current
tag of this 39:05 table row and so that new content is 39:07 going to get
jammed in there 39:08 and that new content presumably will 39:10 have
another final row 39:12 that has something very similar but has 39:14
the next page on it and so you just put 39:17 scroll on down and you can
throw an 39:19 indicator in there if it's going to take 39:20 a while
and so forth but 39:22 i think this is a great example of you 39:23 know
three attributes to achieve 39:25 something that's considered a fairly
39:26 sophisticated 39:28 ui pattern on the web and we don't have 39:30
to we don't have to break out of the 39:32 html model to do that these
are all 39:35 attributes that a normal 39:36 you know html somebody's
familiar with 39:38 html should be pretty comfortable 39:40 with these
things i mean the one 39:42 question we have is more like a comment 39:44
why don't we like javascript for me 39:46 i spend most of my time these
days in 39:48 javascript and i don't necessarily mind 39:51 javascript
but i'm a python person i'm a 39:53 python in the web person 39:55 and
i dislike this idea 39:59 that the ui of the web 40:02 now has to be
written in javascript and

40:04 everyone else's job is to pump json to
40:07 it 40:08 that html is no longer a 40:11 thing it is an api that's
called by 40:15 javascript engines 40:17 so that's my answer about not
liking 40:19 javascript i like it for progressive 40:21 enhancement but
i do not like 40:24 having to write my entire ui in 40:27 javascript 40:28
i want any language how to be able to 40:32 work on the web anything you
want to add 40:33 to that 40:35 uh yeah i think that's that's a good 40:37
answer um i 40:38 i'm a programming language person i 40:41 created i've
created a couple 40:42 programming languages in my life and 40:43 there's
just design decisions about 40:45 javascript i mean there's that meme joke
40:47 that's like javascript and javascript 40:49 the good parts 40:50
if you've ever seen that picture of the 40:52 two books um 40:54 it's
just it's not a it's not a great 40:55 programming language it's very
familiar 40:57 i'm not you know ruby which is what i 41:00 spend most
of my time in these days 41:02 i'm also not a huge fan of there's a lot
41:03 of language decisions 41:05 that were made in there so i think it's
41:06 okay to work in a language you're not a 41:08 huge fan of 41:09 um
you know i just prefer a more 41:11 structured language typescript looks
41:13 like it might be all right 41:15 i haven't done any i haven't done
any 41:16 significant amount of work in it 41:18 so but part of it is
just subjective you 41:21 know i like 41:21 some people really like lisp
that's okay 41:27 i also don't like that i need 2 000 npm 41:29 packages to
write modern yeah 41:31 javascript stuff so definitely the is 41:34 that
it isn't that i don't like 41:35 javascript 41:36 i don't like javascript
everywhere yeah 41:39 and that 41:39 infrastructure like the the 41:41
infrastructures as with java and the j2e 41:44 world 41:45 i feel like
javascript has sort of 41:47 cultural issues 41:48 that have come up and
that make it tough 41:50 to work with 41:51 depending on your style of
development 41:53 um so you know 41:55 but it's subjective i'm not going
to 41:57 turn and talk you out alike in 41:58 javascript 42:00 okay on to
42:06 hadeos the worst acronym 42:09 in all of computing which is a shame
42:12 because it represents 42:13 such an important idea i'll let you 42:16
pinch the idea 42:17 i'll give the demo and then we'll come 42:18 back and
show what's being done 42:20 sure so uh you're right it is a it's a 42:23
bad acronym 42:24 um but uh and it's not explained very 42:27 well either
42:28 so let's see if i can do a better job of 42:30 it so hypertext is
the engine of 42:31 application state you may have heard of 42:33 if you
did hear about it you probably 42:35 heard about it in terms of a json api
42:38 and almost certainly and why we're not 42:40 doing haiti us 42:41
um but what hype uh hedos is 42:45 uh effectively is that when you're
42:47 building a web application like a real 42:49 web application 42:50
that the the hyper text should be the 42:53 engine of application state
and so 42:55 it's your hyper text or your hypermedia 42:58 that should
be 42:59 representing what is going on on the 43:03 server 43:03 and then
you exchange a request with the 43:06 server and that server streams down
43:08 new hypertext hypermedia that says okay 43:11 here's the new state
of the system so 43:13 like 43:14 you know just to pick a simple example
i 43:16 make a put 43:17 or a post to cause something to change 43:20 on
the server 43:21 and then the server says okay it makes 43:23 that change
on the back end and then 43:24 streams back 43:25 some html representing
the new state of 43:28 the world on the server 43:29 and all that state
is there in the hyper 43:31 media it's not 43:33 living in a side store
in like a json 43:36 model or whatever on the client side 43:38 rather
it's encoded directly in the in 43:41 the document itself 43:42 um in the
hypermedia itself and so um 43:45 there's a lot of really big advantages
43:47 to that model the the biggest one i 43:50 think the most obvious one
43:52 is that when that new html comes back it 43:55 contains 43:55 all
of the actions that are now 43:57 available in the system 43:59 right so
if i you know i click some 44:02 button to mutate say a contact i 44:05
archive them well when that media when 44:07 the the hypermedia comes
back 44:09 from that um that new hypermedia can 44:11 contain everything
i can now do with an 44:13 archived contact 44:15 inside of it all the
buttons and so all 44:16 the actions that are available 44:18 are within
that and the outer system the 44:21 the model the the code that's been
44:23 written that's loaded already the 44:25 javascript code no 44:26
it doesn't need to know anything about 44:27 that it's all right there
44:29 in that little bit of hypermedia and so 44:30 that's that's how the
state of the 44:32 application is encoded 44:34 in the hypermedia itself
and so it's a 44:36 really powerful idea it's very flexible 44:39 when
contrasted with for example thick 44:41 client applications as they were
built 44:43 in the 1990s even through to today 44:46 and in some ways i
feel like many of the 44:48 javascript 44:49 frameworks are encouraging
us to go back 44:51 to that older model 44:53 where you know what the
endpoints are 44:54 right like in a in a thick client you 44:56 have to
know this is like people like oh 44:58 give me your api docs well 45:00
in a really restful hadios based system 45:02 you don't need to know the
api 45:04 you just need to know the entry point 45:05 and then everything
surfaces itself 45:08 through hypermedia and so that's the big 45:10 idea
that's 45:11 that's what uh hadeos is and that's 45:12 that's how it's
useful and that's why 45:14 it's so flexible 45:15 and so that's what we're
trying to the 45:17 resurrection the real thing is 45:19 anyone who's ever
used a web browser 45:21 knows exactly what it is 45:23 yeah i i have links
that i can click on 45:26 to go edit 45:27 i mean it's right yeah it's
it's there 45:30 um in your uh article let me see if i 45:34 can 45:34
get to that it's under essays right yeah 45:37 under uh talk okay 45:41
all right down at the bottom yes 45:44 okay so these uh get into 45:48
this discussion a little bit um yeah 45:51 let's 45:51 get into the demo
and then let's talk 45:53 about how it works and then get back to 45:55 a
couple of really good questions so the 45:57 demo here is 45:58 tabs yep
46:02 in other contexts we would go reach for 46:05 2000 npm packages and
a bundler 46:08 and a level your complexity budget would 46:10 be shot
46:11 before you got the demo out the door 46:14 instead 46:15 this is
the demo and as i'm clicking i'm 46:19 going to the server and getting
46:21 the tab content now how am i doing that 46:26 i have a let me make
this 46:30 okay yeah 46:35 so i'm saying here's a div it's got some 46:38
tabs 46:39 and uh what i want you to do 46:43 is it's triggered by after
a hundred 46:45 milliseconds 46:46 go load tab one put it in here 46:50
use this swap strategy and tab one looks 46:53 like 46:53 this and it's
got 46:57 the handlers for clicking on each tab in 47:00 it 47:00 so we've
got two basic handlers one 47:02 which is load the tabs 47:05 or load the
first tab and then from then 47:08 on 47:09 the server is in charge by
sending hyper 47:13 media that describes all the possible 47:16 actions
47:16 three tabs yeah and then when i get to 47:19 tab two 47:20 it looks
pretty simple it's got 47:24 it says uh tab two is active 47:28 not tab
one and here are your other two 47:31 things that you can do 47:33 yep so
i'll stop with that because the 47:38 hyper uh script version of this is
47:40 really compelling 47:42 but i'll stop with this let you talk 47:44
about it and then let's get over to some 47:45 questions 47:46 yeah so
and you know normally if you're 47:48 doing web development 47:50 and say
flask or whatever if you have a 47:51 templating system you normally pull
this 47:54 navigation out to a shared template 47:56 between the three
so you wouldn't have 47:58 to repeat yourself and that's 47:59 one thing
about htmx is it pushes the 48:02 the factoring problem of your software
48:04 to the back end 48:05 and so you just have to do the normal 48:07
thing or something you already know 48:09 yeah um so um so it wouldn't
be quite as 48:11 repetitive as this 48:12 um but uh you're very you're
right in 48:15 that 48:16 once again all of the state of the 48:18 system
is 48:19 being captured by html and http requests 48:24 and so there's
no you don't have to 48:26 maintain 48:27 any additional fanciness if you
go to 48:29 the original page 48:31 for this um 48:34 by the way they're
here this isn't 48:36 factored the way you described is 48:38 this is a
static site generator version 48:39 there is no 48:41 other thing sitting
back there right 48:43 yeah and that's you know again that's 48:44 fine
that's a fine way to factor your 48:46 stuff if you're using a static
site 48:48 generator that's fine 48:49 um so um here what you might do
instead 48:51 of issuing another request for tab one 48:54 is you might
just inline that tab one 48:56 html content directly 48:58 in this thing
just to avoid that 49:00 additional request 49:02 right originally and
then i removed it 49:05 yeah and so you're you're factoring it 49:07 out
based on whatever your technology 49:08 basically 49:10 take all of this
yeah put it in here 49:14 right and get rid of this you can get 49:17 rid
of that guy 49:19 which is but you know it again it 49:21 depends on what
your back end technology 49:23 what you have available 49:24 and htmx
is back-end agnostic so you do 49:26 whatever works best 49:27 for the
particular technology that 49:29 you're using and that's fine 49:31 um
questions um how does this compare 49:34 this is a really good question
49:36 because it's bigger than what maxime is 49:39 really i mean he's
asking a big question 49:40 but it's even bigger 49:42 talking about ruby
how do you compare 49:43 htmx with turbo links and stimulus 49:46 hotwire
49:46 yeah yeah um uh it's definitely a 49:49 competitor with them um 49:51
htmx i feel like comes at the problem 49:54 from a different perspective
than those 49:56 technologies 49:57 so uh dhh and 37 signals they 50:00
the way that they approach software is

50:02 they like a big 50:04 system
or not necessarily big but they 50:06 like total solutions 50:07 that's
right and so they provide 50:10 infrastructure that makes everything
50:12 just work um so there may be if you want 50:15 to think of it in
a metaphor in a 50:16 metaphorical way 50:17 they're more like apple you
know you 50:19 just plug it in 50:20 and it works and that's great until
it 50:22 doesn't if you're familiar with apple 50:24 stuff 50:25 whereas
htm x comes at it from this 50:28 different direction saying 50:29 let's
take html and push it forward as a 50:31 hypermedia 50:32 and so because
of that it's a little bit 50:34 lower level you have to understand
50:36 html i think a little bit better in many 50:39 ways 50:40 but on
the other hand it's a little bit 50:41 more powerful and so maybe it's
50:43 you know a little closer to linux in 50:45 that sense and that if
you know what 50:46 you're doing once you build up the 50:48 basics you
can do a lot more 50:49 and it's much more flexible but it's not 50:52
that total solution 50:54 that kind of just works necessarily so 50:56
um and i 50:57 you know i i would say hmx is maybe a 50:59 little more
incremental you can sprinkle 51:01 it in a little bit more easily 51:02
progressive enhancement 51:04 yeah you can uh uh it's just a smaller 51:07
you know uh it's just a smaller library 51:09 overall 51:10 and then it's
really trying the mindsets 51:12 are just different 51:13 it's like let's
push html forward i 51:15 would say is the htmlx mindset 51:17 but the
thing that i say it's why this 51:19 is a bigger question than maxine is
51:20 asking is 51:22 there's a trend going on where 51:25 um there's a
backlash against javascript 51:28 fatigue 51:29 there's a back which is
a developer 51:31 experience issue 51:32 but there's a backlash on web
51:36 rendering about javascript being on the 51:38 critical rendering
path 51:40 yeah and there are several initiatives 51:42 including by the
51:44 creators of angular to 51:47 do and solid js and all these other
51:50 things 51:50 that are like don't give me a vdom don't 51:53 make me
have to rehydrate don't make me 51:55 do all these things before 51:57
you get your time to interactive yeah 52:00 let's do html again 52:02
and so this is part of a bigger trend 52:05 yeah well generating html
on the server 52:07 side is not significantly more expensive 52:09 than
generating json typically 52:11 and that that's usually not what is it's
52:14 not on your critical path anyways 52:15 like once you hit a data
store on your 52:17 back end 52:18 the string concatenation is a round off
52:21 error like it's just it doesn't matter 52:23 you know you could emit
the collected 52:25 works of william shakespeare and it'd be 52:27 fine
52:27 um you know so uh so that doesn't matter 52:30 and then you have to
say 52:31 you know html parsing on the front end 52:34 is in c 52:34 plus
plus and it's really really fast oh 52:37 gosh and 52:38 so contrast that
with even the fastest 52:40 parsers written in javascript or 52:42 any
logic written in javascript 52:43 whatsoever and it's just it's a 52:45
no-brainer so 52:46 it can be a much faster uh technology 52:49 for 52:49
the infrastructure and i think you're 52:50 starting to see that as they
try and 52:52 back off 52:53 um back to you know doing server-side 52:55
rendering but then you ask you gotta ask 52:57 yourself well 52:58 okay why
do we have javascript here for 53:00 interactivity well 53:01 here's another
tool you can use to 53:02 achieve your similar interactivity 53:05 and as
this kind of touches on something 53:07 sander is pointing out 53:09 not
only does it massively speed up kind 53:12 of like rendering time and all
that 53:13 stuff it also speeds up development time 53:16 especially if
you already have a stack 53:18 that you're massively 53:20 productive in
yep that's right there's a 53:23 ton of very good ideas that 53:26 in web
development that were dropped 53:28 when web when the server side became
a 53:30 dumb 53:31 json producer and didn't do anything 53:33 else except
produce json 53:35 um there a lot of things just kind of 53:36 went away
that we 53:38 great tools that we had developed on the 53:39 back end so
templating libraries 53:42 um caching 53:45 sessions understanding sql
really well 53:47 you know that's something people 53:48 you know now
they want they want graphql 53:50 on the front end and i'm 53:52 going no
you don't you want sql on the 53:53 back end 53:55 sql is there's a lot
of really good 53:57 tools around it and that's going to give 53:58 you
what you want you can produce 53:59 whatever html you want 54:01 and then
just stream that to the front 54:03 end and you're good to go um so 54:05
i think the question i think i know the 54:07 answer to it sorry for for
54:08 breaking off um maybe a possible future 54:11 feature of htmx 54:13
uh to find an htmx element that can be 54:16 mapped to json say a button
hits an api 54:18 endpoint receives json to convert it to 54:20 html 54:20
guess what game first there's something 54:23 called 54:24 let me go over
here called 54:30 extensions yeah it's under reference 54:32 yeah there
you go 54:34 and client-side templates 54:37 yeah so um i can't remember
which 54:40 template languages 54:42 are touched on in there but yeah i
think 54:45 there's 54:45 three of them okay yeah like handlebars 54:48
and nunchucks 54:49 and stuff like that why don't i just 54:51 click on
it and find out click on it 54:52 there you go 54:55 so gabe i think that
uh i think that 54:58 scratches 54:59 some of the edge it's not going to
do 55:00 the semantic part that you want 55:02 about issuing the requests
or whatever 55:04 but you can just run an extension for it 55:06 um yeah
yeah so there's some examples 55:10 here 55:10 um of how how you can work
with uh json 55:13 apis if you need to 55:15 all right and then uh craig
has a point 55:17 we can skip over that it's just about 55:19 my example
not being as good as it would 55:21 be um i'll come back to some more of
the 55:23 demos so we can get back to 55:26 the questions so we can get
back to the 55:27 demos okay 55:29 my friend you get a chance to make
your 55:32 pitch 55:34 same demo but in the demo we just did 55:38 the
tab bar had to be 55:41 redrawn by the server 55:44 wouldn't it be great
and what sucks is 55:47 when you swap in the div you might get 55:49 the
flash of one 55:51 of the style or whatever or the collapse 55:53 and
expand 55:54 because the div is being removed 55:56 wouldn't it be great
if it was 55:58 just this changing but we still had some 56:02 way to
move the is selected 56:06 sure would um and i will say htmx does 56:09
make it possible to have nice 56:11 animations on tab changes so we do
we do 56:13 a lot of work to make sure you don't get 56:15 that 56:15
flash of unstyled content that you're 56:17 talking about um 56:18 but
at the same time a lot of people are 56:21 um 56:22 very comfortable
with uh front-end 56:25 scripting for this sort of stuff and so 56:27
hyperscript is a a sibling project of 56:31 htm x which is front-end
scripting 56:33 uh the way i would do it and uh it's a 56:36 different
56:37 type of programming language it's very 56:39 event-oriented 56:40
um and uh it has a sort of natural 56:43 language 56:44 that we'll see
here in a second so let 56:46 me get it 56:47 centered and then you can
handle line 56:49 number three the idea is in this 56:51 demo we moved
the tab list 56:54 back into the original page 56:58 right and the only
thing we really need 57:02 to get now is the contents 57:03 is the part
that has to be changed how 57:05 do we handle it with 57:06 this little
guy right here and that's 57:09 what you're going to talk about 57:11 yep
um so yeah exactly so now rather 57:15 than streaming back to the tabs
and the 57:17 content below 57:18 we're just going to stream down the
57:19 content below and then on the client 57:21 side 57:22 we're going
to switch that is active 57:24 class between the tabs 57:27 and uh so
the way that we're going to do 57:29 that here is with hyperscript 57:31
and the way hyperscript works is um you 57:34 embed using the underscore
attribute 57:36 which i'm sure will make some people a 57:38 little bit
57:39 antsy but i like it you embed a small 57:43 script and this is the
syntax of 57:45 hyperscript and it says 57:47 on htmlx colon afterload so
on that 57:49 event when that event hits this div 57:52 do something and
what that's something 57:54 is is take the dot 57:55 is active class so
that uh that's a 57:58 literal in the language 58:00 uh hyperscript has
support for css 58:02 literals embedded directly in the 58:04 language

58:04 so you don't have to use strings for 58:06 them 58:08 take dot is
active for event target 58:11 and event target is in this case when uh
58:14 uh on after on load it's going to be the 58:17 tab 58:18 this is
going to be triggered on the tab 58:20 that was clicked 58:22 and you
can actually believe it or not 58:23 you could change this to 58:25 take
that is active for and then the 58:27 word the 58:28 and then say event
apostrophe s target 58:33 instead of dot you can do apostrophe s 58:36
there 58:37 for the events target um and uh this i 58:41 think 58:41
is uh it's kind of hyper 58:44 hyperscript is not for everybody it's a
58:47 language 58:48 i will note that because my example 58:51 switched
to bulma and it's got a 58:53 different 58:54 set of tag hierarchy yeah
this example 58:56 doesn't work i thought this was going to 58:58 fix it
and it didn't 59:00 okay so it never moves the is active so 59:04 this is
a bug in my current demo which 59:05 is why i didn't actually show the
demo 59:08 sure no problem but in general this is 59:10 the idea on the
front end 59:12 is you want you're going to want to if 59:14 you want to
write some scripting 59:16 that enhances the stuff that's going on 59:19
with your 59:20 normal htmx you can use something like 59:23 hyperscript
if you're very brave or 59:25 alpine js 59:27 is another uh good example
of a 59:29 front-end javascript framework 59:30 that plays really well
with these events 59:32 that are admitted 59:33 by great articles on 59:37
django htmlx tailwind css 59:40 and alpine js there's a tutorial on that
59:44 whole combination yeah 59:46 here is a brief write-up about 59:48
hyperscript with a link to the website 59:52 which looks like this yeah
59:57 okay let's take some questions and then 59:59 get on to the fast
api demos 60:02 oh my god i did not manage the time very 60:05 well it's
one o'clock already 60:07 okay so um yes with python ginger to the 60:11
back end htmlx would indeed be a great 60:13 choice because 60:14 you
already know how to do html you 60:18 already know how to do 60:19 modular
snippets of html with macros and 60:22 things like that 60:24 um let's
see there's a question about 60:27 wasm but we handled that earlier
60:30 uh gabe is answering some questions

60:32 thank you gabe 60:34
trend is building for these combinations 60:36 of alpine js and htmx
60:39 et cetera you're right htmx is made for 60:41 the future 60:42
there's a question about building a 60:44 community around this i've
got that in 60:46 our wrap-up so we'll handle that um 60:51 and then a
question generic question uh 60:56 no just a comment that this is a 60:58
completely different approach to a very 61:00 basic 61:00 problem out of
the box thinking very 61:03 interesting so that 61:04 is i agree on all
of that i appreciate 61:07 that 61:08 let's switch over to some dynamic
stuff 61:11 that isn't just 61:11 get we'll do deleting a row 61:16 and
then i'll have to i'll have to speed 61:17 through these a little bit
61:19 uh i'm in charge i grant us 20 extra 61:22 minutes 61:23 okay i'm
good until 11 30 so 61:26 okay it's nice being those okay deleting 61:29
a row 61:29 so i'm sitting on here i will open up 61:32 the network 61:34
and i will click on deleting the first 61:38 row 61:39 it will do a dialog
confirmation that i 61:42 didn't have to write any code to get 61:44
wow that's great and when i say ok you 61:47 animate the disappearing
of it in 61:50 issue and http delete 61:53 and friends the fact that i
have access 61:56 to verbs not named get in post 61:59 is a great and
marvelous thing that 62:01 should have been in html a long time ago 62:04
yeah man man 62:08 uh yeah that's a great example i do note 62:10 there's
a little looks like a little bit 62:12 of a gremlin there with those two
quotes 62:14 but we'll 62:14 maybe figure that out um but uh yeah 62:17
this i think is a good example you're 62:18 clicking on the button you're
replacing 62:20 the current row presumably with no 62:22 content 62:22
with that empty content if we go and we 62:24 look at the response 62:26
unfortunately it has some characters in 62:28 it and those characters are
going to be 62:29 interpreted 62:30 by htmx as oh this is what's going to
62:32 replace that table row and so that's 62:34 what's 62:35 happening
we're going to take a look at 62:37 the culprit here 62:38 this is in my
fast api demo 62:41 this is deleter row and 62:45 the endpoint returns
that 62:49 yeah i guess i would guess that's 62:50 because it's a json
response does that 62:52 can that be an h2 62:54 an html response maybe
sure i don't know 62:57 if there is an html 62:59 hopefully i can still
have the status 63:01 code that i want 63:02 yeah for sure you should be
able to 63:06 rerun this that's my that's my guess 63:13 i'm not familiar
with this server side 63:14 framework let's find out 63:18 there you go
well carson is a python 63:21 expert now 63:23 excellent i'm not an expert
put that on 63:25 your resume 63:27 absolutely um but you know one thing
can 63:29 you click on another row and i want to 63:30 talk about how that
fade out works 63:33 so first of all actually yeah actually 63:35 uh can
you cancel 63:36 and uh just inspect inspect that button 63:38 because
i want to look at the attributes 63:43 and just show how uh that's so
that 63:45 confirmation came up uh 63:47 is uh can you scroll to the
right and is 63:49 it on here or is it up above did you 63:51 factor
it up 63:52 i just want to show ajax confirm 63:56 oh there you go it's
right there ajax 63:58 confirmed so this has been hoisted up 64:00 onto
the table body 64:01 and so what that's going to say is that 64:03 any
action that occurs in here 64:05 we're going to confirm with this text
64:08 before we perform it 64:09 and so when you have deletes you 64:10
typically want to say hey wait a second 64:12 make sure you want to do
this 64:13 and so um you know this is that's how 64:16 that's achieved
which is nice you don't 64:17 i mean 64:18 putting it putting the handle
on every 64:20 row is not a good thing yeah 64:22 exactly and so that's
an example where 64:23 you've you've 64:25 in order to avoid repeating
yourself 64:26 you've hoisted the attributes up the dom 64:29 so that's
a great example um and uh and 64:31 then 64:32 when you click on one of
these buttons 64:34 it's going to take that new content 64:35 which is
blank 64:36 and when it's swapping it in when it's 64:38 swapping it in
it's going to transition 64:40 the opacity 64:41 of the old content to
zero you've got a 64:44 nice css transition here and that's how 64:46
you get that nice 64:46 fade out here's the styling again you 64:49 you
64:50 are in charge of adding and removing 64:53 these css 64:54 classes
right we have a declarative 64:57 interface 64:57 to make all that stuff
happen and then i

65:00 have access to css styling i don't have 65:02 to
do css in javascript or something 65:05 so i click exactly confirm and
i get 65:07 that nice animation 65:09 exactly and you know htmx will do
the 65:11 right thing as far as waiting for it to 65:13 finish and then
swap the stuff in and so 65:15 forth 65:15 so really again we're trying to
surface 65:17 these technologies that are available in 65:19 the browser
65:20 in html stuff that typically you had to 65:22 crack open javascript
in order to get at 65:24 them 65:25 are now available to you just using
65:26 plain html 65:28 yep um one question came in again about 65:31
webassembly 65:32 in my book totally independent of 65:36 webassembly which
can't yet talk to the 65:38 dom 65:39 yeah yeah and so htmx is very very
very 65:42 much about the dom 65:44 yep htmx is really again a return to
65:47 that model 65:48 to the original model of the web 65:50 hypermedia
let's let's use hypermedia 65:52 for stuff 65:53 hypermedia i'll skip the
animations demo 65:56 and do in-line validation because this 65:57 really
65:58 paints the scene for progressive 66:00 enhancement 66:01 in places
where just html out of the box 66:04 isn't a good enough user experience
66:08 so i did not i i ran out of time i 66:10 didn't restyle this for
bulma so it's a 66:12 little bit ugly 66:13 but it's a form we'll look
at the code 66:15 in a second and i 66:17 put in x at y dot org 66:21
and when i lose focus the server tells 66:24 me 66:26 i can't do that
and i'm like well 66:29 wrong i can do that 66:32 actually so let's take
a look at this 66:35 i'll get out 66:36 i'll go back to pycharm and give
us a 66:38 little more room on this 66:40 yeah this is inline validation
and the 66:43 demo 66:45 this is everything that we got to look 66:46
at i mean this isn't like 66:49 you know 50 dependencies and all this
66:51 other stuff 66:53 uh but it is i'll admit this one was a 66:56
little squirrely for me 66:57 so okay um kind of the inner outer 67:00
part got me a little bit so i'll let you 67:03 give the explanation of
what we're 67:05 what we're doing yeah so um this is an 67:08 input and
so the default action on an 67:11 input 67:12 in contrast with a button
so on a button 67:15 the default action or the default 67:16 trigger i
should say is going to be 67:18 click with input it's going to be 67:20
changed and so when someone changes this 67:23 input we're going to 67:24
issue a request we're going to issue a 67:26 request in line validation
slash check 67:28 email 67:29 and there's an indicator that'll show as
67:32 of that check 67:32 is being done and what you're going to 67:36 do
67:36 when you get that content back is you're 67:38 going to swap 67:39
in this entire enclosing div so the ajax 67:43 target in this case has
been hoisted up 67:45 onto the div 67:46 we're using this keyword which
says this 67:48 is the target now we're going to replace 67:50 the entire
67:51 html of it so we're not going to swap in 67:53 content on the inside
67:54 we're going to swap the entire thing out 67:56 for whatever comes
back 67:58 and so again typically on the server 67:59 side what you do is
you would factor 68:01 this 68:02 part of your template out into a 68:03
separate file right because 68:06 that's you know that's this is the 68:08
granularity that we're looking at here 68:09 we want to 68:10 factor this
out and then you would just 68:12 render that as a partial 68:14 here and
then also in your inline 68:17 validation slash check email 68:19 there
you would render that same smaller 68:21 template to return the content
and 68:24 this content would then you know you do 68:26 your normal 68:27
uh check to see if it's unique on the 68:29 server side and potentially
68:31 slam an error class on it or whatever 68:34 you want to do 68:35 but
that would be the same hopefully in 68:37 both the ajax 68:38 situation as
well as the non-ajax 68:41 situation 68:42 and so because of that you'd
have the 68:43 same logic in both places and all you 68:46 would have to
do is just re-render 68:47 excuse me 68:48 re-render this small little
bit so so 68:50 that's the idea here 68:52 um you know yeah and back to
the 68:54 question why 68:55 why we hate javascript let they turn 68:57
javascript off in the browser 68:58 this will still work yeah 69:02 yeah
you do you know you're having a 69:03 blank spot where the jsx would have
69:06 rendered 69:07 right you you you always have to do your 69:09 checks
again on the server side 69:11 right you can't trust validations that
69:13 are done purely on the client side 69:15 htmx does also integrate
with the 69:17 clients with the html validation 69:20 specifications so
there's a spec for uh 69:23 for doing um validations on the client 69:26
side 69:26 and um so htmx will respect those 69:28 validations run them
before it tries to 69:30 issue a request 69:32 so you can't integrate with
that yeah so 69:34 you can't integrate with that if you 69:35 want 69:36
um but for something like this where you 69:38 need to check whether or
not an email is 69:39 unique 69:40 um you're gonna have to make a server
69:41 request and so the 69:43 next way is to do that by exchanging 69:45
hypermedia with the server 69:47 rather than a little bit of json i just
69:50 realized i buried the whole 69:51 lead on this entire thing which
is 69:56 htmx means you don't reload the page

70:00 right so you do
things like preserve 70:02 scroll position you preserve 70:04 form input
etc so for example i'm going 70:07 to scroll down 70:08 so that input
validation goes off the 70:11 screen 70:12 and when i go and do this my
scroll 70:15 position doesn't change 70:17 that's right the rest of the
page 70:19 doesn't blink 70:21 yep everything in the dom stays where it
70:23 was 70:25 um there are some things that i wasn't 70:28 showing
actually 70:29 i'll show it with this as i go i 70:32 i htmxified the
demos so as i move 70:35 through these i'm using hx dash 70:39 history
or push push 70:43 push url to interact with the history to 70:46 update

70:46 the url of the browser so there are some 70:50 history api ways to
70:53 invoke all of this as well let me get to 70:56 very simple 70:57
you don't need to get into the muck of 70:58 that api that's right which
is a 71:01 terrible big mock especially cross 71:03 browser 71:04 so one
point uh i'll read this in its 71:07 entirety since it's a nice pat on the
71:09 back for you 71:10 okay i think carson is making history 71:12 here
we might see a different direction 71:13 for web development specifically
71:16 especially for light sites like on 71:20 feature phones that cost
fifty dollars 71:23 in emerging countries 71:25 that are low on resources
yeah well i 71:28 appreciate i don't think i'm necessarily 71:30 i don't
know i uh i like htmx quite a 71:33 bit i think it's a good model i think
71:35 if we're you know it's just it's taking 71:37 the web seriously 71:38
taking the web architecture seriously um 71:40 and hypermedia is just a
great idea 71:42 so um yeah i don't you know i think uh i 71:45 appreciate
that comment 71:46 but um i think at some level i'll be 71:49 dumb enough
to 71:50 want to do it the simple way too 71:55 there's a comment about
the combination 71:57 of htmx and chameleon templates both 71:59 being
attribute based 72:01 thank you for saying that i was actually 72:03 the
one 72:04 back in 99 that kind of came up with uh 72:07 the predecessor
of chameleon uh so page 72:10 templates 72:11 um on to let's see i'm
gonna stop on the 72:14 fast api 72:15 demo not show the app well i'll
just 72:17 show the active search real quick 72:20 so we have a little
bit of a delay to do 72:22 debouncing and all of that 72:24 and it's just
really really simple 72:28 uh stuff you know i've got a post 72:31 and
i've got a trigger a delay a target 72:35 all of these directive attribute
things 72:37 that we've seen before 72:39 so it's okay with you i'm going
to 72:41 switch over to 72:43 the django htmlx package okay 72:46 do a
quick demo and then we'll wrap up i 72:49 will keep this 72:50 under like
three or four minutes this is 72:53 the demo 72:54 package that ships with
htmx what is 72:56 htmx 72:58 a django htmx 73:03 it's a python package
you can install 73:06 from pi pi with pip that does some of 73:09 the
pre-wiring 73:10 of uh htmx for you including it in 73:13 templates and
stuff like that 73:16 so you in your django app you say i've 73:18 got
this is installed app 73:20 i have middleware several different 73:22
middlewares that i can add 73:24 to this um and then 73:27 i can go right
my templates 73:32 in a way that include these things let 73:33 me show
you how i can alt 73:35 enter in all of our ides and add that 73:38 so it
doesn't give a warning and this 73:40 was a little bit of what carson was
73:42 talking about before 73:44 plumbing it deeper into your app server
73:47 for things like csr csrf token so i'm 73:51 going to play this demo
73:54 click on the link and adam 73:57 the creator of this has four demos
74:00 one of them is csf rf 74:04 oh no yes that is odd but 74:08 this is
eve is not odd 74:11 and um it's doing cs 74:14 rf along the way partial
i'll do partial 74:18 rendering at the end middleware tester 74:20 just
wants to see did i click on 74:22 something yes i did 74:23 watch the
timestamp here 74:26 that's pretty fast yeah for round trip 74:30 again
74:31 it's you're seeing here how we're not 74:32 reloading the whole
page when you click 74:34 that right it's really nice 74:36 to be able
to do that but we're also 74:39 sending back 74:40 small snippets that
have less latency 74:43 less server time being generated on the 74:45
server less parse time 74:46 all those kinds of things rather than 74:48
sending a full page 74:50 yep which leads me to partial rendering 74:53
and this is an 74:54 idea that's really well explored in the 74:57 html
74:58 django htmlx package this idea

75:02 that you're breaking your base
layout 75:06 into partials of pages 75:11 for example partial rendering
75:15 uh what we can what what he does in this 75:18 demo 75:18 is the
part that we want to send back on 75:21 these htmx interactions is it
the whole 75:24 page we also don't want to have to 75:27 uh kind of like
inline or repeat over 75:30 and over and over we want 75:31 a snippet to
be usable when we ask for 75:34 the whole thing 75:35 we want to snip it to
be usable when we 75:36 only ask for part of the thing 75:39 right and
this demo shows examples of 75:41 that 75:44 yeah it's very common it's
it's very 75:47 common in your controller 75:48 to check so htmlx when it
makes a 75:50 request includes 75:52 the hx dash request header equals true
75:55 and so it's a very common pattern on 75:58 back ends is to say 75:59
is that header present if yes render 76:02 just 76:02 the small bit of the
ui if not render 76:04 the whole ui surrender with the layout 76:06 and
all that sort of stuff 76:07 and that makes as well when you create 76:09
deep links you know when you have one 76:11 problem you have with a lot
of 76:12 javascript based 76:13 web apps is you can't support deep links
76:15 well htmx 76:16 supports this ajax push url to push the 76:19 url
up into 76:21 the uh into the browser but then the 76:23 browser needs to
be able to handle 76:25 both the htmx request as well as the 76:27 normal
request 76:28 and so depending on your backend 76:30 framework there are
various ways to 76:31 achieve that 76:32 sometimes the middleware does it
you 76:34 know just depends 76:35 the thing you're describing is where
a 76:37 lot of javascript based routers go to 76:39 die 76:40 yep they
can't quite handle the hash 76:43 based syntax or the 76:44 push state
and tax and all these other 76:46 things yeah if only 76:48 if only there
were you are some sort of 76:51 resource locator that was universal 76:53
[Laughter] 76:56 in in a protocol that was aware of it 76:59 yes 77:00
yeah maybe he's a hyper media of some 77:02 sort 77:03 okay um we will
77:06 go ahead and start the wrap-up portion 77:09 of this so that you
can get out remotely 77:11 on time 77:13 before we wrap up i'm going to
come back 77:14 to something that was asked near the 77:16 beginning
77:17 what's next for htm x and hyperscript 77:20 and would you like
people to get 77:21 involved 77:23 uh yeah so um htmx i feel like is
pretty 77:27 uh pretty close to being done so there's 77:28 not a lot to
contribute there except for 77:31 examples and then work on server side
77:34 stuff so htmx being purely front end 77:38 i think examples with
particular 77:40 frameworks on the back end so people 77:41 have 77:42
stuff to get going with would be very 77:44 helpful and then also 77:45
like htmx django creating packages that 77:49 sort of make htmx dovetail
well 77:52 with whatever backend you prefer would 77:54 be very helpful
77:55 i'm always i my primary source of 77:58 compensation is github stars
so i'm 78:00 always appreciative if people 78:01 head over and start the
repo on on 78:04 github um 78:05 and we do have a pretty active uh 78:07
discord which 78:08 is friendly i try and keep it pretty 78:10 friendly
and so you're welcome to jump 78:12 on there if you want to chat about this
78:14 stuff 78:15 html or excuse me hyperscript is a 78:17 little bit more
speculative 78:19 and a little bit crazier but i think 78:20 that's also
almost 78:22 uh is getting pretty close to complete 78:23 as well but
if you're into programming 78:25 languages you can jump on the discord
78:27 and there's a 78:28 hyper hyperscript channel as well 78:32 and uh
i guess extensions people can 78:34 write extensions right 78:35 yeah you
could write extensions um you 78:37 know if you have a way to contribute
78:39 to go scratch some itches that other 78:41 people might 78:42 like
uh there's a ticket i don't know if 78:45 this would be extension 78:47
i think it's currently extension helmet 78:49 is a popular meme 78:51 in
the javascript world about components 78:53 that need to update the head
78:55 and dealing with the head is a tricky 78:57 wasteland 78:58 and so
there might be some places uh 79:00 tickets and things like that that would
79:02 be pretty interesting for people to 79:03 contribute on 79:05 sure all
right thanks 79:08 uh carson for joining us on this joy 79:11 ride 79:12
through htmx in the world of python 79:15 and really thanks a big thanks
79:18 for htmx itself and advocating all these 79:21 back to basics back
to the future 79:23 believe in the web story that's really 79:27 starting
to emerge 79:28 uh in the last year i know it must be 79:31 exhausting
so 79:32 major kudos and thanks yeah well you 79:35 know it goes to show
you never know 79:36 because if you'd asked me i 79:38 i put intercooler
out in 2013 and if 79:40 you'd asked me 79:41 you know five years ago if
this was ever 79:43 going to make a comeback i would have 79:44 said no
79:46 but i also would have said you know 79:47 everyone would be writing
everything in 79:49 javascript and so 79:50 funny how things work out and i
79:51 appreciate you and i appreciate all the 79:53 you know podcasters who
have had me on 79:55 to talk about it particularly when htmx 79:57 isn't
79:58 specific to your you know domain sure 80:01 but but hopefully it
lets people work in


80:03 the demands that they like 80:04 and if it you
know helps people stay 80:07 within the hypermedia 80:08 uh hyper media
model then uh that's 80:11 great 80:13 all right uh we'll finish up with
a word 80:16 from our sponsor 80:17 if you'd like to get more information
on 80:18 pycharm please go to our website at 80:20 jetbrains.com pycharm
look it's another 80:23 one of those universal resource locators 80:26
if you haven't already please check out 80:28 they're everywhere yeah
we can't have 80:30 enough of them 80:31 uh check out our pycharm blog
where you 80:33 can find up-to-date news about pycharm 80:36 releases
hmm 80:39 something might be happening pretty soon 80:41 and other events
such as this webinar 80:43 in addition to our educational webinar 80:46
educational resources 80:47 we would love your feedback uh 80:50 on
this webinar we actually pay 80:52 attention to the survey so if you
80:53 register please fill it in 80:56 i'll pass the news on to carson
as well 80:58 about any comments you have 81:00 or any topics that you
would like to see 81:02 covered in the future 81:03 come and chat with
us on twitter about 81:05 this topic or about webinars or pycharm 81:08
or the web or anything that you've got 81:10 on your mind 81:11 that is
all from us today thank you to 81:15 our esteemed guests 81:16 and even
more to our esteemed viewers i 81:19 like to finish with a little bit of
81:21 pandering 81:22 thank you for joining us today and hope 81:24 you
have a great rest of the week 81:26 thank you paul