Skip to content
jon@jonwebb-dev : ~ $

Colophon

col⋅o⋅phon n. An inscription, usually at the end of a book, giving facts about its publication.[1]

Philosophy

This site has been carefully designed with performance and simplicity in mind.

It's an exercise in a conscientious style of web development, aiming to minimize the burden on the user while expressing creativity in the hypertext format.

The resulting site consists entirely of HTML, a CSS stylesheet, and some optimized image assets.

A11y

I've tried to write this site so that as many people as possible can use it.

If you encounter any accessibility issues on this site, email me at jon@jonwebb.dev and I'll do my best to address them.

Static Site Generator

The site is generated with Eleventy, a static site generator for Node.js.

Content is written in Markdown and committed alongside the source code to a git repository.

Javascript

If you find any Javascript on this site, it's been injected by someone else, because I haven't included any.

Styles

The site uses a small, custom stylesheet that I wrote. I borrowed some colors from TailwindCSS because I'm not a designer.

The stylesheet is processed by PurgeCSS, which removes unused selectors on a per-page basis. The resulting minified stylesheet is then inserted inline for each page.

A light and dark color scheme are provided based on system preference.[2]

Animations are disabled if your system preference is for reduced motion.[3]

Fonts

The site does not use web fonts. Instead, it uses a system font stack based on the fonts your system already has installed.

Images

The site offers images in webp and jpeg format, at several resolutions. Your browser will lazily[4] load the appropriate format and resolution for your browser and screen size[5].

Image pre-processing is performed by the Eleventy Image plugin at build time.

I also wrote a post about the site's image handling.

Favicons

Site SVG favicon (change your system light/dark preference to see it update).

The site uses a minimal set of 5 favicon assets intended to provide broad browser support while minimizing payload size.[6]

  • SVG icon for modern browsers (with an adaptive light/dark color scheme)
  • 180×180 PNG for iOS home screen shortcuts
  • Web app manifest with 192×192 and 512×512 PNG for Android
  • 32×32 favicon.ico fallback

Server

The site is currently served by Netlify's CDN.


  1. Houghton Mifflin Company. (2000). Colophon. In The American Heritage College Dictionary (3rd ed., p. 276). Houghton Mifflin Company. ↩︎

  2. If your browser supports the prefers-color-scheme CSS media feature. It's supported for ~93% of users as of January, 2022. ↩︎

  3. If your browser supports the prefers-reduced-motion CSS media feature. It's supported for ~94% of users as of January, 2022. ↩︎

  4. If your browser supports the loading=lazy attribute for the <image> HTML element. It's supported for ~75% of users as of January, 2022. ↩︎

  5. If your browser supports the <picture> HTML element. It's supported for ~97% of users as of January, 2022. ↩︎

  6. This favicon strategy is outlined in detail in an excellent article by Andrey Sitnik. ↩︎