|
|
|
|
|
<!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>
|
|
|
<ul>
|
|
|
<li>assumes a certain kind of reader</li>
|
|
|
<li>address where to link the necessary resources</li>
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
<ul>
|
|
|
<li>refer to a particular language context (in this case french), a similar choice was made for vue, by the same developer</li>
|
|
|
<li>quick, faster and leaner development, compared to what?</li>
|
|
|
<li>lean from lean manufacturing?</li>
|
|
|
<li>for "modern" project. what is modern here?</li>
|
|
|
</ul>
|
|
|
|
|
|
<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>
|
|
|
<ul>
|
|
|
<li>refer to a particular language context (in this case german)</li>
|
|
|
<li>it began as a simple collection: acknowledge the origins of the project</li>
|
|
|
<li>repeat WSGI three times without explaining, implying a certain kind of technical knowledge</li>
|
|
|
<li>time composite documentation: last sentence has been added later on.</li>
|
|
|
</ul>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<ul>
|
|
|
<li>fast, expressive, extensible</li>
|
|
|
<li>three features oriented to different needs</li>
|
|
|
<li>the figure of the engine</li>
|
|
|
<li>refer to the python community</li>
|
|
|
</ul>
|
|
|
<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>
|
|
|
|
|
|
<ul>
|
|
|
<li>focus on accessibility and scale</li>
|
|
|
<li>time composite documentation: last sentence has been added later on.</li>
|
|
|
<li>acknowledge the origin of the project</li>
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<ul>
|
|
|
<li>set the context: everyday life + artistic practice</li>
|
|
|
<li>digital life deeply connected with the idea of office and workspace</li>
|
|
|
<li>artistic operating system could sound like a disclaimer</li>
|
|
|
</ul>
|
|
|
|
|
|
<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 Wiki’s pages as archive.</p>
|
|
|
<a href="https://git.xpub.nl/kamo/pad-bis">pad-bis</a>
|
|
|
</div>
|
|
|
|
|
|
<ul>
|
|
|
<li>address a problem: to keep track of otherwise scattered pads</li>
|
|
|
<li>acknowledge external actors, such as the mediawiki api</li>
|
|
|
<li>refer to a specific context: people orbiting around xpub and lens based wiki, using etherpad</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<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>
|
|
|
<ul>
|
|
|
<li>small app small server, probably for small drawings?</li>
|
|
|
<li>open to plurality of sources and destinations</li>
|
|
|
<li>architecture overview (sources and destinations connected through an express server via websockets)</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="opening">
|
|
|
<p>Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow</p>
|
|
|
<a href="https://docs.emmet.io/">Emmet</a>
|
|
|
</div>
|
|
|
<ul>
|
|
|
<li>address a specific public of web-developers</li>
|
|
|
<li>to improve workflow, what does improve mean ? faster? less keystrokes?</li>
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="notes">
|
|
|
<p>Every keyword is a branch. Zettelkasten vibes here.</p>
|
|
|
<p>Also a small confession: I'd prefer to exhibit something non digital for grad show.</p>
|
|
|
<p>A scultureeeeeeeee a data sculpture a 3d sculpture of how openings are aligned in 3d space. (pffffffff) Like a 3d diataxis - political compass. Ahaha.</p>
|
|
|
<p>Draw an image draw an image</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<section>
|
|
|
<h2>Hello worlding</h2>
|
|
|
<p>
|
|
|
An opening is a declaration of intents, it manifests intentions. These intentions are glued together in the smallest context possible of a sentence. They are like a trailer for a movie, or the thumbnail of a youtube video. Often exagerate, click-bait, ideological. How and why these different facets come together? They are a visibile traces of choices made during development, choices that sometimes are made evident within the documentation, and sometimes remain unanswered.
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
From the perspective of someone writing code and therefore code documentation, I'm interested in exploring these openings both from a stylistic and technical point of view. Leveraging on form, they are a perfect device to set the stage for code: a way to illuminate code from a particular angle, revealing some aspects and conceiling other ones. From a technical perspective they attach onto already existent systems of meaning, such as particular technologies, a programming languages, frameworks, or coding paradigms. They trigger mutual influences between code and context, like a telescope that can be used from both sides: from the code to the bigger context, and from the bigger context to the code. A way to encode context in the very first lines of documentation.
|
|
|
</p>
|
|
|
<p>
|
|
|
As someone that reads code documentation, I'm interested in making these openings more eloquent. Or even just having some tool or practice to decode them. Inflating the opening, even in directions that differ from the rest of the documentation. To see connections and genealogies, relations and contradictions in broader ecosystems.
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
Two keywords: encode and decode [context].
|
|
|
|
|
|
These could also be a set of different practices. With different tempo.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
Chae asked: so it's a text based project?
|
|
|
</p>
|
|
|
|
|
|
<p>Opening as maneuverable object.</p>
|
|
|
|
|
|
<p>
|
|
|
Something maneuverable for who writes.
|
|
|
Something maneuverable for who reads.
|
|
|
Maneuverable meaning?
|
|
|
Meaning interactive?
|
|
|
Meaning small changes with visible effects.
|
|
|
Moire pattern
|
|
|
Shift in perspective
|
|
|
</p>
|
|
|
|
|
|
|
|
|
<div class="permutations">
|
|
|
|
|
|
|
|
|
<div class="opening original">
|
|
|
<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/">Flask</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="opening">
|
|
|
<p>Flask is a ___________ WSGI web application framework. It is designed to ____ _______ _______ _____ ___ ____, with the ability to ________ to _______ applications. It began as a ______ _______ ______ ________ ___ _____ and has become ___ __ ___ ____ _______ ______ web application frameworks.</p>
|
|
|
<a href="https://palletsprojects.com/p/flask/">Flask</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="opening">
|
|
|
<p>_____ __ _ lightweight ____ ___ ___________ _________. __ __ ________ __ make getting started quick and easy, ____ ___ _______ __ scale up to complex ____________. __ _____ __ _ simple wrapper around Werkzeug and Jinja ___ ___ ______ one of the most popular Python ___ ___________ __________.</p>
|
|
|
<a href="https://palletsprojects.com/p/flask/">Flask</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="opening">
|
|
|
<p>_____ is _ ___________ ____ ___ ___________ _________. __ is designed to make getting started _____ ___ ____, ____ ___ _______ __ scale up __ _______ ____________. __ began __ _ ______ _______ ______ ________ ___ _____ ___ has become ___ __ ___ ____ _______ ______ ___ ___________ __________.</p>
|
|
|
<a href="https://palletsprojects.com/p/flask/">Flask</a>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|