Emojis as Website URLs 🤔

So here's a completely useless, yet mildly interesting idea I was fiddling with not that long ago — can you use emojis as URLs in a website? Maybe the more important question would be: should you? However, since I care more about the technical implications, I'm going to let someone else figure out the answer to that.

So, is there a solution?

Long story short, yes. I figured out a pretty straight forward solution for handing this, and it involves encoding emojis into URIs, and mapping them to routes on the server.

Why encode them? — you might ask

The answer is simple: because that's what the browser does when it executes the HTTP Request. So if you're using an emoji in your website URL, the browser encodes it into a URI and that's the route your server is called on.

Here's how you encode an emoji

encodeURI('😊') // Result is "%F0%9F%98%8A"

Armed with this knowledge and with a burning desire for mischief, I started putting together a solution that offers emoji support for the basic routes of a website (think contact, pricing, terms, privacy, etc.)

This is how emoji-express 🚂 was born 🎉🎉🎉

Emoji express is an open source npm package, designed to be working with the popular express framework for NodeJS, so I though the name was fitting.

Initially it could do two things:

• Add emoji support to a website with 2 lines of code
• Let the user specify a custom string of emojis, that will redirect to a specific route in their website

Some examples would be:

/contact route

https://boardme.app/📮

/pricing route

https://boardme.app/💳

Then I received a request on twitter for a really interesting problem

Translating emojis from URLs automatically

To be able to solve this, you'd have to have the name of every single valid emoji, and all those names would have to be formatted to be URI compliant.

So for example:

https://example.com/🦇🚶‍♂️

would be translated to: https://example.com/batman-walking

https://example.com/🔥-in-the-🕳️

would be translated to: https://example.com/fire-in-the-hole

It seemed like a straight forward enough problem if I can get my hands on the data; so I started looking for emoji datasets online, and sure enough I found the complete emojipedia dataset, that contained the emojis and their names.

A couple nodejs scripts later, I had an array of all the emojis, with their names normalized, and their associated URIs

[
...
{
        "emoji": "🐢",
        "name": "turtle",
        "URI": "%F0%9F%90%A2"
    },
    {
        "emoji": "🦎",
        "name": "lizard",
        "URI": "%F0%9F%A6%8E"
    },
    {
        "emoji": "🐍",
        "name": "snake",
        "URI": "%F0%9F%90%8D"
    },
...
]

One last problem to solve - emoji modifiers

I thought - OK problem solved, I'll just need to run a find-and-replace on the route, basically finding the URI and replacing it with the emoji name.

NOPE.

Turns out, there are URIs that share the same base, but they are decorated with emoji modifiers to express the type of the emoji. (e.g. male/female, color, size etc.)

So, how do we make sure we are replacing the right URI? The answer is simple yet again: a decorated URI should be technically longer in size than a non-decorated URI

We are going to sort the emojis based on the length of their URI, before initiating the find-and-replace 💡

const emojisSorted = emojis.sort( (a, b) => ( a.URI.length < b.URI.length ) ? 1 : -1 );

That is all it took! emoji-express now has automatic emoji translate support for routes 🎉

Granted, there isn't much use for it, but it was a fun pet project to pick up. Feel free to take it for a ride!