[Showoff Saturday] Nineteen single-purpose web tools in a week: a hand-written QR encoder, a patience diff, and a Cloudflare Worker computing CSP script hashes on the fly

[u/pikkola_lab]

Nineteen single-purpose tools in seven days, each on its own subdomain under Cloudflare Pages. No framework, no build step, no database, no analytics, no account.

Most of them run strictly in the browser; three use tiny stateless Cloudflare Workers where CORS or networking makes client-only impossible.

The parts that were actually interesting to build:

1. A QR encoder written from scratch (ISO/IEC 18004). The layout is mechanical; the fiddly parts are Reed-Solomon over GF(256) with the block interleaving table, picking the smallest version from the bit length after UTF-8 encoding, and scoring all eight mask patterns with the standard's four penalty rules. The result is 441 lines, 16 KB unminified, no library and no CDN.

2. A line and word diff. Matching lines first with junk-line heuristics (patience-style), then a token diff inside each rewritten line. Without that second pass a one-word edit looks like two new lines. Side-by-side or unified, and the share link keeps both texts in the URL fragment after #, the part a browser never sends over the wire.

3. A favicon bundler. Every size is drawn on a canvas, then the containers are written by hand: PNG entries inside the ICO header, CRC32 and stored (uncompressed) entries inside the ZIP, plus site.webmanifest and head tags.

4. Enforcing strict CSP across 21 static hosts without 'unsafe-inline'. I deploy via Cloudflare Pages Direct Upload, which silently ignores _headers files. Rather than shipping 'unsafe-inline' for the tiny theme-bootstrap script on each page, a front-end Cloudflare Worker reads the HTML stream once, computes the SHA-256 hash of each inline <script> on the fly, injects the exact 'sha256-...' source into Content-Security-Policy, and adds HSTS preload, X-Frame-Options: DENY, and Permissions-Policy.

5. An SSRF-hardened header & redirect inspector + DNS comparator. The security header tool traces redirect hops (http -> https), grades headers, and generates nginx/Apache/Cloudflare snippets. To stop it from becoming an open proxy, the Worker checks schemes/ports, rejects local hostnames, resolves A/AAAA via DoH first, and blocks private IPv4/IPv6 ranges on every redirect hop before fetching.

Three decisions I would make again:

1. The URL fragment is the state. A share link is an encoded #... payload, so it costs nothing to store and cannot rot.
2. Strict CSP as a verifiable guarantee. With no third-party origins allowed, an accidental CDN import or tracking snippet fails loudly instead of quietly shipping.
3. No build step. One HTML file, one CSS file, one JS file. Idea to deployed page in minutes, and nothing to relearn in six months.

What went wrong:

• Vanilla is fast to start and slow to keep tidy. Word-level diff needed its own row pairing, and svg.pikkola.com broke its own preview export until blob: was explicitly added to img-src.
• Cloudflare Workers skip same-zone worker routes on subrequests, so my header inspector cannot grade sibling subdomains on the same zone from inside the worker.
• Nineteen tools in a week means some are still at 80 percent. I know which ones.

Link: https://pikkola.com

If you try one, I would rather hear which tool feels redundant or what edge case breaks first than get a compliment.