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
226 lines
4.9 KiB
HTML
2 years ago
|
<!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>
|