init
commit
61ad59c1ab
@ -0,0 +1,46 @@
|
||||
{
|
||||
"entries": [
|
||||
{
|
||||
"title": "exex",
|
||||
"description": "collaborative writing for branching documentation",
|
||||
"tags": "tool, writing, collaborative",
|
||||
"gradient": "tool practice tool practice tool tool"
|
||||
},
|
||||
{
|
||||
"title": "pair documenting",
|
||||
"description": "like pair programming, but for documentation",
|
||||
"tags": "practice, writing, collaborative",
|
||||
"gradient": "practice practice practice"
|
||||
},
|
||||
{
|
||||
"title": "1dl",
|
||||
"description": "1dimension ~ flat markup language ",
|
||||
"tags": "tool, markup, writing",
|
||||
"gradient": "tool practice tool tool practice"
|
||||
},
|
||||
{
|
||||
"title": "textoscope",
|
||||
"description": "adjust text intensity",
|
||||
"tags": "tool, reading, writing",
|
||||
"gradient": "tool tool platform practice practice"
|
||||
},
|
||||
{
|
||||
"title": "read out loud",
|
||||
"description": "voicing code documentation",
|
||||
"tags": "reading, audio",
|
||||
"gradient": "practice tool practice"
|
||||
},
|
||||
{
|
||||
"title": "openings",
|
||||
"description": "inflating deflating first sentences",
|
||||
"tags": "reading, language",
|
||||
"gradient": "practice practice practice tool"
|
||||
},
|
||||
{
|
||||
"title": "tree",
|
||||
"description": "code documentation wanderer",
|
||||
"tags": "tool, markup, practice",
|
||||
"gradient": "tool practice tool practice tool practice"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Exex</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<style>
|
||||
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
border: 1px solid currentColor;
|
||||
white-space: pre-wrap;
|
||||
flex: 1;
|
||||
flex-basis: 40ch;
|
||||
|
||||
max-height: calc(1.6 * 2em + 16px);
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
|
||||
}
|
||||
|
||||
.child:hover{
|
||||
transition: max-height 0.6s ease-in;
|
||||
max-height: 1000px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<h1>EXEX</h1>
|
||||
<div class="subtitle">collaborative writing for branching documentation</div>
|
||||
|
||||
<div class="meta">
|
||||
<div class="tags">
|
||||
<span class="tag">collaborative</span>
|
||||
<span class="tag">writing</span>
|
||||
<span class="tag">tool</span>
|
||||
</div>
|
||||
|
||||
<ul class="links">
|
||||
<li><a href="https://git.xpub.nl/kamo/exex">git</a></li>
|
||||
<li><a href="https://constantvzw.org/wefts/cc4r.en.html">CC4r license</a></li>
|
||||
<li><a href="https://hub.xpub.nl/soupboat/exex/">try it</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <section> -->
|
||||
<!-- Every entry comes with: -->
|
||||
<!-- some context -->
|
||||
<!-- some reflections -->
|
||||
<!-- some examples -->
|
||||
<!-- </section> -->
|
||||
|
||||
|
||||
<section class="context">
|
||||
<h2>Context</h2>
|
||||
<p>
|
||||
A branching version of the <a href="https://en.wikipedia.org/wiki/Exquisite_corpse">exquisite corpse game</a>, forked from the <a href="https://git.xpub.nl/kamo/exquisite-branch">exquisite branch</a> drawing app developed for <a href="https://issue.xpub.nl/17/">SI17</a>.
|
||||
</p>
|
||||
<p>
|
||||
Write something, upload it and send the link to someone else: they will continue from your excerpt. With a catch: if you send to just one person the chain will continue linearly, but send it to more people and things will start branching in different directions.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Could be a writing machine to work on the collective pubblication for the graduation, inspired by what <a href="https://pad.xpub.nl/p/gradcollectivexpub">Kim wrote here</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>reflections</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>examples</h2>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id='container'></section>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
const display = (container, tree) => {
|
||||
if(tree.branches){
|
||||
let content = document.createElement('div')
|
||||
content.classList.add('child')
|
||||
if (tree.content) {
|
||||
content.innerHTML = tree.content
|
||||
}
|
||||
container.appendChild(content)
|
||||
for (const b of tree.branches) {
|
||||
display(content, b)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const constainer = document.querySelector('#container')
|
||||
|
||||
fetch('https://hub.xpub.nl/soupboat/exex/api/v1/tree/about/')
|
||||
.then(res=>res.json())
|
||||
.then(res=>{
|
||||
display(container, res)
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
{
|
||||
"entries": [
|
||||
{
|
||||
"title": "exex",
|
||||
"description": "collaborative writing for branching documentation",
|
||||
"tags": "tool, writing, collaborative",
|
||||
"gradient": "tool practice tool practice tool tool"
|
||||
},
|
||||
{
|
||||
"title": "pair documenting",
|
||||
"description": "like pair programming, but for documentation",
|
||||
"tags": "practice, writing, collaborative",
|
||||
"gradient": "practice practice practice"
|
||||
},
|
||||
{
|
||||
"title": "1dl",
|
||||
"description": "1dimension ~ flat markup language ",
|
||||
"tags": "tool, markup, writing",
|
||||
"gradient": "tool practice tool tool practice"
|
||||
},
|
||||
{
|
||||
"title": "textoscope",
|
||||
"description": "adjust text intensity",
|
||||
"tags": "tool, reading, writing",
|
||||
"gradient": "tool tool platform practice practice"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>A toolkit,,, erg</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h1>Hello worlding</h1>
|
||||
|
||||
<section>
|
||||
There are words around code: they create entry points and help understand software. They offer ways to reason about programming, they highlight certain features and hide unexpected flaws. They describe the surroundings of an application: how does it interact with neighbouring systems and how does it address involved developers.
|
||||
These words make worlds around code. Worlds with embedded values, active actors and politics of participation.
|
||||
</section>
|
||||
|
||||
<section>
|
||||
Here is a collection of writing machines to explore practices of code documentation. To reflect and operate on the words they use, on the assumption they make, on the ways they are produced.
|
||||
|
||||
A writing machine is a device that transforms writing. It can be a tool, such as a pen or a typewriter or a text editor, it can be a practical approach, like documenting in pairs or avoiding or insisting on specific terms.
|
||||
|
||||
This collection includes strategies developed during the past two years of within the context and infrastructure of the Soupboat, a small self-hosted server home to various piece of software and experiments.
|
||||
</section>
|
||||
|
||||
<section>
|
||||
Every entry comes with:
|
||||
<ul>
|
||||
<li>some context</li>
|
||||
<li>some reflections</li>
|
||||
<li>some examples</li>
|
||||
</ul>
|
||||
|
||||
Every entry can be further activated with workshops, or by applying it to different projects. It can be something that slowly thrives and transforms.
|
||||
|
||||
Every entry it's a way to explore sociality around code at different intensities: some developers could be more at ease using instruments, some others more with developing habits and practical workflows.
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="controller">
|
||||
<span>tools</span>
|
||||
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
|
||||
<span>pratices</span>
|
||||
</div>
|
||||
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Title</td>
|
||||
<td>Description</td>
|
||||
<td>Tags</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const populateTable = (entries) => {
|
||||
|
||||
const rows = []
|
||||
|
||||
for (const entry of entries) {
|
||||
const row = document.createElement('tr')
|
||||
|
||||
const title = document.createElement('td')
|
||||
title.classList.add('title')
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.classList.add('stretched-link')
|
||||
link.href = `entries/${entry.title}`
|
||||
link.innerHTML = entry.title
|
||||
title.appendChild(link)
|
||||
|
||||
const description = document.createElement('td')
|
||||
description.classList.add('description')
|
||||
description.innerHTML = entry.description
|
||||
|
||||
const tags = document.createElement('td')
|
||||
tags.classList.add('tags')
|
||||
entry.tags.split(',').sort().forEach(tag=>{
|
||||
const chips = document.createElement('span')
|
||||
chips.classList.add('tag')
|
||||
chips.innerHTML = tag.trim()
|
||||
tags.appendChild(chips)
|
||||
})
|
||||
|
||||
row.appendChild(title)
|
||||
row.appendChild(description)
|
||||
row.appendChild(tags)
|
||||
|
||||
rows.push(row)
|
||||
}
|
||||
return rows
|
||||
}
|
||||
|
||||
|
||||
const r = (scale=1) => Math.random() * scale - (scale * 0.5)
|
||||
|
||||
const wobble = () => {
|
||||
const all = document.body.querySelectorAll('*:not(table):not(tr):not(thead):not(tbody):not(.controller)')
|
||||
Array.from(all).forEach(e=>{
|
||||
e.innerHTML = Array.from(e.textContent).map(c=>{
|
||||
// replace space with character, otherwise empty span = width 0
|
||||
c = c == ' ' ? ' ' : c
|
||||
// wobble with centered random function
|
||||
|
||||
return `<span style="transform: scale(${r(0.3)+1})">${c}</span>`
|
||||
// return `<span style="transform: translate(${r(1)}px, ${r(2)}px)">${c}</span>`
|
||||
}).join('')
|
||||
e.style.transform = `translate(${r(10)}px, ${r(10)}px)`
|
||||
console.log(r())
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
fetch('entries.json').then(res=>res.json()).then(res=> {
|
||||
const table = document.querySelector('table tbody')
|
||||
table.append(...populateTable(res.entries))
|
||||
})
|
||||
wobble()
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
import json
|
||||
|
||||
title = input('Title: ')
|
||||
description = input('Description: ')
|
||||
tags = input('Tags: ')
|
||||
gradient = input('Gradient: ')
|
||||
|
||||
with open('entries.json', 'r') as f:
|
||||
data = json.load(f)
|
||||
|
||||
data["entries"].append({
|
||||
"title": title,
|
||||
"description": description,
|
||||
"tags": tags,
|
||||
"gradient": gradient
|
||||
})
|
||||
|
||||
with open('entries.json', 'w') as f:
|
||||
json.dump(data, f, ensure_ascii=False, indent=4)
|
||||
@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<pre>
|
||||
mh trying to sort out a gradient way to filter the writing machines
|
||||
using yet another writing machine such as a gradient
|
||||
that seems more expressive than a percentage system,
|
||||
|
||||
the very same amount
|
||||
(
|
||||
tool: 60%
|
||||
practice: 40%
|
||||
)
|
||||
|
||||
it can be written in a gradient form as
|
||||
(
|
||||
tool tool tool practice practice
|
||||
)
|
||||
|
||||
but also
|
||||
(
|
||||
tool practice tool practice tool
|
||||
)
|
||||
|
||||
in a way that adds more qualities to the quantity
|
||||
in a similar way, just adding another feature
|
||||
is as easy as adding it to the gradient
|
||||
(
|
||||
tool tool tool practice practice platform
|
||||
)
|
||||
while in a percentage system adding hooowwww where are yanother dimension
|
||||
would mean to revisit all the previous property to sum up to 100
|
||||
</pre>
|
||||
|
||||
<pre>
|
||||
but maybe the point is not to filter things ?
|
||||
could anyway be something interesting to develop:
|
||||
1 find components
|
||||
2 place them spatially
|
||||
2pi / components.lenght = angle for each component
|
||||
how to place components?
|
||||
could it be a mix between
|
||||
|
||||
a. chronologic order
|
||||
cycle through components
|
||||
insert every new component in a new angle position
|
||||
|
||||
b. positional order
|
||||
???
|
||||
cycle again through components
|
||||
get first and last distincts of list
|
||||
grade them
|
||||
aaa ok too difficult for now
|
||||
actually maybe this is multi d vector math
|
||||
and i dont have the minimal clue about it
|
||||
ahah
|
||||
</pre>
|
||||
|
||||
|
||||
<div id="gradient"></div>
|
||||
<script>
|
||||
|
||||
|
||||
// MMMmm no ok no
|
||||
const handleRadiant = (entries) => {
|
||||
const gradient = document.querySelector('#gradient')
|
||||
|
||||
|
||||
const width = 300
|
||||
const height = 300
|
||||
|
||||
gradient.style.width = width + 'px'
|
||||
gradient.style.height = height + 'px'
|
||||
|
||||
let properties = new Set()
|
||||
|
||||
for (const entry of entries) {
|
||||
entry.gradient.split(' ').forEach(p => {
|
||||
properties.add(p)
|
||||
})
|
||||
}
|
||||
|
||||
let radius = 100
|
||||
Array.from(properties).forEach((property, index) => {
|
||||
// Calculate polar coordinates
|
||||
let t = 2 * Math.PI / properties.size * index
|
||||
let x = radius * Math.cos(t)
|
||||
let y = radius * Math.sin(t)
|
||||
|
||||
|
||||
let component = document.createElement('span')
|
||||
component.classList.add('component')
|
||||
component.innerHTML = property
|
||||
component.style.transform = `translate(${x+width/2}px, ${y+height/2}px) translate(-50%, -50%)`
|
||||
gradient.appendChild(component)
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,17 @@
|
||||
# Hello worlding
|
||||
|
||||
There are words around code: they create entry points and help understand software. They offer ways to reason about programming, they highlight certain features and hide unexpected flaws. They describe the surroundings of an application: how does it interact with neighbouring systems and how does it address involved developers. These words make worlds around code. Worlds with embedded values, active actors and politics of participation.
|
||||
|
||||
Here is a collection of writing machines to explore practices of code documentation. To reflect and operate on the words they use, on the assumption they make, on the ways they are produced. A writing machine is a device that transforms writing. It can be a tool, such as a pen or a typewriter or a text editor, it can be a practical approach, like documenting in pairs or avoiding or insisting on specific terms. This collection includes strategies developed during the past two years of within the context and infrastructure of the Soupboat, a small self-hosted server home to various piece of software and experiments.
|
||||
|
||||
Every entry comes with:
|
||||
|
||||
- some context
|
||||
- some reflections
|
||||
- some examples
|
||||
|
||||
Every entry can be further activated with workshops, or by applying it to different projects. It can be something that slowly thrives and transforms. Every entry it's a way to explore sociality around code at different intensities: some developers could be more at ease using instruments, some others more with developing habits and practical workflows.
|
||||
|
||||
## Note
|
||||
|
||||
Experimenting with inflatable identity
|
||||
@ -0,0 +1,117 @@
|
||||
|
||||
body {
|
||||
margin: 32px;
|
||||
font-family: sans-serif;
|
||||
line-height: 1.6;
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
pre,
|
||||
section {
|
||||
font-family: sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
padding: 1em;
|
||||
border: 1px dashed currentColor;
|
||||
max-width: 80ch;
|
||||
margin-block: 1em;
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: 1px solid currentColor;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid currentColor;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
td.title {
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
td.tags {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background-color: dodgerblue;
|
||||
color: white;
|
||||
border-radius: 1em;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
|
||||
.controller {
|
||||
margin-block: 32px;
|
||||
|
||||
}
|
||||
|
||||
span:not(.tag) {
|
||||
transition: transform 5s ease-in 5s, margin 5s ease-in 5s;
|
||||
transform: scale(1);
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
span:hover:not(.tag) {
|
||||
transform: scale(2)!important;
|
||||
transition: transform 0.2s, margin 0.2s;
|
||||
cursor: zoom-in;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stretched-link:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 50;
|
||||
}
|
||||
Loading…
Reference in New Issue