this page uses everything an article on this blog can use, and says how each thing is written. it is also the page to open after changing the blog, to see that nothing broke.

every number on this page was measured from the blog's own files on 16 october 2026

• the weights behind the charts csv · 2.7 kb

  version 25 · 16 october 2026 · sha-256 28326cb71a7854059518b544efc78dca01d98b4510c8342bc585b91535690499

how a page reaches you

the blog is one html page, the frame. it holds the sidebar, the type and the list of articles. an article is a plain fragment of html in a folder of its own, and the folder is its address. the frame sets it on the page, however the reader came to it. whatever an article needs beyond prose and tables, a chart, a block of code, a note in the margin, is a piece: a small script, a stylesheet or both, fetched only by the articles that use it.

nothing comes from another site: no fonts, no scripts, no counters.¹ four words come up again and again below:

the frame index.html, site.css, site.js

what every page pays for: 13.9 kb gzipped, of the 14 it is allowed.

an article its own index.html

a fragment: its text, under a few lines that make the file a page of its own and say what it is to a link preview. 40 kb at most, except for this one: it has to show every piece there is, and the checker names it and allows it 60.

a piece assets/chart.js, assets/chart.css and the like

fetched when an article needs it. the article says which in a line at its own top, written there by a script that reads its text. each has a budget of its own.

the library at the foot of index.html

the list of articles: a title, a line, a date and a few tags for each.

every address is a folder with a page in it, so the blog runs from any static host, in any folder, with nothing to configure: typography/ is a section, typography/everything-this-blog-can-do/ is this page, and tag/blog/ is everything filed under a tag. every heading like the one above has an address of its own, after a #, and a line in the sidebar. the addresses the blog had before, like #/typography, still lead to the right place.

the frame around an article

before any piece, this is what the frame does for every article:

• a sidebar on the left lists the sections, each with a count of its articles, and a dot beside the one you are in. on a phone it folds into a menu.
• under it, the headings of the article. the one being read is marked, and it follows as you scroll.
• a thin line across the top of the page fills as the article is read.
• above the title: the section, the date, and how long the article takes to read.
• at the foot: the article before and after, the section, the tags, and the other parts when it belongs to a series. under the article before and after, up to three others that share the most tags with it, each under related, chosen by scripts/head.mjs from the library and named in the article's first lines, so the reader's browser does no choosing. what the foot leads to already is left out, and so is the same article in another language. this one shares no tag with another, so its foot has none, and with the five articles there are now no foot has one: the ones that share tags sit beside each other in a section, or translate each other.
• an article starts loading when its link is pointed at for a moment, focused or pressed, so it is usually there by the time the press ends, and it is fetched once however often its link is pointed at. a pointer that only passes over a link on its way elsewhere fetches nothing, and a connection that asks to save data gets nothing before the press.
• from one page to the next, the old page fades into the new one in a quarter of a second, where the browser can. nothing waits on the fade: the new page is set at once, and only the way it takes the old one's place changes. a reader who asks for less motion gets the new page fading in on its own, without the old one.
• what a reader opens is kept in their own browser by a worker, so it opens again with no connection: the frame, the type, every page they opened and the pieces it asked for, and the words the search reads once it has been opened, but not the pictures, the clips or the sounds. an article they never opened says it could not be fetched, and the sections and the tags show whole. with a connection, the worker changes nothing: every page is fetched as if it were not there, so a change to the blog reaches a reader who comes back exactly when it would without it. a reader lets it all go by deleting the site's data in their browser.
• a link to a heading lands on it softly. a link to something smaller, a note or a reference, also tints it for a moment, so the eye finds it.
• light mode only. readers who ask their system for less motion keep the fades and lose the movement, and readers who ask for more contrast get darker small print: the faint ink of the date above the title, of every caption and of the heads of tables steps from 5.1 to 1 on the paper to 7.9. chrome shows it under rendering in its developer tools, as prefers-contrast: more.

one piece comes with length, not with anything written: an article that takes 20 minutes or more to read, as this one does, keeps the part its reader left off at, in their own browser, and offers it when they come back. read past a heading or two, close the tab, and open this article again from its address: a note at the foot of the screen leads back to the part, and escape or a scroll sends it away. nothing is kept short of the first heading, and the part is let go at the end.

two more things belong to the frame without being part of it. the frame only knows how to fetch them, and does so when a reader first asks. the search is one: the entry under the sections, or /. it answers at once from titles, decks and tags, then reads the words of every article and searches those as well: a file written beside the feed, each article cut at its headings with its markup taken out, a quarter lighter than the feed and nothing to take apart. under each article it found are the parts that say what was asked for, and each is a link to that heading. try it with glider: it finds this sentence, and the clip under images. nothing typed there is sent anywhere.

the other is a handful of keys, for reading without the mouse:

single keys can get in the way of software that types for its reader, so the foot of the search has a switch that turns them off, remembered on that device. the two together weigh 5.0 kb, and a reader who never presses a key or opens the search never fetches a byte of them.

words

everything visible is lowercase. a capital survives only where it carries meaning, and the markup has to say so:

the bacterium Escherichia coli carries the gene lacZ in its DNA and grows best near pH 7. to check an article, type node scripts/check.mjs. to close a picture, press esc. and a phrase can be picked out like this one.

it reads like an article, never like a dashboard

— the first rule in the readme

<p>the bacterium <i lang="la">Escherichia coli</i> carries the gene <var>lacZ</var>
in its <abbr title="deoxyribonucleic acid">DNA</abbr> and grows best near
<span data-case>pH</span> 7. … press <kbd>esc</kbd>. and <mark>a phrase can be
picked out</mark> like this one.</p>

<blockquote>
  <p>it reads like an article, never like a dashboard</p>
  <p class="meta">— the first rule in <cite>the readme</cite></p>
</blockquote>

seven things keep their capitals:

1. <code>, <pre> and <kbd>: code, and keys.
2. <cite> and <blockquote>: a citation, and someone else's words.
3. <abbr>: an abbreviation, set a little smaller so its capitals do not shout.
4. lang on anything: a scientific name, or a phrase in another language.
5. <var> and <math>: a symbol, and a formula.
6. data-case on anything: a unit, a product, a name that insists.
7. class="qty": a quantity, whose unit may need them.

a quantity is a number and a unit that belong together. marked up as one, it is never broken across two lines, and the space typed between its parts is set as a thin one:

light crosses 299 792 458 m/s, a mole holds 6.022 × 10²³ things, the earth leans 23° 26′ from upright, and nothing gets colder than −273.15 °C, which is 0 K.

a quantity can also be written the way a program prints it, and is then set the way a paper does. an electron carries 1.602176634e-19 C, betelgeuse stands at 5h 55m 10.3s, and the universe is growing by 67.4 +- 0.5 km/s for every megaparsec (planck 2020). in the page's own source those are 1.602176634e-19 C, 5h 55m 10.3s and 67.4 +- 0.5 km/s, and that is how the feed still gives them.

chemistry is typed the same plain way, in a <span class="chem">, where it also keeps its capitals. a number after a letter goes below the line and one in front stays, a caret raises a charge or a mass number, and -> is an arrow. a leaf makes sugar by 6CO2 + 6H2O -> C6H12O6 + 6O2, a sulfate ion is SO4^2-, and the carbon that dates a bone is ^14C.

the checker holds a quantity to the signs made for it: a minus and not a hyphen, a multiplication sign and not the letter beside it, primes and not straight quotes, a raised power and not a caret.

a key is a <kbd>, and so is the button of a controller, with class="pad": round when it holds one sign, a pill when it holds more, and ringed in one of the four inks when the button has a colour of its own. the best known cheat in games is ↑ ↑ ↓ ↓ ← → ← → B A, and then start. buttons held together go inside one more <kbd>, which keeps them on a line: A + B + select + start sends most game boy games back to their title screen.

and what a reader may not want to know yet can wait under a cover, until it is clicked or opened from the keyboard with enter. the first seven castles of Super Mario Bros. all end on the same news: the princess is in another castle.

<span class="qty">6.022 × 10<sup>23</sup></span>
<span class="qty">−273.15 °C</span>
<span class="qty">67.4 +- 0.5 km/s</span>
<span class="chem">6CO2 + 6H2O -&gt; C6H12O6 + 6O2</span>

<kbd class="pad">↑</kbd> <kbd class="pad" data-ink="2">B</kbd> <kbd class="pad">start</kbd>
<kbd><kbd class="pad">A</kbd> + <kbd class="pad">B</kbd></kbd>

<span class="spoiler">the princess is in another castle</span>

the cover is put on by the same script that takes it off. a reader whose browser runs no scripts, or reads the article in a feed, gets the sentence plain.

this is a line of small print, a paragraph with class="meta". the line under it is an <hr>.

words in another language ask for more. a sentence taken apart word by word is a <dl class="gloss">: each word in a <div> with what it means under it, and the pairs wrap the way words do. the labels of grammar go in <abbr>, and are set in small capitals.

a reading set over a word is a <ruby>, which browsers have long known how to set: 日本語にほんご is the japanese word for the japanese language, with the way it is said written over it in the script that spells sounds.

<dl class="gloss">
  <div><dt lang="es">sabés</dt><dd>know.<abbr>2SG</abbr></dd></div>
  <div><dt lang="es">que</dt><dd>that</dd></div>
</dl>

<ruby lang="ja">日本語<rt>にほんご</rt></ruby>

an original and its translation are a <figure class="facing">. the paragraphs are written in turn, one of each, and set in two columns, so every pair starts level however long either half runs. on a narrow page each translation goes under its original.

and a source set down as it was written is a <blockquote class="source"> around a list of its lines. the lines are numbered the way an edition numbers them, the first and every fifth. a quotation keeps its capitals, so these do. what an editor has supplied goes in an <ins> and is set in brackets, and an empty one is a gap nobody could fill.

<figure class="facing">
  <p lang="la">Gallia est omnis divisa in partes tres, …</p>
  <p>all gaul is divided into three parts. …</p>
</figure>

<blockquote class="source" lang="la">
  <ol>
    <li>AD · DECLARANDVM · QVANTAE · ALTITVDINIS</li>
    <li>MONS · ET · LOCVS · TANT<ins>IS · OPER</ins>IBVS · SIT · EGESTVS</li>
  </ol>
</blockquote>

some things have to be heard. a link to a sound file with class="say" gets a mark to press: the sound plays in the page, and stops when it is pressed again. nothing is fetched before that, and nothing ever plays by itself. this is one note, twice: the a that orchestras tune to, 440 vibrations a second, first as a square wave and then as a sine. the pitch is the same and the sound is not.

<a class="say" href="a440.wav">one note, twice</a>

and each word can carry a number. in a <p class="tokens">, every word written as a <data value="…"> is tinted by how large its number is, the way a cell is in a table with class="heat". the scale is written under the text with what the numbers count, and pointing at a word gives its own. writing about language models, it is the usual way to show how much weight each word was given. here it is one of this blog's rules, each word tinted by how many times this article had used it when the sentence was added, on 12 october 2026, among 15,046 words:

it reads like an article, never like a dashboard

the numbers run from 2 to 698, so the scale is in powers of ten, which is what data-log asks for. data-min and data-max pin its ends, for two paragraphs that should be read against each other, and numbers on both sides of zero take an ink for each side.

<p class="tokens" data-log data-unit="times in this article">
  <data value="303">it</data> <data value="16">reads</data> <data value="17">like</data> …
</p>

lists

a list is bullets, numbers, or terms with their definitions, and this page uses all three. seven more kinds are drawn with more than a marker.

a list inside a list, with class="tree", is drawn with its branches. this is the folder the blog is served from:

• blog/
  • index.html the frame, with the library at its foot
  • feed.xml
  • assets/
    • site.css, site.js the rest of the frame
    • fonts/
    • tree.css and a file or two like it for every other piece
  • scripts/
    • check.mjs
    • tour.mjs which measures this article
  • typography/
    • index.html the section's page
    • everything-this-blog-can-do/
      • index.html this article
      • weights.csv
      • stylesheet.png and the rest of what it shows
  • software/ and the other sections
  • tag/ a page for every tag

a tree can also show a change. a name inside <ins> is new, a name inside <del> is gone, and a <data> is a size, set at the far end of its line so that the sizes make a column. this is what the pull request that added this paragraph did, in bytes as they are stored. nothing has ever been taken out of the blog's folder, so there is no file struck out to show: the only things struck out are the sizes that changed.

• assets/
  • code.css 3,030 3,326
  • code.js 7,499 8,318
  • files.css 1,240 2,110
  • files.js 870
  • matrix.css 692
  • matrix.js 639
  • site.js 16,835 16,884
  • tabs.css 949
  • tabs.js 1,931
  • tree.css 1,985 2,390
• scripts/
  • check.mjs 47,496 49,340

<ul class="tree">
  <li><code>assets/</code>
    <ul>
      <li><ins><code>tabs.js</code></ins> <data value="1931">1,931</data></li>
      <li><del><code>old.js</code></del></li>
      <li><code>tree.css</code> <data value="2390"><del>1,985</del> <ins>2,390</ins></data></li>
    </ul>
  </li>
</ul>

with data-across the same list runs across the page, each fork opening to the right of its name. a fork may go without a name, which is all a family tree asks for. these are the great apes, in the order their lines parted (prado-martinez and others 2013):

<ul class="tree" data-across>
  <li>great apes
    <ul>
      <li>orangutans <i lang="la">Pongo</i></li>
      <li>
        <ul>
          <li>gorillas <i lang="la">Gorilla</i></li>
          <li>…</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

when the lengths should say something, the list is a class="clade" and every item carries a data-length: how long the branch that leads to it is. each tip gets a line of its own, and each branch runs as far across the page as it is long. with data-ago the lengths are time, and an axis under the tree counts back from the tips. with data-unit they are anything else, and a bar of one round length says how much. these are the african apes, by when their genomes parted (scally and others 2012):

<ul class="clade" data-ago="million years">
  <li data-length="8.25">
    <ul>
      <li data-length="1.75">western gorillas</li>
      <li data-length="1.75">eastern gorillas</li>
    </ul>
  </li>
  <li data-length="4">…</li>
</ul>

things done in order are an <ol class="steps">: a number for each, on one line from the first to the last, a <small> for the detail, and a <time> for a step that has one, set beside it. this is how every change reaches the blog, with the times of the one that added this section:

1. 11:14:41 open an issue it says what is wanted and why, and carries a label for its kind and a milestone.
2. make a branch from it named after the issue: 55-small-things-for-words.
3. 11:25:44 commit one line, lowercase, starting with the area it touches: site: …
4. 11:25:48 open a pull request its description starts with closes #55, which ties the two together.
5. 11:26:01 wait for two checks one reads the steps above, the other runs scripts/check.mjs.
6. 11:26:06 squash and merge the branch lands as one commit on main, which moves in no other way.

<ol class="steps">
  <li><time datetime="2026-10-12T11:14:41-03:00">11:14:41</time> open an issue
    <small>it says what is wanted and why.</small></li>
  <li>make a branch from it <small>named after the issue.</small></li>
</ol>

when it is the thing handed on that matters, and not the hour, the list is an <ol class="flow">: a box for each step and an arrow to the next, across the page for as long as there is room. a list inside a step is what happens there side by side. this is the same road, as a change travels it:

1. an issue
2. a branch
3. a pull request
   • flow
   • checks
4. one commit on main

<ol class="flow">
  <li>a branch</li>
  <li>a pull request
    <ul>
      <li>flow</li>
      <li>checks</li>
    </ul>
  </li>
</ol>

a conversation is an <ol class="chat">: a turn for each item, and each turn starts with who spoke, in a <b>. it is set like the script of a play, and nobody's words go in a bubble. each speaker gets a mark of their own, in the order they first speak. a turn holds whatever a list item can, so a call to a tool is a block of code. and a turn that runs long is folded until it is asked for, as the third one is here.

<ol class="chat">
  <li><b>user</b> what were the last things added to the blog?</li>
  <li><b>tool <code>git</code></b> <pre><code>ff17ef0 site: an article names the pieces it needs …</code></pre></li>
</ol>

a few facts about one thing are a <dl class="card">: terms and what each comes to, ruled like a small table and no wider than a card. in an aside with a name it is the box of facts an encyclopedia sets beside its text. the numbers on this one were counted by running the gun, which is further down, and who found it is as gardner told it.

<dl class="card">
  <dt>period</dt><dd>30 generations</dd>
</dl>

the last kind is the list at the top of this page: files that travel with an article are a <ul class="files"> of links. a paragraph under a link says what is known about the file: which version it is, when it was made, and its sha-256, which is shown by its two ends and copied whole. the checker takes the sum of the file again on every run, so a file that changes without its line changing fails.

<ul class="files">
  <li><a href="weights.csv" download>the weights behind the charts <small>csv · 2.7 kb</small></a>
    <p>version 25 · <time datetime="2026-10-16">16 october 2026</time> · sha-256 <code>28326cb7…690499</code></p></li>
</ul>

tables

a table may run wider than the text, and scrolls sideways when it has to. the first column names each row and stays put while the rest moves. numbers are set right, in figures of equal width, so they line up.

<tr>
  <th scope="row"><span class="rank">7</span>math</th>
  <td class="words">a formula</td>
  <td class="none">—</td>
  <td class="best">0.7 kb</td>
  <td>1 kb</td>
</tr>

some tables draw themselves. the numbers stay in their cells, and a last column is added with a picture of each row.

class="range" is for a value and the range it is expected in: a name, a value, a low end and a high end. the range is a band across the middle of the row and the value is a point, so a point outside its band is a number outside its range, and that number is set heavier. every row has a scale of its own, which lets rows in different units share a table. a range with one end has a dash for the other.

class="spans" is for things that last: a name, when it starts and when it ends, as numbers, as times on a clock like 1:23.4, or as dates. every row gets a bar on one scale, from the earliest start to the latest end, and the two ends of the scale are written over it. a row with no end is a moment, and gets a point.

rows that follow each other under one name are a track: the name is said once, and they share its line. a gene is the usual case, its exons on one line and the stretches that are read into protein on the next.

a start or an end can also lie deep in the past, 541 mya or 12 ka, or before year one, 44 bce. when the times are too far apart for one ruler, data-log sets the scale in powers of ten. zero has no place on such a scale, so the present is put one power of ten past the nearest time the table names.

three more classes are for reading a table at a glance. with class="sort" every column head is a button: one click puts the rows in order by that column, a second turns the order round, and a third puts them back the way they were written. numbers start from the largest, words from a.

class="heat" tints every cell by how large its number is, in one hue from the paper up. the numbers stay, so the tint is a second way to read them. one scale covers the table, unless data-by="column" or data-by="row" gives each its own. numbers on both sides of zero take two inks, one for each side.

and class="delta" on a cell marks a number as a change: an arrow goes in front of it, up or down by its sign, in an ink for each.

and a table of yes and no is a class="matrix". every cell starts with yes, no or partly, and shows a disc for it: full, empty or half. the word stays inside the mark, for a screen reader and for whoever copies the table, and whatever a cell says after its word stays beside it. this is what a block of code gets a colour for, by language:

<table class="matrix">
  <tr><th scope="row">json</th><td>no <small>it has none</small></td><td>partly</td><td>yes</td></tr>
</table>

code

a block of code gets a button that copies it. a label says where it came from. the language, written the way markdown tools already write it, turns on colour: comments step back, strings and numbers step forward, and everything else stays ink. keywords are left alone on purpose, so a page of code stays calm.

