<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > A toolkit,,, erg< / title >
< style >
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;
display: inline-block;
max-width: 80ch;
margin-block: 1em;
}
table {
border-collapse: collapse;
}
thead {
font-weight: bold;
}
td {
border: 1px solid currentColor;
padding: 1em;
}
.tag {
display: inline-block;
background-color: dodgerblue;
color: white;
border-radius: 1em;
padding: 2px 8px;
}
.tag + .tag {
margin-left: 8px;
}
.controller {
margin-block: 32px;
}
< / style >
< / head >
< body >
< h1 > Hello worlding< / h1 >
< section class = "intro" >
A collection of writing machines to explore practices of code documentation.
A set of tools and prompts to handle 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.
< / section >
< section class = "more" >
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. so it can be something that slowly thrive and transform.
it's a way to explore sociality around code at different intensities
some people 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 class = "title" > Title< / td >
< td class = "description" > Description< / td >
< td class = "tags" > 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')
title.innerHTML = entry.title
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
}
fetch('entries.json').then(res=>res.json()).then(res=> {
const table = document.querySelector('table tbody')
table.append(...populateTable(res.entries))
})
< / script >
< / body >
< / html >
