From 3fe5802554c6f4e60e1984b7b17d934ae1ee693d Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Thu, 15 Feb 2024 09:27:02 -0800 Subject: Docs: Less wordy client scripting introduction. (#2307) --- www/content/docs.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/www/content/docs.md b/www/content/docs.md index 7fd82f3e..b4726cb9 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -1227,11 +1227,7 @@ Here is an example of the code in action: ## Scripting {#scripting} -While htmx encourages a hypermedia-based approach to building web applications, it does not preclude scripting and -offers a few mechanisms for integrating scripting into your web application. Scripting was explicitly included in -the REST-ful description of the web architecture in the [Code-On-Demand](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7) -section. As much as is feasible, we recommend a [hypermedia-friendly](/essays/hypermedia-friendly-scripting) approach -to scripting in your htmx-based web application: +While htmx encourages a hypermedia approach to building web applications, it offers many options for client scripting. Scripting is included in the REST-ful description of web architecture, see: [Code-On-Demand](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7). As much as is feasible, we recommend a [hypermedia-friendly](/essays/hypermedia-friendly-scripting) approach to scripting in your web application: * [Respect HATEOAS](/essays/hypermedia-friendly-scripting#prime_directive) * [Use events to communicate between components](/essays/hypermedia-friendly-scripting#events) -- cgit v1.2.3 From f8982c9384ae63e934fd5718633b275a4ba3fdcc Mon Sep 17 00:00:00 2001 From: Rdbo <57117082+rdbo@users.noreply.github.com> Date: Thu, 15 Feb 2024 14:33:09 -0300 Subject: Fixed typo in Web Security Basics essay (#2302) fix: typo in web-security-basics-with-htmx essay --- www/content/essays/web-security-basics-with-htmx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/content/essays/web-security-basics-with-htmx.md b/www/content/essays/web-security-basics-with-htmx.md index a1611017..f871e706 100644 --- a/www/content/essays/web-security-basics-with-htmx.md +++ b/www/content/essays/web-security-basics-with-htmx.md @@ -306,7 +306,7 @@ This is not one of the golden rules because it's not as easy to apply universall You might reasonably wonder: if I didn't have to know these things when I was building SPAs, isn't htmx a step back in security? We would challenge both parts of that statement. -This article is not intended to be a defense of htmx's security properties, but there are a lot of areas where hypermedia applications are, by default, a lot more secure than JSON-based frontends. HTML APIs only send back the information that's supposed to be rendered—it's a lot easier for unintended data to "hide" in a JSON response and leak to the user. Hypermdia APIs also don't lend themselves to implementing a generalized query language, like GraphQL, on the client, which [require a *massively* more complicated security model](https://intercoolerjs.org/2016/02/17/api-churn-vs-security.html). Flaws of all kinds hide in your application's complexity; hypermedia applications are, generally speaking, less complex, and therefore easier to secure. +This article is not intended to be a defense of htmx's security properties, but there are a lot of areas where hypermedia applications are, by default, a lot more secure than JSON-based frontends. HTML APIs only send back the information that's supposed to be rendered—it's a lot easier for unintended data to "hide" in a JSON response and leak to the user. Hypermedia APIs also don't lend themselves to implementing a generalized query language, like GraphQL, on the client, which [require a *massively* more complicated security model](https://intercoolerjs.org/2016/02/17/api-churn-vs-security.html). Flaws of all kinds hide in your application's complexity; hypermedia applications are, generally speaking, less complex, and therefore easier to secure. You also need to know about XSS attacks if you're putting dynamic content on the web, period. A developer who doesn't understand how XSS works won't understand what's dangerous about using React's [`dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html)—and they'll go ahead and set it the first time they need to render rich user-generated text. It is the library's responsibility to make those security basics as easy to find as possible; it has always been the developer's responsibility to learn and follow them. -- cgit v1.2.3 From 63712ad5c2b26bd16af3b287e864313c3fbae199 Mon Sep 17 00:00:00 2001 From: Nathaniel Sabanski Date: Thu, 15 Feb 2024 09:42:21 -0800 Subject: Docs: Hotwire migration guide: Examples for hx-on! Turbo Streams commentary. (#2306) * Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary. * Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary * Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary * Docs: Hotwire migration guide: Examples for hx-on. Turbo Streams commentary --- www/content/migration-guide-hotwire-turbo.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/www/content/migration-guide-hotwire-turbo.md b/www/content/migration-guide-hotwire-turbo.md index 8956223a..6d16e80d 100644 --- a/www/content/migration-guide-hotwire-turbo.md +++ b/www/content/migration-guide-hotwire-turbo.md @@ -10,7 +10,7 @@ The purpose of this guide is to provide common practices for "Hotwire Equivalent ## Turbo Drive * `` to enable a Turbo Drive-like experience. See: [hx-boost](@/attributes/hx-boost.md) -* As with Turbo Drive, if the user does not have javascript enabled, the site will continue to work. See: [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) +* As with Turbo Drive, if the user has javascript disabled, `hx-boost` will continue to work. See: [Progressive Enhancement](https://en.wikipedia.org/wiki/Progressive_enhancement) * `hx-boost="false"` is equivalent to `data-turbo="false"` and used to disable boost on specific links or forms. See: [Handbook](https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms) * Redirect after form submission (302, 303, 307, 3xx) `hx-target="body" hx-swap="outerHTML" hx-push-url="true"` See: [Handbook](https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission) * Disable buttons on form submission See: [Handbook](https://turbo.hotwired.dev/handbook/drive#form-submissions) @@ -23,12 +23,21 @@ addEventListener("htmx:afterOnLoad", (event) => { event.target.querySelectorAll("button").forEach(node => { node.disabled = false }) }) ``` +* Or, [hx-on](@/attributes/hx-on.md) may be used: + * `hx-on:submit='event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'` + * `hx-on:htmx:afterOnLoad='event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'` * Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled