` soup.
+The best-known kind of messy HTML is `
` soup.
+
+Advances in CSS and JavaScript technology have mostly obviated the need to add extraneous "wrapper" elements to out documents.
+However, while the number of elements can fall, the quality of usage does not necessatily improve.
When developers fall back on the generic `
` and `` elements instead of more meaningful tags,
we either degrade the quality of our websites or create more work for ourselves -- probably both.
@@ -832,5 +849,16 @@ It's not obvious from the HTML source that this is a button,
making the source harder to read and the absence of these attributes harder to spot.
The source code of pages with div soup is difficult to edit and debug.
-To avoid div soup, learn the meaning of available tags and consider each another tool in your tool chest. (With the 113 elements currently defined in the spec, it's more of a tool shed).
+"`This is silly,`" you might be thinking.
+Who uses a div as a button?
+Ignoring the answer (more people than you'd think), not every UI pattern has a designated HTML element.
+We often need to compose elements and augment them with attributes.
+Do you know, off the top of your head, the best elements and attributes to use for...
+
+// TODO dzk (maybe give the correct elements here? I don't know them... :)
+* A "command palette" menu?
+* A play-pause button?
+* A search field with a search button next to it? (Check the HTML spec -- there might be things on there you don't remember from before!)
+
+To avoid div soup, learn the meaning of available tags and consider each another tool in your tool chest. (With the 113 elements currently defined in the spec, it's more of a whole shed).
****
\ No newline at end of file
diff --git a/book/CH03_BuildingASimpleWebApplication.adoc b/book/CH03_BuildingASimpleWebApplication.adoc
index 8563f3c..22d0624 100644
--- a/book/CH03_BuildingASimpleWebApplication.adoc
+++ b/book/CH03_BuildingASimpleWebApplication.adoc
@@ -1,17 +1,18 @@
= A Web 1.0 Application
:chapter: 03
-:url: ./a-web-1-0-application/
+:url: /a-web-1-0-application/
To start our journey into Hypermedia-Driven Applications, we are going to create a simple contact management web
application called Contact.app. We will start with a basic, "`Web 1.0-style`" Multi-Page Application (MPA), in the grand
-CRUD (Create, Read, Update, Delete) tradition. It will not be the best contact management application in the world; it will be simple and it will do its job.
+CRUD (Create, Read, Update, Delete) tradition. It will not be the best contact management application in the world, but
+it will be simple and it will do its job.
This application will also be easy to incrementally improve in the coming chapters by utilizing the hypermedia-oriented
library htmx.
By the time we are finished building and enhancing the application, over the next few chapters, it will have some very
-slick features that most developers today would assume requires the use of a heavy JavaScript framework.
+slick features that most developers today would assume requires the use of a SPA JavaScript framework.
== Picking A "`Web Stack`"
@@ -36,29 +37,31 @@ More importantly, Python is easy to read even if you aren't familiar with it.
We chose the Flask web framework because it is simple and does not impose a lot of structure on top of the
basics of HTTP request handling.
-This bare-bones approach is a good match for our needs: in other cases you might consider a more full-featured Python framework, such as https://www.djangoproject.com/[Django], which supplies much more functionality out of the box than Flask does.
+This bare-bones approach is a good match for our needs: in other cases you might consider a more full-featured Python
+framework, such as https://www.djangoproject.com/[Django], which supplies much more functionality out of the box than
+Flask does.
-By using Flask we are able
-to keep the book focused on _hypermedia
-exchanges_.
-
-So, even if this isn't your preferred stack, keep going: you will gain from the patterns we introduce here.
+By using Flask for our book, we will be able to keep our code focused on _hypermedia exchanges_.
We picked Jinja2 templates because they are the default templating language for Flask. They are simple enough and
similar enough to most other server-side templating languages that most people who are familiar with any server-side
(or client-side) templating library should be able to understand them quickly and easily.
+Even if this combination of technologies isn't your preferred stack, please, keep reading: you will learn quite a bit from
+the patterns we introduce in the coming chapters and it shouldn't be hard to map them into your preferred language and
+frameworks.
+
With this stack we will be rendering HTML _on the server-side_ to return to clients, rather than producing JSON. This
-is the traditional approach to building web applications, but, with the rise of SPAs, is not as widely used a technique
-as it once was. Today, as people are rediscovering this approach to building web applications, the term "`Server-Side
-Rendering`" or SSR is emerging as the way that people talk about this style of templating. This is in contrast with
+is the traditional approach to building web applications. However, with the rise of SPAs, this approach is not as
+widely used a technique as it once was. Today, as people are rediscovering this style of web applications, the term
+"`Server-Side Rendering`" or SSR is emerging as the way that people talk about it. This contrasted with
"`Client-Side Rendering`", that is, rendering templates in the browser with data retrieved in JSON form from the server,
as is common in SPA libraries.
In Contact.app we will intentionally keep things as simple as possible to maximize the teaching value of our code: it
-won't be perfectly factored code, but it will
-be easy to follow for readers even if they have little Python experience, and it should be easy to translate the application
-and the techniques demonstrated into your preferred programming language and web framework.
+won't be perfectly factored code, but it will be easy to follow for readers, even if they have little Python experience,
+and it should be easy to translate both the application and the techniques demonstrated into your preferred programming
+environment.
== Python
@@ -67,15 +70,15 @@ the various technologies we use _around_ that hypermedia. This has some obvious
with Python, for example, some example python code in the book may be a bit confusing or mysterious at first.
If you feel like you need a quick introduction to the language before diving into the code, we recommend the following
-books/websites:
+books and websites:
* https://nostarch.com/python-crash-course-3rd-edition[Python Crash Course] from No Starch Press
* https://learnpythonthehardway.org/python3/[Learn Python The Hard Way] by Zed Shaw
* https://www.py4e.com/[Python For Everybody] by Dr. Charles R. Severance
We think most web developers, even developers who are unfamiliar with Python, should be able to follow
-along. Most of the authors hadn't written much Python before writing this book, and we got the hang of
-it pretty quickly.
+along with our examples. Most of the authors of this book hadn't written much Python before writing it, and we got the
+hang of it pretty quickly.
== Introducing Flask: Our First Route
@@ -131,7 +134,7 @@ we are going to redirect to another path, the `/contacts` path. Redirects are a
redirect a client to another location with an HTTP response.
We are going to display a list of contacts as our root page, and, arguably, redirecting to the `/contacts` path to
-display this information is a bit more consistent with notion of resources with REST. This is a judgement call on our
+display this information is a bit more consistent with the notion of resources with REST. This is a judgement call on our
part, and not something we feel is too important, but it makes sense in terms of routes we will set up later in the
application.
@@ -407,8 +410,7 @@ of the `Contact` class in Python, if you aren't familiar with it.)
While the handler code for this route is very simple, the `new.html` template is more complicated.
****
-For the
-remaining templates we are going to omit the layout directive and the content block declaration, but you
+For the remaining templates we are going to omit the layout directive and the content block declaration, but you
can assume they are the same unless we say otherwise. This will let us focus on the "meat" of the template.
****
@@ -436,7 +438,7 @@ Here is what our HTML looks like:
In the first line of code we create a form that will submit back _to the same path_ that we are handling: `/contacts/new`.
Rather than issuing an HTTP `GET` to this path, however, we will issue an HTTP `POST` to it. Using a `POST` in this manner
-will signal to the server that we want to create a new Contact, rather than get a form.
+will signal to the server that we want to create a new Contact, rather than get a form for creating one.
We then have a label (always a good practice!) and an input that captures the email of
the contact being created. The name of the input is `email` and, when this form is submitted, the value of this input
@@ -478,12 +480,11 @@ Finally, we have a button that will submit the form, the end of the form tag, an
----
-Easy to miss in this straight-forward example: we are seeing the flexibility
-of hypermedia in action.
+It is easy to miss in this straight-forward example: we are seeing the flexibility of hypermedia in action.
If we add a new field, remove a field, or change the logic around how fields are validated or work with one another,
this new state of affairs would be reflected in the new hypermedia representation given to users. A user would see the
-updated new form, and be able to work with new features, with no software update required.
+updated new form and be able to work with these new features, with no software update required.
==== Handling the post to /contacts/new
@@ -856,20 +857,22 @@ Is it time to reach for a JavaScript framework and JSON APIs to make our contact
No. No it isn't.
-It turns out that we can improve the user experience of this application within the
-hypermedia architecture. In the next few chapters we will look at https://htmx.org[htmx], a hypermedia-oriented library
+It turns out that we can improve the user experience of this application while retaining its fundamental hypermedia
+architecture.
+
+In the next few chapters we will look at https://htmx.org[htmx], a hypermedia-oriented library
that will let us improve our contact application _without_ abandoning the hypermedia approach we have used so far.
-
[.design-note]
-.HTML Note: Semantic HTML
+.HTML Notes: Semantic HTML
****
+Telling people to "use semantic HTML" instead of "read the spec" has led to a lot of people guessing at the meaning of tags -- "`looks pretty semantic to me!" -- instead of engaging with the spec.
+
[quote,https://t-ravis.com/post/doc/semantic_the_8_letter_s-word/]
I think being asked to write _meaningful_ HTML better lights the path to realizing that it isn't about what the text means to humans--it's about using tags for the purpose outlined in the specs to meet the needs of software like browsers, assistive technologies, and search engines.
-Telling people to "use semantic HTML" instead of "read the spec" has led to a lot of people guessing at the meaning of tags -- "`looks pretty semantic to me!" -- instead of engaging with the spec.
-
We recommend talking about, and writing, _conformant_ HTML.
+(We can always bikeshed further).
Use the elements to the full extent provided by the HTML specification,
and let the software take from it whatever meaning they can.
****
diff --git a/book/CH04_ExtendingHTMLAsHypermedia.adoc b/book/CH04_ExtendingHTMLAsHypermedia.adoc
index f46b70c..ca5bd9e 100644
--- a/book/CH04_ExtendingHTMLAsHypermedia.adoc
+++ b/book/CH04_ExtendingHTMLAsHypermedia.adoc
@@ -2,8 +2,8 @@
= Extending HTML As Hypermedia
:chapter: 04
:part: Hypermedia-Driven Web Applications with Htmx
-:part_url: ./part/htmx/
-:url: ./extending-html-as-hypermedia/
+:part_url: /part/htmx/
+:url: /extending-html-as-hypermedia/
In the previous chapter we introduced a simple Web 1.0-style hypermedia application to manage contacts. Our application
supported the normal CRUD operations for contacts, as well as a simple mechanism for searching contacts. Our application
@@ -11,7 +11,8 @@ was built using nothing but forms and anchor tags, the traditional hypermedia co
The application exchanges hypermedia (HTML) with the server over HTTP, issuing `GET` and `POST` HTTP requests and
receiving back full HTML documents in response.
-It is a basic web application, but it is also definitely a Hypermedia-Driven Application. It is robust, it leverages the web's native technologies, and it is simple to understand.
+It is a basic web application, but it is also definitely a Hypermedia-Driven Application. It is robust, it leverages the
+web's native technologies, and it is simple to understand.
So what's not to like about the application?
@@ -33,7 +34,8 @@ cousins.
We could address this issue by adopting a Single Page Application framework, and updating our server-side to
provide JSON-based responses. Single Page Applications eliminate the clunkiness of web 1.0 applications by updating a
-web page directly: they mutate the Document Object Model (DOM) directly, without doing a full page refresh.
+web page without refreshing it: they can mutate parts of the Document Object Model (DOM) of the existing page without
+needing to replace (and re-render) the entire page.
.The DOM
****
@@ -55,19 +57,24 @@ with the application sacrificing the advantages of hypermedia in order to provid
Many web developers today would not even consider the hypermedia approach due to the perceived "`legacy`" feel of these
web 1.0 style applications.
-The second, technical point may strike you as a bit pedantic, and we are the first to admit that conversations around
-REST and which HTTP Action is right for a given operation can become very tedious. But still, it's odd that,
-when using plain HTML, it is impossible to use HTTP fully.
+Now, the second more technical issue we mentioned may strike you as a bit pedantic, and we are the first to admit that
+conversations around REST and which HTTP Action is right for a given operation can become very tedious. But still, it's
+odd that, when using plain HTML, it is impossible to use all the functionality of HTTP!
+
+Just seems wrong, doesn't it?
== A Close Look At A Hyperlink
-It turns out that we can boost the interactivity of our application without resorting to the SPA approach, by using one of several available hypermedia-oriented JavaScript libraries.
-We'll use the library that we've developed, https://htmx.org[htmx], not only because we know it inside and out, but because we built it purely to extend HTML as a hypermedia.
+It turns out that we can boost the interactivity of our application and address both of these issues _without_ resorting
+to the SPA approach. We can do so by using one of several available _hypermedia-oriented_ JavaScript libraries.
+In this book, naturally, we will use the library that we've developed, https://htmx.org[htmx]. We will use it not only
+because we know it inside and out, but also because we built it to extend HTML as a hypermedia and address the issues
+with legacy HTML applications we mentioned above (as well as few others.)
-To understand how htmx allows us to improve the UX of our Web 1.0 style
-application without abandoning hypermedia, let's revisit the hyperlink/anchor tag from Chapter 1. Recall, a hyperlink
-is what is known as a _hypermedia control_, a mechanism that describes some sort of interaction by encoding information about that interaction directly and completely within
-itself.
+Before we get into how htmx allows us to improve the UX of our Web 1.0 style application, let's revisit the
+hyperlink/anchor tag from Chapter 1. Recall, a hyperlink is what is known as a _hypermedia control_, a mechanism that
+describes some sort of interaction with a server by encoding information about that interaction directly and completely
+within the control itself.
Consider again this simple anchor tag which, when interpreted by a browser, creates a hyperlink to the website for
this book:
@@ -87,8 +94,8 @@ Let's break down exactly what happens with this link:
* The browser will issue an HTTP `GET` to `https://hypermedia.systems`...
* The browser will load the HTML body of the HTTP response into the browser window, replacing the current document.
-So we have four aspects of a simple hypermedia link like this, with the last three aspects supplying the mechanism that distinguishes
-a hyperlink from "`normal`" text and makes this a hypermedia control.
+So we have four aspects of a simple hypermedia link like this, with the last three aspects supplying the mechanism that
+distinguishes a hyperlink from "`normal`" text and, thus, makes this a hypermedia control.
Now, let's take a moment and think about how we can _generalize_ these last three aspects of a hyperlink.
@@ -99,10 +106,10 @@ Consider: what makes anchor tags (and forms) so special?
Why can't other elements issue HTTP requests as well?
For example, why shouldn't `button` elements be able to issue HTTP requests? It seems arbitrary to have to wrap a
-form tag around a button just to make deleting contacts work in our application.
+form tag around a button just to make deleting contacts work in our application, for example.
-Maybe: other elements should be able
-to issue HTTP requests as well, and act as hypermedia controls on their own.
+Maybe: other elements should be able to issue HTTP requests as well. Maybe other elements should be able to act as
+hypermedia controls on their own.
This is our first opportunity to generalize HTML as a hypermedia.
@@ -112,13 +119,13 @@ This is our first opportunity to generalize HTML as a hypermedia.
HTML could be extended to allow _any_ element to issue a request to the server and act as a hypermedia control.
====
-=== Why Only Clicks & Submits?
+=== Why Only Click & Submit Events?
Next, let's consider the event that triggers the request to the server on our link: a click event.
-Well, what's so special about clicking (in the case of anchors) or submitting (in the case of forms)? Those are just two
-of many, many events that are fired by the DOM, after all. Events like mouse down, or key up, or blur are all events
-you might want to use to issue an HTTP request.
+Well, what's so special about clicking (in the case of anchors) or submitting (in the case of forms) things? Those are
+just two of many, many events that are fired by the DOM, after all. Events like mouse down, or key up, or blur are all
+events you might want to use to issue an HTTP request.
Why shouldn't these other events be able to trigger requests as well?
@@ -164,10 +171,11 @@ HTML could be extended so that it allows access to the missing three HTTP method
As a final observation, consider the last aspect of a hyperlink: it replaces the _entire_ screen when a user clicks on it.
It turns out that this technical detail is the primary culprit for poor user experience in Web 1.0 Applications.
-A full page refresh can cause a flash of unstyled content, it destroys the scroll state of the user by scrolling to the
-top of the page, and so forth.
+A full page refresh can cause a flash of unstyled content, where content "jumps" on the screen as it transitions from
+its initial to its styled final form. It also destroys the scroll state of the user by scrolling to the
+top of the page, removes focus from a focused element and so forth.
-But there is no rule saying that hypermedia exchanges _must_ replace the entire document.
+But, if you think about it, there is no rule saying that hypermedia exchanges _must_ replace the entire document.
This gives us our fourth, final and perhaps most important opportunity to generalize HTML:
@@ -202,7 +210,7 @@ can be added to a web application by simply including it via a `script` tag in y
Because of this simple installation model, you can take advantage of tools like public CDNs to install the library.
-Below is an example using the popular https://unpkg.com[unpkg] Content Delivery Network (CDN) to install version `1.7.0`
+Below is an example using the popular https://unpkg.com[unpkg] Content Delivery Network (CDN) to install version `1.9.2`
of the library. We use an integrity hash to ensure that the delivered JavaScript content matches what we expect. This
SHA can be found on the htmx website.
@@ -213,9 +221,9 @@ We also mark the script as `crossorigin="anonymous"` so no credentials will be s
[source,html]
----
-
+
----
@@ -234,11 +242,10 @@ Once htmx has been installed, you can begin using it immediately.
=== No JavaScript Required...
-And here we get to the fun part of htmx: htmx does not require you,
-the user of htmx, to actually write any JavaScript.
+And here we get to the interesting part of htmx: htmx does not require you, the user of htmx, to actually write any JavaScript.
Instead, you will use _attributes_ placed directly on elements in your HTML to drive more dynamic behavior. Htmx extends
-HTML as a hypermedia, and it wants that extension to be as natural and consistent as possible with existing
+HTML as a hypermedia, and it is designed so that extension is as natural and consistent as possible with existing
HTML concepts. Just as an anchor tag uses an `href` attribute to specify the URL to retrieve, and forms use an `action`
attribute to specify the URL to submit the form to, htmx uses HTML _attributes_ to specify the URL that an HTTP request
should be issued to.
@@ -282,8 +289,8 @@ Very easy to understand and very consistent with the rest of HTML.
With the request issued by the button above, we get to perhaps the most important thing to understand about htmx:
it expects the response to this AJAX request _to be HTML_. Htmx is an extension of HTML. A native hypermedia control
-like an anchor tag will typically get an HTML response to a request it creates. Similarly, htmx expects the server to
-respond to the requests that it makes with HTML.
+like an anchor tag will typically get an HTML response to an HTTP request it creates. Similarly, htmx expects the server to
+respond to the requests that _it_ makes with HTML.
This may surprise web developers who are used to responding to an AJAX request with JSON,
which is far and away the most common response format for such requests. But AJAX requests are just HTTP requests and
@@ -341,10 +348,10 @@ content into the existing page (rather than replacing the entire page), the ques
content be placed?
It turns out that the default htmx behavior is to simply put the returned content inside the element that triggered the
-request. That's obviously _not_ a good thing in the case of our button: we will end up with a list of contacts awkwardly embedded within
+request. That's _not_ a good thing in the case of our button: we will end up with a list of contacts awkwardly embedded within
the button element. That will look pretty silly and is obviously not what we want.
-Fortunately htmx provides another attribute, `hx-target` which can be used to specify exactly where in the DOM the
+Fortunately htmx provides another attribute, `hx-target` which can be used to specify exactly _where_ in the DOM the
new content should be placed. The value of the `hx-target` attribute is a Cascading Style Sheet (CSS) _selector_ that
allows you to specify the element to put the new hypermedia content into.
@@ -465,15 +472,14 @@ four opportunities for improvement that we enumerated regarding plain HTML:
* Opportunity 1: We can now issue an HTTP request with _any_ element (in this case we are using a button).
* Opportunity 3: We can issue _any sort_ of HTTP request we want, `PUT`, `PATCH` and `DELETE`, in particular.
-And, with `hx-target` and `hx-swap` we have addressed a third shortcoming:
-the requirement that the entire page be replaced.
+And, with `hx-target` and `hx-swap` we have addressed a third shortcoming: the requirement that the entire page be replaced.
* Opportunity 4: We can now replace any element we want in our page via transclusion, and we can do so in any manner want.
So, with only seven relatively simple additional attributes, we have addressed most of the shortcomings of HTML as a
hypermedia that we identified earlier.
-What's next? Recall the other shortcoming we noted: the fact that only a `click` event (on an anchor) or a `submit` event
+What's next? Recall the one other opportunity we noted: the fact that only a `click` event (on an anchor) or a `submit` event
(on a form) can trigger a HTTP request. Let's look at how we can address that limitation.
== Using Events
@@ -547,7 +553,7 @@ Note that we have a comma separated list of events that can trigger this element
one potential triggering event. We still want to respond to the `click` event and load the contacts, in addition
to handling the `Ctrl-L` keyboard shortcut.
-There are, unfortunately, two problems with our `keyup` addition: As it stands, it will trigger requests on _any_ keyup
+Unfortunately there are two problems with our `keyup` addition: As it stands, it will trigger requests on _any_ keyup
event that occurs. And, worse, it will only trigger when a keyup occurs _within_ this button. The
user would need to tab onto the button to make it active and then begin typing.
@@ -625,7 +631,7 @@ outlined at the start of this chapter:
That's a grand total of eight, count 'em, _eight_ attributes that all fall squarely within the same conceptual model as
normal HTML and that, by extending HTML as a hypermedia, open up a whole new world of user interaction possibilities
-within HTML.
+within it.
Here is a table summarizing those opportunities and which htmx attributes address them:
@@ -876,59 +882,7 @@ conceptually coherent with the underlying markup language. Like any technical c
trade-offs: by staying so close to HTML, htmx does not give developers a lot of infrastructure that many might feel
should be there "`by default`".
-A good example is the concept of modal dialogs. Many web applications today make heavy use of modal dialogs, effectively
-in-page pop-ups that sit "`on top`" of the existing page. (Of course, in reality, this is an optical illusion and it is
-all just a web page: the web has no notion of "`modals`" in this regard.)
-
-A web developer might expect htmx, as a front end library, to provide some sort of modal dialog component out of the box.
-
-Htmx, however, has no such notion of modals. That's not to say you can't use modals with htmx, and we will look at how you
-can do so later. But htmx, like HTML itself, won't give you an API specifically for creating modals. You
-would need to use a 3rd party library or roll your own modal implementation and then integrate htmx into it if you want
-to use modals within an htmx-based application.
-
By staying closer to the original model of the web, htmx aims to strike a balance between simplicity and functionality,
deferring to other libraries for more elaborate frontend extensions on top of the existing web platform. The good news
is that htmx plays well with others, so when these needs arise it is often easy enough to bring in another library to handle
them.
-
-
-[.design-note]
-.HTML Note: Caution with Improvised UI Elements
-****
-Accessibility problems can arise when we try to implement controls that aren't built into HTML.
-
-For example, what if you make something that looks like a set of tabs, but you use radio buttons and CSS hacks to build it?
-
-The problem here is that tabs have requirements beyond clicking to change content.
-Your improvised tabs may be missing features that will lead to user confusion and frustration, as well as some undesirable behaviors.
-From the link:https://www.w3.org/WAI/ARIA/apg/patterns/tabs/[ARIA Authoring Practices Guide on tabs]:
-
-* Keyboard interaction
-
-** Can the tabs be focused with the Tab key?
-
-* ARIA roles, states, and properties
-
-** "`[The element that contains the tabs] has role `tablist`.`"
-
-** "`Each [tab] has role `tab` [...]`"
-
-** "`Each element that contains the content panel for a `tab` has role `tabpanel`.`"
-
-** "`Each [tab] has the property `aria-controls` referring to its associated tabpanel element.`"
-
-** "`The active `tab` element has the state `aria-selected` set to `true` and all other `tab` elements have it set to `false`.`"
-
-** "`Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.`"
-
-You would need to write a lot of code to make your improvised tabs fulfill all of these requirements. Some of the ARIA attributes can be added directly in HTML,
-but they are repetitive
-and others (like `aria-selected`) need to be set through JavaScript since they are dynamic.
-The keyboard interactions can be error-prone too.
-
-It's not impossible to make your own tab set implementation.
-However, it's difficult to trust that a new implementation will work in all environments, since most of us have limited access to testing devices.
-
-Stick with established libraries for UI interactions. If a use case requires an improvised solution, test carefully for keyboard interaction and accessibility.
-****
\ No newline at end of file
diff --git a/book/CH05_htmxPatterns.adoc b/book/CH05_htmxPatterns.adoc
index cbf329c..f902946 100644
--- a/book/CH05_htmxPatterns.adoc
+++ b/book/CH05_htmxPatterns.adoc
@@ -1,7 +1,7 @@
= Htmx Patterns
:chapter: 05
-:url: ./htmx-in-action/
+:url: /htmx-in-action/
Now that we've seen how htmx extends HTML as a hypermedia, it's time to put it into action. As we use htmx, we will still
be using hypermedia: we will issue HTTP requests and get back HTML. But, with the additional functionality that htmx provides,
@@ -255,10 +255,14 @@ support and so on. And, if JavaScript isn't enabled, it will fall back to the n
All this with one htmx attribute.
-The `hx-boost` attribute is more "`magic`" than others. Htmx attributes generally are lower level and require more explicit
-annotation in order to specify exactly what you want htmx to do. In general, this is the design philosophy of htmx:
-prefer explicit to implicit and obvious to "`magic.`" However, the `hx-boost` attribute is too useful to allow dogma to
-override practicality, and so it is included as a feature in the library.
+The `hx-boost` attribute is neat, but is different than other htmx attributes in that it is pretty "`magical`": by
+making one small change you modify the behavior of a large number of elements on the page, turning them into
+AJAX-powered elements. Most other htmx attributes are generally lower level and require more explicit annotations in
+order to specify exactly what you want htmx to do. In general, this is the design philosophy of htmx: prefer explicit
+over implicit and obvious over "`magic.`"
+
+However, the `hx-boost` attribute was too useful to allow dogma to override practicality, and so it is included as a
+feature in the library.
== A Second Step: Deleting Contacts With HTTP DELETE
@@ -308,9 +312,9 @@ A couple of things to notice:
Note that we have done something pretty magical here: we have turned this button into a _hypermedia control_. It is no
longer necessary that this button be placed within a larger `form` tag in order to trigger an HTTP request: it is a
stand-alone, and fully featured hypermedia control on its own. This is at the heart of htmx, allowing any element to become
-a hypermedia control and fully participate in the Hypermedia-Driven Application.
+a hypermedia control and fully participate in a Hypermedia-Driven Application.
-We should note that, unlike with the `hx-boost` examples above, this solution will _not_ degrade gracefully. To make
+We should also note that, unlike with the `hx-boost` examples above, this solution will _not_ degrade gracefully. To make
this solution degrade gracefully, we would need to wrap the button in a form element and handle a `POST` on the server
side as well.
@@ -489,9 +493,9 @@ all while using declarative attributes in our HTML and staying firmly within the
=== Progressive Enhancement?
-One thing to note about this solution, however, is that it is _not_ a progressive enhancement to our web application: if
-someone has disabled JavaScript then this "`Delete Contact`" button will no longer work. We could do additional work to keep
-the older mechanism working in a JavaScript-disabled environment.
+As we noted earlier about this solution: it is _not_ a progressive enhancement to our web application: if
+someone has disabled JavaScript then this "`Delete Contact`" button will no longer work. We would need to do additional
+work to keep the older form-based mechanism working in a JavaScript-disabled environment.
Progressive Enhancement can be a hot-button topic in web development, with lots of passionate opinions and perspectives.
Like nearly all JavaScript libraries, htmx makes it possible to create applications that do not function in the absence of
@@ -826,7 +830,7 @@ experience to our web application. Even better, any email validation rules we a
_automatically_ just work using this model: because we are using hypermedia as our communication mechanism there is no
need to keep a client-side and server-side model in sync with one another.
-A great demonstration of the power of the hypermedia architecture.
+A great demonstration of the power of the hypermedia architecture!
== Another Application Improvement: Paging
@@ -838,7 +842,7 @@ all 10,000 contacts on the root page. Showing so much data can bog a browser (a
adopt a concept of "`paging`" to deal with data sets this large, where only one "`page`" of a smaller number of items is
shown, with the ability to navigate around the pages in the data set.
-Let's fix our application, so that we only show ten contacts at a time with a "`Next`" and "`Previous`" link if there are more
+Let's fix our application so that we only show ten contacts at a time with a "`Next`" and "`Previous`" link if there are more
than 10 contacts in the contact database.
The first change we will make is to add a simple paging widget to our `index.html` template.
@@ -904,7 +908,7 @@ knows which page to return.
And, with that small change, we are done: we now have a very basic paging mechanism for our web application.
-And, believe it or not, it is already using AJAX, thanks to our use of `hx-boost` in the application. Easy.
+And, believe it or not, it is already using AJAX, thanks to our use of `hx-boost` in the application. Easy!
=== Click To Load
@@ -1033,9 +1037,9 @@ behavior, we are still exchanging hypermedia with the server, with no JSON API r
As the web was designed.
-
+// TODO dz4k rewrite
[.design-note]
-.Component Soup?
+.HTML Notes: Framework Soup
****
Components encapsulate a section of a page along with its dynamic behavior.
While encapsulating behavior is a good way to organize code,
@@ -1049,17 +1053,14 @@ Before you reach for components for reuse, consider your options.
Lower-level mechanisms often (allow you to) produce better HTML.
In some cases, components can actually _improve_ the clarity of your HTML.
-To decide if a component is appropriate for your use case, a good rule of thumb is to ask:
-"`Could this reasonably be a built-in HTML element?`"
-For example, a code editor is a good candidate,
-since HTML already has `