Compare commits

...

8 Commits

@ -0,0 +1,360 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>2024-10-21-SI25-NOTES</title>
<style>
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<p><a
href="https://pzwiki.wdka.nl/mediadesign/Radio_WORM:_Protocols_for_Collective_Performance#Monday_21_October"
class="uri">https://pzwiki.wdka.nl/mediadesign/Radio_WORM:_Protocols_for_Collective_Performance#Monday_21_October</a></p>
<h2 id="plan">Plan</h2>
<ul>
<li>Review of the reading (<a
href="https://hub.xpub.nl/bootleglibrary/book/789">Bellos in Mainframe
Experimentalism</a>)</li>
<li>Some Examples</li>
<li>An (off-screen) Exercise</li>
</ul>
<h2 id="oulipo">Oulipo</h2>
<ul>
<li>https://oulipo.net/</li>
<li>https://oulipo.net/fr/contraintes/s7</li>
</ul>
<h2 id="who-are-the-women-of-oulipo-a-constraint">Who are the Women of
Oulipo? (a constraint ;)</h2>
<p>In revisiting the history of Oulipo, its useful to consider this
article by Sarah Coolidge that explores the question: <a
href="https://www.catranslation.org/feature/who-are-the-women-of-oulipo/">Who
Are the Women of Oulipo?</a></p>
<p>BUT the broken links are quite numerous and tragic…</p>
<p>For instance this page:</p>
<ul>
<li><a
href="http://www.cipmarseille.fr/pop_documents_liens.php?id=985&amp;type_proprio=1&amp;gestion=E"
class="uri">http://www.cipmarseille.fr/pop_documents_liens.php?id=985&amp;type_proprio=1&amp;gestion=E</a></li>
</ul>
<p>has audio links, which themselves need repair:</p>
<ul>
<li><a
href="https://archive.cipmarseille.fr/documents/448_20090613131151.mp3"
class="uri">https://archive.cipmarseille.fr/documents/448_20090613131151.mp3</a></li>
<li><a
href="https://archive.cipmarseille.fr/documents/17_20061020144007.mp3"
class="uri">https://archive.cipmarseille.fr/documents/17_20061020144007.mp3</a></li>
<li><a
href="https://archive.cipmarseille.fr/documents/890_20121005183822.mp3"
class="uri">https://archive.cipmarseille.fr/documents/890_20121005183822.mp3</a></li>
</ul>
<p>A quick summary (with repaired links):</p>
<ul>
<li>Michèle Métail, a collection of whoms constrained poems appear <a
href="https://www.poetryinternational.com/en/poets-poems/poets/poet/102-2044_Metail">in
translation</a> online.</li>
<li>Michelle Grangaud, who worked with palindromes and anagrams, and
developed a constraint called <a
href="https://oulipo.net/fr/contraintes/poeme-fondu">poème fondu</a>, in
which one poem is “whittled down into another poetic form (for example
haiku), using only words from the original”.</li>
<li>Anne Garrétas <a
href="https://www.goodreads.com/book/show/23129715-sphinx">Sphinx</a>
(<a
href="https://kenyonreview.org/reviews/sphinx-by-anne-garreta-738439/">a
review</a>), a romantic novel between two characters that avoides
explicit gendering of its protagonists.</li>
<li>Valérie Beaudouins <a
href="https://academic.oup.com/dsh/article-abstract/11/1/23/969581?redirectedFrom=fulltext&amp;login=false">Metrometer</a>,
a method</li>
<li>Michèle Audins <a
href="https://www.goodreads.com/book/show/26196054-one-hundred-twenty-one-days">One
Hundred Twenty-One Days</a>, that traces Mathematicians lives through
World War I and II.</li>
</ul>
<h2 id="oulipo-zines">Oulipo <em>zines</em></h2>
<h2 id="algorithm">Algorithm</h2>
<p>N+7 is useful as an example of an <em>algorithm</em>.</p>
<p><img src="A_Computer_Glossary-Algorithm.png" /></p>
<h2 id="n7">N+7</h2>
<p><a href="http://www.spoonbill.org/n+7/"
class="uri">http://www.spoonbill.org/n+7/</a></p>
<p>Lets feed the first paragraph of <a
href="https://www.catranslation.org/feature/who-are-the-women-of-oulipo/">Who
are the Women of Oulipo</a> to get from:</p>
<blockquote>
<p>A major reason for their absence on your bookshelves is that, until
recently, hardly any works by the women of Oulipo had been published in
English translation. This phenomenon has only further entrenched the
notion that the world of literary rule-breaking is in fact a boys club,
that men alone are the pioneers at the frontier of literary
innovation.</p>
</blockquote>
<p>to surprisingly suggestive and critical (n+1)</p>
<blockquote>
<p>A major-domo reasoning for their absentee on your bookshelves is
that, until recently, hardly any workshop by the womanizers of Oulipo
had been published in English translator. This phial has only further
entrenched the nought that the worm of literary ruler-breaking is in
faction a boycotts clubhouse, that manacles alone are the pips at the
frontiersman of literary innovator.</p>
</blockquote>
<p>to absurd (n+7)</p>
<blockquote>
<p>A malady rebound for their abyss on your bookshelves is that, until
recently, hardly any worship by the woodcutters of Oulipo had been
published in English transporter. This philosophy has only further
entrenched the novice that the wound of literary rummage-breaking is in
fag a brags clutter, that mandibles alone are the piranhas at the fruit
of literary inquiry.</p>
</blockquote>
<h2 id="sources">Sources</h2>
<ul>
<li><a href="https://wordnet.princeton.edu/">Wordnet</a></li>
<li><a href="https://gutenberg.org/">Project Gutenberg</a></li>
</ul>
<h2 id="examples">Examples</h2>
<ul>
<li><a href="https://github.com/antiboredom/audiogrep">audiogrep</a> /
<a href="https://antiboredom.github.io/videogrep/">videogrep</a> and the
TED Super cuts</li>
<li>Perec observations see <a
href="https://ubu.com/sound/perec.html">ubuweb</a></li>
<li>Anne-James Chaton see <a
href="https://video.constantvzw.org/vj12/.index/AnneJamesChaton-performance.ogv/play.mp4">vj12
performance</a>, or</li>
<li><a
href="https://www.cartoonbrew.com/cgi/max-headroom-and-the-strange-world-of-pseudo-cgi-82745.html">Max
Headroom and the strange world of pseudo-CGI</a></li>
<li><a href="https://www.decontextualize.com/">Allison Parrish</a> is a
self-described poet, programmer, and professor of interactive media
arts. Her work often contains examples of code and libraries that
resonate with many of the protocols from Die Maschine, and the
techniques of Oulipo.</li>
</ul>
<h2 id="unknown-unknowns">Unknown Unknowns</h2>
<p>Self-publishing project + publications from Angie Waller</p>
<p><a href="https://www.unknownunknowns.org/"
class="uri">https://www.unknownunknowns.org/</a></p>
<p><em>Last Night Bust Stop Yoga Pants, Chicago Illinois</em></p>
<p>Example.</p>
<h2 id="epicpedia">Epicpedia</h2>
<p><a href="epicpedia_2024_notes.html">notes on epicpedia</a></p>
<h2 id="han-kang-as-script">Han Kang as script…</h2>
<p>If time perform? or just read.</p>
<h2 id="rhetorical-space">Rhetorical Space</h2>
<p>Lorraine Code, Rhetorical Spaces, Essays on Gendered Locations
(1995)</p>
<p>(via a citation from Hope Olson, Mapping beyond Deweys Boundaries,
Constructing Classificatory Space for Marginalized Knowledge Domains,
published in Library Trends, 1998)</p>
<blockquote>
<p>Rhetorical spaces… are fictive but not fanciful or fixed locations,
whose (tacit, rarely spoken) territorial imperatives structure and limit
the kinds of utterances that can be voiced within them with <strong>a
reasonable expectation of uptake and “choral support”: an expectation of
being heard, understood, taken seriously.</strong> They are the sites
where the very possibility of an utterance counting as “true-or-false”
or of a discussion yielding insight is made manifest. Some simple
examples will indicate what I mean the term to achieve….</p>
<p>Imagine trying to make a true statement about whether it is more
convenient to fly into Newark or La Guardia airport in the year 1600.
<strong>The statement would not be false but meaningless</strong>: it
could neither be true nor false within the available discursive
possibilities. Or imagine trying to have a productive public debate
about abortion in the Vatican in 1995, where there is no available
rhetorical space, not because the actual speech acts involved would be
overtly prohibited, but because the available rhetorical space is not
one where ideas on such a topic can be heard and debated openly,
responsively…</p>
<p>What I want this terminology <a href="#rhetorical-space">rhetorical
space</a> to do [is], namely to deflect the focus of philosophical
analysis <strong>away from single and presumably self-contained
propositional utterances pronounced by no one in particular and as
though into a neutral space</strong>; and to <strong>move it into
textured locations where it matters who is speaking and where and why,
and where such mattering bears directly upon the possibility of
knowledge claims, moral pronouncements, descriptions of “reality”
achieving acknowledgment</strong>, going through. Often in such spaces
discourse becomes a poiesis, a way of representing experience, reality,
that remakes and alters it in the process. And the making is ordinarily
a communal process, dependent for its continuance on receptive
conditions, on engaged responses both favourable and critical. (p. x
)</p>
</blockquote>
<h2 id="why-constraints">Why Constraints?</h2>
<p>Each constraint (or freedom), determines a rhetorical space, of
possible meaning, but which also determines the kinds of collaboration
that can (and should) take place within it.</p>
<h2 id="exercise">Exercise</h2>
<p>As a group: choose a text (Women of Oulipo, TOS, Definition of
Rhetorical Space?)</p>
<p>Starting in pairs, develop some protocols/algorithms to treat the
chosen text. Perform your algorithm <em>by hand</em> (or <em>on
paper</em>) ie not with code.</p>
<h2 id="exercises-for-over-break">Exercises for over break</h2>
<ul>
<li>Metronome (could work with just an audio tag, webaudio api and/or
libraries like tonejs or pizzicato).</li>
<li>n+7 generator</li>
</ul>
<p>Would be good to visit each to find a suitable project, make sure
good resources are available.</p>
<p>?&gt;?</p>
<ul>
<li>https://developer.mozilla.org/en-US/docs/Web/JavaScript</li>
</ul>
<p><a
href="https://jsbin.com/help/running-a-local-copy-of-jsbin/">Install our
own jsbin?</a></p>
</body>
</html>

