Adding view count and like button to 11ty
annoyscript.vercel.appThe HSET calls are not just unnecessary, they're a bug. It introduces the possibility of a race condition where a view or like happens between the HGET and HSET. HSETing the values to zero doesn't actually make anything faster or more correct, it just introduces the possibility of overwriting a value that came in moments ago.
so how would you approach this?
Just do hincrby alone, if it doesn't exist it will automatically become 1
You are right. It just should be like so:
Get:
Post:const likes = (await kv.hget(postTitle, "likes")) || 0const likes = await kv.hincrby(postTitle, "likes", 1);
There doesn't seem to be a limit to how many times a reader can smash that like button, which brings a new degree of expression to smashing that like. You can smash that like 10 times the article was good, 100 times if it was amazing, or 100 million times if you hated it and want the author to be bankrupted by their Vercel bill.
That's how medium does it, except they name it claps (or applause or something like that). I always kinda liked that about it
are you the one that is actually DDoSing my Vercel KV lol? I had like 5k requests in the last few hours ^^
As I mentioned in the blog, I have a free tier, so I just got an email from Vercel that KV will stop accepting new request for today.
(I work at Vercel) You can set up the Vercel Firewall to block traffic: https://vercel.com/docs/security/vercel-waf/custom-rules
thank you kind soul. I just push new version of the script so it only accepts 3 likes per visit. Not ideal, but a quick fix (:
Only semi-related, I have also found the 11ty docs lacking from time to time, but don’t really have a great idea in my head about what good docs look like vs bad ones.
If you have a moment, I’d love to hear why you think these are exceptionally bad docs, and some examples or thoughts on what you feel are excellent docs!
We use and financially support 11ty at work, so if it’s something I can manage, I’d like to help make the docs better over time.
First of all, the 11ty documentation seems to be designed for people who already know what they are looking for. This is a typical bias from the people who create the documentation, as they are already familiar with the material.
I have a long history of improving extensive documentation for my past employers, and the first thing I always start with is a general question: Can I follow the stream of thoughts when reading the docs? Does it have a well-prepared welcoming page that can guide me to the information I need? (Sometimes you are just curious about release dates, and other times you might have forgotten the name of a plugin).
Documentation, as I understand it, should be a pleasing experience that takes you on a journey, allowing you to decide how deep you want to go.
The issue with 11ty's documentation is that every single page is overwhelming with technical details introduced right away. There is no foreplay, no gentle introduction—just straight into the details. I hate it; it makes me feel like it’s designed as a gatekeeper of knowledge (I've seen this in my previous companies too).
Designing documentation should start with simple ideas that gradually lead to more complex concepts (just like in coding, where we start with variables and functions before moving on to more complex structures like classes and logic). Simplified diagrams are also a very welcoming idea for a starter page.
To make it more 11ty-focused, their documentation is missing:
1. A welcoming page explaining what you are currently seeing and what you can expect.
2. A simple go-to project, rather than an overwhelming list of 30+ startup projects (why not just showcase a simple blog with one post?).
3. A "Set up your first project" page (I’ve chosen my first project, where should I go next?).
4. Instructions on how to extend your project (covering advanced topics like modules).
5. General organization—the whole page is cluttered with too many links, text blocks, paragraphs, and images.
6. Explanations of basic concepts (for example, it took me three days to understand why some pages have three or more syntaxes).
7. ... and more, but I just can't stand even looking at their docs
A really good example of documentation is React: https://react.dev/learn
Thanks for the detailed response and examples, really appreciate it!