Add hello worlding
parent
e5ae56b8af
commit
6501360285
@ -0,0 +1,168 @@
|
||||
<!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>
|
||||
Loading…
Reference in New Issue