Skip to Content

A personal website.

Diplowhat?

A diplograph is a machine that produces multiple copies of text at the same time, like a machine that’s both a typewriter and braille embosser in one.

See, I used to—actually the name doesn’t make any sense, now that I think about it?

Colophon

Diplograph

Diplograph is generated with a custom engine I call Ink, written in TypeScript (external link) and running in NodeJS (external link). Ink generates a static website that requires no server side processing.

I write with iA Writer (external link). I develop with Visual Studio Code (external link).

CSS is written in Sass (external link). Markup is mostly hand-written HTML, but the occasional snippet is written in Pug (external link), based on HAML (external link).

Typography

The serif type is EB Garamond (external link), a wonderful revival of Claude Garamont’s 16th century types. Text requiring extended character support is set in Junicode 2 (external link). The monospaced accent is DM Mono (external link). The code type is Fira Code (external link). The sans-serif is Inter (external link).

The icons are Cole Bemis’ Feather (external link), packaged into a font with Inkscape (external link), svgicons2svgfont (external link), and svg2ttf (external link).

Fonts are processed with pyftsubset (external link), part of fonttools (external link).

License information for these types can be found at Additional Notices and Licenses.

The curly quotes algorithm is based on David Dunham’s Smart Quotes algorithm (external link).

Math is typeset with KaTeX\href{https://katex.org/}{\KaTeX}.

Design

The implementation of sidenotes, and especially their behavior when collapsed for narrow viewports, is based on the margin notes from Joel Dueck’s Try Pollen (external link).

Diagrams and charts use the Color Universal Design (external link) palette, from Color Universal Design-The Selection of Four Easily Distinguishable Colors for all Color Vision Types- by Y. Ichihara and M. Okabe and K. Iga and Y. Tanaka and K. Musha and K. Ito (2008).

Code is highlighted with Shiki (external link). The code themes are Atom (external link)’s One Light and One Dark. The layout is inspired by the parallel Docco (external link) style.

Bibliographic information is stored in CSL-JSON (external link). The processing is custom. The style is not quite MLA-ish.

Photography

My camera is an old Canon EOS 500D. I use a few different lenses but usually travel with a Canon EF 17–40mm ƒ/4L USM. Many of my photos these days are taken with my iPhone.

Media

Images are prepared with ImageMagick (external link). Exiv2 (external link) is used to process metadata. PNG images are optimized with OptiPNG (external link) and JPEG images are optimized with MozJPEG (external link).

Videos are processed with ffmpeg (external link) and captioned with Aegisub (external link).

Maps

Maps use Natural Earth (external link) data and are rendered with Mapnik (external link). The map on the archives page is a Kavrayskiy VII projection. Pins are projected with PROJ (external link). Unless otherwise noted, geo data is expressed in WGS 84 (EPSG:4326) coordinates.

Diplograph and Cookies

Diplograph does not use any cookies or other local storage mechanisms for tracking.

Diplograph and JavaScript

Diplograph does not require JavaScript to be enabled. Some pages might have interactive examples or tools that use JavaScript, but there will usually be a small note letting you know about these.

Licenses and Notices

Additional Notices and Licenses.