A collection of bits - no build steps, no backend, no bundler
https://webbits.tfks.net
- HTML 74.4%
- JavaScript 17.9%
- CSS 7.6%
Erik Stephens
c481575cdc
Adds pointer-event-based drag-and-drop for moving checkers, including single drags that consume multiple dice (e.g. 24→19 with [3,2]) via a DFS path finder in rules.js. Drag coexists with the existing click flow, highlights legal and compound-reachable destinations with distinct intensities, and supports bearing off by dropping on a home-rail strip. A wiki note explaining why drag-controller state must live in closure variables — putting it on the Alpine reactive object schedules a microtask re-render between pointerdown and pointerup that detaches the click target and silently kills the synthetic click event. |
||
|---|---|---|
| .claude | ||
| bits | ||
| lib | ||
| openspec | ||
| wiki | ||
| .gitignore | ||
| .prettierrc | ||
| .rsync-filter | ||
| CLAUDE.md | ||
| favicon.png | ||
| IDEAS.md | ||
| index.html | ||
| justfile | ||
| 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',
}