This is still the header! Main site

HTML in HTML Extreme Edition

2020/11/21

Inspired by John Ankarström's article, Writing HTML in HTML , I ended up "downgrading" my site from using Hugo the static generator to just writing pages by hand. The idea is that if you're writing plain HTML, your site is always viewable a reload away, and you can implement anything that you can express with HTML and CSS (... vs with any kind of generator, static or not, you first need to think of the actual HTML & CSS, and then persuade your software to get it through. Most of the time, you'll conclude that it's not worth it.)

(It's worth reading John's article; it's a lot more persuasive than I am.)

This ended up working reasonably well for me. For example, my article about IndieAuth has some fancy colored dialog in it, with colored, rounded frames. They started out being <pre> blocks, and were being improved upon gradually by just adding an inline stylesheet, largely keeping the HTML non-ugly. (As in: not a lot uglier than it normally is.)

You can add code blocks (there are excellent JS code colorizers out there). You can drop in a math formula engine. It helps creativity a lot of you don't have to get through extra layers.

Editor support is not that hard either. John Ankarström is using Seamonkey's editor; I'm generally a "let's do everything in Emacs" person though, but it doesn't really take a lot if your editor is extensible enough:

That's it. You can just type in everything else (... including the <ul> tags for the list above); with a key bound to "close current tag", it's not as painful as one might imagine.

Together with having mounted the actual web server on NFS, I was hoping that this would result in zero-effort addition of articles. However... it didn't quite yet happen. My guess for reasons: images and index pages .

First of all, adding images to a post is hugely annoying. First of all, you need to get the actual photo to your computer. Then, you generate thumbnails. Yes, it's a plural: you need one for the inline image, which, when clicked, shows a higher-resolution version, which is still not the crazy 10+ megapixel original. Also, don't forget to strip EXIF if you don't want the whole world to know where you live. (They should at least have a harder time figuring it out.)

(Not that static generators have this problem solved entirely: I did have Hugo time out and die while converting all the giant images I added.)

And once you're done with all that... not caring about "links to other fresh posts" in the content is one thing, but you'd generally want an index page, with a nice list of posts, excerpts, enticing images, possibly an RSS feed. Which... you could also write by hand. Or just provide a list of posts. But... if you go the "fancy blog" way, it's a lot more work.

Not a lot of work, but we're going for zero friction here. Remember, Future You is really lazy. (... at least if you're me.)

Let's solve it with more HTML!

So in a way, you'd want a static generator for part of the site, but your posts are in HTML.

Idea: could we use HTML to generate more HTML?

After all, with HTML5, you technically do know semantic meanings of tags. Also, HTML parser libraries definitely exist. So... our "generator" could just:

Furthermore, you can use the fact that unlike Markdown, HTML is easily extensible. Want drafts to be hidden from the index? 


<body class="draft">

... want to specify which paragraph we should use as a summary? 


<img src="IMG_20200101_smallthumb.jpg"
        data-orig="/home/simon/stuff/IMG_20200101.jpg" class="gallery summary"  />

This is, by the way, a close-to-exact example from the system I have. We have:

Picking a summary paragraph works similarly easily. (For extra niceness, you can write a unique one by adding 

display: hidden;
to a paragraph in the actual article and still making it the summary one.

Meanwhile, the generator is ~250 lines of Lisp, including the template.