Carson Gross
-
An interview with Leonard Richardson
Leonard Richardson is a long time programmer and author and was the creator of what came to be termed the Richardson Maturity Model (https://en.wikipedia.org/wiki/Richardson_Maturity_Model), a system for classifying Web APIs in terms of their adherence to REST. Here, Web APIs mean data APIs, that is…
Published
-
An interview with Chris Wanstrath aka @defunkt, Creator of pjax
I’m very excited to be able to interview @defunkt, the author of pjax, an early hypermedia-oriented javascript library that served as an inspiration for intercooler.js, which later became htmx. He’s done a few other things too, like co-founding GitHub, but in this interview I want to focus on pjax, how…
Published
-
An interview with Makinde Adeagbo, Creator of Primer
I’m delighted to be able to interview Makinde Adeagbo, one of the creators of Primer, an hypermedia-oriented javascript library that was being used at Facebook in the 2000s. Thank you for agreeing to an interview! Q: To begin with, why don’t you give the readers a bit of your background both professionally…
Published
-
An interview with Mike Amundsen, Author of 'RESTful Web APIs'
Mike Amundsen is a computer programmer, author and speaker, and is one of the world leading experts on REST & hypermedia. He has been writing about REST and Hypermedia since 2008 and has published two books on the ideas: RESTful Web APIs Building Hypermedia APIs with HTML and Node Mike agreed to do an…
Published
-
Vendoring
“Vendoring” software is a technique where you copy the source of another project directly into your own project. It is an old technique that has been used for time immemorial in software development, but the term “vendoring” to describe it appears to have originated in the ruby community. Vendoring can…
Published
-
A Real World wasm to htmx Port
img, video { max-width: 100%; margin: 10px; } When I was in college, I wrote some customer service software that tied together some custom AI models I trained, the OpenAI API, a database, and some social media APIs to make the first version of Sidekick. Led astray Over the next couple years I worked…
Published
-
The future of htmx
In The Beginning… htmx began life as intercooler.js, a library built around jQuery that added behavior based on HTML attributes. For developers who are not familiar with it, jQuery is a venerable JavaScript library that made writing cross-platform JavaScript a lot easier during a time when browser implementations…
Published
-
htmx quirks
This is a “quirks” page, based on SQLite’s “Quirks, Caveats, and Gotchas In SQLite” page. Attribute Inheritance Many attributes in htmx are inherited: child elements can receive behavior from attributes located on parent elements. As an example, here are two htmx-powered buttons that inherit their target…
Published
-
htmx lore
For better or for worse, htmx has collected a lot of lore, mainly around the twitter account. Here are some explanations. It’s So Over/We’re So Back A common set of phrases used by htmx enthusiasts when, for example, @bunjavascript told me to delete my account htmx CEO At one point there was a hostile…
Published
-
Prefer If Statements To Polymorphism...
Or, Watching Myself Lose My Mind In Real Time… “Invert, always invert.” –Carl Jacobi, by way of Charlie Munger If Statements prefer if statements to polymorphism whenever you are tempted to create a class, ask yourself: “could this be an if statement instead?” The Closed/Closed Principle In grug-oriented…
Published
-
Codin' Dirty
“Writing clean code is what you must do in order to call yourself a professional. There is no reasonable excuse for doing anything less than your best.” Clean Code In this essay I want to talk about how I write code. I am going to call my approach “codin’ dirty” because I often go against the recommendations…
Published
-
Web Components Work Great with htmx
People interested in htmx often ask us about component libraries. React and other JavaScript frameworks have great ecosystems of pre-built components that can be imported into your project; htmx doesn’t really have anything similar. The first and most important thing to understand is that htmx doesn’t…
Published
-
Next.js to htmx — A Real World Example
Over 6 years ago, I created an open source URL shortener with Next.js and after years of working on it, I found Next.js to be much more of a burden than a help. Over the years, Next.js has changed, and so did my code so it can be compatible with those changes. My Next.js codebase grew bigger, and its…
Published
-
Why Gumroad Didn't Choose htmx
At Gumroad, we recently embarked on a new project called Helper. As the CEO, I was initially quite optimistic about using htmx for this project, even though some team members were less enthusiastic. My optimism stemmed from previous experiences with React, which often felt like overkill for our needs…
Published
-
You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths
img, video { max-width: 100%; margin: 10px; } An Ode to Browser Advancements. I often encounter discussions on Reddit and YCombinator where newer developers seek tech stack advice. Inevitably, someone claims it’s impossible to build a high-quality application without using a single-page application …
Published
-
htmx 2.0.0 has been released!
htmx 2.0.0 Release I’m very happy to announce the release of htmx 2.0. This release ends support for Internet Explorer and tightens up some defaults, but does not change most of the core functionality or the core API of the library. Note that we are not marking 2.0 as latest in NPM because we do not…
Published
-
htmx 2.0.0-beta4 has been released!
htmx 2.0.0-beta4 Release I’m happy to announce the fourth beta release of htmx 2.0 This is an beta release and should NOT be considered ready for production. We are releasing it to begin final testing against real world scenarios. If you are able to do so, please switch to the release and do a quick…
Published
-
htmx sucks
I have been following htmx for a while now. I thought it was a somewhat funny/cringey meme and that it served as some light comic relief from the real work being done in web development, things like React Server Components, Svelte Runes and Signals that are actually pushing the state of the art forward…
Published — Updated
-
htmx 2.0.0-beta1 has been released!
htmx 2.0.0-beta1 Release I’m happy to announce the first beta release of htmx 2.0 This is an beta release and should NOT be considered ready for production. We are releasing it to begin final testing against real world scenarios. If you are able to do so, please switch to the release and do a quick run…
Published
-
htmx 2.0.0-alpha2 has been released!
htmx 2.0.0-alpha2 Release I’m happy to announce the second alpha release of htmx 2.0 This is an alpha release and should NOT be considered ready for production. We are releasing it to begin testing the code against real world scenarios to figure out what is broken and what needs improvement. If you are…
Published
-
Web Security Basics (with htmx)
As htmx has gotten more popular, it’s reached communities who have never written server-generated HTML before. Dynamic HTML templating was, and still is, the standard way to use many popular web frameworks—like Rails, Django, and Spring—but it is a novel concept for those coming from Single-Page Application…
Published
-
htmx 2.0.0-alpha1 has been released!
htmx 2.0.0-alpha1 Release I’m happy to announce the first alpha release of htmx 2.0 This is an alpha release and should NOT be considered ready for production. We are releasing it to begin testing the code against real world scenarios to figure out what is broken and what needs improvement. If you are…
Published
-
Complexity Budget
Every software project involves managing a complexity budget. A complexity budget can be defined as: An explicit or implicit allocation of complexity across the entire application “Complexity” here is defined subjectively (rather than formally) and in Stewartian Terms: “I know it when I see it.” Or,…
Published — Updated
-
Model/View/Controller (MVC)
A common objection I see to using htmx and hypermedia is something along the lines of: The problem with returning HTML (and not JSON) from your server is that you’d probably also like to serve mobile apps and don’t want to duplicate your API I have already outlined in another essay that I think you should…
Published
-
Alternatives to htmx
htmx is only one of many different libraries & frameworks that take the hypermedia oriented approach to building web applications. I have said before that I think the ideas of htmx / hypermedia are more important than htmx as an implementation. Here are some of my favorite other takes on these ideas…
Published
-
Is htmx Just Another JavaScript Framework?
One of the most common criticisms of htmx, usually from people hearing about it for the first time, goes like this: You’re complaining about the complexity of modern frontend frameworks, but your solution is just another complex frontend framework. This is an excellent objection! It’s the right question…
Published
-
Why I Tend Not To Use Content Negotiation
I have written a lot about Hypermedia APIs vs. Data (JSON) APIs, including the differences between the two, what REST “really” means and why HATEOAS isn’t so bad as long as your API is interacting with a Hypermedia Client. Often when I am engaged in discussions with people coming from the “REST is JSON…
Published
-
Does Hypermedia Scale?
One objection that we sometimes hear to htmx and hypermedia is some variation of the following: Well, it might work well for something small, but it won’t scale. It is always dangerous to provoke us with essay-fodder and so lets dig into this claim a bit and see if we can shed some light on whether Hypermedia…
Published
-
htmx 1.9.7 has been released!
htmx 1.9.7 Release I’m happy to announce the 1.9.7 release of htmx. Improvements & Bug fixes Fixed a bug where a button associated with a form that is swapped out of the DOM caused errors The hx-target-error attribute was added to the response-targets extension, allowing you to capture all 400 & 500…
Published
-
htmx 1.9.6 has been released!
htmx 1.9.6 Release I’m happy to announce the 1.9.6 release of htmx. New Features IE support has been restored (thank you @telroshan!) Introduced the hx-disabled-elt attribute to allow specifying elements to disable during a request You can now explicitly decide to ignore title tags found in new content…
Published
-
The #ViewSource Affordance
Not for nothing, Hypercard presaged the web’s critical “#ViewSource” affordance, which allowed people to copy, modify, customize and improve on the things that they found delightful or useful. This affordance was later adapted by other human-centered projects like #Scratch, and is a powerful tonic against…
Published
-
Another Real World React -> htmx Port
The Mother of All htmx Demos you can see the real world results of a port from a React-based front end to an htmx-powered front end. The results are very good, although we qualify the experience with the following: These are eye-popping numbers, and they reflect the fact that the Contexte application…
Published
-
htmx 1.9.5 has been released!
htmx 1.9.5 Release I’m happy to announce the 1.9.5 release of htmx. New Features You can disable the interpretation of script tags with the new htmx.config.allowScriptTags config variable You can now disable htmx-based requests to non-origin hosts via the htmx.config.selfRequestsOnly config variable…
Published
-
Why htmx Does Not Have a Build Step
A recurring question from some htmx contributors is why htmx isn’t written in TypeScript, or, for that matter, why htmx lacks any build step at all. The full htmx source is a single 3,500-line JavaScript file; if you want to contribute to htmx, you do so by modifying the htmx.js file, the same file that…
Published
-
htmx 1.9.3 has been released!
htmx 1.9.3 Release I’m happy to announce the 1.9.3 release of htmx. New Features The hx-on attribute has been deprecated (sorry) in favor of hx-on: attributes. See hx-on for more information. You can now configure if a type of HTTP request uses the body for parameters or not. In particular, the DELETE…
Published
-
REST Copypasta
REST copy-pastas Ackshually… I’d just like to interject for a moment. What you’re referring to as REST, is in fact, JSON/RPC, or as I’ve recently taken to calling it, REST-less. JSON is not a hypermedia unto itself, but rather a plain data format made useful by out of band information as defined by swagger…
Published
-
10 Tips For Building SSR/HDA applications
Building web applications using traditional Server-Side Rendering (SSR) or, saying the same thing another way, building Hypermedia-Driven Applications (HDAs) requires a mindset shift when compared with building web applications with Single Page Application frameworks like React. If you come at this style…
Published — Updated
-
An interview with Henning Koch, Creator of Unpoly
I’m very excited to be able to interview Henning Koch, the creator of Unpoly, a hypermedia-oriented javascript library that was created in parallel with intercooler.js. Thank you for agreeing to an interview! Q: To begin with, why don’t you give the readers a bit of your background both professionally…
Published — Updated
-
htmx is part of the GitHub Accelerator!
We are excited to announce that htmx has been accepted into the first class of the GitHub Open Source Accelerator! This is a tremendous opportunity to work with and learn from some of the most successful open source developers and projects, and a great chance to get the message out about hypermedia and…
Published
-
Hypermedia On Whatever you'd Like
The one big remaining (advantage of MPAs) is (server side programming) language choice. If you’re already part of the anti-JavaScript resistance, then nothing I say in the rest of this talk is going to matter that much. But, I’m going to get into this later: that ship might have sailed… Rich Harris …
Published
-
View Transitions
We have asserted, for a while now, that a major reason that many people have adopted the SPA architecture for web applications is due to aesthetic considerations. As we mention in our book Hypermedia Systems, when discussing the Web 1.0-style contact management application we begin with, there are serious…
Published
-
htmx 1.9.0 has been released!
htmx 1.9.0 Release I’m happy to announce the 1.9.0 release of htmx. New Features Support for view transitions, based on the experimental View Transitions API currently available in Chrome 111+ and coming to other browsers soon. Support for “naked” hx-trigger attributes, where an hx-trigger is present…
Published
-
Architectural Sympathy
Mechanical Sympathy & Architectural Sympathy You don’t have to be an engineer to be a racing driver, but you do have to have Mechanical Sympathy. -Jackie Stewart, racing driver The term “mechanical sympathy” was originally coined by Jackie Stewart to capture a characteristic of race car drivers, who…
Published
-
Template Fragments
Template fragments are a relatively rare Server Side Rendering (SSR) template library feature that allow you to render a fragment or partial bit of the content within a template, rather than the entire template. This feature is very handy in Hypermedia Driven Applications because it allows you to decompose…
Published — Updated
-
htmx 1.8.6 has been released!
htmx 1.8.6 Release I’m happy to announce the 1.8.6 release of htmx. New Features ESM support (thank you @dkniffin!) Sass has been vanquished from the htmx.org website so python 2 (!!!) is no longer required for developing htmx (thank you @dz4k!) Improvements & Bug fixes Fixed a bug where the changed…
Published
-
When Should You Use Hypermedia?
The trade-off, though, is that a uniform interface degrades efficiency, since information is transferred in a standardized form rather than one which is specific to an application’s needs. The REST interface is designed to be efficient for large-grain hypermedia data transfer, optimizing for the common…
Published — Updated
-
Hypermedia Clients
Often, when we are being insufferably pedantic in online discussions about REST & HATEOAS, we will say something along the lines of this: JSON isn’t a hypermedia because it doesn’t have hypermedia controls. Look at this JSON: { "account": { "account_number": 12345, "balance": { "currency": "usd", "value…
Published — Updated
-
Locality of Behaviour (LoB)
“The primary feature for easy maintenance is locality: Locality is that characteristic of source code that enables a programmer to understand that source by looking at only a small portion of it.” – Richard Gabriel The LoB Principle Locality of Behaviour is the principle that: The behaviour of a unit…
Published — Updated
-
htmx 1.8.5 has been released!
htmx 1.8.5 Release I’m happy to announce the 1.8.5 release of htmx. New Features Support a new optional cache-busting configuration option, getCacheBusterParam, to allow browsers to disambiguate between GET requests from htmx and from the raw browser Support new hx-history='false' attribute, to prevent…
Published
-
Hypermedia-Friendly Scripting
The final addition to our constraint set for REST comes from the code-on-demand style of Section 3.5.3 (Figure 5-8). REST allows client functionality to be extended by downloading and executing code in the form of applets or scripts. This simplifies clients by reducing the number of features required…
Published — Updated
-
How Did REST Come To Mean The Opposite of REST?
pre { margin: 32px !important; } Tapping The Sign I am getting frustrated by the number of people calling any HTTP-based interface a REST API. Today’s example is the SocialSite REST API. That is RPC. It screams RPC. There is so much coupling on display that it should be given an X rating. What needs…
Published — Updated
-
htmx 1.8.3 has been released!
htmx 1.8.3 Release I’m happy to announce the 1.8.3 release of htmx. New Features A new htmx:confirm event was added that allows for asynchronous confirmation dialogs to be integrated into htmx requests The new head-support extension allows for more elaborate head tag merging than standard htmx supports…
Published
-
Hypermedia-Driven Applications
Genesis thesis: MPA - multi-page application antithesis: SPA - single-page application synthesis: HDA - hypermedia-driven application --@htmx_org The Hypermedia-Driven Application Architecture The Hypermedia Driven Application (HDA) architecture is a new/old approach to building web applications. It…
Published — Updated
-
A Real World React -> htmx Port
It is all well and good talking about REST & HATEOAS in theory or describing the Hypermedia-Driven Application architecture, but, at the end of the day, what matters in software is practical: Does it work? Does it improve things? We can say for sure that htmx works, since we use it in our own software…
Published — Updated
-
htmx 1.8.1 has been released!
htmx 1.8.1 Release I’m happy to announce the 1.8.1 release of htmx. New Features We now keep a count of outstanding requests for an indicator, so more than one overlapping request can share the same indicator without issues We now track the attribute state of an element and re-initialize it if htmx.process…
Published
-
htmx 1.8.0 has been released!
htmx 1.8.0 Release I’m happy to announce the 1.8.0 release of htmx. NOTE: This was a big release with some changes to very touchy code that is hard to test (e.g. history support) so please test thoroughly and let us know if there are any issues. New Features The hx-replace-url attribute was introduced…
Published
-
A Response To "Have Single-Page Apps Ruined the Web?"
Rich Harris is a well-known web developer who works on Svelte.js, a novel Single-Page Application (SPA) framework. In October of 2021 he gave a talk at JamStack entitled “Have Single-Page Apps Ruined the Web?”. We have been asked for our opinion on the talk, so this essay is our response. The first thing…
Published — Updated
-
Two Approaches To Decoupling
The central feature that distinguishes the REST architectural style from other network-based styles is its emphasis on a uniform interface between components. By applying the software engineering principle of generality to the component interface, the overall system architecture is simplified and the…
Published
-
Hypermedia APIs vs. Data APIs
A hypermedia API is an API that returns hypermedia, typically HTML over HTTP. This style of API is distinguished from data APIs that do not return a hypermedia. The most familiar form of this latter style of API today is the ubiquitous JSON API. These two different types of API have distinctly different…
Published — Updated
-
htmx 1.7.0 has been released!
htmx 1.7.0 Release I’m happy to announce the 1.7.0 release of htmx. New Features The new hx-sync attribute allows you to synchronize multiple element requests on a single element using various strategies (e.g. replace) You can also now abort an element making a request by sending it the htmx:abort event…
Published
-
HATEOAS
HATEOAS Preface: HATEOAS — An Alternative Explanation This page is a reworking on the Wikipedia Entry on HATEOAS, which uses JSON. Here we use HTML to explain the concept, and contrast it with JSON APIs. It is a more opinionated explanation of the concept than would be appropriate for Wikipedia, but…
Published — Updated
-
Splitting Your Data & Application APIs: Going Further
TLDR: If you split your API into Data and Application APIs, as advocated here, you should consider changing your Application API from JSON to Hypermedia (HTML) & using a hypermedia-oriented library like htmx to reap the benefits of the hypermedia model (simplicity, reliability, flexibility, etc.) The…
Published — Updated
-
REST - Explained For Beginners
There is no topic that generates more confusion in web development than the idea of Representational State Transfer, known as REST. This term comes from Chapter 5 of Roy Fielding’s PhD thesis at U.C. Irvine. In this essay we will go through this Chapter and summarize the important concepts for non-academic…
Published — Updated
-
SPA Alternative
Recently Tom MacWright has written a few posts on Single Page Applications and their discontents: Second-guessing the modern web If not SPAs, What? The emerging norm for web development is to build a React single-page application, with server rendering. The two key elements of this architecture are something…
Published — Updated
-
htmx 1.6.1 has been released!
htmx 1.6.1 Release I’m happy to announce the 1.6.1 release of htmx. New Features A new HX-Retarget header allows you to change the default target of returned content The htmx:beforeSwap event now includes another configurable property: detail.isError which can be used to indicate if a given response…
Published
-
htmx 1.6.0 has been released!
htmx 1.6.0 Release I’m happy to announce the 1.6.0 release of htmx. New Features & Major Changes Completely reworked tag support that now supports the form You can now use the value unset to clear a property that would normally be inherited (e.g. hx-confirm) The htmx-added class is added to new content…
Published
-
htmx 1.5.0 has been released!
htmx 1.5.0 Release I’m happy to announce the 1.5.0 release of htmx. New Features & Major Changes Support tracking of button clicked during a form submission Added the hx-request attribute, allowing you to configure the following aspects of the request timeout - the timeout of the request credentials…
Published
-
htmx 1.4.0 has been released!
htmx 1.4.0 Release I’m happy to announce the 1.4.0 release of htmx. New Features & Major Changes Added the queue option to the hx-trigger attribute, allowing you to specify how events should be queued when they are received with a request in flight The htmx.config.useTemplateFragments option was added…
Published
-
htmx 1.3.0 has been released!
htmx 1.3.0 Release I’m happy to announce the 1.3.0 release of htmx. New Features & Major Changes Support a target modifier on hx-trigger to filter based on the element targeted by an event. This allows lazy binding to that target selector. Events are no longer consumed by the first element that might…
Published
-
htmx 1.2.0 has been released!
htmx 1.2.0 Release I’m happy to announce the 1.2.0 release of htmx. New Features & Major Changes hx-vars has been deprecated in favor of hx-vals hx-vals now supports a javascript: prefix to achieve the behavior that hx-vars provided The new hx-headers attribute allows you to add headers to a request…
Published
-
htmx 1.1.0 has been released!
htmx 1.1.0 Release I’m happy to announce the 1.1.0 release of htmx. This is a surprisingly big release, but the star of the show isn’t htmx itself, but rather the new preload extension which allows you to preload requests into the cache, cutting down on latency. (This extension is used in the htmx website…
Published
-
htmx 1.0.0 has been released!
htmx 1.0.0 Release I’m happy to announce the 1.0.0 release of htmx. htmx is now mature enough that I can recommend it as a general replacement for intercooler.js projects. I don’t think there is a strong reason to port an existing intercooler project to htmx. I have several large intercooler apps and…
Published
-
htmx 0.4.0 has been released!
htmx 0.4.0 Release I’m pleased to announce the 0.4 release of htmx. Changes New Features Now support the HX-Redirect and HX-Refresh response headers for redirecting client side and triggering a page refresh, respectively hx-vars now overrides input values tags in responses will be used to update page…
Published
-
htmx 0.3.0 has been released!
htmx 0.3.0 Release I’m pleased to announce the 0.3 release of htmx. Due to a big testing push I’m happy to say that htmx now has 98.4% test coverage. That said, this release involves some major surgery on trigger parsing, in particular, so please try it out and let me know if you see anything funny.…
Published
-
htmx 0.2.0 has been released!
htmx 0.2.0 Release I’m pleased to announce the 0.2 release of htmx Changes New Features AJAX file upload is now supported The HTML validation API is now respected Bug Fixes A selected element no longer breaks response processing in some rare cases HTMX-related classes (e.g. .htmx-request) are stripped…
Published
-
htmx 0.1.2 has been released!
htmx 0.1.2 Release I’m pleased to announce the 0.1.2 release of htmx as well as the first non-alpha hyperscript release 0.0.2 hyperscript. Changes Breaking Changes The SSE attribute hx-sse and the Web Sockets attribute hx-ws have changed syntax to now use colon separators: hx-sse='connect:/chat swap:message…
Published
-
htmx 0.0.7 has been released!
htmx 0.0.7 Release I’m pleased to announce the 0.0.7 release of htmx. Changes Breaking Changes All events fired by htmx have changed name, from .htmx (the old jQuery style) to htmx: New Features The hx-swap attribute now supports two new modifiers: scroll - allows you to scroll the target to the top…
Published
-
htmx 0.0.8 has been released!
htmx 0.0.8 Release I’m pleased to announce the 0.0.8 release of htmx. Changes Breaking Changes The view modifier on hx-swap has been renamed to show: hx-swap='innerHTML show:top' New Features A bug fix on history when using local anchors: ... A bug fix for the aforementioned show functionality Enjoy…
Published
-
htmx 0.0.6 has been released!
htmx 0.0.6 Release I’m pleased to announce the 0.0.6 release of htmx. Changes _hyperscript With this release comes the release of a new sibling project: https://hyperscript.org hyperscript is a scripting language designed to be embedded directly in HTML and inspired by HyperTalk, the programming language…
Published
-
htmx 0.0.4 has been released!
htmx 0.0.4 Release I’m pleased to announce the 0.0.4 release of htmx, this time with no project renaming. Changes This one had a lot of code clean up along with two major features: Extensions First off, htmx now has a proper extensions mechanism, allowing us to create extensions that plug in to the htmx…
Published
-
kutty, er, htmx 0.0.3 has been released!
htmx 0.0.3 Release I’m pleased to announce the 0.0.3 release of kutty, er, htmx, the successor to intercooler.js! Why not kutty 0.0.2? One of the reasons you put a 0.0.1 release out there is to see what happens. And one of the things that happened was that multiple people made comments on how the word…
Published
-
kutty 0.0.1 has been released!
Kutty 0.0.1 Release I’m pleased to announce the 0.0.1 release of kutty, the successor to intercooler.js! Like intercooler, kutty brings features of modern browsers that normally require javascript (AJAX, CSS transitions, etc.) directly into HTML. Why the rename? I chose to rename the project for a few…
Published