Merge remote-tracking branch 'origin/master'

www/content/attributes/hx-preserve.md

@@ -7,21 +7,25 @@ Elements with `hx-preserve` set are preserved by `id` when htmx updates any ance
 You *must* set an unchanging `id` on elements for `hx-preserve` to work.
 The response requires an element with the same `id`, but its type and other attributes are ignored.
 
-Note that some elements cannot unfortunately be preserved properly, such as `<input type="text">` (focus and caret position are lost), iframes or certain types of videos. To tackle some of these cases we recommend the [morphdom extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/morphdom-swap/README.md), which does a more elaborate DOM
-reconciliation.
-
-## OOB Swap Usage
-
-You can include `hx-preserve` in the inner response of a [hx-swap-oob](@/attributes/hx-swap-oob.md) and it will preserve the element unchanged during the out of band partial replacement as well. However, you cannot place `hx-preserve` on the same element as the `hx-swap-oob` is placed. For example, here is an oob response that replaces notify but leaves the retain div unchanged.
-
-```html
-<div id="notify" hx-swap-oob="true">
-    <p>The below content will not be changed</p>
-    <div id="retain" hx-preserve>Use the on-page contents</div>
-</div>
-```
-
 ## Notes
 
 * `hx-preserve` is not inherited
-* `hx-preserve` can cause elements to be relocated to a new location when swapping in a partial response
+* You can use `hx-preserve="true"` or use it as a boolean attribute with just `hx-preserve`
+* Some elements cannot unfortunately be preserved properly, such as `<input type="text">` (focus and caret position are lost), iframes or certain types of videos. To tackle some of these cases we recommend the [morphdom extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/morphdom-swap/README.md), which does a more elaborate DOM
+reconciliation
+* When using [History Support](@/docs.md#history) for actions like the back button `hx-preserve` elements will also have their state preserved
+* Avoid using [hx-swap](@/attributes/hx-swap.md) set to `none` with requests that could contain a `hx-preserve` element to avoid losing it
+* `hx-preserve` can cause elements to be removed from their current location and relocated to a new location when swapping in a partial/oob response
+  ```html
+  <div id="new_location">
+    Just relocated the video here
+    <div id="video" hx-preserve></div>
+  </div>
+  ```
+* Can be used on the inside content of a [hx-swap-oob](@/attributes/hx-swap-oob.md) element
+  ```html
+  <div id="notify" hx-swap-oob="true">
+    Notification updated but keep the same retain
+    <div id="retain" hx-preserve></div>
+  </div>
+  ```

www/content/attributes/hx-trigger.md

@@ -154,4 +154,4 @@ The AJAX request can be triggered via JavaScript [`htmx.trigger()`](@/api.md#tri
 
 * `hx-trigger` is not inherited
 * `hx-trigger` can be used without an AJAX request, in which case it will only fire the `htmx:trigger` event
-* In order to pass a CSS selector that contains whitespace (e.g. `form input`) to the `from`- or `target`-modifier, surround the selector in parentheses or curly brackets (e.g. `from:(form input)` or `from:nearest (form input)`)
+* In order to pass a CSS selector that contains whitespace (e.g. `form input`) to the `from`- or `target`-modifier, surround the selector in parentheses or curly brackets (e.g. `from:(form input)` or `from:closest (form input)`)

www/content/docs.md

@@ -999,7 +999,7 @@ If you wanted to swap everything, regardless of HTTP response code, you could us
 <meta name="htmx-config" content='{"responseHandling": [{"code":".*", "swap": true}]}' /> <!--all responses are swapped-->
 ```
 
-Finally, it is worth considering using the [Response Targets](/extensions/reponse-targets)
+Finally, it is worth considering using the [Response Targets](/extensions/response-targets)
 extension, which allows you to configure the behavior of response codes declaratively via attributes.
 
 ### CORS

www/content/essays/htmx-sucks.md

@@ -171,7 +171,7 @@ Sometimes the htmx author will make a smart-alec comment like "Well, how do you
 Another practical reason not to use htmx is that there are, rounding off, zero htmx jobs.
 
 I just did a search for htmx jobs on indeed and found a grand total of two: one at Microsoft and one at Oak Ridge
-National Labratory.
+National Laboratory.
 
 A search for "react", on the other hand, gives 13,758 jobs.
 
@@ -206,7 +206,7 @@ Another technical issue with htmx is that it just won't scale.  It may work for
 get larger the htmx model breaks down and becomes a mess.  The component model of React and other front-end tools keeps
 everything compartmentalized and testable.  This makes it much easier to keep large codebases clean.
 
-As an example, consider [Github](https://github.com/), which started out using technology a lot like htmx.  It has
+As an example, consider [GitHub](https://github.com/), which started out using technology a lot like htmx.  It has
 recently started adopting React and is now much more stable than it was previously.  They would have been better off
 if they had just started with React and built the whole thing in a modern, component-based way, but at least they
 are making the right move now.  Better late than never.

www/content/essays/interviews/henning_koch.md

@@ -17,7 +17,7 @@ Thank you for agreeing to an interview!
 > Sure! I'm currently head of development at [makandra](https://makandra.de/en), a Ruby on Rails consultancy I co-founded back in 2009, after many years of freelancing as a web developer. So my context is working on many different web apps concurrently, and maintaining those for a long time. On a given week we probably touch 10+ projects, for industries ranging from education to automative to cyber security. Unpoly is an extraction from patterns that we saw repeating over and over in client projects.
 
 **Q**: When I created intercooler.js a big part of it was my unwillingness to deal with the popular SPA libraries of the time
-(Angular & ExtJS, for example).  Did Unpoly have a similiar history?
+(Angular & ExtJS, for example).  Did Unpoly have a similar history?
 
 > Our team actually went all-in on AngularJS for a while, in an effort to replace the mountains of jQuery spaghetti that we had before. When Google nuked AngularJS with their Angular 2 rewrite, we held a retrospective for that time and came up with mixed results. While we had built some apps that were a great fit for the SPA model, the majority of projects suffered from larger code bases, more dependencies, logic being split between client and server, lots of boilerplate API to move data from where we already have it (the server) to where we need it (the browser).
 >
@@ -36,7 +36,7 @@ a Rails developer too.  Did that influence your approach to Unpoly?
 
 > I share some of your love for interactive documents that stream their UI together with their content. For me this began in the 1990s with character-based BBS UIs und WinHelp files, until the web eventually supplanted all of that.
 >
-> Today I'm not super philosophical about it, but I do believe that a hypermedia approach is a sweet spot where you get good UI fidelity with very little and mostly boring code. For the median app, hypermedia probably gives a better result than the SPA model. I file like there's this enourmous disconnect between the theoretical ceiling of an SPA model and what most SPAs deliver. SPAs allow for optimistic UI (which is great!), but that's just more code than waiting for a JSON endpoint. So once you do any meaningful interaction on a spotty connection, many SPAs degrade to spinners and blank pages.
+> Today I'm not super philosophical about it, but I do believe that a hypermedia approach is a sweet spot where you get good UI fidelity with very little and mostly boring code. For the median app, hypermedia probably gives a better result than the SPA model. I file like there's this enormous disconnect between the theoretical ceiling of an SPA model and what most SPAs deliver. SPAs allow for optimistic UI (which is great!), but that's just more code than waiting for a JSON endpoint. So once you do any meaningful interaction on a spotty connection, many SPAs degrade to spinners and blank pages.
 
 **Q**: What are the most important technical lessons you draw from unpoly?
 

www/content/essays/is-htmx-another-javascript-framework.md

@@ -77,7 +77,7 @@ In short, while htmx can be used as a framework, it's a framework that [deviates
 <div style="text-align:center; width:100%">
   <img width=500
        src="/img/memes/istudiedhtml.png"
-       alt="A man holding a sword. He says: 'When you wrote class components, I studied HTML. When you were converting classes to hooks, I mastered the HTML. While you wasted time moving all your client-side logic to server components, I cultivated inner HTML. And now that the browser won't hydrate your thick client JSON API you have the audactiy to come to me for help?'"
+       alt="A man holding a sword. He says: 'When you wrote class components, I studied HTML. When you were converting classes to hooks, I mastered the HTML. While you wasted time moving all your client-side logic to server components, I cultivated inner HTML. And now that the browser won't hydrate your thick client JSON API you have the audacity to come to me for help?'"
       >
 </div>
 

www/content/essays/rest-explained.md

@@ -239,7 +239,7 @@ These brief sections are not relevant to non-academics interested in REST.
 
 ## Summary
 
-So there you have it, a brief tour of Chapter 5 of Roy Fielding's disseration, which gave us the term REST.  I have
+So there you have it, a brief tour of Chapter 5 of Roy Fielding's dissertation, which gave us the term REST.  I have
 focused in on the areas that I think are most important for web developers to understand and tried to convey how
 REST describes the original web model.  The uniform interface concept is, in my opinion, the most important and interesting
 aspect of REST, and is useful for web developers to understand as it is primarily responsible for the benefits described

www/content/extensions/htmx-1-compat.md

@@ -1,5 +1,5 @@
 +++
-title = "htmx 1.x Compatability Extension"
+title = "htmx 1.x Compatibility Extension"
 +++
 
 The `htmx-1-compat` extension allows you to almost seamlessly upgrade from htmx 1.x to htmx 2.

www/content/extensions/idiomorph.md

@@ -7,7 +7,7 @@ morphing is a process where an existing DOM tree is "morphed" into the shape of
 the existing DOM's nodes as possible.  By preserving nodes when changing from one tree to another you can present a 
 much smoother transition between the two states.
 
-You can use the idiomorph morphing algorith as a [swapping](@attributes/hx-swap) strategy by including the idiomorph 
+You can use the idiomorph morphing algorithm as a [swapping](@attributes/hx-swap) strategy by including the idiomorph 
 extension.
 
 ## Install

www/content/extensions/sse.md

@@ -180,7 +180,7 @@ This event is dispatched when an SSE connection could not be established.
 
 ##### Details
 
-* `detail.error` - The error that occured while creating
+* `detail.error` - The error that occurred while creating
   an [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource).
 * `detail.source` - The [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource).
 

www/content/headers/hx-trigger.md

@@ -60,7 +60,7 @@ document.body.addEventListener("showMessage", function(evt){
 
 Each property of the JSON object on the right hand side will be copied onto the details object for the event.
 
-### Targetting Other Elements
+### Targeting Other Elements
 
 You can trigger events on other target elements by adding a `target` argument to the JSON object.
 

www/content/server-examples.md

@@ -125,6 +125,7 @@ These examples may make it a bit easier to get started using htmx with your plat
 
 ### http4s
 - <https://github.com/martinprobson/http4s-htmx-demo>
+- <https://github.com/eikek/htmx4s>
 
 ### zio-http
 - <https://github.com/rockthejvm/scalatags-htmx-demo>

www/themes/htmx-theme/highlighting/two-dark-edited.tmTheme

@@ -797,7 +797,7 @@
 		</dict>
 		<dict>
 			<key>name</key>
-			<string>new_subl obejct key</string>
+			<string>new_subl object key</string>
 			<key>scope</key>
 			<string>source.js                       meta.group.braces.round                            meta.group.braces.curly                           constant.other.object.key.js                         punctuation.separator.key-value.js</string>
 			<key>settings</key>
@@ -830,7 +830,7 @@
 		</dict>
 		<dict>
 			<key>name</key>
-			<string>new_subl variabel function method</string>
+			<string>new_subl variable function method</string>
 			<key>scope</key>
 			<string>source.js                       meta.function-call.method.without-arguments.js                       variable.function.js</string>
 			<key>settings</key>