A touch of hyperscript
I use hyperscript to add interaction to a web page
Created:
With the advent of modern Single Page Application Frameworks like
React, it almost seems like people have forgotten that you don’t need to
start with npm i and a package.json to add
some interactivity to the web applications; which are often just a
collection of web pages.
The fine folks at Hypermedia.Systems are trying to reawaken the spirit of “Hypermedia” that made the web possible and exicting in the first place - I definitely recommend you read that book, I did. One of the associated Hypermedia technologies is hyperscript.
Hyperscript enhances HTML with concise DOM, event and async
features. Make writing interactive HTML a joy.* A joy that I had
forgotten.
jquery was pathbreaking in this regard, but jquery expected you to write “javacript”. hyperscript on the other hand allows you think in terms of widgets, and elements on the page and interaction between them triggered by events (eg: click).
I wanted a simple page enhancement that you can see here on the archive page; to be able to hide different kinds of pages on this site – blog posts, log(weblog), and notebooks.
The idea is simple. Click on the checkbox labeled “log” to show/hide “log” entries. simple as.
This is the entire code to make that happen using hyperscript:
<input type="checkbox" _="on click toggle .hide on .kind-post"> Posts
(removed extra attributes for readability)and paragraph(p) elements have classes on them like:
<p class=kind-log>blah...</p>
<p class=kind-notebook>foo...</p>
<p class=kind-post>bar...</p>The .hide behaviour is controlled by CSS (provided by basscss)
.hide{
position:absolute !important;
height:1px;
width:1px;
overflow:hidden;
clip:rect(1px, 1px, 1px, 1px);
}Again, no heavy frameworks. Just include a single javascript file:
<script src="/js/_hyperscript.min.js"></script>I’m looking forward to explore more dynamic client-server web applications using htmx and hyperscript (and possibly hyperview when building mobile-first applications).