A collection of bits - no build steps, no backend, no bundler
https://webbits.tfks.net
- HTML 71.6%
- JavaScript 19.9%
- CSS 7.1%
- TypeScript 1.4%
Erik Stephens
c8c82ae0fb
The tone-first score was undermined by two systematic F0 errors: a voiced initial's pitch bled into the start of the contour (native `mà` extracted as rising instead of falling) and the low-energy creaky tail of a falling Tone 4 was dropped, truncating the fall. extractF0 now cleans the raw per-frame contour with four passes — energy-aware voicing (recovers the Tone 4 tail), median smoothing, nucleus anchoring (drops the consonant murmur before the vowel), and edge-island + outlier rejection (peels onset bursts / release islands and octave-or-creak spikes). Native `mà` now reads falling, and the cross-syllable tone confusion matrix improves 5/12 → 8/12 (broad 26-syllable run 16/26: Tone 3 6/6, Tone 4 6/7). The residual weak spot is flat Tone 1 vs the short citation-form Tone 4 references — reference-token quality, not F0 cleanup. References rebuilt to match the new extraction. Adds tools/validate-tones.ts (the confusion-matrix harness; caches native PCM under tools/.cache, runs the real extractF0) and documents the pipeline in SCORING.md. Removes TODO.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> |
||
|---|---|---|
| .claude | ||
| bits | ||
| lib | ||
| openspec | ||
| wiki | ||
| .gitignore | ||
| .prettierrc | ||
| .rsync-filter | ||
| CLAUDE.md | ||
| favicon.png | ||
| IDEAS.md | ||
| index.html | ||
| justfile | ||
| phonics.md | ||
| README.md | ||
| STORAGE.md | ||
The FunKy bitS
A collection of web bits - no build steps, no backend, no bundler
Live Demo - Inspired By Simon Willison
Stack
| Purpose | Library | CDN |
|---|---|---|
| DOM components | Shoelace | cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1 |
| DOM components | Custom Web Components | ./lib/components.js |
| Reactivity | Alpine.js v3 | cdn.jsdelivr.net/npm/alpinejs@3.x.x |
| Styling | Tailwind CSS | cdn.tailwindcss.com |
Structure
├── index.html
├── lib/components/
│ ├── NAME.js
│ └── NAME.css
└── bits/
├── NAME.html
Adding a New Bit
-
Create the file:
./bits/NAME.html -
Use this template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Bit</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<site-header></site-header>
<main x-data="yourBit()" class="max-w-5xl mx-auto px-6 py-8">
<!-- your bit here -->
</main>
<site-footer></site-footer>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
function yourBit() {
return {
// Alpine data
};
}
</script>
</body>
</html>
- Register it in index.html — add an entry to
window.bits:
{
name: 'Your Bit',
icon: '🔧',
desc: 'One-sentence description of what it does.',
tags: ['tag1', 'tag2'],
href: 'bits/NAME.html',
}