ππ HTML in Hyde #1 (βοΈ HTML Day 2025 / )
π³π§Ί HTML in Hyde #0 ()
Overview / resources / inspiration
β Gallery (projects and photos)
HTML in Hyde is a semi-regular HTML Freewrite - [an event] in which people get
together and write HTML documents
.
This one is typically held in Hyde Park, Sydney, Australia.
None planned yet! Last updated August 2nd 2025
Please email me if you'd like to host HTML in Hyde in the future.
show people that the web is still alive [and] to actively make the web more human and handmade..
map_<#>.dat, as well as textual communications into chat .log files.
These communities, such as 2b2t, develop rich histories and cultures around digital places.
I would like to build an online community tied to a physical place, such that the community's activities straddle the physical place (the park itself) and its digital place (its website).
username/username.github.io repo,
or any other project repo. For example, my MaxwellBo/maxwellbo.github.io repo maps to maxbo.me, while MaxwellBo/cursors
maps to maxbo.me/cursors.
If GitHub Gists could run. And AWS Lambda was fun. Val Town is a social website to write and deploy TypeScript. Build APIs and schedule functions from your browser.Val Town goes crazy. You can trivially server-side render dynamic HTML hydrated from the built in SQLite DB or blob store. It has an inbuilt OpenAI API client. It makes dealing with CORS from other sites and configuring your own easy. It supports HTTP Streaming and Server-Sent Events out-of-the-box (!).
document.currentScript
For quick and dirty rendering of simple dynamic content, you may not need the complexity of a templating language like Handlebars or a PHP backend. [...] You can write this directly in HTMLβwithout IDs, classes, or querySelectors in your JS! Thanks to thedocument.currentScriptproperty, we can refer to the currently running<script>element directly and go from there.
htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript.
htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML.
fixi.js is an experimental, minimalist implementation of generalized hypermedia controlsAll 3 of these make it much easier to sprinkle in interactivity to a static HTML page.
playhtml is an open-source library for designing communal internet experiences by enhancing web elements with real-time, collaborative interactivity.This goes crazy. You can just add import a script and add an attribute like
can-move to any element:
<script
type="module"
src="https://unpkg.com/playhtml@latest/dist/init.es.js">
</script>
<div id="couch" can-move style="font-size: 80px">π</div>
and you can click and drag it around and it will get synced!
me() selector that allows you to cram
script elements inline into other HTML elements, for maxiumum Locality of Behaviour (how cool!) Scope your inline style tags in pure vanilla CSS! Only 16 lines. No build. No dependencies.Built by the same guy as surreal, so they have similar APIs (see
me selector).
web components [give you] the ability to create custom elements: that is, HTML elements whose behavior is defined by the web developer, that extend the set of elements available in the browser.React? No need. Use these instead. They're built into the browser.
the Light DOM). Eric Meyer explains in detail.
A tagged template literal that allows safe interpolation of values into HTML, following the HTML5 spec.Heavier than HTML custom elements, but lighter than React. Just enough for some light JSON to DOM transformation.
Facet is a single-file web library that allows for the easy, declarative definition of web components. By making use of <template> elements with special attributes, Facet makes it possible to define useful and effective web components with no Javascript boilerplate, so you can focus entirely on the structure and behavior of your component.
Stampino is a fast and flexible HTML template system, where you write dynamic templates using real HTML <template> tags.
import
syntax. As an example:
<script type="module">
import confetti from "https://esm.sh/[email protected]"
window.confetti = () => confetti.create(document.getElementById('confetti'))()
</script>
<button onclick="confetti()">π</button>
<canvas id="confetti" style="border: 1px solid #006400;"></canvas>
<iframe>:
<iframe
src="/target.html"
onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()">
</iframe>
I found this at
HTML Includes That Work Today
via Seeking an Answer: Why can't HTML alone do includes?
Make 3D worlds with HTML and Entity-ComponentA-Frame can be developed from a plain HTML file without having to install anything
On any headset, mobile and desktop
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<a-scene embedded style="min-height: 300px">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Tracery: a story-grammar generation library for javascriptI've vendored this at 1/projects/ruby-explorations/tracery.js
A short guide for updating your RSS feed like you update your handmade website.