mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 06:21:19 +00:00
Merge branch 'master' into dev
# Conflicts: # www/docs.md
This commit is contained in:
carson
commit
d137db68d0
@ -97,7 +97,7 @@ At this point you can modify `/src/htmx.js` to add features, and then add tests
|
||||
* `/test/index.html` - the root test page from which all other tests are included
|
||||
* `/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
|
||||
|
||||
|
||||
40
www/demo.md
Normal file
40
www/demo.md
Normal file
@ -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
|
||||
<a href="https://htmx.org">htmx</a> and <a href="https://hyperscript.org">hyperscript</a> 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
|
||||
<script src="https://htmx.org/js/demo-helper.js"></script>
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
This is an example of the code in action:
|
||||
|
||||
```html
|
||||
<script src="https://htmx.org/js/demo-helper.js"></script>
|
||||
<!-- post to /foo -->
|
||||
<button hx-post="/foo" hx-target="#result">Count Up</button> <output id="result"></output>
|
||||
<!-- respond to /foo -->
|
||||
<script>
|
||||
globalInt = 0;
|
||||
</script>
|
||||
<template url="/foo">
|
||||
${globalInt++}
|
||||
</template>
|
||||
```
|
||||
40
www/docs.md
40
www/docs.md
@ -117,24 +117,26 @@ If you are migrating to htmx from intercooler.js, please see the [migration guid
|
||||
|
||||
### <a name="webpack">[webpack](#webpack)
|
||||
|
||||
If you are using webpack, please follow these steps:
|
||||
If you are using webpack to managed your javascript:
|
||||
|
||||
1. Install `htmx` via your favourite package manager (like npm or yarn)
|
||||
1. Add the import to your `index.js`
|
||||
* Install `htmx` via your favourite package manager (like npm or yarn)
|
||||
* Add the import to your `index.js`
|
||||
``` js
|
||||
import 'htmx.org';
|
||||
import 'htmx.org';
|
||||
```
|
||||
1. Optional but recommended: if you want to use the global `htmx` variable:
|
||||
2. Create a custom JS file and import this file to your `index.js` below the import
|
||||
from step 2
|
||||
``` js
|
||||
import 'path/to/my_custom.js';
|
||||
```
|
||||
3. Add the following line to it
|
||||
``` js
|
||||
window.htmx = require('htmx.org');
|
||||
```
|
||||
6. Rebuild your bundle
|
||||
|
||||
If you want to use the global `htmx` variable (recommended), you need to inject it to the window scope:
|
||||
|
||||
* 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';
|
||||
```
|
||||
* Then add this code to the file:
|
||||
``` js
|
||||
window.htmx = require('htmx.org');
|
||||
```
|
||||
* Finally, rebuild your bundle
|
||||
|
||||
## <a name="ajax"></a> [AJAX](#ajax)
|
||||
|
||||
@ -1210,7 +1212,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:<br/>
|
||||
longing for a hypertext<br/>
|
||||
already in hand*
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -201,3 +201,7 @@ In conclusion,
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
@ -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.
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
@ -271,3 +271,7 @@ necessity for building RESTful systems.
|
||||
font-size: 1.1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
@ -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.
|
||||
much less of a concern, and providing the end points you need for a good hypermedia experience should be your primary goal.
|
||||
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
149
www/essays/hypermedia-driven-applications.md
Normal file
149
www/essays/hypermedia-driven-applications.md
Normal file
@ -0,0 +1,149 @@
|
||||
---
|
||||
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 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).
|
||||
|
||||
The HDA architecture achieves this goal by extending the existing HTML infrastructure of the web to allow hypermedia
|
||||
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 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
|
||||
|
||||
Consider the htmx [Active Search](/examples/active-search) example:
|
||||
|
||||
```html
|
||||
<h3>
|
||||
Search Contacts
|
||||
<span class="htmx-indicator">
|
||||
<img src="/img/bars.svg"/> Searching...
|
||||
</span>
|
||||
</h3>
|
||||
<input class="form-control" type="search"
|
||||
name="search" placeholder="Begin Typing To Search Users..."
|
||||
hx-post="/search"
|
||||
hx-trigger="keyup changed delay:500ms, search"
|
||||
hx-target="#search-results"
|
||||
hx-indicator=".htmx-indicator">
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Email</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="search-results">
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
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, 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
|
||||
|
||||
[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 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:
|
||||
|
||||
```html
|
||||
<!-- hyperscript -->
|
||||
<button _="on click toggle .red-border">
|
||||
Toggle Class
|
||||
</button>
|
||||
|
||||
<!-- Alpine JS -->
|
||||
<button @click="open = !open" :class="{'red-border' : open, '' : !open}">
|
||||
Toggle Class
|
||||
</button>
|
||||
|
||||
<!-- VanillaJS -->
|
||||
<button onclick="this.classList.toggle('red-border')">
|
||||
Toggle Class
|
||||
</button>
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
* <https://htmx.org>
|
||||
* <https://unpoly.com/>
|
||||
* <https://kasta-ua.github.io/twinspark-js/>
|
||||
* <https://hotwire.dev>
|
||||
* <https://hyperview.org/> (a mobile hypermedia!)
|
||||
|
||||
And some complementary, HDA-friendly scripting tools:
|
||||
|
||||
* <https://hyperscript.org>
|
||||
* <https://alpinejs.dev/>
|
||||
* <http://vanilla-js.com/> (embedded directly in HTML)
|
||||
|
||||
## Conclusion
|
||||
|
||||
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, 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.
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
@ -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.
|
||||
quality and sustainability.
|
||||
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
@ -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.
|
||||
Finally, I hope you can see how inappropriate REST is for describing most JSON APIs in use today.
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
@ -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):
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
@ -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.
|
||||
Everything old is new again, but, this time, a little bit better.
|
||||
|
||||
<div style="padding-top: 120px;padding-bottom:40px;text-align: center">
|
||||
</>
|
||||
</div>
|
||||
3
www/img/logo-craft-cms.svg
Normal file
3
www/img/logo-craft-cms.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="55" viewBox="0 0 220 55">
|
||||
<path fill="#E5422B" d="M76.1875 32.5625C72.5625 32.5625 70.5625 30.25 71.0625 26.9375 71.625 23.5625 74.375 21.3125 77.9375 21.3125 79.8125 21.3125 81.5 22.1875 82.5 23.5L86 20.625C84.125 18.5 81.4375 17.4375 78.5625 17.4375 72.6875 17.4375 67.5625 21.375 66.6875 26.9375 65.8125 32.5625 69.5625 36.4375 75.5 36.4375 78.5 36.4375 81.5 35.1875 84.125 33.125L81.625 30.25C79.8125 31.875 77.9375 32.5625 76.1875 32.5625M99.6875 17.625C99.6875 17.625 98.9375 17.5 98.875 17.5 98.0625 17.375 97.1875 17.4375 96.375 17.5 95.625 17.5625 94.875 17.6875 94.125 17.9375 93.5 18.125 92.8125 18.375 92.25 18.75L92.375 17.875 88.125 17.875 85.25 36 89.5 36 91.1875 25.4375C91.25 24.8125 91.5 24.25 91.8125 23.75 92.125 23.25 92.5625 22.8125 93.0625 22.5 93.5625 22.125 94.0625 21.875 94.625 21.6875 95.1875 21.5 95.75 21.375 96.375 21.3125 97.1875 21.25 98.0625 21.3125 98.875 21.5 98.875 21.5 98.9375 21.5 98.9375 21.5 99.0625 21.5 99.6875 17.625 99.6875 17.625M114.5625 19C113.375 18 111.5625 17.4375 109.4375 17.4375 104.125 17.4375 99.3125 21.25 98.375 26.875 97.5 32.5 101.1875 36.3125 106.3125 36.3125 108.625 36.3125 110.5625 36 112.1875 34.875L112.0625 35.875 115.9375 35.875 118.75 17.875 114.75 17.875 114.5625 19zM113.6875 26.875L113.6875 26.875C113.125 30.3125 110.5625 32.6875 107.25 32.6875 103.875 32.6875 101.9375 30.1875 102.5 26.8125 103.0625 23.4375 105.75 21.0625 109.0625 21.0625 112.375 21.125 114.1875 23.4375 113.6875 26.875L113.6875 26.875zM138.375 17.875L139.1875 12.75 134.3125 16.25 134.0625 17.9375 128.5625 17.9375 129.125 14.5C129.4375 12.875 131.1875 12.9375 131.1875 12.9375L133.25 12.9375 133.875 9.1875 131.5 9.1875 130.9375 9.1875C125.125 9.1875 124.9375 13.6875 124.9375 13.6875L124.5625 15.8125 124.25 17.9375 123.875 17.9375 119.125 21.6875 123.625 21.6875 120.75 40 125.125 40 128 21.625 133.5 21.625 131.25 36 135.5625 36 137.8125 21.625 143.1875 21.625 143.8125 17.875 138.375 17.875zM149.9375 26.9375C150.8125 21.375 155.875 17.4375 161.8125 17.4375 164.6875 17.4375 167.375 18.5625 169.25 20.625L165.75 23.5C164.75 22.1875 163.0625 21.3125 161.1875 21.3125 157.625 21.3125 154.875 23.625 154.3125 26.9375 153.8125 30.25 155.8125 32.5625 159.4375 32.5625 161.1875 32.5625 163.0625 31.875 164.875 30.25L167.375 33.125C164.75 35.25 161.75 36.4375 158.75 36.4375 152.8125 36.4375 149.0625 32.5625 149.9375 26.9375M200.5625 25L198.875 36 194.625 36 196.3125 25.3125C196.75 22.8125 195.375 21.3125 192.9375 21.3125 190.375 21.3125 187.8125 22.875 187.4375 25.4375L185.75 36 181.5 36 183.1875 25.3125C183.5625 22.875 182.125 21.375 179.8125 21.3125 177.4375 21.4375 174.6875 22.9375 174.3125 25.4375L172.625 36 168.375 36 171.25 17.875 175.5 17.875 175.375 18.75C176.8125 17.875 178.4375 17.5 180.5 17.4375L180.875 17.4375C183.5 17.4375 185.625 18.5 186.75 20.3125 188.5 18.5 191.1875 17.4375 193.875 17.4375 198.5 17.4375 201.3125 20.5 200.5625 25M200.375 33.8125L203 30.5625C204.4375 31.6875 207.1875 32.5625 209.5 32.5625 211.625 32.5625 213.75 32.125 214 30.6875 214.1875 29.5625 212.125 29.1875 209.8125 28.8125 205 28 202.5625 27 203.0625 23.375 203.8125 18.8125 208.5 17.5 212.375 17.5 215.125 17.5 218 18.4375 219.9375 19.75L217.3125 23C215.8125 22.0625 213.875 21.375 211.6875 21.375 209.125 21.375 207.625 22.125 207.4375 23.3125 207.3125 24.125 208 24.4375 211 24.9375 215.375 25.6875 219 26.375 218.3125 30.5625 217.75 34.375 213.875 36.5 208.8125 36.5 206 36.4375 202.375 35.4375 200.375 33.8125M47.8125 0L5.625 0C2.5 0 0 2.5 0 5.625L0 47.8125C0 50.9375 2.5 53.4375 5.625 53.4375L47.8125 53.4375C50.875 53.4375 53.4375 50.9375 53.4375 47.8125L53.4375 5.625C53.4375 2.5 50.9375 0 47.8125 0M26.625 32.5625C28.375 32.5625 30.25 31.875 32.0625 30.25L34.5625 33.125C31.9375 35.25 28.9375 36.4375 25.9375 36.4375 20 36.4375 16.25 32.5 17.125 26.9375 18 21.375 23.0625 17.4375 29 17.4375 31.875 17.4375 34.5625 18.5625 36.4375 20.625L32.9375 23.5C31.9375 22.1875 30.25 21.3125 28.375 21.3125 24.8125 21.3125 22.0625 23.625 21.5 26.9375 21 30.25 23 32.5625 26.625 32.5625" transform="translate(0 .6)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
23
www/index.md
23
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
|
||||
</button>
|
||||
```
|
||||
|
||||
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)
|
||||
|
||||
@ -54,19 +55,21 @@ Read the [docs introduction](/docs#introduction) for a more in-depth... introduc
|
||||
Thank you to our corporate sponsors!
|
||||
|
||||
<div class="row" style="text-align: center">
|
||||
<div class="col 2" style="padding: 0">
|
||||
<div class="col 2" style="padding: 16px">
|
||||
|
||||
[](https://www.commspace.co.za/)
|
||||
<a href="https://www.commspace.co.za/"><img src="/img/commspace.svg" style="width:90%"></a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col 2" style="padding: 0">
|
||||
<div class="col 2" style="padding: 16px">
|
||||
|
||||
<a href="https://bigsky.software"><img src="/img/bss.png" style="width:250px"></a>
|
||||
<a href="https://bigsky.software"><img src="/img/bss.png" style="width:90%"></a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col 2" style="padding: 0">
|
||||
<div class="col 2" style="padding: 16px">
|
||||
|
||||
<a href="https://craftcms.com"><img src="/img/logo-craft-cms.svg" style="width:90%"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -74,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:<br/>
|
||||
longing for a hypertext<br/>
|
||||
already in hand*
|
||||
|
||||
|
||||
|
||||
53
www/js/demo-helper.js
Normal file
53
www/js/demo-helper.js
Normal file
@ -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();
|
||||
@ -28,10 +28,15 @@ Email: [htmx@bigsky.software](mailto:htmx@bigsky.software)
|
||||
|
||||
<iframe src="https://github.com/sponsors/bigskysoftware/card" title="Sponsor bigskysoftware" height="225" width="600" style="border: 0;"></iframe>
|
||||
|
||||
## Github Stars
|
||||
|
||||
<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="https://star-history.com/embed?secret=Z2hwX3oybDFUTnBMSTZBaXNhcjFwZmN5UVRnZEFSR3JFdTRPckV2Rw==#bigskysoftware/htmx&bigskysoftware/_hyperscript&Date" frameBorder="0"></iframe>
|
||||
|
||||
## 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)
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="1 col">
|
||||
|
||||
@ -51,6 +56,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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user