Mini JavaScript Projects
Thirty browser apps and twenty-five algorithm visualisers, all without a framework or a build step. They range from small DOM exercises to a text editor built on a piece table, a neural network with backpropagation and a set of market-microstructure simulators. This report covers the whole collection; the ray caster and matching engine have their own reports.
Twelve of the fifty-five, running
What's in the box
| Shared technique | Projects | Where it shows up |
|---|---|---|
| Tailwind Play CDN | 13 + 25 | Every December and January app and every visualiser, each with its own inline config |
| Canvas 2D | 10 | Physics, ray caster, Black-Scholes heatmap, Drawing, Location map, Order Book, Optics, Glass Box |
| localStorage | 10 | Notes, todos, cities, typing history, map markers, theme |
| requestAnimationFrame loop | 9 | Games, engines, and the Firehose's once-per-frame DOM flush |
| ES6 classes as structure | 9 + 12 | PieceTable, BlackScholes, OrderBook, Network / Layer / Neuron |
| ARIA attributes | 8 | The later, polished apps; none of the visualisers |
Six beyond the deep dives
Code Editor
The largest app at 3,273 lines. A piece-table buffer, a virtual scroller, multiple cursors with Alt-click, find and replace, bracket matching, 1,000-step undo, and tokenising moved to a Web Worker.
The Glass Box AI
A neural network from scratch with backpropagation, a live weight diagram and a decision-boundary heatmap. Its 47 Vitest tests pass. Its console demo prints "Converged" and then marks all four XOR answers as failed, because its two success thresholds disagree.
Black-Scholes Greeks
Analytical pricing with dividend yield, a separate finite-difference class to check each Greek, and a heatmap of any Greek over price and volatility. The README calls it TypeScript; there are no .ts files.
The Market Firehose
The cleanest engineering pattern in the repo: WebSocket messages write to a map, a set marks changed symbols, and the DOM is patched once per animation frame. Reconnects back off from 1 s to 30 s.
Spread Controller
A correct Avellaneda-Stoikov implementation, badly calibrated: with volatility fixed at 0.02, maximum inventory skews quotes by only $0.04, so the skew indicator moves about 1.6 px. The model's main lesson is nearly invisible.
Location Marker
974 lines: OpenStreetMap tile maths, pan and zoom, a tile cache, markers with notes, haversine distances, and JSON import and export with de-duplication. Filed under Utilities in the README; it deserves better.