You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
4.5 KiB
HTML
169 lines
4.5 KiB
HTML
1 year ago
|
<!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="UTF-8" />
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
<title>Hello Worlding</title>
|
||
|
|
||
|
<style>
|
||
|
:root {
|
||
|
--color: #333;
|
||
|
--bg: #e5e5e5;
|
||
|
--accent: #64b2ff;
|
||
|
--text: 21px;
|
||
|
--line-height: 1.4;
|
||
|
--content-width: 1440px;
|
||
|
--app-margin: 42px;
|
||
|
}
|
||
|
|
||
|
html,
|
||
|
body {
|
||
|
background-color: var(--bg);
|
||
|
color: var(--color);
|
||
|
font-family: sans-serif;
|
||
|
font-size: 24px;
|
||
|
line-height: 1.4;
|
||
|
}
|
||
|
|
||
|
main {
|
||
|
position: relative;
|
||
|
z-index: 100;
|
||
|
}
|
||
|
|
||
|
main > * {
|
||
|
max-width: 60ch;
|
||
|
}
|
||
|
|
||
|
h1 {
|
||
|
margin-block: 0;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
color: currentColor;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
a:hover {
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
|
||
|
.links {
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
.links > * {
|
||
|
margin-bottom: 0.5em;
|
||
|
vertical-align: middle;
|
||
|
}
|
||
|
|
||
|
.links > :before {
|
||
|
background-color: var(--accent);
|
||
|
content: "";
|
||
|
display: inline-block;
|
||
|
height: 1em;
|
||
|
vertical-align: middle;
|
||
|
margin-right: 0.25em;
|
||
|
width: 1em;
|
||
|
}
|
||
|
|
||
|
.back {
|
||
|
opacity: 0.5;
|
||
|
}
|
||
|
|
||
|
#trolley {
|
||
|
position: fixed;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 400px;
|
||
|
z-index: 100;
|
||
|
pointer-events: none;
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<main>
|
||
|
<header>
|
||
|
<h1>Hello Worlding</h1>
|
||
|
<div class="author">Francesco Luzzana, km0, tofu, maya, sumo, etc.</div>
|
||
|
<a href="https://projects.xpub.nl" class="back">home</a>
|
||
|
</header>
|
||
|
|
||
|
<div class="description">
|
||
|
<p>
|
||
|
Code documentation is a rich and diverse practice, with a variety of forms and
|
||
|
formats suited to specific occasions and needs. However, these different
|
||
|
publishing surfaces are affected by several problems, such as a general
|
||
|
unappealing and unwelcoming tone, dense and gendered language, and a massive
|
||
|
amount of energy, resources and time required for maintenance. These critical
|
||
|
aspects highlight how problematic the supposed "nature" of code documentation
|
||
|
is. A nature that instead of creating entry points, essentially gatekeeps access
|
||
|
to programming knowledge.
|
||
|
</p>
|
||
|
<p>
|
||
|
There is another way in, however. Because of its proximity to the code and its
|
||
|
ongoing relationships with programmers, code documentation can be a backdoor
|
||
|
into communities gathered around coding, to open up more entry points from
|
||
|
within. Code documentation can be used to orient software in the world,
|
||
|
operating at different scales and in several ways, working with both technical
|
||
|
and social frameworks. It can retrace genealogies to activate exhausted
|
||
|
technical terms. It can influence technical implementations by representing the
|
||
|
needs of marginalised minorities. It can be a moment of collective learning,
|
||
|
challenging traditional reproduction of knowledge, and creating safe spaces for
|
||
|
anyone to participate to code.
|
||
|
</p>
|
||
|
<p>
|
||
|
Hello Worlding is a network of pathways to walk through different ways to read,
|
||
|
write and think with code documentation. Each pathway explores a particular
|
||
|
approach or method to use documentation to create worlds around code:
|
||
|
questioning entry points and opening backdoors to the making of software.
|
||
|
</p>
|
||
|
</div>
|
||
|
|
||
|
<div class="sumo">
|
||
|
Francesco Luzzana, km0, sumo, tofu, maya, and all the other aliases develop custom
|
||
|
pieces of software that address digital complexity, often with a visual and
|
||
|
performative output. They like to work on collaborative projects as a way of facing
|
||
|
contemporary issues from multiple perspectives.
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
<h2>Work</h2>
|
||
|
<ul class="links">
|
||
|
<li>
|
||
|
<a href="https://helloworlding.com/">helloworlding.com</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a href="https://gitlab.com/km0/hello-worlding">git</a>
|
||
|
</li>
|
||
|
</ul>
|
||
|
|
||
|
<h2>Pubblication</h2>
|
||
|
<ul class="links">
|
||
|
<li>
|
||
|
<a href="https://hub.xpub.nl/soupboat/~kamo/thesis/"
|
||
|
>Hello Worlding - Code documentation as entry point / backdoor to
|
||
|
programming practices</a
|
||
|
>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</main>
|
||
|
|
||
|
<img
|
||
|
id="trolley"
|
||
|
src="trolley.png"
|
||
|
alt="the infamous trolley problem with the caption: would you rather develop tools for yourself or for others?"
|
||
|
/>
|
||
|
|
||
|
<script>
|
||
|
const trolley = document.querySelector("#trolley");
|
||
|
|
||
|
document.addEventListener("mousemove", (e) => {
|
||
|
console.log(e);
|
||
|
console.log(document);
|
||
|
trolley.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
|
||
|
});
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|