a sprint through history toward computional notebooks

history helps us understand science and software. in this presentation, we see how Project Jupyter and computational notebooks interfaces fit into their larger context of computing history.

we'll begin with user interfaces at the dawn of post modernity then trawl through the early-web, then we'll run smack into the modern web, and finally landing in inaccessible pandemic hellscape that manufactures disability.

🏃run all 🖹document mode 📽presentation mode ⊟collapse all the code
⊞expand all the code jupyterlab-deck voila 🔍inspector 👯side-by-side

restart and run allor it didn't happen

    if __import__("sys").platform == "emscripten":
        %pip install pidgy
    %reload_ext pidgy

computational notebooks and the 🏆 award winning Project Jupyter

Free software, open standards, and web services for interactive computing across all programming languages.

A tagline from the official [Project Jupyter] home page indicating the values and reach of its technology.

[][Project Jupyter]

Jupyter is a [critical software system](https://awards.acm.org/software-system) for interactive computing that makes it possible __read and write code in many languages__. Most of we find Python and Markdown, but we are not limited to these languages.

Follow me through the olds.

## Xerox Alto


<figure markdown="">
<figcaption markdown="">
<blockquote cite="https://en.wikipedia.org/wiki/Xerox_Alto">
The Xerox Alto is a computer designed from its inception to support <b>an operating system based on a graphical user interface (GUI)</b>, later using the desktop metaphor. The first machines were introduced on 1 March 1973, a decade before mass-market GUI machines became available. 
</blockquote>

![xero alto](https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Xerox_Alto_mit_Rechner.JPG/480px-Xerox_Alto_mit_Rechner.JPG "A Xerox Alto cabinet computer")

</figcaption>
</figure>


[alto]: https://en.wikipedia.org/wiki/Xerox_Alto

Xerox Alto

The Xerox Alto is a computer designed from its inception to support an operating system based on a graphical user interface (GUI), later using the desktop metaphor. The first machines were introduced on 1 March 1973, a decade before mass-market GUI machines became available.


The computer mouse and interactive computing

at the dawn of post modernity, Doug Engelbart's [X-Y Position Indicator for a Display System] changed the way we interact with computers.


## the [mother of all demos]


<figure markdown="">
<figcaption markdown="">

Doug Englebart's [Mother of all Demos] presentation that changed computing forever.
</figcaption>
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="472" src="https://www.youtube.com/embed/yJDv-zdhzMY" title="The Mother of All Demos, presented by Douglas Engelbart (1968)" width="629"></iframe>
</figure>

&gt; The live demonstration featured the introduction of a complete computer hardware and software system called
the oN-Line System or, more commonly, NLS. The 90-minute presentation demonstrated for the first time 
many of the fundamental elements of modern personal computing: <b>windows, hypertext, graphics, efficient navigation and command input, video conferencing, the computer mouse, word processing, dynamic file linking, revision control, and a collaborative real-time editor.</b> Engelbart's presentation was the first to publicly demonstrate all of these elements in a single system. The demonstration was highly influential and spawned similar projects at Xerox PARC in the early 1970s. The underlying concepts and technologies influenced both the Apple Macintosh and Microsoft Windows graphical user interface operating systems in the 1980s and 1990s. 

[mother of all demos]: https://en.wikipedia.org/wiki/The_Mother_of_All_Demos "the wiki page for the mother of all demos"
[moad transcript]: https://github.com/atduskgreg/MoAD-Transcript "a repository hosting the mother of all demos transcripts"

the mother of all demos

Doug Englebart's [Mother of all Demos] presentation that changed computing forever.

> The live demonstration featured the introduction of a complete computer hardware and software system called the oN-Line System or, more commonly, NLS. The 90-minute presentation demonstrated for the first time many of the fundamental elements of modern personal computing: windows, hypertext, graphics, efficient navigation and command input, video conferencing, the computer mouse, word processing, dynamic file linking, revision control, and a collaborative real-time editor. Engelbart's presentation was the first to publicly demonstrate all of these elements in a single system. The demonstration was highly influential and spawned similar projects at Xerox PARC in the early 1970s. The underlying concepts and technologies influenced both the Apple Macintosh and Microsoft Windows graphical user interface operating systems in the 1980s and 1990s.

50 Years Later, We’re Still Living in the Xerox Alto’s World

the impact of the Xerox Alto still ripples through the world as we build shiners systems than the mother of all demos. the Alto was a glimpse into the future of personal computing.

[](https://twitter.com/arbesman/status/1631267214283218950)

## Mathematica's computational essays

<figure markdown="">
<blockquote cite="https://www.theatlantic.com/science/archive/2018/04/the-scientific-paper-is-obsolete/556676/" markdown="">

The notebook interface was the brainchild of Theodore Gray, who was inspired while working with an 
old Apple code editor. Where most programming environments either had you run code one line at a 
time, or all at once as a big blob, the Apple editor let you highlight any part of your code and run
just that part. Gray brought the same basic concept to Mathematica, with help refining the design
from none other than Steve Jobs. __The notebook is designed to turn scientific programming into an 
interactive exercise, where individual commands were tweaked and rerun, perhaps dozens or hundreds 
of times, as the author learned from the results of their little computational experiments, and 
came to a more intimate understanding of their data.__

</blockquote>

![mathematica version 2](https://winworldpc.com/res/img/screenshots/Mathematica%202.1%20-%20About.png "a screenshot of mathematica version 2")

</figure>

Mathematica's computational essays

The notebook interface was the brainchild of Theodore Gray, who was inspired while working with an old Apple code editor. Where most programming environments either had you run code one line at a time, or all at once as a big blob, the Apple editor let you highlight any part of your code and run just that part. Gray brought the same basic concept to Mathematica, with help refining the design from none other than Steve Jobs. __The notebook is designed to turn scientific programming into an interactive exercise, where individual commands were tweaked and rerun, perhaps dozens or hundreds of times, as the author learned from the results of their little computational experiments, and came to a more intimate understanding of their data.__


computer programning for everybody

cp4e is the darpa proposal that contributed to early python development.

it begins ...

> In the seventies, Xerox PARC asked: "Can we have a computer on every desk?" We now know this is possible, but those computers haven't necessarily empowered their users. Today's computers are often inflexible: the average computer user can typically only change a limited set of options configurable via a "wizard" (a lofty word for a canned dialog), and is dependent on expert programmers for everything else.

and continues ...

> We compare mass ability to read and write software with mass literacy, and predict equally pervasive changes to society. Hardware is now sufficiently fast and cheap to make mass computer education possible: the next big change will happen when most computer users have the knowledge and power to create and modify software.

Interactive Python

IPython grew to have a lot of features in a monolith

• an interactive shell
• a REPL protocol
• a notebook document fromat
• a notebook document conversion tool
• a web-based notebook authoring tool
• tools for building interactive UI (widgets)
• interactive parallel Python based on the above REPL protocol

2015 Project Jupyter The Big Split

Jupyter is like IPython, but language agnostic

<abbr title="julia">Ju</abbr>
<abbr title="python">py</abbr>
                   te
<abbr title="R">r</abbr>

jupyter enables polyglot programming in many languages at the same time.

## 2017 ACM Software System Award

<figure markdown="">
<figcaption>
jupyter is recognized as a critical systems software.

</figcaption>
<blockquote cite="https://awards.acm.org/software-system">

Jupyter has also gained wide industry adoption. Since 2015, Jupyter-based products have been released by several companies including Google (Cloud DataLab), Microsoft (AzureML, HDInsight), Intel (Trusted Analytics Platform), and IBM (IBM Watson Studio). Bloomberg and Anaconda Inc. have partnered with Project Jupyter to develop the next-generation web interface, JupyterLab.

</blockquote>
</figure>
<blockquote cite="https://blog.jupyter.org/jupyter-receives-the-acm-software-system-award-d433b0dfe3a2">

Similarly, there exist multiple client applications in addition to the Jupyter Notebook and JupyterLab to create and execute notebooks, each with its own use case and focus: the open source nteract project develops a lightweight desktop application to run notebooks; CoCalc, a startup founded by William Stein, the creator of SageMath, offers a web-based client with real-time collaboration that includes Jupyter alongside SageMath, LaTeX, and tools focused on education; and Google now provides Colaboratory, another web notebook frontend that runs alongside the rest of the Google Documents suite, with execution in the Google Cloud.

</blockquote>

2017 ACM Software System Award

jupyter is recognized as a critical systems software.

Jupyter has also gained wide industry adoption. Since 2015, Jupyter-based products have been released by several companies including Google (Cloud DataLab), Microsoft (AzureML, HDInsight), Intel (Trusted Analytics Platform), and IBM (IBM Watson Studio). Bloomberg and Anaconda Inc. have partnered with Project Jupyter to develop the next-generation web interface, JupyterLab.

Similarly, there exist multiple client applications in addition to the Jupyter Notebook and JupyterLab to create and execute notebooks, each with its own use case and focus: the open source nteract project develops a lightweight desktop application to run notebooks; CoCalc, a startup founded by William Stein, the creator of SageMath, offers a web-based client with real-time collaboration that includes Jupyter alongside SageMath, LaTeX, and tools focused on education; and Google now provides Colaboratory, another web notebook frontend that runs alongside the rest of the Google Documents suite, with execution in the Google Cloud.

## jupyter is in good company

<figure markdown="">
<figcaption markdown="">

Project Jupyter wins the 2017 ACM Software System Award, sharing a similar prestige as the Xerox Alto 30 years later.
</figcaption>
<iframe height="600" src="https://en.m.wikipedia.org/wiki/ACM_Software_System_Award#Recipients" width="100%"></iframe>
</figure>

jupyter is in good company

Project Jupyter wins the 2017 ACM Software System Award, sharing a similar prestige as the Xerox Alto 30 years later.

### there many notebook implementations and user interfaces

<figure markdown="">
<figcaption markdown="">

the notebook is a style of interface, collections of input forms and outputs repeated to weave a narrative and tangle code. there are open source and closed source options, along with language specific and agnostic implementations.

</figcaption>
<iframe height="600" src="https://en.m.wikipedia.org/wiki/Notebook_interface#Free/open-source_notebooks" width="100%"></iframe>
</figure>

with over [10 million notebooks][nbestimate], there are now large scale studies of notebook and literate computing interfaces:

* [Design and Use of Computational Notebooks](https://adamrule.com/files/dissertation/rule_dissertation.pdf)
* [Mapping the Landscape of Literate Computing](https://pure.au.dk/ws/files/173226224/PPIG_2019_camera_ready.pdf)
* [The Story in the Notebook: Exploratory Data Science using a Literate Programming Tool](https://marybethkery.com/projects/Verdant/Kery-The-Story-in-the-Notebook-Exploratory-Data-Science-using-a-Literate-Programming-Tool.pdf)

[nbestimate]: https://github.com/parente/nbestimate/blob/master/estimate.ipynb "a github project that estimates the number of notebooks on github"

there many notebook implementations and user interfaces

the notebook is a style of interface, collections of input forms and outputs repeated to weave a narrative and tangle code. there are open source and closed source options, along with language specific and agnostic implementations.

with over 10 million notebooks, there are now large scale studies of notebook and literate computing interfaces:

• Design and Use of Computational Notebooks
• Mapping the Landscape of Literate Computing
• The Story in the Notebook: Exploratory Data Science using a Literate Programming Tool

## notebooks and cells are increasingly more common forms

<figure markdown="">
<figcaption>Observable's description of notebooks and cells.</figcaption>
<blockquote cite="https://observablehq.com/@observablehq/notebooks-cells">
Observable is a platform for exploring data and code, visually, live in your browser. And <b>the central component of that platform is what we call a "notebook": an interactive, editable document defined by chunks of code called "cells".</b> Observable notebooks help you explore live data, prototype visualizations, make interactive art, understand algorithms, collaborate on reports, and much more. Join Anjana Vakil, Observable Developer Advocate, in diving into Observable and understanding the basic mechanics of working with notebooks &amp; cells. 
</blockquote>
</figure>
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/M1xMRkb89oM" title="Observable: Notebooks &amp; Cells" width="560"></iframe>

notebooks and cells are increasingly more common forms

Observable's description of notebooks and cells.

Observable is a platform for exploring data and code, visually, live in your browser. And the central component of that platform is what we call a "notebook": an interactive, editable document defined by chunks of code called "cells". Observable notebooks help you explore live data, prototype visualizations, make interactive art, understand algorithms, collaborate on reports, and much more. Join Anjana Vakil, Observable Developer Advocate, in diving into Observable and understanding the basic mechanics of working with notebooks & cells.

## <abbr title="web content accessibility guidelines">WCAG</abbr>: we circumvented accessibility guidelines

<blockquote cite="https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines">

The **Web Content Accessibility Guidelines (WCAG)** are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. They are a set of recommendations for making Web content more accessible, primarily for people with disabilities—but also for all user agents, including highly limited devices, such as mobile phones.
</blockquote>
<blockquote cite="https://www.boia.org/blog/history-of-the-web-content-accessibility-guidelines-wcag" markdown="">

### wcag drafts

* May 5, 1999: WCAG 1.0 is born. It included 14 guidelines, ranging from the need to provide text equivalents to considering clarity and simplicity on the web. Each guideline had between one and 10 supporting checkpoints.
* December 11, 2008: WCAG 2.0 broadens scope and offers the four principles. The early 2000s were years of unbelievable changes in technology, so WCAG evolved to keep up. WCAG 2.0 was an incredible follow-up to its predecessor and was intended to be applied to almost all things digital (including documents and apps). WCAG 2.0 also introduced the four guiding principles of accessibility, stating content must be perceivable, operable, understandable, and robust, supported by success criteria for meeting those principles. WCAG 2.0 reigned as the gold standard for a long time.
* June 5, 2018: WCAG 2.1 builds on but does not replace WCAG 2.0. The latest version of WCAG is backwards-compatible with the previous, which means if you comply with WCAG 2.1, you automatically comply with WCAG 2.0 — great news for website and app creators. WCAG 2.1 came as a highly-welcomed update, after the decade-old WCAG 2.0 could no longer completely account for advancements in technology and web use. The new WCAG 2.1 standards include several success criteria for improving web accessibility on mobile devices, as well as for people with low vision and cognitive disabilities.

</blockquote>

WCAG: we circumvented accessibility guidelines

The **Web Content Accessibility Guidelines (WCAG)** are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. They are a set of recommendations for making Web content more accessible, primarily for people with disabilities—but also for all user agents, including highly limited devices, such as mobile phones.

### wcag drafts * May 5, 1999: WCAG 1.0 is born. It included 14 guidelines, ranging from the need to provide text equivalents to considering clarity and simplicity on the web. Each guideline had between one and 10 supporting checkpoints. * December 11, 2008: WCAG 2.0 broadens scope and offers the four principles. The early 2000s were years of unbelievable changes in technology, so WCAG evolved to keep up. WCAG 2.0 was an incredible follow-up to its predecessor and was intended to be applied to almost all things digital (including documents and apps). WCAG 2.0 also introduced the four guiding principles of accessibility, stating content must be perceivable, operable, understandable, and robust, supported by success criteria for meeting those principles. WCAG 2.0 reigned as the gold standard for a long time. * June 5, 2018: WCAG 2.1 builds on but does not replace WCAG 2.0. The latest version of WCAG is backwards-compatible with the previous, which means if you comply with WCAG 2.1, you automatically comply with WCAG 2.0 — great news for website and app creators. WCAG 2.1 came as a highly-welcomed update, after the decade-old WCAG 2.0 could no longer completely account for advancements in technology and web use. The new WCAG 2.1 standards include several success criteria for improving web accessibility on mobile devices, as well as for people with low vision and cognitive disabilities.

accessible notebook interfaces

recently, Jupyter developers were able to remove accessibility violations caught be axe. read the [blog post].


### automated testing

<figure markdown="">
<figcaption markdown="">

[axe core][axe]'s is the open source industry standard for accessibility testing.
caveat emptor...
</figcaption>

&gt; With [axe-core][axe], you can find **on average 57% of WCAG issues automatically**. Additionally, axe-core will return elements as "incomplete" where axe-core could not be certain, and manual review is needed.

</figure>


[axe]: https://github.com/dequelabs/axe-core

#### using axe

* https://github.com/dequelabs/axe-core
* [firefox axe extension]
* [chrome axe extension]


[firefox axe extension]: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/
[chrome axe extension]: https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd 

automated testing

[axe core][axe]'s is the open source industry standard for accessibility testing. caveat emptor...

> With [axe-core][axe], you can find **on average 57% of WCAG issues automatically**. Additionally, axe-core will return elements as "incomplete" where axe-core could not be certain, and manual review is needed.

using axe

• https://github.com/dequelabs/axe-core
• firefox axe extension
• chrome axe extension

manual testing

• WCAG
• ACT rules
• WAI patterns

nothing will replace the experiences of disabled people! 🙌 jenn and isabela for making sure the testers got paid!


## all hands on deck

we're responsible for accessible corridors and y'all are responsible accessible rooms.
jupyter can do a lot, which means you can do to. writing accessible notebooks means 
consistenty adhering to standard patterns that will make information most usable by assist tech.
jupyter is only responsible the pixels it makes, less the ones your make.

1. have fun learning how to write accessible notebooks
1. explore the world of accessibility resources [^resources]
1. listen to the experiences of disabled people
1. abide standards
1. join our [jupyter accessibility community meetings]

[^resources]: 
    * https://www.technica11y.org/
    * https://a11y.coffee/dig-in/
    * https://www.a11yproject.com/

[jupyter accessibility community meetings]: https://github.com/jupyter/accessibility/

all hands on deck

we're responsible for accessible corridors and y'all are responsible accessible rooms. jupyter can do a lot, which means you can do to. writing accessible notebooks means consistenty adhering to standard patterns that will make information most usable by assist tech. jupyter is only responsible the pixels it makes, less the ones your make.

1. have fun learning how to write accessible notebooks
2. explore the world of accessibility resources ¹
3. listen to the experiences of disabled people
4. abide standards
5. join our jupyter accessibility community meetings

<style>
article > .highlight {
    display: none;
}
</style>

---

1. • https://www.technica11y.org/
   • https://a11y.coffee/dig-in/
   • https://www.a11yproject.com/

   ↩