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

<!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>