Colophon

In the print tradition, a colophon is a supplement, usually found on the last page of a book, where technical details about typefaces, paper, ink and binding are found.

The design and creation of this site would have turned out very differently were it not for the help of many from the design and technology communities. We’re following this tradition to give credit and description to the many pieces that make up this project.

The Zeugma Princess

The Zeugma Princess is our pet name for what is commonly referred to as the Gypsy Girl Mosaic fragment. Her eyes seem to convey some haunting tale, but she has no mouth to tell us the story. She was found in the ancient city of Zeugma, located in the present-day Gaziantep province of Turkey.

Zeugma was named for its bridge of boats that enabled passage across the Euphrates. In Greek, zeugma literally means bridge or bond. The city reached its heights of affluence during the period of Roman rule, which commenced in 64 AD. In AD 256, the city was conquered and destroyed by King Shapur I of the Persian Empire.

The mosaic is now on display at the Gaziantep Museum of Archaeology. The original photograph was taken there by Nevit Dilman and is now in the public domain.

The zeugma princess

The Typography

Type

The typeface used on this site is Function Pro, which is a redrawing of the Futura typeface designed by Paul Renner in 1927.

Renner believed that modern typefaces should not be based on old designs. He took letter-forms down to the bare essentials, and built Futura with simple geometric shapes, such as the circle, the square, and the triangle. The result was a very modern-looking sans-serif, that, with the help of the Bauer Type Foundry of Frankfurt, Germany, became an enormous success.

Layout

The layout for this site is based upon the principles taught by Josef Müller-Brockmann and Robert Bringhurst, including the principles of vertical and horizontal rhythm. Vertical rhythm is based on a line height of 26 pixels, giving a generous leading which complements the short x-height of the typeface, allowing the text to breathe.

Horizontal rhythm is set using a ten-column grid. However, two superimposed columns form the structure of most pages: one for text and another for buttons and other supplementary material. The width of the measure is set to 7 columns, or 620 pixels, wide, which gives a line of about 80 to 90 characters. While this is a bit on the wide side, the generous leading and a white line between paragraphs help keep the eye on track.

The layout is responsive to the size of device or browser window that is currently being used to view the web page. Four sizes are supported: mobile, mobile landscape, tablet, and desktop. An open-source project called the Less Framework, by Finnish designer Joni Korpi, was used as the basis for this functionality.

Ten-column grid

The Vocabularies

To describe the content of this site in a way that its meaning can be processed by a machine, we have incorporated machine vocabularies in the form of embedded attributes in the markup of these web pages, using an Open Web standard called RDFa.

Doing so makes it possible for not only people to read the content of this site, but for intelligent machine agents to distill and incorporate meaning from the content, and then to connect knowledge together across the Web.

Standard Vocabularies

  • cc: Creative Commons Rights Expression Language
    The Creative Commons Rights Expression Language (CC REL) lets you describe copyright licenses in RDF.
  • ctag: Common Tag Vocabulary
    Common Tags are references to unique, well-defined concepts, complete with metadata and their own URLs.
  • dc: DCMI Metadata Terms
    An up-to-date specification of all metadata terms maintained by the Dublin Core Metadata Initiative, including properties, vocabulary encoding schemes, syntax encoding schemes, and classes.
  • foaf: Friend of a Friend vocabulary
    FOAF is a project devoted to linking people and information using the Web. Regardless of whether information is in people’s heads, in physical or digital documents, or in the form of factual data, it can be linked.
  • owl: The OWL 2 Schema vocabulary
    This ontology partially describes the built-in classes and properties that together form the basis of the RDF/XML syntax of OWL 2.
  • pav: Provenance, Authoring and Versioning
    PAV is a lightweight ontology for tracking Provenance, Authoring and Versioning. PAV specializes the W3C provenance ontology PROV-O in order to describe authorship, curation and digital creation of online resources.
  • prov: W3C PROVenance Interchange
    The namespace name http://www.w3.org/ns/prov# is intended for use with the PROV family of documents that support the interchange of provenance on the web.
  • rdf: The RDF Concepts Vocabulary
    This is the RDF Schema for the RDF vocabulary terms in the RDF Namespace, defined in RDF 1.1 Concepts.
  • rdfs: The RDF Schema vocabulary
    RDF Schema provides a data-modelling vocabulary for RDF data. RDF Schema is an extension of the basic RDF vocabulary.
  • schema: Schema.org vocabulary
    Search engines including Bing, Google, Yahoo! and Yandex rely on schema.org markup to improve the display of search results, making it easier for people to find the right web pages.
  • sioc: Semantically-Interlinked Online Communities
    SIOC is an ontology for describing the information in online communities.
  • skos: Simple Knowledge Organization System
    The Simple Knowledge Organization System (SKOS) is a common data model for sharing and linking knowledge organization systems via the Semantic Web.
  • xhv: XHTML Vocabulary
    This is a vocabulary collection utilized by XHTML Family modules and document types using XHTML Modularization, including XHTML Role and XHTML + RDFa as defined in rdfa-syntax.

