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.

137 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A toolkit,,, erg</title>
2 years ago
<link rel="stylesheet" href="style.css">
</head>
<body>
2 years ago
<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>
2 years ago
<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.
2 years ago
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.
2 years ago
</section>
<section>
2 years ago
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.
2 years ago
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.
2 years ago
</section>
<div class="controller">
2 years ago
<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>
2 years ago
<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
}
const r = (scale=1) => Math.random() * scale - (scale * 0.5)
2 years ago
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 &nbsp; character, otherwise empty span = width 0
c = c == ' ' ? '&nbsp;' : c
// wobble with centered random function
2 years ago
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>