pizza. poop.

How I built linkmoji in an hour

(and made over 100,000 emoji links)


While hanging out at my neighborhood public library this week, I built linkmoji, a link shortener that lets you easily convert a long URL into a short URL that’s made up of emoji! I created it with my friend and fellow emoji-fanatic George on Wednesday night. In the last 36 hours, we’ve currently seen over 100,000 emoji links created!!

Ok, but why?

A friend challenged me to build a link shortener over the weekend. Initially I set out to build a link shortener that would a generate a random selection of words. ex. http://🍕💩.ws/pizza-king — but while writing the logic for selecting words from a dictionary, I realized it would be more fun to use emoji.


Building linkmoji

I grabbed a bunch of my favorite emoji, put them into a comma separated array, and started hacking away at a web app.

var dictionary = [
"🐕", "😱", "😸", "💩",
... way more emoji ...
"🔑", "📦", "👍", "👑"
];

Next I built a function that recursively iterates and generates a string of emoji. At our current count we have 100+ emoji supported. The algorithm selects one of the 100, removes that emoji from the list, then randomly selects from the remaining emoji until the total number of emoji characters is reached. (100 x 99 x 98 x 99 x 98 x 97 x 96 x 95 = 8,327,010,517,056,000 (8 quadrillon 😱) potential linkmojis. It is quite doubtful we’ll ever use up all possible combinations, but in the meantime I’ll keep adding more emoji to the dictionary.
Once a string of emoji is generated, it is saved to Parse. I set up a beforeSave function to query the links table to check if any other link has the same emoji and to generate a new one if it already exists. This should prevent emoji collisions.

The way I generate textmoji is by first creating a JSON object that maps emoji to English words. I then convert the emoji string into an array, iterate through, and build textmoji strings (one with, and one without hyphens). Here is the map of emoji to text.

var map = {
"🐕" : "doge",
"💩" : "poop",
... way more mapping ...
"👍" : "thumbsup",
"👑" : "crown",
}

I uncovered several issues with how Javascript handles unicode. Since unicode uses more space than a normal string character, it requires different handling. The current implementation of JS doesn’t support easily iterating through strings with unicode, but I found this function that converts the unicode string into an Array. An array is exactly what I needed for generating these strings as I use each emoji as a key when looking up the corresponding text value for each mapped object. (👑 -> “crown”).
From here it was all a matter of displaying the information after the user had submitted their links. This is done by rendering an html file converted to ejs, passing the linkmoji and txtmoji urls to the template, rendering and sending to the browser (all handled by ExpressJS and Parse Webhosting).

Visiting a linkmoji

Because I don’t know whether a visitor is providing a linkmoji, textmoji, or textmoji without hyphens, I OR together multiple several Parse queries and take the first, oldest link by create date. I also update the view count and then route the user. Here’s the code:


The Launch

Around 6pm Wednesday I tweeted out a very roughly hacked together website.

Another app built for fun!

George sees my tweet and sends me a message offering to do give it a real design. I happily accept.

Disclaimer: George and Eric both work on the Parse team (acquired by Facebook 👍). Linkmoji is a personal project they build on their own time.

An hour later someone from twitter suggests I post on Product Hunt.

I make put together a funny cat + glasses linkmoji for ProductHunt and tag Ryan Hoover.

I wasn’t going to post to PH until I saw the CEO cheer me on.

We spend the next few hours adding features and tightening up the design and head.

I head to bed around midnight.

OMG!

I wake up to this message…

I jump on to see how many people are on the website and…

“wat”
“omfg”
The rest of the day is crazy!

People begin linking to us from everywhere!

We end the day #1 on Product Hunt!

🎉Yay!🎉

http://www.producthunt.com/tech/linkmoji

What’s next?

More fun features of course!

The initial version launched with only 6-emoji characters. Since then we’ve:

  • Added support for textmoji (converting emoji into text). We found that some linkmoji wasn’t shareable on some social networks. Txtmoji solves this. When you create a linkmoji, you’re given the option to copy the generated link or a text version. http://pizza-poop.ws
  • Added a SFW version of the link for people that don’t like sharing links with poop in them. http://🆒🔗.ws
  • And by popular demand, I am adding a way to customize emoji!

That’s all!

Follow @linkmoji on Twitter.

I challenge you to keep building awesome stuff!

The text all the way at the bottom that only a special few will read…

Thanks to everyone who read this far, to those who love making linkmoji, shared ideas, previewed this draft, put up with my crazy ideas, and to those who upvoted on Reddit, HackerNews, ProductHunt, Facebook, Twitter, and everywhere else! ❤

- Eric 🍕, co-creator of linkmoji (and other silly internet things)