export const pieces = [
  ['code', 'js css', 'pre'],
  ['pair', 'css'],
  ['callouts', 'js css'],
  ['tabs', 'js css'],
  ['listing', 'js css'],
  ['chart', 'js css', '.bars .lines .dots .blocks .days .areas .slope .hist .box .flows .sky .tiles .curve'],
  ['bars', 'js css'],
  ['lines', 'js'],
  ['dots', 'js'],
  ['plot', 'css', '.lines .dots .areas .slope .curve'],
  ['areas', 'js css'],
  ['slope', 'js css'],
  ['hist', 'js css', '.hist .box'],
  ['flows', 'js css'],
  ['treemap', 'js css'],
  ['graph', 'js css'],
  ['flow', 'css'],
  ['clade', 'js css'],
  ['events', 'js css'],
  ['blocks', 'js css'],
  ['days', 'js css'],
  ['spark', 'js css'],
  ['range', 'js css'],
  ['spans', 'js css'],
  ['of', 'js css'],
  ['heat', 'js css'],
  ['sort', 'js css'],
  ['delta', 'js css'],
  ['qty', 'js css'],
  ['pad', 'css'],
  ['tree', 'css'],
  ['steps', 'css'],
  ['spoiler', 'js css'],
  ['revise', 'js css', 'ins del .changes'],
  ['aside', 'css', 'aside details'],
  ['math', 'css', 'math'],
  ['image', 'js css', 'img'],
  ['marks', 'js css'],
  ['compare', 'js css'],
  ['pixel', 'js css', '.pixel .palette'],
  ['clip', 'js css'],
  ['notes', 'js css', '.notes .refs'],
  ['dump', 'js css', '.hex .seq .fields .map .align'],
  ['seq', 'js'],
  ['align', 'js css'],
  ['map', 'js'],
  ['files', 'js css'],
  ['matrix', 'js css'],
  ['trace', 'js css'],
  ['gloss', 'css', '.gloss ruby'],
  ['facing', 'css'],
  ['source', 'css'],
  ['say', 'js css'],
  ['chat', 'js css'],
  ['tokens', 'js css'],
  ['board', 'js css'],
  ['frames', 'js css', '.frames .blink'],
  ['card', 'css'],
  ['scale', 'js css', '[data-across]'],
  ['set', 'css'],
  ['sky', 'js css'],
  ['tiles', 'js css'],
  ['chem', 'js css'],
  ['knob', 'js css'],
  ['curve', 'js'],
  ['sum', 'css', 'tfoot'],
  ['glossary', 'js css'],
  ['fig', 'css'],
];

const calls = (html) => ([name, , signs = `.${name}`]) =>
  signs.split(' ').some((sign) =>
    RegExp(sign[0] === '.' ? `<[^>]+class="[^"]*\\b${sign.slice(1)}\\b` : sign[0] === '[' ? `<[^>]+\\s${sign.slice(1, -1)}[=\\s>]` : `<${sign}[\\s>]`).test(html),
  );

that is the whole list of pieces, and the four lines that read it: a name, what to fetch, and the tags, classes or attributes that call for it, the piece's own name when none are given. the frame never sees the list. a script reads it, and writes at the top of each article the pieces that article needs, so the frame weighs the same however long the list grows. the lines are numbered from 7, where the list starts in the file, and line 13 is marked. a long line does not wrap, and the last but one is long: the block grows past the text until it meets the edge of the page, and scrolls after that.

a patch is a block in the language diff. the lines it adds and removes are tinted:

