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.
142 lines
4.2 KiB
HTML
142 lines
4.2 KiB
HTML
2 years ago
|
<!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>
|