{"id":9179,"date":"2023-12-06T06:06:07","date_gmt":"2023-12-06T11:06:07","guid":{"rendered":"https:\/\/openworld.news\/andy-wingo-colophonwards\/"},"modified":"2023-12-06T06:06:07","modified_gmt":"2023-12-06T11:06:07","slug":"andy-wingo-colophonwards","status":"publish","type":"post","link":"https:\/\/openworld.news\/andy-wingo-colophonwards\/","title":{"rendered":"Andy Wingo: colophonwards"},"content":{"rendered":"

Author:
\nSource<\/a><\/p>\n

\n
\n

A brief meta-note this morning: for the first time in 20 years, I
\nfinally got around to updating the web design of
\nwingolog.org<\/a> recently and wanted to share a bit
\nabout that.<\/p>\n

Back when I made the initial wingolog
\ndesign<\/a>,
\nI was using the then-brand-new WordPress, Internet Explorer
\n6<\/a> was the most common web browser, CSS wasn\u2019t very good, the Safari browser had
\njust made its first release, smartphones were yet to be invented, and
\neveryone used low-resolution CRT screens. The original design did use CSS instead
\nof tables, thankfully, but it was very narrow and left a lot up to the
\nuser agent (notably font choice and size).<\/p>\n

These days you can do much better. Even HTML has moved on, with
\n<article><\/tt><\/a>
\nand
\n<aside><\/tt><\/a>
\nand
\n<section><\/tt><\/a>
\nelements. CSS is powerful and interoperable, with grid layout and
\nmedia queries and :has()<\/tt> and :is()<\/tt> and all kinds of fun selectors.
\nAnd, we have web fonts.<\/p>\n

I probably would have stuck with the old design if it were readable, but
\nwith pixel counts growing, the saturated red bands on the sides flooded
\nthe screen, leaving the reader feeling like they were driving into
\nheadlights in the rain.<\/p>\n

Anyway, the new design is a bit more peaceful, I hope. Feedback
\nwelcome.<\/p>\n

I\u2019m using grid layout, but not in the way that I thought I would. From
\nreading the documentation, I had the impression that the element with
\ndisplay: grid<\/tt> would be a kind of flexible corkboard which could be
\nfilled up by any child element. However, that\u2019s not quite true: it only
\nworks for direct children, which means your HTML does have to match the
\nneeds of the grid. Grandchildren can take their rows and columns from
\ngrandparents via subgrid<\/tt>, but only really display inside themselves:
\nyou can\u2019t pop a grandkid out to a grandparent grid area. (Or maybe you
\ncan! It\u2019s a powerful facility and I don\u2019t claim to fully understand
\nit.)<\/p>\n

Also, as far as I can tell there is no provision to fill up one grid
\narea with multiple children. Whereas I thought that on the root page,
\neach blog entry would end up in its own grid area, that\u2019s just not the
\ncase: you put the <main><\/tt> (another new element!) in a grid area and let
\nit lay out itself. Fine enough.<\/p>\n

I would love to have proper
\nside-notes<\/a>,
\nand I thought the grid would do something for me there, but it seems
\nthat I have to wait for CSS anchor positioning. Until then you
\ncan use position: absolute<\/tt> tricks, but side-notes may overlap unless
\nthe source article is careful.<\/p>\n

For fonts, I dearly wanted proper fonts, but I was always scared of the
\nflash of invisible
\ntext<\/a>. It turns out
\nthat with font-display: swap<\/tt> you can guarantee that the user can read
\ntext if for some reason your fonts fail to load, at the cost of a later
\nlayout shift when the fonts come in. At first I tried Bitstream
\nCharter<\/a> for the body
\ntypeface, but I was unable to nicely mix it with Fira
\nMono<\/a> without
\nline-heights getting all wonky: a <code><\/tt> tag on a line would make that
\nline too high. I tried all kinds of adjustments in the @font-face<\/tt> but
\nfinally decided to follow my heart and buy a font. Or two. And then
\nsheepishly admit it to my spouse the next morning. You are reading this
\nin Valkyrie<\/a>, and the headings are
\nHermes Maia<\/a>. I\u2019m pretty happy
\nwith the result and I hope you are too. They are loaded from my server,
\nto which the browser already has a TCP and TLS connection, so it would
\nseem that the performance impact is minimal.<\/p>\n

Part of getting performance was to inline my CSS file into the web pages
\nproduced by the blog software<\/a>,
\nallowing the browser to go ahead and lay things out as they should be
\nwithout waiting on a chained secondary request to get the layout.<\/p>\n

Finally, I did finally break down and teach my blog software\u2019s marxdown
\nparser<\/a>
\nabout \u201csmart quotes\u201d and em dashes and en dashes. I couldn\u2019t make this
\npost in good faith without it; \u201cthe guy yammers on about web design and
\nnot only is he not a designer, he uses ugly quotes\u201d, &c, &c…<\/p>\n

Finally finally, some recommendations: I really enjoyed reading Erik
\nSpiekermann\u2019s Stop Stealing Sheep, 4th
\ned.<\/a>
\non typography and type, which led to a raft of book purchases. Eric
\nMeyers and Estelle Weyl\u2019s CSS: The Definitive Guide<\/a> was very useful
\nfor figuring out what is possible with CSS and how to make it happen.
\nIt\u2019s a guide, though, and is not very opinionated; you might find
\nMatthew Butterick\u2019s Practical
\nTypography<\/a> to be useful if you are
\nlooking for pretty-good opinions about what to make.<\/p>\n

Onwards and upwards!<\/p>\n<\/div>\n<\/div>\n

Read more<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

\n
\n

A brief meta-note this morning: for the first time in 20 years, I
\nfinally got around to updating the web design of
\nwingolog.org<\/a> recently and wanted to share a bit
\nabout that.<\/p>\n

Back when I made the initial wingolog
\ndesign<\/a>,
\nI was using the then-brand-new Wordpress, Internet Explorer
\n6<\/a> was the most common web browser, CSS wasn\u2019t very good, the Safari browser had
\njust made its first release, smartphones were yet to be invented, and
\neveryone used low-resolution CRT screens. The original design did use CSS instead
\nof tables, thankfully, but it was very narrow and left a lot up to the
\nuser agent (notably font choice and size).<\/p>\n

These days you can do much better. Even HTML has moved on, with
\n<article><\/tt><\/a>
\nand
\n<aside><\/tt><\/a>
\nand
\n<section><\/tt><\/a>
\nelements. CSS is powerful and interoperable, with grid layout and
\nmedia queries and :has()<\/tt> and :is()<\/tt> and all kinds of fun selectors.
\nAnd, we have web fonts.<\/p>\n

I probably would have stuck with the old design if it were readable, but
\nwith pixel counts growing, the saturated red bands on the sides flooded
\nthe screen, leaving the reader feeling like they were driving into
\nheadlights in the rain.<\/p>\n

Anyway, the new design is a bit more peaceful, I hope. Feedback
\nwelcome.<\/p>\n

I\u2019m using grid layout, but not in the way that I thought I would. From
\nreading the documentation, I had the impression that the element with
\ndisplay: grid<\/tt> would be a kind of flexible corkboard which could be
\nfilled up by any child element. However, that\u2019s not quite true: it only
\nworks for direct children, which means your HTML does have to match the
\nneeds of the grid. Grandchildren can take their rows and columns from
\ngrandparents via subgrid<\/tt>, but only really display inside themselves:
\nyou can\u2019t pop a grandkid out to a grandparent grid area. (Or maybe you
\ncan! It\u2019s a powerful facility and I don\u2019t claim to fully understand
\nit.)<\/p>\n

Also, as far as I can tell there is no provision to fill up one grid
\narea with multiple children. Whereas I thought that on the root page,
\neach blog entry would end up in its own grid area, that\u2019s just not the
\ncase: you put the <main><\/tt> (another new element!) in a grid area and let
\nit lay out itself. Fine enough.<\/p>\n

I would love to have proper
\nside-notes<\/a>,
\nand I thought the grid would do something for me there, but it seems
\nthat I have to wait for CSS anchor positioning. Until then you
\ncan use position: absolute<\/tt> tricks, but side-notes may overlap unless
\nthe source article is careful.<\/p>\n

For fonts, I dearly wanted proper fonts, but I was always scared of the
\nflash of invisible
\ntext<\/a>. It turns out
\nthat with font-display: swap<\/tt> you can guarantee that the user can read
\ntext if for some reason your fonts fail to load, at the cost of a later
\nlayout shift when the fonts come in. At first I tried Bitstream
\nCharter<\/a> for the body
\ntypeface, but I was unable to nicely mix it with Fira
\nMono<\/a> without
\nline-heights getting all wonky: a <code><\/tt> tag on a line would make that
\nline too high. I tried all kinds of adjustments in the @font-face<\/tt> but
\nfinally decided to follow my heart and buy a font. Or two. And then
\nsheepishly admit it to my spouse the next morning. You are reading this
\nin Valkyrie<\/a>, and the headings are
\nHermes Maia<\/a>. I\u2019m pretty happy
\nwith the result and I hope you are too. They are loaded from my server,
\nto which the browser already has a TCP and TLS connection, so it would
\nseem that the performance impact is minimal.<\/p>\n

Part of getting performance was to inline my CSS file into the web pages
\nproduced by the blog software<\/a>,
\nallowing the browser to go ahead and lay things out as they should be
\nwithout waiting on a chained secondary request to get the layout.<\/p>\n

Finally, I did finally break down and teach my blog software\u2019s marxdown
\nparser<\/a>
\nabout \u201csmart quotes\u201d and em dashes and en dashes. I couldn\u2019t make this
\npost in good faith without it; \u201cthe guy yammers on about web design and
\nnot only is he not a designer, he uses ugly quotes\u201d, &c, &c…<\/p>\n

Finally finally, some recommendations: I really enjoyed reading Erik
\nSpiekermann\u2019s Stop Stealing Sheep, 4th
\ned.<\/a>
\non typography and type, which led to a raft of book purchases. Eric
\nMeyers and Estelle Weyl\u2019s CSS: The Definitive Guide<\/a> was very useful
\nfor figuring out what is possible with CSS and how to make it happen.
\nIt\u2019s a guide, though, and is not very opinionated; you might find
\nMatthew Butterick\u2019s Practical
\nTypography<\/a> to be useful if you are
\nlooking for pretty-good opinions about what to make.<\/p>\n

Onwards and upwards!<\/p>\n<\/div>\n<\/div>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[3,10],"tags":[4],"class_list":["post-9179","post","type-post","status-publish","format-standard","hentry","category-news","category-open-source","tag-open-source"],"_links":{"self":[{"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/posts\/9179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/comments?post=9179"}],"version-history":[{"count":0,"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/posts\/9179\/revisions"}],"wp:attachment":[{"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/media?parent=9179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/categories?post=9179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openworld.news\/wp-json\/wp\/v2\/tags?post=9179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}