@@ -652,7 +652,13 @@
-.prose :is(th, td).l {
+.prose :is(th, td):is(.l, .words) {
   text-align: left;
 }
+
+/* a cell of words rather than a number: it wraps where it runs long */
+.prose .words {
+  min-width: 10em;
+  white-space: normal;
+}

and a phrase inside a block can be pointed at with <mark>:

python3 -m http.server 4173  # then open http://localhost:4173

<pre data-label="scripts/pieces.mjs" data-lines="7" data-mark="13">
<code class="language-js">export const pieces = [
  ['code', 'js css', 'pre'],
  …
];</code></pre>

twenty-two languages are known: js, ts, c, cpp, rust, zig, go, java, css, json, python, ruby, sh, make, yaml, toml, asm, sql, lua, html, xml and svg. anything else is shown plain.

the same thing said several ways is a <figure class="tabs"> around the blocks. one shows at a time, under a row of the names their data-labels give them. a name picked in one set is picked in every set on the page that has it, so a language is chosen once. without scripts, and on paper, every block shows. this is a function that counts the steps a number takes to reach one, halving when it is even, and tripling and adding one when it is odd:

int steps(unsigned long n) {
    int count = 0;
    while (n != 1) {
        n = n % 2 ? 3 * n + 1 : n / 2;
        count++;
    }
    return count;
}

def steps(n):
    count = 0
    while n != 1:
        n = 3 * n + 1 if n % 2 else n // 2
        count += 1
    return count

function steps(n) {
  let count = 0;
  while (n !== 1) {
    n = n % 2 ? 3 * n + 1 : n / 2;
    count++;
  }
  return count;
}

and this is each of them asked about twenty-seven. all three say 111.

printf("%d\n", steps(27));

print(steps(27))

console.log(steps(27));

<figure class="tabs">
  <pre data-label="c"><code class="language-c">…</code></pre>
  <pre data-label="python"><code class="language-python">…</code></pre>
</figure>

a session at a terminal is a block of language-console. a line that starts with $, # or % and a space was typed, and so is the line after one that ends in a backslash, when it starts with >. everything else is what came back, and it steps behind. the prompt is not picked up with a selection, and the copy button takes only what was typed. these are the thirty-nine commits on main up to pull request #78, counted by the area each one names. the odd one out is the commit the repository was made with:

$ git rev-list --count --first-parent a5a01ca
39
$ git log --first-parent --format=%s a5a01ca \
>   | cut -d: -f1 | sort | uniq -c | sort -rn
     25 site
      4 fix
      4 article
      3 design
      2 repo
      1 Initial commit

two blocks in a <figure class="pair"> sit side by side, to be read line against line, and stack on a narrow page. pointing at a line picks out the one level with it on the other side, so a blank line is part of the text: it is what keeps the two level. on the left is a function that counts the steps of a collatz sequence, written the way the compiler read it. on the right is what gcc 15.2 made of it at -Os, with the labels named by hand.

int steps(unsigned long n) {
    int count = 0;
    while (n != 1) {

        if (n % 2) {

            n = 3 * n + 1;
            count++;

        }
        n = n / 2;
        count++;
    }
    return count;
}

steps:
        xor   eax, eax
.loop:  cmp   rdi, 1
        je    .done
        test  edi, 1
        je    .half
        lea   rdi, [rdi+rdi*2]
        inc   eax
        inc   rdi

.half:  shr   rdi, 1
        inc   eax
        jmp   .loop
.done:  ret

1. a register xored with itself is zero. this is count = 0, in two bytes where a plain move takes five.
2. three times n without a multiplication: the instruction that works out addresses adds n to twice n.
3. the + 1, and after it no jump back to the test at the top. three times an odd number, plus one, is even, so the compiler knows which way the next turn goes and falls straight into the halving.

the numbers in the right block are callouts: a <mark data-note="1"> around what is meant, and an <ol class="callouts"> after the block with a line for each number. pointing at a mark lights its line, and pointing at a line lights its mark. the copy button leaves the numbers out.

<figure class="pair">
  <pre data-label="steps.c"><code class="language-c">…</code></pre>
  <pre data-label="gcc -Os"><code class="language-asm">steps:
        <mark data-note="1">xor   eax, eax</mark>
        …</code></pre>
  <figcaption>each line of c sits beside the first instruction that carries it out.</figcaption>
</figure>

<ol class="callouts">
  <li>a register xored with itself is zero.</li>
</ol>

a disassembly is a <pre class="listing">, pasted as objdump prints it. it is set in columns: where each instruction is, the bytes it is made of, and what it says. every jump that lands inside the listing gets an arrow in the gutter, short ones on the inside and long ones further out, and pointing at a jump, or at the place one lands, picks its arrow out. on a phone the bytes step aside. this is the same function, read back out of the object file:

0000000000000000 <steps>:
   0:	31 c0                	xor    eax,eax
   2:	48 83 ff 01          	cmp    rdi,0x1
   6:	74 18                	je     20 <steps+0x20>
   8:	f7 c7 01 00 00 00    	test   edi,0x1
   e:	74 09                	je     19 <steps+0x19>
  10:	48 8d 3c 7f          	lea    rdi,[rdi+rdi*2]
  14:	ff c0                	inc    eax
  16:	48 ff c7             	inc    rdi
  19:	48 d1 ef             	shr    rdi,1
  1c:	ff c0                	inc    eax
  1e:	eb e2                	jmp    2 <steps+0x2>
  20:	c3                   	ret

<pre class="listing" data-label="objdump -d -M intel steps.o">
0000000000000000 &lt;steps&gt;:
   0:	31 c0                	xor    eax,eax
   2:	48 83 ff 01          	cmp    rdi,0x1
   6:	74 18                	je     20 &lt;steps+0x20&gt;
   …
</pre>

what a listing does not show at a glance is the shape of the thing: where it forks, and where it comes back round. a <table class="graph"> is a list of edges, one to a row: where it starts, where it ends and, if it has one, a word for it. the things are set in layers down the page, each under what leads to it, and an edge that goes back up is drawn round the side. a class on a row, a to d, gives its edge an ink. this is every way through the function above, by the addresses in the listing:

<table class="graph">
  <thead><tr><th>from</th><th>to</th><th>when</th></tr></thead>
  <tbody>
    <tr><td>n is 1?</td><td>return count</td><td>yes</td></tr>
    <tr><td>n is 1?</td><td>n is odd?</td><td>no</td></tr>
    <tr class="b"><td>n = n / 2</td><td>n is 1?</td><td>again</td></tr>
  </tbody>
</table>

and what it does, step by step, is a <table class="trace">: a row for each step, and the state after it. a cell that is not what it was in the row above is picked out, and the rest step back, so the eye goes to what a step did. this is the function asked about the number two, as a debugger stepped through it:

<table class="trace">
  <thead><tr><th>after</th><th>rdi</th><th>eax</th><th>zero flag</th></tr></thead>
  <tbody>
    <tr><th scope="row">xor eax,eax</th><td>2</td><td>0</td><td>1</td></tr>
    <tr><th scope="row">cmp rdi,1</th><td>2</td><td>0</td><td>0</td></tr>
  </tbody>
</table>

charts

a chart is a table with a class. the frame reads the numbers and draws them, and the table stays in the page: a screen reader gets it instead of the drawing, and so does a feed reader. the first column names each row, every other column is a series, and the caption becomes the title.

<figure>
  <table class="bars" data-max="100">
    <caption>how full a budget is</caption>
    <thead><tr><th>part</th><th>used</th></tr></thead>
    <tbody>
      <tr class="a"><th scope="row">the frame</th><td>99%</td></tr>
      <tr><th scope="row">chart</th><td>92%</td></tr>
      …
    </tbody>
  </table>
  <figcaption>one row is picked out, and the scale is pinned at 100.</figcaption>
</figure>

with several columns of numbers, each row becomes a group of bars, and the head of the table becomes the legend. there are four inks, and no chart draws more than four series.²

numbers below zero put bars on both sides of a line:

when the columns are parts of a whole, class="bars stacked" sets them end to end and writes the total at the tip:

two series can also stand back to back. class="bars mirrored" runs the first left from a middle line and the second right, which is how two halves of one thing are compared: two sexes by age, two sides of a trade, two models on the same tests.

class="bars waterfall" is for changes that add up. each bar starts where the one above it ended, a rise in one ink and a fall in another, and a row in a <tfoot> is what they come to, drawn from zero.

a number can say how sure it is. a cell written as 52.8 ± 1.6 ms, as 1.16 (1.15–1.18) or as two ends, 36–43, gives a chart an interval as well as a value, and each form draws it in its own way. on a bar it is a whisker:

a line chart runs across the rows in order. it does not write every value, so the pointer reads them off it, and a link under it swaps the drawing for the table. data-line on the table is a value to read the rest against: a dotted rule, named in the legend in the words it was written with.

the numbers over that chart are events: a <dl class="events"> straight after the table, each <dt> saying when in the words of a row, #46, or of two with a dash between them, #30–#35. a moment gets a rule and a stretch gets a band, and the list becomes the key. without the drawing it is still a list of what happened and when.

two measures on different scales never share a chart as they are. set to a common start they can: data-index="low" names a row, and every series becomes a share of what it was there, which is 100.

class="areas" piles the series of a line chart on each other, for the parts of a whole as they change. the top edge is the total, and only the bottom series can be read against a flat line, so the one that matters most goes first.

class="slope" reads a table the other way: a line for each row, running across the columns. with two columns it says what rose and what fell between two moments. with more, and data-flip when the numbers are places in a ranking, it says who overtook whom.

charts set side by side in a <figure class="multiples"> share one scale, so they can be read against each other:

on a line, how sure a number is becomes a band around it:

some numbers do not slope. a count stays where it is until something changes it, and class="lines stepped" draws it that way:

two columns of numbers make a scatter with class="dots": across by the first, up by the second. the rows picked out are named, and the rest go grey.

some numbers need another kind of scale. data-log counts in powers of ten, for what spans several of them, and data-flip runs a scale backwards, for measures where less is more. each names the axis it is for, x, y or both. a third column of numbers sizes the dots, and the area of a dot is what carries the number.

class="dots joined" draws a line through the points in the order of the rows. a line chart spaces its rows evenly, whatever they are called. this one puts each where its number says, so it is the form for a line over uneven time, and with the two scales above, for time counted backwards.

with one column of numbers, class="dots" gives each row a line of its own: a point where its number falls, its interval through it, and the number as written at the end. unlike a bar, a point does not start from zero, so it can sit on either side of a rule.

class="blocks" is for things that lie in an order and take up room: the sections of a file, the functions of a binary, what a page sends. each row is a name, a size and a kind. they are drawn as one long strip cut into rows, every block as wide as its size and tinted by its kind, and the legend says what share each kind comes to.

class="days" is for a number a day: a date in the first column, written year first, and a value in the second. it is drawn as a calendar, a column for each week with monday at the top, and each day is tinted by its number in one hue. the pointer reads a day off it.

and a share can be counted out. a paragraph with class="of" that says 8 in 100 gets a hundred dots over it, eight of them filled. several in one figure sit side by side.

and a line can sit in a sentence. the frame went from 9.9 kb to 13.9 9.86 9.85 10.65 10.51 10.54 10.55 10.70 10.77 10.84 10.88 10.89 11.36 11.45 11.53 11.65 11.37 11.39 11.42 11.44 11.48 11.50 11.51 11.54 11.76 11.80 11.80 11.82 11.85 11.87 11.88 11.89 11.92 11.46 11.55 11.71 11.83 11.97 11.97 11.98 12.73 12.86 12.86 12.89 13.07 13.42 13.50 13.62 13.74 13.81 13.87 in fifty steps. a sparkline has no axis and no scale: it says which way something went, so the numbers that matter belong in the words around it (tufte 2006).

the frame went from 9.9 kb to 13.9
<span class="spark">9.86 9.85 10.65 10.51 … 13.87</span> in fifty steps.

some charts are drawn from the things themselves instead of from a summary of them. the table has a row for each thing that was measured, and the class says what to make of them. class="hist" counts the values into bins. class="box" gives each name a box: the middle half of its values, a line at their median, and whiskers out to the smallest and the largest. a table can ask for both, and then they share a scale.

class="flows" is for what goes from one place to another. each row is a source, a destination and an amount, and each becomes a band as thick as its amount, between boxes as tall as everything that passes through them. a destination that is the source of another row gets a column of its own, further right.

a nested list with a number on each leaf, <ul class="treemap">, is drawn as tiles whose areas are the numbers, each group in its own ink. it shows at a glance what a bar chart of fourteen rows makes the eye add up: how much each group comes to. the list stays behind the drawing, one click away.

two more forms are maps. a <table class="sky"> has a row for each star: its right ascension and its declination in degrees, and its magnitude. it is drawn the way an atlas prints the sky, ink on paper, east on the left, a brighter star a larger dot. these are the nine stars marked on the picture of orion, figure 2, from the same numbers:

and a <table class="tiles"> draws a map without drawing a coastline. each row is a place, where its tile goes, across and then down, and a number. every place gets a square of one size, tinted by its number, so a small place counts for as much to the eye as a large one. a tile may sit a part of a step along, which staggers the rows. it is made for provinces and countries. here the places are the keys of a keyboard, and the number is how much of this article each letter was on 12 october 2026, out of 65,487 letters:

<table class="sky">
  <tr><th scope="row">rigel</th><td>78.63</td><td>−8.20</td><td>0.13</td></tr>
</table>

<table class="tiles">
  <tr><th scope="row">e</th><td>3</td><td>1</td><td>12.4</td></tr>
  <tr><th scope="row">a</th><td>1.25</td><td>2</td><td>9.1</td></tr>
</table>

bytes

two drawings take a file format apart. the first is a hex dump: bytes written as pairs of hex digits, set sixteen to a row, or eight where sixteen would not fit, with the offset in front and the same bytes as text behind. these are the first 48 bytes of the file this sentence is drawn from, a woff2 file (levantovsky and levien 2018). its first four spell wOF2.

77 4f 46 32 00 01 00 00 00 00 a2 80 00 14 00 00
00 01 31 e8 00 00 a2 0d 00 01 00 00 00 00 00 00
00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00

a range in a <mark> is tinted in both columns, and named under the dump with where it starts and how long it is. the second drawing is the layout of a header: a table with a row for each field and its size, and above it a strip with every field as wide as it is.

with data-unit="bit" the same table is a register, or a byte that packs several things. it is written from its highest bit down, as a register is, and the number on each field is the bit it starts at. this is the last byte of the instruction that triples n in the listing, 48 8d 3c 7f: the byte that says rdi, plus twice rdi.

<pre class="hex" data-label="assets/fonts/newsreader-core.woff2">
<mark data-label="signature">77 4f 46 32</mark> <mark data-label="flavour: truetype outlines">00 01 00 00</mark> …
</pre>

<table class="fields" data-per="16">
  <thead><tr><th>field</th><th>bytes</th><th>in this file</th></tr></thead>
  <tbody>
    <tr class="a"><th scope="row">signature</th><td>4</td><td><code>wOF2</code></td></tr>
    …
  </tbody>
</table>

two dumps in a <figure class="pair"> are compared, byte against byte, and the ones that are not the same are picked out in both: on the left in the tint a patch gives to what it takes out, on the right in the tint for what it puts in. each face of the blog's type comes in two files, and their headers begin alike. the first of the upright and the first of the italic:

77 4f 46 32 00 01 00 00 00 00 a2 80 00 14 00 00
00 01 31 e8 00 00 a2 0d 00 01 00 00 00 00 00 00

77 4f 46 32 00 01 00 00 00 00 b5 30 00 14 00 00
00 01 52 3c 00 00 b4 bd 00 01 00 00 00 00 00 00

where things sit, in a file or in memory, is a <table class="map">: a name, a start and a size in each row. the strip above it is drawn to scale, except that nothing is drawn too thin to point at, and a stretch that no row accounts for is hatched. this is the object file the listing was read from:

a sequence is not bytes, but it is read the same way. a <pre class="seq"> sets dna, rna or protein in tens under a ruler, six tens to a row where there is room, with the position each row starts at, and names its marked ranges underneath. this is human insulin as the cell first makes it (uniprot P01308):

MALWMRLLPL LALLALWGPD PAAAFVNQHL CGSHLVEALY LVCGERGFFY TPKTRREAED
LQVGQVELGG GPGAGSLQPL ALEGSLQKRG IVEQCCTSIC SLYQLENYCN

the signal is cut off on the way out of the cell's factory, and the c peptide is cut out from between the two chains, which stay joined. the two pairs of letters left untinted are where those cuts are made.

several sequences that are nearly the same are a <pre class="align">: a line for each, its name and then its letters, with a - wherever one of them has nothing. they are set letter under letter. a letter that is not the one the first sequence has there is tinted, a gap is tinted another way, and the last line has a star under every place they all share. these are the first ninety letters of the gene for β-globin that are read into protein (refseq NG_059281.1), and the same letters with three changes that are found in people: the one behind sickle-cell disease, the one behind haemoglobin e (aziz and others 2025), and a loss of two letters that puts every letter after it out of step (tariq and others 2021).

reference    ATGGTGCATCTGACTCCTGAGGAGAAGTCTGCCGTTACTGCCCTGTGGGGCAAGGTGAACGTGGATGAAGTTGGTGGTGAGGCCCTGGGC
hb s         ATGGTGCATCTGACTCCTGTGGAGAAGTCTGCCGTTACTGCCCTGTGGGGCAAGGTGAACGTGGATGAAGTTGGTGGTGAGGCCCTGGGC
hb e         ATGGTGCATCTGACTCCTGAGGAGAAGTCTGCCGTTACTGCCCTGTGGGGCAAGGTGAACGTGGATGAAGTTGGTGGTAAGGCCCTGGGC
codon 5 −ct  ATGGTGCATCTGACTC--GAGGAGAAGTCTGCCGTTACTGCCCTGTGGGGCAAGGTGAACGTGGATGAAGTTGGTGGTGAGGCCCTGGGC

<pre class="align" data-label="hbb">
reference    ATGGTGCATCTGACTCCTGAGGAGAAG…
hb s         ATGGTGCATCTGACTCCTGTGGAGAAG…
codon 5 −ct  ATGGTGCATCTGACTC--GAGGAGAAG…
</pre>

<figure class="pair">
  <pre class="hex" data-label="newsreader-core.woff2">77 4f 46 32 … 00 00 a2 80 …</pre>
  <pre class="hex" data-label="newsreader-italic-core.woff2">77 4f 46 32 … 00 00 b5 30 …</pre>
</figure>

<table class="map">
  <thead><tr><th>part</th><th>starts at</th><th>bytes</th></tr></thead>
  <tbody>
    <tr><th scope="row">elf header</th><td>0x000</td><td>64</td></tr>
    <tr class="a"><th scope="row">.text</th><td>0x040</td><td>33</td></tr>
    …
  </tbody>
</table>

<pre class="seq" data-label="preproinsulin, homo sapiens">
<mark data-label="signal peptide">MALWMRLLPL LALLALWGPD PAAA</mark><mark data-label="b chain">FVNQHL …</mark>
</pre>

maths

a formula is written in mathml, which browsers set by themselves: no script, no font to download (carlisle and wang). it can sit in a line, like the step of a chart's axis, $s\in \{1,2,5\}\times {10}^k$, or take a line of its own. this is how the frame works out the reading time above every title, from the words $w$ outside tables and code, and the number $b$ of tables and blocks of code:³

<math display="block">
  <mi>minutes</mi><mo>=</mo>
  <mrow><mo>⌈</mo>
    <mfrac><mi>w</mi><mn>230</mn></mfrac><mo>+</mo><mfrac><mi>b</mi><mn>4</mn></mfrac>
  <mo>⌉</mo></mrow>
</math>

numbers and words inside a formula are set in the face of the text around them. a lone letter is a variable and comes out italic. brackets and signs come from the reader's own maths face, so they can look a little different from one machine to the next.

a formula can also be worked out, on numbers the reader changes. a <data class="knob"> is a number in a sentence that is dragged sideways, or moved with the arrow keys, and every <output data-f> works its formula out again. a page that grows by 5% with every pull request weighs

1.6

times what it did after 10 of them, and twice as much after

15

.

<data class="knob" data-name="r" data-min="1" data-max="20" value="5"
  aria-label="percent it grows by each time">5</data>
<output data-f="(1 + r/100)^n" data-places="1">1.6</output>

<table class="curve" data-f="(1 + r/100)^x">
  <tr><th scope="row">10</th><td>1.6</td></tr>
</table>

images

an image lives in the article's folder. it has to say what it shows and how large it is, so the page holds its place while the file is on its way and nothing jumps when it lands. it is fetched when the reader gets near it, never before, and says so itself, with loading="lazy", for a reader who opens the article at its own address. in a figure it opens large on a click, and closes on another click, on esc, or when the page is scrolled on. opened, it can be looked into: the wheel or two fingers bring it closer about the point they are on, a drag moves it, and a click steps back out, to the whole picture first and then to the page. +, - and the arrows do the same. the part that does this is fetched the first time an image is opened.

<figure>
  <a href="stylesheet-large.png">
    <img src="stylesheet.png" alt="five columns of short dark dashes …" width="540" height="330" loading="lazy">
  </a>
  <figcaption>the blog's stylesheet, all 1,127 lines of it …</figcaption>
</figure>

the link around it is optional: without one, the image opens as it is. outside a figure an image sits in the line and does not open, like the dot that marks the current section in the sidebar. an image may weigh 250 kb at most, and the checker measures the file to see that the width and height written beside it are its real shape.

some pictures need pointing at. an <ol class="marks"> after an image is its key, and each item says where its number goes: data-at="62% 31%", across and then down, as shares of the image. where there is room beside the image the key stands there, so that neither has to be scrolled away to read the other, and pointing at a number lights its line.

a picture of somewhere can be marked in that place's own coordinates instead. data-frame on the list says what the picture's left, bottom, right and top edges are, west south east north on a map, and each data-at is then a place: across, and then up. such a mark is a ring round the place, with its number off to the upper right, or wherever left and down send it. and a picture that says how much it spans, with data-across, gets a bar of a round length to measure by. this is orion, drawn from the positions and magnitudes that simbad holds for its stars (wenger and others 2000). its marks are right ascensions and declinations in degrees, and on a chart of the sky east is on the left, so the frame's first number is the larger:

1. betelgeuse α · 0.42
2. bellatrix γ · 1.64
3. meissa λ · 3.66
4. mintaka δ · 2.41
5. alnilam ε · 1.69
6. alnitak ζ · 1.77
7. saiph κ · 2.06
8. rigel β · 0.13
9. hatysa ι · 2.77

a figure the text points at from far away can carry a number. class="fig" counts it, and the number is said before its caption: the picture above is figure 2, and the same stars drawn from a table, under charts, are figure 1. the stylesheet does the counting. the checker reads every link that says “figure” and a number, and fails when the number is not the one its figure has.

<figure class="fig" id="orion-picture"> … </figure>

<p>… the picture above is <a href="#orion-picture">figure 2</a>.</p>

two pictures of one thing are compared best in one place. a <figure class="compare"> with two images of the same shape lays the second over the first and puts a divider between them. it can be dragged, sent somewhere with a press, or moved with the arrow keys once it has the focus, and a data-label on an image names its side. the two below are simulated: the belt and the sword from the chart above with the noise of a short exposure added, once, and then sixty-four times over and averaged.

when two pictures should be read side by side, and not one through the other, they are panels. a <figure class="set"> holds a figure for each, letters them in their corners, and keeps one caption under them all. they stand in a row where there is room and under each other where there is not, and each still opens large.

pixel art is the one kind of picture that must never be smoothed. an <img class="pixel"> is shown at a whole multiple of its size, the largest that fits, counted in the pixels of the screen and not of the page, so that each of its pixels is a clean square and all of them are the same size. data-max="4" holds it to four times. the caption is told what the multiple came to.

a <ul class="palette"> shows the colours themselves: each item gets a swatch of the first colour written in it. these are the four greens most often used to stand for the screen of the first game boy, with how many of the scene's 5,184 pixels wear each.

• #0f380f 2,039
• #306230 2,381
• #8bac0f 633
• #9bbc0f 131

and some things only make sense moving. a short silent loop is written as a still that links to its file, in a <figure class="clip">. that is all a feed reader or a browser without scripts will show, and it is enough. here the still stays until the reader is near, and only then is the clip fetched. it plays while it is in view, rests when it is not, and stops at its button or at a press on the picture. a reader who has asked their system for less motion gets the still, and a button that says play.

<figure>
  <img src="orion.png" alt="a dark sky with the stars of orion …" width="720" height="900" data-across="18.4°" loading="lazy">
  <ol class="marks" data-frame="92.90 -12.03 74.48 10.82">
    <li data-at="88.79 7.41">betelgeuse <small><i>α</i> · 0.42</small></li>
    <li data-at="85.19 -1.94 left down">alnitak <small><i>ζ</i> · 1.77</small></li>
    …
  </ol>
</figure>

<figure class="compare">
  <img src="one.jpg" alt="a grainy grey frame …" width="720" height="450" data-label="one exposure" loading="lazy">
  <img src="sixty-four.jpg" alt="the same frame, smooth …" width="720" height="450" data-label="sixty-four, averaged" loading="lazy">
</figure>

<figure class="set">
  <figure><img src="one.jpg" alt="a grainy grey frame …" width="720" height="450" loading="lazy"></figure>
  <figure><img src="sixty-four.jpg" alt="the same frame, smooth …" width="720" height="450" loading="lazy"></figure>
  <figcaption><b>a</b> one exposure, <b>b</b> sixty-four, averaged.</figcaption>
</figure>

<figure>
  <img class="pixel" src="scene.png" alt="a night in four greens …" width="96" height="54" loading="lazy">
</figure>

<ul class="palette">
  <li><code>#0f380f</code> 2,039</li>
  …
</ul>

<figure class="clip">
  <a href="gun.mp4"><img src="gun.png" alt="black cells on a pale grid …" width="552" height="408" loading="lazy"></a>
</figure>

some pictures are better written than drawn. a <pre class="board"> is a grid with a character for each cell, and the list after it is its legend: each item starts with the character it explains, and data-ink gives that character one of the four inks. a character the legend leaves out is an empty cell, and a space is no cell at all, which is how four boards stand in one block here. this is a glider, generation by generation, with what the rules are about to do to it:

...... ...... ...... ......
..x... ...... ...... ......
.+.o.. .x.o.. ..+x.. ..x+..
.xoo.. .+xo.. .x.o+. ...xo.
..+... ..o+.. ..oo.. ..oo+.
...... ...... ...... ......

frames that follow each other can share one file. an <img class="frames" data-frames="24"> is a strip of that many frames side by side, shown one at a time, six a second unless data-fps says otherwise. it moves only while it is in view and it can be stopped. stopped, a press on the picture moves it on by one. this glider lives on a board six cells square whose edges are joined, so after twenty-four generations it is back where it began:

and two pictures of one shape can take turns, which is how astronomers used to find what had moved between two plates. in a <figure class="blink"> the pictures lie on each other and swap every 0.8 seconds, or every data-every, and data-label names each one under the picture. this is the gun of the clip above, and the same gun thirty generations later. everything in it is back where it was, and the one new thing is the glider it has let go:

<pre class="board" aria-label="four small boards …">
..x... ......
.+.o.. .x.o..
</pre>
<ul>
  <li data-ink="2"><code>x</code> alive, and about to die</li>
</ul>

<img class="frames" data-frames="24" src="glider.png" alt="…" width="3456" height="144" loading="lazy">

<figure class="blink">
  <img src="gun-0.png" alt="…" width="456" height="168" data-label="generation 0" loading="lazy">
  <img src="gun-30.png" alt="…" width="456" height="168" data-label="generation 30" loading="lazy">
</figure>

the checker holds each of these to its form. a mark needs its place, the two sides of a comparison need one shape, pixel art has to be stored without loss and at the size written beside it, and a clip is an mp4 or a webm of 500 kb at most, behind a still that is checked like any other image.

asides and folds

an <aside> is a note beside the argument. a <strong> at its start gives it a name, and class="warn" turns it into a warning, like the one near the top of this page.

a <details> folds away what most readers will not need. it can hold anything an article can.

weight, gzipped

  the shell (html + css + js)                              13.9 kb  of 14
  the library (5 articles)                                  0.6 kb  of 1.2
  code, for the articles that use it                        4.7 kb  of 5
  pair, for the articles that use it                        0.3 kb  of 0.5
  callouts, for the articles that use it                    1.2 kb  of 1.5
  tabs, for the articles that use it                        1.4 kb  of 1.5
  listing, for the articles that use it                     2.7 kb  of 3
  chart, for the articles that use it                       5.5 kb  of 6
  bars, for the articles that use it                        3.0 kb  of 3.5
  lines, for the articles that use it                       2.4 kb  of 2.5
  dots, for the articles that use it                        2.4 kb  of 2.5
  plot, for the articles that use it                        1.6 kb  of 2
  areas, for the articles that use it                       1.5 kb  of 1.5
  slope, for the articles that use it                       1.9 kb  of 2
  hist, for the articles that use it                        2.4 kb  of 2.5
  flows, for the articles that use it                       2.2 kb  of 2.5
  treemap, for the articles that use it                     2.5 kb  of 2.5
  graph, for the articles that use it                       3.5 kb  of 3.5
  flow, for the articles that use it                        0.7 kb  of 1
  clade, for the articles that use it                       2.3 kb  of 2.5
  events, for the articles that use it                      1.4 kb  of 1.5
  blocks, for the articles that use it                      1.9 kb  of 2
  days, for the articles that use it                        1.9 kb  of 2
  spark, for the articles that use it                       1.0 kb  of 1
  range, for the articles that use it                       1.5 kb  of 2
  spans, for the articles that use it                       2.0 kb  of 2
  of, for the articles that use it                          1.3 kb  of 1.5
  heat, for the articles that use it                        1.3 kb  of 1.5
  sort, for the articles that use it                        1.6 kb  of 2
  delta, for the articles that use it                       0.7 kb  of 1
  qty, for the articles that use it                         0.7 kb  of 1
  pad, for the articles that use it                         0.5 kb  of 1
  tree, for the articles that use it                        0.9 kb  of 1
  steps, for the articles that use it                       0.5 kb  of 1
  spoiler, for the articles that use it                     0.8 kb  of 1
  revise, for the articles that use it                      1.3 kb  of 1.5
  aside, for the articles that use it                       1.0 kb  of 1.5
  math, for the articles that use it                        0.7 kb  of 1
  image, for the articles that use it                       2.5 kb  of 3
  marks, for the articles that use it                       2.2 kb  of 2.5
  compare, for the articles that use it                     1.8 kb  of 2
  pixel, for the articles that use it                       1.4 kb  of 1.5
  clip, for the articles that use it                        1.7 kb  of 2
  notes, for the articles that use it                       3.4 kb  of 3.5
  dump, for the articles that use it                        5.1 kb  of 5.5
  seq, for the articles that use it                         0.8 kb  of 1
  align, for the articles that use it                       1.6 kb  of 2
  map, for the articles that use it                         0.8 kb  of 1
  files, for the articles that use it                       1.5 kb  of 1.5
  matrix, for the articles that use it                      0.9 kb  of 1
  trace, for the articles that use it                       0.6 kb  of 1
  gloss, for the articles that use it                       0.5 kb  of 0.5
  facing, for the articles that use it                      0.4 kb  of 0.5
  source, for the articles that use it                      0.4 kb  of 0.5
  say, for the articles that use it                         0.9 kb  of 1
  chat, for the articles that use it                        1.8 kb  of 2
  tokens, for the articles that use it                      1.8 kb  of 2
  board, for the articles that use it                       1.4 kb  of 1.5
  frames, for the articles that use it                      2.2 kb  of 2.5
  card, for the articles that use it                        0.5 kb  of 0.5
  scale, for the articles that use it                       1.2 kb  of 1.5
  set, for the articles that use it                         0.8 kb  of 1
  sky, for the articles that use it                         2.5 kb  of 2.5
  tiles, for the articles that use it                       1.9 kb  of 2
  chem, for the articles that use it                        0.7 kb  of 1
  knob, for the articles that use it                        2.7 kb  of 3
  curve, for the articles that use it                       2.1 kb  of 2.5
  sum, for the articles that use it                         0.2 kb  of 0.5
  glossary, for the articles that use it                    1.3 kb  of 1.5
  fig, for the articles that use it                         0.2 kb  of 0.5
  resume, for the articles that use it                      1.6 kb  of 2
  keys, when a reader asks for it                           1.0 kb  of 1.5
  search, when a reader asks for it                         4.0 kb  of 4.5
  look, when a reader asks for it                           1.5 kb  of 2
  what the search reads, the first time it is opened       79.9 kb  of 150
  the worker, fetched in the background                     1.4 kb  of 1.5
  fonts, the first file of each face (2)                   85.9 kb  of 86
  gaming/inside-kirby-super-star-ultra/index.html          15.4 kb  of 40
    its 10 images, as stored                              139.7 kb  of 250 each
  typography/everything-this-blog-can-do/index.html        56.0 kb  of 60
    its 12 images, as stored                              304.6 kb  of 250 each
    its clip, as stored                                    10.2 kb  of 500 each
    its sound, as stored                                   29.8 kb  of 100 each
  software/la-liga-de-modelos-de-opencode-go/index.html     7.8 kb  of 40
  software/claude-haiku-5-5/index.html                     17.0 kb  of 40
  software/opencode-go-model-league/index.html              7.2 kb  of 40

all good: 12 sections, 5 articles.

<aside>
  <p><strong>the rule behind all of it.</strong> a page pays only for what it uses.</p>
</aside>

<details>
  <summary>what the checker printed for this blog</summary>
  <pre><code>…</code></pre>
</details>

notes and references

a small number in the text leads to a note. on a wide screen the note moves out into the margin, beside the line that cites it. on a narrow one it waits at the foot of the article, with a caret that leads back, until it is asked for: a press on its number opens it right under the line that cites it, and another puts it away. on paper it stays at the foot. wherever it is, it is only ever in one place. a note cited twice, like the one about the inks,² gets a letter at the foot for each place that cites it. and when every note has gone to the margin, the list and its heading step aside: on a wide screen this page has no section of notes at all.

a reference is the same idea with a different job. it stays in its list on every screen, keeps the capitals a citation is written with, and can be cited by a number or by name, the way this page is set in newsreader (the newsreader project authors 2020) and its feed is an atom feed (nottingham and sayre 2005).

a reference can also say what kind of evidence it is, which matters most when the subject is health. data-kind takes one of six words, review, trial, observational, lab, guideline or preprint, and the reference wears it as a label in its list. four more are for other subjects. primary is the record itself and secondary an account of it, which is what history asks first of a source: on this page caesar is the one, and the encyclopaedia that transcribes trajan's column is the other. vendor is what the maker of a thing says about it, and benchmark is somebody's measurement of it. three papers about vitamin d show why it is worth a word. in a cohort of 13,331 adults, those with the least of it in their blood died at a higher rate over the nine years or so that followed (melamed and others 2008). in a trial, 25,871 people took it or a placebo for about five years, and about as many broke a bone either way (leboff and others 2022). and a review that pooled 81 trials found no effect on fractures or falls (bolland and others 2018). the first kind can say that two things go together, and only the other two can say what a supplement does.

that aside is the other half. an article about health says once, plainly, what it is not, in an <aside class="care">. the checker asks for one in every article tagged health, and the words are the author's.

a glossary is a third list. a <dl class="glossary"> holds the words an article uses in a sense of its own, each a <dfn>, in the order of the alphabet. a word in the text that links to its entry sits on a dotted line, and a press on it opens what it means under the line it is on, the way a note opens. four words on this page do, where each is first explained, and this is where they lead:

feed

one file, feed.xml, with every article in it whole. a feed reader follows the blog through it. the search reads a file written with it: the same words, without their markup.

frame

the page every address is set in: index.html, its stylesheet and its script. it draws the sidebar and sets the article that was asked for.

library

the list of every article, written inside the frame: its section, its title, its date and its tags.

piece

a script, a stylesheet or both, fetched only by the articles that use what it draws.

<p>the blog is one html page, the <a href="#term-frame">frame</a>.</p>

<dl class="glossary">
  <dt id="term-frame"><dfn>frame</dfn></dt>
  <dd>the page every address is set in …</dd>
</dl>

<p>nothing comes from another site.<sup><a href="#note-fonts">1</a></sup></p>
<p>… its feed is an atom feed (<a href="#rfc-4287">nottingham and sayre 2005</a>).</p>

<ol class="notes">
  <li id="note-fonts">the font's files are served from the blog's own folder.</li>
</ol>

<ol class="refs">
  <li id="rfc-4287"><cite>Nottingham, M. &amp; Sayre, R., eds. (2005).
    <i>The Atom Syndication Format</i>. RFC 4287.</cite></li>
  <li id="leboff-2022" data-kind="trial"><cite>LeBoff, M. S., Chou, S. H., Ratliff, K. A. et al. (2022). …</cite></li>
</ol>

<aside class="care"><strong>a word of care.</strong> nothing here is advice about what to take …</aside>

around the article

an article is listed in the library with a title, a line that says what it is, and a date. three more fields are optional:

{
  "section": "software",
  "slug": "everything-this-blog-can-do",
  "title": "everything this blog can do",
  "deck": "every piece an article can use, shown and explained.",
  "date": "2026-10-12",
  "updated": "2026-10-12",
  "tags": ["blog", "writing"]
}

• tags. each tag has a page of its own with everything that carries it, from every section. the links are under this article.
• a series. articles that share a "series" are parts of one thing. each says which part it is beside its date, and lists them all in order at its foot.
• the reading time is counted by the frame, from the formula under maths.
• the feed. feed.xml carries every article in full, newest first. a chart arrives in a reader as the table it was written as.
• the sitemap. sitemap.xml lists every page of the blog at its address, with the day it last changed, for search engines. it is written with the feed, and robots.txt names it.

two more fields are for an article that is not in english. "lang" says which language it is in, and the frame marks its title and its text as that language, for the software that reads a page aloud or breaks its words. a translation also names what it translates, as "translates": "software/opencode-go-model-league", and the checker sees that each of the two leads to the other. the league of models is one: it can be read en español.

the same entry is what a link to this article says of it somewhere else. paste a link into a chat, and the software there fetches it, reads the top of the file for a title, a line about it and a picture, and runs no script. so the first lines of this article's own file say both, among the lines that make the file a page: those the front page starts with, the frame's stylesheet and script among them. nobody wrote them: scripts/head.mjs did, from the entry above and the top of index.html, and the checker fails when they disagree. the one before the last is for a search engine: the title, the dates, who wrote it and the picture, as the data schema.org calls an article. an article that shares tags with others has one more line above it, which names the ones its foot leads to. the last is for the frame and not for a preview: it names the pieces this article needs, which is all of them.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>everything this blog can do · nahuel genchi</title>
<meta name="description" content="every piece an article can use, shown and explained.">
…
<link rel="stylesheet" href="../../assets/site.css">
…
<script type="module" src="../../assets/site.js"></script>
<link rel="canonical" href="https://nahuelgenchi.com/typography/everything-this-blog-can-do/">
<meta property="og:type" content="article">
<meta property="og:site_name" content="nahuel genchi">
<meta property="og:title" content="everything this blog can do">
<meta property="og:description" content="every piece an article can use, shown and explained.">
<meta property="og:url" content="https://nahuelgenchi.com/typography/everything-this-blog-can-do/">
<meta property="og:image" content="https://nahuelgenchi.com/typography/everything-this-blog-can-do/preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="everything this blog can do. every piece an article can use, shown and explained.">
<meta property="article:published_time" content="2026-10-12">
<meta property="article:modified_time" content="2026-10-14">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"everything this blog can do",…}</script>
<meta name="pieces" content="code pair.css callouts tabs listing chart bars …">

the frame leaves those lines out when it sets the article, and so do the feed and the search. they add about 850 bytes to each article, gzipped. the address in the bar is always the page's own, the one the feed gives out too, so whatever a reader copies, a preview of it is a preview of the article.

the picture is a card in the blog's own type, on its own paper: the article's section and date, its title over its deck, and the blog's name at the foot. scripts/cards.mjs draws it in a browser with no window and writes it beside the article, as preview.png. the front page, the sections and the tags all show the blog's own card. a card carries, inside the file, a fingerprint of what it was drawn from, so the checker can tell without a browser when a title, a deck, a colour or the type has moved on without it, and only a card that has fallen behind is drawn again. this page's card is what a link to it shows.

the third field, "updated", is the day an article last changed, and it comes with a duty: the article has to say what changed. the smallest change is made where it stands, with <del> for what was taken out and <ins> for what was put in. the article on haiku 5.5 first said of four scores that they were inside half a point of each other inside two points of each other, three of them inside 0.6, with the four scores written in the same sentence.

anything larger goes in a list with class="changes": one dated entry for each day the article was touched, newest first. the date at the top of the page then gains an “updated”, linked to the list, and the checker will not let the list and the library disagree about the day. this page has one, and so does the article that needed it most.

<p>… they were <del>inside half a point</del> <ins>inside two points</ins> of each other.</p>

