Adding Reacji support to my Micropub editor

I often make use of Slack's "reactions" feature to react to a message that has been posted. Emojis correspond to reactions. A "joy" emoji shows that I found a message funny. I like sending reactions to show my thoughts on a message. After a recent discussion in the IndieWeb chat, I found out about something called "reacjis". Reacjis are short reactions to a post. A reacji should be one emoji, just like you might see in a messaging application. I found that some people support sending and receiving reactions similar to those you might see in Slack, Discord, or even Facebook messenger but on their own site.

In this post, I'm going to briefly chat about how I have added reacji support to my Micropub editor.

Version 1: Sending reacjis (reactions) with a click

To send a Reacji to a website, I need to create a post that is one emoji long. That was not too difficult. In fact, I wouldn't have to change anything about the tool I use to publish responses on this website. I would just need to start using emojis. But I wanted to make sending reacjis easier for myself. I have not found an easy way to access emojis on a keyboard and I often find myself Googling them when I need an emoji for use outside of, say, Slack, where emojis are provided already. I needed to come up with a solution to make it easy for me to post reactions to web pages that were one emoji long.

After some thought, I came up with the idea of a widget that would list some emojis that I could immediately add to the post I am about to send to a site. This widget lists all of the emojis that I use regularly, from the "thumbs up" emoji to the "fire" emoji. As soon as I click on an emoji (or tap on one if I am on mobile), that emoji will be added to the post I am about to publish to my site.

Here is how the widget looks:

As you can see, I have quite a few options for emojis to use. This means that if I ever want to send a reacji to a web page, or even just add an emoji onto an existing post that I am writing, I can do so easily. Of course, not every reaction is supported but those I expect to use on a regular basis are on the page by default, ready for use whenever I need them.

There are two easter eggs hidden in the reactions feature. You may be wondering: James, how often do you really use the yoyo and "poke" emoji? Well, I added these in jest as a result of a recent discussion about the Yo app and Facebook's poke feature. The Yo app let you send one word to a friend: Yo. And Facebook's Poke let you send a notification to someone. The value of both of these relics of internet history is questionable for some but I like them.

When I click on the yoyo, the following text is added to the "post content" text box when I am writing a post:

<a href='' class='u-yo-of'>Yo! 🪀</a>

Clicking on the Poke emoji adds this text to the "post content" text box:

<a href='' class='u-poke-of'>Poke 👉</a>

These pieces of text let me send marked up Yos and Pokes. This means that, technically, a tool could read these posts and know that they were Yos and Pokes, respectively. Please note that this markup is not official microformats2 markup. It is written in jest, similar to some other properties that the community has devised in the past.

Version 2: Sending Reacjis with microsyntax

I recently learned about a concept called "microsyntax." Microsyntax is defined as "short text conventions for conveying specific semantic meaning, such as an "@" prefix indicating a (user)name, or "#" prefix indicating a hashtag (both conventions popularized by Twitter)." on the IndieWeb wiki. I was thinking about this idea and wondered: could I apply this concept to my Micropub editor?

Some websites already do this. Have you ever typed :fire: in Discord to see a fire emoji? Or :raised_hands: in Slack to do the high-five-with-two-hands emoji? That is microsyntax. The colon (:) tells Discord or Slack you want to type an emoji. Then you are presented with options for emojis that you could use.

By adding a similar feature to my Micropub site, I would be able to easily send a Reacji. I would also have an easy way to add an emoji to any post I had written. Not a bad bonus.

To implement this feature, I had to wrestle with JavaScript. I don't use JavaScript very often on the day-to-day so quite a bit of work was needed to add microsyntax to my Micropub editor.

I first started small: let me turn :raised_hands: into the raised hands emoji. I wrote some code that recognized a colon. If the text after the colon was equal to raised_hands, the term ":raised_hands" would be replaced with my emoji. This would only happen when I pressed enter. After some testing -- and a lot of debugging -- I got this to work. I could turn :raised_hands into an emoji!

I was not finished there. I wanted to add this same feature for any emoji. I found an excellent Gist that mapped emoji characters to names on GitHub. I wrote some code to ingest the Gist, stored as a .json file, into my JavaScript. I was hesitant about loading a json file with emojis but this one was less than 50 kB. I thought this was good for what I was trying to do so I proceeded. I done some cleaning so that all emoji names were lower case and separated by underscores. This was my preferred way of making use of microsyntax for emojis in my Micropub editor.

After writing this code, I had a program that would replace :hot_beverage with the :coffee: emoji and :fire with the :fire: emoji. I could do this for a wide range of emojis. (Funnily enough, raised hands was not in the original list, which is my favourite emoji. I will need to revise the list to add raised hands so that I can make use of that emoji too.)

While I was developing this feature, I realised I needed a way to see what emojis I could add. I decided to add an autosuggest feature to the endpoint. If I type out a colon and start typing an emoji name, I will see suggestions for what emojis I could use that starts with the character I mentioned. For example, :fi would suggest :fire. These suggestions disappear after I have finished adding an emoji. In the image below, I type ":hot_" and see the suggestions for :hot_beverage and :hot_springs, among other emoji names:

Wrapping up

I now have two ways of sending Reacjis and adding emojis to posts I have created on my Micropub endpoint:

1. Click a button to add some common, pre-selected emojis, into my text editor.
2. Use a colon (:) followed by the name of the emoji I wanted to use.

I am still testing both features mentioned in this article. I am excited to start sending Reacjis and adding emojis for real-world web responses. I am also excited by the promise of extending my Micropub editor to work the way I want to work and write posts.

Have any questions about this project? Feel free to email me at jamesg@jamesg.blog. My Micropub endpoint is all open-source so you can see all of my code. You can read the JavaScript that powers the microsyntax in the emoji_autocomplete.js file.

Also posted on IndieNews.