Building VTS

The Official VTS Engineering Blog

How I Built an 844 Emoji Dictionary ☺️

By Andrew Lin

Emoji Searcher

Demo: http://lifmus.github.io/emoji/

Source: https://github.com/lifmus/emoji

The Slow Way

Initial Prototype

I was browsing through github’s showcases when I stumbled upon something that really caught my eye: the emoji section. I browsed through the top project (https://github.com/muan/emoji) and thought about how the demo (http://emoji.muan.co/) could be improved to be translate to emojis in a more real time manner.

When you’re typing out a message, you don’t always want to be scrolling through pages of emojis looking for the right one. Emojis are best when they’re adding color to your messages.

I set out with the goal of building a text area where the last word in your sentence gets an emoji suggestion. It’s a lot easier to search for an emoji by typing a word than it is to remember which category it’s filed under.

1
2
3
4
5
6
7
8
9
  Column Notation
  :smile:
  :pizza:
  :horse:

  Emoji Equivalents
  πŸ˜„
  πŸ•
  🐴

I spent most of the day getting them to work with column notation. However, I wanted the app to also output regular emojis, as that’s the most popular format. As far as I could tell, there weren’t any openly available resources that would give the emoji equivalents of column notation. I had to build my own.

Building the Emoji Dictionary

At first I was overwhelmed by the prospect of having to build an emoji dictionary line by line. When I finally found the emoji-data repo, I was relieved. Although it wasn’t exactly what I was looking for, having the data in JSON format (https://github.com/iamcal/emoji-data/blob/master/emoji_pretty.json) meant I didn’t have to build an emoji dictionary manually.

I took all the keys from the emojis.json file (https://github.com/muan/emoji/blob/gh-pages/emojis.json) using lodash to construct an array that I could easily port over to ruby.

1
2
3
4
  _.keys(emojis)

  // results
  // ["100","1234","smile","grinning"...

Then I used the Rumoji gem (https://github.com/mwunsch/rumoji) to decode all the keys I had gotten previously, to build a dictionary/object/hash that uses colon notation.

1
2
3
4
5
6
7
8
9
10
11
12
# emoji_array = ["100","1234","smile","grinning"...

require 'rumoji'

emoji_hash = {}

emoji_array.each do |colon_code|
  emoji_hash.merge!({":#{colon_code}:" => Rumoji.decode(":#{colon_code}:")})
end

# results
# emoji_hash = {":100:"=>"πŸ’―", ":1234:"=>"πŸ”’", ":smile:"=>"πŸ˜„"...

I then had to translate it back into JavaScript. I had to run emoji_hash.to_json to get a Javascript object, but then it was on me to translate it back into something I could stuff in a text file.

1
  copy(JSON.stringify(JSON.parse(jsonified_emoji_hash)))

Finished Emoji Dictionary (https://github.com/lifmus/emoji/blob/gh-pages/emoji_dictionary.json)

Bam! I was done, it took a few steps to get a working dictionary, but this made it possible for the colon notation based system to also output to raw emojis.

1
2
3
4
5
6
7
8
9
{
  ":100:":"πŸ’―",
  ":1234:":"πŸ”’",
  ":smile:":"πŸ˜„",
  ":grinning:":"πŸ˜€",
  ":smiley:":"πŸ˜ƒ",
  ":blush:":"😊"
  //and many more
}

Demo: http://lifmus.github.io/emoji/

Source: https://github.com/lifmus/emoji