Systems stress-test page for Gwern.net functionality, exercising Markdown/​HTML/​CSS/​JS features at scale to check that they render correctly in mobile/​desktop.

Abstract of article summarizing the page. For design philosophy, see About⁠. This is a test page which exercises all standard functionality and features of Gwern.net, from standard Pandoc Markdown like blockquotes/​headers/​tables/​images, to custom features like sidenotes, margin notes, left/​right-floated and width-full images, columns, epigraphs, admonitions, small/​wide tables, smallcaps, collapse sections, link annotations, link icons.

User-visible bugs which may appear on this page: zooms into small rather than large original image (mobile).

In typography/​design, ‘sidenotes’ place footnotes/​endnotes in the margins for easier reading. I discuss design choices, HTML implementations and their pros/​cons.

Sidenotes/​margin notes are a typographic convention which improves on footnotes & endnotes by instead putting the notes in the page margin to let the reader instantly read them without needing to refer back and forth to the end of the document (endnotes) or successive pages (footnotes spilling over).

They are particularly useful for web pages, where ‘footnotes’ are de facto endnotes, and clicking back and forth to endnotes is a pain for readers. (Footnote variants, like “floating footnotes” which pop up on mouse hover, reduce the reader’s effort but don’t eliminate it.)

However, they are not commonly used, perhaps because web browsers until relatively recently made it hard to implement sidenotes easily & reliably. Tufte-CSS has popularized the idea and since then, there has been a proliferation of slightly variant approaches. I review some of the available implementations.

For general users, I recommend Tufte-CSS: it is fast & simple (using only compile-time generation of sidenotes, rendered by static HTML/​CSS), popular, and easy to integrate into most website workflows. For heavy footnote users or users who want a drop-in, runtime Javascript-based solutions like sidenotes.js may be more useful.

A log of experiments done on the site design, intended to render pages more readable, focusing on the challenge of testing a static site, page width, fonts, plugins, and effects of advertising.

To gain some statistical & web development experience and to improve my readers’ experiences, I have been running a series of CSS A/​B tests since June 2012. As expected, most do not show any meaningful difference.