add mu-js to the alternatives page

Author: 1cg

www/content/essays/alternatives.md

@@ -13,7 +13,7 @@ tag = ["posts"]
 +++
 
 [htmx](/) is only one of many different libraries & frameworks that take the
-[hypermedia oriented](@/essays/hypermedia-driven-applications.md) approach to building web applications.  I have
+[hypermedia oriented](@/essays/hypermedia-driven-applications.md) approach to building web applications. I have
 said before that I think the [ideas of htmx](/essays) / [hypermedia](https://hypermedia.systems) are more important than
 htmx as an implementation.
 
@@ -22,8 +22,9 @@ Here are some of my favorite other takes on these ideas that I think are worth y
 ## Unpoly
 
 [Unpoly](https://unpoly.com/) is a wonderful, mature front end framework that has been used heavily (especially in the
-ruby community) for over a decade now.  It offers best-in-class [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)
-and has many useful concepts such as [layers](https://unpoly.com/up.layer) and sophisticated 
+ruby community) for over a decade now. It offers
+best-in-class [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)
+and has many useful concepts such as [layers](https://unpoly.com/up.layer) and sophisticated
 [form validation](https://unpoly.com/validation).
 
 I interviewed the author, Henning Koch, [here](@/essays/interviews/henning_koch.md)
@@ -32,14 +33,14 @@ You can see a demo application using Unpoly [here](https://demo.unpoly.com/).
 
 ## Triptych
 
-[Triptych](https://github.com/alexpetros/triptych) is a set of [three proposals](https://alexanderpetros.com/triptych/) 
+[Triptych](https://github.com/alexpetros/triptych) is a set of [three proposals](https://alexanderpetros.com/triptych/)
 to bring more generalized hypermedia controls directly into the HTML specification:
 
 * Allow more [HTTP Methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) to be used directly from HTML
 * Allow buttons to act as stand-alone hypermedia controls
 * Allow hypermedia controls to target any element on the page for replacement
 
-It is [in the process](https://github.com/whatwg/html/issues/3577#issuecomment-2294931398) of being introduced to the 
+It is [in the process](https://github.com/whatwg/html/issues/3577#issuecomment-2294931398) of being introduced to the
 [WHATWG](https://whatwg.org/) for inclusion in the HTML specification.
 
 The project includes a [polyfill](https://github.com/alexpetros/triptych/blob/main/triptych.js) that can be used today
@@ -49,7 +50,7 @@ to implement applications using the proposal today.
 
 [fixi.js](https://github.com/bigskysoftware/fixi) is a minimalist implementation of
 [generalized hypermedia controls](https://dl.acm.org/doi/fullHtml/10.1145/3648188.3675127) by the htmx team, focusing
-on being as small as possible and [omitting](https://github.com/bigskysoftware/fixi#minimalism) many of the features 
+on being as small as possible and [omitting](https://github.com/bigskysoftware/fixi#minimalism) many of the features
 found in htmx.
 
 It is intended to be as small as possible (~3.5k unminified & uncompressed, ~1.3k compressed) while still being readable
@@ -58,79 +59,96 @@ and debuggable, so it can be included in a project directly without requiring an
 ## Datastar
 
 [Datastar](https://data-star.dev/) started life as a proposed rewrite of htmx in typescript and with modern
-tooling.  It eventually became its own project and takes an [SSE-oriented](https://data-star.dev/guide/getting_started#backend-setup)
-approach to hypermedia.  
+tooling. It eventually became its own project and takes
+an [SSE-oriented](https://data-star.dev/guide/getting_started#backend-setup)
+approach to hypermedia.
 
-Datastar combines functionality found in both htmx and [Alpine.js](https://alpinejs.dev/) into 
-a single, tidy package that is smaller than htmx.  
+Datastar combines functionality found in both htmx and [Alpine.js](https://alpinejs.dev/) into
+a single, tidy package that is smaller than htmx.
 
 You can see many examples of Datastar in action [here](https://data-star.dev/examples).
 
 ## Nomini
 
-[Nomini](https://github.com/nonnorm/nomini) is a hypermedia implementation that embraces writing JavaScript in the original and intended way, as a simple enhancement to mostly-static pages. Its goal is to add a minimal layer of LoB on top of HTML to allow for powerful server-driven web apps with easily implemented client-side features. Additionally, it is currently the smallest library existing that gives both reactive variables and partial page swaps (~2.8k minified, ~1.4k minzipped).
+[Nomini](https://github.com/nonnorm/nomini) is a hypermedia implementation that embraces writing JavaScript in the
+original and intended way, as a simple enhancement to mostly-static pages. Its goal is to add a minimal layer of LoB on
+top of HTML to allow for powerful server-driven web apps with easily implemented client-side features. Additionally, it
+is currently the smallest library existing that gives both reactive variables and partial page swaps (~2.8k minified, ~
+1.4k minzipped).
 
-In essence, Nomini is a tiny reimplementation of Datastar or a combination of Fixi and Alpine.js, intended to be a minimal, pragmatic building block for reactive server-driven UIs.
+In essence, Nomini is a tiny reimplementation of Datastar or a combination of Fixi and Alpine.js, intended to be a
+minimal, pragmatic building block for reactive server-driven UIs.
+
+## µJS
+
+[µJS](https://mujs.org/) is a small (~5k) dependency-free library that implements many hypermedia ideas and includes 
+pre-fetching, SSE, idiomorph-based morphing and many other [great features](https://mujs.org/documentation).
 
-## Alpine-ajax
 
-Speaking of Alpine (which is a common library to use in conjunction with htmx) you should look at 
-[Alpine AJAX](https://alpine-ajax.js.org/), an Alpine plugin which integrates htmx-like concepts directly into Alpine.
+## Alpine-ajax
 
-If you are already an Alpine enthusiast, Alpine AJAX allows you to stay in that world.
+If you are a fan of [Alpine](https://alpinejs.dev/) (which is a common library to use in conjunction with htmx) you 
+should also look at [Alpine AJAX](https://alpine-ajax.js.org/), an Alpine plugin which integrates htmx-like concepts 
+directly into Alpine.
 
 You can see many examples of Alpine AJAX in action [here](https://alpine-ajax.js.org/examples/).
 
 ## Hotwire Turbo
 
 [Turbo](https://turbo.hotwired.dev/) is a component of the [Hotwire](https://hotwired.dev/) set of web development
-technologies by [37Signals](https://37signals.com/), of [Ruby on Rails](https://rubyonrails.org/) fame.  It is a polished
-front end framework that is used heavily in the rails community, but can be used with other backend technologies as well.
+technologies by [37Signals](https://37signals.com/), of [Ruby on Rails](https://rubyonrails.org/) fame. It is a polished
+front end framework that is used heavily in the rails community, but can be used with other backend technologies as
+well.
 
 Some people who have had a bad experience with htmx [have enjoyed turbo](https://news.ycombinator.com/item?id=42615663).
 
 ## htmz
 
 [htmz](https://leanrada.com/htmz/) is a brilliant, tiny library that takes advantage of the fact that anchors and forms
-already have a [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) attribute that can target 
+already have a [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) attribute that can target
 an `iframe`.
 
-This, in combination with the `location hash`, is used to allow [generalized transclusion](https://dl.acm.org/doi/fullHtml/10.1145/3648188.3675127#sec-7).
+This, in combination with the `location hash`, is used to
+allow [generalized transclusion](https://dl.acm.org/doi/fullHtml/10.1145/3648188.3675127#sec-7).
 
 This is the *entire* source of the library (I'm not joking):
 
 ```html
-  <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
+
+<iframe hidden name=htmz
+        onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
 ```
 
 Amazing!
 
 ## TwinSpark
 
-[TwinSpark](https://twinspark.js.org/) is a library created by [Alexander Solovyov](https://solovyov.net/) that is 
+[TwinSpark](https://twinspark.js.org/) is a library created by [Alexander Solovyov](https://solovyov.net/) that is
 similar to htmx, and includes features such as [morphing](https://twinspark.js.org/api/ts-swap/#morph).
 
 It is being [used in production](https://twinspark.js.org#who-is-using-this) on sites with 100k+ daily users.
 
 ## jQuery
 
-Finally, good ol' [jQuery](https://jquery.com/) has the the [`load()`](https://api.jquery.com/load/#load-url-data-complete)
-function that will load a given url into an element.  This method was part of the inspiration for 
+Finally, good ol' [jQuery](https://jquery.com/) has the the [
+`load()`](https://api.jquery.com/load/#load-url-data-complete)
+function that will load a given url into an element. This method was part of the inspiration for
 [intercooler.js](https://intercoolerjs.org), the precursor to htmx.
 
 It is very simple to use:
 
 ```javascript
-  $( "#result" ).load( "ajax/test.html" );
+  $("#result").load("ajax/test.html");
 ```
+
 and might be enough for your needs if you are already using jQuery.
 
 ## Conclusion
 
 I hope that if htmx isn't right for your application, one of these other libraries might be useful in allowing you to
-utilize the hypermedia model.  There is a lot of exciting stuff happening in the hypermedia world right now, and these
+utilize the hypermedia model. There is a lot of exciting stuff happening in the hypermedia world right now, and these
 libraries each contribute to that.
 
-Finally, if you have a moment, please give them (especially the newer ones) a star on Github: as an open source 
+Finally, if you have a moment, please give them (especially the newer ones) a star on Github: as an open source
 developer I know that Github stars are one of the best psychological boosts that help keep me going.