For the first time in a good while, I’ve released a completely new blog feature! Back in February, I did a redesign of the entire site from scratch with new (and better) features, but the blog got little attention and was mostly a recreation.
Now it’s time to start adding new things. And to start off what I hope will be a good run of features is one I’ve been considering for a while now: Emoji Reactions. Today I’m going to walk you through the new feature and give you a summary of my design philosophy when creating it.
But first, let’s take a quick glimpse at some new features in other places on my site (since they didn’t get their own announcements):
Recent New Features
- Dark Mode - Okay, to be fair, this one did get an announcement for those of you who’ve been following my weekly updates, but in case you missed it, you can enable dark mode via a toggle switch in the website header. I personally like dark mode better, and today’s feature does look nicer in it (I’m planning to do some stylistic updates, though, that’ll make it look nice in both).
- Bible Verses in Footer - This one I did no announcement at all for, but if you check in the footer of any page, there’ll be the reference of a Bible verse. I added a few to start it out, and for every new feature I add (including Emoji Reactions) I will also add another verse.
Those are the recent ones, though you should also check out the new and redesigned Projects and Writing pages from my sitewide redesign in February. They each have at least one previously (i.e. before February) unreleased project!
And now, let’s talk about Emoji Reactions.
What are Emoji Reactions?
I’m glad you asked. Emoji Reactions are located in a new section at the end of each article and look like this:
Clicking on a button adds a reaction visible to everyone who visits the page (though no personal data is sent to the server). A summary of the reactions is also visible on the article summary when scrolling through the list of articles.
Also, you can add multiple reactions to the same article! If you think an article is both funny and avocado, you don’t have to pick and choose!
Why? Just why?
About a year ago, I implemented the comment system to let people give me feedback on posts, but it’s always had problems. First, it got a bunch of spam. I was able to cut that down with a reCAPTCHA, but a bigger problem remained: privacy-focused comment systems are too much of a hassle to use. Sure, not having to have an account is nice, but needing to fill in your name and checking a reCAPTCHA every time you want to post a comment is tricky.
Enter Emoji Reactions. With these, letting me know what you thought about a post takes literally two seconds. You don’t have to think up some sage comment about the article for your opinions to be taken seriously; you just click on what you think.
Also, it’s nice to have a quick summary of what people thought when you’re deciding which article to read. Seeing, “Oh, two people thought this article was funny,” can help you decide you want to read it.
Emoji Reactions are easier, simpler, and, to be honest, more fun than traditional comments.
Of course, the old comment system is still in place (some of you probably didn’t realize it existed), so you can still let me know your sage thoughts on the article if you like. 😉
Why these emojis?
Picking the emojis was honestly one of the harder decisions I made here. Here are my thoughts on each of them.
👏 Impressive
Clapping represents probably the most basic way people will approve of my articles (assuming you don’t all hate them). If people like an article but don’t feel like a quirky emoji about it, this one is a nice fallback option. Also, if people liked the article but also thought it was hilarious (like some people felt about I’m Not a Robot), they can both clap and add another reaction.
😂 Funny
This was a trickier one. I knew that I wanted a laughing emoji, but which one? 😆, 😁, 😅, or 🤣? I settled on this one because it’s one of the most expressive ones and not nearly as extreme as 🤣.
I pity any AIs trying to figure out what on earth I was trying to say in the last paragraph. Grammarly sure had a hard time with it.
🎉 Hooray
This one’ll probably have more specialized use. I expect it’ll be used for posts like this one where a new feature, project, or piece of writing is released. (hint hint, you can go down and react with this to this article 😅)
😜 Silly
This is kinda a repeat of 😂, but I wanted a less extreme version. I expect some people will react with both of them, but most will pick one or the other for my sillier articles. This one is more of a “that was amusing” than a “I’m laughing so hard tears are streaming down my face.”
🥑 Avocado
Admit it. You’ve probably been wondering about this one ever since you saw the picture. Well… I don’t really have a good reason for it. It’s just a silly final choice for people who don’t want to be restricted by the other options. It’s kinda like the Unicorn reaction on dev.to. Nobody really knows what it’s for, but it’s still widely used.
So a nonsensical reaction kinda makes sense. Why an avocado? Well… I like Avocados.
Goals
I had a few guiding principles when I was outlining how this system would work:
Simplicity
First and foremost I want this to be extremely easy and straightforward. If this is supposed to be an easier way to let me know what you thought, I can’t be requiring people to have an account or read a set of complicated instructions to be able to use this. It should just… work. If you click the button, it reacts. There’s nothing more to it, as far as the user can tell.
Now, this does require some less-than-optimal trade-offs on the technical side, which I’ll put for the nerds among you who are interested.
Technical Notes
You’ve probably seen the biggest flaw in the system already: there’s no way to make sure that people don’t react more than once (with the same emoji). Also, since I let people remove their reactions, there’s no way to stop them from removing more times than they’ve added if they know how to use a browser console.
And that is an issue. I’m considering a potential fix that would at least make it less easy for people to mess with the data via closures, but honestly, I trust you folks. It’s only those of you who are knowledgeable enough to be reading “Technical Notes” who would know how to do it anyway, and I would expect that most people who would try to break the system do not know how (other than opening a ton of incognito windows to react over and over).
That said, if you do know a better way to secure the system, let me know! I’m storing information about whether or not they’ve reacted in the browser’s localStorage object.
Privacy
I don’t want to be stealing any private information from my users if at all possible. No user information is sent from the browser to the server at all, and the information about whether you’ve reacted is stored only on your own machine; the server has no access to it.
And yes, I know that the nerds who know how coding works are clamoring for another Technical Notes section.
Technical Notes
Information about whether the user has reacted is stored in localStorage. This information is used to populate the necessary reaction buttons with a checked class. Changing the localStorage from the browser console would allow you to pretend you haven’t already reacted.
But honestly, if you’re going to go to all that trouble, why not just send an AJAX request to the URL that updates the database directly?
Now, if you didn’t see it before, you can clearly see why I need to figure out a way to secure this better. Or don’t. I mean, who’s going to care about messing up my reaction counts? (Okay, okay, I know y’all probably want to just to see if you can figure it out… Well, if you do, please do it on this article rather than another. And hack it to make the count go up, not down, please. 😅)
I’d rather allow people to cheat the system than comprimise my users’ privacy.
Fun
This system is just plain fun. Who doesn’t like emojis? I will admit that I was somewhat inspired by the way Discord handles reactions; it’s really a great system.
But I don’t remember seeing hardly any similar systems to this on articles I generally stumble across, which is a shame. If you’d like to build a system like this, be my guest!
Technical Notes
Do I really need technical notes for this? Probably not, but I did have something to say that didn’t fit anywhere else.
A cool thing about the way I set this up is that I can change the default emoji options at any time, but reactions on old articles will be preserved. That’s because I store each set of reactions as an array item with a name property, which is translated into Emoji by the Pug mixin. If I want to add a new reactions, I simply add it to the “create article” script and to the Pug mixin and I’m good. Old articles will stay with the same reactions.
How can I use this on my site?
Well, all the code for my website is available on Github, so you can take a look at how I did it. The most pertinent files are /static/lib/js/article.js, /templates/mixins/reactions.pug, and a portion of the main app.js. I use ExpressJS and Pug on the backend with a MongoDB database, but it shouldn’t be hard to adapt to other systems. If you’re not into coding, I believe Disqus has a similar feature, you should check that out.
If you use parts of my code verbatim, it’s licensed under GPL-3.0, so make sure you follow whatever guidelines are in that.
Closing Thoughts
Well, that’s it! I’d love any feedback you have about the system; you can either write that in the comments below or send me a message through my contact form.
You can use this article as a testing ground for the system! Use as many or as few reactions as you like, whether or not they’re pertinent to the content of this article.
Also, go back to some of your favorite past articles and react to them! We need to build up a past for this system.