Compare commits

...

3 Commits

Author SHA1 Message Date
km0 fb5e75eea8 04 tree 1 year ago
km0 81d50ec1a7 03 pair 1 year ago
km0 be72324af3 02 openings 1 year ago

@ -60,8 +60,8 @@
<li>
<a href="pop">Politics of Participation</a>
</li>
<li> <a href="rs">Representation Specs</a></li>
<li> <a href="hw">Hello Worlding</a></li>
<li><a href="rs">Representation Specs</a></li>
<li><a href="hw">Hello Worlding</a></li>
</ul>
</section>

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 - Opening</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1>
doc
doc
doc
</h1>
<div class="sub">
documenting code documentation
</div>
<div class="info">
hello! welcome
this is an archive to navigate through different ways of making code documentation
navigate in the sense of learning how to find things, like
there is no clear path / a practice to learn / shared practice personal practice
</div>
<div class="attempt">
second attempt focuses on:
openings: the first few sentences of documentation pages
like in the game of chess, opening as statement
</div>
</header>
<main>
<div class="opening">
<p>VueUse is a collection of utility functions based on Composition API. We assume you are already familiar with the basic ideas of Composition API before you continue.</p>
<a href="https://vueuse.org/guide/">VueUse</a>
</div>
<div class="opening">
<p>Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects.</p>
<a href="https://vitejs.dev/guide/">Vite</a>
</div>
<div class="opening">
<p>
werkzeug German noun: “tool”. Etymology: werk (“work”), zeug (“stuff”). Werkzeug is a comprehensive WSGI web application library. It began as a simple collection of various utilities for WSGI applications and has become one of the most advanced WSGI utility libraries.</p>
<a href="https://werkzeug.palletsprojects.com/en/2.2.x/">Werkzeug</a>
</div>
<div class="opening">
<p>Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.</p>
<a href="https://jinja.palletsprojects.com/en/3.1.x/intro/">Jinja</a>
</div>
<div class="opening">
<p>Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.</p>
<a href="https://palletsprojects.com/p/flask/">Flak</a>
</div>
<div class="opening">
<p>The Screenless Office is an interface for everyday (digital) life without a screen. It is an artistic operating system.</p>
<a href="https://gitlab.com/bhowell/the-screenless-office">The screnless office</a>
</div>
<div class="opening">
<p>The Padliography is a tool to keep track of our pads. It is built to interact with the MediaWiki API, and it uses XPUB & Lens-Based Wikis pages as archive.</p>
<a href="https://git.xpub.nl/kamo/pad-bis">pad-bis</a>
</div>
<div class="opening">
<p>A small app for collecting drawings in real time. Runs on a small express server that connects sources (where to draw) and destinations (where to display) via websockets.</p>
<a href="https://git.xpub.nl/kamo/drw">drw</a>
</div>
<div class="opening">
<p>Emmet is a web-developers toolkit that can greatly improve your HTML & CSS workflow</p>
<a href="https://docs.emmet.io/">Emmet</a>
</div>
</main>
</body>
</html>

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03 - Pair</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1>doc doc doc</h1>
<div class="sub">documenting code documentation</div>
<div class="info">hello! welcome. this is an archive to navigate trough documentation practices</div>
<div class="attempt">pair programming and pair documenting</div>
</header>
<section>
<div class="prompt">
<p>
The practice of pair programming involves two developers coding together on the same machine, with distinct roles. The <em>driver</em> writes the actual code, while the <em>navigator</em> reviews each entry along the way.
Roles are often switched.
Developers with similar or different experience can collaborate in pair programming, with benefits for both parts.
</p>
<p>
Navigating through documentation can be difficult.
Could the concept of pair programming be applied to documentation?
</p>
<p>pair documentation writing: one writes and the other provides perspective, such as reviewing if there are parts that are not clear</p>
<p>pair documentation reading: one read and the other ??? </p>
<p>experiments with pair doc writing together with chae for the <a href="https://git.xpub.nl/manetta/flask-example/src/branch/documentation">flask example repo</a>, that led to a more welcoming and vernacular way of writing</p>
<p>what could it mean to read documentation in pair?</p>
</div>
<div class="prompt">
<p>Documentation is not just for beginners, is a code companion. One never stops reading. Both newcommers and experienced developers alike read documentation, that meets them in different moment of their programmer lives, from the <em>hello world</em> to the <em>how to uninstall</em></p>
<p>when pairing reading make sense? which kind of situations?</p>
<p>im struggling because all of these things are activities and not objects and this cause me disconfort </p>
<ul class="props">
<li>one read, the other document the reading process: keeping track of the screen walk, annotating resources, drating a map of where knowledge has been found</li>
</ul>
</div>
</section>
</body>
</html>

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 - Tree</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1>doc doc doc</h1>
<div class="sub">documenting code documentation</div>
<div class="info">
hello! welcome. this is an archive to navigate trough documentation practices
</div>
<div class="attempt">
<p>
The path through documentation resources in the making of a project could be represented as a tree structure, where the root is the project idea or need and then branches all the explored direction and lateral resources.
</p>
<p>
Tree structures recall hierarchy, because of the different structural positions of branches and leaves. However what I'm interested here is the temporality of the tree. There is a starting point, a root, and then different tryouts, with dead ends, ramifications, different experiments.
</p>
<p>
An example is <a href="https://github.com/mbbill/undotree">undo-tree</a> where instead of the linear approach of <code>ctrl-z</code>, a fluorishing history of attempts is preserved.
</p>
</div>
</header>
<section>
<p>
So the plan is: keep track of your path. Start from something (could be an idea for a project, a need for understanding, the writing of some documentation) and then keep track of the various resources encountered through time in a tree-like structure.
</p>
<p>
This excercise seems flexible enough to host different approaches and materials. Could be an history of navigation through hyperlinks, but also contain reflections and snapshots of how the initial idea changes during time. Ideally every node of the tree could be a potential entry point / backdoor to reflect on documenting practices.
</p>
<p>
It could be tried in alone or in group, with one or many trees. To have a less linear and more entangled structure. It could host practices such as the one of <em>03 - Pair</em>, where one driver go through and the navigator map into the tree.
</p>
</section>
<ul class="questions">
<li>how to think about the tree as a writing machine?</li>
<li>how to store information in a way that is not too intrusive for the process?</li>
<li>how to represent the tree?</li>
</ul>
<section>
<h2>Prototype
</h2>
<div class="root">
<h3>
Comparative Iceberg Studies
</h3>
<p>
Write a image scraper to download a bunch of picture from the iceberg meme template (that maps facts about a topic from the tip, common knowledge, to the bottom, esoteric, misterious, unknown details). Group the image and align all of them. Call people within the field of each topic and make them comment the result. Edit and bound.
</p>
</div>
</section>
</body>
</html>

@ -26,6 +26,8 @@
there is no clear path / a practice to learn / shared practice personal practice
</div>
</header>
@ -51,10 +53,10 @@
<ul>
<li> - to infiniltrate technical world</li>
<li> - inject contexts into code</li>
<li> - entry points for people to participate and learn in coding</li>
<li> - entry points to know and participate in these contexts</li>
<li> to infiniltrate technical world</li>
<li> inject care into code</li>
<li> entry points for people to participate and learn in coding</li>
<li> entry points to know and participate in these contexts</li>
</ul>
</div>
@ -66,6 +68,12 @@
<ul>
<li><a href="01">01 - Pathways</a></li>
<li><a href="02">02 - Openings</a></li>
1.1 pathway with thesis
2.1 openings v2 - different ways to intend openings (could be different prototypes)
3. reading ? pairs reading?
</ul>
</section>

@ -67,3 +67,22 @@ h1 {
.entry > * {
flex: 1;
}
.opening {
display: inline-block;
max-width: 80ch;
margin-block: 16px;
padding: 8px;
font-size: 1.25rem;
color: #344e41;
border: 2px solid #84a98c;
border-radius: 16px;
}
.opening > p {
margin: 0;
}
.opening > a {
color: #588157;
}

Loading…
Cancel
Save