Imojify: my first JavaScript library

In which Dan finds a project other than Trntxt.uk to blog about, and says ’emoji’ 11 times.

TL;DR: I made Imojify, a library that converts emoji in :colon: notation into their graphical equivalents. It’s on GitHub, NPM and Bower.

On Monday morning I had an idea for a brilliant JavaScript library, but I couldn’t do anything with it because I had to go to work then I had a choir rehearsal. I got back from choir at 10pm with the idea still in my head along with some very catchy Christmas songs.

I had a working (but buggy) prototype by 1am.

The idea was a library that could convert colon notation emoji into their PNG image equivalent. For the uninitiated, colon notation is often used in chat services such as Gitter and Slack. It consists of a word or phrase wrapped inside a colon, such as :angry: or :stuck_out_tongue:. The big benefit of this sort of emoji is accessibility – if the picture isn’t rendered for whatever reason (e.g. for a blind person using a screen reader), it is still possible to understand what the author meant.

Using colon emoji in Slack

The prototype looked for any elements in the HTML with the imojify class then replaced any instance of text inside colons with a <span> element of a particular class matching the text inside the colons. A CSS file would then apply the relevant image to the span’s background. The system worked fine for simple cases, but could break the appearance of pages pretty easily.

I mentioned it to the JSOxford Slack group on Tuesday evening, then before I had woken up on Wednesday morning, I had a couple of feature requests, 3 bugs were reported on GitHub and 2 of them had already been fixed by Marcus!

GitHub emails from Marcus

Open source is amazing.

Licensing

I was originally using the pack of images from emoji-cheat-sheet.com, but its license was unclear. It looked like the images had been ripped from OSX, possibly without Apple’s permission. Perhaps they had special permission to use those images, but it wasn’t clear as to whether that permission was granted to me.

So instead, Danielle told me about Twitter’s Twemoji library, which has a very clear license, the images look nicer and they’re vector graphics so will look amazing on every screen. It took a little bit of effort to update my code to make it work, but the improved quality and peace of mind with the licence made it worth it.

You can never have too much emoji

One of the things I’m keen on emphasising here is the use of custom emoji. Just like in the Slack chat client, you can upload any image, give it a name and use it as an emoji when chatting:

jsoxford_custom_emoji.png

In my library, you can add custom emoji to a certain folder and build the library. The CSS would then have been updated to the accommodate the new emoji.

I’ve published the library on NPM and Bower, so it’s easy to pull a copy of my library into your project.

It’s been a great first few days with this open source library. I’m open to suggestions, issues and contributions to the library, and I’m looking forward to seeing this project mature over the next few weeks.

Check out imojify.com for a demo of how to use it in your own website.

Advertisements

One thought on “Imojify: my first JavaScript library

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s