From deecda151c4a49656d6ac8426ed3bef567ddefd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deniz=20Ak=C5=9Fim=C5=9Fek?= Date: Fri, 17 Oct 2025 22:11:02 +0300 Subject: [PATCH] Add alt text to images in content and examples (#3423) --- test/manual/no-indicator-css.html | 2 +- test/manual/yes-indicator-css.html | 2 +- www/content/_index.md | 13 +- www/content/attributes/hx-indicator.md | 8 +- www/content/docs.md | 4 +- www/content/essays/_index.md | 117 ++++++++++++++---- .../essays/hypermedia-driven-applications.md | 2 +- .../hypermedia-on-whatever-youd-like.md | 3 +- www/content/essays/lore.md | 2 +- .../essays/web-security-basics-with-htmx.md | 4 +- .../essays/why-gumroad-didnt-choose-htmx.md | 8 +- www/content/examples/active-search.md | 4 +- www/content/examples/click-to-load.md | 4 +- www/content/examples/infinite-scroll.md | 5 +- www/content/examples/inline-validation.md | 8 +- www/content/examples/value-select.md | 4 +- www/content/webring.md | 6 +- .../nested/page2.html | 2 +- www/static/test/manual/no-indicator-css.html | 2 +- www/static/test/manual/yes-indicator-css.html | 2 +- 20 files changed, 134 insertions(+), 68 deletions(-) diff --git a/test/manual/no-indicator-css.html b/test/manual/no-indicator-css.html index 0ce4e9fc..f9db6181 100644 --- a/test/manual/no-indicator-css.html +++ b/test/manual/no-indicator-css.html @@ -11,6 +11,6 @@ We are overriding the normal CSS inclusion with the meta directive {"includeIndicatorStyles":false} so you should see the indicator because it is not being hidden by the default classes.

- + Loading... diff --git a/test/manual/yes-indicator-css.html b/test/manual/yes-indicator-css.html index fc2e02a1..0ea2c2a3 100644 --- a/test/manual/yes-indicator-css.html +++ b/test/manual/yes-indicator-css.html @@ -6,6 +6,6 @@

You should not see bars here:

- + Loading... diff --git a/www/content/_index.md b/www/content/_index.md index a3247025..1432de7f 100644 --- a/www/content/_index.md +++ b/www/content/_index.md @@ -64,7 +64,8 @@ if(window.location.search=="?ads=true") {
- + Ad: MacMall PowerBooks as low as 1999$! + Call 888-932-1569. Get your FREE 64MB RAM with your PowerBook!
@@ -75,19 +76,21 @@ if(window.location.search=="?ads=true") {
- + shut up warren ⁺₊✦ uwu
- + htmx エイチティーエムエックス uwu
- + Ads: Get Flash! FREE Microsoft Internet Explorer! + Netscape Now! (3.0) Site created with Microsoft® FrontPage™. + Powered by Microsoft BackOffice.
@@ -139,7 +142,7 @@ We are happy to announce the release of [Hypermedia Systems](https://hypermedia. [Hypermedia-Driven Applications](@/essays/hypermedia-driven-applications.md) using htmx & more:
-hypermedia systems +Hypermedia Systems hardcover edition

sponsors

diff --git a/www/content/attributes/hx-indicator.md b/www/content/attributes/hx-indicator.md index 3ccef194..cbd66051 100644 --- a/www/content/attributes/hx-indicator.md +++ b/www/content/attributes/hx-indicator.md @@ -21,7 +21,7 @@ Here is an example with a spinner adjacent to the button: - + Loading... ``` @@ -34,7 +34,7 @@ CSS selectors: - + Loading... ``` @@ -79,7 +79,7 @@ call it out with the `hx-indicator` attribute: ```html ``` @@ -89,7 +89,7 @@ This simulates what a spinner might look like in that situation: ## Notes diff --git a/www/content/docs.md b/www/content/docs.md index ec3d9658..d97e8bc4 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -343,7 +343,7 @@ on it to transition to an opacity of 1, showing the indicator. ```html ``` @@ -373,7 +373,7 @@ attribute with a CSS selector to do so: - + Loading... ``` diff --git a/www/content/essays/_index.md b/www/content/essays/_index.md index 581291d8..4d70e560 100644 --- a/www/content/essays/_index.md +++ b/www/content/essays/_index.md @@ -81,7 +81,8 @@ page_template = "essay.html" ## Banners
- + Site created with htmx, The Right Way.
## Memes @@ -97,30 +98,92 @@ page_template = "essay.html" }
- - - - - - - - - - - - - - - - - - - - - - - - - - +2004 architecture: router, controller, model and view on server side, + browser, DOM and JS on client. 2019 architecture: browser, DOM, js, model, + view, controller, virtual DOM, server-side JS runtime, router, model view + and controller again, another virtual dom, another model-view-controller + for the JSON API... discontent wojak. and 2021 architecture, same as 200 but + with htmx and smug wojak. +crying wojak with smiling mask says "lol you are going to use twenty year + old technology to build modern websites lol maybe for a toy website good + luck w/ that lmao" + django, php, flask and rails say: "Yes." + lisp says: "no, sixty years old." +Who Will Win? On the left corner: the champions Angular and React, with + their respective Google and Facebook legions. + On the right corner: a lunatic in montana and his internet friends + "u guys should use hypermedia" +Despair.com poster with Roy Fielding's face. + "REST: You're doing it completely wrong." +"I'm going to create a RESTful API..." happy roy + "Using JSON..." distressed roy + "here are my API docs" angery laser eyes roy +diagram explaining difference between 'hydration' which has 4 long stages + and 'resumability' which is apparently one step. + or just use HTML in one tiny step (loading the html) +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? +HTML says "I feel bad for you". + JSON says "I don't think about you at all. +Roll Safe meme: Can't route client side if u don't know what client-side routing is. +yo no cap u don't even need that for web dev fr. hypermedia straight bussin. mf deadass simple fr + -- grug with broccoli hair +average "browsers should follow open standards" fan vs average IE11 enjoyer +How much water is in your body? Adult male 60%, adult female 55%, children 65%, infant 75%, React 100% +Gigachad: "I wonder how this works..." *clicks view source* "Oh, neat." +Friends? Free time? Happiness? Nope, says the JavaScript History API +Bell curve meme. Lower percentile: HTML + a backend. + Median: ONE BILLION COMPONENTS highest percentile: HTML + a backend +Disapproving Drake: web dev learning graph with a dozen branches. + Pleased Drake: Learn the basics - HTML and CSS +Bell curve meme. Low: HTML is fine. Median: we have to use react and + react router and graphql and redux and... high: htmx is fine +DB to JSON to HTML -- or you can just do DB to HTML... +Me: Why can't you just be normal? JavaScript: *screams* +You are using the term REST bad and you should feel bad -- zoidberg +Disapproving Drake: well reasoned, detailed and insightful content + explaining the strengths and weaknesses of htmx vs other perfectly valid + potential approaches to front end web development +htmx to backend dev: 'Look at me. You're fullstack now.' +front end devs thinkin' everyone is going to be using JavaScript on the + backend soon: htmx: +django is a monkey sitting on htmx's back and it's refusing something labeled + 'all that complicated js noise +me, an old java dev: "I never thought I would die fighting side by side + w/ dotnet developers" + "what about side by side w/ someone who also hates JS frameworks?" + "aye, I could do that" +still from an avengers movie? idk. javascript/node is thanos and java, ruby, + lisp, python and php are fighting it, also haskell is dr strange i think which + seems relevant
diff --git a/www/content/essays/hypermedia-driven-applications.md b/www/content/essays/hypermedia-driven-applications.md index 714fa2bb..707e427a 100644 --- a/www/content/essays/hypermedia-driven-applications.md +++ b/www/content/essays/hypermedia-driven-applications.md @@ -52,7 +52,7 @@ Consider the htmx [Active Search](@/examples/active-search.md) example:

Search Contacts - Searching... + Searching...

- +Django, alpine, bash, clojure, cobol, + deno, dotnet, go, java, node, ocaml, php, ruby, rust -- all active. You can see we have ongoing conversations in a bunch of different programming languages and frameworks: Java, Go, .NET, diff --git a/www/content/essays/lore.md b/www/content/essays/lore.md index c1e72269..0f44be83 100644 --- a/www/content/essays/lore.md +++ b/www/content/essays/lore.md @@ -13,7 +13,7 @@ tag = ["posts"] +++
-I lied. +I lied, I don't have a Twitter account. Take off your shoes, we're going to learn about hypermedia.
For better or [for worse](https://x.com/IroncladDev/status/1866185587616596356), htmx has collected a lot of lore, mainly around [the twitter account](https://twitter.com/htmx_org). diff --git a/www/content/essays/web-security-basics-with-htmx.md b/www/content/essays/web-security-basics-with-htmx.md index 5f797880..f89a523b 100644 --- a/www/content/essays/web-security-basics-with-htmx.md +++ b/www/content/essays/web-security-basics-with-htmx.md @@ -259,7 +259,7 @@ Unlike calling untrusted HTML routes, there are a lot of good reasons to let use What if, say, you want to let users link to an image? ```html - +{{ user.fav_img_alt }} ``` Or link to their personal website? @@ -272,7 +272,7 @@ The default "escape everything" approach escapes forward slashes, so it will bor You can fix this in a couple of ways. The simplest, and safest, trick is to let users customize these values, but don't let them define the literal text. In the image example, you might upload the image to your own server (or S3 bucket, or the like), generate the link yourself, and then include it, unescaped. In nunjucks, you use the [safe](https://mozilla.github.io/nunjucks/templating.html#safe) function: ```html - +{{ user.fav_img_alt }} ``` Yes, you're including unescaped content, but it's a link that you generated, so you know it's safe. diff --git a/www/content/essays/why-gumroad-didnt-choose-htmx.md b/www/content/essays/why-gumroad-didnt-choose-htmx.md index 48ecfa70..6894377c 100644 --- a/www/content/essays/why-gumroad-didnt-choose-htmx.md +++ b/www/content/essays/why-gumroad-didnt-choose-htmx.md @@ -22,7 +22,7 @@ could be a good solution to keep our front-end super light.
-Gumroad Red +GitHub screenshot shows deleted files
Source with htmx - Click Image To View
@@ -71,7 +71,7 @@ Here's why:
-Gumroad Green +GitHub: 1 added file
Source with Next.js - Click Image To View
@@ -82,7 +82,9 @@ experiences, and leverage a wealth of existing tools and libraries.
-Gumroad Helper Before After +The old Gumroad Helper interface is quite basic with a single flat form, + while the new one has multiple levels of navigation and editable lists.
Gumroad Helper Before & After - Click Image To View
diff --git a/www/content/examples/active-search.md b/www/content/examples/active-search.md index df72a464..c687e42c 100644 --- a/www/content/examples/active-search.md +++ b/www/content/examples/active-search.md @@ -11,7 +11,7 @@ We start with a search input and an empty table:

Search Contacts - Searching... + Searching...

Search Contacts - Searching... + Searching... diff --git a/www/content/examples/click-to-load.md b/www/content/examples/click-to-load.md index 26a89e23..f524abbe 100644 --- a/www/content/examples/click-to-load.md +++ b/www/content/examples/click-to-load.md @@ -12,7 +12,7 @@ the final row: @@ -85,7 +85,7 @@ results (which will contain a button to load the *next* page of results). And s diff --git a/www/content/examples/infinite-scroll.md b/www/content/examples/infinite-scroll.md index 83d12e94..14b22961 100644 --- a/www/content/examples/infinite-scroll.md +++ b/www/content/examples/infinite-scroll.md @@ -68,7 +68,7 @@ The last element of the results will itself contain the listener to load the *ne function tableTemplate(contacts) { return ` ${rowsTemplate(1, contacts)} -
NameEmailID
` +
Loading...
` } function rowsTemplate(page, contacts) { @@ -87,6 +87,3 @@ The last element of the results will itself contain the listener to load the *ne return txt; } - - - diff --git a/www/content/examples/inline-validation.md b/www/content/examples/inline-validation.md index bb59123d..b99befa4 100644 --- a/www/content/examples/inline-validation.md +++ b/www/content/examples/inline-validation.md @@ -15,7 +15,7 @@ We start with this form:
- + Checking...
@@ -39,7 +39,7 @@ When a request occurs, it will return a partial to replace the outer div. It mi
- + Checking...
That email is already taken. Please enter another email.
``` @@ -115,7 +115,7 @@ Below is a working demo of this example. The only email that will be accepted i
- + Checking...
@@ -133,7 +133,7 @@ Below is a working demo of this example. The only email that will be accepted i return `
- + Checking... ${errorMsg ? (`
${errorMsg}
`) : ""}
`; } diff --git a/www/content/examples/value-select.md b/www/content/examples/value-select.md index b77b72be..9a405ee7 100644 --- a/www/content/examples/value-select.md +++ b/www/content/examples/value-select.md @@ -25,7 +25,7 @@ Here is the code: ... - + Saving...
``` @@ -76,7 +76,7 @@ And they become available in the `model` select. - + Saving...
`; } diff --git a/www/content/webring.md b/www/content/webring.md index 606215b3..476ba867 100644 --- a/www/content/webring.md +++ b/www/content/webring.md @@ -25,13 +25,13 @@ title = "htmx webring" @@ -81,7 +81,7 @@ title = "htmx webring" transition the #webring's opacity to 100% hide me then show #show-sites">Return To Webring] - Back To Page 1

Image should be displayed below

- +Image diff --git a/www/static/test/manual/no-indicator-css.html b/www/static/test/manual/no-indicator-css.html index 0ce4e9fc..f9db6181 100644 --- a/www/static/test/manual/no-indicator-css.html +++ b/www/static/test/manual/no-indicator-css.html @@ -11,6 +11,6 @@ We are overriding the normal CSS inclusion with the meta directive {"includeIndicatorStyles":false} so you should see the indicator because it is not being hidden by the default classes.

- + Loading... diff --git a/www/static/test/manual/yes-indicator-css.html b/www/static/test/manual/yes-indicator-css.html index fc2e02a1..0ea2c2a3 100644 --- a/www/static/test/manual/yes-indicator-css.html +++ b/www/static/test/manual/yes-indicator-css.html @@ -6,6 +6,6 @@

You should not see bars here:

- + Loading...