tag/desc/index.html

<!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')
        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) 
   
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

            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>
writing machine tbl 2 years ago			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<title>A toolkit,,, erg</title>`
mh 2 years ago			`<link rel="stylesheet" href="style.css">`
			`</head>`
writing machine tbl 2 years ago


			`<body>`


desc test 2 years ago			`<h1>Hello worlding</h1>`

hello worlding hllo hello procrastination day 2 years ago			`<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>`
desc test 2 years ago
hello worlding hllo hello procrastination day 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.`
desc test 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.`
writing machine tbl 2 years ago
hello worlding hllo hello procrastination day 2 years ago			`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.`
desc test 2 years ago			`</section>`
writing machine tbl 2 years ago
hello worlding hllo hello procrastination day 2 years ago			`<section>`
desc test 2 years ago			`Every entry comes with:`
hello worlding hllo hello procrastination day 2 years ago			`<ul>`
			`<li>some context</li>`
			`<li>some reflections</li>`
			`<li>some examples</li>`
			`</ul>`
writing machine tbl 2 years ago
hello worlding hllo hello procrastination day 2 years ago			`Every entry can be further activated with workshops, or by applying it to different projects. It can be something that slowly thrives and transforms.`
desc test 2 years ago
hello worlding hllo hello procrastination day 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.`
desc test 2 years ago			`</section>`
writing machine tbl 2 years ago



			`<div class="controller">`
desc test 2 years ago			`<span>tools</span>`
			`<input type="range" min="1" max="100" value="50" class="slider" id="myRange">`
			`<span>pratices</span>`
writing machine tbl 2 years ago			`</div>`


			`<table>`
			`<thead>`
			`<tr>`
hello worlding hllo hello procrastination day 2 years ago			`<td>Title</td>`
			`<td>Description</td>`
			`<td>Tags</td>`
writing machine tbl 2 years ago			`</tr>`
			`</thead>`
			`<tbody>`
			`</tbody>`
			`</table>`




desc test 2 years ago


			`<script>`
writing machine tbl 2 years ago			`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`
			`}`


hello worlding hllo hello procrastination day 2 years ago			`const r = (scale=1) => Math.random() * scale - (scale * 0.5)`
desc test 2 years ago
hello worlding hllo hello procrastination day 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   character, otherwise empty span = width 0`
			`c = c == ' ' ? ' ' : c`
			`// wobble with centered random function`
mh 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>`
hello worlding hllo hello procrastination day 2 years ago			`}).join('')`
			e.style.transform = `translate(${r(10)}px, ${r(10)}px)`
			`console.log(r())`
			`})`
			`}`
writing machine tbl 2 years ago

hello worlding hllo hello procrastination day 2 years ago
writing machine tbl 2 years ago
			`fetch('entries.json').then(res=>res.json()).then(res=> {`
hello worlding hllo hello procrastination day 2 years ago			`const table = document.querySelector('table tbody')`
writing machine tbl 2 years ago			`table.append(...populateTable(res.entries))`
			`})`
hello worlding hllo hello procrastination day 2 years ago			`wobble()`
writing machine tbl 2 years ago

			`</script>`

			`</body>`
			`</html>`