Influences on my Blog's Design

In this post, I wax philosophical about:

• Marginalia
• Unique and Durable Table Numbers
• Pedantic Grade School Tests
• No Reliance on Javascript
• Calling out Updates

Marginalia

I love parantheticals, sidenotes, and footnotes. Consider reading Fermat’s Enigma by Simon Singh, which explores Fermat’s Last Theorom whose proof was alluded to but lamented that he had “assuredly found an admirable proof on this, but the margin is too narrow to contain it.”

This last year, I re-read J.R.R. Tolkien's 📖 Lord of the Rings series. As I finished each chapter, I then read the corresponding chapter from The Lord of the Rings: A Reader’s Companion. I love the overlay of the narrative and the influences into the narrative.

Though my favorite was reading The Annotated Hobbit 📖 that eschewed end notes in favor of margin sidenotes.

This is why I adopted the Tufte Cascading Stylesheet (CSS) stylesheet. Though I have drifted from it as I’ve added more colors and favored iconic long-standing fonts over the more custom fonts of the same family. It provides a crisp layout, with ample space for marginalia. For reference, side notes are marginalia with numbers and margin notes are those that are not numbered.

I chose to deviate from the mobile view having auto-collapsed margin and side notes. I opted instead to have them expanded by default, with a dotted line calling them out as something different. I may opt to include some coloration to help subtly separate them.

Unique and Durable Table Numbers

The Advanced Dungeons & Dragons Dungeon Masters Guide (1^st Edition) includes an index of Tables and Charts. This index provides a quick mechanism to lookup something at the table.

Goodman Games’ Dungeon Crawl Classics (DCC) names each table. For example, in the Dungeon Crawl Classics (DCC) Role Playing Game (RPG), Table 5-2 lists the Mercurial Magic effects.

In both of these cases, the publisher provides an alternate mechanism for referencing rules; namely a table number. Other publications can reference tables by number, which creates a kind of durability to those references. So long as the original material continues the numbering scheme, they can move a table to different pages.

I have chose to caption and uniquely number each table on my site. Each table can be linked to on the blog post in which it occurs by using the following Uniform Resource Locator (URL 📖): https://takeonrules.com/tables/<table_number> (where <table_number> is the specific table number you want). You may also link to the anchor tag on the page.

In this way, I’m committing to having tables that can be externally referenced. A small homage to a practice I first observed in gaming material.

Pedantic Grade School Tests

In 5th grade, our teacher administered a test on following oral instructions.

She started with something like this:

Take out a lined sheet of paper. In the top right corner of the page, write your name.

Now on the left side of the paper, write the number one (1) on the first line. On the second line write the number two (2). On the third line, write the number three (3). On so on until you’ve numbered twenty lines.

The teacher proceeded to dictate instructions, as each student translated those instructions into words and numbers on the paper. We all turned in our paper.

The next day, I got my paper back. I had scored a 99%. The teacher marked me wrong for numbering each line incorrectly. On the first line I had 1), on the second line I had 2), and so on. She marked me down for writing the ) after each numeral.

I accepted that for a moment, until I looked at another students paper. They had written 1. then 2. and so forth, but they weren’t penalized for writing a period after each numeral.

I raised my objection to the teacher, saying that a parenthesis was one character just as a period was one character. The teacher refused to budge, standing firm on my 99% score. She also upheld her decision about not penalizing people for writing 1..

This minor classroom injustice certainly sat as a formative moment. This test was one of the many bricks that paved my way to a programming career. Another test was my Calculus II final in college. It was a masterpiece. When I completed the first problem, the answer looked wrong. I checked it and it worked. The second problem’s solution also looked wrong. I checked and it worked. Every answer on the test looked wrong. And by wrong I mean things like √(817 ÷ 12) or (79π ÷ 19). During course work and conditioning, the answers looked “prettier” (3π ÷ 2 or √5). The test, in a moment of stress, highlighted that sometimes the right answers look wrong.

So, in honor of my 5th Grade elementary teacher, I added a closed parenthesis (e.g. “)”) to each of my sidenotes.

No Reliance on Javascript

There are three chunks of Javascript on this site. However, the site works great without any javascript.

First, there is the Javascript that makes visible the Search button on the top of the page. When you turn off Javascript, the <noscript> tag instead displays.

Second, the site Search page uses the Lunr.js to query the JSON index page. This provides a reasonable enough query (and one that I use on my local machine).

Third, the site uses Data Tables to improve (perhaps) the utility of a few of the Metadata tables.

For the past few days, I’ve been using the NoScript plugin for Firefox and marveling at the various sites. Some do not work without Javascript. Others provide the illusion of maybe working. And a small handful work well.

Animations and updating content create a nightmare to keep your site accessible. There are standards you can use, namely WAI-ARIA, to help guide you in making an accessible application. But even then, each bit of animation and live updates adds complications to what a given page represents.

Keep it simple. And in that simplicity, comes a freedom from maintaining moving parts. Moving parts are the places where things are most prone to break. My website is built via Hugo, which is a major moving part for maintaining my site. I have experienced two significant breaking changes regarding Hugo. Each time, I’ve adapted my build process and added some audits to help verify that my site wasn’t broken.

Calling out Updates

As I go back to prior blog posts, or glean more information, I like to include updates. You can see a list of Updates in the Metadata section. I’ve written a lot of things, and haven’t updated all the things that may warrant updating. However, I’m committed to writing updates as things change.

I believe truth matters. And that opinions and perspectives should change overtime. I wanted a mechanism to draw attention to those updates. On a given page, I call them out in different ways (as sidenotes, inline, or marginnotes) depending on how I’m thinking about the updates.

In this way, the words I originally used can exist alongside contextualization and updates. Though I may well update the body of the document without marking something as an update.

Conclusion

I wanted to provide an insight into a few decisions that I’ve made. I hope this helps get a better sense of the how and why I do things.