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.
174 lines
3.6 KiB
HTML
174 lines
3.6 KiB
HTML
<!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>
|