Meta Info

Overview

Aside from the research component, the website aspect of this project was an experiment to determine to what extent modern(ish) developent could be accomplished without frameworks or libraries of any kind, simply using "vanilla" code written entirely by hand. In this regard, the project was a gigantic failure. Although the finished project was indeed completed without modern tooling, the amount of work it required was decidedly not worth the effort involved, and the resulting site is somewhat stunted in terms of its functionality as a result.

Significant problems include difficulty with:

• editing the markup once written
• creating performant cross-platform animations
• lack of proper page routing
• lack of state management options, and
• lack of templates (e.g., includes)

While less-complicated initially, "vanilla" development starts to become less and less viable as the project grows in complexity. What this project demonstrated, at least for me, is the value of modern toolchains, despite their technical overhead. Were I to attempt this project again, I'd probably use a stack that includes a bundler (ViteJS), a static-site generator (11ty), a JS library to help manage state, at least (AlpineJS), and maybe a style framework (TailwindCSS).

Specifications

The goal was to build a lightweight site that delivered a consistent experience across devices. Considering longform prose would be the primary content type, effective typography was a must, along with some kind of navigation to help readers traverse what would prove to be quite lengthy columns.

Accordingly, and after several significantly different iterations, I settled on a side navigaton that tracks the position of the main column and highlights the user's position in the text. This was accomplished in a performant way using the intersection observer API (as opposed to an on-scroll event listener). The code for this effect was non-trivial, considering care needed to be taken to make sure that multiple elements were not in the viewport at the same time. A careful reader will notice some places where this was unavoidable and there are other, perhaps less noticiable but still problematic side effects as well.

Images (except figures) and icons were hand-drawn and inlined as .svg for superior performance and to leverage CSS animation and transitions. Many images were avoided altogether by using HTML entities such as ☰. Over time, as the animations were removed (see below), many fewer images were included.

This project was developed in a highly iterative fashion, going back and forth from manuscript to prototype as the ideas developed. This messy process was entirely necessary because there was no way to know what it should look like until it was written, but at the same time, to know how to write it, I needed to know how it would eventually look.

The practical result of this is that it took a long time. The original scaffolds of the site date back several years, and it originally looked very different than it does now. I originally wanted to use git to keep track of every version of the site, but over time as I moved and renamed code repositories, some things eventually got lost.

All the commits to this current project can be viewed on the GitHub repo linked in the top bar of every page.

Typography

The type is set in Overpass, at a 300 weight for the body and 700 weight for most headings. The few examples of serif fonts use the default serif font for each OS to save on load times for mobile or metered devices. The typescale uses responsive units (rems) and CSS variables.

The body text has a color code of #DEDEF1 and the background, at its lightest point, has a value of #1A1C40 which yields a contrast ratio of 12.32:1, which surpasses WCAG AAA compliance at the smallest sizes. Page headings and body subheadings also pass AAA compliance for larger text (5.23:1 and 4.61:1, respectively). It would have been easy enough to bump up the contrast significantly, but I was aiming for accessible colors and a muted visual tone. Many thanks to the reviewers who prevented too muted a tone :)

Other Technologies

A variety of technologies were used in the creation of this project, and I've briefly touched on the major ones below.

Twitter Embeds

At one time, each of the dark patterns examples was presented as an embedded tweet. The decision to embed individual tweets was a tradeoff that came with significant costs, and in the end the decision was made to remove them entirely. Here are the primary issues:

Twitter Tracking: Embeded tweets contain tracking scripts that send data to Twitter, and as a result, they are subject to content blocking on devices. In other words, some users will block the tweets from rendering by default. For this reason, I disabled Twitter's tracking on all pages, which should have resolved the issue. However, many issues remained.

Custom Styles: By detault, tweet styles are quite limited and because of how they are implemented in browsers, a lot of the CSS can't be touched in the stylesheet and needs to accessed by javascript functions. I implimented the dark theme and restricted some sizing properties but mostly left the tweets with their default styling because rewriting them all would require additional javascript on every page.

Benefits: The embedded tweets did probably save some time. Maybe. Rather than having to manually type in all the data, I could simply generate embed code and, with some optimizations, paste it in. I did spend a lot of time trying to style them, disable ad tracking, embed them properly, and so on, so I'm not really sure how much time it actually saved.

The main problem, of course, is longevity. As people canceled their Twitter accounts or deleted their tweets, this project became more and more compromised by missing embeds.

Tech Stack

As in all my projects, I deploy the modern-normalize stylesheet, distributed under an MIT license, as a foundation for the CSS.

v1.1.0 | https://github.com/sindresorhus/modern-normalize
          

I used the Sketch app for prototyping and for authoring the scaled vector (.svg) images used in animations and as design elements.

I used the Atom text editor both for coding and for authoring the manuscript, although some manuscript authoring was eventually comleted using iA Writter, a markdown-based text editor that simplified some word processing tasks.

I used GitHub and the GitHub client to stage and commit all coding changes. Sometimes I used the GitHub desktop client, but more often, I just used the command line. Sometimes I made notes in markdown, which converts easily to HTML, but mostly I made them in .txt files and converted them to HTML by hand.

Icons and Graphics

Many hand-drawn images that appear here were based on open-source line drawings posted to the Noun Project, a wonderful resource. Typically, I'd find a few examples of what I wanted and then create my own graphics from those, but sometimes I incorporated elements of the original artwork and I've credited those below.

Other, more involved graphics such as those which appear in the visual rhetoric section were adapted from among the many examples presented in Rudolf Arnheim's (1974/1991) text. These images were entirely recreated using .svg and Adobe Illustrator's iPad app, along with the Apple Pencil.

All .svgs were edited in both Sketch and Atom. Some are referenced in the file, but most are inlined directly into the html for superior performance and utility.

Animations

For a long time, the site featured many hand-drawn graphical animations which, sadly, I ultimately decided to scrap, despite a great deal of time invested in them. The main reason is that ensuring performance across browsers and devices proved too problematic and time-consuming and using the native HTML5 canvas element was too clunky and difficult. In a typical project, I would use an animation library like anime.js or perhaps something more powerful, like three.js, but that would have broken the no-framework stricture. Interested readers can view an older version of this webtext, with the animations still intact, here.

Credits

The following artists from the Noun Project authored images that inspired either directly or indirectly the work I adapted from them. While each of the icons I drew is my own, it owes a debt to these artists, so I’m acknowledging this here.

"Octopus" by Yuliya Po. The icon for the site uses Po's outer shape. The eye inside, as well as other aspects of implimentation, are my own.

"Bubbles" by Alex Vaughn. Vaughn's bubble collection served as a template for my own bubble drawings.

"Angler Fish" by Chanutis Industries served as inspiration for my own angler fish, at the far bottom right of many of the original pages, although I embelleshed it so significantly it's perhaps no longer recognizable.

Other assorted fish and drawings are my own.