DEV Community

Cover image for Project Nineteen: Emoji
Valeria
Valeria

Posted on

2

Project Nineteen: Emoji

🎄 Ho-ho-ho! Christmas is almost there and I hope you're all ready to spread the holiday cheer 🎉

Which in written form wouldn't be possible without emojis!😍

Oh, those little pictures can make or break a relationship! A plain message without them sounds very serious and in some cases even angry 😅

Any more or less informal communication pretty much requires emojis - comments, posts, messages - you name it.

So what do you say about implementing an emoji keyboard and diving a bit into unicode symbols?

Emoji Keyboard: requirements and recipe

As a user I want to be access a table of available emojis so that I would be able to quickly pick and use one

The best example I can think of is Slack's implementation:

Slack emoji keyboard with search bar showing

Of course, you don't need to neither support all the features it has nor limit yourself, as long as the keyboard meets the requirements:

Requirements

  1. User should be able to open and close emoji keyboard
  2. User should be able to see all available emojis
  3. User should be able to search through them
  4. Keyboard should be accessible: i.e. all the labels should be present and navigation should be possible through keyboard

Recipe

  1. Create static layout for emojis table
  2. Add 3-4 emojis
  3. Implement logic of adding selected emoji to a e.g. textarea
  4. Add a search bar
  5. Ensure accessibility
  6. Store all available emojis in an object
  7. Implement search functionality
  8. Add the appear/hide toggle
  9. Enjoy 🤩

Hints

You can find all emojis, their names and codes in various unicode lists.

You can use Object.keys to get all available keys from a record to search by prefix or using a more complicated algorithm like soundex.

Hard Mode: Emoji Shortcodes

Slack, Github, Dev.to and plenty other services also allow users to type a special code for an emoji, e.g. :star: would turn into a "⭐".

I find this feature very useful! Much faster than using a full blown keyboard:

Slack input with

Not to mention that such renderer can be extended to support custom emojis 😎

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?

Buy Me A Coffee

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay