caffè breve
§ 3 · Colophon

Colophon

A short accounting of the apparatus. The site began as an excuse to learn AWS, kept its excuse, and is now also the answer to the occasional reasonable question of how, exactly, one over-engineers a coffee mug.

01Architecture

Request path visitor browser DNS Route 53 caffebreve.us CloudFront CDN + TLS cert · ACM origin S3 bucket static · private OAC · signed only five services, one mug
01.1 Hosting

Static files in an S3 bucket, served through CloudFront with a certificate from ACM, fronted by Route 53 for DNS. The bucket is private; CloudFront reaches it through an Origin Access Control. There is no server in the conventional sense, which is part of the appeal — nothing to patch at three in the morning.

01.2 Build

Pages are written by hand, deployed with the AWS CLI. No framework, no bundler, no transpilation pipeline that could one day be deprecated by a teenager in another time zone. Each page is a single file that does one thing.

02Typography

Newsreader · italic

A variable serif designed for long-form reading on screen, with optical-size and italic axes that keep large display sizes lively without sacrificing the body text. Drawn by Production Type for Google Fonts.

IBM Plex Mono · 0123456789 · ±%∑μσ²numerals and operators
02.1 Why this pair

The serif does the reading; the mono does the counting. Mixing the two cleanly separates prose from data, which is most of what this site is — and avoids the universal trap of reaching for a humanist sans-serif and ending up looking like every other technical site on the internet.

03Color

dawn · 05–08
day · 08–17
dusk · 17–20
night · 20–05
03.1 Diurnal palette

The page reads the visitor's local hour and selects one of four palettes: warm peach at dawn, cream at midday, amber at dusk, deep night-blue after eight. CSS variables on the document root carry the colors; transitions handle the rest. The two accent inks — espresso brown and a deep maroon — survive every palette unchanged, because the chart on the lab page should not change its mind about which curve is which.

04Mathematics

04.1 Inverse normal

The lab's sample-size calculator needs to invert the standard normal CDF on every keystroke, and JavaScript does not ship one. The page uses the Beasley-Springer-Moro rational approximation, accurate to roughly nine decimal places — well past the precision anyone is going to act on.

04.2 Sample size
n = ( zα/2 · √(2 p̄(1−p̄)) + zβ · √(p₁(1−p₁) + p₂(1−p₂)) )² / (p₁ − p₂)²

The unequal-variance two-proportion form, which is overkill for most baseline rates and exactly right for the few that aren't.

05The mug

05.1 Two distributions

The mug on the home page carries two probability density functions. Most visitors read them as decoration, which is fine. The lab page returns the favor by drawing the same two curves in service of an actual decision — null and alternative, with their critical value drawn between them. The mug was first; the math is its excuse.

05.2 Finite elements

The pattern across the cup is also not decorative. It is a finite element analysis of the cup's heat distribution — the standard mechanical engineering trick for solving differential equations that refuse to be solved by hand. Discretize the body into small elements, write the equation locally, solve the linear system, color each element by its answer. The colors are temperature; the geometry is the cup. The mug, in other words, has been doing math the whole time.

06Acknowledgments

06.1 Borrowed

Newsreader and IBM Plex Mono are open-source. The Beasley-Springer-Moro coefficients are unattributed in most online appearances of the algorithm, which is a small disservice to all three.

06.2 Built with

Plain HTML, CSS, and JavaScript, with assistance from a large language model that has strong opinions about typography and surprisingly few about coffee.