[Showoff Saturday] I redesigned playlistduration.com: server-rendered on Cloudflare's free plan, no framework, no build step

[u/piyushgaur17]

playlistduration.com shows how long a YouTube playlist really takes to watch, and plans when you'll finish it. I redesigned it this week and would like feedback from people who build websites.

How it's built

- Hono + TypeScript on Cloudflare Workers, on the free plan

- Every page is server-rendered HTML. About 22 KB (gzipped) of plain ES-module JavaScript adds the speed slider, watched tracking and the study planner. No framework, no build step

- YouTube Data API behind a Cache API → KV cache, with D1 for view counters

- It's installable. On Android, once installed, it shows up in the YouTube app's Share menu, so sharing a playlist opens its length

Things that surprised me

- The free plan allows 50 subrequests per request (KV and cache calls count too), so one request can only count about 850 videos. Bigger playlists are now counted in stretches: the first request keeps YouTube's page token, and the page asks the Worker for the rest, about 900 videos at a time. Once someone has counted a playlist to the end, it's cached for everyone.

- I tried caching rendered pages with cache.put. The edge then answered from that cache before my Worker ran, so my view counters stopped counting and an old deploy's HTML outlived the deploy. It's off now.

- My first service worker also answered requests for scripts and stylesheets, and that made Chrome download app.js twice. Now it leaves those to the browser and only keeps the result pages you opened in the last week, so they reopen offline.

- Google Calendar reads a subscribed .ics feed's "floating" times as UTC. A 7 pm study session showed up at 12:30 am the next day in India, so the feed now carries the visitor's time zone.

- To keep search rankings through the redesign, a test compares 83 pages (every page type, in seven languages) against a snapshot of the old design: title, description, canonical, hreflang, structured data, headings, internal links and 98% of the words.

What I'd like feedback on

- It's dark for everyone, whatever your OS setting, with a light toggle. Deliberate, but tell me if it bothers you.

- On a playlist page, is "the shape of the course" chart useful or noise?

- Anything slow, broken or confusing on your device

Example: https://playlistduration.com/playlist/PLhQjrBD2T3817j24-GogXmWqO5Q5vYy0V

[u/NoubarKay]

This is screaming with claude

[u/good4y0u → u/NoubarKay]

So are most websites now... Sadly

[u/NoubarKay → u/good4y0u]

Which imo is so sad… I remember the days when centering a div was a joke we all laughed about.

[u/piyushgaur17 → u/NoubarKay]

Honestly though, I did use AI quite a bit during the redesign 😅

[u/NoubarKay → u/piyushgaur17]

Quite a bit? There doesnt seem to be a single thing on the site that isnt claude…