tonyfast · November 24, 2024 22:51
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html itemscope="" itemtype="https://schema.org/Article" lang="en">
 <!-- # accessible notebook reference template -->
 <head>
 <!-- ## document properties -->
 <meta charset="utf-8"/>
 <title></title>
 <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
 <meta content="" itemprop="description" name="description"/>
 <meta content="light" name="color-scheme"/>
 <meta content="" itemprop="name" property="og:title"/>
 <meta content="" property="og:url"/>
 <meta content="" property="og:description"/>
 <meta content="" itemprop="image" property="og:image"/>
 <meta content="article" property="og:type"/>
 <link href="" rel="canonical"/>
 <meta content="" property="article:published_time"/>
 <template id="tpl-mermaid">
 <script type="module">
            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
            mermaid.initialize({ startOnLoad: true });
        </script>
 </template>
 <script type="module">
            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
            mermaid.initialize({ startOnLoad: true });
        </script></head>
 <body data-highlight="a11y" data-literate="true" data-reverse="false" data-slide="true" data-wide="false" onkeyup="keyboardEvents(event)">
 <!-- ## generic landmark structure
     
    the notebook is a single page application, and we begin by establishing the conventional landmark
    structure for an article with `contentinfo`, `main`, and `footer` roles.

    -->
 <header>
 <!-- ### skip link
         
        the first tab stop is a skip link that goes directly to the first cell allowing the audience to skip directly 
        to pertinent content.

        -->
 <ul role="toolbar">
 <li aria-current="true">
 <a aria-describedby="metadata:title summary:total cells__ summary:code metadata:language code__ cells__ summary:md markdown__ cells__ summary:execution_state" class="skip-link" href="#cells">skip
                    to content</a>
 </li>
 <li>
 <a accesskey="." class="skip-link" href="#BOTTOM" id="TOP">skip to end</a>
 </li>
 </ul>
 <details class="site nav">
 <!-- ### site navigation
             
            notebooks are typically found in a collection with other notebooks, content, or media.
            the site navigation is a canonical feature that allows the audience to navigate to new content
            or application developers may define other actions.

            -->
 <summary class="site nav" id="site:nav__">site navigation</summary>
 <table aria-labelledby="site:nav__" class="site toc" id="site:toc" role="group">
 <thead>
 <th class="id">id</th>
 <th class="updated">updated</th>
 <th class="created">created</th>
 <th class="title">title</th>
 <th class="description">description</th>
 <th class="actions">actions</th>
 </thead>
 <tbody role="group"></tbody>
 <template>
 <tr role="none">
 <th class="id"><a></a></th>
 <th class="updated"><time></time></th>
 <th class="created"><time></time></th>
 <td class="title"><a></a></td>
 <td class="description">
 <p></p>
 </td>
 <td class="actions">
 <form></form>
 </td>
 </tr>
 </template>
 </table>
 </details>
 <!-- the toolbar is repetitive and goes in the header -->
 <form id="nb:toolbar" name="nb">
 <a accesskey="," href="#nb:settings:summary" id="SETTINGS" tabindex="-1"></a>
 <details id="nb:settings">
 <summary id="nb:settings:summary">settings</summary>
 <details open="">
 <summary>cell modes</summary>
 <p>change the appearance, layout, and accessibility of the notebook content.</p>
 <details id="nb:visibility">
 <summary>show/hide components</summary>
 <table class="visibility" role="group">
 <thead>
 <tr>
 <th>column</th>
 <th id="visible__">visible</th>
 <th id="none__">hidden</th>
 <th id="nv__">non-visual</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>cell</th>
 <td><input aria-labelledby="visible__ cell__" checked="" name="visibility:cell" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell__ none__" name="visibility:cell" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell__ nv__" name="visibility:cell" type="radio" value="nv"/>
 </td>
 </tr>
 <tr>
 <th>id</th>
 <td><input aria-labelledby="cell:id visible__" name="visibility:id" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:id none__" checked="" name="visibility:id" type="radio" value="none"/>
 </td>
 <td><input aria-labelledby="cell:id nv__" name="visibility:id" type="radio" value="nv"/>
 </td>
 </tr>
 <tr>
 <th>selected</th>
 <td><input aria-labelledby="cell:exection_count visible__" name="visibility:selected" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:exection_count none__" checked="" name="visibility:selected" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:exection_count nv__" name="visibility:selected" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>execution count</th>
 <td><input aria-labelledby="cell:execution_count visible__" checked="" name="visibility:execution" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:execution_count none__" name="visibility:execution" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:execution_count nv__" name="visibility:execution" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>lines of code</th>
 <td><input aria-labelledby="cell:loc visible__" name="visibility:lines" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:loc none__" checked="" name="visibility:lines" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:loc nv__" name="visibility:lines" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>cell type</th>
 <td><input aria-labelledby="cell:cell_type visible__" name="visibility:cell_type" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:cell_type none__" checked="" name="visibility:cell_type" type="radio" value="none"/>
 </td>
 <td><input aria-labelledby="cell:cell_type nv__" name="visibility:cell_type" type="radio" value="nv"/>
 </td>
 </tr>
 <tr>
 <th>toolbar</th>
 <td><input aria-labelledby="toolbar__ visible__" name="visibility:toolbar" type="radio" value="visible"/></td>
 <td><input aria-labelledby="toolbar__ none__" checked="" name="visibility:toolbar" type="radio" value="none"/></td>
 <td><input aria-labelledby="toolbar__ nv__" name="visibility:toolbar" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>started at</th>
 <td><input aria-labelledby="cell:started_at visible__" name="visibility:started" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:started_at none__" checked="" name="visibility:started" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:started_at nv__" name="visibility:started" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>completed at</th>
 <td><input aria-labelledby="cell:completed_at visible__" name="visibility:completed" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:completed_at none__" checked="" name="visibility:completed" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:completed_at nv__" name="visibility:completed" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>elapsed</th>
 <td><input aria-labelledby="cell:elapsed visible__" name="visibility:elapsed" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:elapsed none__" checked="" name="visibility:elapsed" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:elapsed nv__" name="visibility:elapsed" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>source</th>
 <td><input aria-labelledby="cell:source visible__" checked="" name="visibility:source" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:source none__" name="visibility:source" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:source nv__" name="visibility:source" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>metadata</th>
 <td><input aria-labelledby="cell:metadata visible__" name="visibility:metadata" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:metadata none__" checked="" name="visibility:metadata" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:metadata nv__" name="visibility:metadata" type="radio" value="nv"/></td>
 </tr>
 <tr>
 <th>outputs</th>
 <td><input aria-labelledby="cell:outputs visible__" checked="" name="visibility:outputs" type="radio" value="visible"/></td>
 <td><input aria-labelledby="cell:outputs none__" name="visibility:outputs" type="radio" value="none"/></td>
 <td><input aria-labelledby="cell:outputs nv__" name="visibility:outputs" type="radio" value="nv"/></td>
 </tr>
 </tbody>
 </table>
 </details>
 <table class="inputs" role="group">
 <tbody>
 <tr>
 <th class="title"><label for="modes:reverse">reverse cells</label></th>
 <td class="input"><input aria-describedby="modes:reverse__" id="modes:reverse" name="reverse" onchange="reverseNotebookRows(this)" type="checkbox"/>
 </td>
 <td class="desc" id="modes:reverse__">reverse the direction of cells showing the last cell
                                    first.</td>
 </tr>
 <tr>
 <th class="title"><label for="modes:slides">slide mode</label></th>
 <td class="input"><input aria-describedby="modes:slides__" id="modes:slides" name="slide" onchange="toggleSlideMode(this)" type="checkbox"/></td>
 <td class="desc" id="modes:slides__">a desktop and mobile friendly slide show view.</td>
 </tr>
 <tr>
 <th class="title"><label for="modes:pres">presentation mode</label></th>
 <td class="input"><input aria-describedby="modes:pres__" id="modes:pres" name="presentation" onchange="togglePresentationMode(this)" type="checkbox"/></td>
 <td class="desc" id="modes:pres">increase text readability</td>
 </tr>
 <tr>
 <th class="title"><label for="modes:wide">wide mode</label></th>
 <td class="input"><input aria-controls="main" aria-describedby="modes:wide__" id="modes:wide" name="wide" onchange="toggleWideMode(this)" type="checkbox"/>
 </td>
 <td class="desc" id="modes:wide__">activates horizontal scrolling for maximum content. this
                                    mode is useful
                                    for high
                                    zoom
                                    and
                                    magnification users.</td>
 </tr>
 <tr>
 <th class="title"></th>
 <td class="input">
 <table class="inputs" role="group">
 <caption>empty cells</caption>
 <tr>
 <th class="title"><label for="empty:all">hide all empty cells</label></th>
 <td class="input"><input aria-controls="main" aria-describedby="empty:all__" id="empty:all" name="trivial" type="checkbox"/></td>
 <td class="desc" id="empty:all__"></td>
 </tr>
 <tr>
 <th class="title"><label for="empty:trail">hide trailing empty cells</label>
 </th>
 <td class="input"><input aria-controls="main" aria-describedby="empty:trail__" checked="" id="empty:trail" name="trivial" type="checkbox"/>
 </td>
 <td class="desc" id="empty:trail__">empty cells after the last significant cell
                                                are suppressed
                                            </td>
 </tr>
 </table>
 </td>
 <td class="desc"></td>
 </tr>
 </tbody>
 </table>
 </details>
 <details open="">
 <summary>text settings</summary>
 </details>
 <details open="">
 <summary>image &amp; video settings</summary>
 <table class="inputs" role="group">
 <tbody>
 <tr>
 <th class="title"><label for="text:only">text only</label></th>
 <td class="input"><input id="text:only" onclick="toggleAlt(event)" type="checkbox"/></td>
 <td class="desc">replace images, videos, iframes, audio with titles and alt text</td>
 </tr>
 </tbody>
 </table>
 </details>
 <button disabled="" name="submit" onsubmit="event.preventDefault()" type="submit">run notebook</button>
 <details class="style">
 <summary>custom style</summary>
 <textarea class="style"></textarea>
 <button onclick="updateCustomStyle(event)">update</button>
 </details>
 <style></style>
 </details>
 </form>
 </header>
 <!-- prefer section because it roles are more malleable than main -->
 <section class="nb light" id="main" role="main">
 <style>@layer api, wide, defaults, layout, slides;

 @layer api {
    :root {
        --nb-focus-width: 3px;
        --nb-accent-color: auto;
        --nb-margin: 5em;
        --nb-font-size: 16px;
        --nb-font-family: serif;
        --nb-line-height: 1.5;
        --nb-scrolled-height: 600px;
        --color-light: #fff;
        --color-dark: #2b2a33;
        --nb-pilcrow: "🔗";
        --fg-color: var(--color-dark);
        --bg-color: var(--color-light);
        --nb-invert: 0;
        --nb-grayscale: 0;
        --scrollbar: 16px;
    }
 }


 @layer layout {
    html {
        /* when we put this at the html level we replace the color of the margins */
        filter: invert(var(--nb-invert)) grayscale(var(--nb-grayscale));
    }

    table.inputs {
        &>thead {
            display: none;
        }

        &>tbody {

            display: flex;
            flex-direction: column;

            &>tr {
                display: flex;
                gap: 2ch;

                &>.title {
                    order: 2;
                }

                &>.input {
                    order: 1;
                }

                &>.desc {
                    order: 3;
                }
            }
        }
    }

    body {
        font-size: var(--nb-font-size);
        font-family: var(--nb-font-family);
        accent-color: var(--nb-accent-color);
        line-height: var(--nb-line-height);
        color: var(--fg-color);
        background-color: var(--bg-color);

        .highlight {
            color: unset;
        }

        &.light {
            --fg-color: var(--color-dark);
            --bg-color: var(--color-light);

        }

        &.dark {
            --fg-color: var(--color-light);
            --bg-color: var(--color-dark);
        }

        margin: 0;

        &>* {
            margin-left: var(--nb-margin);
            margin-right: var(--nb-margin);
            width: fit-content;
        }

        /* line height cant change pre elements based on browser presets */
        pre,
        .highlight>pre,
        textarea {
            line-height: var(--nb-line-height);
            white-space: pre-wrap;
        }

        &:not([data-highlight=none]) textarea[name=source] {
            display: none;
        }

        &[data-highlight=none] textarea[name=source]+section {
            display: none;
        }

    }


    /* there nothing to be said about this topic that [sara soueidan](https://www.sarasoueidan.com/blog/focus-indicators/) hasn't said.
                we start with her [universal focus recommendation](https://www.sarasoueidan.com/blog/focus-indicators/#a-%E2%80%98universal%E2%80%99-focus-indicator).    */
    .cell:focus-within,
    header details:focus-within,
    :focus-visible {
        outline: max(var(--nb-focus-width), 1px) solid;
        box-shadow: 0 0 0 calc(2 * max(var(--nb-focus-width), 1px));
    }


    table.toc[role=list] {
        thead {
            display: none;
        }
    }

    body[data-literate=true] table[role=list].cells>tbody>tr.cell.literate>.source {
        display: none;
    }

    /* cell visibility */
    table[role=list].cells>tbody>tr.cell {

        &.markdown {
            &>.source {
                display: none;
            }
        }

        &>:not(.source, .id_ordinal, .outputs) {
            display: none;
        }

    }

    table[role="list"].cells table.outputs>tbody>tr.output {
        &>:not(.data) {
            display: none;
        }
    }

    /* cell layouts */
    table[role=list].cells,
    table[role=list].cells table.outputs {
        display: block;

        thead {
            display: none;
        }

        &>tbody {

            &,
            &>tr {
                display: flex;
                flex-direction: column;

                >:not(script, style, template) {
                    display: block;
                    width: calc(100% - var(--scrollbar));
                }
            }

        }

    }

    [data-reverse=true]>section>table>tbody {
        flex-direction: column-reverse;
        /* this needs to be a higher priority selector */
    }
 }

 /* add grid area names */

 @layer defaults {
    table {
        border-spacing: unset;
    }

    select,
    button {
        font-family: inherit;
        font-size: inherit;
    }

    textarea {
        font-family: monospace;
        font-size: inherit;
        overflow: auto;
    }

    /* align checkboxes with buttons */
    input[type="checkbox"] {
        vertical-align: middle;
    }
 }


 textarea[name=source] {
    box-sizing: border-box;
    width: 100%;
    /* on firefox, the input and output become interactive when there is overflow. chrome fixed this recently find reference.*/
    min-width: 0;
    resize: vertical;
 }

 body[data-slide=true]>footer,
 section.log>details:not([open])+table,
 .nv:not(:focus-within):not(:active),
 .visually-hidden:not(:focus-within):not(:active),
 .visually-hide {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
 }

 @layer slides {
    body[data-slide=true] {
        font-size: larger;
        width: max-content;
        overflow: auto;
        display: flex;
        flex-direction: column;

        &[data-reverse]>section>table>tbody {
            flex-direction: row-reverse;
        }

        &>header {
            position: sticky;
            left: 0;
            background: var(--bg-color);
            width: 100vw;

            >:not(script, style, template) {
                width: fit-content;
            }
        }

        &>section {
            display: flex;
            flex-direction: column;

            &>:not(table) {
                position: sticky;
                left: 0;
                width: fit-content;
                max-width: 100vw;
            }

            &>table.cells {
                &>tbody {
                    height: 100vh;
                    flex-direction: row;
                    width: max-content;
                    background: var(--bg-color);
                    gap: 30vw;

                    &>tr {
                        overflow: auto;
                        width: 100vw;
                        height: 100vh;
                        background: var(--bg-color);
                        position: sticky;
                        left: 0;
                        border: 1px dotted;

                        &>.id_ordinal {
                            background: var(--bg-color);
                            position: sticky;
                            left: 0;
                            top: 0;
                        }

                        &>:not(template, script, style, .id_ordinal) {
                            width: calc(100% - var(--scrollbar));
                        }
                    }
                }
            }
        }
    }
 }

 @layer wide {

    /* the wide mode provides support for low vision, large print and magnification */
    img,
    video,
    iframe {
        max-height: 100vh;
        max-width: 100%;
    }

    [data-wide=true] {
        --nb-margin: 0;

        header,
        &>section[role=main],
        footer {
            overflow: auto;
            margin-left: unset;
            margin-right: unset;
        }


        [role=list].nb.cells {
            overflow: hidden;

            &>tbody {
                overflow: hidden;

                &>tr {

                    overflow: auto;

                    th,
                    td {
                        text-align: left;
                    }
                }

            }
        }

        .nb-source {
            overflow-x: visible;
        }

        .nb-outputs {
            min-width: 100%;
        }

        img,
        image {
            height: unset;
            width: unset;
        }

        .notebook-cells,
        .cells,
        .cells>.cell,
        .cells>.cell>[role="none"] {
            width: max-content;
        }

        pre,
        textarea {
            white-space: pre;
        }
    }
 }


 @layer empty {
    [data-empty=trailing] table.nb.cells>tbody>tr {
        &.trivial th.id_ordinal a {
            text-decoration: line-through;
        }

        &:not(.trivial):last-child+tr.trivial {

            &,
            &+tr.trivial {

                td,
                th:not(.id_ordinal) {
                    display: none;
                }
            }
        }
    }
 }

 [data-empty=all] table.nb.cells tr.trivial {
    display: none;
 }

 /* Extra Small Devices, Phones. and zoom */
 @media screen and (max-width : 768px) {

    header,
    section[role=main],
    footer {
        --nb-margin: 0%;
    }

    [data-slide=true] table[role=list].cells>tbody>tr.cell>.id_ordinal {
        position: relative;
    }
 }

 p.alt {
    font-style: italic;
    border: 1px solid;

    &::before {
        font-weight: bold;
        content: "alt text: "
    }
 }</style>
 <script type="module">

 function expandFullScreen(element) {

 }

 function collapseFullScreen(element) {

 }

 function toggleNotebookColumn(element) {

 }

 function reverseNotebookRows(element) {
    document.getElementsByTagName("body")[0].setAttribute("data-reverse", element.checked ? "true" : "false")

 }
 function toggleSlideMode(element) {
    document.getElementsByTagName("body")[0].setAttribute("data-slide", element.checked ? "true" : "false");
 }
 function updateCustomStyle(event) {
    event.preventDefault();
    let parent = event.target.closest("form");
    parent.querySelector("details.style + style").textContent = parent.querySelector("textarea.style").value;
 }

 function toggleWideMode(element) {
    document.getElementsByTagName("body")[0].setAttribute("data-wide", element.checked ? "true" : "false");
 }
 class Logger {
    constructor(target = null) {
        target = target === null ? document.getElementById("log") : target;
        this.target = target;
        this.template = this.target.querySelector("template");
        console.log(this)
    }

    log(level, message, polite = null) {
        let row = this.template.content.cloneNode(true).querySelector("tr");
        console.log(row, this)
    }
 }


 globalThis.expandFullScreen = expandFullScreen
 globalThis.collapseFullScreen = collapseFullScreen
 globalThis.toggleNotebookColumn = toggleNotebookColumn
 globalThis.toggleSlideMode = toggleSlideMode
 globalThis.toggleWideMode = toggleWideMode
 globalThis.reverseNotebookRows = reverseNotebookRows
 globalThis.updateCustomStyle = updateCustomStyle
 globalThis.logger = new Logger()


 function editorFromTextArea(textarea, extensions) {
    let view = new EditorView({ doc: textarea.value, extensions })
    textarea.parentNode.insertBefore(view.dom, textarea)
    textarea.style.display = "none"
    if (textarea.form) textarea.form.addEventListener("submit", () => {
        textarea.value = view.state.doc.toString()
    })
    return view
 }

 function toggleAlt(event) {
    document.querySelectorAll("img, iframe").forEach(
        (element) => {
            if (!event.target.checked) {
                element.parentElement.toggleAttribute("open", false);
                if (element.nextElementSibling.tagName == "P") {
                    element.nextElementSibling.remove();
                }
            } else {
                let p = document.createElement("p");
                p.classList.add("alt");
                p.textContent = element.getAttribute("alt", "")
                if (!p.textContent) {
                    p.textContent = element.getAttribute("title", "");
                }
                console.log(element);
                if (element.tagName == "IFRAME") {
                    if (element.parentElement.tagName == "DETAILS") {
                        element.parentElement.toggleAttribute("open", true);
                    }
                }
                element.after(p);
            }
            element.toggleAttribute("hidden", event.target.checked);


        }
    )
 }


 function setCurrentFocus(element) {
    let tbody = element.closest("tbody.cells");
    let current = tbody.querySelector("[aria-current]");
    if (current) {
        current.toggleAttribute("aria-current", false);
    }
    let row = element.matches("tr.cell") ? element : element.closest("tr.cell");
    row.setAttribute("aria-current", "true");
 }

 function keyboardEvents(event) {
    if (event.target.tagName == "TEXTAREA") {
        return;
    }
    if (event.target.closest("table.cells")) {
        if (event.ctrlKey && event.key == "ArrowLeft") {
            goToPrevCell()
        } else if (event.ctrlKey &&event.key == "ArrowRight") {
            goToNextCell()
        }
    }

 }

 function goToNextCell() {
    let current = document.querySelector("tr.cell[aria-current]");
    if (current) {
        if (current.nextElementSibling && current.nextElementSibling.tagName == "TR") {
            current.nextElementSibling.querySelector("a").focus();
        }
    } else {
        document.querySelector("tbody.cells>tr.cell a").focus();
    }
 }

 function goToPrevCell() {
    let current = document.querySelector("tr.cell[aria-current]");
    if (current) {
        if (current.previousElementSibling && current.previousElementSibling.tagName == "TR") {
            current.previousElementSibling.querySelector("a").focus();
            if (document.querySelector("body").matches("[data-slide]")) {
                let x = (Number(current.previousElementSibling.getAttribute("data-cell")) - 1) * 1.4 * window.outerWidth;
                window.scrollTo(x, window.scrollY);
            }
        }
    } else {
        document.querySelector("tbody.cells>tr.cell a").focus();
    }
 }

 globalThis.setCurrentFocus = setCurrentFocus
 globalThis.toggleAlt = toggleAlt
 globalThis.keyboardEvents = keyboardEvents</script>
 <details class="nb toc" open="">
 <summary id="nb:toc__">contents</summary>
 <!-- table of contents is often presented as a side panel and a dialog element gives those affordances -->
 <table aria-labelledby="nb:toc__" class="nb toc" id="nb:toc" role="group">
 <thead role="none">
 <tr role="none">
 <th class="nb toc level">level</th>
 <th class="nb toc cell">cell</th>
 <th class="nb toc heading">heading</th>
 <th class="nb toc description">description</th>
 </tr>
 </thead>
 <tbody role="none"><tr role="none" style="--level: 1;">
 <th class="nb toc level">1</th>
 <th class="nb toc cell"><a href="#c1">1</a></th>
 <td class="nb toc heading"><a href="#writing-accessible-literate-programs">writing accessible literate programs</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c4">4</a></th>
 <td class="nb toc heading"><a href="#literacy-and-practice">literacy and practice</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c5">5</a></th>
 <td class="nb toc heading"><a href="#donald-knuth--is-our-patron-saint-of-yak-shaves">donald knuth  is our patron saint of yak shaves</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c5">5</a></th>
 <td class="nb toc heading"><a href="#herman-zapf--is-a-famous-type-designer-and-calligrapher">herman zapf  is a famous type designer and calligrapher</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c7">7</a></th>
 <td class="nb toc heading"><a href="#pioneering-women-in-the-digital-arts">pioneering women in the digital arts</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c8">8</a></th>
 <td class="nb toc heading"><a href="#calligraphy-in-modern-notebooks">calligraphy in modern notebooks</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c9">9</a></th>
 <td class="nb toc heading"><a href="#1984-literate-programming">1984 literate programming</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c10">10</a></th>
 <td class="nb toc heading"><a href="#literate-programming-courses">literate programming courses</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c11">11</a></th>
 <td class="nb toc heading"><a href="#comments-on-literate-programming-and-non-literate-programming">comments on literate programming and non-literate programming</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 5;">
 <th class="nb toc level">5</th>
 <th class="nb toc cell"><a href="#c11">11</a></th>
 <td class="nb toc heading"><a href="#new-questions-brought-by-literate-programming">new questions brought by literate programming</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c11">11</a></th>
 <td class="nb toc heading"><a href="#CLASS:-have-you-seen-any-literate-style-programming-in-documentation-or-software-before?-or,-have-you-ever-really-appreciated-some-documentation-before?">CLASS: have you seen any literate style programming in documentation or software before? or, have you ever really appreciated some documentation before?</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c12">12</a></th>
 <td class="nb toc heading"><a href="#writing-in-multiple-languages-and-weaving-yarns">writing in multiple languages and weaving yarns</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c13">13</a></th>
 <td class="nb toc heading"><a href="#the-original-WEB-implementation">the original WEB implementation</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c14">14</a></th>
 <td class="nb toc heading"><a href="#modern-literate-computing">modern literate computing</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c15">15</a></th>
 <td class="nb toc heading"><a href="#literate-computing-in-computational-notebooks">literate computing in computational notebooks</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c16">16</a></th>
 <td class="nb toc heading"><a href="#this-is-not-a-program">this is not a program</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c17">17</a></th>
 <td class="nb toc heading"><a href="#semiotics:-the-study-of-signs-and-their-meaning">semiotics: the study of signs and their meaning</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c18">18</a></th>
 <td class="nb toc heading"><a href="#literate-programming-may-reduce-ambiguity">literate programming may reduce ambiguity</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c19">19</a></th>
 <td class="nb toc heading"><a href="#cognitive-accessibility-and-writing">cognitive accessibility and writing</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c20">20</a></th>
 <td class="nb toc heading"><a href="#cognitive-accessibility-and-resiliency">cognitive accessibility and resiliency</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c21">21</a></th>
 <td class="nb toc heading"><a href="#writing-for-yourself">writing for yourself</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c21">21</a></th>
 <td class="nb toc heading"><a href="#you-are-your-first-audience">you are your first audience</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 5;">
 <th class="nb toc level">5</th>
 <th class="nb toc cell"><a href="#c21">21</a></th>
 <td class="nb toc heading"><a href="#guidance-for-you,-your-first-audience">guidance for you, your first audience</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c22">22</a></th>
 <td class="nb toc heading"><a href="#writing-for-each-other">writing for each other</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c22">22</a></th>
 <td class="nb toc heading"><a href="#TLDR:--that-sucks--is-a-technique-for-validating-others-and-making-them-feel-heard">TLDR:  that sucks  is a technique for validating others and making them feel heard</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c23">23</a></th>
 <td class="nb toc heading"><a href="#THREAD:-what-are-tasks-that-are-NOT-writing?-what-are-some-things-that-have-hindered-your-writing?">THREAD: what are tasks that are NOT writing? what are some things that have hindered your writing?</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c24">24</a></th>
 <td class="nb toc heading"><a href="#CLASS:-2-discord-breakout-discussions">CLASS: 2 discord breakout discussions</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 2;">
 <th class="nb toc level">2</th>
 <th class="nb toc cell"><a href="#c25">25</a></th>
 <td class="nb toc heading"><a href="#marginalia">marginalia</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c25">25</a></th>
 <td class="nb toc heading"><a href="#markdown-syntax">markdown syntax</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 4;">
 <th class="nb toc level">4</th>
 <th class="nb toc cell"><a href="#c25">25</a></th>
 <td class="nb toc heading"><a href="#widespread-adoption">widespread adoption</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c25">25</a></th>
 <td class="nb toc heading"><a href="#computational-notebook-interfaces">computational notebook interfaces</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr><tr role="none" style="--level: 3;">
 <th class="nb toc level">3</th>
 <th class="nb toc cell"><a href="#c25">25</a></th>
 <td class="nb toc heading"><a href="#computational-notebook-formats">computational notebook formats</a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr></tbody>
 <template id="tpl:toc">
 <tr role="none">
 <th class="nb toc level"></th>
 <th class="nb toc cell"><a></a></th>
 <td class="nb toc heading"><a></a></td>
 <td class="nb toc description">
 <p></p>
 </td>
 </tr>
 </template>
 </table>
 </details>
 <details>
 <!--during execution the summary will continually need to be updated.
                        it holds a lot of information in the status bar footer in jupyter products.-->
 <summary>summary</summary>
 <dl role="none">
 <!-- don't assume folx are in a place to do math accurately -->
 <dt id="cells__">cells</dt>
 <dd>
 <dl role="none">
 <dt>total</dt>
 <dd id="cells:total">27</dd>
 <dt id="markdown__">markdown</dt>
 <dd id="cells:md">11</dd>
 <dt id="code__">code</dt>
 <dd id="cells:code">16</dd>
 </dl>
 </dd>
 <dt>execution state</dt>
 <dd id="cells:state">
 executed out of order</dd>
 <dt>lines of code</dt>
 <dd id="cells:loc">0</dd>
 <dt id="outputs__">outputs</dt>
 <dd id="cells:outputs">14</dd>
 </dl>
 <details>
 <summary>metadata</summary>
 <dl id="nb:metadata" itemscope="" itemtype="nb:metadata" role="none">
 <dt itemprop="title">title</dt>
 <dd id="metadata:title"></dd>
 <dt itemprop="description">description</dt>
 <dd id="metadata:description"></dd>
 <dt itemprop="authors">authors</dt>
 <dt>language info</dt>
 <dd>
 <dl itemscope="" itemtype="nb:metadata/language_info" role="none">
 <dt id="metadata:language" itemprop="name"></dt>
 <dt itemprop="mimetype"></dt>
 </dl>
 </dd>
 <dt id="kernel__">kernel</dt>
 <dd>
 <dl itemtype="nb:metadata/kernelspec" role="none">
 <dt itemprop="display_name"></dt>
 <dt itemprop="language"></dt>
 <dd id="nb:language"></dd>
 <dt itemprop="name"></dt>
 </dl>
 </dd>
 </dl>
 </details>
 </details>
 <table class="nb cells" role="list">
 <thead>
 <tr>
 <th aria-describedby="schema:id_ordinal" class="cell id_ordinal" id="cell__" scope="col">
                        cell</th>
 <th aria-describedby="schema:id" class="cell id" id="cell:id" scope="col">id</th>
 <th aria-describedby="schema:selected" class="cell selected" id="cell:selected" scope="col">
                        selected</th>
 <th aria-describedby="schema:execution_count" class="cell execution_count" id="cell:execution_count" scope="col">execution
                        count
                    </th>
 <th aria-describedby="schema:loc" class="cell loc" id="loc__" scope="col">lines of code
                    </th>
 <th aria-describedby="schema:cell_type" class="cell cell_type" id="cell:cell_type" scope="col">
                        cell type</th>
 <th aria-describedby="schema:toolbar" class="cell toolbar" id="cell:toolbar" scope="col">toolbar
                    </th>
 <th aria-describedby="schema:started_at" class="cell started_at" id="cell:started_at" scope="col">
                        started at</th>
 <th aria-describedby="schema:completed_at" class="cell completed_at" id="cell:completed_at" scope="col">
                        completed at</th>
 <th aria-describedby="schema:elapsed" class="cell elapsed" id="cell:elapsed" scope="col">elapsed
                    </th>
 <th aria-describedby="schema:source" class="cell source" id="cell:source" scope="col">source</th>
 <th aria-describedby="schema:metadata" class="cell metadata" id="cell:metadata" scope="col">
                        metadata</th>
 <th aria-describedby="schema:outputs" class="cell outputs" id="cell:outputs" scope="col">outputs
                    </th>
 </tr>
 </thead>
 <tbody class="cells" id="cells" itemprop="cells" role="group">
 <template id="tpl:cell">
 <!-- the ids are written to be prepended with a namespace
                    
                    assume cell 3 with id `c3`, then `<a id=:xxx></a>` with `<a id=c3:xxx></a>`
                    
                    -->
 <tr aria-labelledby="cell__ #" class="cell" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a aria-labelledby="cell__ #" class="cell id_ordinal" href="" id=""></a>
 </th>
 <th class="cell id">
 <a class="cell id" href="" id=":id"></a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id=":selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id=":output" role="none"></output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id=":loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id=":cell_type"></label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id=":toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id=":started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id=":completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id=":elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="# cell:source" class="cell source" id=":source" name="source" readonly=""></textarea>
 <section aria-labelledby=":source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 </section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id=":outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 </tbody>
 </table>
 </td>
 </tr>
 </template>
 <template id="tpl:output">
 <tr class="output markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr>
 </template>
 <tr aria-labelledby="cell__ c1" class="cell markdown" data-cell="1" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="1" aria-labelledby="cell__ c1" class="cell id_ordinal" href="#c1" id="c1">1</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="811fb680-4b23-4186-9b00-5b070ddfa2e6" id="C811fb680-4b23-4186-9b00-5b070ddfa2e6">811fb680-4b23-4186-9b00-5b070ddfa2e6</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c1:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c1:output" role="none"></output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c1:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c1:cell_type">markdown</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c1:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c1:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c1:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c1:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c1 cell:source" class="cell source" id="c1:source" name="source" readonly="" rows="1"># writing accessible literate programs</textarea>
 <section aria-labelledby="c1:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="c1"># writing accessible literate programs</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c1:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="output markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label>text/markdown</td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h1 id="writing-accessible-literate-programs">writing accessible literate programs</h1>
 </body></html></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c2" class="cell code literate" data-cell="2" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="2" aria-labelledby="cell__ c2" class="cell id_ordinal" href="#c2" id="c2">2</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="d126fcc7-0820-4956-a8fa-0f591aec5df5" id="Cd126fcc7-0820-4956-a8fa-0f591aec5df5">d126fcc7-0820-4956-a8fa-0f591aec5df5</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c2:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c2:output" role="none">1</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c2:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c2:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c2:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c2:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c2:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c2:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c2 cell:source" class="cell source" id="c2:source" name="source" readonly="" rows="21">%%
 we develop a theme of literacy - &lt;strong&gt; the ability to read and write &lt;/strong&gt; - in computer programming, 
 and we learn to understand the meaning of our words separate from our intent. [^vee]
 our lessons explore different systems of thought for reasoning with and assessing the quality of a computational works. 
 we pull from design and literary theory while looking across computer and art history to experiment with our own contemporary works.

 &lt;figure&gt;
 &lt;figcaption&gt;literate programming topics&lt;/figcaption&gt;

 1. donald knuth and literate programs
 2. calligraphy, computing, and &lt;ins&gt;computational&lt;/ins&gt; notebooks
 3. surrealism and ambiguity
 4. cognitive accessibility and resilience for writing

 &lt;!-- there should links to the regions --&gt;

 &lt;/figure&gt;

 [^vee]: recommended reading on the history of computational literacy from 
 [annette vee - professor of english](https://www.english.pitt.edu/people/annette-vee) - who 
 presents valuable lessons in [understanding computer programming as a literacy](https://licsjournal.org/index.php/LiCS/article/view/794) </textarea>
 <section aria-labelledby="c2:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span>
 <span class="n">we</span> <span class="n">develop</span> <span class="n">a</span> <span class="n">theme</span> <span class="n">of</span> <span class="n">literacy</span> <span class="o">-</span> <span class="o">&lt;</span><span class="n">strong</span><span class="o">&gt;</span> <span class="n">the</span> <span class="n">ability</span> <span class="n">to</span> <span class="n">read</span> <span class="ow">and</span> <span class="n">write</span> <span class="o">&lt;/</span><span class="n">strong</span><span class="o">&gt;</span> <span class="o">-</span> <span class="ow">in</span> <span class="n">computer</span> <span class="n">programming</span><span class="p">,</span> 
 <span class="ow">and</span> <span class="n">we</span> <span class="n">learn</span> <span class="n">to</span> <span class="n">understand</span> <span class="n">the</span> <span class="n">meaning</span> <span class="n">of</span> <span class="n">our</span> <span class="n">words</span> <span class="n">separate</span> <span class="kn">from</span> <span class="nn">our</span> <span class="n">intent</span><span class="o">.</span> <span class="p">[</span><span class="o">^</span><span class="n">vee</span><span class="p">]</span>
 <span class="n">our</span> <span class="n">lessons</span> <span class="n">explore</span> <span class="n">different</span> <span class="n">systems</span> <span class="n">of</span> <span class="n">thought</span> <span class="k">for</span> <span class="n">reasoning</span> <span class="k">with</span> <span class="ow">and</span> <span class="n">assessing</span> <span class="n">the</span> <span class="n">quality</span> <span class="n">of</span> <span class="n">a</span> <span class="n">computational</span> <span class="n">works</span><span class="o">.</span> 
 <span class="n">we</span> <span class="n">pull</span> <span class="kn">from</span> <span class="nn">design</span> <span class="ow">and</span> <span class="n">literary</span> <span class="n">theory</span> <span class="k">while</span> <span class="n">looking</span> <span class="n">across</span> <span class="n">computer</span> <span class="ow">and</span> <span class="n">art</span> <span class="n">history</span> <span class="n">to</span> <span class="n">experiment</span> <span class="k">with</span> <span class="n">our</span> <span class="n">own</span> <span class="n">contemporary</span> <span class="n">works</span><span class="o">.</span>

 <span class="o">&lt;</span><span class="n">figure</span><span class="o">&gt;</span>
 <span class="o">&lt;</span><span class="n">figcaption</span><span class="o">&gt;</span><span class="n">literate</span> <span class="n">programming</span> <span class="n">topics</span><span class="o">&lt;/</span><span class="n">figcaption</span><span class="o">&gt;</span>

 <span class="mf">1.</span> <span class="n">donald</span> <span class="n">knuth</span> <span class="ow">and</span> <span class="n">literate</span> <span class="n">programs</span>
 <span class="mf">2.</span> <span class="n">calligraphy</span><span class="p">,</span> <span class="n">computing</span><span class="p">,</span> <span class="ow">and</span> <span class="o">&lt;</span><span class="n">ins</span><span class="o">&gt;</span><span class="n">computational</span><span class="o">&lt;/</span><span class="n">ins</span><span class="o">&gt;</span> <span class="n">notebooks</span>
 <span class="mf">3.</span> <span class="n">surrealism</span> <span class="ow">and</span> <span class="n">ambiguity</span>
 <span class="mf">4.</span> <span class="n">cognitive</span> <span class="n">accessibility</span> <span class="ow">and</span> <span class="n">resilience</span> <span class="k">for</span> <span class="n">writing</span>

 <span class="o">&lt;</span><span class="err">!</span><span class="o">--</span> <span class="n">there</span> <span class="n">should</span> <span class="n">links</span> <span class="n">to</span> <span class="n">the</span> <span class="n">regions</span> <span class="o">--&gt;</span>

 <span class="o">&lt;/</span><span class="n">figure</span><span class="o">&gt;</span>

 <span class="p">[</span><span class="o">^</span><span class="n">vee</span><span class="p">]:</span> <span class="n">recommended</span> <span class="n">reading</span> <span class="n">on</span> <span class="n">the</span> <span class="n">history</span> <span class="n">of</span> <span class="n">computational</span> <span class="n">literacy</span> <span class="kn">from</span> 
 <span class="p">[</span><span class="n">annette</span> <span class="n">vee</span> <span class="o">-</span> <span class="n">professor</span> <span class="n">of</span> <span class="n">english</span><span class="p">](</span><span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">www</span><span class="o">.</span><span class="n">english</span><span class="o">.</span><span class="n">pitt</span><span class="o">.</span><span class="n">edu</span><span class="o">/</span><span class="n">people</span><span class="o">/</span><span class="n">annette</span><span class="o">-</span><span class="n">vee</span><span class="p">)</span> <span class="o">-</span> <span class="n">who</span> 
 <span class="n">presents</span> <span class="n">valuable</span> <span class="n">lessons</span> <span class="ow">in</span> <span class="p">[</span><span class="n">understanding</span> <span class="n">computer</span> <span class="n">programming</span> <span class="k">as</span> <span class="n">a</span> <span class="n">literacy</span><span class="p">](</span><span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">licsjournal</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">index</span><span class="o">.</span><span class="n">php</span><span class="o">/</span><span class="n">LiCS</span><span class="o">/</span><span class="n">article</span><span class="o">/</span><span class="n">view</span><span class="o">/</span><span class="mi">794</span><span class="p">)</span> 
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c2:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><p>we develop a theme of literacy - <strong> the ability to read and write </strong> - in computer programming,
 and we learn to understand the meaning of our words separate from our intent. <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>
 our lessons explore different systems of thought for reasoning with and assessing the quality of a computational works.
 we pull from design and literary theory while looking across computer and art history to experiment with our own contemporary works.</p>
 <figure>
 <figcaption>literate programming topics</figcaption>
 <ol>
 <li>donald knuth and literate programs</li>
 <li>calligraphy, computing, and <ins>computational</ins> notebooks</li>
 <li>surrealism and ambiguity</li>
 <li>cognitive accessibility and resilience for writing</li>
 </ol>
 <!-- there should links to the regions -->
 </figure>
 <p>recommended reading on the history of computational literacy from
 <a href="https://www.english.pitt.edu/people/annette-vee">annette vee - professor of english</a> - who
 presents valuable lessons in <a href="https://licsjournal.org/index.php/LiCS/article/view/794">understanding computer programming as a literacy</a></p>
 &gt;</body></html></td>
 </tr><tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c3" class="cell code" data-cell="3" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="3" aria-labelledby="cell__ c3" class="cell id_ordinal" href="#c3" id="c3">3</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="8d198430-1dd9-4bd2-81f8-64259a9b27ae" id="C8d198430-1dd9-4bd2-81f8-64259a9b27ae">8d198430-1dd9-4bd2-81f8-64259a9b27ae</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c3:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c3:output" role="none">2</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c3:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c3:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c3:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c3:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c3:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c3:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c3 cell:source" class="cell source" id="c3:source" name="source" readonly="" rows="1">%run init.ipynb</textarea>
 <section aria-labelledby="c3:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%</span><span class="n">run</span> <span class="n">init</span><span class="o">.</span><span class="n">ipynb</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c3:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c4" class="cell code literate" data-cell="4" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="4" aria-labelledby="cell__ c4" class="cell id_ordinal" href="#c4" id="c4">4</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="fe6a496c-c615-455e-aa47-a9ca4e049d74" id="Cfe6a496c-c615-455e-aa47-a9ca4e049d74">fe6a496c-c615-455e-aa47-a9ca4e049d74</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c4:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c4:output" role="none">3</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c4:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c4:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c4:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c4:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c4:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c4:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c4 cell:source" class="cell source" id="c4:source" name="source" readonly="" rows="15">%% --md
 ## literacy and practice

 &lt;figure&gt;
 &lt;figcaption&gt;&lt;dfn&gt;literacy&lt;/dfn&gt; is the ability to read and write. 
 it is developed through practice that actively affects how we communicate.&lt;/figcaption&gt;

 ```mermaid
 flowchart LR
    read ---&gt; write ---&gt; read
 ```

 &lt;/figure&gt;

 through practice we'll be more proficient in reading and writing about and with code.</textarea>
 <section aria-labelledby="c4:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span> <span class="o">--</span><span class="n">md</span>
 <span class="c1">## literacy and practice</span>

 <span class="o">&lt;</span><span class="n">figure</span><span class="o">&gt;</span>
 <span class="o">&lt;</span><span class="n">figcaption</span><span class="o">&gt;&lt;</span><span class="n">dfn</span><span class="o">&gt;</span><span class="n">literacy</span><span class="o">&lt;/</span><span class="n">dfn</span><span class="o">&gt;</span> <span class="ow">is</span> <span class="n">the</span> <span class="n">ability</span> <span class="n">to</span> <span class="n">read</span> <span class="ow">and</span> <span class="n">write</span><span class="o">.</span> 
 <span class="n">it</span> <span class="ow">is</span> <span class="n">developed</span> <span class="n">through</span> <span class="n">practice</span> <span class="n">that</span> <span class="n">actively</span> <span class="n">affects</span> <span class="n">how</span> <span class="n">we</span> <span class="n">communicate</span><span class="o">.&lt;/</span><span class="n">figcaption</span><span class="o">&gt;</span>

 <span class="err">```</span><span class="n">mermaid</span>
 <span class="n">flowchart</span> <span class="n">LR</span>
    <span class="n">read</span> <span class="o">---&gt;</span> <span class="n">write</span> <span class="o">---&gt;</span> <span class="n">read</span>
 <span class="err">```</span>

 <span class="o">&lt;/</span><span class="n">figure</span><span class="o">&gt;</span>

 <span class="n">through</span> <span class="n">practice</span> <span class="n">we</span><span class="s1">'ll be more proficient in reading and writing about and with code.</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c4:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h2 id="literacy-and-practice">literacy and practice</h2>
 <figure>
 <figcaption><dfn>literacy</dfn> is the ability to read and write. 
 it is developed through practice that actively affects how we communicate.</figcaption>
 <pre><code class="mermaid">flowchart LR
    read ---&gt; write ---&gt; read
 </code></pre>
 </figure>
 <p>through practice we'll be more proficient in reading and writing about and with code.</p>
 </body></html></td>
 </tr><tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c5" class="cell code literate" data-cell="5" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="5" aria-labelledby="cell__ c5" class="cell id_ordinal" href="#c5" id="c5">5</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="fd00614f-28e2-42a0-969a-f1e117d14a82" id="Cfd00614f-28e2-42a0-969a-f1e117d14a82">fd00614f-28e2-42a0-969a-f1e117d14a82</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c5:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c5:output" role="none">4</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c5:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c5:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c5:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c5:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c5:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c5:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c5 cell:source" class="cell source" id="c5:source" name="source" readonly="" rows="78">%%
 ## &lt;dfn&gt;donald knuth&lt;/dfn&gt; is our patron saint of yak shaves

 donald knuth is one of the most critical figures in this course.
 he shepherded the print world to the digital.
 he's the prophet that illuminated movable type with additive light
 freeing humanity from prometheus's subtractive, material color world.
 based.

 ![donald knuth at a 50th reunion according to his name tag laying overtop a woodsy button down with topped off with a cheap drawstring bag. he either looks stoked to be where he is or he's in the wrong place again.](https://nbviewer.org/github/jupyterday-atlanta-2016/oriole_jupyterday_atl/blob/master/don_knuth.jpg)

 in 1984, he published his prescient concept of "[literate programming]".
 a technique he used to write and document larger systems he developed(eg [tex] and [metafont]).
 all of this while writing several volumes of the [art of computer programming].
 this herculean, several decade long art project of knuth's has
 aptly earned him a reference as &lt;q&gt;the patron saint of yak shaves&lt;/q&gt;

 &lt;figure&gt;
 &lt;blockquote&gt;

 * Yak shave -2: Write a book of the century
 * Yak shave -1: Invent your own computer for illustration purposes
 * Yak shave 1: &lt;strong&gt;Somewhere along the road, implement your own programming language…&lt;/strong&gt;
 * Yak shave 2: Invent your own programming paradigm for it
 * Yak shave 3: Invent your own layout algorithm for it
 * Yak shave 4: Design a font
 * Yak shave 5: Write an authoring tool for fonts
 * Yak shave 6: Come up with your own versioning scheme
 * Yak shave 7: Avoid adoption of it for greater good
 * Yak shave 8: Implement a custom language for printable documents

 &lt;/blockquote&gt;
 &lt;figcaption&gt;a list of yak shaves extracted from the original document for accessibility&lt;/figcaption&gt;
 &lt;/figure&gt;

 {{iframe("the patron saint of yak shaves",
 "https://yakshav.es/the-patron-saint-of-yakshaves/"
 )}}


 {{iframe("1980 the letter s",
 "https://gwern.net/doc/design/typography/1980-knuth.pdf"
 )}}


 ## &lt;dfn&gt;herman zapf&lt;/dfn&gt; is a famous type designer and calligrapher

 in early computing, there was a deep blending of craft and programming.
 donald knuth worked with herman zapf to include palatino as one 35 core fonts in PostScript.
                                          
 &lt;figure&gt;
    
 ![a picture of donald knuth at a 50th reunion wearing a ](https://www.quantamagazine.org/wp-content/uploads/2020/04/Knuth-Zapf_Painter-Stanford_2000_v2.jpg)

 &lt;figcaption&gt;1980 donald knuth discussing typography with famous calligrapher herman zapf referenced 
    from &lt;q&gt;&lt;a href="https://www.quantamagazine.org/computer-scientist-donald-knuth-cant-stop-telling-stories-20200416/"&gt;
 The Computer Scientist Who Can’t Stop Telling Stories
 &lt;/a&gt;&lt;/q&gt;&lt;/figcaption&gt;
 &lt;/figure&gt;

 {% set zapf_snippet %}
 &lt;p&gt;Zapf transcended type technology. &lt;strong&gt;He designed types for hot metal composition, phototypesetting, and digital typography for use in desktop publishing. His most famous typefaces, Palatino and Optima, were designed in 1948 and 1952, respectively.&lt;/strong&gt; Palatino was named after the 16th century Italian writing master Giambattista Palatino. Palatino became better known after it became one of the core 35 PostScript fonts in 1984, bundled with virtually all PostScript devices from laser printers to imagesetters. Optima, a flared sans-serif, was released by Stempel in 1958. Zapf disliked its name, which was invented by the marketers at Stempel.&lt;/p&gt;

 &lt;p&gt;Zapf’s typefaces have been widely copied, usually against his will. Monotype’s Book Antiqua shipped with Microsoft Office and is often considered an imitation of Palatino. In 1993, Zapf resigned from ATypI (Association Typographique Internationale) over what he viewed as its hypocritical attitude toward unauthorized copying by prominent ATypI members. At a 1994 conference a panel discussion on designers’ rights he criticized the plagiarism of Palatino. In 1999, Microsoft worked with Zapf and Linotype to develop a new, authorized version of Palatino for Microsoft, called Palatino Linotype.&lt;/p&gt;
 {% endset %}
 {% set zapf = "https://museumofprinting.org/blog/remembering-hermann-zapf/" %}
                   
 {{quote(
    'an excerpt from &lt;a href="{{zapf}}"&gt;Remembering Hermann Zapf at the museum of printing&lt;/a&gt;',
    zapf_snippet,
    zapf
 )}}

 {{iframe(
    "a clip of herman zapf demonstrating mastery in the harmony of lines by drawing an alphabet.",
    "https://www.youtube.com/embed/3jD4CpzIuR4"
 )}}
    </textarea>
 <section aria-labelledby="c5:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span>
 <span class="c1">## &lt;dfn&gt;donald knuth&lt;/dfn&gt; is our patron saint of yak shaves</span>

 <span class="n">donald</span> <span class="n">knuth</span> <span class="ow">is</span> <span class="n">one</span> <span class="n">of</span> <span class="n">the</span> <span class="n">most</span> <span class="n">critical</span> <span class="n">figures</span> <span class="ow">in</span> <span class="n">this</span> <span class="n">course</span><span class="o">.</span>
 <span class="n">he</span> <span class="n">shepherded</span> <span class="n">the</span> <span class="nb">print</span> <span class="n">world</span> <span class="n">to</span> <span class="n">the</span> <span class="n">digital</span><span class="o">.</span>
 <span class="n">he</span><span class="s1">'s the prophet that illuminated movable type with additive light</span>
 <span class="n">freeing</span> <span class="n">humanity</span> <span class="kn">from</span> <span class="nn">prometheus</span><span class="s1">'s subtractive, material color world.</span>
 <span class="n">based</span><span class="o">.</span>

 <span class="err">!</span><span class="p">[</span><span class="n">donald</span> <span class="n">knuth</span> <span class="n">at</span> <span class="n">a</span> <span class="mi">50</span><span class="n">th</span> <span class="n">reunion</span> <span class="n">according</span> <span class="n">to</span> <span class="n">his</span> <span class="n">name</span> <span class="n">tag</span> <span class="n">laying</span> <span class="n">overtop</span> <span class="n">a</span> <span class="n">woodsy</span> <span class="n">button</span> <span class="n">down</span> <span class="k">with</span> <span class="n">topped</span> <span class="n">off</span> <span class="k">with</span> <span class="n">a</span> <span class="n">cheap</span> <span class="n">drawstring</span> <span class="n">bag</span><span class="o">.</span> <span class="n">he</span> <span class="n">either</span> <span class="n">looks</span> <span class="n">stoked</span> <span class="n">to</span> <span class="n">be</span> <span class="n">where</span> <span class="n">he</span> <span class="ow">is</span> <span class="ow">or</span> <span class="n">he</span><span class="s1">'s in the wrong place again.](https://nbviewer.org/github/jupyterday-atlanta-2016/oriole_jupyterday_atl/blob/master/don_knuth.jpg)</span>

 <span class="ow">in</span> <span class="mi">1984</span><span class="p">,</span> <span class="n">he</span> <span class="n">published</span> <span class="n">his</span> <span class="n">prescient</span> <span class="n">concept</span> <span class="n">of</span> <span class="s2">"[literate programming]"</span><span class="o">.</span>
 <span class="n">a</span> <span class="n">technique</span> <span class="n">he</span> <span class="n">used</span> <span class="n">to</span> <span class="n">write</span> <span class="ow">and</span> <span class="n">document</span> <span class="n">larger</span> <span class="n">systems</span> <span class="n">he</span> <span class="n">developed</span><span class="p">(</span><span class="n">eg</span> <span class="p">[</span><span class="n">tex</span><span class="p">]</span> <span class="ow">and</span> <span class="p">[</span><span class="n">metafont</span><span class="p">])</span><span class="o">.</span>
 <span class="nb">all</span> <span class="n">of</span> <span class="n">this</span> <span class="k">while</span> <span class="n">writing</span> <span class="n">several</span> <span class="n">volumes</span> <span class="n">of</span> <span class="n">the</span> <span class="p">[</span><span class="n">art</span> <span class="n">of</span> <span class="n">computer</span> <span class="n">programming</span><span class="p">]</span><span class="o">.</span>
 <span class="n">this</span> <span class="n">herculean</span><span class="p">,</span> <span class="n">several</span> <span class="n">decade</span> <span class="n">long</span> <span class="n">art</span> <span class="n">project</span> <span class="n">of</span> <span class="n">knuth</span><span class="s1">'s has</span>
 <span class="n">aptly</span> <span class="n">earned</span> <span class="n">him</span> <span class="n">a</span> <span class="n">reference</span> <span class="k">as</span> <span class="o">&lt;</span><span class="n">q</span><span class="o">&gt;</span><span class="n">the</span> <span class="n">patron</span> <span class="n">saint</span> <span class="n">of</span> <span class="n">yak</span> <span class="n">shaves</span><span class="o">&lt;/</span><span class="n">q</span><span class="o">&gt;</span>

 <span class="o">&lt;</span><span class="n">figure</span><span class="o">&gt;</span>
 <span class="o">&lt;</span><span class="n">blockquote</span><span class="o">&gt;</span>

 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="o">-</span><span class="mi">2</span><span class="p">:</span> <span class="n">Write</span> <span class="n">a</span> <span class="n">book</span> <span class="n">of</span> <span class="n">the</span> <span class="n">century</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="o">-</span><span class="mi">1</span><span class="p">:</span> <span class="n">Invent</span> <span class="n">your</span> <span class="n">own</span> <span class="n">computer</span> <span class="k">for</span> <span class="n">illustration</span> <span class="n">purposes</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">1</span><span class="p">:</span> <span class="o">&lt;</span><span class="n">strong</span><span class="o">&gt;</span><span class="n">Somewhere</span> <span class="n">along</span> <span class="n">the</span> <span class="n">road</span><span class="p">,</span> <span class="n">implement</span> <span class="n">your</span> <span class="n">own</span> <span class="n">programming</span> <span class="n">language</span><span class="err">…</span><span class="o">&lt;/</span><span class="n">strong</span><span class="o">&gt;</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">2</span><span class="p">:</span> <span class="n">Invent</span> <span class="n">your</span> <span class="n">own</span> <span class="n">programming</span> <span class="n">paradigm</span> <span class="k">for</span> <span class="n">it</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">3</span><span class="p">:</span> <span class="n">Invent</span> <span class="n">your</span> <span class="n">own</span> <span class="n">layout</span> <span class="n">algorithm</span> <span class="k">for</span> <span class="n">it</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">4</span><span class="p">:</span> <span class="n">Design</span> <span class="n">a</span> <span class="n">font</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">5</span><span class="p">:</span> <span class="n">Write</span> <span class="n">an</span> <span class="n">authoring</span> <span class="n">tool</span> <span class="k">for</span> <span class="n">fonts</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">6</span><span class="p">:</span> <span class="n">Come</span> <span class="n">up</span> <span class="k">with</span> <span class="n">your</span> <span class="n">own</span> <span class="n">versioning</span> <span class="n">scheme</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">7</span><span class="p">:</span> <span class="n">Avoid</span> <span class="n">adoption</span> <span class="n">of</span> <span class="n">it</span> <span class="k">for</span> <span class="n">greater</span> <span class="n">good</span>
 <span class="o">*</span> <span class="n">Yak</span> <span class="n">shave</span> <span class="mi">8</span><span class="p">:</span> <span class="n">Implement</span> <span class="n">a</span> <span class="n">custom</span> <span class="n">language</span> <span class="k">for</span> <span class="n">printable</span> <span class="n">documents</span>

 <span class="o">&lt;/</span><span class="n">blockquote</span><span class="o">&gt;</span>
 <span class="o">&lt;</span><span class="n">figcaption</span><span class="o">&gt;</span><span class="n">a</span> <span class="nb">list</span> <span class="n">of</span> <span class="n">yak</span> <span class="n">shaves</span> <span class="n">extracted</span> <span class="kn">from</span> <span class="nn">the</span> <span class="n">original</span> <span class="n">document</span> <span class="k">for</span> <span class="n">accessibility</span><span class="o">&lt;/</span><span class="n">figcaption</span><span class="o">&gt;</span>
 <span class="o">&lt;/</span><span class="n">figure</span><span class="o">&gt;</span>

 <span class="p">{{</span><span class="n">iframe</span><span class="p">(</span><span class="s2">"the patron saint of yak shaves"</span><span class="p">,</span>
 <span class="s2">"https://yakshav.es/the-patron-saint-of-yakshaves/"</span>
 <span class="p">)}}</span>


 <span class="p">{{</span><span class="n">iframe</span><span class="p">(</span><span class="s2">"1980 the letter s"</span><span class="p">,</span>
 <span class="s2">"https://gwern.net/doc/design/typography/1980-knuth.pdf"</span>
 <span class="p">)}}</span>


 <span class="c1">## &lt;dfn&gt;herman zapf&lt;/dfn&gt; is a famous type designer and calligrapher</span>

 <span class="ow">in</span> <span class="n">early</span> <span class="n">computing</span><span class="p">,</span> <span class="n">there</span> <span class="n">was</span> <span class="n">a</span> <span class="n">deep</span> <span class="n">blending</span> <span class="n">of</span> <span class="n">craft</span> <span class="ow">and</span> <span class="n">programming</span><span class="o">.</span>
 <span class="n">donald</span> <span class="n">knuth</span> <span class="n">worked</span> <span class="k">with</span> <span class="n">herman</span> <span class="n">zapf</span> <span class="n">to</span> <span class="n">include</span> <span class="n">palatino</span> <span class="k">as</span> <span class="n">one</span> <span class="mi">35</span> <span class="n">core</span> <span class="n">fonts</span> <span class="ow">in</span> <span class="n">PostScript</span><span class="o">.</span>
                                          
 <span class="o">&lt;</span><span class="n">figure</span><span class="o">&gt;</span>
    
 <span class="err">!</span><span class="p">[</span><span class="n">a</span> <span class="n">picture</span> <span class="n">of</span> <span class="n">donald</span> <span class="n">knuth</span> <span class="n">at</span> <span class="n">a</span> <span class="mi">50</span><span class="n">th</span> <span class="n">reunion</span> <span class="n">wearing</span> <span class="n">a</span> <span class="p">](</span><span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">www</span><span class="o">.</span><span class="n">quantamagazine</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">wp</span><span class="o">-</span><span class="n">content</span><span class="o">/</span><span class="n">uploads</span><span class="o">/</span><span class="mi">2020</span><span class="o">/</span><span class="mi">04</span><span class="o">/</span><span class="n">Knuth</span><span class="o">-</span><span class="n">Zapf_Painter</span><span class="o">-</span><span class="n">Stanford_2000_v2</span><span class="o">.</span><span class="n">jpg</span><span class="p">)</span>

 <span class="o">&lt;</span><span class="n">figcaption</span><span class="o">&gt;</span><span class="mi">1980</span> <span class="n">donald</span> <span class="n">knuth</span> <span class="n">discussing</span> <span class="n">typography</span> <span class="k">with</span> <span class="n">famous</span> <span class="n">calligrapher</span> <span class="n">herman</span> <span class="n">zapf</span> <span class="n">referenced</span> 
    <span class="kn">from</span> <span class="o">&lt;</span><span class="n">q</span><span class="o">&gt;&lt;</span><span class="n">a</span> <span class="n">href</span><span class="o">=</span><span class="s2">"https://www.quantamagazine.org/computer-scientist-donald-knuth-cant-stop-telling-stories-20200416/"</span><span class="o">&gt;</span>
 <span class="n">The</span> <span class="n">Computer</span> <span class="n">Scientist</span> <span class="n">Who</span> <span class="n">Can</span><span class="err">’</span><span class="n">t</span> <span class="n">Stop</span> <span class="n">Telling</span> <span class="n">Stories</span>
 <span class="o">&lt;/</span><span class="n">a</span><span class="o">&gt;&lt;/</span><span class="n">q</span><span class="o">&gt;&lt;/</span><span class="n">figcaption</span><span class="o">&gt;</span>
 <span class="o">&lt;/</span><span class="n">figure</span><span class="o">&gt;</span>

 <span class="p">{</span><span class="o">%</span> <span class="nb">set</span> <span class="n">zapf_snippet</span> <span class="o">%</span><span class="p">}</span>
 <span class="o">&lt;</span><span class="n">p</span><span class="o">&gt;</span><span class="n">Zapf</span> <span class="n">transcended</span> <span class="nb">type</span> <span class="n">technology</span><span class="o">.</span> <span class="o">&lt;</span><span class="n">strong</span><span class="o">&gt;</span><span class="n">He</span> <span class="n">designed</span> <span class="n">types</span> <span class="k">for</span> <span class="n">hot</span> <span class="n">metal</span> <span class="n">composition</span><span class="p">,</span> <span class="n">photo</span><span class="err"></span><span class="nb">type</span><span class="err"></span><span class="n">setting</span><span class="p">,</span> <span class="ow">and</span> <span class="n">digital</span> <span class="n">typography</span> <span class="k">for</span> <span class="n">use</span> <span class="ow">in</span> <span class="n">desktop</span> <span class="n">publishing</span><span class="o">.</span> <span class="n">His</span> <span class="n">most</span> <span class="n">famous</span> <span class="n">typefaces</span><span class="p">,</span> <span class="n">Palatino</span> <span class="ow">and</span> <span class="n">Optima</span><span class="p">,</span> <span class="n">were</span> <span class="n">designed</span> <span class="ow">in</span> <span class="mi">1948</span> <span class="ow">and</span> <span class="mi">1952</span><span class="p">,</span> <span class="n">respectively</span><span class="o">.&lt;/</span><span class="n">strong</span><span class="o">&gt;</span> <span class="n">Palatino</span> <span class="n">was</span> <span class="n">named</span> <span class="n">after</span> <span class="n">the</span> <span class="mi">16</span><span class="n">th</span> <span class="n">century</span> <span class="n">Italian</span> <span class="n">writing</span> <span class="n">master</span> <span class="n">Giambattista</span> <span class="n">Palatino</span><span class="o">.</span> <span class="n">Palatino</span> <span class="n">became</span> <span class="n">better</span> <span class="n">known</span> <span class="n">after</span> <span class="n">it</span> <span class="n">became</span> <span class="n">one</span> <span class="n">of</span> <span class="n">the</span> <span class="n">core</span> <span class="mi">35</span> <span class="n">PostScript</span> <span class="n">fonts</span> <span class="ow">in</span> <span class="mi">1984</span><span class="p">,</span> <span class="n">bundled</span> <span class="k">with</span> <span class="n">virtually</span> <span class="nb">all</span> <span class="n">PostScript</span> <span class="n">devices</span> <span class="kn">from</span> <span class="nn">laser</span> <span class="n">printers</span> <span class="n">to</span> <span class="n">imagesetters</span><span class="o">.</span> <span class="n">Optima</span><span class="p">,</span> <span class="n">a</span> <span class="n">flared</span> <span class="n">sans</span><span class="o">-</span><span class="n">serif</span><span class="p">,</span> <span class="n">was</span> <span class="n">released</span> <span class="n">by</span> <span class="n">Stempel</span> <span class="ow">in</span> <span class="mf">1958.</span> <span class="n">Zapf</span> <span class="n">disliked</span> <span class="n">its</span> <span class="n">name</span><span class="p">,</span> <span class="n">which</span> <span class="n">was</span> <span class="n">invented</span> <span class="n">by</span> <span class="n">the</span> <span class="n">marketers</span> <span class="n">at</span> <span class="n">Stempel</span><span class="o">.&lt;/</span><span class="n">p</span><span class="o">&gt;</span>

 <span class="o">&lt;</span><span class="n">p</span><span class="o">&gt;</span><span class="n">Zapf</span><span class="err">’</span><span class="n">s</span> <span class="n">typefaces</span> <span class="n">have</span> <span class="n">been</span> <span class="n">widely</span> <span class="n">copied</span><span class="p">,</span> <span class="n">usually</span> <span class="n">against</span> <span class="n">his</span> <span class="n">will</span><span class="o">.</span> <span class="n">Monotype</span><span class="err">’</span><span class="n">s</span> <span class="n">Book</span> <span class="n">Antiqua</span> <span class="n">shipped</span> <span class="k">with</span> <span class="n">Microsoft</span> <span class="n">Office</span> <span class="ow">and</span> <span class="ow">is</span> <span class="n">often</span> <span class="n">considered</span> <span class="n">an</span> <span class="n">imitation</span> <span class="n">of</span> <span class="n">Palatino</span><span class="o">.</span> <span class="n">In</span> <span class="mi">1993</span><span class="p">,</span> <span class="n">Zapf</span> <span class="n">resigned</span> <span class="kn">from</span> <span class="nn">ATypI</span> <span class="p">(</span><span class="n">Association</span> <span class="n">Typographique</span> <span class="n">Internationale</span><span class="p">)</span> <span class="n">over</span> <span class="n">what</span> <span class="n">he</span> <span class="n">viewed</span> <span class="k">as</span> <span class="n">its</span> <span class="n">hypocritical</span> <span class="n">attitude</span> <span class="n">toward</span> <span class="n">unauthorized</span> <span class="n">copying</span> <span class="n">by</span> <span class="n">prominent</span> <span class="n">ATypI</span> <span class="n">members</span><span class="o">.</span> <span class="n">At</span> <span class="n">a</span> <span class="mi">1994</span> <span class="n">conference</span> <span class="n">a</span> <span class="n">panel</span> <span class="n">discussion</span> <span class="n">on</span> <span class="n">designers</span><span class="err">’</span> <span class="n">rights</span> <span class="n">he</span> <span class="n">criticized</span> <span class="n">the</span> <span class="n">plagiarism</span> <span class="n">of</span> <span class="n">Palatino</span><span class="o">.</span> <span class="n">In</span> <span class="mi">1999</span><span class="p">,</span> <span class="n">Microsoft</span> <span class="n">worked</span> <span class="k">with</span> <span class="n">Zapf</span> <span class="ow">and</span> <span class="n">Linotype</span> <span class="n">to</span> <span class="n">develop</span> <span class="n">a</span> <span class="n">new</span><span class="p">,</span> <span class="n">authorized</span> <span class="n">version</span> <span class="n">of</span> <span class="n">Palatino</span> <span class="k">for</span> <span class="n">Microsoft</span><span class="p">,</span> <span class="n">called</span> <span class="n">Palatino</span> <span class="n">Linotype</span><span class="o">.&lt;/</span><span class="n">p</span><span class="o">&gt;</span>
 <span class="p">{</span><span class="o">%</span> <span class="n">endset</span> <span class="o">%</span><span class="p">}</span>
 <span class="p">{</span><span class="o">%</span> <span class="nb">set</span> <span class="n">zapf</span> <span class="o">=</span> <span class="s2">"https://museumofprinting.org/blog/remembering-hermann-zapf/"</span> <span class="o">%</span><span class="p">}</span>
                   
 <span class="p">{{</span><span class="n">quote</span><span class="p">(</span>
    <span class="s1">'an excerpt from &lt;a href="{{zapf}}"&gt;Remembering Hermann Zapf at the museum of printing&lt;/a&gt;'</span><span class="p">,</span>
    <span class="n">zapf_snippet</span><span class="p">,</span>
    <span class="n">zapf</span>
 <span class="p">)}}</span>

 <span class="p">{{</span><span class="n">iframe</span><span class="p">(</span>
    <span class="s2">"a clip of herman zapf demonstrating mastery in the harmony of lines by drawing an alphabet."</span><span class="p">,</span>
    <span class="s2">"https://www.youtube.com/embed/3jD4CpzIuR4"</span>
 <span class="p">)}}</span>
    
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c5:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h2 id="donald-knuth--is-our-patron-saint-of-yak-shaves"><dfn>donald knuth</dfn> is our patron saint of yak shaves</h2>
 <p>donald knuth is one of the most critical figures in this course.
 he shepherded the print world to the digital.
 he's the prophet that illuminated movable type with additive light
 freeing humanity from prometheus's subtractive, material color world.
 based.</p>
 <p><img alt="donald knuth at a 50th reunion according to his name tag laying overtop a woodsy button down with topped off with a cheap drawstring bag. he either looks stoked to be where he is or he's in the wrong place again." src="https://nbviewer.org/github/jupyterday-atlanta-2016/oriole_jupyterday_atl/blob/master/don_knuth.jpg"/></p>
 <p>in 1984, he published his prescient concept of "[literate programming]".
 a technique he used to write and document larger systems he developed(eg [tex] and [metafont]).
 all of this while writing several volumes of the [art of computer programming].
 this herculean, several decade long art project of knuth's has
 aptly earned him a reference as <q>the patron saint of yak shaves</q></p>
 <figure>
 <blockquote>
 <ul>
 <li>Yak shave -2: Write a book of the century</li>
 <li>Yak shave -1: Invent your own computer for illustration purposes</li>
 <li>Yak shave 1: <strong>Somewhere along the road, implement your own programming language…</strong></li>
 <li>Yak shave 2: Invent your own programming paradigm for it</li>
 <li>Yak shave 3: Invent your own layout algorithm for it</li>
 <li>Yak shave 4: Design a font</li>
 <li>Yak shave 5: Write an authoring tool for fonts</li>
 <li>Yak shave 6: Come up with your own versioning scheme</li>
 <li>Yak shave 7: Avoid adoption of it for greater good</li>
 <li>Yak shave 8: Implement a custom language for printable documents</li>
 </ul>
 </blockquote>
 <figcaption>a list of yak shaves extracted from the original document for accessibility</figcaption>
 </figure>
 <details>
 <summary>the patron saint of yak shaves</summary>
 <iframe height="600" loading="lazy" src="https://yakshav.es/the-patron-saint-of-yakshaves/" width="100%"></iframe>
 </details>
 <details>
 <summary>1980 the letter s</summary>
 <iframe height="600" loading="lazy" src="https://gwern.net/doc/design/typography/1980-knuth.pdf" width="100%"></iframe>
 </details>
 <h2 aria-level="3" id="herman-zapf--is-a-famous-type-designer-and-calligrapher" role="heading"><dfn>herman zapf</dfn> is a famous type designer and calligrapher</h2>
 <p>in early computing, there was a deep blending of craft and programming.
 donald knuth worked with herman zapf to include palatino as one 35 core fonts in PostScript.</p>
 <figure>
 <p><img alt="a picture of donald knuth at a 50th reunion wearing a " src="https://www.quantamagazine.org/wp-content/uploads/2020/04/Knuth-Zapf_Painter-Stanford_2000_v2.jpg"/></p>
 <figcaption>1980 donald knuth discussing typography with famous calligrapher herman zapf referenced 
    from <q><a href="https://www.quantamagazine.org/computer-scientist-donald-knuth-cant-stop-telling-stories-20200416/">
 The Computer Scientist Who Can’t Stop Telling Stories
 </a></q></figcaption>
 </figure>
 <figure>
 <blockquote cite="https://museumofprinting.org/blog/remembering-hermann-zapf/">an excerpt from <a href="{{zapf}}">Remembering Hermann Zapf at the museum of printing</a></blockquote>
 <figcaption>
 <p>Zapf transcended type technology. <strong>He designed types for hot metal composition, phototypesetting, and digital typography for use in desktop publishing. His most famous typefaces, Palatino and Optima, were designed in 1948 and 1952, respectively.</strong> Palatino was named after the 16th century Italian writing master Giambattista Palatino. Palatino became better known after it became one of the core 35 PostScript fonts in 1984, bundled with virtually all PostScript devices from laser printers to imagesetters. Optima, a flared sans-serif, was released by Stempel in 1958. Zapf disliked its name, which was invented by the marketers at Stempel.</p>
 <p>Zapf’s typefaces have been widely copied, usually against his will. Monotype’s Book Antiqua shipped with Microsoft Office and is often considered an imitation of Palatino. In 1993, Zapf resigned from ATypI (Association Typographique Internationale) over what he viewed as its hypocritical attitude toward unauthorized copying by prominent ATypI members. At a 1994 conference a panel discussion on designers’ rights he criticized the plagiarism of Palatino. In 1999, Microsoft worked with Zapf and Linotype to develop a new, authorized version of Palatino for Microsoft, called Palatino Linotype.</p>
 <a href="https://museumofprinting.org/blog/remembering-hermann-zapf/">visit source</a></figcaption>
 </figure>
 <details>
 <summary>a clip of herman zapf demonstrating mastery in the harmony of lines by drawing an alphabet.</summary>
 <iframe height="315" loading="lazy" src="https://www.youtube.com/embed/3jD4CpzIuR4" width="560"></iframe>
 </details></body></html></td>
 </tr><tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c6" class="cell markdown" data-cell="6" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="6" aria-labelledby="cell__ c6" class="cell id_ordinal" href="#c6" id="c6">6</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="2b47a6ff-d379-4b82-a54f-345ffccaf6f2" id="C2b47a6ff-d379-4b82-a54f-345ffccaf6f2">2b47a6ff-d379-4b82-a54f-345ffccaf6f2</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c6:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c6:output" role="none"></output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c6:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c6:cell_type">markdown</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c6:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c6:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c6:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c6:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c6 cell:source" class="cell source" id="c6:source" name="source" readonly="" rows="8">%%
 toggle this cell to active during class do demonstrate `Palatino`

 ```css
 * {
     font-family: Palatino Linotype;
 }
 ```</textarea>
 <section aria-labelledby="c6:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span>
 <span class="n">toggle</span> <span class="n">this</span> <span class="n">cell</span> <span class="n">to</span> <span class="n">active</span> <span class="n">during</span> <span class="k">class</span> <span aria-level="3" class="nc" role="heading">do</span> <span class="n">demonstrate</span> <span class="err">`</span><span class="n">Palatino</span><span class="err">`</span>

 <span class="err">```</span><span class="n">css</span>
 <span class="o">*</span> <span class="p">{</span>
     <span class="n">font</span><span class="o">-</span><span class="n">family</span><span class="p">:</span> <span class="n">Palatino</span> <span class="n">Linotype</span><span class="p">;</span>
 <span class="p">}</span>
 <span class="err">```</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c6:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="output markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label>text/markdown</td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><p>%%
 toggle this cell to active during class do demonstrate <code>Palatino</code></p>
 <pre><code class="css"><div class="highlight"><pre><span></span><span class="o">*</span><span class="w"> </span><span class="p">{</span>
 <span class="w">     </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">Palatino</span><span class="w"> </span><span class="n">Linotype</span><span class="p">;</span>
 <span class="p">}</span>
 </pre></div>
 </code></pre>
 </body></html></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c7" class="cell code literate" data-cell="7" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="7" aria-labelledby="cell__ c7" class="cell id_ordinal" href="#c7" id="c7">7</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="d332fb0e-7b34-4bc2-8feb-e77957e33828" id="Cd332fb0e-7b34-4bc2-8feb-e77957e33828">d332fb0e-7b34-4bc2-8feb-e77957e33828</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c7:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c7:output" role="none">5</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c7:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c7:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c7:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c7:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c7:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c7:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c7 cell:source" class="cell source" id="c7:source" name="source" readonly="" rows="39">%%
 ### pioneering women in the digital arts

 knuth and zapf are formalizing the future, and in doing so constraining it.
 priorm, women were pouring the foundations for digital arts.
 &lt;q&gt;During the late 1960s, the special interest group dedicated to graphics research, &lt;abbr title="Special Interest Group on Computer Graphics and Interactive Techniques"&gt;SIGGRAPH&lt;/abbr&gt;, would form and eventually become, under the leadership of women artists, an avid supporter of computer art.&lt;/q&gt;
 the prestigeous 

 {{iframe(
    "Up for Grabs”: Agency, Praxis, and the Politics of Early Digital Art",
    "https://csalateral.org/original/issue2/theory/taylor/index.html"
 )}}

 &gt; Although their art is varied in form and focus and each started at different moments, these pioneering artists, 
 including [Lillian Schwartz], [Collette Bangert], [Joan Truckenbrod], [Grace Hertlein], [Rebecca Allen], 
 [Copper Giloth], [Barbara Nessim], and [Cynthia Rubin]&lt;ins&gt;, [Darcy Gerbarg] and [Jane Veeder]&lt;/ins&gt;

 &lt;figure&gt;
    &lt;figcaption&gt;&lt;/figcaption&gt;
    
 ![](https://history.siggraph.org/wp-content/uploads/2023/11/2023-Art-Gallery-Allen_Retrospective-of-Female-Digital-Art-Pioneers.jpg)

 [visit ACM SIGGRAPH history for more](https://history.siggraph.org/artwork/rebecca-allen-copper-frances-giloth-darcy-gerbarg-colette-bangert-joan-r-truckenbrod-barbara-nessim-jane-veeder-retrospective-of-female-digital-art-pioneers/)

 &lt;/figure&gt;




 [lillian schwartz]: http://lillian.com/
 [collette bangert]: https://history.siggraph.org/person/colette-bangert/
 [joan truckenbrod]: https://joantruckenbrod.com/
 [grace hertlein]: http://dada.compart-bremen.de/item/agent/640
 [rebecca allen]: https://rebeccaallen.com/art
 [copper giloth]: https://digitalartarchive.siggraph.org/person/copper-frances-giloth/
 [barbara nessim]: https://digitalartarchive.siggraph.org/artwork/random-access-memories-400/
 [cynthia rubin]: https://digitalartarchive.siggraph.org/person/cynthia-beth-rubin/
 [jane veeder]: https://history.siggraph.org/person/jane-veeder/
 [darcy gerbarg]: https://www.darcygerbarg.com/</textarea>
 <section aria-labelledby="c7:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span>
 <span class="c1">### pioneering women in the digital arts</span>

 <span class="n">knuth</span> <span class="ow">and</span> <span class="n">zapf</span> <span class="n">are</span> <span class="n">formalizing</span> <span class="n">the</span> <span class="n">future</span><span class="p">,</span> <span class="ow">and</span> <span class="ow">in</span> <span class="n">doing</span> <span class="n">so</span> <span class="n">constraining</span> <span class="n">it</span><span class="o">.</span>
 <span class="n">priorm</span><span class="p">,</span> <span class="n">women</span> <span class="n">were</span> <span class="n">pouring</span> <span class="n">the</span> <span class="n">foundations</span> <span class="k">for</span> <span class="n">digital</span> <span class="n">arts</span><span class="o">.</span>
 <span class="o">&lt;</span><span class="n">q</span><span class="o">&gt;</span><span class="n">During</span> <span class="n">the</span> <span class="n">late</span> <span class="mi">1960</span><span class="n">s</span><span class="p">,</span> <span class="n">the</span> <span class="n">special</span> <span class="n">interest</span> <span class="n">group</span> <span class="n">dedicated</span> <span class="n">to</span> <span class="n">graphics</span> <span class="n">research</span><span class="p">,</span> <span class="o">&lt;</span><span class="n">abbr</span> <span class="n">title</span><span class="o">=</span><span class="s2">"Special Interest Group on Computer Graphics and Interactive Techniques"</span><span class="o">&gt;</span><span class="n">SIGGRAPH</span><span class="o">&lt;/</span><span class="n">abbr</span><span class="o">&gt;</span><span class="p">,</span> <span class="n">would</span> <span class="n">form</span> <span class="ow">and</span> <span class="n">eventually</span> <span class="n">become</span><span class="p">,</span> <span class="n">under</span> <span class="n">the</span> <span class="n">leadership</span> <span class="n">of</span> <span class="n">women</span> <span class="n">artists</span><span class="p">,</span> <span class="n">an</span> <span class="n">avid</span> <span class="n">supporter</span> <span class="n">of</span> <span class="n">computer</span> <span class="n">art</span><span class="o">.&lt;/</span><span class="n">q</span><span class="o">&gt;</span>
 <span class="n">the</span> <span class="n">prestigeous</span> 

 <span class="p">{{</span><span class="n">iframe</span><span class="p">(</span>
    <span class="s2">"Up for Grabs”: Agency, Praxis, and the Politics of Early Digital Art"</span><span class="p">,</span>
    <span class="s2">"https://csalateral.org/original/issue2/theory/taylor/index.html"</span>
 <span class="p">)}}</span>

 <span class="o">&gt;</span> <span class="n">Although</span> <span class="n">their</span> <span class="n">art</span> <span class="ow">is</span> <span class="n">varied</span> <span class="ow">in</span> <span class="n">form</span> <span class="ow">and</span> <span class="n">focus</span> <span class="ow">and</span> <span class="n">each</span> <span class="n">started</span> <span class="n">at</span> <span class="n">different</span> <span class="n">moments</span><span class="p">,</span> <span class="n">these</span> <span class="n">pioneering</span> <span class="n">artists</span><span class="p">,</span> 
 <span class="n">including</span> <span class="p">[</span><span class="n">Lillian</span> <span class="n">Schwartz</span><span class="p">],</span> <span class="p">[</span><span class="n">Collette</span> <span class="n">Bangert</span><span class="p">],</span> <span class="p">[</span><span class="n">Joan</span> <span class="n">Truckenbrod</span><span class="p">],</span> <span class="p">[</span><span class="n">Grace</span> <span class="n">Hertlein</span><span class="p">],</span> <span class="p">[</span><span class="n">Rebecca</span> <span class="n">Allen</span><span class="p">],</span> 
 <span class="p">[</span><span class="n">Copper</span> <span class="n">Giloth</span><span class="p">],</span> <span class="p">[</span><span class="n">Barbara</span> <span class="n">Nessim</span><span class="p">],</span> <span class="ow">and</span> <span class="p">[</span><span class="n">Cynthia</span> <span class="n">Rubin</span><span class="p">]</span><span class="o">&lt;</span><span class="n">ins</span><span class="o">&gt;</span><span class="p">,</span> <span class="p">[</span><span class="n">Darcy</span> <span class="n">Gerbarg</span><span class="p">]</span> <span class="ow">and</span> <span class="p">[</span><span class="n">Jane</span> <span class="n">Veeder</span><span class="p">]</span><span class="o">&lt;/</span><span class="n">ins</span><span class="o">&gt;</span>

 <span class="o">&lt;</span><span class="n">figure</span><span class="o">&gt;</span>
    <span class="o">&lt;</span><span class="n">figcaption</span><span class="o">&gt;&lt;/</span><span class="n">figcaption</span><span class="o">&gt;</span>
    
 <span class="err">!</span><span class="p">[](</span><span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">history</span><span class="o">.</span><span class="n">siggraph</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">wp</span><span class="o">-</span><span class="n">content</span><span class="o">/</span><span class="n">uploads</span><span class="o">/</span><span class="mi">2023</span><span class="o">/</span><span class="mi">11</span><span class="o">/</span><span class="mi">2023</span><span class="o">-</span><span class="n">Art</span><span class="o">-</span><span class="n">Gallery</span><span class="o">-</span><span class="n">Allen_Retrospective</span><span class="o">-</span><span class="n">of</span><span class="o">-</span><span class="n">Female</span><span class="o">-</span><span class="n">Digital</span><span class="o">-</span><span class="n">Art</span><span class="o">-</span><span class="n">Pioneers</span><span class="o">.</span><span class="n">jpg</span><span class="p">)</span>

 <span class="p">[</span><span class="n">visit</span> <span class="n">ACM</span> <span class="n">SIGGRAPH</span> <span class="n">history</span> <span class="k">for</span> <span class="n">more</span><span class="p">](</span><span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">history</span><span class="o">.</span><span class="n">siggraph</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">artwork</span><span class="o">/</span><span class="n">rebecca</span><span class="o">-</span><span class="n">allen</span><span class="o">-</span><span class="n">copper</span><span class="o">-</span><span class="n">frances</span><span class="o">-</span><span class="n">giloth</span><span class="o">-</span><span class="n">darcy</span><span class="o">-</span><span class="n">gerbarg</span><span class="o">-</span><span class="n">colette</span><span class="o">-</span><span class="n">bangert</span><span class="o">-</span><span class="n">joan</span><span class="o">-</span><span class="n">r</span><span class="o">-</span><span class="n">truckenbrod</span><span class="o">-</span><span class="n">barbara</span><span class="o">-</span><span class="n">nessim</span><span class="o">-</span><span class="n">jane</span><span class="o">-</span><span class="n">veeder</span><span class="o">-</span><span class="n">retrospective</span><span class="o">-</span><span class="n">of</span><span class="o">-</span><span class="n">female</span><span class="o">-</span><span class="n">digital</span><span class="o">-</span><span class="n">art</span><span class="o">-</span><span class="n">pioneers</span><span class="o">/</span><span class="p">)</span>

 <span class="o">&lt;/</span><span class="n">figure</span><span class="o">&gt;</span>




 <span class="p">[</span><span class="n">lillian</span> <span class="n">schwartz</span><span class="p">]:</span> <span class="n">http</span><span class="p">:</span><span class="o">//</span><span class="n">lillian</span><span class="o">.</span><span class="n">com</span><span class="o">/</span>
 <span class="p">[</span><span class="n">collette</span> <span class="n">bangert</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">history</span><span class="o">.</span><span class="n">siggraph</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">person</span><span class="o">/</span><span class="n">colette</span><span class="o">-</span><span class="n">bangert</span><span class="o">/</span>
 <span class="p">[</span><span class="n">joan</span> <span class="n">truckenbrod</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">joantruckenbrod</span><span class="o">.</span><span class="n">com</span><span class="o">/</span>
 <span class="p">[</span><span class="n">grace</span> <span class="n">hertlein</span><span class="p">]:</span> <span class="n">http</span><span class="p">:</span><span class="o">//</span><span class="n">dada</span><span class="o">.</span><span class="n">compart</span><span class="o">-</span><span class="n">bremen</span><span class="o">.</span><span class="n">de</span><span class="o">/</span><span class="n">item</span><span class="o">/</span><span class="n">agent</span><span class="o">/</span><span class="mi">640</span>
 <span class="p">[</span><span class="n">rebecca</span> <span class="n">allen</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">rebeccaallen</span><span class="o">.</span><span class="n">com</span><span class="o">/</span><span class="n">art</span>
 <span class="p">[</span><span class="n">copper</span> <span class="n">giloth</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">digitalartarchive</span><span class="o">.</span><span class="n">siggraph</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">person</span><span class="o">/</span><span class="n">copper</span><span class="o">-</span><span class="n">frances</span><span class="o">-</span><span class="n">giloth</span><span class="o">/</span>
 <span class="p">[</span><span class="n">barbara</span> <span class="n">nessim</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">digitalartarchive</span><span class="o">.</span><span class="n">siggraph</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">artwork</span><span class="o">/</span><span class="n">random</span><span class="o">-</span><span class="n">access</span><span class="o">-</span><span class="n">memories</span><span class="o">-</span><span class="mi">400</span><span class="o">/</span>
 <span class="p">[</span><span class="n">cynthia</span> <span class="n">rubin</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">digitalartarchive</span><span class="o">.</span><span class="n">siggraph</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">person</span><span class="o">/</span><span class="n">cynthia</span><span class="o">-</span><span class="n">beth</span><span class="o">-</span><span class="n">rubin</span><span class="o">/</span>
 <span class="p">[</span><span class="n">jane</span> <span class="n">veeder</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">history</span><span class="o">.</span><span class="n">siggraph</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">person</span><span class="o">/</span><span class="n">jane</span><span class="o">-</span><span class="n">veeder</span><span class="o">/</span>
 <span class="p">[</span><span class="n">darcy</span> <span class="n">gerbarg</span><span class="p">]:</span> <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">www</span><span class="o">.</span><span class="n">darcygerbarg</span><span class="o">.</span><span class="n">com</span><span class="o">/</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c7:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h3 id="pioneering-women-in-the-digital-arts">pioneering women in the digital arts</h3>
 <p>knuth and zapf are formalizing the future, and in doing so constraining it.
 priorm, women were pouring the foundations for digital arts.
 <q>During the late 1960s, the special interest group dedicated to graphics research, <abbr title="Special Interest Group on Computer Graphics and Interactive Techniques">SIGGRAPH</abbr>, would form and eventually become, under the leadership of women artists, an avid supporter of computer art.</q>
 the prestigeous</p>
 <details>
 <summary>Up for Grabs”: Agency, Praxis, and the Politics of Early Digital Art</summary>
 <iframe height="600" loading="lazy" src="https://csalateral.org/original/issue2/theory/taylor/index.html" width="100%"></iframe>
 </details>
 <blockquote>
 <p>Although their art is varied in form and focus and each started at different moments, these pioneering artists,
 including <a href="http://lillian.com/">Lillian Schwartz</a>, <a href="https://history.siggraph.org/person/colette-bangert/">Collette Bangert</a>, <a href="https://joantruckenbrod.com/">Joan Truckenbrod</a>, <a href="http://dada.compart-bremen.de/item/agent/640">Grace Hertlein</a>, <a href="https://rebeccaallen.com/art">Rebecca Allen</a>,
 <a href="https://digitalartarchive.siggraph.org/person/copper-frances-giloth/">Copper Giloth</a>, <a href="https://digitalartarchive.siggraph.org/artwork/random-access-memories-400/">Barbara Nessim</a>, and <a href="https://digitalartarchive.siggraph.org/person/cynthia-beth-rubin/">Cynthia Rubin</a><ins>, <a href="https://www.darcygerbarg.com/">Darcy Gerbarg</a> and <a href="https://history.siggraph.org/person/jane-veeder/">Jane Veeder</a></ins></p>
 </blockquote>
 <figure>
 <figcaption></figcaption>
 <p><img alt="" src="https://history.siggraph.org/wp-content/uploads/2023/11/2023-Art-Gallery-Allen_Retrospective-of-Female-Digital-Art-Pioneers.jpg"/></p>
 <p><a href="https://history.siggraph.org/artwork/rebecca-allen-copper-frances-giloth-darcy-gerbarg-colette-bangert-joan-r-truckenbrod-barbara-nessim-jane-veeder-retrospective-of-female-digital-art-pioneers/">visit ACM SIGGRAPH history for more</a></p>
 </figure></body></html></td>
 </tr><tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c8" class="cell code literate" data-cell="8" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="8" aria-labelledby="cell__ c8" class="cell id_ordinal" href="#c8" id="c8">8</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="e2072034-c4d9-48c9-973d-2f8d186a49cf" id="Ce2072034-c4d9-48c9-973d-2f8d186a49cf">e2072034-c4d9-48c9-973d-2f8d186a49cf</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c8:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c8:output" role="none">6</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c8:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c8:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c8:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c8:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c8:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c8:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c8 cell:source" class="cell source" id="c8:source" name="source" readonly="" rows="17">%%
 ## calligraphy in modern notebooks

 {{iframe("experimental live calligraphy in a notebook", "https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-05-11-stream.html#2")}}

 the landscape of modern calligraphy has changed now that we can capture the process more
 intimately. everyone can perform their calligraphy like zapf.
 static works are now modern performance with pervasive video content.
 the ability to capture the process is changing how we learn to practice calligraphy.
 new examples are available daily from prolific artists; a lot of art is open source.

 this is similar in computing where modern notebooks allow us to capture the process better.
 we'll find calligraphy is deeply rooted in history of literacy, print, and computers.
 it is a common thread we weave to assess the combined qualities of 
 type and form. as we practice writing using modern hypermaterials
 we'll learn to value aesthetic quality in our literate programs.
 we'll use the calligrapher's perspective to understand how type and form might have a code smell.</textarea>
 <section aria-labelledby="c8:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span>
 <span class="c1">## calligraphy in modern notebooks</span>

 <span class="p">{{</span><span class="n">iframe</span><span class="p">(</span><span class="s2">"experimental live calligraphy in a notebook"</span><span class="p">,</span> <span class="s2">"https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-05-11-stream.html#2"</span><span class="p">)}}</span>

 <span class="n">the</span> <span class="n">landscape</span> <span class="n">of</span> <span class="n">modern</span> <span class="n">calligraphy</span> <span class="n">has</span> <span class="n">changed</span> <span class="n">now</span> <span class="n">that</span> <span class="n">we</span> <span class="n">can</span> <span class="n">capture</span> <span class="n">the</span> <span class="n">process</span> <span class="n">more</span>
 <span class="n">intimately</span><span class="o">.</span> <span class="n">everyone</span> <span class="n">can</span> <span class="n">perform</span> <span class="n">their</span> <span class="n">calligraphy</span> <span class="n">like</span> <span class="n">zapf</span><span class="o">.</span>
 <span class="n">static</span> <span class="n">works</span> <span class="n">are</span> <span class="n">now</span> <span class="n">modern</span> <span class="n">performance</span> <span class="k">with</span> <span class="n">pervasive</span> <span class="n">video</span> <span class="n">content</span><span class="o">.</span>
 <span class="n">the</span> <span class="n">ability</span> <span class="n">to</span> <span class="n">capture</span> <span class="n">the</span> <span class="n">process</span> <span class="ow">is</span> <span class="n">changing</span> <span class="n">how</span> <span class="n">we</span> <span class="n">learn</span> <span class="n">to</span> <span class="n">practice</span> <span class="n">calligraphy</span><span class="o">.</span>
 <span class="n">new</span> <span class="n">examples</span> <span class="n">are</span> <span class="n">available</span> <span class="n">daily</span> <span class="kn">from</span> <span class="nn">prolific</span> <span class="n">artists</span><span class="p">;</span> <span class="n">a</span> <span class="n">lot</span> <span class="n">of</span> <span class="n">art</span> <span class="ow">is</span> <span class="nb">open</span> <span class="n">source</span><span class="o">.</span>

 <span class="n">this</span> <span class="ow">is</span> <span class="n">similar</span> <span class="ow">in</span> <span class="n">computing</span> <span class="n">where</span> <span class="n">modern</span> <span class="n">notebooks</span> <span class="n">allow</span> <span class="n">us</span> <span class="n">to</span> <span class="n">capture</span> <span class="n">the</span> <span class="n">process</span> <span class="n">better</span><span class="o">.</span>
 <span class="n">we</span><span class="s1">'ll find calligraphy is deeply rooted in history of literacy, print, and computers.</span>
 <span class="n">it</span> <span class="ow">is</span> <span class="n">a</span> <span class="n">common</span> <span class="n">thread</span> <span class="n">we</span> <span class="n">weave</span> <span class="n">to</span> <span class="n">assess</span> <span class="n">the</span> <span class="n">combined</span> <span class="n">qualities</span> <span class="n">of</span> 
 <span class="nb">type</span> <span class="ow">and</span> <span class="n">form</span><span class="o">.</span> <span class="k">as</span> <span class="n">we</span> <span class="n">practice</span> <span class="n">writing</span> <span class="n">using</span> <span class="n">modern</span> <span class="n">hypermaterials</span>
 <span class="n">we</span><span class="s1">'ll learn to value aesthetic quality in our literate programs.</span>
 <span class="n">we</span><span class="s1">'ll use the calligrapher'</span><span class="n">s</span> <span class="n">perspective</span> <span class="n">to</span> <span class="n">understand</span> <span class="n">how</span> <span class="nb">type</span> <span class="ow">and</span> <span class="n">form</span> <span class="n">might</span> <span class="n">have</span> <span class="n">a</span> <span class="n">code</span> <span class="n">smell</span><span class="o">.</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c8:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h2 id="calligraphy-in-modern-notebooks">calligraphy in modern notebooks</h2>
 <details>
 <summary>experimental live calligraphy in a notebook</summary>
 <iframe height="600" loading="lazy" src="https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-05-11-stream.html#2" width="100%"></iframe>
 </details>
 <p>the landscape of modern calligraphy has changed now that we can capture the process more
 intimately. everyone can perform their calligraphy like zapf.
 static works are now modern performance with pervasive video content.
 the ability to capture the process is changing how we learn to practice calligraphy.
 new examples are available daily from prolific artists; a lot of art is open source.</p>
 <p>this is similar in computing where modern notebooks allow us to capture the process better.
 we'll find calligraphy is deeply rooted in history of literacy, print, and computers.
 it is a common thread we weave to assess the combined qualities of
 type and form. as we practice writing using modern hypermaterials
 we'll learn to value aesthetic quality in our literate programs.
 we'll use the calligrapher's perspective to understand how type and form might have a code smell.</p></body></html></td>
 </tr><tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c9" class="cell code literate" data-cell="9" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a accesskey="9" aria-labelledby="cell__ c9" class="cell id_ordinal" href="#c9" id="c9">9</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="9b82d893-304d-46a5-908f-8b7999cd1547" id="C9b82d893-304d-46a5-908f-8b7999cd1547">9b82d893-304d-46a5-908f-8b7999cd1547</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c9:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c9:output" role="none">7</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c9:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c9:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c9:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c9:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c9:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c9:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c9 cell:source" class="cell source" id="c9:source" name="source" readonly="" rows="20">%%
 ## 1984 literate programming

 donald knuth introduced the prescient concept of &lt;dfn&gt;literate programming&lt;/dfn&gt; as a new style for writing computational literature.
 in his approach, both the literary and computational aspects of a program cooperate to tell a story.

 {% set lp %}
 My purpose in the present paper is to
 propose another motto that may be appropriate for the
 next decade, as we attempt to make further progress
 in the state of the art. &lt;mark&gt;I believe that the time is ripe
 for significantly better documentation of programs, and
 that we can best achieve this by considering programs
 to be works of literature.&lt;/mark&gt; Hence, my title: “&lt;dfn&gt;Literate
 Programming&lt;/dfn&gt;.”
 {% endset %}
 {{quote(lp, "donald knuth, literate programming, 1984", WEB)}}


 {% set WEB = "http://www.literateprogramming.com/knuthweb.pdf"%}</textarea>
 <section aria-labelledby="c9:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span>
 <span class="c1">## 1984 literate programming</span>

 <span class="n">donald</span> <span class="n">knuth</span> <span class="n">introduced</span> <span class="n">the</span> <span class="n">prescient</span> <span class="n">concept</span> <span class="n">of</span> <span class="o">&lt;</span><span class="n">dfn</span><span class="o">&gt;</span><span class="n">literate</span> <span class="n">programming</span><span class="o">&lt;/</span><span class="n">dfn</span><span class="o">&gt;</span> <span class="k">as</span> <span class="n">a</span> <span class="n">new</span> <span class="n">style</span> <span class="k">for</span> <span class="n">writing</span> <span class="n">computational</span> <span class="n">literature</span><span class="o">.</span>
 <span class="ow">in</span> <span class="n">his</span> <span class="n">approach</span><span class="p">,</span> <span class="n">both</span> <span class="n">the</span> <span class="n">literary</span> <span class="ow">and</span> <span class="n">computational</span> <span class="n">aspects</span> <span class="n">of</span> <span class="n">a</span> <span class="n">program</span> <span class="n">cooperate</span> <span class="n">to</span> <span class="n">tell</span> <span class="n">a</span> <span class="n">story</span><span class="o">.</span>

 <span class="p">{</span><span class="o">%</span> <span class="nb">set</span> <span class="n">lp</span> <span class="o">%</span><span class="p">}</span>
 <span class="n">My</span> <span class="n">purpose</span> <span class="ow">in</span> <span class="n">the</span> <span class="n">present</span> <span class="n">paper</span> <span class="ow">is</span> <span class="n">to</span>
 <span class="n">propose</span> <span class="n">another</span> <span class="n">motto</span> <span class="n">that</span> <span class="n">may</span> <span class="n">be</span> <span class="n">appropriate</span> <span class="k">for</span> <span class="n">the</span>
 <span class="nb">next</span> <span class="n">decade</span><span class="p">,</span> <span class="k">as</span> <span class="n">we</span> <span class="n">attempt</span> <span class="n">to</span> <span class="n">make</span> <span class="n">further</span> <span class="n">progress</span>
 <span class="ow">in</span> <span class="n">the</span> <span class="n">state</span> <span class="n">of</span> <span class="n">the</span> <span class="n">art</span><span class="o">.</span> <span class="o">&lt;</span><span class="n">mark</span><span class="o">&gt;</span><span class="n">I</span> <span class="n">believe</span> <span class="n">that</span> <span class="n">the</span> <span class="n">time</span> <span class="ow">is</span> <span class="n">ripe</span>
 <span class="k">for</span> <span class="n">significantly</span> <span class="n">better</span> <span class="n">documentation</span> <span class="n">of</span> <span class="n">programs</span><span class="p">,</span> <span class="ow">and</span>
 <span class="n">that</span> <span class="n">we</span> <span class="n">can</span> <span class="n">best</span> <span class="n">achieve</span> <span class="n">this</span> <span class="n">by</span> <span class="n">considering</span> <span class="n">programs</span>
 <span class="n">to</span> <span class="n">be</span> <span class="n">works</span> <span class="n">of</span> <span class="n">literature</span><span class="o">.&lt;/</span><span class="n">mark</span><span class="o">&gt;</span> <span class="n">Hence</span><span class="p">,</span> <span class="n">my</span> <span class="n">title</span><span class="p">:</span> <span class="err">“</span><span class="o">&lt;</span><span class="n">dfn</span><span class="o">&gt;</span><span class="n">Literate</span>
 <span class="n">Programming</span><span class="o">&lt;/</span><span class="n">dfn</span><span class="o">&gt;.</span><span class="err">”</span>
 <span class="p">{</span><span class="o">%</span> <span class="n">endset</span> <span class="o">%</span><span class="p">}</span>
 <span class="p">{{</span><span class="n">quote</span><span class="p">(</span><span class="n">lp</span><span class="p">,</span> <span class="s2">"donald knuth, literate programming, 1984"</span><span class="p">,</span> <span class="n">WEB</span><span class="p">)}}</span>


 <span class="p">{</span><span class="o">%</span> <span class="nb">set</span> <span class="n">WEB</span> <span class="o">=</span> <span class="s2">"http://www.literateprogramming.com/knuthweb.pdf"</span><span class="o">%</span><span class="p">}</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c9:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h2 id="1984-literate-programming">1984 literate programming</h2>
 <p>donald knuth introduced the prescient concept of <dfn>literate programming</dfn> as a new style for writing computational literature.
 in his approach, both the literary and computational aspects of a program cooperate to tell a story.</p>
 <figure>
 <blockquote cite="">
 My purpose in the present paper is to
 propose another motto that may be appropriate for the
 next decade, as we attempt to make further progress
 in the state of the art. <mark>I believe that the time is ripe
 for significantly better documentation of programs, and
 that we can best achieve this by considering programs
 to be works of literature.</mark> Hence, my title: “<dfn>Literate
 Programming</dfn>.”
 </blockquote>
 <figcaption>donald knuth, literate programming, 1984 <a href="">visit source</a></figcaption>
 </figure></body></html></td>
 </tr><tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c10" class="cell code literate" data-cell="10" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a aria-labelledby="cell__ c10" class="cell id_ordinal" href="#c10" id="c10">10</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="af3ec8bd-06ab-429b-a276-c7eed9c871ac" id="Caf3ec8bd-06ab-429b-a276-c7eed9c871ac">af3ec8bd-06ab-429b-a276-c7eed9c871ac</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c10:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c10:output" role="none">8</output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c10:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c10:cell_type">code</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c10:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c10:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c10:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c10:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c10 cell:source" class="cell source" id="c10:source" name="source" readonly="" rows="17">%%
 ### literate programming courses

 this course is one of the few classes being taught on literate programming. 
 donald knuth has taught this course and there are lessons available on youtube.
 we're going to listen to two clips from his lectures to contextualize our goals.

 1. {{iframe(
    "knuth discusses &lt;q&gt;&lt;mark&gt;groping with finding a style when using a new form of expression&lt;/mark&gt;&lt;/q&gt; in his early yak shaves",
    "https://www.youtube.com/embed/JxVQFQlfS7w?si=GN2YdbBSdTIEYwQk&amp;amp;clip=Ugkxpo2i1_uvQlJEKtTDXlSOuzmzW74_KmRi&amp;amp;clipt=ELacDxjQyBI",
    ) | indent(4)}}

 2. {{iframe(
    "knuth discusses the position of the computer program in literature",
    "https://www.youtube.com/embed/JxVQFQlfS7w?si=oZItsWLTr7ddBmos&amp;amp;clip=Ugkxc6qe5NvLhUJq1GCc5zi8gP3pIuE-hrvd&amp;amp;clipt=EMr0TBjZwVA",
    )| indent(4)}}
 </textarea>
 <section aria-labelledby="c10:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="o">%%</span>
 <span class="c1">### literate programming courses</span>

 <span class="n">this</span> <span class="n">course</span> <span class="ow">is</span> <span class="n">one</span> <span class="n">of</span> <span class="n">the</span> <span class="n">few</span> <span class="n">classes</span> <span class="n">being</span> <span class="n">taught</span> <span class="n">on</span> <span class="n">literate</span> <span class="n">programming</span><span class="o">.</span> 
 <span class="n">donald</span> <span class="n">knuth</span> <span class="n">has</span> <span class="n">taught</span> <span class="n">this</span> <span class="n">course</span> <span class="ow">and</span> <span class="n">there</span> <span class="n">are</span> <span class="n">lessons</span> <span class="n">available</span> <span class="n">on</span> <span class="n">youtube</span><span class="o">.</span>
 <span class="n">we</span><span class="s1">'re going to listen to two clips from his lectures to contextualize our goals.</span>

 <span class="mf">1.</span> <span class="p">{{</span><span class="n">iframe</span><span class="p">(</span>
    <span class="s2">"knuth discusses &lt;q&gt;&lt;mark&gt;groping with finding a style when using a new form of expression&lt;/mark&gt;&lt;/q&gt; in his early yak shaves"</span><span class="p">,</span>
    <span class="s2">"https://www.youtube.com/embed/JxVQFQlfS7w?si=GN2YdbBSdTIEYwQk&amp;amp;clip=Ugkxpo2i1_uvQlJEKtTDXlSOuzmzW74_KmRi&amp;amp;clipt=ELacDxjQyBI"</span><span class="p">,</span>
    <span class="p">)</span> <span class="o">|</span> <span class="n">indent</span><span class="p">(</span><span class="mi">4</span><span class="p">)}}</span>

 <span class="mf">2.</span> <span class="p">{{</span><span class="n">iframe</span><span class="p">(</span>
    <span class="s2">"knuth discusses the position of the computer program in literature"</span><span class="p">,</span>
    <span class="s2">"https://www.youtube.com/embed/JxVQFQlfS7w?si=oZItsWLTr7ddBmos&amp;amp;clip=Ugkxc6qe5NvLhUJq1GCc5zi8gP3pIuE-hrvd&amp;amp;clipt=EMr0TBjZwVA"</span><span class="p">,</span>
    <span class="p">)</span><span class="o">|</span> <span class="n">indent</span><span class="p">(</span><span class="mi">4</span><span class="p">)}}</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c10:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h3 id="literate-programming-courses">literate programming courses</h3>
 <p>this course is one of the few classes being taught on literate programming.
 donald knuth has taught this course and there are lessons available on youtube.
 we're going to listen to two clips from his lectures to contextualize our goals.</p>
 <ol>
 <li>
 <details>
 <summary>knuth discusses <q><mark>groping with finding a style when using a new form of expression</mark></q> in his early yak shaves</summary>
 <iframe height="315" loading="lazy" src="https://www.youtube.com/embed/JxVQFQlfS7w?si=GN2YdbBSdTIEYwQk&amp;clip=Ugkxpo2i1_uvQlJEKtTDXlSOuzmzW74_KmRi&amp;clipt=ELacDxjQyBI" width="560"></iframe>
 </details>
 </li>
 <li>
 <details>
 <summary>knuth discusses the position of the computer program in literature</summary>
 <iframe height="315" loading="lazy" src="https://www.youtube.com/embed/JxVQFQlfS7w?si=oZItsWLTr7ddBmos&amp;clip=Ugkxc6qe5NvLhUJq1GCc5zi8gP3pIuE-hrvd&amp;clipt=EMr0TBjZwVA" width="560"></iframe>
 </details></li>
 </ol></body></html></td>
 </tr><tr class="display_data" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label></td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c11" class="cell markdown" data-cell="11" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a aria-labelledby="cell__ c11" class="cell id_ordinal" href="#c11" id="c11">11</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="df4410c4-d983-4bfc-8eb9-ecfe31889db7" id="Cdf4410c4-d983-4bfc-8eb9-ecfe31889db7">df4410c4-d983-4bfc-8eb9-ecfe31889db7</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c11:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c11:output" role="none"></output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c11:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c11:cell_type">markdown</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c11:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c11:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c11:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c11:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c11 cell:source" class="cell source" id="c11:source" name="source" readonly="" rows="47">#### comments on literate programming and non-literate programming

 in traditional (ie. non-literate) programming we measure the computational quality of the work, 
 and in literature we measure the literary qualities. any attempt to measure the 
 quality of code in traditional literature or the literary qualities of code in programs
 is ill-posed outside of the literate programming framework. non-literate programs will 
 prioritize coding style over literary style; they are not equitable.

 often the literate programming aesthetics have been rebranded. 
 we notice literate programs styles when:

 1. at least two programming languages 
 2. one language is a document language (eg markdown, html, pdf)

 &lt;details&gt;
    &lt;summary&gt;some examples of literate programming&lt;/summary&gt;

 python has docstrings which are documentation containing executable
 code snippets. mdx offers a popular literate style of programming specifically useful for blogging. react blends html and javascript styles of programming.


 in 1999, tim peters introduced the 
 `doctest` module that provided syntax for including tests that could
 be executed within your document. we talk about testing in lecture 4.

 https://groups.google.com/g/comp.lang.python/c/DfzH5Nrt05E/m/Yyd3s7fPVxwJ?pli=1


 READER: this is a stub and needs work. please consider helping add examples.
    
 &lt;/details&gt;



 the practice of literate programming unifies much of our work as writing or composition.
 we measure all works from both their literary and computational qualities. in literate programming,
 narrative and code cooperate to bring meaning to otherwise abstract objects like functions, classes,
 or data. forevermore, the narrative and code are inextricably linked, neither language takes priority rather
 the composition of cooperative languages. 

 ##### new questions brought by literate programming

 * how to talk about programs
 * how to name variables for literary consistency
 * the literary qualities of functional and object oriented programming

 #### CLASS: have you seen any literate style programming in documentation or software before? or, have you ever really appreciated some documentation before?</textarea>
 <section aria-labelledby="c11:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="c1">#### comments on literate programming and non-literate programming</span>

 <span class="ow">in</span> <span class="n">traditional</span> <span class="p">(</span><span class="n">ie</span><span class="o">.</span> <span class="n">non</span><span class="o">-</span><span class="n">literate</span><span class="p">)</span> <span class="n">programming</span> <span class="n">we</span> <span class="n">measure</span> <span class="n">the</span> <span class="n">computational</span> <span class="n">quality</span> <span class="n">of</span> <span class="n">the</span> <span class="n">work</span><span class="p">,</span> 
 <span class="ow">and</span> <span class="ow">in</span> <span class="n">literature</span> <span class="n">we</span> <span class="n">measure</span> <span class="n">the</span> <span class="n">literary</span> <span class="n">qualities</span><span class="o">.</span> <span class="nb">any</span> <span class="n">attempt</span> <span class="n">to</span> <span class="n">measure</span> <span class="n">the</span> 
 <span class="n">quality</span> <span class="n">of</span> <span class="n">code</span> <span class="ow">in</span> <span class="n">traditional</span> <span class="n">literature</span> <span class="ow">or</span> <span class="n">the</span> <span class="n">literary</span> <span class="n">qualities</span> <span class="n">of</span> <span class="n">code</span> <span class="ow">in</span> <span class="n">programs</span>
 <span class="ow">is</span> <span class="n">ill</span><span class="o">-</span><span class="n">posed</span> <span class="n">outside</span> <span class="n">of</span> <span class="n">the</span> <span class="n">literate</span> <span class="n">programming</span> <span class="n">framework</span><span class="o">.</span> <span class="n">non</span><span class="o">-</span><span class="n">literate</span> <span class="n">programs</span> <span class="n">will</span> 
 <span class="n">prioritize</span> <span class="n">coding</span> <span class="n">style</span> <span class="n">over</span> <span class="n">literary</span> <span class="n">style</span><span class="p">;</span> <span class="n">they</span> <span class="n">are</span> <span class="ow">not</span> <span class="n">equitable</span><span class="o">.</span>

 <span class="n">often</span> <span class="n">the</span> <span class="n">literate</span> <span class="n">programming</span> <span class="n">aesthetics</span> <span class="n">have</span> <span class="n">been</span> <span class="n">rebranded</span><span class="o">.</span> 
 <span class="n">we</span> <span class="n">notice</span> <span class="n">literate</span> <span class="n">programs</span> <span class="n">styles</span> <span class="n">when</span><span class="p">:</span>

 <span class="mf">1.</span> <span class="n">at</span> <span class="n">least</span> <span class="n">two</span> <span class="n">programming</span> <span class="n">languages</span> 
 <span class="mf">2.</span> <span class="n">one</span> <span class="n">language</span> <span class="ow">is</span> <span class="n">a</span> <span class="n">document</span> <span class="n">language</span> <span class="p">(</span><span class="n">eg</span> <span class="n">markdown</span><span class="p">,</span> <span class="n">html</span><span class="p">,</span> <span class="n">pdf</span><span class="p">)</span>

 <span class="o">&lt;</span><span class="n">details</span><span class="o">&gt;</span>
    <span class="o">&lt;</span><span class="n">summary</span><span class="o">&gt;</span><span class="n">some</span> <span class="n">examples</span> <span class="n">of</span> <span class="n">literate</span> <span class="n">programming</span><span class="o">&lt;/</span><span class="n">summary</span><span class="o">&gt;</span>

 <span class="n">python</span> <span class="n">has</span> <span class="n">docstrings</span> <span class="n">which</span> <span class="n">are</span> <span class="n">documentation</span> <span class="n">containing</span> <span class="n">executable</span>
 <span class="n">code</span> <span class="n">snippets</span><span class="o">.</span> <span class="n">mdx</span> <span class="n">offers</span> <span class="n">a</span> <span class="n">popular</span> <span class="n">literate</span> <span class="n">style</span> <span class="n">of</span> <span class="n">programming</span> <span class="n">specifically</span> <span class="n">useful</span> <span class="k">for</span> <span class="n">blogging</span><span class="o">.</span> <span class="n">react</span> <span class="n">blends</span> <span class="n">html</span> <span class="ow">and</span> <span class="n">javascript</span> <span class="n">styles</span> <span class="n">of</span> <span class="n">programming</span><span class="o">.</span>


 <span class="ow">in</span> <span class="mi">1999</span><span class="p">,</span> <span class="n">tim</span> <span class="n">peters</span> <span class="n">introduced</span> <span class="n">the</span> 
 <span class="err">`</span><span class="n">doctest</span><span class="err">`</span> <span class="n">module</span> <span class="n">that</span> <span class="n">provided</span> <span class="n">syntax</span> <span class="k">for</span> <span class="n">including</span> <span class="n">tests</span> <span class="n">that</span> <span class="n">could</span>
 <span class="n">be</span> <span class="n">executed</span> <span class="n">within</span> <span class="n">your</span> <span class="n">document</span><span class="o">.</span> <span class="n">we</span> <span class="n">talk</span> <span class="n">about</span> <span class="n">testing</span> <span class="ow">in</span> <span class="n">lecture</span> <span class="mf">4.</span>

 <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">groups</span><span class="o">.</span><span class="n">google</span><span class="o">.</span><span class="n">com</span><span class="o">/</span><span class="n">g</span><span class="o">/</span><span class="n">comp</span><span class="o">.</span><span class="n">lang</span><span class="o">.</span><span class="n">python</span><span class="o">/</span><span class="n">c</span><span class="o">/</span><span class="n">DfzH5Nrt05E</span><span class="o">/</span><span class="n">m</span><span class="o">/</span><span class="n">Yyd3s7fPVxwJ</span><span class="err">?</span><span class="n">pli</span><span class="o">=</span><span class="mi">1</span>


 <span class="n">READER</span><span class="p">:</span> <span class="n">this</span> <span class="ow">is</span> <span class="n">a</span> <span class="n">stub</span> <span class="ow">and</span> <span class="n">needs</span> <span class="n">work</span><span class="o">.</span> <span class="n">please</span> <span class="n">consider</span> <span class="n">helping</span> <span class="n">add</span> <span class="n">examples</span><span class="o">.</span>
    
 <span class="o">&lt;/</span><span class="n">details</span><span class="o">&gt;</span>



 <span class="n">the</span> <span class="n">practice</span> <span class="n">of</span> <span class="n">literate</span> <span class="n">programming</span> <span class="n">unifies</span> <span class="n">much</span> <span class="n">of</span> <span class="n">our</span> <span class="n">work</span> <span class="k">as</span> <span class="n">writing</span> <span class="ow">or</span> <span class="n">composition</span><span class="o">.</span>
 <span class="n">we</span> <span class="n">measure</span> <span class="nb">all</span> <span class="n">works</span> <span class="kn">from</span> <span class="nn">both</span> <span class="n">their</span> <span class="n">literary</span> <span class="ow">and</span> <span class="n">computational</span> <span class="n">qualities</span><span class="o">.</span> <span class="ow">in</span> <span class="n">literate</span> <span class="n">programming</span><span class="p">,</span>
 <span class="n">narrative</span> <span class="ow">and</span> <span class="n">code</span> <span class="n">cooperate</span> <span class="n">to</span> <span class="n">bring</span> <span class="n">meaning</span> <span class="n">to</span> <span class="n">otherwise</span> <span class="n">abstract</span> <span class="n">objects</span> <span class="n">like</span> <span class="n">functions</span><span class="p">,</span> <span class="n">classes</span><span class="p">,</span>
 <span class="ow">or</span> <span class="n">data</span><span class="o">.</span> <span class="n">forevermore</span><span class="p">,</span> <span class="n">the</span> <span class="n">narrative</span> <span class="ow">and</span> <span class="n">code</span> <span class="n">are</span> <span class="n">inextricably</span> <span class="n">linked</span><span class="p">,</span> <span class="n">neither</span> <span class="n">language</span> <span class="n">takes</span> <span class="n">priority</span> <span class="n">rather</span>
 <span class="n">the</span> <span class="n">composition</span> <span class="n">of</span> <span class="n">cooperative</span> <span class="n">languages</span><span class="o">.</span> 

 <span class="c1">##### new questions brought by literate programming</span>

 <span class="o">*</span> <span class="n">how</span> <span class="n">to</span> <span class="n">talk</span> <span class="n">about</span> <span class="n">programs</span>
 <span class="o">*</span> <span class="n">how</span> <span class="n">to</span> <span class="n">name</span> <span class="n">variables</span> <span class="k">for</span> <span class="n">literary</span> <span class="n">consistency</span>
 <span class="o">*</span> <span class="n">the</span> <span class="n">literary</span> <span class="n">qualities</span> <span class="n">of</span> <span class="n">functional</span> <span class="ow">and</span> <span class="nb">object</span> <span class="n">oriented</span> <span class="n">programming</span>

 <span class="c1">#### CLASS: have you seen any literate style programming in documentation or software before? or, have you ever really appreciated some documentation before?</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c11:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="output markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label>text/markdown</td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h4 id="comments-on-literate-programming-and-non-literate-programming">comments on literate programming and non-literate programming</h4>
 <p>in traditional (ie. non-literate) programming we measure the computational quality of the work,
 and in literature we measure the literary qualities. any attempt to measure the
 quality of code in traditional literature or the literary qualities of code in programs
 is ill-posed outside of the literate programming framework. non-literate programs will
 prioritize coding style over literary style; they are not equitable.</p>
 <p>often the literate programming aesthetics have been rebranded.
 we notice literate programs styles when:</p>
 <ol>
 <li>at least two programming languages</li>
 <li>one language is a document language (eg markdown, html, pdf)</li>
 </ol>
 <details>
 <summary>some examples of literate programming</summary>
 <p>python has docstrings which are documentation containing executable
 code snippets. mdx offers a popular literate style of programming specifically useful for blogging. react blends html and javascript styles of programming.</p>
 <p>in 1999, tim peters introduced the
 <code>doctest</code> module that provided syntax for including tests that could
 be executed within your document. we talk about testing in lecture 4.</p>
 <p><a href="https://groups.google.com/g/comp.lang.python/c/DfzH5Nrt05E/m/Yyd3s7fPVxwJ?pli=1">https://groups.google.com/g/comp.lang.python/c/DfzH5Nrt05E/m/Yyd3s7fPVxwJ?pli=1</a></p>
 <p>READER: this is a stub and needs work. please consider helping add examples.</p>
 </details>
 <p>the practice of literate programming unifies much of our work as writing or composition.
 we measure all works from both their literary and computational qualities. in literate programming,
 narrative and code cooperate to bring meaning to otherwise abstract objects like functions, classes,
 or data. forevermore, the narrative and code are inextricably linked, neither language takes priority rather
 the composition of cooperative languages.</p>
 <h5 aria-level="4" id="new-questions-brought-by-literate-programming" role="heading">new questions brought by literate programming</h5>
 <ul>
 <li>how to talk about programs</li>
 <li>how to name variables for literary consistency</li>
 <li>the literary qualities of functional and object oriented programming</li>
 </ul>
 <h4 aria-level="4" id="CLASS:-have-you-seen-any-literate-style-programming-in-documentation-or-software-before?-or,-have-you-ever-really-appreciated-some-documentation-before?" role="heading">CLASS: have you seen any literate style programming in documentation or software before? or, have you ever really appreciated some documentation before?</h4>
 </body></html></td>
 </tr></tbody>
 </table>
 </td>
 </tr><tr aria-labelledby="cell__ c12" class="cell markdown" data-cell="12" itemscope="" itemtype="nb:cell" onfocusin="setCurrentFocus(this)" role="listitem">
 <th class="cell id_ordinal">
 <a aria-labelledby="cell__ c12" class="cell id_ordinal" href="#c12" id="c12">12</a>
 </th>
 <th class="cell id">
 <a class="cell id" href="6f55a4ad-9a17-435f-82af-efa30ee64ede" id="C6f55a4ad-9a17-435f-82af-efa30ee64ede">6f55a4ad-9a17-435f-82af-efa30ee64ede</a>
 </th>
 <td class="cell selected">
 <input aria-labelledby="" class="cell selected" id="c12:selected" type="checkbox"/>
 </td>
 <td class="cell execution_count">
 <output class="cell execution_count" id="c12:output" role="none"></output>
 </td>
 <td class="cell loc">
 <output class="cell loc" id="c12:loc" role="none"></output>
 </td>
 <td class="cell cell_type">
 <label class="cell cell_type" id="c12:cell_type">markdown</label>
 </td>
 <td class="cell toolbar">
 <form aria-labelledby="" class="cell toolbar" id="c12:toolbar" name=""></form>
 </td>
 <td class="cell started_at">
 <time class="cell started_at" id="c12:started"></time>
 </td>
 <td class="cell completed_at">
 <time class="cell completed_at" id="c12:completed"></time>
 </td>
 <td class="cell elapsed">
 <time class="cell elapsed" id="c12:elapsed"></time>
 </td>
 <td class="cell source">
 <!-- hash refers to the current parent cell id -->
 <textarea aria-labelledby="c12 cell:source" class="cell source" id="c12:source" name="source" readonly="" rows="32">## writing in multiple languages and weaving yarns

 &lt;figure&gt;
    &lt;figcaption&gt;

 text weaves much of connection with art and machines. rooted in the word [textus meaning &lt;q&gt;thing woven&lt;/q&gt;](https://www.etymonline.com/word/text).
 moveable type machine text mechanical disconnecting it from the body. first, in 900CE china then more explosively in 1500CE Europe
 with the printing press. the presses were followed by cotton engines and weaving looms.
 this progress saw the rightfully luddites smashing machines that stripped their dignity and labor rights,
 the same progress that brought ada lovelace to write the first computer program in note g.
 a century later at the dawn of modernism, in a war torn weimar republic women at the bauhaus brought healing their 
 tangling of art of craft. a quick jolt post-modernity gives us pause to consider marilou schultz - acclaimed navajo weaver - 
 &lt;strong&gt;precisely&lt;/strong&gt; weaving a blanket of the pentium P54C chip.

 &lt;/figcaption&gt;

 ![image.png](attachment:404ac14c-68b5-4d8c-a6e6-7a6c73277d07.png)



 &lt;/figure&gt;


 a critical feature of literate programs is that there are always at least two languages involved in the program.
 the source compiles to:

 1. weave to a document language
 2. tangle to a scripting/programming language



 </textarea>
 <section aria-labelledby="c12:source" aria-roledescription="highlighted" class="cell source highlight" role="group">
 <div class="highlight"><pre><span></span><span class="c1">## writing in multiple languages and weaving yarns</span>

 <span class="o">&lt;</span><span class="n">figure</span><span class="o">&gt;</span>
    <span class="o">&lt;</span><span class="n">figcaption</span><span class="o">&gt;</span>

 <span class="n">text</span> <span class="n">weaves</span> <span class="n">much</span> <span class="n">of</span> <span class="n">connection</span> <span class="k">with</span> <span class="n">art</span> <span class="ow">and</span> <span class="n">machines</span><span class="o">.</span> <span class="n">rooted</span> <span class="ow">in</span> <span class="n">the</span> <span class="n">word</span> <span class="p">[</span><span class="n">textus</span> <span class="n">meaning</span> <span class="o">&lt;</span><span class="n">q</span><span class="o">&gt;</span><span class="n">thing</span> <span class="n">woven</span><span class="o">&lt;/</span><span class="n">q</span><span class="o">&gt;</span><span class="p">](</span><span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">www</span><span class="o">.</span><span class="n">etymonline</span><span class="o">.</span><span class="n">com</span><span class="o">/</span><span class="n">word</span><span class="o">/</span><span class="n">text</span><span class="p">)</span><span class="o">.</span>
 <span class="n">moveable</span> <span class="nb">type</span> <span class="n">machine</span> <span class="n">text</span> <span class="n">mechanical</span> <span class="n">disconnecting</span> <span class="n">it</span> <span class="kn">from</span> <span class="nn">the</span> <span class="n">body</span><span class="o">.</span> <span class="n">first</span><span class="p">,</span> <span class="ow">in</span> <span class="mi">900</span><span class="n">CE</span> <span class="n">china</span> <span class="n">then</span> <span class="n">more</span> <span class="n">explosively</span> <span class="ow">in</span> <span class="mi">1500</span><span class="n">CE</span> <span class="n">Europe</span>
 <span class="k">with</span> <span class="n">the</span> <span class="n">printing</span> <span class="n">press</span><span class="o">.</span> <span class="n">the</span> <span class="n">presses</span> <span class="n">were</span> <span class="n">followed</span> <span class="n">by</span> <span class="n">cotton</span> <span class="n">engines</span> <span class="ow">and</span> <span class="n">weaving</span> <span class="n">looms</span><span class="o">.</span>
 <span class="n">this</span> <span class="n">progress</span> <span class="n">saw</span> <span class="n">the</span> <span class="n">rightfully</span> <span class="n">luddites</span> <span class="n">smashing</span> <span class="n">machines</span> <span class="n">that</span> <span class="n">stripped</span> <span class="n">their</span> <span class="n">dignity</span> <span class="ow">and</span> <span class="n">labor</span> <span class="n">rights</span><span class="p">,</span>
 <span class="n">the</span> <span class="n">same</span> <span class="n">progress</span> <span class="n">that</span> <span class="n">brought</span> <span class="n">ada</span> <span class="n">lovelace</span> <span class="n">to</span> <span class="n">write</span> <span class="n">the</span> <span class="n">first</span> <span class="n">computer</span> <span class="n">program</span> <span class="ow">in</span> <span class="n">note</span> <span class="n">g</span><span class="o">.</span>
 <span class="n">a</span> <span class="n">century</span> <span class="n">later</span> <span class="n">at</span> <span class="n">the</span> <span class="n">dawn</span> <span class="n">of</span> <span class="n">modernism</span><span class="p">,</span> <span class="ow">in</span> <span class="n">a</span> <span class="n">war</span> <span class="n">torn</span> <span class="n">weimar</span> <span class="n">republic</span> <span class="n">women</span> <span class="n">at</span> <span class="n">the</span> <span class="n">bauhaus</span> <span class="n">brought</span> <span class="n">healing</span> <span class="n">their</span> 
 <span class="n">tangling</span> <span class="n">of</span> <span class="n">art</span> <span class="n">of</span> <span class="n">craft</span><span class="o">.</span> <span class="n">a</span> <span class="n">quick</span> <span class="n">jolt</span> <span class="n">post</span><span class="o">-</span><span class="n">modernity</span> <span class="n">gives</span> <span class="n">us</span> <span class="n">pause</span> <span class="n">to</span> <span class="n">consider</span> <span class="n">marilou</span> <span class="n">schultz</span> <span class="o">-</span> <span class="n">acclaimed</span> <span class="n">navajo</span> <span class="n">weaver</span> <span class="o">-</span> 
 <span class="o">&lt;</span><span class="n">strong</span><span class="o">&gt;</span><span class="n">precisely</span><span class="o">&lt;/</span><span class="n">strong</span><span class="o">&gt;</span> <span class="n">weaving</span> <span class="n">a</span> <span class="n">blanket</span> <span class="n">of</span> <span class="n">the</span> <span class="n">pentium</span> <span class="n">P54C</span> <span class="n">chip</span><span class="o">.</span>

 <span class="o">&lt;/</span><span class="n">figcaption</span><span class="o">&gt;</span>

 <span class="err">!</span><span class="p">[</span><span class="n">image</span><span class="o">.</span><span class="n">png</span><span class="p">](</span><span class="n">attachment</span><span class="p">:</span><span class="mi">404</span><span class="n">ac14c</span><span class="o">-</span><span class="mi">68</span><span class="n">b5</span><span class="o">-</span><span class="mi">4</span><span class="n">d8c</span><span class="o">-</span><span class="n">a6e6</span><span class="o">-</span><span class="mi">7</span><span class="n">a6c73277d07</span><span class="o">.</span><span class="n">png</span><span class="p">)</span>



 <span class="o">&lt;/</span><span class="n">figure</span><span class="o">&gt;</span>


 <span class="n">a</span> <span class="n">critical</span> <span class="n">feature</span> <span class="n">of</span> <span class="n">literate</span> <span class="n">programs</span> <span class="ow">is</span> <span class="n">that</span> <span class="n">there</span> <span class="n">are</span> <span class="n">always</span> <span class="n">at</span> <span class="n">least</span> <span class="n">two</span> <span class="n">languages</span> <span class="n">involved</span> <span class="ow">in</span> <span class="n">the</span> <span class="n">program</span><span class="o">.</span>
 <span class="n">the</span> <span class="n">source</span> <span class="n">compiles</span> <span class="n">to</span><span class="p">:</span>

 <span class="mf">1.</span> <span class="n">weave</span> <span class="n">to</span> <span class="n">a</span> <span class="n">document</span> <span class="n">language</span>
 <span class="mf">2.</span> <span class="n">tangle</span> <span class="n">to</span> <span class="n">a</span> <span class="n">scripting</span><span class="o">/</span><span class="n">programming</span> <span class="n">language</span>
 </pre></div></section>
 <!-- code mirror would go in this cell -->
 </td>
 <td class="cell metadata">
 <dialog class="cell metadata">
 <dl class="cell metadata"></dl>
 </dialog>
 </td>
 <td class="cell outputs">
 <table class="outputs" id="c12:outputs" role="group">
 <thead>
 <tr class="output">
 <th class="id_ordinal">output</th>
 <th class="id">id</th>
 <th class="exection_count">execution count</th>
 <th class="output_type">type</th>
 <th class="name">name</th>
 <th class="text">text</th>
 <th class="ename">ename</th>
 <th class="evalue">evalue</th>
 <th class="traceback">traceback</th>
 <th class="data">data</th>
 </tr>
 </thead>
 <tbody role="group">
 <tr class="output markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown markdown" role="none">
 <th class="id_ordinal"><a></a></th>
 <th class="id"><a></a></th>
 <td class="exection_count"><output role="none"></output></td>
 <td class="output_type"><label></label>text/markdown</td>
 <td class="name"><samp></samp></td>
 <td class="text"><samp></samp></td>
 <td class="ename"><var></var></td>
 <td class="evalue"><samp></samp></td>
 <td class="traceback"><samp></samp></td>
 <td class="data"><html><body><h2 id="writing-in-multiple-languages-and-weaving-yarns">writing in multiple languages and weaving yarns</h2>
 <figure>
 <figcaption>
 <p>text weaves much of connection with art and machines. rooted in the word <a href="https://www.etymonline.com/word/text">textus meaning <q>thing woven</q></a>.
 moveable type machine text mechanical disconnecting it from the body. first, in 900CE china then more explosively in 1500CE Europe
 with the printing press. the presses were followed by cotton engines and weaving looms.
 this progress saw the rightfully luddites smashing machines that stripped their dignity and labor rights,
 the same progress that brought ada lovelace to write the first computer program in note g.
 a century later at the dawn of modernism, in a war torn weimar republic women at the bauhaus brought healing their
 tangling of art of craft. a quick jolt post-modernity gives us pause to consider marilou schultz - acclaimed navajo weaver -
 <strong>precisely</strong> weaving a blanket of the pentium P54C chip.</p>
 </figcaption>