adding emoji since 2017
from evy's notebookI currently work part-time for a company that builds a community chat app, the kind of thing one could use instead of Slack or Discord. I love this app, but there are some quirky issues with it -- most recently I've been working on adding emoji reactions for all the emoji that have been released since 2017.
Why weren't they added before? There are some staples in there, including 🥰 and 🤯and the grey box from wordle. The answer lies in the company's love of Google's blob emoji.
For several years, Google had some very cute emoji shaped like blobs. When they switched to a more modern look in 2017, the chat app I work for added an option to view emoji in the new styling but they wanted to preserve the ability to view emoji reactions in the style of the blob emoji. But this left them with the challenge of what to do with the remaining emoji. If I react to a message with "🤯", what should someone in blob-mode see? There's no blob version of that emoji, and it would look weird to have round emojis displayed beside blob ones. So they decided to focus on other challenges, and indefinitely stopped adding new emoji.
Which brings us to 2022 with over a thousand emoji missing from the emoji-reaction menu. I've been working on fixing this, and it's almost ready! To show a peek into the life of a software engineer, I wanted to share some of what the fix involved:
(1) naming the emoji
Unicode has an official name for each emoji, Slack has their own list of names and search keywords for emoji, and there are several other collections of emoji names. The company I work for (which has been around for 10 years) has historically come up with their own custom names for emoji, picking favourites from other systems and trying to optimize for clarity and usability across cultures. In my opinion, emoji have become so prevalent that at this point the most clear and usable emoji names are whatever most other apps are using, so I tried to avoid using new custom emoji names as much as possible.
My work for naming the emoji that were released since 2017 involved creating a script to pull names from CLDR and combine that data with the existing names my company had already custom made. I wanted to preserve existing custom names so that users wouldn't get confused, but I had to remove a few of the custom names because they ended up conflicting with new emoji -- for example, 🏏(a cricket bat) had been renamed to "cricket" but then 🦗was later released.
(2) displaying the emoji
People at the company still love the blob emoji enough to want it to be supported in some way even if it looked weird. The solution we decided on was to mark the blob emoji option as deprecated and show all emoji released since 2017 in their more modern look even if the blob emoji option was selected. In order to do that, I had to load emoji from two different sprite sheets.
A sprite sheet is a really big image that contains every image you'd want for something side by side. The sheet for google's blob emojis looks like this:
Each emoji reaction that's displayed is actually an HTML element that contains the whole sprite sheet zoomed in a lot and cropped to only the part that shows that particular emoji.
There's CSS (styling) shared by all emoji reactions (such as height and width), but most of the styling comes from a stylesheet for a particular style of emoji. For example, the stylesheet for the modern google emoji includes a style for all emojis from a certain sprite sheet specifying the sprite map, and a style for individual emoji to describe where it can be found on the sprite map.
.emoji {
background-image: url(https://url-to-sprite-sheet.png);
background-size: 6100.000%;
/* note that the background is HUGELY zoomed in */
}
/* styling for the emoji with unicode code 1f44d */
.emoji-1f44d {
background-position: 20.000% 83.333%;
}
To show modern emoji alongside blob emoji, I had to extend the blob emoji's stylesheet to add entries for the new emoji. Each new emoji's styling specifies its position on the modern google sprite sheet, and also specifically specifies to use the modern sprite sheet as its background (overriding the sheet-wide specification to use the blob stylesheet). The stylesheets are generated with a script, so this change involved updating that script to add these new emoji's to the bottom of the blob-style stylesheet.
(3) give mobile the information it needs
The above changes help new emoji reactions show up on the website, but not on mobile. The mobile app works separately from the code I was working in, and needs its own way to find out what emoji its users are allowed to react with. Because the website isn't updated for everyone all at once (some people continue to use older versions off the app, some use newer versions), the mobile app needed a way to ask the sever what emoji it supported. I created an API where mobile can request data and receive the list of all currently supported emoji (on the relevant server) as well as the emoji's names.
(4) inform the users of the change
Finally, I added some information to let users know what was going on. The settings menu now describes the old google emoji as "deprecated" and explains why no emoji since 2017 will display in the blob style.
As I've written about before, I think emoji reactions are really important. I'm very excited to help bring more emoji reacting power to a chat app that I love.