@ -0,0 +1,145 @@
<https://pzwiki.wdka.nl/mediadesign/Radio_WORM:_Protocols_for_Collective_Performance#Monday_21_October>
## Plan
* Review of the reading ([Bellos in Mainframe Experimentalism](https://hub.xpub.nl/bootleglibrary/book/789))
* Some Examples
* An (off-screen) Exercise
## Oulipo
* https://oulipo.net/
* https://oulipo.net/fr/contraintes/s7
## Who are the Women of Oulipo? (a constraint ;)
In revisiting the history of Oulipo, it's useful to consider this article by Sarah Coolidge that explores the question: [Who Are the Women of Oulipo?](https://www.catranslation.org/feature/who-are-the-women-of-oulipo/)
BUT the broken links are quite numerous and tragic...
For instance this page:
* <http://www.cipmarseille.fr/pop_documents_liens.php?id=985&type_proprio=1&gestion=E>
has audio links, which themselves need repair:
* <https://archive.cipmarseille.fr/documents/448_20090613131151.mp3>
* <https://archive.cipmarseille.fr/documents/17_20061020144007.mp3>
* <https://archive.cipmarseille.fr/documents/890_20121005183822.mp3>
A quick summary (with repaired links):
* Michèle Métail, a collection of whoms constrained poems appear [in translation](https://www.poetryinternational.com/en/poets-poems/poets/poet/102-2044_Metail) online.
* Michelle Grangaud, who worked with palindromes and anagrams, and developed a constraint called [poème fondu](https://oulipo.net/fr/contraintes/poeme-fondu), in which one poem is "whittled down into another poetic form (for example haiku), using only words from the original".
* Anne Garréta's [Sphinx](https://www.goodreads.com/book/show/23129715-sphinx) ([a review](https://kenyonreview.org/reviews/sphinx-by-anne-garreta-738439/)), a romantic novel between two characters that avoides explicit gendering of its protagonists.
* Valérie Beaudouin's [Metrometer](https://academic.oup.com/dsh/article-abstract/11/1/23/969581?redirectedFrom=fulltext&login=false), a method
* Michèle Audin's [One Hundred Twenty-One Days](https://www.goodreads.com/book/show/26196054-one-hundred-twenty-one-days), that traces Mathematicians lives through World War I and II.
## Oulipo *zines*
## Algorithm
N+7 is useful as an example of an *algorithm*.
![](A_Computer_Glossary-Algorithm.png)
## N+7
<http://www.spoonbill.org/n+7/>
Let's feed the first paragraph of [Who are the Women of Oulipo](https://www.catranslation.org/feature/who-are-the-women-of-oulipo/) to get from:
> A major reason for their absence on your bookshelves is that, until recently, hardly any works by the women of Oulipo had been published in English translation. This phenomenon has only further entrenched the notion that the world of literary rule-breaking is in fact a boys club, that men alone are the pioneers at the frontier of literary innovation.
to surprisingly suggestive and critical (n+1)
> A major-domo reasoning for their absentee on your bookshelves is that, until recently, hardly any workshop by the womanizers of Oulipo had been published in English translator. This phial has only further entrenched the nought that the worm of literary ruler-breaking is in faction a boycotts clubhouse, that manacles alone are the pips at the frontiersman of literary innovator.
to absurd (n+7)
>A malady rebound for their abyss on your bookshelves is that, until recently, hardly any worship by the woodcutters of Oulipo had been published in English transporter. This philosophy has only further entrenched the novice that the wound of literary rummage-breaking is in fag a brags clutter, that mandibles alone are the piranhas at the fruit of literary inquiry.
## Sources
* [Wordnet](https://wordnet.princeton.edu/)
* [Project Gutenberg](https://gutenberg.org/)
## Examples
* [audiogrep](https://github.com/antiboredom/audiogrep) / [videogrep](https://antiboredom.github.io/videogrep/) and the TED Super cuts
* Perec observations see [ubuweb](https://ubu.com/sound/perec.html)
* Anne-James Chaton see [vj12 performance](https://video.constantvzw.org/vj12/.index/AnneJamesChaton-performance.ogv/play.mp4), or
* [Max Headroom and the strange world of pseudo-CGI](https://www.cartoonbrew.com/cgi/max-headroom-and-the-strange-world-of-pseudo-cgi-82745.html)
* [Allison Parrish](https://www.decontextualize.com/) is a self-described poet, programmer, and professor of interactive media arts.
Her work often contains examples of code and libraries that resonate with many of the protocols from Die Maschine, and the techniques of Oulipo.
## Unknown Unknowns
Self-publishing project + publications from Angie Waller
<https://www.unknownunknowns.org/>
*Last Night Bust Stop Yoga Pants, Chicago Illinois*
Example.
## Epicpedia
[notes on epicpedia](epicpedia_2024_notes.html)
## Han Kang as script...
If time perform? or just read.
## Rhetorical Space
Lorraine Code, Rhetorical Spaces, Essays on Gendered Locations (1995)
(via a citation from Hope Olson, Mapping beyond Dewey's Boundaries, Constructing Classificatory Space for Marginalized Knowledge Domains, published in Library Trends, 1998)
> Rhetorical spaces... are fictive but not fanciful or fixed locations, whose (tacit, rarely spoken) territorial imperatives structure and limit the kinds of utterances that can be voiced within them with **a reasonable expectation of uptake and “choral support”: an expectation of being heard, understood, taken seriously.** They are the sites where the very possibility of an utterance counting as “true-or-false” or of a discussion yielding insight is made manifest. Some simple examples will indicate what I mean the term to achieve....
>
> Imagine trying to make a true statement about whether it is more convenient to fly into Newark or La Guardia airport in the year 1600. **The statement would not be false but meaningless**: it could neither be true nor false within the available discursive possibilities. Or imagine trying to have a productive public debate about abortion in the Vatican in 1995, where there is no available rhetorical space, not because the actual speech acts involved would be overtly prohibited, but because the available rhetorical space is not one where ideas on such a topic can be heard and debated openly, responsively...
>
> What I want this terminology [rhetorical space] to do [is], namely to deflect the focus of philosophical analysis **away from single and presumably self-contained propositional utterances pronounced by no one in particular and as though into a neutral space**; and to **move it into textured locations where it matters who is speaking and where and why, and where such mattering bears directly upon the possibility of knowledge claims, moral pronouncements, descriptions of “reality” achieving acknowledgment**, going through. Often in such spaces discourse becomes a poiesis, a way of representing experience, reality, that remakes and alters it in the process. And the making is ordinarily a communal process, dependent for its continuance on receptive conditions, on engaged responses both favourable and critical. (p. x )
## Why Constraints?
Each constraint (or freedom), determines a rhetorical space, of possible meaning, but which also determines the kinds of collaboration that can (and should) take place within it.
## Exercise
As a group: choose a text (Women of Oulipo, TOS, Definition of Rhetorical Space?)
Starting in pairs, develop some protocols/algorithms to treat the chosen text. Perform your algorithm *by hand* (or *on paper*) -- ie not with code.
## Exercises for over break
* Metronome (could work with just an audio tag, webaudio api and/or libraries like tonejs or pizzicato).
* n+7 generator
Would be good to visit each to find a suitable project, make sure good resources are available.
?>?
* https://developer.mozilla.org/en-US/docs/Web/JavaScript
[Install our own jsbin?](https://jsbin.com/help/running-a-local-copy-of-jsbin/)

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="title" type="text" />
<button id="go">go</button>
<script src="epicpedia_2024.js"></script>
<script>
let title_elt = document.querySelector("#title");
let go_elt = document.querySelector("#go");
go_elt.addEventListener("click", e => {
let title = title_elt.value;
console.log("search for article named", title);
});
</script>
</body>
</html>

@ -0,0 +1,118 @@
{
"cells": [
{
"cell_type": "markdown",
"id": "e2544890-3bb4-4457-a4c3-9711121c59f9",
"metadata": {},
"source": [
"Epicpedia: graduation work made in 2008 by Networked Media student Annemieke van der Hoek \n",
"https://pzwiki.wdka.nl/mediadesign/Epicpedia\n",
"\n",
"Later Annemieke would present the work, in collaboration with her sister as a theater performance and workshop at VJ12: \n",
"https://video.constantvzw.org/vj12/epicpedia.ogv\n",
"\n",
"Following example begrudginly given here: \n",
"https://stackoverflow.com/questions/52283962/how-to-find-textual-differences-between-revisions-on-wikipedia-pages-with-mwclie\n",
"\n",
"https://www.mediawiki.org/wiki/API:Compare\n",
"\n",
"\n",
"Considering: \n",
"https://en.wikipedia.org/wiki/Han_Kang\n",
"\n",
"Oldest revision: \n",
"https://en.wikipedia.org/w/index.php?title=Han_Kang&oldid=376586279\n",
"\n",
"Thanks, Fred, now I see that there's a [REST API](https://www.mediawiki.org/wiki/API:REST_API) as well. Not sure what the differences are.\n",
"\n",
"Also using the URLSearchParams class in js: \n",
"https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\n",
"\n",
"Using the classic/action API, there's page > revisions: \n",
"https://www.mediawiki.org/wiki/API:Revisions\n",
"\n",
"Examples given on API:Revisions page:\n",
"\n",
"Last 5 edits\n",
"\n",
"https://www.mediawiki.org/w/api.php?action=query&prop=revisions&titles=MediaWiki&rvlimit=5&rvprop=timestamp|user|comment\n",
"\n",
"first edits\n",
"\n",
"https://www.mediawiki.org/w/api.php?action=query&prop=revisions&titles=MediaWiki&rvlimit=5&rvprop=timestamp|user|comment&rvdir=newer\n",
"\n",
"Adding ids and flags\n",
"\n",
"https://www.mediawiki.org/w/api.php?action=query&prop=revisions&titles=MediaWiki&rvlimit=5&rvprop=timestamp|user|comment|ids|flags&rvdir=newer\n",
"\n",
"adapted to Han Kang's entry:\n",
"\n",
"https://www.mediawiki.org/w/api.php?action=query&prop=revisions&titles=Han_Kang&rvlimit=5&rvprop=timestamp|user|comment|ids|flags&rvdir=newer\n",
"\n",
"https://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles=Han%20Kang&rvlimit=5&rvprop=timestamp|user|comment|ids|flags&rvdir=newer\n",
"\n",
"\n",
"\n",
"\n",
"\n"
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "b3a48c4e-dcb3-4fa7-9524-e4fc8eae8a39",
"metadata": {},
"outputs": [
{
"ename": "ModuleNotFoundError",
"evalue": "No module named 'mwclient'",
"output_type": "error",
"traceback": [
"\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
"\u001b[0;31mModuleNotFoundError\u001b[0m Traceback (most recent call last)",
"Cell \u001b[0;32mIn[1], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mmwclient\u001b[39;00m\n\u001b[1;32m 3\u001b[0m revisions \u001b[38;5;241m=\u001b[39m \u001b[38;5;28mlist\u001b[39m(page\u001b[38;5;241m.\u001b[39mrevisions(prop\u001b[38;5;241m=\u001b[39m\u001b[38;5;124m'\u001b[39m\u001b[38;5;124mids\u001b[39m\u001b[38;5;124m'\u001b[39m)) \n\u001b[1;32m 4\u001b[0m last_revision_id \u001b[38;5;241m=\u001b[39m revisions[\u001b[38;5;241m-\u001b[39m\u001b[38;5;241m1\u001b[39m][\u001b[38;5;124m'\u001b[39m\u001b[38;5;124mrevid\u001b[39m\u001b[38;5;124m'\u001b[39m]\n",
"\u001b[0;31mModuleNotFoundError\u001b[0m: No module named 'mwclient'"
]
}
],
"source": [
"import mwclient\n",
"\n",
"revisions = list(page.revisions(prop='ids')) \n",
"last_revision_id = revisions[-1]['revid']\n",
"first_revision_id = revisions[0]['revid']\n",
"compare_result = site.get('compare', fromrev=last_revision_id, torev=first_revision_id)\n",
"html_diff = compare_result['compare']['*']\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "f710d169-e284-4e27-834b-e31d98d7bf63",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.11.2"
}
},
"nbformat": 4,
"nbformat_minor": 5
}

@ -0,0 +1,18 @@
var url = "https://en.wikipedia.org/w/api.php";
var params = {
action: "compare",
format: "json",
fromtitle: "Template:Unsigned",
totitle: "Template:UnsignedIP",
origin: "*"
};
fetch(url + "?" + (new URLSearchParams(params)).toString())
.then(resp => resp.json())
.then(data => {
console.log("data", data);
})
.catch(err => {
console.log("bad", err);
});

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>epicpedia_2024_notes</title>
<style>
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<h2 id="revisiting-epicpedia-2024">Revisiting Epicpedia (2024)</h2>
<p><a href="https://pzwiki.wdka.nl/mediadesign/Epicpedia">Epicpedia</a>
was a graduation work made in 2008 by then Networked Media student
Annemieke van der Hoek.</p>
<p>Sadly, the site is no longer online, however via the wayback machine,
a <a
href="https://web.archive.org/web/20100331135533/http://www.epicpedia.org/">partial
snapshot</a> is visible.</p>
<p>Several screenshots are available on the <a
href="https://pzwiki.wdka.nl/mediadesign/Epicpedia">pzi wiki
page</a>.</p>
<h2 id="wikipedia-articles-as-conversations">Wikipedia articles as
conversations…</h2>
<p>Though we tend to read Wikipedia articles as a unified linear text
representing the latest revision, they are in fact are written in a much
more conversational manner with often thousands of individual edits,
corrections, deletions, and contestations. All these edits are
(meticulously) tracked and are made publically available when one views
the <em>history</em> of an article. Besides the edits themselves, edits
are associated with the user account or IP address (if made
<em>anonymously</em>) of the author, a timestamp, as well as an optional
comment, often the justification of the edit, and a flag for whether or
not the edit was is considered “minor”.</p>
<p>A wikipedia edit may be small, as in fixing a typo, or large, such as
the addition of a new section, or contentious, such as changing existing
wording to reflect a different point of view. No matter the size or
intent, however, each edit contains a collection of <em>meta-data</em>
about the edit. In Epicpedia, this <em>meta-data</em> was likened to the
meta-text of a stage play, ie the stage directions, and other texts in a
screenplay besides the actual lines that are spoken. In invoking the
figure of Berthold Brecht, and the ideas of Epic Theater, a parallel is
made between the intents of Brechtian “distancing” as a means of
heightened engagement with a theater piece through an acknolwedgement of
its construction and artificiality, with the experience of engaging with
a contemporary web publishing platform such as Wikipedia.</p>
<h2 id="hands-on-with-the-api">Hands-on with the API</h2>
<p>Lets consider this article on the english language Wikipedia about
recent Nobel prize for Literature winner Han Kang:</p>
<p><a href="https://en.wikipedia.org/wiki/Han_Kang"
class="uri">https://en.wikipedia.org/wiki/Han_Kang</a></p>
<p>Looking at this articles <a
href="https://en.wikipedia.org/w/index.php?title=Han_Kang&amp;action=history">history</a>,
we can go back in time (click on “oldest” near the bottom) to find that
the article was created in August 2010:</p>
<p><a
href="https://en.wikipedia.org/w/index.php?title=Han_Kang&amp;oldid=376586279"
class="uri">https://en.wikipedia.org/w/index.php?title=Han_Kang&amp;oldid=376586279</a></p>
<p>Note that when you click on “View history”, the URL changes to reveal
the actual underlying URL structure. The URL of the api is the same,
just replace “index.php” with “api.php”.</p>
<p>To work with the history of an article in javascript, you can use
mediawikis <a
href="https://www.mediawiki.org/wiki/API:Revisions">Revisions
API</a></p>
<p>The examples given on API:Revisions page, show for instance how to
access the last 5 edits of an article:</p>
<p><a
href="https://www.mediawiki.org/w/api.php?action=query&amp;prop=revisions&amp;titles=MediaWiki&amp;rvlimit=5&amp;rvprop=timestamp%7Cuser%7Ccomment"
class="uri">https://www.mediawiki.org/w/api.php?action=query&amp;prop=revisions&amp;titles=MediaWiki&amp;rvlimit=5&amp;rvprop=timestamp|user|comment</a></p>
<p>or the first 5 edits:</p>
<p><a
href="https://www.mediawiki.org/w/api.php?action=query&amp;prop=revisions&amp;titles=MediaWiki&amp;rvlimit=5&amp;rvprop=timestamp%7Cuser%7Ccomment&amp;rvdir=newer"
class="uri">https://www.mediawiki.org/w/api.php?action=query&amp;prop=revisions&amp;titles=MediaWiki&amp;rvlimit=5&amp;rvprop=timestamp|user|comment&amp;rvdir=newer</a></p>
<p>Adding ids and flags</p>
<p><a
href="https://www.mediawiki.org/w/api.php?action=query&amp;prop=revisions&amp;titles=MediaWiki&amp;rvlimit=5&amp;rvprop=timestamp%7Cuser%7Ccomment%7Cids%7Cflags&amp;rvdir=newer"
class="uri">https://www.mediawiki.org/w/api.php?action=query&amp;prop=revisions&amp;titles=MediaWiki&amp;rvlimit=5&amp;rvprop=timestamp|user|comment|ids|flags&amp;rvdir=newer</a></p>
<p>Now, lets adapt this to an article on the English-language
wikipedia, to Han Kangs page (note the change of host!)…</p>
<p><a
href="https://en.wikipedia.org/w/api.php?action=query&amp;prop=revisions&amp;titles=Han%20Kang&amp;rvlimit=5&amp;rvprop=timestamp%7Cuser%7Ccomment%7Cids%7Cflags&amp;rvdir=newer"
class="uri">https://en.wikipedia.org/w/api.php?action=query&amp;prop=revisions&amp;titles=Han%20Kang&amp;rvlimit=5&amp;rvprop=timestamp|user|comment|ids|flags&amp;rvdir=newer</a></p>
<p>The API also provides a <a
href="https://www.mediawiki.org/wiki/API:Compare">Compare action</a> to
show the differences between two versions (revisions) of an article.</p>
<p><a
href="https://en.wikipedia.org/w/api.php?action=compare&amp;format=json&amp;fromtitle=Han+Kang&amp;totitle=Han+Kang&amp;torelative=next&amp;formatversion=2&amp;prop=diff%7Cids%7Ctitle%7Cuser%7Ccomment%7Cparsedcomment%7Ctimestamp&amp;difftype=inline&amp;fromrev=376586279"
class="uri">https://en.wikipedia.org/w/api.php?action=compare&amp;format=json&amp;fromtitle=Han+Kang&amp;totitle=Han+Kang&amp;torelative=next&amp;formatversion=2&amp;prop=diff%7Cids%7Ctitle%7Cuser%7Ccomment%7Cparsedcomment%7Ctimestamp&amp;difftype=inline&amp;fromrev=376586279</a></p>
<h2 id="a-sketch">A sketch</h2>
<p>See: <a href="showdiff.html">showdiff</a>.</p>
</body>
</html>

@ -0,0 +1,68 @@
## Revisiting Epicpedia (2024)
[Epicpedia](https://pzwiki.wdka.nl/mediadesign/Epicpedia) was a graduation work made in 2008 by then Networked Media student Annemieke van der Hoek.
Sadly, the site is no longer online, however via the wayback machine, a [partial snapshot](https://web.archive.org/web/20100331135533/http://www.epicpedia.org/
) is visible.
Several screenshots are available on the [pzi wiki page](https://pzwiki.wdka.nl/mediadesign/Epicpedia).
## Wikipedia articles as conversations...
Though we tend to read Wikipedia articles as a unified linear text representing the latest revision, they are in fact are written in a much more conversational manner with often thousands of individual edits, corrections, deletions, and contestations. All these edits are (meticulously) tracked and are made publically available when one views the *history* of an article. Besides the edits themselves, edits are associated with the user account or IP address (if made *anonymously*) of the author, a timestamp, as well as an optional comment, often the justification of the edit, and a flag for whether or not the edit was is considered "minor".
A wikipedia edit may be small, as in fixing a typo, or large, such as the addition of a new section, or contentious, such as changing existing wording to reflect a different point of view. No matter the size or intent, however, each edit contains a collection of *meta-data* about the edit. In Epicpedia, this *meta-data* was likened to the meta-text of a stage play, ie the stage directions, and other texts in a screenplay besides the actual lines that are spoken. In invoking the figure of Berthold Brecht, and the ideas of Epic Theater, a parallel is made between the intents of Brechtian "distancing" as a means of heightened engagement with a theater piece through an acknolwedgement of its construction and artificiality, with the experience of engaging with a contemporary web publishing platform such as Wikipedia.
## Hands-on with the API
Let's consider this article on the english language Wikipedia about recent Nobel prize for Literature winner Han Kang:
<https://en.wikipedia.org/wiki/Han_Kang>
Looking at this articles [history](https://en.wikipedia.org/w/index.php?title=Han_Kang&action=history), we can go back in time (click on "oldest" near the bottom) to find that the article was created in August 2010:
<https://en.wikipedia.org/w/index.php?title=Han_Kang&oldid=376586279>
Note that when you click on "View history", the URL changes to reveal the actual underlying URL structure. The URL of the api is the same, just replace "index.php" with "api.php".
To work with the history of an article in javascript, you can use mediawiki's [Revisions API](https://www.mediawiki.org/wiki/API:Revisions)
The examples given on API:Revisions page, show for instance how to access the last 5 edits of an article:
<https://www.mediawiki.org/w/api.php?action=query&prop=revisions&titles=MediaWiki&rvlimit=5&rvprop=timestamp|user|comment>
or the first 5 edits:
<https://www.mediawiki.org/w/api.php?action=query&prop=revisions&titles=MediaWiki&rvlimit=5&rvprop=timestamp|user|comment&rvdir=newer>
Adding ids and flags
<https://www.mediawiki.org/w/api.php?action=query&prop=revisions&titles=MediaWiki&rvlimit=5&rvprop=timestamp|user|comment|ids|flags&rvdir=newer>
Now, let's adapt this to an article on the English-language wikipedia, to Han Kang's page (note the change of host!)...
<https://en.wikipedia.org/w/api.php?action=query&prop=revisions&titles=Han%20Kang&rvlimit=5&rvprop=timestamp|user|comment|ids|flags&rvdir=newer>
The API also provides a [Compare action](https://www.mediawiki.org/wiki/API:Compare) to show the differences between two versions (revisions) of an article.
There's a so-called [API sandbox](https://en.wikipedia.org/wiki/Special:ApiSandbox#action=compare&fromrev=1&torev=2) that allows you to play with different parameters to the API.
<https://en.wikipedia.org/w/api.php?action=compare&format=json&fromtitle=Han+Kang&totitle=Han+Kang&torelative=next&formatversion=2&prop=diff%7Cids%7Ctitle%7Cuser%7Ccomment%7Cparsedcomment%7Ctimestamp&difftype=inline&fromrev=376586279>
## A sketch
See: [showdiff](showdiff.html).

@ -0,0 +1,7 @@
md=$(wildcard *.md)
mp_html=$(md:%.md=%.html)
all: $(mp_html)
%.html: %.md
pandoc --from markdown --to html --standalone $< -o $@

@ -0,0 +1,172 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>radio_plays</title>
<style>
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<p>Georges Perec - Die Maschine</p>
<ul>
<li><a href="https://hub.xpub.nl/bootleglibrary/read/918/pdf">The
Machine: English translation</a></li>
<li><a href="https://hub.xpub.nl/bootleglibrary/book/789">Mainframe
Experimentalism</a>, Bellos article (chapter 2)</li>
<li><a
href="https://hub.xpub.nl/bootleglibrary/read/789/epub#epubcfi(/6/22%5Bchp02%5D!/4/2/4/1:0)"
class="uri">https://hub.xpub.nl/bootleglibrary/read/789/epub#epubcfi(/6/22[chp02]!/4/2/4/1:0)</a></li>
<li><a href="https://calibre.constantvzw.org/read/29/pdf">VJ12
programme</a></li>
</ul>
</body>
</html>

@ -0,0 +1,7 @@
Georges Perec - Die Maschine
* [The Machine: English translation](https://hub.xpub.nl/bootleglibrary/read/918/pdf)
* [Mainframe Experimentalism](https://hub.xpub.nl/bootleglibrary/book/789), Bellos article (chapter 2)
* <https://hub.xpub.nl/bootleglibrary/read/789/epub#epubcfi(/6/22[chp02]!/4/2/4/1:0)>
* [VJ12 programme](https://calibre.constantvzw.org/read/29/pdf)

@ -0,0 +1,10 @@
<!doctype html>
<html>
<body>
<div id="result"></div>
<script>
let url = "https://en.wikipedia.org/w/api.php?action=compare&format=json&fromtitle=Han%20Kang&fromrev=376586279&totitle=Han%20Kang&torelative=next&formatversion=2&origin=*";
fetch(url).then(resp => resp.json()).then(data => console.log("data", data));
</script>
</body>
</html>

@ -0,0 +1,16 @@
<!doctype html>
<html>
<body>
<div id="result"></div>
<script>
let url = "https://en.wikipedia.org/w/api.php?action=compare&format=json&fromtitle=Han%20Kang&fromrev=376586279&totitle=Han%20Kang&torelative=next&formatversion=2&origin=*";
fetch(url).then(resp => resp.json()).then(data => {
console.log("data", data);
let result = document.querySelector("#result");
result.innerHTML = data.compare.body;
let toid = data.compare.toid;
});
</script>
</body>
</html>

@ -0,0 +1,48 @@
<!doctype html>
<html>
<head>
<style>
ins { color: green }
del { color: red }
#comment { font-style: italic; }
</style>
</head>
<body>
<button id="next">next</button>
<div id="timestamp"></div>
<div id="user"></div>
<div id="comment"></div>
<div id="result"></div>
<script>
let r = {
action: "compare",
format: "json",
fromtitle: "Han Kang",
totitle: "Han Kang",
torelative: "next",
formatversion: 2,
prop: "diff|ids|title|user|comment|parsedcomment|timestamp",
difftype: "inline", // table, inline, unified
origin: "*"
}
let api_url = "https://en.wikipedia.org/w/api.php"
let revid = 376586279;
// let url = "https://en.wikipedia.org/w/api.php?action=compare&format=json&fromtitle=Han%20Kang&fromrev=376586279&totitle=Han%20Kang&torelative=next&formatversion=2&origin=*";
let next = document.querySelector("button#next");
next.addEventListener("click", e=> {
r.fromrev = revid;
fetch(api_url + "?" + new URLSearchParams(r)).then(resp => resp.json()).then(data => {
console.log("data", data);
let result = document.querySelector("#result");
result.innerHTML = data.compare.body;
revid = data.compare.torevid;
console.log("next revid", revid);
document.querySelector("#user").textContent = data.compare.touser;
document.querySelector("#timestamp").textContent = data.compare.totimestamp;
document.querySelector("#comment").textContent = data.compare.tocomment;
});
})
</script>
</body>
</html>

@ -0,0 +1,119 @@
<!doctype html>
<html>
<head>
<style>
body {
font-family: monospace;
margin: 5%;
}
#controls {
margin-bottom: 1em;
}
ins {
color: black;
visibility: visible;
}
del {
color: black;
visibility: visible;
}
#comment { font-style: italic; }
#revision { display: none } /* hide the template */
.revision {
margin-bottom: 2em;
text-align: center;
}
.revision .timestamp {
font-style: italic;
margin-bottom: 1em;
}
.revision .user {
text-transform: uppercase;
margin-bottom: 1em;
}
.revision .comment {
font-style: italic;
margin-bottom: 1em;
}
.revision .body .mw-diff-inline-header {
display: none;
}
.revision .body .mw-diff-inline-context {
display: none;
}
.revision .body .mw-diff-inline-changed {
color: white;
visibility: hidden;
}
</style>
</head>
<body>
<div id="controls">
article title: <input type="text" name="title" value="Han Kang" />
starting revision (id):<input type="text" value="376586279" name="revision" />
number of revisions: <input type="range" name="numrevs" min="1" max="100" value="10" />
<button id="generate">generate script</button>
</div>
<div id="revision" class="revision">
<div class="timestamp"></div>
<div class="user"></div>
<div class="comment"></div>
<div class="body"></div>
</div>
<div id="revisions"></div>
<script src="difftime.js"></script>
<script>
const dateFormat = new Intl.RelativeTimeFormat('en', { style: 'long' });
let r = {
action: "compare",
format: "json",
fromtitle: "Han Kang",
totitle: "Han Kang",
torelative: "next",
formatversion: 2,
prop: "diff|ids|title|user|comment|parsedcomment|timestamp",
difftype: "inline", // table, inline, unified
origin: "*"
}
let title = document.querySelector("input[name=title]");
let revid = document.querySelector("input[name=revision]");
let numrevs = document.querySelector("input[name=numrevs]");
let api_url = "https://en.wikipedia.org/w/api.php"
// let url = "https://en.wikipedia.org/w/api.php?action=compare&format=json&fromtitle=Han%20Kang&fromrev=376586279&totitle=Han%20Kang&torelative=next&formatversion=2&origin=*";
let generate = document.querySelector("button#generate");
let last_time;
generate.addEventListener("click", async e => {
r.fromrev = parseInt(revid.value);
r.fromtitle = title.value.trim();
r.totitle = r.fromtitle;
for (let x = 0; x<parseInt(numrevs.value); x++) {
console.log(`generate step ${x+1}`);
let resp = await fetch(api_url + "?" + new URLSearchParams(r));
let data = await resp.json();
// https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
let revision = document.querySelector("#revision").cloneNode(true);
revision.removeAttribute("id"); // technically shouldn't have multiple elements with the same id
document.querySelector("#revisions").appendChild(revision);
console.log("generate: got data", data);
revision.querySelector(".body").innerHTML = data.compare.body;
r.fromrev = data.compare.torevid;
console.log("generate, next revid", r.revid);
revision.querySelector(".user").textContent = data.compare.touser;
// revision.querySelector(".timestamp").textContent = data.compare.totimestamp;
console.log("totimestamp", data.compare.totimestamp);
let ts = new Date(data.compare.totimestamp);
if (x == 0) {
revision.querySelector(".timestamp").textContent = ts.toString();
} else {
revision.querySelector(".timestamp").textContent = replaceInWithLater(timeDiff(ts, last_time, dateFormat));
}
last_time = ts.getUTCTime();
revision.querySelector(".comment").textContent = data.compare.tocomment;
}
})
</script>
</body>
</html>

@ -1,2 +1,3 @@
*.mp3 *.mp3
*.wav *.wav
worm25/

@ -0,0 +1,118 @@
/*!
* jsPOS
*
* Copyright 2010, Percy Wegmann
* Licensed under the LGPLv3 license
* http://www.opensource.org/licenses/lgpl-3.0.html
*
* Enhanced by Toby Rahilly to use a compressed lexicon format as of version 0.2.
*/
function POSTagger(){
this.lexicon = POSTAGGER_LEXICON;
this.tagsMap = LEXICON_TAG_MAP;
}
/**
* Indicates whether or not this string starts with the specified string.
* @param {Object} string
*/
String.prototype.startsWith = function(string){
if (!string)
return false;
return this.indexOf(string) == 0;
}
/**
* Indicates whether or not this string ends with the specified string.
* @param {Object} string
*/
String.prototype.endsWith = function(string){
if (!string || string.length > this.length)
return false;
return this.indexOf(string) == this.length - string.length;
}
POSTagger.prototype.wordInLexicon = function(word){
var ss = this.lexicon[word];
if (ss != null)
return true;
// 1/22/2002 mod (from Lisp code): if not in hash, try lower case:
if (!ss)
ss = this.lexicon[word.toLowerCase()];
if (ss)
return true;
return false;
}
POSTagger.prototype.tag = function(words){
var ret = new Array(words.length);
for (var i = 0, size = words.length; i < size; i++) {
var ss = this.lexicon[words[i]];
// 1/22/2002 mod (from Lisp code): if not in hash, try lower case:
if (!ss)
ss = this.lexicon[words[i].toLowerCase()];
if (!ss && words[i].length == 1)
ret[i] = words[i] + "^";
if (!ss)
ret[i] = "NN";
else
ret[i] = this.tagsMap[ss][0];
}
/**
* Apply transformational rules
**/
for (var i = 0; i < words.length; i++) {
word = ret[i];
// rule 1: DT, {VBD | VBP} --> DT, NN
if (i > 0 && ret[i - 1] == "DT") {
if (word == "VBD" ||
word == "VBP" ||
word == "VB") {
ret[i] = "NN";
}
}
// rule 2: convert a noun to a number (CD) if "." appears in the word
if (word.startsWith("N")) {
if (words[i].indexOf(".") > -1) {
ret[i] = "CD";
}
// Attempt to convert into a number
if (parseFloat(words[i]))
ret[i] = "CD";
}
// rule 3: convert a noun to a past participle if words[i] ends with "ed"
if (ret[i].startsWith("N") && words[i].endsWith("ed"))
ret[i] = "VBN";
// rule 4: convert any type to adverb if it ends in "ly";
if (words[i].endsWith("ly"))
ret[i] = "RB";
// rule 5: convert a common noun (NN or NNS) to a adjective if it ends with "al"
if (ret[i].startsWith("NN") && word.endsWith("al"))
ret[i] = i, "JJ";
// rule 6: convert a noun to a verb if the preceding work is "would"
if (i > 0 && ret[i].startsWith("NN") && words[i - 1].toLowerCase() == "would")
ret[i] = "VB";
// rule 7: if a word has been categorized as a common noun and it ends with "s",
// then set its type to plural common noun (NNS)
if (ret[i] == "NN" && words[i].endsWith("s"))
ret[i] = "NNS";
// rule 8: convert a common noun to a present participle verb (i.e., a gerund)
if (ret[i].startsWith("NN") && words[i].endsWith("ing"))
ret[i] = "VBG";
}
var result = new Array();
for (i in words) {
result[i] = [words[i], ret[i]];
}
return result;
}
POSTagger.prototype.prettyPrint = function(taggedWords) {
for (i in taggedWords) {
print(taggedWords[i][0] + "(" + taggedWords[i][1] + ")");
}
}
//print(new POSTagger().tag(["i", "went", "to", "the", "store", "to", "buy", "5.2", "gallons", "of", "milk"]));

@ -0,0 +1,81 @@
ABOUT:
jspos is a Javascript port of Mark Watson's FastTag Part of Speech Tagger which
was itself based on Eric Brill's trained rule set and English lexicon.
jspos also includes a basic lexer that can be used to extract words and other
tokens from text strings.
LICENSE:
jspos is licensed under the GNU LGPLv3
FILES:
lexicon.js_ - Javascript version of Eric Brill's English lexicon
lexer.js - Lexer to break a sentence into taggable tokens (e.g. words)
POSTagger.js - the Part of Speech tagger
You'll typically need to include all 3 files.
USAGE:
var words = new Lexer().lex("This is some sample text. This text can contain multiple sentences.");
var taggedWords = new POSTagger().tag(words);
for (i in taggedWords) {
var taggedWord = taggedWords[i];
var word = taggedWord[0];
var tag = taggedWord[1];
}
ACKNOWLEDGEMENTS:
Thanks to Mark Watson for writing FastTag, which served as the basis for jspos.
Thanks to Toby Rahilly for compressing the lexicon.
TAGS:
CC Coord Conjuncn and,but,or
CD Cardinal number one,two
DT Determiner the,some
EX Existential there there
FW Foreign Word mon dieu
IN Preposition of,in,by
JJ Adjective big
JJR Adj., comparative bigger
JJS Adj., superlative biggest
LS List item marker 1,One
MD Modal can,should
NN Noun, sing. or mass dog
NNP Proper noun, sing. Edinburgh
NNPS Proper noun, plural Smiths
NNS Noun, plural dogs
POS Possessive ending Õs
PDT Predeterminer all, both
PP$ Possessive pronoun my,oneÕs
PRP Personal pronoun I,you,she
RB Adverb quickly
RBR Adverb, comparative faster
RBS Adverb, superlative fastest
RP Particle up,off
SYM Symbol +,%,&
TO ÒtoÓ to
UH Interjection oh, oops
VB verb, base form eat
VBD verb, past tense ate
VBG verb, gerund eating
VBN verb, past part eaten
VBP Verb, present eat
VBZ Verb, present eats
WDT Wh-determiner which,that
WP Wh pronoun who,what
WP$ Possessive-Wh whose
WRB Wh-adverb how,where
, Comma ,
. Sent-final punct . ! ?
: Mid-sent punct. : ; Ñ
$ Dollar sign $
# Pound sign #
" quote "
( Left paren (
) Right paren )

@ -0,0 +1,66 @@
/*!
* jsPOS
*
* Copyright 2010, Percy Wegmann
* Licensed under the GNU LGPLv3 license
* http://www.opensource.org/licenses/lgpl-3.0.html
*/
function LexerNode(string, regex, regexs){
this.string = string;
this.children = [];
if (string) {
this.matches = string.match(regex);
var childElements = string.split(regex);
}
if (!this.matches) {
this.matches = [];
var childElements = [string];
}
if (regexs.length > 0) {
var nextRegex = regexs[0];
var nextRegexes = regexs.slice(1);
for (var i in childElements) {
this.children.push(new LexerNode(childElements[i], nextRegex, nextRegexes));
}
}
else {
this.children = childElements;
}
}
LexerNode.prototype.fillArray = function(array){
for (var i in this.children) {
var child = this.children[i];
if (child.fillArray)
child.fillArray(array);
else if (/[^ \t\n\r]+/i.test(child))
array.push(child);
if (i < this.matches.length) {
var match = this.matches[i];
if (/[^ \t\n\r]+/i.test(match))
array.push(match);
}
}
}
LexerNode.prototype.toString = function(){
var array = [];
this.fillArray(array);
return array.toString();
}
function Lexer(){
// Split by numbers, then whitespace, then punctuation
this.regexs = [/[0-9]*\.[0-9]+|[0-9]+/ig, /[ \t\n\r]+/ig, /[\.\,\?\!]/ig];
}
Lexer.prototype.lex = function(string){
var array = [];
var node = new LexerNode(string, this.regexs[0], this.regexs.slice(1));
node.fillArray(array);
return array;
}
//var lexer = new Lexer();
//print(lexer.lex("I made $5.60 today in 1 hour of work. The E.M.T.'s were on time, but only barely.").toString());

File diff suppressed because one or more lines are too long

@ -0,0 +1,56 @@
GNU LESSER GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below.
0. Additional Definitions.
As used herein, Òthis LicenseÓ refers to version 3 of the GNU Lesser General Public License, and the ÒGNU GPLÓ refers to version 3 of the GNU General Public License.
ÒThe LibraryÓ refers to a covered work governed by this License, other than an Application or a Combined Work as defined below.
An ÒApplicationÓ is any work that makes use of an interface provided by the Library, but which is not otherwise based on the Library. Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library.
A ÒCombined WorkÓ is a work produced by combining or linking an Application with the Library. The particular version of the Library with which the Combined Work was made is also called the ÒLinked VersionÓ.
The ÒMinimal Corresponding SourceÓ for a Combined Work means the Corresponding Source for the Combined Work, excluding any source code for portions of the Combined Work that, considered in isolation, are based on the Application, and not on the Linked Version.
The ÒCorresponding Application CodeÓ for a Combined Work means the object code and/or source code for the Application, including any data and utility programs needed for reproducing the Combined Work from the Application, but excluding the System Libraries of the Combined Work.
1. Exception to Section 3 of the GNU GPL.
You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL.
2. Conveying Modified Versions.
If you modify a copy of the Library, and, in your modifications, a facility refers to a function or data to be supplied by an Application that uses the facility (other than as an argument passed when the facility is invoked), then you may convey a copy of the modified version:
a) under this License, provided that you make a good faith effort to ensure that, in the event an Application does not supply the function or data, the facility still operates, and performs whatever part of its purpose remains meaningful, or
b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy.
3. Object Code Incorporating Material from Library Header Files.
The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following:
a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License.
b) Accompany the object code with a copy of the GNU GPL and this license document.
4. Combined Works.
You may convey a Combined Work under terms of your choice that, taken together, effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications, if you also do each of the following:
a) Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License.
b) Accompany the Combined Work with a copy of the GNU GPL and this license document.
c) For a Combined Work that displays copyright notices during execution, include the copyright notice for the Library among these notices, as well as a reference directing the user to the copies of the GNU GPL and this license document.
d) Do one of the following:
0) Convey the Minimal Corresponding Source under the terms of this License, and the Corresponding Application Code in a form suitable for, and under terms that permit, the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work, in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.
1) Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (a) uses at run time a copy of the Library already present on the user's computer system, and (b) will operate properly with a modified version of the Library that is interface-compatible with the Linked Version.
e) Provide Installation Information, but only if you would otherwise be required to provide such information under section 6 of the GNU GPL, and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version. (If you use option 4d0, the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code. If you use option 4d1, you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.)
5. Combined Libraries.
You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License, and convey such a combined library under terms of your choice, if you do both of the following:
a) Accompany the combined library with a copy of the same work based on the Library, uncombined with any other library facilities, conveyed under the terms of this License.
b) Give prominent notice with the combined library that part of it is a work based on the Library, and explaining where to find the accompanying uncombined form of the same work.
6. Revised Versions of the GNU Lesser General Public License.
The Free Software Foundation may publish revised and/or new versions of the GNU Lesser General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the Library as you received it specifies that a certain numbered version of the GNU Lesser General Public License Òor any later versionÓ applies to it, you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation. If the Library as you received it does not specify a version number of the GNU Lesser General Public License, you may choose any version of the GNU Lesser General Public License ever published by the Free Software Foundation.
If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply, that proxy's public statement of acceptance of any version is permanent authorization for you to choose that version for the Library.

@ -0,0 +1,173 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript" src="lexer.js"></script>
<script type="text/javascript" src="lexicon.js_"></script>
<script type="text/javascript" src="POSTagger.js"></script>
<div>
The below text is taken from <a href="http://www.archive.org/stream/cm56b10/cm56b10.txt">Memoirs of the Court of St. Cloud</a>
</div>
<h3>Sample Text</h3>
<div id="input_text">
Bonaparte has been as profuse in his disposal of the Imperial
diadem of Germany, as in his promises of the papal tiara of Rome. The
Houses of Austria and Brandenburgh, the Electors of Bavaria and Baden,
have by turns been cajoled into a belief of his exclusive support towards
obtaining it at the first vacancy. Those, however, who have paid
attention to his machinations, and studied his actions; who remember his
pedantic affectation of being considered a modern, or rather a second
Charlemagne; and who have traced his steps through the labyrinth of folly
and wickedness, of meanness and greatness, of art, corruption, and
policy, which have seated him on the present throne, can entertain little
doubt but that he is seriously bent on seizing and adding the sceptre of
Germany to the crowns of France and Italy.
During his stay last autumn at Mentz, all those German Electors who had
spirit and dignity enough to refuse to attend on him there in person were
obliged to send Extraordinary Ambassadors to wait on him, and to
compliment him on their part. Though hardly one corner of the veil that
covered the intrigues going forward there is yet lifted up, enough is
already seen to warn Europe and alarm the world. The secret treaties he
concluded there with most of the petty Princes of Germany, against the
Chief of the German Empire which not only entirely detached them from
their country and its legitimate Sovereign, but made their individual
interests hostile and totally opposite to that of the German
Commonwealth, transforming them also from independent Princes into
vassals of France, both directly increased has already gigantic power,
and indirectly encouraged him to extend it beyond what his most sanguine
expectation had induced him to hope. I do not make this assertion from a
mere supposition in consequence of ulterior occurrences. At a supper
with Madame Talleyrand last March, I heard her husband, in a gay,
unguarded, or perhaps premeditated moment, say, when mentioning his
proposed journey to Italy:
"I prepared myself to pass the Alps last October at Mentz. The first
ground-stone of the throne of Italy was, strange as it may seem, laid on
the banks of the Rhine: with such an extensive foundation, it must be
difficult to shake, and impossible to overturn it."
We were, in the whole, twenty-five persons at table when he spoke thus,
many of whom, he well knew, were intimately acquainted both with the
Austrian and Prussian Ambassadors, who by the bye, both on the next day
sent couriers to their respective Courts.
The French Revolution is neither seen in Germany in that dangerous light
which might naturally be expected from the sufferings in which it has
involved both Princes and subjects, nor are its future effects dreaded
from its past enormities. The cause of this impolitic and anti-patriotic
apathy is to be looked for in the palaces of Sovereigns, and not in the
dwellings of their people. There exists hardly a single German Prince
whose Ministers, courtiers and counsellors are not numbered, and have
long been notorious among the anti-social conspirators, the Illuminati:
most of them are knaves of abilities, who have usurped the easy direction
of ignorance, or forced themselves as guides on weakness or folly, which
bow to their charlatanism as if it was sublimity, and hail their
sophistry and imposture as inspiration.
Among Princes thus encompassed, the Elector of Bavaria must be allowed
the first place. A younger brother of a younger branch, and a colonel in
the service of Louis XVI., he neither acquired by education, nor
inherited from nature, any talent to reign, nor possessed any one quality
that fitted him for a higher situation than the head of a regiment or a
lady's drawing-room. He made himself justly suspected of a moral
corruption, as well as of a natural incapacity, when he announced his
approbation of the Revolution against his benefactor, the late King of
France, who, besides a regiment, had also given him a yearly pension of
one hundred thousand livres. Immediately after his unexpected accession
to the Electorate of Bavaria, he concluded a subsidiary treaty with your
country, and his troops were ordered to combat rebellion, under the
standard of Austrian loyalty. For some months it was believed that the
Elector wished by his conduct to obliterate the memory of the errors,
vices, and principles of the Duc de Deux-Ponts (his former title). But
placing all his confidence in a political adventurer and revolutionary
fanatic, Montgelas, without either consistency or firmness, without being
either bent upon information or anxious about popularity, he threw the
whole burden of State on the shoulders of this dangerous man, who soon
showed the world that his master, by his first treaties, intended only to
pocket your money without serving your cause or interest.
This Montgelas is, on account of his cunning and long standing among
them, worshipped by the gang of German Illuminati as an idol rather than
revered as an apostle. He is their Baal, before whom they hope to oblige
all nations upon earth to prostrate themselves as soon as infidelity has
entirely banished Christianity; for the Illuminati do not expect to reign
till the last Christian is buried under the rubbish of the last altar of
Christ. It is not the fault of Montgelas if such an event has not
already occurred in the Electorate of Bavaria.
Within six months after the Treaty of Lundville, Montgelas began in that
country his political and religious innovations. The nobility and the
clergy were equally attacked; the privileges of the former were invaded,
and the property of the latter confiscated; and had not his zeal carried
him too far, so as to alarm our new nobles, our new men of property, and
new Christians, it is very probable that atheism would have already,
without opposition, reared its head in the midst of Germany, and
proclaimed there the rights of man, and the code of liberty and equality.
The inhabitants of Bavaria are, as you know, all Roman Catholics, and the
most superstitious and ignorant Catholics of Germany. The step is but
short from superstition to infidelity; and ignorance has furnished in
France more sectaries of atheism than perversity. The Illuminati,
brothers and friends of Montgelas, have not been idle in that country.
Their writings have perverted those who had no opportunity to hear their
speeches, or to witness their example; and I am assured by Count von
Beust, who travelled in Bavaria last year, that their progress among the
lower classes is astonishing, considering the short period these
emissaries have laboured. To any one looking on the map of the
Continent, and acquainted with the spirit of our times, this impious
focus of illumination must be ominous.
Among the members of the foreign diplomatic corps, there exists not the
least doubt but that this Montgelas, as well as Bonaparte's Minister at
Munich, Otto, was acquainted with the treacherous part Mehde de la Touche
played against your Minister, Drake; and that it was planned between him
and Talleyrand as the surest means to break off all political connections
between your country and Bavaria. Mr. Drake was personally liked by the
Elector, and was not inattentive either to the plans and views of
Montgelas or to the intrigues of Otto. They were, therefore, both doubly
interested to remove such a troublesome witness.
M. de Montgelas is now a grand officer of Bonaparte's Legion of Honour,
and he is one of the few foreigners nominated the most worthy of such a
distinction. In France he would have been an acquisition either to the
factions of a Murat, of a Brissot, or of a Robespierre; and the Goddess
of Reason, as well as the God of the Theophilanthropists, might have been
sure of counting him among their adorers. At the clubs of the Jacobins
or Cordeliers, in the fraternal societies, or in a revolutionary
tribunal; in the Committee of Public Safety, or in the council chamber of
the Directory, he would equally have made himself notorious and been
equally in his place. A stoic sans-culotte under Du Clots, a stanch
republican under Robespierre, he would now have been the most pliant and
brilliant courtier of Bonaparte.
</div>
<h3>Tagged Sample Text</h3>
<div id="tagged_text"></div>
<script type="text/javascript">
// Note the \ at the end of the first line
var words = new Lexer().lex(document.getElementById("input_text").innerHTML);
var taggedWords = new POSTagger().tag(words);
var result = "";
for (i in taggedWords) {
var taggedWord = taggedWords[i];
var word = taggedWord[0];
var tag = taggedWord[1];
// Note the use of document.writeln instead of print
result += (word + " /" + tag + "<br/>");
}
document.getElementById("tagged_text").innerHTML = result;
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

@ -0,0 +1,17 @@
md=$(wildcard *.md)
mp_html=$(md:%.md=%.html)
all: $(mp_html)
%.html: %.md
pandoc --from markdown --to html --standalone $< -o $@
si22_syllabus.md: si22_syllabus.mediawiki
pandoc --from mediawiki --to markdown $< -o $@
SI25-NADD-Proposal.docx: SI25-NADD-Proposal.md
pandoc $< -o $@
%.svg: %.dot
dot $< -Tsvg -O

@ -0,0 +1,76 @@
<!DOCTYPE html>
<!-- saved from url=(0057)https://hub.xpub.nl/sandbot/~floorvanmeeuwen/15/TheCloud/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<link rel="stylesheet" type="text/css" href="./THE CLOUD_files/cloud.css">
<title>THE CLOUD</title>
</head>
<body>
<div id="all">
<img class="img1" src="./THE CLOUD_files/img1.png">
<img class="img2" src="./THE CLOUD_files/img2.png">
<img class="img3" src="./THE CLOUD_files/img3.png">
<div id="lefty"></div>
<div id="middle">
<pre><h1>T H E C L O U D</h1></pre>
<p>
<br>
<br>
<br>
</p>
<audio controls autoplay src="THE CLOUD_files/cloud.mp3"></audio>
<p>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
<p>You want to know what time it is. You take a glance at your smartphone and see you have gotten a message.</p>
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
<p>You check Facebook but it seems not working. Is it down for everyone or just me?</p>
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
<p>You hear the sound of an incoming e-mail. Your are drawn to your computer and your mailing program. It is an notification of We Transfer of this file that will get expired.</p>
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
<p>You still don't know what time it is. You remember this quick fact on Bored Panda that "what is the time" was once one of the most googled questions</p>
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
<p>On your banking app you notice a bank statement of 70 euro's from an unknown company.</p>
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
<p>When you type this name in your favourite search engine you realise it's the payment of your webhosting service. It got more expensive this year, again.</p>
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
<p>Youtube stopped playing. When you look at the screen it asks you if you are still listening.</p>
<p class="shift">See it as THE CLOUD. Let THE CLOUD pass by.</p>
</div>
</div>
</body></html>

@ -0,0 +1,123 @@
@font-face {
font-family: Chap;
src: url(Chapaza.ttf);
}
@font-face {
font-family: Aer;
src: url(Aerolite.otf);
}
p{
font-family: Chap;
color:#8023FF;
text-align:center;
}
/*/.shift{
animation: mymove 25s infinite;
}
@keyframes mymove {
0% { color:#0E02FF; }
30% { color:RosyBrown; }
50% { color:thistle; }
70% { color:RosyBrown; }
100%{ color:#0E02FF; }
}/*/
h1{
font-family:Aer;
font-size:50px;
color:silver;
text-align:center;
}
audio{
text-align:center;
width:100%;
}
body{
background:WhiteSmoke;
}
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
#all{
width: 100%;
height: 100%;
}
}
#lefty{
width:15%;
height:100%;
float:left;
text-align:justify;
position:relative;
}
#middle{
width:100%;
height:100%;
float:left;
padding-left:30%;
padding-right:30%;
text-align:justify;
position:relative;
z-index: 1;
}
@keyframes img1 {
0% { left:750px; top:500px;}
25% { left:400px; top:430px;}
50% { left:400px; top:530px;}
75% { left:300px; top:410px;}
100% { left:750px; top:500px;}
}
.img1{
position: absolute;
z-index: 2;
width:400px;
animation-name: img1;
animation-duration: 80s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes img2 {
0% { left:350px; top:300px;}
25% { left:400px; top:330px;}
50% { left:400px; top:130px;}
75% { left:300px; top:120px;}
100% { left:350px; top:300px;}
}
.img2{
position: absolute;
z-index: 2;
width:400px;
animation-name: img2;
animation-duration: 100s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes img3 {
0% { left:500px; top:300px;}
25% { left:470px; top:340px;}
50% { left:530px; top:380px;}
75% { left:436px; top:340px;}
100% { left:500px; top:300px;}
}
.img3{
position: absolute;
z-index: 2;
width:400px;
animation-name: img3;
animation-duration: 90s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}

@ -0,0 +1,281 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="dcterms.date" content="2024-10-14" />
<title>SI#25 Notes</title>
<style>
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">SI#25 Notes</h1>
<p class="date">14 Oct 2024</p>
</header>
<h2 id="radio-implicancies">Radio Implicancies</h2>
<p>Radio Implicancies is the name of a series of special issues led by
<a href="https://snelting.domainepublic.net/">Femke Snelting</a> in
three consecutive years with Radio/Streaming as an output format.
Participants were encouraged to research and investigate how collective
work is shaped by technical systems through collective making and
listening within their own (small) networks.</p>
<blockquote>
<p>Radio Implicancies is about practicing interdependencies. About how
to stay with the complex entanglements between the personal, the
economical, the political and the computational. About thinking, using
and making technology with mutual relations in mind.</p>
</blockquote>
<p>Source: <a
href="https://pzwiki.wdka.nl/mediadesign/Radio_Implicancies">Radio
Implicancies (pzi wiki)</a></p>
<h2 id="the-cloud">The Cloud</h2>
<p><em>Floor van Meeuwen</em></p>
<p>During second edition of Radio Implicancies, Special Issue 15, Floor
van Meeuwen created The Cloud, an audio piece in the form of a
self-guided meditation. The piece has a satirical tone, the central
refrain: “see it as the cloud, let the cloud pass by”, cleverly makes
use of the dual sense of cloud as object of meditative release, and as
portal to cloud services. The piece works through a series of everyday
examples, starting from checking the time on a smart phone, that lead to
a spiral of (unintended) engagments and ultimately anxieties created by
the many notifications the author encounters when interacting with her
phone.</p>
<p>The piece was (initially) produced as a stand alone HTML page, and
was later used as part of the 7th collective broadcast, called the
cookbook, which featured a booklet that accompanied the broadcast, and
was published online with a “page-turner” code.</p>
<audio src="THE%20CLOUD_files/cloud.mp3#t=02:15,04:20" controls>
</audio>
<p><a href="https://issue.xpub.nl/15/">Special Issue #15: Radio
Implicancies (2021)</a></p>
<p>from <a href="https://hub.xpub.nl/sandbot/SI15/Radio_7/">Radio
Implicancies 15.7: Cookbook</a></p>
<p>Also see Floors <a
href="https://hub.xpub.nl/sandbot/~floorvanmeeuwen/15/TheCloud/">single
page version</a> and <a
href="https://pzwiki.wdka.nl/mediadesign/User:Flo/15">research
notes</a>.</p>
<p><a href="THE%20CLOUD.html">Single page version (local)</a></p>
<h2 id="i-am-sitting-in-a-room">I am sitting in a room</h2>
<p><em>Alvin Lucier</em> <img src="lucier-performance.png"
alt="performing the piece in 2021" /></p>
<audio src="alvin_lucier-i_am_sitting_in_a_room.mp3" controls>
</audio>
<blockquote>
<p>«I Am Sitting in a Room: for voice on tape»</p>
<p>Luciers classic «I Am Sitting in a Room» is a poetic exercise in
concentration. It focuses on a notoriously suppressed phenomenon:
spatial resonance being too self evident to perceive. While Luciers
spoken text is heard live through the rooms loudspeakers, he repeatedly
records the sound that stimulates the rooms resonant frequencies until
the text becomes indecipherable. Instead of semantics, the musical
qualities of language surface. The spoken text becomes a libretto,
score, and performance manual in one.</p>
</blockquote>
<p>text source: <a
href="http://www.mediaartnet.org/works/i-am-sitting-in-a-room/">mediaartnet</a></p>
<h2 id="proto-call-i-am-sitting-in-a-jitsi-room">Proto-call (I am
sitting in a jitsi room)</h2>
<audio style="width: 100%" controls src="https://issue.xpub.nl/12/archive_12.1.3.mp3#t=24:50,29:00">
</audio>
<p><em>Mark van den Heuvel and Tisa Neža Herlec</em></p>
<p>Made during the first edition (Special Issue 12), during the initial
COVID lockdown, the work started with a collective writing exercise on
an etherpad, an interleaved conversation in the form of a cadavre
exquis, one startins a sentence and the other continuing the thought.
The two later came together in a jitsi call to record a re-speaking the
lines that each had written, using etherpads feature differentiating
the writing of each author with color, but with the decision to to flip
the script and read each others lines rather than their own. The result
is full of both intimacy, as each imagines inhabiting the others
thoughts, and awkwardness as they often struggle to synchronize with
their collective script.</p>
<p>Like Alvin Luciers <em>I am sitting in a room</em>, the piece
creates a soundscape that in its own way resonates with the particular
affordances of the hybrid combination of virtual spaces created by the
writing pad, and by the audio recording.</p>
<h2 id="example-radio-implicancies-the-jingle-board-parliament">Example:
Radio Implicancies: The Jingle Board Parliament</h2>
<p>For the final edition, <a href="https://issue.xpub.nl/18/">Special
Issue 18</a>, the fourth broadcast took the form of <em>The Jingle Board
Parliament</em>, and which was <a
href="https://issue.xpub.nl/18/04/">published as a sound board</a>.</p>
<p><img src="etherpad-jingle.png" /></p>
<p>The broadcast made use of an <a
href="https://pad.xpub.nl/p/SI18_four">etherpad</a> to organize. On the
pad they invited their fellow radiomakers to contribute not a single
piece, but fragments to be incorporated into a soundboard in the form of
a parliament chart (such as the kind that show the relative
representation of different political parties in an elected
parliament).</p>
<blockquote>
<p>Our take on this idea of parliament is rooted in the influence that
elements of pop-culture have on politics, and more precisely on shaping
the characters and the voices that then inhabit a parliament. While much
of the politics happens outside of official institutional buildings, yet
the idea of the parliament remains a pure symbol of the place in which
democracy is being performed. This is to give you an intentional
framework that we propose as caretakers, but of course we invite you to
stretch and deconstruct this idea of “The parliament”.<br />
<strong>Also we invite you to not overthink about politically engaged
and great contributions, after all everything is political!
;)</strong></p>
</blockquote>
<p>Note how in this case the sound board was published, rather than
(just) a recording of the weeks broadcast. This was a pattern used in
many weeks, where different formats and structures were explored for
preparing each weeks broadcast, and these systems shaped the webpages
that were published for each week. The etherpads however were not
published, but is suggestive of some useful liner notes to an eventual
publication.</p>
</body>
</html>

@ -0,0 +1,72 @@
---
title: SI#25 Notes
date: 14 Oct 2024
---
## Radio Implicancies
Radio Implicancies is the name of a series of special issues led by [Femke Snelting](https://snelting.domainepublic.net/) in three consecutive years with Radio/Streaming as an output format. Participants were encouraged to research and investigate how collective work is shaped by technical systems through collective making and listening within their own (small) networks.
> Radio Implicancies is about practicing interdependencies. About how to stay with the complex entanglements between the personal, the economical, the political and the computational. About thinking, using and making technology with mutual relations in mind.
Source: [Radio Implicancies (pzi wiki)](https://pzwiki.wdka.nl/mediadesign/Radio_Implicancies)
## The Cloud
*Floor van Meeuwen*
During second edition of Radio Implicancies, Special Issue 15, Floor van Meeuwen created The Cloud, an audio piece in the form of a self-guided meditation. The piece has a satirical tone, the central refrain: "see it as the cloud, let the cloud pass by", cleverly makes use of the dual sense of cloud as object of meditative release, and as portal to cloud services. The piece works through a series of everyday examples, starting from checking the time on a smart phone, that lead to a spiral of (unintended) engagments and ultimately anxieties created by the many notifications the author encounters when interacting with her phone.
The piece was (initially) produced as a stand alone HTML page, and was later used as part of the 7th collective broadcast, called the cookbook, which featured a booklet that accompanied the broadcast, and was published online with a "page-turner" code.
<audio src="THE%20CLOUD_files/cloud.mp3#t=02:15,04:20" controls></audio>
[Special Issue #15: Radio Implicancies (2021)](https://issue.xpub.nl/15/)
from [Radio Implicancies 15.7: Cookbook](https://hub.xpub.nl/sandbot/SI15/Radio_7/)
Also see Floor's [single page version](https://hub.xpub.nl/sandbot/~floorvanmeeuwen/15/TheCloud/) and [research notes](https://pzwiki.wdka.nl/mediadesign/User:Flo/15).
[Single page version (local)](THE%20CLOUD.html)
## I am sitting in a room
*Alvin Lucier*
![performing the piece in 2021](lucier-performance.png)
<audio src="alvin_lucier-i_am_sitting_in_a_room.mp3" controls></audio>
> «I Am Sitting in a Room: for voice on tape»
>
> Luciers classic «I Am Sitting in a Room» is a poetic exercise in concentration. It focuses on a notoriously suppressed phenomenon: spatial resonance being too self evident to perceive. While Luciers spoken text is heard live through the rooms loudspeakers, he repeatedly records the sound that stimulates the rooms resonant frequencies until the text becomes indecipherable. Instead of semantics, the musical qualities of language surface. The spoken text becomes a libretto, score, and performance manual in one.
text source: [mediaartnet](http://www.mediaartnet.org/works/i-am-sitting-in-a-room/)
## Proto-call (I am sitting in a jitsi room)
<audio style="width: 100%" controls src="https://issue.xpub.nl/12/archive_12.1.3.mp3#t=24:50,29:00"></audio>
*Mark van den Heuvel and Tisa Neža Herlec*
Made during the first edition (Special Issue 12), during the initial COVID lockdown, the work started with a collective writing exercise on an etherpad, an interleaved conversation in the form of a cadavre exquis, one startins a sentence and the other continuing the thought. The two later came together in a jitsi call to record a re-speaking the lines that each had written, using etherpad's feature differentiating the writing of each author with color, but with the decision to to flip the script and read each others lines rather than their own. The result is full of both intimacy, as each imagines inhabiting the others thoughts, and awkwardness as they often struggle to synchronize with their collective script.
Like Alvin Lucier's *I am sitting in a room*, the piece creates a soundscape that in its own way resonates with the particular affordances of the hybrid combination of virtual spaces created by the writing pad, and by the audio recording.
## Radio Implicancies: The Jingle Board Parliament
For the final edition, [Special Issue 18](https://issue.xpub.nl/18/), the fourth broadcast took the form of *The Jingle Board Parliament*, and which was [published as a sound board](https://issue.xpub.nl/18/04/).
![](etherpad-jingle.png)
The broadcast made use of an [etherpad](https://pad.xpub.nl/p/SI18_four) to organize. On the pad they invited their fellow radiomakers to contribute not a single piece, but fragments to be incorporated into a soundboard in the form of a parliament chart (such as the kind that show the relative representation of different political parties in an elected parliament).
> Our take on this idea of parliament is rooted in the influence that elements of pop-culture have on politics, and more precisely on shaping the characters and the voices that then inhabit a parliament. While much of the politics happens outside of official institutional buildings, yet the idea of the parliament remains a pure symbol of the place in which democracy is being performed. This is to give you an intentional framework that we propose as caretakers, but of course we invite you to stretch and deconstruct this idea of "The parliament".
> **Also we invite you to not overthink about politically engaged and great contributions, after all everything is political! ;)**
Note how in this case the sound board was published, rather than (just) a recording of the weeks broadcast. This was a pattern used in many weeks, where different formats and structures were explored for preparing each weeks broadcast, and these systems shaped the webpages that were published for each week. The etherpads however were not published, but is suggestive of some useful liner notes to an eventual publication.

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Untitled</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>A remake (2024) of <a href="https://webaudio.prototyping.bbc.co.uk/wobbulator/">this artcle on the wobbulator from the BBC Radiophonic workshop</a>.</p>
<input type="checkbox" id="power">
<input type="range" id="modfreq" min="0" max="50" value="10" step="1">
<input type="range" id="moddepth" min="0" max="200" value="100" step="1">
<input type="range" id="freq" min="50" max="5000" value="440" step="1">
<input type="range" id="vol" min="0" max="1" value="1" step="0.01">
<select id="waveform">
<option>sine</option>
<option>square</option>
<option>sawtooth</option>
</select>
<script src="wobbulator.js"></script>
</body>
</html>

@ -0,0 +1,50 @@
let ac = new AudioContext();
// There are four main audio nodes in our webaudio API patchbay
// The primary oscillator + the modulating oscillator.
// The amplitude of the modulation oscillator (its 'depth') is modified by passing the output through a GainNode.
// Another GainNode controls the main volume.
let oscillator = ac.createOscillator();
let modulator = ac.createOscillator();
let modulation_gain = ac.createGain();
let main_gain = ac.createGain();
// Make the patches!
modulator.connect(modulation_gain);
modulation_gain.connect(oscillator.frequency);
oscillator.connect(main_gain);
main_gain.connect(ac.destination);
// Once an OscillatorNode is stopped it cannot be restarted.
// We turn both oscillators on from the beginning,
// and achieve the on/off effect by modifying the main gain.
oscillator.start(0);
modulator.start(0);
// inputs
let freq_input = document.querySelector("#freq");
let modfreq_input = document.querySelector("#modfreq")
let moddepth_input = document.querySelector("#moddepth")
let vol_input = document.querySelector("#vol");
let power_checkbox = document.querySelector("#power");
let waveform_select = document.querySelector("#waveform");
oscillator.frequency.value = freq_input.value;
modulation_gain.gain.value = moddepth_input.value;
modulator.frequency.value = modfreq_input.value;
main_gain.gain.value = power_checkbox.checked ? vol_input.value : 0;
freq_input.addEventListener("input", e => { oscillator.frequency.value = freq_input.value; });
power_checkbox.addEventListener("change", e => {
main_gain.gain.value = power_checkbox.checked ? vol_input.value : 0;
// check if context is in suspended state (autoplay policy)
if (ac.state === "suspended") { ac.resume(); }
});
modfreq_input.addEventListener("input", e => { modulator.frequency.value = modfreq_input.value });
moddepth_input.addEventListener("input", e => { modulation_gain.gain.value = moddepth_input.value });
vol_input.addEventListener("input", e => { main_gain.gain.value = power_checkbox.checked ? vol_input.value : 0 });
oscillator.type = waveform_select.value;
waveform_select.addEventListener("input", e => {
oscillator.type = waveform_select.value;
});
Loading…
Cancel
Save