<h2>changes</h2>

<ul class="changes">
  <li><time datetime="2026-10-12">12 october 2026</time> twelve sentences and labels
    disagreed with the numbers beside them, and were made to agree.</li>
</ul>

what keeps it honest

one script, scripts/check.mjs, reads the whole blog and fails on anything that breaks a rule. it runs on every pull request, and nothing reaches the blog without passing it. it checks that:

• every visible letter is lowercase, outside the exceptions under words
• nothing is fetched from another site, and every link inside the blog leads somewhere
• the frame, each piece, each article and each image is under its weight
• a chart is a table the frame can draw, with its series named and no more than four of them
• an image says what it shows and gives its true shape
• every note is cited, and every note and reference has an address
• a quantity is written with the signs made for it
• the type is split by letters, and every letter goes to the file that has it
• an article the library calls updated says what changed, on the same day
• the feed, the sitemap, what the search reads and the link previews, their pictures too, have kept up with the articles
• what this page says the frame and the pieces weigh has kept up with them

a second, scripts/browse.mjs, opens every page in chrome, as a small phone, a phone, a laptop and a screen wide enough for notes in the margin, and fails on what only a browser sees: a script that throws, a request that fails or leaves the blog, an article asked for again when its link is pressed after the pointer rested on it, a link that does not fade one page into the next, or does for a reader who asked for less motion, a change to the blog that does not reach a reader who comes back, a page they opened that does not open again with no connection, a long article that does not offer the part its reader left off at, a picture that does not load, a word the search reads otherwise than a browser would, a chart left as a table, a page wider than its screen, and anything drawn past its left edge, where no reader can scroll to it. it also measures four things a look used to be the only check for: no words are drawn over other words, a formula on a line of its own sits in the middle of the text, the pictures of a set sit together, and nothing is drawn over a note in the margin, or waits below one with no need to. it holds the type back until a page has drawn without it, as a slow first visit does, and fails when the page then moves more than a line that gains a word would move it. it reads every letter the page sets in newsreader too, and fails on one that no file of it has, or on a file the page asks for and draws nothing from. and four that a reader who hears the page, moves through it by keys or sees it faintly depends on: every link, control and picture has a name a screen reader can say, every table has a caption, whatever takes the focus shows it, and every letter stands far enough from what is behind it, 4.5 to 1, or 3 to 1 when it is large, in the ink of every section. then it opens every page once more for a reader who asks their system for more contrast, and fails on small print that stands under 7 to 1, and once more as windows draws it for a reader who has asked for more contrast still, in a few colours of its own, and fails on whatever those would paint out, uncover or run together: a mark drawn in a colour alone, words under a cover, two series with one key.

neither can check that a page reads well. that part is done by looking, on a phone and on a wide screen.

changes

• 16 october 2026 the blog has a sitemap, written with the feed and named in robots.txt, and the first lines of each article now tell a search engine its title, its dates, who wrote it and its picture. around the article says so. and the search no longer reads the whole feed: it reads the words of every article from a file written with the feed, without their markup, and finds what it found before. the second check has chrome read the feed and fails where the two disagree. and a reader who asks their system for more contrast now gets darker small print, 7 to 1 or more wherever it stands, and nothing else changes: the frame around an article says how to see it. the second check opens every page that way once more. and an article starts loading when its link has been pointed at for a moment, or is focused or pressed, and not when a pointer only passes over it or the connection asks to save data. the second check rests the pointer on a link before pressing it, and fails when the press has to ask for the article again. and the old page now fades into the new one as a link is followed, but not for a reader who asks for less motion: the second check follows a link both ways and counts the fades. and an article's foot now leads to up to three others that share the most tags with it, chosen by a script and written into its first lines: the frame around an article says how. none has one yet. and what a reader opens is kept in their browser, to open again with no connection, by a worker that changes nothing while there is one: the frame around an article says what it keeps. the second check makes a change to the blog between two visits and fails when the reader comes back to the old page, then cuts the connection and fails when what they opened does not open again. and an article of 20 minutes or more, as this one is, offers the part its reader left off at when they come back, from a piece only such an article fetches: the frame around an article says how to try it. the frame is allowed 14 kb now, up from 13.5, for these and for the next few things it does for every page, and this article 60, up from 56, to show them.
• 15 october 2026 every number the page gives about the blog was measured again, by a script that writes them in, scripts/tour.mjs. the checker now fails when what the page says the frame and the pieces weigh falls behind them, and the tree under lists is the folder as it is now. the page is allowed 56 kb now, up from 52: every step the frame takes adds a row to several of its tables. and a formula with a caption is centred on the text, as the caption is, and no longer on its figure, which can run wider. panels held to two or three in a row sit together at their own size, and a figure that holds nothing wider than the text stays beside a note in the margin instead of waiting below it. the notes piece measures the figures to know which, and is allowed 3.5 kb now, up from 3. the page names its second check too, which opens every page at a third width now and measures three things only a look used to catch. it opens every page at 320 px too, as wide as a laptop's screen zoomed to 400%. and a reader's browser keeps the fonts for a year now, and shows pictures, clips and sounds from its own copy while it asks whether they changed. the frame, the pieces and the pages are still asked about every time, since their names carry no version. the second check measures four more things now: whether every link, control and picture has a name a screen reader can say, whether every table has a caption, whether the focus shows wherever it lands, and whether every letter stands out from what is behind it, in every section's ink. what it found is mended: the keys have a caption, and a missing value, the numbers beside lines of code, and small print on a tint in the dump, the alignment, the tree and marked code are darker. it also holds the type back now until a page has drawn without it, and fails when the page moves. what that found is mended too: a long title no longer changes its lines when newsreader arrives, since its width is set in em instead of in figures of whatever face is drawn. and the blog reads in windows high contrast now, where the system paints every page in a few colours of its own: the series of a chart keep a fill, a dash or a line of their own, a tint that picked something out is an outline or an underline, a mark keeps its ground, and a drawing keeps its own paper. the second check opens every page once more in those colours. the frame is allowed 13.5 kb now, up from 13, and seven pieces half a kb more each. and the type is lighter: each face comes in two files now, the letters nearly every article uses and the rarer ones, and a page fetches the second only when it has one of them. a page fetches 41 kb of type instead of 57, or 86 instead of 120 when it has a word in italic. and a table beside notes in the margin is as wide as the text until its columns ask for more, as a block of code is, so that one that needs no more stays beside a note instead of leaving a hole in the text below it. a table or a block of code on its own stays beside one too, and the second check fails on a hole that need not be there. and the word on a loop in a graph is set where the loop turns, under what it leaves, and no longer on the side, where half of it lay outside the drawing and, on a phone, past the edge of the screen. the drawing makes room for its loops, and the graph piece is allowed 3.5 kb now, up from 3. the second check fails on anything drawn past the left edge of the screen, where no reader can scroll to it. and on a phone the words of a graph no longer run into each other: an edge bends nearer the end it shares with more edges, and its word is set halfway down, where the edge is on its own, so the words of three edges out of one box stand nearly as far apart as the boxes they lead to. a loop runs in room the layers leave it at the side, clear of the boxes, and a name too long for its share of the width takes two lines. the second check fails on words drawn over other words.
• 14 october 2026 the blog's addresses lost their #: every article, section and tag is now a folder with a page in it, and the addresses from before still lead to the same places. how a page reaches you and around the article say so now, with the frame's new weight and this file's new first lines. every picture on the page, and every one in a sample, is written loading="lazy", so that it still waits for the reader there. and a link to any page of the blog now brings a picture into its preview, a card in the blog's own type: around the article says how it is drawn.
• 12 october 2026 the page grew on the day it was published, as the blog did. new since the morning: charts that say how sure they are, tables that draw themselves, tables read at a glance, the small things under words and lists, under code the pair, the callouts and the listing, under bytes the diff, the map and the sequence, under images the marks, the divider, pixel art and clips, under notes and references notes that open in place, kinds of evidence and the word of care, and around it all the search and the keys, and what a link to an article says of it when it is pasted somewhere. at the end of the day every number the page gives about the blog was measured again. then it began to grow again, by subject. under words: glosses, readings over a word, facing text, sources as they were written, a sound, words tinted by a number, numbers as science writes them, and chemistry. under lists: trees that show a change, trees with lengths, pipelines, conversations, cards of facts, and downloads with a sum. under tables: tracks, deep time, yes and no, and totals that are added up. under maths: numbers a reader can change, and curves. under code: tabs, sessions at a terminal, graphs and traces. under bytes: bits and alignments. under notes and references: four more kinds of source, and a glossary. under images: a closer look at an opened one, marks by coordinates, a bar to measure by, panels, boards written in characters, strips of frames, pictures that take turns, and figures with numbers. around the article: one in another language. under charts: the sky, maps of tiles, events, dots joined in order, bars back to back, waterfalls, indexed lines, areas, slopes, histograms and boxes, flows and treemaps. when that was done, the numbers were measured once more.

