From 0dc7f20c46bcba4cf41fb181530978f890d0ea5f Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 07:27:00 -0700 Subject: [PATCH 01/16] HDA essay + essay improvements --- www/essays/a-response-to-rich-harris.md | 4 + www/essays/complexity-budget.md | 4 + www/essays/hateoas.md | 4 + www/essays/hypermedia-apis-vs-data-apis.md | 7 +- www/essays/hypermedia-driven-applications.md | 143 +++++++++++++++++++ www/essays/locality-of-behaviour.md | 7 +- www/essays/rest-explained.md | 6 +- www/essays/spa-alternative.md | 6 +- www/essays/splitting-your-apis.md | 6 +- www/talk.md | 1 + 10 files changed, 183 insertions(+), 5 deletions(-) create mode 100644 www/essays/hypermedia-driven-applications.md diff --git a/www/essays/a-response-to-rich-harris.md b/www/essays/a-response-to-rich-harris.md index 2dbd1681..d0b184ec 100644 --- a/www/essays/a-response-to-rich-harris.md +++ b/www/essays/a-response-to-rich-harris.md @@ -201,3 +201,7 @@ In conclusion, ![Javascript Devs](/img/js-devs-be-thinking.png) + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/complexity-budget.md b/www/essays/complexity-budget.md index 9226fbd5..dc79ec08 100644 --- a/www/essays/complexity-budget.md +++ b/www/essays/complexity-budget.md @@ -66,3 +66,7 @@ apart or aggressive refactoring. We must always bear in mind [Chesterton's Fenc If an application is functioning well (or even reasonably) then we should assume that the complexity budget was well (or reasonably) managed. And we must also bear in mind that, with unfortunate frequency, attempts at addressing complexity in existing, large applications often fail or, sadly, make things worse. + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/hateoas.md b/www/essays/hateoas.md index d18331e3..ec654aac 100644 --- a/www/essays/hateoas.md +++ b/www/essays/hateoas.md @@ -271,3 +271,7 @@ necessity for building RESTful systems. font-size: 1.1em; } + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/hypermedia-apis-vs-data-apis.md b/www/essays/hypermedia-apis-vs-data-apis.md index 0a67bcb1..bc591e9b 100644 --- a/www/essays/hypermedia-apis-vs-data-apis.md +++ b/www/essays/hypermedia-apis-vs-data-apis.md @@ -146,4 +146,9 @@ can satisfy more client needs without modification. # Conclusion When designing a hypermedia API, you should use a different design mindset than you use for data APIs. Churn is -much less of a concern, and providing the end points you need for a good hypermedia experience should be your primary goal. \ No newline at end of file +much less of a concern, and providing the end points you need for a good hypermedia experience should be your primary goal. + + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md new file mode 100644 index 00000000..311d0fc0 --- /dev/null +++ b/www/essays/hypermedia-driven-applications.md @@ -0,0 +1,143 @@ +--- +layout: layout.njk +tags: posts +title: htmx - high power tools for html +--- + +## Genesis + +> thesis: MPA - multi-page application +> +> antithesis: SPA - single-page application +> +> synthesis: HDA - hypermedia-driven application +> +> \-\-[@htmx_org](https://twitter.com/htmx_org/status/1490318550170357760) + +## The Hypermedia-Driven Application Architecture + +The **Hypermedia Driven Application (HDA)** architecture is an old/new approach to building web applications. It combines +the simplicity & flexibility of traditional Multi-Page Applications (MPAs) with the better user experience of +[Single-Page Applications](https://en.wikipedia.org/wiki/Single-page_application) (SPAs). + +The HDA architecture achieves this goal by extending the existing HTML infrastructure of the web to allow hypermedia + developers to use more powerful hypermedia-driven interactions. + +Two [constraints](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) characterize the HDA architecture: + +* The application uses a **declarative, HTML-embedded syntax**, rather than imperative scripting, to achieve better front end interactivity +* The application interacts with the server **in terms of hypermedia** (i.e. HTML) rather than another format (e.g. JSON) + +The HDA architecture falls within the **original [REST-ful](https://developer.mozilla.org/en-US/docs/Glossary/REST) +architecture of the web** in a way that contrasts with the SPA architecture. In particular, HDAs make **effective use +of [HATEOAS](/essays/hateoas/)** in a way that SPAs typically do not. + +## An Example + +Consider the htmx [Active Search](/examples/active-search) example: + +```html +

+ Search Contacts + + Searching... + +

+ + + + + + + + + + + + +
First NameLast NameEmail
+``` + +Here htmx is being used to achieve a UX pattern that would typically be associated with an SPA: as the user types, +after a slight pause, results will populate the result table below. + +This example effectively demonstrates the essential characteristic of an HDA: + +* The front end of the feature is specified entirely in `hx-` declarative attributes, directly in HTML +* The interaction with the server is done via HTTP and HTML: an HTTP request is sent, HTML is returned and inserted into the DOM + +## The Place of Scripting In An MDA + +[Code-On-Demand](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7) is an optional +constraint of the original REST-ful architecture of the web. + +Similarly, the HDA architecture has a final, optional constraint: + +* Code-On-Demand (i.e. scripting) should, as much as is practical, be done *directly in* the primary hypermedia + +This addresses the concern regarding Code-On-Demand mentioned in Fielding's thesis: + +> However, it also reduces visibility, and thus is only an optional constraint within REST. + +By embedding Code-On-Demand (scripts) directly in HTML, you increase visibility and satisfy the +[Locality of Behavior](/essays/locality-of-behaviour/) design principle. + +Three approaches to scripting that satisfy this constraint are [hyperscript](https://hyperscript.org), [AlpineJS](https://alpinejs.dev) +and [VanillaJS](http://vanilla-js.com/) (when embedded directly on HTML elements). + +Here is an example of each demonstrating HDA-friendliness: + +```html + + + + + + + + +``` + +Note that the hypermedia (HTML) is given primacy of place here: it is not an after-thought being produced by a client-side +templating engine. + +The scripts *augment* the existing hypermedia but do not *supersede* it or subvert the fundamental REST-ful architecture + of the system. + +## HDA-style libraries + +Some libraries that allow developers to build HDAs: + +* +* +* +* + +And some complementary, HDA-friendly scripting tools: + +* +* +* (embedded directly in HTML) + +## Conclusion + +The HDA architecture is a synthesis of two preceding architectures: the original Multi-Page Application (MPA) and the +(relatively) newer Single-Page Application. + +It attempts to capture the advantages of both: the simplicity and reliability +of MPAs (due to the [REST-ful Architecture](https://developer.mozilla.org/en-US/docs/Glossary/REST), in particular [HATEOAS](essays/hateoas/)) + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/locality-of-behaviour.md b/www/essays/locality-of-behaviour.md index c9df54c6..4a1b9c20 100644 --- a/www/essays/locality-of-behaviour.md +++ b/www/essays/locality-of-behaviour.md @@ -97,4 +97,9 @@ are: Locality of Behavior is a subjective software design principle that can help make a code base more humane and maintainable. It must be traded off against other design principles and be considered in terms of the limitations of the system a code unit is written in, but, as much as is it is practical, adherence to this principle will increase your software maintainability, -quality and sustainability. \ No newline at end of file +quality and sustainability. + + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/rest-explained.md b/www/essays/rest-explained.md index 922eab70..77e7cec9 100644 --- a/www/essays/rest-explained.md +++ b/www/essays/rest-explained.md @@ -246,4 +246,8 @@ REST describes the original web model. The uniform interface concept is, in my aspect of REST, and is useful for web developers to understand as it is primarily responsible for the benefits described above. -Finally, I hope you can see how inappropriate REST is for describing most JSON APIs in use today. \ No newline at end of file +Finally, I hope you can see how inappropriate REST is for describing most JSON APIs in use today. + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/spa-alternative.md b/www/essays/spa-alternative.md index 52072ec9..0303dd86 100644 --- a/www/essays/spa-alternative.md +++ b/www/essays/spa-alternative.md @@ -108,4 +108,8 @@ efforts on what your application does, rather than on how it does it. From the [htmx developer's starter kit](https://twitter.com/htmx_org/status/1306234341056344065): -![What if?](/img/what_if.png) \ No newline at end of file +![What if?](/img/what_if.png) + +
+~~~ +
\ No newline at end of file diff --git a/www/essays/splitting-your-apis.md b/www/essays/splitting-your-apis.md index e24df65c..25400898 100644 --- a/www/essays/splitting-your-apis.md +++ b/www/essays/splitting-your-apis.md @@ -117,4 +117,8 @@ of the benefits of the REST-ful web model (simplicity, reliability, etc.) and of And, by choosing a hypermedia-oriented front end technology like htmx, you can create [excellent user experiences](/examples) within that model. -Everything old is new again, but, this time, a little bit better. \ No newline at end of file +Everything old is new again, but, this time, a little bit better. + +
+~~~ +
\ No newline at end of file diff --git a/www/talk.md b/www/talk.md index 57c0d837..db964874 100644 --- a/www/talk.md +++ b/www/talk.md @@ -51,6 +51,7 @@ Email: [htmx@bigsky.software](mailto:htmx@bigsky.software) ## Essays +* [Hypermedia-Driven Appplications (HDAs)](/essays/hypermedia-driven-applications) * [HATEOAS](/essays/hateoas) * [Locality of Behavior (LoB)](/essays/locality-of-behaviour) * [Splitting Your Data & Application APIs: Going Further](/essays/splitting-your-apis) From 47a270b447e29c4e8fdb58778f8239bbf4e3e936 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 07:34:32 -0700 Subject: [PATCH 02/16] slight language update --- www/essays/hypermedia-driven-applications.md | 2 +- www/talk.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index 311d0fc0..66664e5f 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -16,7 +16,7 @@ title: htmx - high power tools for html ## The Hypermedia-Driven Application Architecture -The **Hypermedia Driven Application (HDA)** architecture is an old/new approach to building web applications. It combines +The **Hypermedia Driven Application (HDA)** architecture is a new/old approach to building web applications. It combines the simplicity & flexibility of traditional Multi-Page Applications (MPAs) with the better user experience of [Single-Page Applications](https://en.wikipedia.org/wiki/Single-page_application) (SPAs). diff --git a/www/talk.md b/www/talk.md index db964874..9e5190d3 100644 --- a/www/talk.md +++ b/www/talk.md @@ -32,6 +32,7 @@ Email: [htmx@bigsky.software](mailto:htmx@bigsky.software) [HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Course by Michael Kennedy](https://training.talkpython.fm/courses/htmx-flask-modern-python-web-apps-hold-the-javascript) +
From 5ef96d38d05db6258871717f3947130979df829a Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 07:39:53 -0700 Subject: [PATCH 03/16] improvement --- www/essays/hypermedia-driven-applications.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index 66664e5f..e5f08514 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -26,7 +26,7 @@ The HDA architecture achieves this goal by extending the existing HTML infrastru Two [constraints](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) characterize the HDA architecture: * The application uses a **declarative, HTML-embedded syntax**, rather than imperative scripting, to achieve better front end interactivity -* The application interacts with the server **in terms of hypermedia** (i.e. HTML) rather than another format (e.g. JSON) +* The application interacts with the server **in terms of hypermedia** (i.e. HTML) rather than a non-hypermedia format (e.g. JSON) The HDA architecture falls within the **original [REST-ful](https://developer.mozilla.org/en-US/docs/Glossary/REST) architecture of the web** in a way that contrasts with the SPA architecture. In particular, HDAs make **effective use From 32a01fe42f47f56a0502a9400fab9c18edb58683 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 09:01:02 -0700 Subject: [PATCH 04/16] improvement --- www/essays/a-response-to-rich-harris.md | 2 +- www/essays/complexity-budget.md | 2 +- www/essays/hateoas.md | 2 +- www/essays/hypermedia-apis-vs-data-apis.md | 2 +- www/essays/hypermedia-driven-applications.md | 4 ++-- www/essays/locality-of-behaviour.md | 2 +- www/essays/rest-explained.md | 2 +- www/essays/spa-alternative.md | 2 +- www/essays/splitting-your-apis.md | 2 +- 9 files changed, 10 insertions(+), 10 deletions(-) diff --git a/www/essays/a-response-to-rich-harris.md b/www/essays/a-response-to-rich-harris.md index d0b184ec..9c04594c 100644 --- a/www/essays/a-response-to-rich-harris.md +++ b/www/essays/a-response-to-rich-harris.md @@ -203,5 +203,5 @@ In conclusion,
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/complexity-budget.md b/www/essays/complexity-budget.md index dc79ec08..99583d2d 100644 --- a/www/essays/complexity-budget.md +++ b/www/essays/complexity-budget.md @@ -68,5 +68,5 @@ If an application is functioning well (or even reasonably) then we should assume in existing, large applications often fail or, sadly, make things worse.
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/hateoas.md b/www/essays/hateoas.md index ec654aac..6ff497f9 100644 --- a/www/essays/hateoas.md +++ b/www/essays/hateoas.md @@ -273,5 +273,5 @@ necessity for building RESTful systems.
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/hypermedia-apis-vs-data-apis.md b/www/essays/hypermedia-apis-vs-data-apis.md index bc591e9b..88be7ca3 100644 --- a/www/essays/hypermedia-apis-vs-data-apis.md +++ b/www/essays/hypermedia-apis-vs-data-apis.md @@ -150,5 +150,5 @@ much less of a concern, and providing the end points you need for a good hyperme
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index e5f08514..799c2011 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -71,7 +71,7 @@ This example effectively demonstrates the essential characteristic of an HDA: * The front end of the feature is specified entirely in `hx-` declarative attributes, directly in HTML * The interaction with the server is done via HTTP and HTML: an HTTP request is sent, HTML is returned and inserted into the DOM -## The Place of Scripting In An MDA +## The Place of Scripting In An HDA [Code-On-Demand](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7) is an optional constraint of the original REST-ful architecture of the web. @@ -139,5 +139,5 @@ It attempts to capture the advantages of both: the simplicity and reliability of MPAs (due to the [REST-ful Architecture](https://developer.mozilla.org/en-US/docs/Glossary/REST), in particular [HATEOAS](essays/hateoas/))
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/locality-of-behaviour.md b/www/essays/locality-of-behaviour.md index 4a1b9c20..71be2eea 100644 --- a/www/essays/locality-of-behaviour.md +++ b/www/essays/locality-of-behaviour.md @@ -101,5 +101,5 @@ quality and sustainability.
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/rest-explained.md b/www/essays/rest-explained.md index 77e7cec9..7ef652c1 100644 --- a/www/essays/rest-explained.md +++ b/www/essays/rest-explained.md @@ -249,5 +249,5 @@ above. Finally, I hope you can see how inappropriate REST is for describing most JSON APIs in use today.
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/spa-alternative.md b/www/essays/spa-alternative.md index 0303dd86..87c7b143 100644 --- a/www/essays/spa-alternative.md +++ b/www/essays/spa-alternative.md @@ -111,5 +111,5 @@ From the [htmx developer's starter kit](https://twitter.com/htmx_org/status/1306 ![What if?](/img/what_if.png)
-~~~ +</>
\ No newline at end of file diff --git a/www/essays/splitting-your-apis.md b/www/essays/splitting-your-apis.md index 25400898..1e7f740b 100644 --- a/www/essays/splitting-your-apis.md +++ b/www/essays/splitting-your-apis.md @@ -120,5 +120,5 @@ that model. Everything old is new again, but, this time, a little bit better.
-~~~ +</>
\ No newline at end of file From c939c08b20082ce4f8e404ee485564d26eaa1284 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 10:59:07 -0700 Subject: [PATCH 05/16] lol lmao --- www/essays/hypermedia-driven-applications.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index 799c2011..8ff018ba 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -94,7 +94,7 @@ Here is an example of each demonstrating HDA-friendliness: ```html - From dc93990229424e92dc415fafdad682669e629df5 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 11:00:44 -0700 Subject: [PATCH 06/16] lol lmao --- www/essays/hypermedia-driven-applications.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index 8ff018ba..882dd6f7 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -136,7 +136,8 @@ The HDA architecture is a synthesis of two preceding architectures: the original (relatively) newer Single-Page Application. It attempts to capture the advantages of both: the simplicity and reliability -of MPAs (due to the [REST-ful Architecture](https://developer.mozilla.org/en-US/docs/Glossary/REST), in particular [HATEOAS](essays/hateoas/)) +of MPAs (due to the [REST-ful Architecture](https://developer.mozilla.org/en-US/docs/Glossary/REST), in particular by + returning to [Hypermedia As The Engine Of Application State](/essays/hateoas/)).
</> From c9e916d9e226870313a40784b62ed2de1ed1fee0 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 14:30:36 -0700 Subject: [PATCH 07/16] add hyperview --- www/essays/hypermedia-driven-applications.md | 1 + 1 file changed, 1 insertion(+) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index 882dd6f7..5c992d9f 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -123,6 +123,7 @@ Some libraries that allow developers to build HDAs: * * * +* - (a mobile hypermedia!) And some complementary, HDA-friendly scripting tools: From aa430654988f77fc66b6237cbb30297a1a7e2b8b Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 16:44:49 -0700 Subject: [PATCH 08/16] clean up --- www/essays/hypermedia-driven-applications.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index 5c992d9f..1deacf97 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -123,7 +123,7 @@ Some libraries that allow developers to build HDAs: * * * -* - (a mobile hypermedia!) +* (a mobile hypermedia!) And some complementary, HDA-friendly scripting tools: @@ -133,12 +133,13 @@ And some complementary, HDA-friendly scripting tools: ## Conclusion -The HDA architecture is a synthesis of two preceding architectures: the original Multi-Page Application (MPA) and the -(relatively) newer Single-Page Application. +The HDA architecture is a synthesis of two preceding architectures: the original Multi-Page Application (MPA) architecture + and the (relatively) newer Single-Page Application architecture. -It attempts to capture the advantages of both: the simplicity and reliability -of MPAs (due to the [REST-ful Architecture](https://developer.mozilla.org/en-US/docs/Glossary/REST), in particular by - returning to [Hypermedia As The Engine Of Application State](/essays/hateoas/)). +It attempts to capture the advantages of both: the simplicity and reliability of MPAs, with a +[REST-ful Architecture](https://developer.mozilla.org/en-US/docs/Glossary/REST) that uses +[Hypermedia As The Engine Of Application State](/essays/hateoas/)), while providing a better user experience, on par +with SPAs in many cases.
</> From 15f59a35a5496dcb73d8497c90a3389486d44617 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 6 Feb 2022 16:48:09 -0700 Subject: [PATCH 09/16] clean up --- www/essays/hypermedia-driven-applications.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index 1deacf97..aa5a403c 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -21,16 +21,18 @@ the simplicity & flexibility of traditional Multi-Page Applications (MPAs) with [Single-Page Applications](https://en.wikipedia.org/wiki/Single-page_application) (SPAs). The HDA architecture achieves this goal by extending the existing HTML infrastructure of the web to allow hypermedia - developers to use more powerful hypermedia-driven interactions. + developers to create more powerful hypermedia-driven interactions. Two [constraints](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) characterize the HDA architecture: * The application uses a **declarative, HTML-embedded syntax**, rather than imperative scripting, to achieve better front end interactivity + * The application interacts with the server **in terms of hypermedia** (i.e. HTML) rather than a non-hypermedia format (e.g. JSON) -The HDA architecture falls within the **original [REST-ful](https://developer.mozilla.org/en-US/docs/Glossary/REST) -architecture of the web** in a way that contrasts with the SPA architecture. In particular, HDAs make **effective use -of [HATEOAS](/essays/hateoas/)** in a way that SPAs typically do not. +The HDA architecture stays within the **original [REST-ful](https://developer.mozilla.org/en-US/docs/Glossary/REST) +architecture of the web** in a way that contrasts with the SPA architecture. + +In particular, HDAs make **effective use of [HATEOAS](/essays/hateoas/)** in a way that SPAs typically do not. ## An Example @@ -64,11 +66,12 @@ Consider the htmx [Active Search](/examples/active-search) example: ``` Here htmx is being used to achieve a UX pattern that would typically be associated with an SPA: as the user types, -after a slight pause, results will populate the result table below. +after a slight pause, search results will populate the result table below. This example effectively demonstrates the essential characteristic of an HDA: * The front end of the feature is specified entirely in `hx-` declarative attributes, directly in HTML + * The interaction with the server is done via HTTP and HTML: an HTTP request is sent, HTML is returned and inserted into the DOM ## The Place of Scripting In An HDA @@ -87,8 +90,8 @@ This addresses the concern regarding Code-On-Demand mentioned in Fielding's thes By embedding Code-On-Demand (scripts) directly in HTML, you increase visibility and satisfy the [Locality of Behavior](/essays/locality-of-behaviour/) design principle. -Three approaches to scripting that satisfy this constraint are [hyperscript](https://hyperscript.org), [AlpineJS](https://alpinejs.dev) -and [VanillaJS](http://vanilla-js.com/) (when embedded directly on HTML elements). +Three approaches to scripting that satisfy this third constraint are [hyperscript](https://hyperscript.org), +[AlpineJS](https://alpinejs.dev) and [VanillaJS](http://vanilla-js.com/) (when embedded directly on HTML elements). Here is an example of each demonstrating HDA-friendliness: From d869f80e78d512420d23e0356f8bafa77d5f9976 Mon Sep 17 00:00:00 2001 From: carson Date: Mon, 7 Feb 2022 06:27:59 -0700 Subject: [PATCH 10/16] fix typo --- www/essays/hypermedia-driven-applications.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/essays/hypermedia-driven-applications.md b/www/essays/hypermedia-driven-applications.md index aa5a403c..3937a5e8 100644 --- a/www/essays/hypermedia-driven-applications.md +++ b/www/essays/hypermedia-driven-applications.md @@ -125,7 +125,7 @@ Some libraries that allow developers to build HDAs: * * * -* +* * (a mobile hypermedia!) And some complementary, HDA-friendly scripting tools: From 2273f13677000103b42fa9174aa9cdff16a3622e Mon Sep 17 00:00:00 2001 From: carson Date: Wed, 9 Feb 2022 21:37:04 -0700 Subject: [PATCH 11/16] sponsor update !!! --- www/docs.md | 41 +++++++++++++++++++------------------- www/img/logo-craft-cms.svg | 3 +++ www/index.md | 12 ++++++----- www/talk.md | 4 ++++ 4 files changed, 35 insertions(+), 25 deletions(-) create mode 100644 www/img/logo-craft-cms.svg diff --git a/www/docs.md b/www/docs.md index da0fb306..2ea84b27 100644 --- a/www/docs.md +++ b/www/docs.md @@ -116,31 +116,26 @@ If you are migrating to htmx from intercooler.js, please see the [migration guid ### webpack -If you are using webpack, you have to do the following steps: +If you are using webpack to managed your javascript: -1. Install `htmx` via your favourite package manager (like npm or yarn) -2. Add the import to your `index.js` - -``` js +* Install `htmx` via your favourite package manager (like npm or yarn) +* Add the import to your `index.js` + ``` js import 'htmx.org'; -``` + ``` -If you want to use the global `htmx` variable (recommended), you have to inject it to the window scope. +If you want to use the global `htmx` variable (recommended), you need to inject it to the window scope: -3. Create a custom JS file -4. Import this file to your `index.js` (below the import from step 2) - -``` js +* Create a custom JS file +* Import this file to your `index.js` (below the import from step 2) + ``` js import 'path/to/my_custom.js'; -``` - -5. Add the following line - -``` js + ``` +* Then add this code to the file: + ``` js window.htmx = require('htmx.org'); -``` - -6. Rebuild your bundle + ``` +* Finally, rebuild your bundle ## [AJAX](#ajax) @@ -1155,7 +1150,13 @@ You can set them directly in javascript, or you can use a `meta` tag: ### Conclusion -And that's it! Have fun with htmx: you can accomplish [quite a bit](/examples) without a lot of code. +And that's it! + +Have fun with htmx! You can accomplish [quite a bit](/examples) without writing a lot of code! + +*javascript fatigue:
+longing for a hypertext
+already in hand*
diff --git a/www/img/logo-craft-cms.svg b/www/img/logo-craft-cms.svg new file mode 100644 index 00000000..4a2cef5f --- /dev/null +++ b/www/img/logo-craft-cms.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/index.md b/www/index.md index 1fac2820..fc86b520 100644 --- a/www/index.md +++ b/www/index.md @@ -54,19 +54,21 @@ Read the [docs introduction](/docs#introduction) for a more in-depth... introduc Thank you to our corporate sponsors!
-
+
-[![CommSpace](/img/commspace.svg)](https://www.commspace.co.za/) +
-
+
- +
-
+
+ +
diff --git a/www/talk.md b/www/talk.md index 9e5190d3..5d457a98 100644 --- a/www/talk.md +++ b/www/talk.md @@ -28,6 +28,10 @@ Email: [htmx@bigsky.software](mailto:htmx@bigsky.software) +## Github Stars + + + ## Training [HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Course by Michael Kennedy](https://training.talkpython.fm/courses/htmx-flask-modern-python-web-apps-hold-the-javascript) From cc074eaed2c018a806aa452d3af0db55fcad1c06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl=20A?= Date: Sat, 12 Feb 2022 19:08:07 +0100 Subject: [PATCH 12/16] fix(readme): typos (#815) thank you! --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 39d9f3a7..33ede858 100644 --- a/README.md +++ b/README.md @@ -95,9 +95,9 @@ You can then run the test suite by navigating to: At this point you can modify `/src/htmx.js` to add features, and then add tests in the appropriate area under `/test`. * `/test/index.html` - the root test page from which all other tests are included -* `/test/attributres` - attribute specific tests +* `/test/attributes` - attribute specific tests * `/test/core` - core functionality tests -* `/test/core/regressions.js` - regresssion tests +* `/test/core/regressions.js` - regression tests * `/test/ext` - extension tests * `/test/manual` - manual tests that cannot be automated From 71c43382cd8e0f7edaa76f59476768ef698deb13 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 13 Feb 2022 10:11:31 -0700 Subject: [PATCH 13/16] small language changes --- www/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/www/index.md b/www/index.md index fc86b520..b251f4f0 100644 --- a/www/index.md +++ b/www/index.md @@ -11,7 +11,7 @@ title: htmx - high power tools for html ## introduction -htmx allows you to access [AJAX](https://htmx.org/docs#ajax), [CSS Transitions](https://htmx.org/docs#css_transitions), [WebSockets](https://htmx.org/docs#websockets) and [Server Sent Events](https://htmx.org/docs#sse) +htmx gives you access to [AJAX](https://htmx.org/docs#ajax), [CSS Transitions](https://htmx.org/docs#css_transitions), [WebSockets](https://htmx.org/docs#websockets) and [Server Sent Events](https://htmx.org/docs#sse) directly in HTML, using [attributes](https://htmx.org/reference#attributes), so you can build [modern user interfaces](https://htmx.org/examples) with the [simplicity](https://en.wikipedia.org/wiki/HATEOAS) and [power](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) of hypertext @@ -41,9 +41,10 @@ By removing these arbitrary constraints, htmx completes HTML as a [hypertext](ht ``` -The [`hx-post`](https://htmx.org/attributes/hx-post) and [`hx-swap`](https://htmx.org/attributes/hx-swap) attributes tell htmx: +The [`hx-post`](https://htmx.org/attributes/hx-post) and [`hx-swap`](https://htmx.org/attributes/hx-swap) attributes on +this button tell htmx: -> "When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the response" +> "When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the HTML response" htmx is the successor to [intercooler.js](http://intercoolerjs.org) @@ -76,12 +77,10 @@ Thank you to our corporate sponsors! If you use htmx commercially & wish to support the project you can sponsor us via [Github](https://github.com/sponsors/bigskysoftware) -For htmx consulting, [email us](mailto:htmx@bigsky.software) +[Consulting](mailto:htmx@bigsky.software) is available. ## haiku *javascript fatigue:
longing for a hypertext
already in hand* - - From a9d67900ed5c983604739c3678e0af4110a962a0 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 13 Feb 2022 20:44:17 -0700 Subject: [PATCH 14/16] demo helper script --- www/demo.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ www/demo.md | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 www/demo.js create mode 100644 www/demo.md diff --git a/www/demo.js b/www/demo.js new file mode 100644 index 00000000..b7cf4b5f --- /dev/null +++ b/www/demo.js @@ -0,0 +1,53 @@ +function addScript(url) { + var myScript = document.createElement('script'); + myScript.setAttribute('src', url); + document.head.appendChild(myScript); +} + +function interpolate(str) { + var returnStr = ""; + var charArray = Array.from(str); + while (charArray.length > 0) { + var current = charArray.shift(); + if (current === "$" && charArray[0] === "{") { + var evalStr = "(function() { return " + charArray.shift(); + while (charArray.length > 0 && charArray[0] !== "}") { + evalStr += charArray.shift() + } + charArray.shift(); + evalStr += " })()"; + console.log("Evaling", evalStr); + returnStr += eval(evalStr); + } else { + returnStr += current; + } + } + return returnStr; +} + +function initMockRequests() { + if(typeof MockRequests === "undefined" || + typeof htmx === "undefined" || + typeof _hyperscript === "undefined") { + console.log("Not defined yet"); + setTimeout(initMockRequests, 20); + } else { + console.log("defining"); + htmx.findAll("template").forEach(function(elt){ + if(elt.getAttribute("url")){ + MockRequests.setDynamicMockUrlResponse(elt.getAttribute("url"), + {dynamicResponseModFn: + function(request, response) { + return interpolate(elt.innerHTML); + }, + usePathnameForAllQueries: true}); + } + }); + } +} + +addScript("https://unpkg.com/htmx.org@1.6.1/dist/htmx.js"); +addScript("https://unpkg.com/hyperscript.org@0.9.4/dist/_hyperscript_w9y.min.js"); +addScript("https://unpkg.com/mock-requests@1.3.2/index.js"); +initMockRequests(); diff --git a/www/demo.md b/www/demo.md new file mode 100644 index 00000000..35a1e50a --- /dev/null +++ b/www/demo.md @@ -0,0 +1,40 @@ +--- +layout: layout.njk +title: htmx - high power tools for html +--- + +# htmx demo helper script + +By adding the script tag below to your demo site (e.g. jsFiddle) you will have a full installation of +htmx and hyperscript for your +demo. + + +Additionally, you can add mock responses by simply adding `template` tags with the +`url` attribute. The response for that url will be the innerHTML of the template. You + may embed simple expressions in the template with a `${}` syntax. + +## Code + +Copy this to your demo site: + +```html + +``` + +## Example + +This is an example of the code in action: + +```html + + + + + + +``` From d1a0e4a1ee52b20e3fb4d1f8a91695dab304c852 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 13 Feb 2022 20:49:09 -0700 Subject: [PATCH 15/16] move to js folder --- www/demo.md | 4 ++-- www/{demo.js => js/demo-helper.js} | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename www/{demo.js => js/demo-helper.js} (100%) diff --git a/www/demo.md b/www/demo.md index 35a1e50a..89cb5219 100644 --- a/www/demo.md +++ b/www/demo.md @@ -19,7 +19,7 @@ Additionally, you can add mock responses by simply adding `template` tags with t Copy this to your demo site: ```html - + ``` ## Example @@ -27,7 +27,7 @@ Copy this to your demo site: This is an example of the code in action: ```html - + diff --git a/www/demo.js b/www/js/demo-helper.js similarity index 100% rename from www/demo.js rename to www/js/demo-helper.js From 23008dc1ed729cb445c3ce3a8e4463a3eb60f120 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 13 Feb 2022 20:51:14 -0700 Subject: [PATCH 16/16] remove console logs --- www/js/demo-helper.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/js/demo-helper.js b/www/js/demo-helper.js index b7cf4b5f..b2a3af00 100644 --- a/www/js/demo-helper.js +++ b/www/js/demo-helper.js @@ -17,7 +17,7 @@ function interpolate(str) { } charArray.shift(); evalStr += " })()"; - console.log("Evaling", evalStr); + // console.log("Evaling", evalStr); returnStr += eval(evalStr); } else { returnStr += current; @@ -30,10 +30,10 @@ function initMockRequests() { if(typeof MockRequests === "undefined" || typeof htmx === "undefined" || typeof _hyperscript === "undefined") { - console.log("Not defined yet"); + // console.log("Not defined yet"); setTimeout(initMockRequests, 20); } else { - console.log("defining"); + // console.log("defining"); htmx.findAll("template").forEach(function(elt){ if(elt.getAttribute("url")){ MockRequests.setDynamicMockUrlResponse(elt.getAttribute("url"),