HTML in Hyde

# Why?

Ask a late-20s software engineer "why did you start coding?" - a non-trivial number will say "I was trying to make my Tumblr look cool".
If they're a bit older, they might say Myspace. Older still, Geocities.
I feel like that there's a latent nostalgia for an earlier internet, where people had their own little space that they could express themselves creatively.
Thus, HTML in Hyde is an attempt to, in the words of HTML Energy, show people that the web is still alive [and] to actively make the web more human and handmade..
I am fascinated by online Minecraft communites. A record of their in-game "physical" activities are permanently encoded into a map_<#>.dat, and 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).
I think HTML is a good hypertext format. I think people should be able to write semantic HTML fluently and do so frequently over lesser formats. I celebrate the efforts of hypertext practioners to document and advance the platform.

# Resources

# for complete beginners

The Basics of HTML by Laurel Schwulst, along with Very Interactive Tutorials, also by Laurel
HTML in the Park's HTML Cookbook
Our friends in Ontario have kindly compiled this.
Getting started with the web - MDN
This will guide you through installing basic software, HTML basics, CSS basics, and hosting.
Glitch
A modern browser-based service for website building. It's got extra bells and whistles like a proper page, auto-refresh, and multi-user collaboration. Recommended hosting option
bye glitch. fuckin spewin, Glitch was really really good. some replacements may emerge, fingers crossed.
CodePen
CodePen is an online code editor and community for bundling HTML, CSS and JavaScript together in "pens" and sharing them with others. Recommended hosting option
mmm.page
While I personally really like mmm.page, it's not entirely in the spirit of the event to use it. But it's great for building a fun site really quick. So... use this if you need to leave early, or if you really don't want to touch HTML (😔)

# for those who edited a Tumblr theme once

Neocities
Geocities reincarnated. Very basic web hosting. Might be too spartan for absoute beginners when compared to CodePen.
PetraPixel's [CSS] Positioning Tutorial
A Modern CSS Reset
CSS Layout Generator
1 Line Layouts

# for nerds

There's a lot of cool stuff going on in the pure HTML space!

Hosting

GitHub Pages
GitHub Pages lets you host static websites directly from a canonical 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.
Val Town

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 (!).
I used Val Town to power the RSVP forms, with the code hosted at val.town/v/mbo/htmlinhydeRSVPs and https://www.val.town/v/mbo/html_in_hyde_1.

HTML extensions

htmx, htmz, or fixi
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 controls
All 3 of these make it much easier to sprinkle in interactivity to a static HTML page.
They both offer the same primitive, swapping, where a HTML response replaces an existing page element.
Swapping can get you pretty far, and pairs well with val.town HTML responses.
NB: htmz is by far the simplest of the 3, only offering swapping.
playhtml (and on GitHub)
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!
🛋

playhtml wraps PartyKit which might be a better option if playhtml is insufficient.
HTML custom elements

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.
Also good for avoiding CSS Classes.
Blinded by the Light DOM
But Web Components are shit if you use the Shadow DOM but they're good if you use the standard DOM (the Light DOM). Eric Meyer explains in detail.
facet

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

Stampino is a fast and flexible HTML template system, where you write dynamic templates using real HTML <template> tags.
I thought it might be worth mentioning about how to do HTML includes using an <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?

JavaScript stuff

Inline rendering with 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 the document.currentScript property, we can refer to the currently running <script> element directly and go from there.
esm.sh, Skypack, UNPKG
Remember when I said NO BUNDLERS ALLOWED in the invitation?
Well you might need some way of importing JS libraries, right?
With the services linked above, you can import libraries directly from a CDN, in a module script, using 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>
```
I use this a lot in Can we build a reactive article in a single HTML file? if you'd like more examples.
Note that some JavaScript frameworks have paved roads for using them directly from a CDN:
@celine/celine
A microlibrary for building reactive HTML notebooks - by me (o˘◡˘o)
htl
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.

CSS extensions

surreal
Just a super odd jQuery alternative. It gives you a me() selector that allows you to cram script elements inline into other HTML elements, for maxiumum Locality of Behaviour (how cool!)
It's ideologically cut from the same cloth as htmx, htmz and fixi so it's designed to pair well with them too.
css-scope-inline

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).

Weird libraries

Cascade
Cascade is a live-coding environment that turns CSS rules into sound.
tracery
Tracery: a story-grammar generation library for javascript
I've vendored this at 1/projects/ruby-explorations/tracery.js
A-Frame

Make 3D worlds with HTML and Entity-Component
On any headset, mobile and desktop
A-Frame can be developed from a plain HTML file without having to install anything
```
<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>
```

Other stuff

Did you know you can use Chrome as an IDE? And that you can save changes you make in DevTools back to source files? All you have to do is set up a workspace by defining a workspace location.
Plain Vanilla
This is a good summary of everything I've listed so far on a nice structured site, plus some cool stuff about hash-based routing that I don't think I've covered so far.
Examples of Great URL Design
Handwriting your RSS feed
A short guide for updating your RSS feed like you update your handmade website.

# for inspiration

Fortunately, there's a growing community of people who share this nostalgia.
Diagram Website - An internet map has attempted to paint a picture of this community (which is, unsurprisingly, quite decentralized).

Here's a subset of said map that may serve as decent inspiration:

Here's some more links of some stuff I think is cool: HTML in Hyde inspo sites:

I've also compiled an Are.na channel of additional inspiration: HTML in Hyde inspo channels:

Finally, web magazines are a great source of high quality curation: outsider web magazines: