In this assignment, you will encode a four-hundred-year-old poem using a generic data standard, display the marked-up text in a web browser using a computational translator, and discuss this exercise using the idea of deformance as a guide. This handout should contain everything you need to complete the assignment, but please use the discussion forum to ask any technical (or other!) questions.

The Poem: “A Litany in Time of Plague”, (1592) by Thomas Nashe

“A Litany in Time of Plague” was initially written as part of a morality play (or perhaps in “interlude”), Summer’s Last Will and Testament, by the Elizabethan playwright and pamphleteer Thomas Nashe. Untitled in that work, it was widely collected under several names in the 19th and 20th centuries before the current title was settled on. As Daniel Swift reminds us, “A litany is a prayer that takes the form of a series of petitions followed by a communal response: here, the kyrie eleison , ‘Lord have mercy.’” The play itself concerns the end of Summer’s reign and the passage of the crown to Autumn – an allegory which takes place in the midst of an outbreak of plague. It isi this outbreak which provides the most immediate context for the “Litany”.

Text of the Poem
1. Adieu, farewell, earth’s bliss;
2. This world uncertain is;
3. Fond are life’s lustful joys;
4. Death proves them all but toys;
5. None from his darts can fly;
6. I am sick, I must die.
7. Lord, have mercy on us!
8. Rich men, trust not in wealth,
9. Gold cannot buy you health;
10. Physic himself must fade.
11. All things to end are made,
12. The plague full swift goes by;
13. I am sick, I must die.
14. Lord, have mercy on us!
15. Beauty is but a flower
16. Which wrinkles will devour;
17. Brightness falls from the air;
18. Queens have died young and fair;
19. Dust hath closed Helen’s eye.
20. I am sick, I must die.
21. Lord, have mercy on us!
22. Strength stoops unto the grave,
23. Worms feed on Hector brave;
24. Swords may not fight with fate,
25. Earth still holds open her gate.
26. “Come, come!” the bells do cry.
27. I am sick, I must die.
28. Lord, have mercy on us!
29. Wit with his wantonness
30. Tasteth death’s bitterness;
31. Hell’s executioner
32. Hath no ears for to hear
33. What vain art can reply.
34. I am sick, I must die.
35. Lord, have mercy on us!
36. Haste, therefore, each degree,
37. To welcome destiny;
38. Heaven is our heritage,
39. Earth but a player’s stage;
40. Mount we unto the sky.
41. I am sick, I must die.
42. Lord, have mercy on us!

Deformance

We have discussed in class this portmanteau term coined by Lisa Samuels and Jerome McGann, a combination of “deform” and “performance.” Be sure you have some grasp of what this means!

Introduction to JavaScript Data Structures, HTML, and CSS

In class, we briefly discussed TEI, a widely-used markup language used by scholars for producing semi-structured representations of literary texts. TEI is a format, or defined feature set, of the XML “metalanguage”, a very widely-used system for structuring and processing many kinds of data, and it is very much worth learning if you are interested in pursuing literary DH. In this assignment, however, we will not be using TEI. Instead, we will use an entirely different data format – the JavaScript Object Notation, which has emerged as a sort of successor to XML for many applications. We will be seeing JSON again later in the semester, so try hard to understand this part now.

Writing Code

In this assignment, as in DH in general, it’s very important to use a code editor rather than a word processor. My strong recommendation is that you install Visual Studio Code and begin to familiarize yourself with this fundamental tool. You should also install any of the several live-preview extensions discussed in this linked web page.

However, Windows users may prefer the very lightweight Notepad++, while many Mac and Linux users enjoy SublimeText. If you’re a programmer and already have a preferred editor, stick with what you’re used to.
JavaScript Data Structures
All programming languages provide a variety of “data types” for storing information. In our example, the phone poem is represented as an Array, which is essentially a list of items. You can tell it is an array because it starts with [, ends with ], and the individual items are delimited by , (commas). Each item in the array is a JavaScript object representing a poem stanza. Objects are more complex data structures made up of so-called properties or key-value pairs: the whole object is delimited by “curly braces” ({...}), and each “property” of the object has two parts: the name, or key, followed by a colon, and then the value. Properties are separated by commas, just like array items:
```
{
  key1: value1,
  key2: value2
  }
```
Property values can be any valid JavaScript data type, so they can themselves have internal structure. A value might be a number, a string, an array, or even another object. That means an object can contain hierarchical structures of objects within objects, like the Matryoshka dolls we saw in a lecture slide. Here’s an example of such a data structure:
```
{
  key1: value1,
  key2: {
    key2a: value2a,
    key2b: [value2b1, value2b2, value2b3]
  }
}
```
In this case, we are creating a representation of the poem for later display in a browser. The poem contains parts (stanzas) which themselves contain parts (lines) which themselves contain parts (words, punctuation, and indentations). So it will make sense to use a “nested” or hierarchical structure of elements to represent the poem as a whole.
HTML Structures
HTML presents a document as a hierarchy of nested elements (much as discussed in the previous section), which the browser displays according to a set of rules. A normal HTML document might look something like this:
```
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document Title</title>
    </head>
    <body>
        <h1>Top-Level Heading</h1>
        <p>Pragraph containing <em>italicized</em> and <strong>bold</strong> text, as well as <a href="https://google.com">a link to Google</a>.</p>
    </body>
</html>
```
The indentation hopefully helps you to see the nested structure. The “root” element is of type “html, and has two direct ”children“, ”head“, and ”body“, each of which has several children of its own. The ”p“ element then has several of its own children.
CSS Instructions
HTML provides a structure. CSS controls the presentation or display of the elements in that structure. The CSS language is relatively simple, and is composed of rulesets that apply to one or more selectors. These rulesets contain key-value pairs of properties and values. For instance, the default css file in your assignment contains the following rulesets:
```
stanza {
    border: black solid 2px;    /*add a border around stanzas*/
    margin: 5px;                /*with margins so that borders don't run into each other! */
    display: block;             /*this is important! display on its own line*/
}

/* .... [bunch of other stuff] ...  */

.death {
    color: #991111;
    background-color: rgba(4,4,4,0.3);
    font-weight:700;
}
```
Each ruleset starts with the selector. The first is stanza, while the second is .death. Take note of that initial . in .death, I’ll say more about it in a second.

After the selector is a set of curly braces, { ... [bunch of stuff] ..}, and in between the braces you can find the rules themselves, which look a lot like JavaScript object properties: property-name: value;. Notice, though, that the line ends in ; (semi-colon) rather than a , (comma). There is an immense amount to learn in CSS, and I encourage you to teach yourself as much as you like. The default file contains some common examples:
- border: creates a border around the selected elements
- margin: adds space to the top, bottom, left, and right of the selected elements
- display: tells the browser how to manage the selected element in the document flow:
  - block means “give this element its own line,
  - inline means “use the line (or box) that the parent element has already defined
  - none means “just don’t use display this element at all
- color and background-color: the text color for the element’s contents and their background. See this tutorial for more details, and especially the section “how to describe a color” for instructions on valid color values
- a few others that you can look up on the web (there are excellent tutorials everywhere, and one goal of this course is to accustom you to using web resources to teach yourself technical skills)

Reading Hints

Content: Read the poem. Flag any parts that are unclear or mysterious or confusing. Summarize its content in one sentence.
Style: Look for:
- verbal patterns (e.g. sentences with the same shape) : what are they? What is their effect?
- sensory imagery (e.g. references to what you can see, hear, touch, feel): any patterns? What do they do for the poem?
- sounds: rhymes, alliteration, assonance. Note these devices, and think about how they affect your understanding of the poem
Theme: if you had to summarize the theme of your passage in one word, what would that word be? How does style support or embody theme?

Encoding: the initial file

Your assignment package contains the file poem.js, which defines a single global variable poem with a “starter kit” encoding the entire poem in a primitive data structure of this form:

let poem = [
/* ... headers and stuff first, and then this */
{
    "type": "stanza",
    "class": "",
    "content": [
      {
        "type": "line",
        "class": "",
        "content": [
          {"type": "word", "content": "Adieu", "class": "", "meta": ""},
          {"type": "punctuation", "content": ",", "class": "", "meta": ""},
          {"type": "word", "content": "farewell", "class": "", "meta": ""},
          {"type": "punctuation", "content": ",", "class": "", "meta": ""},
          {"type": "word", "content": "earth's", "class": "", "meta": ""},
          {"type": "word", "content": "bliss", "class": "", "meta": ""},
          {"type": "punctuation", "content": ";", "class": "", "meta": ""}
        ]
      }
    /* ... etc */ 
    ]
  }
  /*... other stanzas follow */
]

This encoding was produced automatically from the original text of the poem, as found in poem.txt. If you are interested in the original code, see tokenizer.js and the brief discussion in the online code repository for this assignment.

The data structure for the poem is an array of objects. Each object has up to four attributes:

type: a string initially set to stanza, line, word, or punctuation
content: either a string containing a word, a punctuation mark, or a number of spaces, or a nested object with the same structure as the parent
class: in the file you receive, this is always set to an empty string or null. You will want to change these values
meta: like class, this is set to an empty string or null/undefined, and you will likely want to modify the meta value of some words.

This data structure serves as input to a JavaScript program that uses it to create a nested structure of HTML nodes for display to a reader. This script included in your assignment, and you are welcome to inspect or even modify it, but you are not required to do so. For each unit in the data structure, attributes will be translated in the following way:

type defines the HTML tag name of a new HTML element
content defines the full contents of that element
class adds one or more HTML classes to the element
meta defines the content of a “tooltip” that appears on the tag’s contents when the reader’s mouse hovers over it

So, for instance, the fragment above will produce the following HTML:

<stanza>
    <line>
        <word>Adieu</word>
        <punctuation>,</punctuation>
        <word>farewell</word>
        <punctuation>,</punctuation>
        <word>earth's</word>
        <word>bliss</word>
        <punctuation>;</punctuation>
    </line>
</stanza>

Your job (see next section) is to modify this default data structure so that the reader sees something different.

Encoding: your assignment

By default, the poem is already properly displayed. Your assignment is to highlight or remove certain features of the poem in two steps:

first, add extra information to the underlying data structure. Choose particular items – individual words, lines, punctuation marks, or stanzas – and consider doing some of the following:
- add classes to words that have some common characteristic. If you’re interested in rhymes, you can tag rhyming words (you could even distinguish A and B rhyming couplets in a given stanza). If you are interested in a particular theme, choose a class name for words that are associated with that theme. If you have identified some other characteristic as relevant to your interpretation of the poem, find a way to formalize that relationship through a carefully-chosen classname.
- add meta to the item, to provide context to the reader as they encounter the poem.
- If you are so inclined, think about whether the currently-chosen element structure (of words and punctuation marks) is the best classification scheme. Make changes if you have a better idea.
second, adjust the display of the poem units to “deform” the text in a manner that transforms the reader’s interpretation. Do this by editing poem.css in your assignment package, changing or adding rules for some of the existing rulesets, and adding new rulesets for selectors that match your new classes.

So for instance, let’s make a few changes to the underlying data:

let poem = [
/* ... headers and stuff first, and then this */
{
    "type": "stanza",
    "class": "",
    "content": [
      {
        "type": "line",
        "class": "",
        "content": [
          {"type": "word", "content": "Adieu", "class": "bye", "meta": ""},
          {"type": "punctuation", "content": ",", "class": "", "meta": ""},
          {"type": "word", "content": "farewell", "class": "bye", "meta": "why the heck does he say 'bye' twice?"},
          {"type": "punctuation", "content": ",", "class": "", "meta": ""},
          {"type": "word", "content": "earth's", "class": "", "meta": ""},
          {"type": "word", "content": "bliss", "class": "goodstuff", "meta": ""},
          {"type": "punctuation", "content": ";", "class": "", "meta": ""}
        ]
      }
    /* ... etc */ 
    ]
  }
  /*... other stanzas follow */
]

This will produce the following HTML:

<stanza>
    <line>
        <word class="bye">Adieu</word>
        <punctuation>,</punctuation>
        <word class="bye tooltip-reference">farewell
            <tooltip>
              Why the heck does he say 'bye' twice?
            </tooltip>
        </word>
        <punctuation>,</punctuation>
        <word>earth's</word>
        <word class=goodstuff>bliss</word>
        <punctuation>;</punctuation>
    </line>
</stanza>

the tooltip will show up automatically. Now let’s add some color to the newly-classed elements by adding to poem.css:

.bye {
    color: red;
}

.goodstuff {
    color: gold;
}

Now reload the poem in your browser (or live preview in your text editor), and you’ll see the changes!

We’ll practice this process in class, using a different poem.

Discussion Section of the Assignment

Describe the changes you made to the poem data and the CSS rules that govern its display. Why did you choose these particular classes & meta fields? Are you satisfied with the results? Did you properties of the poem become more apparent to you after representing the poem in this particular way? If so, describe these properties. Are you convinced that this work meets the definition of “deformance” as described in the text? Is it a useful concept?

Sources