Diplograph2023-12-30T05:48:12.682Ztag:diplograph.net,2008:journalEhttps://diplograph.net/icon-180.pngCopyright © 2005-2023.How Precious, That Uncertaintytag:diplograph.net,2008:journal-/2023/12/2023-12-102023-12-10T15:57:00-08:002023-12-10T15:57:00-08:00
<dl>
<dt id="engine">Engine</dt>
<dd>Added support for highlighting Maxima transcripts</dd>
<dd>Updated <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mtext>KaTeX</mtext></mrow><annotation encoding="application/x-tex">\KaTeX</annotation></semantics></math></span></span> to version 0.<span class="figure-sequence">16</span>.9</dd>
<dt id="type">Type</dt>
<dd>Pronunciation guides were previously set in Junicode; they’re now set in Diplograph Jaramond, borrowing Junicode’s small caps <span class="inline-extended-serif small-caps">Ə</span> when needed</dd>
<dd>Updated Inter to version 4.0</dd>
<dt id="notes">Notes</dt>
<dd>Good Words: <a href="https://diplograph.net/notes/words/good-words#imbricate" data-printable-url="diplograph.net/notes/words/good-words#imbricate">imbricate</a>, <a href="https://diplograph.net/notes/words/good-words#interregnum" data-printable-url="diplograph.net/notes/words/good-words#interregnum">interregnum</a>, <a href="https://diplograph.net/notes/words/good-words#rogalian" data-printable-url="diplograph.net/notes/words/good-words#rogalian">rogalian</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>End of the World</cite> by Searows</dd>
<dd>“enknee1” and “sever the blight” by hemlocke springs</dd>
</dl>
Notez with a Ztag:diplograph.net,2008:journal-/2023/07/2023-07-192023-07-19T22:19:48-07:002023-07-19T22:19:48-07:00
<dl>
<dt id="engine">Engine</dt>
<dd>Added support for highlighting Yarn Spinner files</dd>
<dd>Started groundwork for content units that generate images</dd>
<dd><span class="small-caps">SVGs</span> are now rasterized with a browser via Puppeteer instead of Inkscape for better <span class="small-caps">CSS</span> support</dd>
<dt id="notez">Notez</dt>
<dd><a href="https://diplograph.net/notes/games/gamedev/dialogue/using-yarn-spinner" data-printable-url="diplograph.net/notes/games/gamedev/dialogue/using-yarn-spinner">Using Yarn Spinner Without Engine Integration Packages</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>Mars is a Very Bad Place for Love</cite> by The Breathing Effect</dd>
<dd><cite><span class="small-caps">NAQT</span></cite> by <span class="small-caps">NAQT VANE</span></dd>
</dl>
Water Runs Through My Handtag:diplograph.net,2008:journal-/2023/07/2023-07-062023-07-05T22:43:36-07:002023-07-05T22:43:36-07:00
<p>The other day I was trying to remember the name of a piece of art, and—weirdly—searching for “egg camera art” was not helping. So I’m starting a pile I’ve been meaning to work on for a while now: some notes about a bunch of art works that I want to remember for one reason or another.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/art/works/paik-three-eggs" data-printable-url="diplograph.net/notes/art/works/paik-three-eggs"><cite>Three Eggs</cite> by Nam June Paik</a></dd>
<dd><a href="https://diplograph.net/notes/art/works/gonzalez-torres-untitled-perfect-lovers" data-printable-url="diplograph.net/notes/art/works/gonzalez-torres-untitled-perfect-lovers">“<cite>Untitled” (Perfect Lovers)</cite> by Felix Gonzalz-Torres</a></dd>
<dd><a href="https://diplograph.net/notes/art/works/turrell-open-field" data-printable-url="diplograph.net/notes/art/works/turrell-open-field"><cite>Open Field</cite> by James Turrell</a></dd>
<dd><a href="https://diplograph.net/notes/art/works/turrell-afrum-pale-blue" data-printable-url="diplograph.net/notes/art/works/turrell-afrum-pale-blue"><cite>Afrum, Pale Blue</cite> by James Turrell</a></dd>
<dd><a href="https://diplograph.net/notes/art/works/kjartansson-the-visitors" data-printable-url="diplograph.net/notes/art/works/kjartansson-the-visitors"><cite>The Visitors</cite> by Ragnar Kjartansson</a></dd>
<dd><a href="https://diplograph.net/notes/art/works/magritte-the-treachery-of-images" data-printable-url="diplograph.net/notes/art/works/magritte-the-treachery-of-images"><cite>The Treachery of Images</cite> by René Magritte</a></dd>
<dd><a href="https://diplograph.net/notes/art/works/kosuth-one-and-three-chairs" data-printable-url="diplograph.net/notes/art/works/kosuth-one-and-three-chairs"><cite>One and Three Chairs</cite> by Joseph Kosuth</a></dd>
<dd><a href="https://diplograph.net/notes/art/works/bartlett-yellow-and-black-boats" data-printable-url="diplograph.net/notes/art/works/bartlett-yellow-and-black-boats"><cite>Yellow and Black Boats</cite> by Jennifer Bartlett</a></dd>
<dd><a href="https://diplograph.net/notes/games/gamedev/shaders/godot-shaders" data-links-to-category="stream" data-links-to-tag="learning-notes" data-printable-url="diplograph.net/notes/games/gamedev/shaders/godot-shaders"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="stream" data-tag-name="learning-notes">Learning Notes:</span> Godot Shader Notes</a></dd>
<dd>Good Words: <a href="https://diplograph.net/notes/words/good-words#egregore" data-printable-url="diplograph.net/notes/words/good-words#egregore">egregore</a>, <a href="https://diplograph.net/notes/words/good-words#quire" data-printable-url="diplograph.net/notes/words/good-words#quire">quire</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>Colours of Air</cite> by Loscil, Lawrence English</dd>
<dd><cite>Heaven Hanging Low</cite> (<span class="small-caps">EP</span>) by Art School Girlfriend</dd>
</dl>
A Square of Color on the Wall: A Portal?tag:diplograph.net,2008:journal-/2023/06/2023-06-212023-06-21T22:05:49-07:002023-06-21T22:05:49-07:00
<p>The notes engine continues to become more complicated because I don’t yet understand how to make it simpler.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/games/my-games/squarez/squarez-retrospective" data-links-to-category="stream" data-links-to-tag="project-retrospective" data-printable-url="diplograph.net/notes/games/my-games/squarez/squarez-retrospective"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="stream" data-tag-name="project-retrospective">Project Retrospective:</span> <cite>Squarez</cite> Retrospective</a></dd>
<dd>Good Words: <a href="https://diplograph.net/notes/words/good-words#etiolate" data-printable-url="diplograph.net/notes/words/good-words#etiolate">etiolate</a></dd>
<dd>Updated: <a href="https://diplograph.net/notes/diplograph/design/design-colors" data-links-to-category="draft" data-links-to-tag="draft" data-printable-url="diplograph.net/notes/diplograph/design/design-colors"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="draft" data-tag-name="draft">Draft:</span> Diplograph’s Colors</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd>“<span class="small-caps">ROSE OF PAIN</span>” by X Japan</dd>
<dd><cite>Seventh Heaven</cite> by Kalafina</dd>
</dl>
Light That Does Not Illuminate But Rather Obscurestag:diplograph.net,2008:journal-/2023/06/2023-06-082023-06-08T13:32:27-07:002023-06-08T13:32:27-07:00
<p>A few weeks ago I added support for structured data, written in <span class="small-caps">YAML</span> and rendered via Pug, and more than anything else it was a relief. I could easily try out different ways of presenting the data without having to move everything around.</p>
<p>But there are some kinds of data that were annoying to express in <span class="small-caps">YAML</span>, in particular dense tabular data, and so I’ve added support for <span class="small-caps">TSV</span> as a data source for Pug templates. (Spreadsheet software seems to place <span class="small-caps">TSV</span> data on the clipboard rather than <span class="small-caps">CSV</span>.) So far it’s a good fit.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/games/puzzle-design/aporia-requires-trust" data-printable-url="diplograph.net/notes/games/puzzle-design/aporia-requires-trust">Aporia As a Promise Requires Trust</a></dd>
<dd><a href="https://diplograph.net/notes/games/puzzle-design/eureka-is-not-fiero" data-printable-url="diplograph.net/notes/games/puzzle-design/eureka-is-not-fiero">Eureka is not Fiero</a></dd>
<dd><a href="https://diplograph.net/notes/games/puzzle-design/puzzles-should-have-a-rewarding-ending" data-printable-url="diplograph.net/notes/games/puzzle-design/puzzles-should-have-a-rewarding-ending">Puzzles Should Have a Rewarding Ending</a></dd>
<dd><a href="https://diplograph.net/notes/games/gamedev/pixels/low-res-16-9" data-printable-url="diplograph.net/notes/games/gamedev/pixels/low-res-16-9">Low Resolution <span class="figure-sequence">16</span>:9 Canvas Sizes</a></dd>
<dd>Updated: <a href="https://diplograph.net/notes/programming/csharp/csharp-notes" data-links-to-category="stream" data-links-to-tag="learning-notes" data-printable-url="diplograph.net/notes/programming/csharp/csharp-notes"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="stream" data-tag-name="learning-notes">Learning Notes:</span> C# Notes</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite><span class="small-caps">BABYLON IX</span></cite> by yunè pinku</dd>
</dl>
The Sign Obscured by Tufted Vetchtag:diplograph.net,2008:journal-/2023/05/2023-05-242023-05-25T13:39:47-07:002023-05-25T13:39:47-07:00
<p>Sometimes I sit down to write these updates and I look at my commit log and think, “what in the world am I doing?”</p>
<h3 id="notes"><a href="#notes">Notes</a></h3>
<p>Building on the last update, links to draft notes now come with a little inline sticker. (I dislike the name “badge” and I’m not sure I understand why.) In the feed, the sticker text is prepended to the link. I’m hoping this does two things:</p>
<ol>
<li>Offers a hint as to <em>why</em> the link is differentiated</li>
<li>Differentiates the link with something other than just color</li>
</ol>
<p>Because there is no one to stop me, there’s now another broad category of differentiated links for notes that I’m unsure about, or still learning about. These links are green.</p>
<p>Between these two broad categories—notes that are incomplete, and notes that I’m unsure about—I hope this lets me publish notes that aren’t perfect, that need work, that are the result of something I’m in the middle of figuring out and don’t have the answers to.</p>
<p>Some people call this sort of thing “<a href="https://maggieappleton.com/epistemic-disclosure" rel="external" data-external-domain="maggieappleton.com" class="micro-external-icon-tight-right" data-printable-url="maggieappleton.com/epistemic-disclosure">epistemic disclosure<span class="external-markers"> (maggieappleton.com)</span></a>.” That sure is a thing you could call it.</p>
<p>To make this easier on my end, transcluding snippets will now copy tags from the snippet to the note, so I can add the callout explanation and attach the right tags in one step.</p>
<h3 id="colors"><a href="#colors">Colors</a></h3>
<p>All of that color-as-a-hint work has required some rationalization of the way colors are specified. Building this out has been frustratingly manual, partly because the tools for creating color systems make a lot of <span class="small-caps-prefix">s</span><span class="small-caps">RGB</span> assumptions.</p>
<p>The light mode colors need another pass, I think.</p>
<h3 id="type"><a href="#type">Type</a></h3>
<p>The header navigation is set in a new typeface, Archivo.</p>
<p>It was previously set in <span class="small-caps">DM</span> Mono, which I’m still using on the front page of the site. I imagined it as something used in a workshop, maybe light industry, something that is simultaneously practical or technical (monospaced) yet not obviously reading as either code or typewriter.</p>
<p>A monospaced type means monospaced advances, not consistent spacing between glyphs, and compromises are made to fit letterforms into those advances. With longer runs of text, the grid becomes visible, and the typeface makes sense as a whole. But when you have just a few letters, the reader may see the compromises instead.</p>
<p>It also didn’t help that my navigation header has a bit of positive tracking, which further obscured the base spacing.</p>
<div class="figcontainer medium diagram nup1"><figure><picture class="f1"><source type="image/webp" media="(prefers-color-scheme: dark)" sizes="min(540px, 100vw)" srcset="https://diplograph.net/2023/05/dmmononotes-dark-540w.webp 540w, https://diplograph.net/2023/05/dmmononotes-dark-1080w.webp 1080w"><source type="image/png" media="(prefers-color-scheme: dark)" sizes="min(540px, 100vw)" srcset="https://diplograph.net/2023/05/dmmononotes-dark-540w.png 540w, https://diplograph.net/2023/05/dmmononotes-dark-1080w.png 1080w"><source type="image/webp" sizes="min(540px, 100vw)" srcset="https://diplograph.net/2023/05/dmmononotes-540w.webp 540w, https://diplograph.net/2023/05/dmmononotes-1080w.webp 1080w"><img alt="Short strings of monospaced text may look incorrect." src="https://diplograph.net/2023/05/dmmononotes-540w.png" width="540" height="195" sizes="min(540px, 100vw)" srcset="https://diplograph.net/2023/05/dmmononotes-540w.png 540w, https://diplograph.net/2023/05/dmmononotes-1080w.png 1080w"></picture></figure></div>
<p>So I’m instead trying Archivo, a proportional typeface that takes its cues from late nineteenth century grotesques. I like the idea of adding <em>editorial</em> to my list of keywords.</p>
<dl>
<dt id="notes-1">Notes</dt>
<dd><a href="https://diplograph.net/notes/games/puzzle-design/zelda-puzzle-box-dungeons" data-printable-url="diplograph.net/notes/games/puzzle-design/zelda-puzzle-box-dungeons"><cite>Zelda</cite>’s Puzzle Box Dungeons Require Global Spatial Thinking</a></dd>
<dd><a href="https://diplograph.net/notes/games/procgen/sample-without-replacement-procgen" data-links-to-category="maybe" data-links-to-tag="learning" data-printable-url="diplograph.net/notes/games/procgen/sample-without-replacement-procgen"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="maybe" data-tag-name="learning">Learning:</span> Sample Rules Without Replacement to Avoid Repetitive Procgen</a></dd>
<dd><a href="https://diplograph.net/notes/math/probability/birthday-problem" data-printable-url="diplograph.net/notes/math/probability/birthday-problem">Drawing the Same Item More Than Once is Surprisingly Likely</a></dd>
<dd><a href="https://diplograph.net/notes/programming/csharp/csharp-notes" data-links-to-category="stream" data-links-to-tag="learning-notes" data-printable-url="diplograph.net/notes/programming/csharp/csharp-notes"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="stream" data-tag-name="learning-notes">Learning Notes:</span> C# Notes</a></dd>
<dd><a href="https://diplograph.net/notes/math/sagemath" data-links-to-category="stream" data-links-to-tag="learning-notes" data-printable-url="diplograph.net/notes/math/sagemath"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="stream" data-tag-name="learning-notes">Learning Notes:</span> SageMath Notes</a></dd>
<dd><a href="https://diplograph.net/notes/diplograph/design/design-tag-stickers" data-links-to-category="draft" data-links-to-tag="draft" data-printable-url="diplograph.net/notes/diplograph/design/design-tag-stickers"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="draft" data-tag-name="draft">Draft:</span> Tag Stickers</a></dd>
<dd>Updated: <a href="https://diplograph.net/notes/diplograph/design/design-colors" data-links-to-category="draft" data-links-to-tag="draft" data-printable-url="diplograph.net/notes/diplograph/design/design-colors"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="draft" data-tag-name="draft">Draft:</span> Diplograph’s Colors</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>That! Feels Good!</cite> by Jessie Ware (especially “Begin Again”)</dd>
<dd><cite>Moogmentum</cite> by Lisa Bella Donna</dd>
</dl>
A Snowy Plover Darts Among the Wavestag:diplograph.net,2008:journal-/2023/05/2023-05-112023-05-11T13:34:55-07:002023-05-11T13:34:55-07:00
<p>Very little content this week as I’ve been busy with other things, but here are some updates about the site itself.</p>
<dl>
<dt id="callouts">Callouts</dt>
<dd>
<p>Added support for callout boxes (sometimes called admonition boxes). Callouts can have titles or custom colors based on their type.</p>
</dd>
<dd>
<p>See <a href="https://diplograph.net/notes/diplograph/ink-commonmark-extensions#callout-blocks" data-printable-url="diplograph.net/notes/diplograph/ink-commonmark-extensions#callout-blocks">Ink’s CommonMark Extensions: Callout Blocks</a> and <a href="https://diplograph.net/notes/diplograph/design/design-callouts" data-printable-url="diplograph.net/notes/diplograph/design/design-callouts">Callouts</a>.</p>
</dd>
<dt id="drafts">Drafts</dt>
<dd>
<p>Reworked support for draft notes. I want to publish more in-progress work, and that means clearly disclosing what’s unfinished. (Everything is unfinished, really, but some things are <em>especially</em> unfinished.)</p>
</dd>
<dd>
<p>Transcluding the <code>{{draft}}</code> snippet automatically marks a note as a draft and adds a callout at the top of the page.</p>
</dd>
<dd>
<p>Links to draft notes are in a different color: <a href="https://diplograph.net/notes/diplograph/design/design-draft" data-links-to-category="draft" data-links-to-tag="draft" data-printable-url="diplograph.net/notes/diplograph/design/design-draft"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="draft" data-tag-name="draft">Draft:</span> A Draft Note for Testing</a>. (It’s currently purple; I’m still thinking about whether this could be confused with the default styling for a visited link and whether it’s the <em>right</em> purple.)</p>
</dd>
<dt id="cross-references">Cross References</dt>
<dd>
<p>I wanted links to newly added <a href="https://diplograph.net/notes/words/good-words" data-printable-url="diplograph.net/notes/words/good-words">Good Words</a> to be just the word, and thus:</p>
</dd>
<dd>
<p>The title of the target note can be suppressed by prefixing the <code>note-identifier</code> with <code>!</code>: <code>[[!good-words#aureate]]</code>.</p>
</dd>
<dd>
<p>Fragment targets can specify the text used in links to them with a <code>data-cross-reference-title</code> attribute.</p>
</dd>
<dd>
<p>Some fragment targets are now shown in the accent (magenta) color when linked to.</p>
</dd>
<dd>
<p>See <a href="https://diplograph.net/notes/diplograph/ink-commonmark-extensions#cross-references" data-printable-url="diplograph.net/notes/diplograph/ink-commonmark-extensions#cross-references">Ink’s CommonMark Extensions: Cross-References</a>.</p>
</dd>
<dt id="type">Type</dt>
<dd>
<p>Fixed an issue where incorrect font features were being used in both inline and block code snippets. <code>font-feature-settings</code> is the worst.</p>
</dd>
<dd>
<p>Adjusted the layout of the <a href="https://diplograph.net/" data-printable-url="diplograph.net/">front page</a> on smaller screens.</p>
</dd>
<dt id="notes">Notes</dt>
<dd>
<p>Good Words: <a href="https://diplograph.net/notes/words/good-words#aureate" data-printable-url="diplograph.net/notes/words/good-words#aureate">aureate</a></p>
</dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd>
<p><cite>the record</cite> by boygenius</p>
</dd>
<dd>
<p><cite>the Billage of perception: chapter three</cite> by Billlie</p>
</dd>
</dl>
A Dusty Tome of Ancient Knowledge (<cite>Mega Man 2</cite> Passwords)tag:diplograph.net,2008:journal-/2023/04/2023-04-062023-04-06T15:48:37-07:002023-04-06T15:48:37-07:00
<p>This week I’m excited to share the first proper release of <a href="https://diplograph.net/notes/typography/my-fonts/diplograph-jaramond" data-printable-url="diplograph.net/notes/typography/my-fonts/diplograph-jaramond">Diplograph Jaramond</a>, the modified version of <a href="https://github.com/octaviopardo/EBGaramond12" rel="external" data-external-domain="github.com" data-printable-url="github.com/octaviopardo/EBGaramond12"><span class="small-caps">EB</span> Garamond<span class="external-markers"> (github.com)</span></a> used on this site.</p>
<p>Other changes:</p>
<dl>
<dt id="attachments">Attachments</dt>
<dd>
<p>Attachments associate additional files with a note. These can be copied into the site structure for direct viewing or packaged into an archive for downloading.</p>
</dd>
<dt id="color">Color</dt>
<dd>
<p>The site’s dark mode color palette now includes some wide-gamut colors, if you’re using a compatible display.</p>
</dd>
<dd>
<p>Diagram colors have similarly been updated.</p>
</dd>
<dt id="diagrams">Diagrams</dt>
<dd>
<p>Diagrams that are body width or narrower are no longer displayed edge-to-edge on smaller screens. (Photos are still displayed edge-to-edge; diagrams often contain text or other content that feels crowded when right against the border of the screen.)</p>
</dd>
<dt id="cross-references">Cross-References</dt>
<dd>
<p>Intra-page cross-references (to another header, for example) no longer generate backlinks.</p>
</dd>
<dt id="notes">Notes</dt>
<dd>
<p><a href="https://diplograph.net/notes/typography/my-fonts/diplograph-jaramond" data-printable-url="diplograph.net/notes/typography/my-fonts/diplograph-jaramond">Diplograph Jaramond</a></p>
</dd>
<dd>
<p><a href="https://diplograph.net/notes/typography/type-design/opentype-positioning-rules-stack" data-printable-url="diplograph.net/notes/typography/type-design/opentype-positioning-rules-stack">OpenType Positioning Rules Stack Additively</a></p>
</dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd>
<p><cite>Voice</cite> by Hiromi</p>
</dd>
<dd>
<p>“Hold on Tight” by aespa</p>
</dd>
</dl>
Twirling, Falling, Lifted by the Windtag:diplograph.net,2008:journal-/2023/03/2023-03-232023-03-23T13:35:21-07:002023-03-23T13:35:21-07:00
<p>A small content update, partly because my attention has been elsewhere, and partly because I’ve been learning about some of the technical aspects of digital font development.</p>
<p>Diplograph is now using a custom font, a modified version of <span class="small-caps">EB</span> Garamond called Diplograph Jaramond. The first thing I added was a new kerning pair for Ja, hence the name. The J is pronounced the same as the G in <span class="small-caps">GIF</span>.</p>
<p>It has:</p>
<ul>
<li>New kerning pairs for Ja Jo No f’ f) nT eT. The italic additionally has new kerning pairs for several swash capitals.</li>
<li>A new ellipsis … with <span class="small-caps">M/4</span> spaces between the periods.</li>
<li>More space inside (parentheses), [brackets], and {braces}.</li>
<li>The multiplication symbol (3×) has been lowered towards the baseline to better fit old-style figures.</li>
</ul>
<p>In some cases these changes implement adjustments I was already making through markup and styling. But instead of wrapping every parentheses with a <code><span></code> and adding a tiny bit of padding, it’s now just a parentheses and the adjustment is encoded in a font layout feature.</p>
<p>A better demo and proper release of the font will come in a future update.</p>
<p>Because I’m now building the font from <span class="small-caps">UFO</span> sources, I’ve also switched over to using <span class="small-caps">CFF2</span> outlines, reducing the size of the roman and italic from <span class="figure-sequence">63</span> <span class="small-caps">KB</span> to <span class="figure-sequence">52</span> <span class="small-caps">KB</span>, even after adding the new features. I’ll have to write a note about this at some point, and I’m looking at making a similar change to the fonts I don’t build from source as well.</p>
<dl>
<dt id="other-type-changes">Other Type Changes</dt>
<dd>The spacing around figures (numbers) always looked a little wrong, and I finally figured out it was because they were <em>tabular</em> old-style figures! They’re now correctly proportional old-style figures.</dd>
<dt id="notes">Notes</dt>
<dd>Updated: <a href="https://diplograph.net/notes/diplograph/design/design-microtypography" data-printable-url="diplograph.net/notes/diplograph/design/design-microtypography">Microtypography</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>Radical Romantics</cite> by Fever Ray</dd>
<dd><cite>Fleet Foxes</cite> by Fleet Foxes</dd>
</dl>
Silent Snow That Promises A Different Way of Beingtag:diplograph.net,2008:journal-/2023/03/2023-03-092023-03-09T13:51:03-08:002023-03-09T13:51:03-08:00
<p>It’s exciting, seeing groundwork from the last few weeks coming together. I’m excited to share some more substantial notes about digital typesetting that I’ve been thinking about for a while.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/typography/digital-typesetting/inter-character-features-across-fonts" data-printable-url="diplograph.net/notes/typography/digital-typesetting/inter-character-features-across-fonts">Inter-Character Features Don’t Work Across Fonts</a></dd>
<dd><a href="https://diplograph.net/notes/typography/digital-typesetting/adjacent-romans-and-italics" data-printable-url="diplograph.net/notes/typography/digital-typesetting/adjacent-romans-and-italics">Adjacent Romans and Italics Can Collide</a></dd>
<dd><a href="https://diplograph.net/notes/typography/curiosities/metafont-book-tomato" data-printable-url="diplograph.net/notes/typography/curiosities/metafont-book-tomato"><cite>The <span class="small-caps small-caps-has-suffix">METAFONT</span><span class="small-caps-suffix">book</span></cite> Contains a Sentence That Search Engines Haven’t Indexed</a></dd>
<dd><a href="https://diplograph.net/notes/books/ebooks/terrible-ebook-typesetting#contextless-rule-based-formatting" data-printable-url="diplograph.net/notes/books/ebooks/terrible-ebook-typesetting#contextless-rule-based-formatting">Terrible Ebook Typesetting: Contextless, Rule-Based Formatting</a></dd>
</dl>
<p>I keep going back and forth on whether detailed lists of the things I change in the site’s engine are interesting. I’m proud of the details, but also recognize this is noise to most folks.</p>
<dl>
<dt id="citations-and-bibliographies">Citations and Bibliographies</dt>
<dd>
<p>Inline citations now disambiguate themselves using an item’s short title or short description if multiple items on the same page have the same authors.</p>
</dd>
<dd>
<p>Individual bibliographic items can specify the use of short titles or descriptions over authors for inline citations.</p>
</dd>
<dd>
<p>Bibliographic listings now correctly order mixes of items with and without authors.</p>
</dd>
<dt id="figures-and-diagrams">Figures and Diagrams</dt>
<dd>
<p>Diagrams now support the “natural size” layout. The diagram’s view box is used to calculate its intrinsic width.</p>
</dd>
<dd>
<p>“Natural size” figures that are smaller than the body width no longer clear floats on both sides in multi-column layouts. This allows a sidenote to run alongside the figure.</p>
</dd>
<dt id="type">Type</dt>
<dd>
<p>Fixed an issue with small caps in <code>h3</code> headers being spaced too tightly.</p>
</dd>
<dt id="this-site-is-that-extra">This Site <em>Is</em> That Extra</dt>
<dd>
<p>Added support for the <code>\XeTeX</code> macro.</p>
</dd>
<dd>
<p>“book” is now allowed as a suffix to small caps, as in <cite>The <span class="small-caps small-caps-has-suffix">METAFONT</span><span class="small-caps-suffix">book</span></cite>.</p>
</dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd>
<p><cite>Awakening:Sleeping</cite> by <span class="small-caps">MASS OF THE FERMENTING DREGS</span></p>
</dd>
</dl>
It's Too Noisy in This Empty Roomtag:diplograph.net,2008:journal-/2023/02/2023-02-232023-02-23T15:56:57-08:002023-02-23T15:56:57-08:00
<p>I’m thinking about slowing updates to every two weeks. This will give me a little more time time to work on notes that need new tooling support, demos, figures, or more involved research.</p>
<p>There are also some other projects I want to put more time into, some writing, some visual art, even just some more reading, and a slower schedule will make it easier to switch focuses.</p>
<p>In the meantime, I’ve finally finished a thing I’ve wanted to do for a while: diagram figures that adapt to the site’s color palettes. I’m planning on using this to illustrate a bunch of upcoming typography content.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/typography/publications/type-kyary" data-printable-url="diplograph.net/notes/typography/publications/type-kyary">Type in Kyary Pamyu Pamyu <span class="small-caps">MVs</span></a></dd>
<dd><a href="https://diplograph.net/notes/diplograph/design/design-diagrams" data-links-to-category="draft" data-links-to-tag="draft" data-printable-url="diplograph.net/notes/diplograph/design/design-diagrams"><span class="tag-sticker no-prose-formatting tag-sticker-small" data-tag-category="draft" data-tag-name="draft">Draft:</span> Diagrams</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>Wet Leg</cite> by Wet Leg</dd>
<dd><cite>Mirrors in Mirrors</cite> by Midori Hirano</dd>
</dl>
Where Campfire Smoke Meets the Starstag:diplograph.net,2008:journal-/2023/02/2023-02-162023-02-16T14:17:22-08:002023-02-16T14:17:22-08:00
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/webdev/color-management/identifying-profiles-is-hard#an-approach" data-printable-url="diplograph.net/notes/webdev/color-management/identifying-profiles-is-hard#an-approach">Identifying Profiles is Hard: An Approach</a></dd>
<dd><a href="https://diplograph.net/notes/books/ebooks/pdf-snippets" data-printable-url="diplograph.net/notes/books/ebooks/pdf-snippets">Working with <span class="small-caps">PDFs</span> on the Command Line</a></dd>
<dd><a href="https://diplograph.net/notes/books/ebooks/terrible-ebook-typesetting" data-printable-url="diplograph.net/notes/books/ebooks/terrible-ebook-typesetting">Terrible Ebook Typesetting</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>Chicory Piano Collections</cite> by Trevor Alan Gomes, Lena Raine</dd>
<dd>“Carbon Dioxide” and “What They Call Us” by Fever Ray</dd>
</dl>
Sunrise Over A Field of Hoarfrosttag:diplograph.net,2008:journal-/2023/02/2023-02-092023-02-08T13:05:57-08:002023-02-08T13:05:57-08:00
<p>A small handful of notes about digital archiving.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/computers/archives/digital-objects-degrade-faster" data-printable-url="diplograph.net/notes/computers/archives/digital-objects-degrade-faster">Digital Objects Degrade Faster Than Physical Objects</a></dd>
<dd><a href="https://diplograph.net/notes/computers/archives/choose-archival-formats-for-longevity" data-printable-url="diplograph.net/notes/computers/archives/choose-archival-formats-for-longevity">Choose Archival Formats for Longevity, Resiliency</a></dd>
<dd><a href="https://diplograph.net/notes/computers/archives/digital-archives-require-maintenance" data-printable-url="diplograph.net/notes/computers/archives/digital-archives-require-maintenance">Digital Archives Require Maintenance</a></dd>
<dd><a href="https://diplograph.net/notes/computers/archives/digital-archiving-must-be-sustainable" data-printable-url="diplograph.net/notes/computers/archives/digital-archiving-must-be-sustainable">Digital Archiving Must Be Sustainable</a></dd>
<dd><a href="https://diplograph.net/notes/computers/archives/backups-only-provide-continuity" data-printable-url="diplograph.net/notes/computers/archives/backups-only-provide-continuity">Backups Are for Continuity, Not Archival</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>The Body Is A Message Of The Universe</cite> by Shiho Yabuki</dd>
</dl>
Leaves Reach Across the Pagetag:diplograph.net,2008:journal-/2023/02/2023-02-022023-02-02T14:56:01-08:002023-02-02T14:56:01-08:00
<p><a href="https://diplograph.net/notes/words/good-words" data-printable-url="diplograph.net/notes/words/good-words">Good Words</a>.</p>
<p>I’m really happy with that note, first because I like good words and I’m happy to have a place to collect them. Second because it looks nice, although it draws a little too heavily on some of its inspirations. And third, and maybe most importantly, it’s built through a new layer for rendering structured content.</p>
<p>Over the years I’ve built up this site so I can write in a lightweight markup language (CommonMark), a concise templating language (Pug), or Markup Classic (<span class="small-caps">HTML</span>). And despite having all of these available, I still disliked writing structured content, like tables or complex lists with repeated elements.</p>
<p>I might write a table like this:</p>
<div class="wocco main_container wocco-code-only"><div class="wocco-listing"><div class="wocco-comments wocco-comments-empty"></div><div class="wocco-code"><pre><code>table
thead
th Year
th Artist
th Title
tbody
tr
td 1984
td Steve Reich
td The Desert Music: I
tr
td 1998
td Steve Reich
td Different Trains: After the War
tr
td 1995
td Björk
td Hyperballad
[...]
</code></pre></div></div></div>
<p>And then I might realize I should an Album column, or maybe I should use a definition list and group the songs by artist.</p>
<p>Those changes might require redoing the entire thing, and that made me reluctant to try different layouts to figure out what worked best, made me anxious about working on this kind of content in general, and I’d put it off.</p>
<p>Here’s the new system: structured content is written in <span class="small-caps">YAML</span>, a serialization format with far too many sharp edges but somehow still one of the nicer ways to write structured content by hand:</p>
<div class="wocco main_container wocco-code-only"><div class="wocco-listing"><div class="wocco-comments wocco-comments-empty"></div><div class="wocco-code"><pre><code>---
-
year: 1984
artist: Steve Reich
title: "The Desert Music: I"
-
year: 1998
artist: Steve Reich
title: "Different Trains: After the War"
-
year: 1995
artist: Björk
title: Hyperballad
...
</code></pre></div></div></div>
<p>This data can then be referenced from a Pug template:</p>
<div class="wocco main_container wocco-code-only"><div class="wocco-listing"><div class="wocco-comments wocco-comments-empty"></div><div class="wocco-code"><pre><code>table
[...]
tbody
each song of allSongs
tr
td= song.year
td= song.artist
td= song.title
</code></pre></div></div></div>
<p>Say I did want to use that definition list instead. The data stays the same and all I need is a modified template:</p>
<div class="wocco main_container wocco-code-only"><div class="wocco-listing"><div class="wocco-comments wocco-comments-empty"></div><div class="wocco-code"><pre><code>dl
// group is an injected function that returns a Map<Key, Element[]>.
each [artist, songs] of group(allSongs, (s) => s.artist)
dt= artist
each song of songs
dd "#{song.title}" (#{song.year})
</code></pre></div></div></div>
<p>I want to be clear: this isn’t <em>novel</em>. We do this all day long in software—separate data from its presentation, or write templates that are driven by the results of query languages; this is what Pug is <em>for</em>. But there’s something very subtle about mixing structured data with flowing content, inlining it with prose.<span class="sidenote-reference">¹</span></p><div class="sidenote sidenote-block"><div class="sidenote-wrapper"><span class="sidenote-number">1 </span>This idea isn’t novel either. I’m fascinated by Obsidian’s <a href="https://github.com/blacksmithgu/obsidian-dataview" rel="external" data-external-domain="github.com" class="micro-external-icon-tight-right" data-printable-url="github.com/blacksmithgu/obsidian-dataview">Dataview plugin<span class="external-markers"> (github.com)</span></a>, but I’m not writing a relational query engine for this site—yet?</div></div>
<p>This layer is still very simple, and there’s room for it to grow, but already it feels like it’s unlocked a class of notes that I’ve been having trouble working on.</p>
<dl>
<dt id="on-preview">On Preview</dt>
<dd>There are multiple formatting issues in the syndication feed; I’m throwing them on the list of things to fix.</dd>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/words/good-words" data-printable-url="diplograph.net/notes/words/good-words">Good Words</a></dd>
<dd><a href="https://diplograph.net/notes/books/2022/martine-a-memory-called-empire" data-printable-url="diplograph.net/notes/books/2022/martine-a-memory-called-empire"><cite>A Memory Called Empire</cite> by Arkady Martine</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>Profound Mysteries <span class="small-caps">III</span></cite> by Röyksopp</dd>
</dl>
The Weight of Sunlight Across My Bodytag:diplograph.net,2008:journal-/2023/01/2023-01-262023-01-26T14:01:26-08:002023-01-26T14:01:26-08:00
<p>It’s becoming increasingly clear the figures system needs a rewrite, and I’m getting dangerously close to pulling in a rationalization of the site’s layout into scope. I’m trying to figure out how to balance that with some other projects, while still sneaking in a new note or two.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/webdev/images/use-linear-colorspaces-for-accuracy" data-printable-url="diplograph.net/notes/webdev/images/use-linear-colorspaces-for-accuracy">Use Linear Colorspaces for More Accurate Processing</a></dd>
<dd><a href="https://diplograph.net/notes/art/the-art-eats-itself" data-printable-url="diplograph.net/notes/art/the-art-eats-itself">The Art Eats Itself</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd>“Komeda Part 3” by Hania Rani</dd>
</dl>
Iridescent Pixels Pressed Into the Palm of My Handtag:diplograph.net,2008:journal-/2023/01/2023-01-192023-01-19T12:26:24-08:002023-01-19T12:26:24-08:00
<p>Only a “small” update, partly because it still takes too long to put together a note with a bunch of images, and partly because I spent a lot of time wondering if this is the sort of site that might transcribe something like “<span class="inline-extended-serif">To giue it ſufficiẽt light as inſtruments appointed for yͤ ſame, to ſerue to mãs vſe<span>” (<span class="figure-sequence">1560</span> <cite>Geneva Bible</cite> 1r note o), not because it’s a particularly interesting bit of text, but because it has several interesting orthographic details that we no longer use.</span></span></p>
<p>And who am I kidding, of <em>course</em> this is that kind of site, and so I had to spend some time adding support for the Junicode typeface in some limited contexts.</p>
<dl>
<dt id="notes">Notes</dt>
<dd><a href="https://diplograph.net/notes/typography/publications/geneva-bible-1560" data-printable-url="diplograph.net/notes/typography/publications/geneva-bible-1560">The <span class="figure-sequence">1560</span> Geneva Bible</a></dd>
<dd><a href="https://diplograph.net/notes/typography/printing-history/printed-early-modern-english" data-printable-url="diplograph.net/notes/typography/printing-history/printed-early-modern-english">Printed Early Modern English</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>technicolor</cite> by Covet</dd>
</dl>
Low Fog Woven Through Redwood Treestag:diplograph.net,2008:journal-/2023/01/2023-01-122023-01-12T13:37:37-08:002023-01-12T13:37:37-08:00
<dl>
<dt id="notes">Notes</dt>
<dd>A half dozen notes about color management and the web. One place to start: <a href="https://diplograph.net/notes/webdev/color-management/use-compact-color-profiles" data-printable-url="diplograph.net/notes/webdev/color-management/use-compact-color-profiles">Use Compact Color Profiles to Reduce Image Size</a></dd>
<dt id="heavy-rotation">Heavy Rotation</dt>
<dd><cite>Preacher’s Daughter</cite> by Ethel Cain</dd>
</dl>
A Piano Echoing in a Moss-Covered, Crumbling Stone Halltag:diplograph.net,2008:journal-/2023/01/2023-01-052023-01-05T18:52:55-08:002023-01-05T18:52:55-08:00
<p>Trying some new things.</p>
<p>Over the last few months I’ve accumulated too many changes to talk about. Some highlights:</p>
<dl>
<dt id="design">Design</dt>
<dd>
<p>A new masthead and <a href="https://diplograph.net/" data-printable-url="diplograph.net/">Front Page</a>.</p>
</dd>
<dt id="notes">Notes</dt>
<dd>
<p>CommonMark syntax for cross-references, transclusions, definition lists, sidenotes, citations, and math. See <a href="https://diplograph.net/notes/diplograph/ink-commonmark-extensions" data-printable-url="diplograph.net/notes/diplograph/ink-commonmark-extensions">Ink’s CommonMark Extensions</a>.</p>
</dd>
<dd>
<p>A major rewrite of how extensions to CommonMark are implemented.</p>
</dd>
<dd>
<p>An overhaul of the citation system. Hopefully this makes it easier to manage inline citations, but I also recognize this is a rabbit hole down which too many people have disappeared.</p>
</dd>
<dt id="type">Type</dt>
<dd>
<p>A new modular type scale and a major refactoring of how type sizes are implemented in <span class="small-caps">CSS</span>.</p>
</dd>
<dd>
<p>Many, many microtypography improvements and fixes. Some are noted in <a href="https://diplograph.net/notes/diplograph/design/design-microtypography" data-printable-url="diplograph.net/notes/diplograph/design/design-microtypography">Microtypography</a>.</p>
</dd>
<dd>
<p>A major rewrite to the subsetting pass allowing specific glyphs to be dropped. The core font files have been reduced by almost half from <span class="figure-sequence">169</span> <span class="small-caps">KB</span> to <span class="figure-sequence">83</span> <span class="small-caps">KB</span>.</p>
</dd>
<dd>
<p>Support for Japanese fonts and an easier way of writing ruby.</p>
</dd>
<dt id="accessibility">Accessibility</dt>
<dd>
<p>Accessibility improvements across the site, particularly for those using screen readers or keyboard navigation.</p>
</dd>
<dt id="refactoring">Refactoring</dt>
<dd>
<p>Removal of several underutilizied features, some used by only one post. Many of those posts have been archived for now.</p>
</dd>
</dl>
<p>I have a huge pile of notes to import. For now, click around the hubs for <a href="https://diplograph.net/notes/games/games-index" data-printable-url="diplograph.net/notes/games/games-index">Games</a> or <a href="https://diplograph.net/notes/typography/typography-index" data-printable-url="diplograph.net/notes/typography/typography-index">Typography</a>.</p>
<p>I’ve updated the list of <a href="https://diplograph.net/notes/books/books-index" data-printable-url="diplograph.net/notes/books/books-index">Books</a> I read last year. Do you have something I should add to my <a href="https://diplograph.net/notes/books/book-pile" data-printable-url="diplograph.net/notes/books/book-pile">Book Pile</a>?</p>
Books, The Problem With Recipestag:diplograph.net,2008:journal-/2021-09/2021-09-042021-09-04T14:36:29-07:002021-09-04T14:36:29-07:00
<p>I have this vague sense that <a href="https://diplograph.net/notes/index" data-printable-url="diplograph.net/notes/index">Notes</a>, as opposed to blog posts, allow me to work more openly, rather than holding something back until it’s perfect. So in that spirit I’m publishing the <a href="https://diplograph.net/notes/explorations" data-printable-url="diplograph.net/notes/explorations">Explorations</a> list I keep for Diplograph. It also shows off a new style for task lsits.</p>
<p>There’s a new note about recipes, <a href="https://diplograph.net/notes/food/design/recipe-design-problems" data-printable-url="diplograph.net/notes/food/design/recipe-design-problems">The Problem with Recipes</a>. I rediscovered my love of reading this year, so there’s some notes about <a href="https://diplograph.net/notes/books/books-index" data-printable-url="diplograph.net/notes/books/books-index">Books</a>.</p>
<p>A ton of backend work supports the book notes. There’s a new informal style for bibliographic entries: “<cite>Title</cite> by Author” instead of the not-quite-<span class="small-caps">MLA</span> format used elsewhere. There’s support for marking books as being part of a series, and a new content warning tagging system that I eventually want to extend to the notes themselves.</p>
<p>I wanted to keep track of who suggested what book to me in my <a href="https://diplograph.net/notes/books/book-pile" data-printable-url="diplograph.net/notes/books/book-pile">The Book Pile</a>, so I added a small mapping system that maps friends to anonymous identifiers. (If you’d like this mapping to instead map to your name or nym, let me know; it can handle that as well).</p>
<p>Also, there are some books that I’d rather not share here, but still want to track of or write notes on, so I’ve added a feature that removes parts of a page marked “private” before publishing. A small placeholder is left where content is omitted, like this:</p>
<p class="private-replacement"><span class="micro-open-bracket micro-space-after micro-bracket-around-italic">[</span><span class="private-replacement-message">Some private content has been omitted.</span><span class="micro-close-bracket micro-space-before micro-bracket-around-italic">]</span></p>
<p>Finally, some type updates, all concerning Inter, the sans-serif used in figure captions and technical writing:</p>
<ul>
<li>Updated from version 3.<span class="figure-sequence">15</span> to 3.<span class="figure-sequence">19</span>.</li>
<li>Captions no longer have any negative tracking, and indeed now have some positive tracking. I think the type reads a little better, especially on smaller devices, when it has a little room.</li>
<li>The subset font now includes the <code>ss04</code> style <code>Disambiguation without slashed zero</code>, which I’ve been thinking about using in some places like recipes, where you want to be able to quickly glance at some text without needing to think whether you’re looking at an l or a 1.</li>
</ul>
Notestag:diplograph.net,2008:journal-/2021-08/2021-08-212021-08-19T21:07:43-07:002021-08-19T21:07:43-07:00
<p>I’ve added a new section to the site, <a href="https://diplograph.net/notes/index" data-printable-url="diplograph.net/notes/index">Notes</a>.</p>
<p>Unlike blog posts, these are pages that I intend to work on over multiple updates, building them out over time. They’re going to cover, well, all kinds of things!</p>
<p>For now, there are only a couple of notes.</p>
<p>And there’s <a href="https://diplograph.net/notes/food/design/recipe-design-gallery" data-printable-url="diplograph.net/notes/food/design/recipe-design-gallery">A Gallery of Recipes</a>, showing some of the common (and uncommon) ways cooking recipes are structured.</p>
<p>Blog posts still have a place on this site, I think. They’re temporal. Notes are—well, not timeless exactly—but not tied to time in the way blog posts are. If it sounds like I’m making this up as I go, that’s because I am.</p>