Business Vocabularies

  • essglobal: ESSGlobal Vocabulary
    A vocabulary for the Social and Solidarity Economy (SSE). This vocabulary is designed to be used in combination with the metadata schemes/vocabularies/ontologies: dcterms, good relations, foaf, vcard, organization and schema.org - this is defined in the Dublin Core Application Profile of the SSE. Developed by the ESSGlobal group of the Intercontinental Network for Promoting the Social and Solidarity Economy (RIPESS) Organisation.
  • fea: Federal Enterprise Architecture Vocabulary
    To facilitate efforts to transform the Federal Government to one that is citizen-centered, results-oriented, and market-based, the Office of Management and Budget (OMB) is developing the Federal Enterprise Architecture (FEA), a business-based framework for Governmentwide improvement.
  • rov: Registered Organization Vocabulary
    The Registered Organization Vocabulary is a profile of the Organization Ontology for describing organizations that have gained legal entity status through a formal registration process, typically in a national or regional register.
  • vcard: An Ontology for vCards
    This ontology models and represents vCards in RDF using current best practices.

Document Vocabularies

  • bibo: The Bibliographic Ontology
    The Bibliographic Ontology Specification provides main concepts and properties for describing citations and bibliographic references (i.e. quotes, books, articles, etc) on the Semantic Web.
  • deo: The Discourse Elements Ontology
    The Discourse Elements Ontology is an ontology for describing the major rhetorical elements of a document such as a journal article. It is a subsidiary ontology that is imported into the Document Components Ontology, itself part of SPAR, the Semantic Publishing and Referencing Ontologies.
  • doco: DoCO, the Document Components Ontology
    An ontology for describing the component parts of a bibliographic document.
  • fabio: FRBR-aligned Bibliographic Ontology
    FaBiO, the FRBR-aligned Bibliographic Ontology, is an ontology for recording and publishing on the Semantic Web bibliographic records of scholarly endeavours. It forms part of SPAR, a suite of Semantic Publishing and Referencing Ontologies.

Technical Vocabularies

These vocabularies are used to describe things that are more technical in nature, such as software projects and the machine-oriented vocabularies or ontologies that we are creating in our specifications playground.

  • deps: DOAP Dependencies
    An extension to DOAP for describing a project’s requirements.
  • doap: Description of a Project vocabulary
    The Description of a Project (DOAP) vocabulary, described using W3C RDF Schema and the Web Ontology Language.
  • vann: VANN: A vocabulary for annotating vocabulary descriptions
    A vocabulary for annotating descriptions of vocabularies with examples and usage notes.
  • voaf: Vocabulary of a Friend
    A vocabulary to describe linked data vocabularies and their relations.
  • void: Vocabulary of Interlinked Datasets
    The Vocabulary of Interlinked Datasets (VoID) is an RDF Schema vocabulary for expressing metadata about RDF datasets.

The Scripts

Even though a traditional book does not run JavaScript, modern websites do, so it’s fitting that we attribute the many developers that have added to the functionality of this site. It would not be the same without their contributions.

  • MediaElement.js, an HTML5 video and audio player, with fallbacks for older browsers.
  • jQuery, a foundational JavaScript library, used for compatibility with older browsers.
  • jquery-smooth-scroll, a jQuery plugin that handles all of the in-page smooth scrolling.
  • Lettering.js, a jQuery plugin that helps kern some of the misbehaving section titles.
  • AccessifyHTML5, a simple polyfill that adds ARIA attributes to the web pages to make this site more accessible to persons with disabilities.
  • Emphasis, for dynamic deep-linking and highlighting, by the New York Times.

The Build

The build process does not involve paper, ink, and moveable type, but it does involve many moving pieces. Much of this site is statically compiled using the excellent Nanoc project and ruby 2.4.1 (2017-03-22) with RubyGems 2.6.14. The rest is handled in the backend by an HTTP server, described below. This approach gives us the best of both worlds: the flexibility to decide which pieces of this site would be more advantageous to compile beforehand, and which would be more appropriate to generate dynamically the moment they are needed.

Nanoc logo: a bold red 'N' character centered within a dark grey circle, on a grey background.

Buildtime Dependencies

Many thanks to Aaron Patterson, Akinori MUSHA, Akira Matsuda, Arjan van der Gaag, Arto Bendiken, Bagwan Pankaj, Ben Lavender, Björn Blomqvist, Brandon Mathis, Chad Miller, Chris Eppstein, Christian Neukirchen, David Heinemeier Hansson, Denis Defreyne, Duncan Robertson, Eric M. Suzanne, Gregg Kellogg, Hampton Catlin, Jared White, Jeff Smick, Jeremy McNevin, Jim Weirich, John Gruber, Julian Tescher, Kevin S. Dias, Kouhei Sutou, Masao Mutoh, Matt Morgan, Mike Dalessio, Natalie Weizenbaum, Nico Hagenburger, Norman Clarke, Postmodern, REST Client Team, Ruben Verborgh, Run Paint Run Run, Sam Ruby, Scott Chacon, Scott Davis, Tim Elliott, Tom Johnson, Uwe L. Korn, Ville Lautanala, Willem van Bergen, William Melody, and Yoko Harada for the libraries and tools with which this site is compiled.

  • activesupport (5.1.5): A toolkit of support libraries and Ruby core extensions extracted from the Rails framework.
  • builder (3.2.3): Builders for MarkUp.
  • chunky_png (1.3.10): Pure ruby library for read/write, chunk-level access to PNG files
  • compass (1.0.3): A Real Stylesheet Framework
  • ffi-hunspell (0.3.1): FFI bindings for Hunspell
  • git (1.3.0): Ruby/Git is a Ruby library that can be used to create, read and manipulate Git repositories by wrapping system calls to the git binary.
  • haml (5.0.4): An elegant, structured (X)HTML/XML templating engine.
  • html5small (0.4.0): HTML5small
  • image_optimizer (1.7.2): Simply optimize images via jpegoptim or OptiPNG or Gifsicle
  • linkeddata (3.0.1): Linked Data for Ruby.
  • locale (2.1.2): Ruby-Locale is the pure ruby library which provides basic APIs for localization.
  • nanoc (4.9.1): A static-site generator with a focus on flexibility.
  • nanoc-cachebuster (0.3.0): Adds filters and helpers for cache busting to Nanoc
  • nokogiri (1.8.2): Nokogiri (鋸) is an HTML, XML, SAX, and Reader parser
  • nokogumbo (1.5.0): Nokogiri interface to the Gumbo HTML5 parser
  • pandoc-ruby (2.0.2): PandocRuby
  • pragmatic_segmenter (0.3.17): A rule-based sentence boundary detection gem that works out-of-the-box across many languages
  • rainpress (1.0.1): A CSS compressor
  • rest-client (2.0.2): Simple HTTP and REST client for Ruby, inspired by microframework syntax for specifying actions.
  • rqrcode (0.10.1): A library to encode QR Codes
  • rubypants-unicode (0.2.5): RubyPants-Unicode is a Ruby port of the smart-quotes library SmartyPants.
  • shortly (0.3.6): Url Shortner Services Ruby Wrapper
  • uglifier (4.1.6): Ruby wrapper for UglifyJS JavaScript compressor
  • vcardigan (0.0.9): Ruby vCard Builder/Parser

Development Dependencies

Also thank you to Denis Defreyne, Scott Barron, Stephen Celis, and Thibaud Guillaume-Gentil for the tools that have made the development process so much more bearable.

  • adsf (1.4.1): a tiny static file server
  • ghi (1.2.0): GitHub Issues command line interface
  • guard (2.14.2): Guard keeps an eye on your file modifications
  • guard-livereload (2.5.2): Guard plugin for livereload
  • guard-nanoc (2.1.2): guard gem for nanoc
  • guard-rake (1.0.0): Guard for running rake tasks

Foundational Infrastructures

We also need to acknowledge (though I think it would be impossible to do so properly) the thousands of developers that have contributed to the many Unix-related infrastructures and middlewares on top of which we have built this project, specifically those from the Arch Linux, CentOS, and SmartOS communities. The breadth and scope of the effort required to create and maintain these infrastructures, as well as the good that has come into the world because of them, is unfathomable.

The Server

Dynamic aspects of this site are handled with OpenResty, a dynamic web platform based on NGINX and LuaJIT, giving us the flexibility to handle certain things dynamically as this site grows in functionality. Currently the server does not do anything special other than handling standard HTTP requests for Web browsing and content negotiation for linked data, but on the near horizon we are planning on supporting WebMention and Memento interactions. We’ll fill in this section over time as we have more ideas and functionality.

OpenResty logo: a green, finely articulated bird formed in the cyclical shape of an event loop, the beak almost touching the tail.