desc test

main
km0 2 years ago
parent 9de3e94d01
commit 274a7bd7ac

@ -4,7 +4,7 @@
"title": "exex",
"description": "collaborative writing for branching documentation",
"tags": "tool, writing, collaborative",
"gradient": "tool tool tool tool practice practice"
"gradient": "tool practice tool practice tool tool"
},
{
"title": "pair documenting",
@ -16,7 +16,14 @@
"title": "1dl",
"description": "1dimension ~ flat markup language ",
"tags": "tool, markup, writing",
"gradient": "tool tool tool practice practice"
}
"gradient": "tool practice tool tool practice"
},
{
"title": "textoscope",
"description": "adjust text intensity",
"tags": "tool, reading, writing",
"gradient": "tool tool platform practice practice"
}
]
}

@ -13,13 +13,16 @@
color: dodgerblue;
}
pre {
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 {
@ -46,9 +49,11 @@
.tag + .tag {
margin-left: 8px;
}
canvas {
display: block;
.controller {
margin-block: 32px;
}
</style>
@ -59,31 +64,42 @@
<body>
<pre>
A toolkit ---------- set of practices
what's the name for a set of practices?
<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.
btw
This collection includes strategies developed during the past two years of within the context and infrastructure of the Soupboat.
</section>
toolkit: collection of tools
set of practices: collection of practices
<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>
workflow is a nice word
</pre>
<div class="controller">
<span>tools</span>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<span>pratices</span>
<span>tools</span>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<span>pratices</span>
</div>
<canvas id="gradient"></canvas>
<table>
<thead>
@ -98,63 +114,12 @@ workflow is a nice word
</table>
<pre>
mh trying to sort out a gradient way to filter the writing machines
using yet another writing machine such as a gradient
that seems more expressive than a percentage system,
the very same amount
(
tool: 60%
practice: 40%
)
it can be written in a gradient form as
(
tool tool tool practice practice
)
but also
(
tool practice tool practice tool
)
in a way that adds more qualities to the quantity
in a similar way, just adding another feature
is as easy as adding it to the gradient
(
tool tool tool practice practice platform
)
while in a percentage system adding hooowwww where are yanother dimension
would mean to revisit all the previous property to sum up to 100
</pre>
<pre>
but maybe the point is not to filter things ?
could anyway be something interesting to develop:
1 find components
2 place them spatially
2pi / components.lenght = angle for each component
how to place components?
could it be a mix between
a. chronologic order
cycle through components
insert every new component in a new angle position
b. positional order
???
cycle again through components
get first and last distincts of list
grade them
aaa ok too difficult for now
actually maybe this is multi d vector math
and i dont have the minimal clue about it
ahah
</pre>
<script>
<script>
const populateTable = (entries) => {
const rows = []
@ -179,7 +144,6 @@ would mean to revisit all the previous property to sum up to 100
tags.appendChild(chips)
})
row.appendChild(title)
row.appendChild(description)
row.appendChild(tags)
@ -190,23 +154,8 @@ would mean to revisit all the previous property to sum up to 100
}
const handleGradient = (entries) => {
const canvas = document.querySelector('#gradient')
const ctx = canvas.getContext("2d");
ctx.font = "1rem serif";
for (const entry of entries) {
let components = {}
entry.gradient.split(' ').map(component=>{
let value = (components[component] || 0) + 1
components[component] = value
})
console.log(components)
const c = Object.keys(components).length
console.log(c)
}
}
@ -214,7 +163,6 @@ would mean to revisit all the previous property to sum up to 100
fetch('entries.json').then(res=>res.json()).then(res=> {
const table = document.querySelector('table tbody')
table.append(...populateTable(res.entries))
handleGradient(res.entries)
})

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<pre>
mh trying to sort out a gradient way to filter the writing machines
using yet another writing machine such as a gradient
that seems more expressive than a percentage system,
the very same amount
(
tool: 60%
practice: 40%
)
it can be written in a gradient form as
(
tool tool tool practice practice
)
but also
(
tool practice tool practice tool
)
in a way that adds more qualities to the quantity
in a similar way, just adding another feature
is as easy as adding it to the gradient
(
tool tool tool practice practice platform
)
while in a percentage system adding hooowwww where are yanother dimension
would mean to revisit all the previous property to sum up to 100
</pre>
<pre>
but maybe the point is not to filter things ?
could anyway be something interesting to develop:
1 find components
2 place them spatially
2pi / components.lenght = angle for each component
how to place components?
could it be a mix between
a. chronologic order
cycle through components
insert every new component in a new angle position
b. positional order
???
cycle again through components
get first and last distincts of list
grade them
aaa ok too difficult for now
actually maybe this is multi d vector math
and i dont have the minimal clue about it
ahah
</pre>
<div id="gradient"></div>
<script>
// MMMmm no ok no
const handleRadiant = (entries) => {
const gradient = document.querySelector('#gradient')
const width = 300
const height = 300
gradient.style.width = width + 'px'
gradient.style.height = height + 'px'
let properties = new Set()
for (const entry of entries) {
entry.gradient.split(' ').forEach(p => {
properties.add(p)
})
}
let radius = 100
Array.from(properties).forEach((property, index) => {
// Calculate polar coordinates
let t = 2 * Math.PI / properties.size * index
let x = radius * Math.cos(t)
let y = radius * Math.sin(t)
let component = document.createElement('span')
component.classList.add('component')
component.innerHTML = property
component.style.transform = `translate(${x+width/2}px, ${y+height/2}px) translate(-50%, -50%)`
gradient.appendChild(component)
})
}
</script>
</body>
</html>
Loading…
Cancel
Save