← max bo

HTML in Hyde

HTML in Hyde is a HTML Freewrite - [an event] in which people get together and write HTML documents. This one is in a park (like the Ontario based HTML in the Park)!

Where?

North-East the Anzac Memorial in Hyde Park, Sydney.

Past events

HTML in Hyde #0

Invitation
Overview / resources / inspiration
Gallery (projects and photos)

# Why?

Ask a mid-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.

# Resources

# 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:

And here's some Are.na channels I really like too. HTML in Hyde recommended inspo channels:

# for complete beginners

Getting started with the web - MDN
This will guide you through installing basic software, HTML basics, CSS basics, and hosting.

Neocities
Geocities reincarnated. Very basic web hosting. 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 (😔)
Canva Websites
I spose?

# for those who edited a Tumblr theme once

Glitch
A more "modern" browser-based service for website building. It's got extra bells and whistles like a proper page preview and auto-refresh, so it might be better for someone who finds Neocities too spartan.

# for nerds

GitHub Pages
GitHub Pages lets you host static websites directly from a canonical 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.
I used Val Town to power the RSVP form, with the code hosted here: val.town/v/mbo/htmlinhydeRSVPs. You can even return dynamic HTML from a val!
htmx or htmz
Both 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 2, only offering swapping.
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 and htmz so it's designed to pair well with them too.
matcha.css
match.css aesthetically is... an acquired taste. But it's a fantastic demonstration of pushing styling of semantic HTML to the absolute limit.
So before creating a new CSS class, think about whether the composition of styled semantic HTML elements could achieve the same effect.
HTML custom elements
React? No need. Use these instead. They're built into the browser.
Also good for avoiding CSS Classes.
htl
Heavier than HTML custom elements, but lighter than React. Just enough for some light JSON to DOM transformation.
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.
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.