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.

226 lines
4.9 KiB
HTML

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