Add pancakes recipe master
authorColby Russell <mr@colbyrussell.com>
Fri, 5 Aug 2022 15:55:27 -0500 (15:55 -0500)
commit5e0b36571f279e43b66c42c4bafc41140e739435
treed63ea5b35a24234579281504fcaeed07b42c8efc
parent93f1e70be2b2179d09f7e226cc3fd7b586b25e6b
Add pancakes recipe

Google Docs is one of the best ways to make content to put on the Web.

The canonical path food/pancakes/ (from index.html in that directory) is
a lightly edited version of the copy obtained by (a) writing up the
recipe in Google Docs, and then (b) downloading a copy as "Web Page
(.html, zipped)".  I prepped the output by making the following
additional changes:

- renamed the clipart (from "images/image1.png") and updated the path in
  the HTML, just because I wanted to
- added a title element to the document `<head>`, since it was lacking
  one
- replaced the image alt text (with the words "pancakes clipart")

I now realize that I could have set the alt text beforehand within
Google Docs.  Right-clicking the image lets you set the title text (the
text of the `title` attribute) and the "description", which is what
winds up in the `alt` attribute.  (Google Docs for some reason set the
alt text as "offset_355676.jpg", which is so obviously unhelpful that
it's not even worth doing.)  Presumably there's a way to set the page
title within Google Docs, too, but I don't have a lot of experience
working with the Google Docs editor (and I didn't exactly look for it).

Additionally, I saw fit to:

- added an HTML5 doctype declaration
- download copies of the style sheet that gets loaded by default from
  Google Fonts, as well as the corresponding woff2 files, for
  privacy reasons--so that they can be served locally--and update the
  paths in the HTML and weeded out the superfluous `@font-face` rules
  after consulting the network inspector
- add `rel=alternate` links to advertise other media types that I
  exported and/or am otherwise making available and a `rel=canonical`
  link
- add a little bit of whitespace to the HTML source

Before performing the last batch of changes, I saved a second copy
(without the invasive/opinionated stuff) as "pancakes.html" to showcase
what you can reasonably expect to get with fewer adulterants.

The stuff that I did to work around dynamically pulling in assets from
(and therefore phoning home to) Google Fonts might violate a EULA or
something.

Conclusions:
- the output is in no sense clean (the CSS, that is--the HTML is
  passable), but then again neither is any of the shit that passes for
  mainstream frontend development on the Modern Web by professional Web
  developers (although I'm not sure anybody has noticed this, not even
  the frontend folks themselves, and they're unlikely to want others
  noticing)
- Google Docs is a viable way for ordinary people to create documents
  for publication on the Web--even without any of the changes that I
  made, the results are ready for consumption

Using Google Docs to upload these local copies reveals that ODT seems to
be the best supported media type for roundtripping changes.  The same
may be true of DOCX, but I didn't check, because I didn't bother
downloading a DOCX version in the first place.

For the plaintext version, I just reformatted to make more judicious use
of whitespace.

Future explorations: a self-contained "long play" document (a la [ANPD],
[GPE]) that consists of (a) foremost an ebook/guide explaining how to
create, edit, and export your own recipes using the Recipe template in
Google Docs, for muggles who still aren't otherwise well-served by other
"simple" Markdown- and SSG-based recipe tools like GrimGrains and
based.cooking, and (b) a JS payload that will let the reader ingest the
documents exported from Google Docs and take care of any
tedious/technical work, e.g. to avoid anyone needing to edit HTML by
hand.  The idea is that you'd deposit this ebook somewhere (on the
service hosting your site, even) and then open it up and just follow
along.  We'd exploit the fact that with it being an "ebook" that's
intended to be read in the browser, that would mean we can use the
browser's built-in runtime to execute code snippets to take care of the
fickle stuff.

ANPD:
<https://crussell.ichi.city/pager.app.htm>

GPE:
<https://crussell.ichi.city/gpe.html>
food/pancakes/S6u9w4BMUTPHh6UVSwiPGQ.woff2 [new file]
food/pancakes/S6uyw4BMUTPHjx4wXg.woff2 [new file]
food/pancakes/index.html [new file]
food/pancakes/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtM.woff2 [new file]
food/pancakes/pancakes.html [new file]
food/pancakes/pancakes.odt [new file]
food/pancakes/pancakes.pdf [new file]
food/pancakes/pancakes.txt [new file]
food/pancakes/pancakes_clipart.png [new file]
food/pancakes/themes.googleusercontent.com_fonts_css__kit=xTOoZr6X-i3kNg7pYrzMsg1x4-k0E_HIXubOFdbxQhsKzhWAUnPdd-i3NkA-yiRC.css [new file]