writing machine tbl
parent
11a8e4e864
commit
9de3e94d01
@ -0,0 +1,22 @@
|
||||
{
|
||||
"entries": [
|
||||
{
|
||||
"title": "exex",
|
||||
"description": "collaborative writing for branching documentation",
|
||||
"tags": "tool, writing, collaborative",
|
||||
"gradient": "tool tool tool tool practice practice"
|
||||
},
|
||||
{
|
||||
"title": "pair documenting",
|
||||
"description": "like pair programming, but for documentation",
|
||||
"tags": "practice, writing, collaborative",
|
||||
"gradient": "practice practice practice"
|
||||
},
|
||||
{
|
||||
"title": "1dl",
|
||||
"description": "1dimension ~ flat markup language ",
|
||||
"tags": "tool, markup, writing",
|
||||
"gradient": "tool tool tool practice practice"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,225 @@
|
||||
<!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 {
|
||||
font-family: sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
padding: 1em;
|
||||
border: 1px dashed currentColor;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<pre>
|
||||
A toolkit ---------- set of practices
|
||||
what's the name for a set of practices?
|
||||
|
||||
|
||||
btw
|
||||
|
||||
toolkit: collection of tools
|
||||
set of practices: collection of practices
|
||||
|
||||
some people could be more at ease using instruments
|
||||
some others more with developing habits and practical workflows
|
||||
|
||||
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>
|
||||
</div>
|
||||
|
||||
<canvas id="gradient"></canvas>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="title">Title</td>
|
||||
<td class="description">Description</td>
|
||||
<td class="tags">Tags</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</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>
|
||||
|
||||
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 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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
fetch('entries.json').then(res=>res.json()).then(res=> {
|
||||
const table = document.querySelector('table tbody')
|
||||
table.append(...populateTable(res.entries))
|
||||
handleGradient(res.entries)
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue