Behind the page

1 Globe

Every detail on the Earth and the Moon comes from real data. The coastlines, borders, lakes and rivers are traced from maps,11 Natural Earth, free map data in the public domain. and so are the faint lines for height on land and depth at sea.22 NASA, Blue Marble: the GEBCO maps of elevation on land and depth at sea. The Moon's seas33 NASA, CGI Moon Kit: the orbiter's colour map of the Moon. and about 460 of its named craters44 USGS, Gazetteer of Planetary Nomenclature: the IAU's named craters. sit where they really are. The Earth alone is about 70,000 points, redrawn up to 120 times a second.

The animation runs in a Web Worker.55 Wikipedia, Web worker: how a page gets a second thread. A web page normally runs on one thread, so a slow task holds up everything else. Rendering the globe is slow enough that the page's other animations stuttered. Making the drawing async would not have helped, since nothing else can run while a frame is being rendered.

2 Fewer points

Why draw a point no one can see? At the size the globe is rendered, thousands of them land on top of each other. The Douglas-Peucker algorithm66 Wikipedia, Ramer-Douglas-Peucker algorithm: how the lines are thinned. thins them out, leaving about 17,300 points a frame where there were 30,600. The globe looks exactly the same, and each frame draws a quarter faster.

Each point is stored as the step from the one before it, a technique called delta encoding.77 Wikipedia, Delta encoding: how the map data is stored. The steps are small and much alike, which compresses far better: about 78 KB instead of 230 KB.

3 Stars

Stars fill the dark theme's empty space, staying clear of the text. The page is cut into square cells, and each cell asks a hash function88 Wikipedia, Hash function: mapping inputs to fixed, scrambled-looking outputs. how many stars it holds and where. A hash gives the same answer for the same input, so a cell always gets the same stars.

Each cell has three slots. For each slot the hash returns three numbers from 0 to 1, unrelated to one another. The first decides whether the slot holds a star: above 0.8, it stays empty. The other two are the star's x and y coordinates in the cell.

A third of the stars slowly brighten and fade. A script updates them ten times a second, because a CSS animation would keep the browser busy on every frame.

4 From paper to page

The essays are written first for paper in Typst99 Typst: the typesetting system the essays are written in., a modern typesetting system in the spirit of LaTeX. The Typst compiler turns each document into a PDF/A.1010 Wikipedia, PDF/A: the PDF standard for long-term archiving. Those originals can be downloaded from this site.

The web pages are ports of those documents. Their figures are translated from the Typst source into TypeScript, and the web ports add animations to them. Below is the same random number generator in both languages, taken from the figure of a drone swarm in the first essay.1111 Två artiklar om artificiell intelligens: the essay with the drone swarm, in Swedish.

s = calc.rem(s * 1103515245 + 12345,
  2147483648)
let jx = s / 2147483648

s = (s * 1103515245n + 12345n)
  % 2147483648n;
return Number(s) / 2147483648;

5 Fonts

The site ships ten font files from five families, all under open licenses. They are served from this site rather than from a font service, and each page loads only the fonts it uses.

A font is drawn for dozens of languages, far more than this site needs. fontTools' subsetter1212 fontTools, pyftsubset: the tool that trims a font to a subset. cuts the fonts down to the characters the site uses. They are then saved as WOFF21313 Wikipedia, Web Open Font Format: the format the fonts are served in., a compressed format made for the web. Most end up about a tenth of their original size.

The PDFs use URW's1414 Wikipedia, URW Type Foundry: the foundry behind the PDFs' fonts. versions of Palatino and Times. They are under the AGPL,1515 URW base 35 fonts, LICENSE: the AGPL, with an exception for PDFs. which covers PDFs but not web pages. So the pages borrow the same designs from TeX Gyre. Its license asks that a modified font change its name, which is why the cut-down versions are called Pagella Janix Subset and Termes Janix Subset.

6 Security policy

A Content Security Policy1616 Wikipedia, Content Security Policy: how a page tells the browser what it may run. tells the browser which scripts a page may run. The script below sets the theme. The policy holds only its hash, so changing one character is enough to block it.

7 Deployment

A push to GitHub starts a build on Cloudflare that checks the code for type errors, builds the pages and tests what was built before it goes live. The tests catch mistakes that break the site quietly: a stale hash, a character missing from the fonts, a broken link.