notes

1. the font's files are served from the blog's own folder, with their licence beside them.
2. each pair of the four inks was measured, on this paper colour, to hold apart for readers with the common forms of colour blindness. the hex dump uses the same four.
3. 230 words a minute is a comfortable pace for prose on a screen, and a guess. a table or a block of code is looked at, not read, so each counts as a quarter of a minute.

references

1. Tufte, E. R. (2006). Beautiful Evidence. Graphics Press.
2. Levantovsky, V. & Levien, R., eds. (2018). WOFF File Format 2.0. W3C Recommendation. w3.org/TR/WOFF2
3. Carlisle, D. & Wang, F., eds. MathML Core. W3C. w3.org/TR/mathml-core
4. Nottingham, M. & Sayre, R., eds. (2005). The Atom Syndication Format. RFC 4287. rfc-editor.org/rfc/rfc4287
5. Mallama, A. & Hilton, J. L. (2018). Computing apparent planetary magnitudes for The Astronomical Almanac. Astronomy and Computing 25, 10–24.
6. Williams, D. R. (2025). Planetary Fact Sheet: Ratio to Earth Values. NASA Space Science Data Coordinated Archive. nssdc.gsfc.nasa.gov/planetary/factsheet
7. Bringhurst, R. (2012). The Elements of Typographic Style, 4th ed. Hartley & Marks.
8. Campbell, A., Adams, C., Bradley Montgomery, R., Cooper, M. & Kirkpatrick, A., eds. (2024). Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation. w3.org/TR/WCAG22
9. Meeus, J. (1998). Astronomical Algorithms, 2nd ed. Willmann-Bell.
10. Wenger, M., Ochsenbein, F., Egret, D. et al. (2000). The SIMBAD astronomical database: the CDS reference database for astronomical objects. Astronomy and Astrophysics Supplement Series 143, 9–22. doi.org/10.1051/aas:2000332
11. Planck Collaboration (2020). Planck 2018 results. VI. Cosmological parameters. Astronomy & Astrophysics 641, A6. doi.org/10.1051/0004-6361/201833910
12. Gardner, M. (1971). Mathematical games: on cellular automata, self-reproduction, the Garden of Eden and the game “life”. Scientific American 224(2), 112–117.
13. The UniProt Consortium. Insulin, Homo sapiens. UniProtKB, entry P01308 (INS_HUMAN). uniprot.org/uniprotkb/P01308
14. Prado-Martinez, J., Sudmant, P. H., Kidd, J. M. et al. (2013). Great ape genetic diversity and population history. Nature 499(7459), 471–475. doi.org/10.1038/nature12228
15. Scally, A., Dutheil, J. Y., Hillier, L. W. et al. (2012). Insights into hominid evolution from the gorilla genome sequence. Nature 483(7388), 169–175. doi.org/10.1038/nature10842
16. Aziz, N. A., Ali, E. Z., Mohd Khalid, M. K. N. et al. (2025). Novel HBB:c.375_376delAC mutation in a Malay patient with HbE beta-thalassemia intermedia: a case report. Medicine 104(39), e44817. doi.org/10.1097/MD.0000000000044817
17. Tariq, A., Khurshid, S. & Sajjad, M. (2021). Evaluation of the high resolution melting approach for detection of β-thalassemia gene mutations. Hemoglobin 45(1), 20–24. doi.org/10.1080/03630269.2020.1867566
18. Caesar, C. Iulius. Commentarii de Bello Gallico, book 1, chapter 1.
19. Wikipedia contributors. Trajan's Column. Wikipedia, read 12 October 2026. en.wikipedia.org/wiki/Trajan's_Column
20. Birch, J. (2012). Worldwide prevalence of red-green color deficiency. Journal of the Optical Society of America A 29(3), 313–320. doi.org/10.1364/JOSAA.29.000313
21. Bolland, M. J., Grey, A. & Avenell, A. (2018). Effects of vitamin D supplementation on musculoskeletal health: a systematic review, meta-analysis, and trial sequential analysis. The Lancet Diabetes & Endocrinology 6(11), 847–858. doi.org/10.1016/S2213-8587(18)30265-1
22. LeBoff, M. S., Chou, S. H., Ratliff, K. A. et al. (2022). Supplemental vitamin D and incident fractures in midlife and older adults. The New England Journal of Medicine 387(4), 299–309. doi.org/10.1056/NEJMoa2202106
23. Melamed, M. L., Michos, E. D., Post, W. & Astor, B. (2008). 25-hydroxyvitamin D levels and the risk of mortality in the general population. Archives of Internal Medicine 168(15), 1629–1637. doi.org/10.1001/archinte.168.15.1629
24. National Center for Biotechnology Information. Homo sapiens hemoglobin subunit beta (HBB), RefSeqGene on chromosome 11. NCBI Reference Sequence NG_059281.1. ncbi.nlm.nih.gov/nuccore/NG_059281.1
25. Cohen, K. M., Finney, S. C., Gibbard, P. L. & Fan, J.-X. (2013, updated). The ICS International Chronostratigraphic Chart. Episodes 36(3), 199–204. stratigraphy.org/chart
26. International Human Genome Sequencing Consortium (2001). Initial sequencing and analysis of the human genome. Nature 409(6822), 860–921. doi.org/10.1038/35057062
27. The Newsreader Project Authors (2020). Newsreader. SIL Open Font License 1.1. github.com/productiontype/Newsreader