Что не так с Emoji

👨‍💻 О себе

1. 👨 Алексей Авдеев (https://github.com/avdeev)
2. 🏙️ Из Нижнего Новгорода, работаю в Москве
3. 🌐 Neuron.Digital
4. 👔 Руковожу командой из 8 фронтенд-разработчиков
5. 👴 Программирую с 2002 года
6. 🤹 Сейчас активно использую React

Эмоджи —
это круто! 💖

Эмоджи
vs
Эмотикон

Эмотиконы

Эмотиконы (каомодзи)

Язык идеограмм

Язык идеограмм

Эмоджи
vs
Эмодзи

Родина эмоджи

❓Первые эмоджи

⬆️ Unicode version history

The Unicode Emoji Subcommittee 👨‍💼

The Unicode Emoji Subcommittee 👨‍💼

📄 Unicode®
Technical Standard
#51

🏳️ Флаги

Мод. Фитцпатрика 🏻 🏼 🏽 🏾 🏿

Группировки

U+200D ZERO WIDTH JOINER (HTML ‍ ‍)

http://unicode.org/emoji/charts/emoji-zwj-sequences.html

Группировки

Группировки

Группировки

Группировки

Клавиатуры emoji ⌨️

1. 📱 Android 4.3
2. 📱 iOS 5
3. 🖥️ Windows 8.1
4. 🖥️ OS X 10.7 Lion
5. 🤔 Не очень трудно самому написать такую клавиатуру

Новинки 2018 🆕

Расширение семей

Эмоджи
сломаны 💔

⛑️ Плохая
поддержка

𒀂 𒀂 𒀂

😐 Множество
реализаций

🔣 Шрифты

      font-family:
        "Apple Color Emoji", /* iOS, macOS - 34.3 МБ */
        "NotoColorEmoji", /* Google (Android, Linux) - 6.92 МБ */
        "Segoe UI Emoji", /* Windows - 660.45 КБ */
        "Segoe UI Symbol", /* Windows */
        "EmojiSymbols"; /* Open Source - 231 КБ */
    

🖼️ Или наборы картинок

1. Facebook
2. Twemoji (Twitter Emoji for Everyone)
3. ВК
4. emojidex (emojidex emoji-as-a-service)
5. можно разобрать шрифт по символам

🤷 Проблемы
совместимости

🤷 Проблемы совместимости

🤷 Проблемы совместимости

Tear-Off
Calendar 📆

Heart Eyes

Grimacing

Scream

🥅 Spec Goals

http://unicode.org/reports/tr51/

📝 Design Guidelines

Ошибок ещё много

👌 Решение

      Hello, world! 👋, 🌎!
    

      Hello, world!
      <img alt="👋" src="/apple40/1f44b.png">,
      <img alt="🌎" src="/apple40/1f30e.png">!
    

https://github.com/Julia-Lavrova/emoji-js

👌 Решение

      parseEmoji('😍🍕👉👿💖');
    

      <img alt="😍" src="/apple40/1f60d.png" />
      <img alt="🍕" src="/apple40/1f355.png" />
      <img alt="👉" src="/apple40/1f449.png" />
      <img alt="👿" src="/apple40/1f47f.png" />
      <img alt="💖" src="/apple40/1f496.png" />
    

https://github.com/Julia-Lavrova/emoji-js

1️⃣ Для одиночных эмоджи

      '🤙'
        .charCodeAt(0)
        .toString(16); // d83e
    

*️⃣ Универсальное

      '👩🏿'
      .split('')
      .reduce((result, currentChar) => {
        const code = currentChar.charCodeAt(0).toString(16);
        const code4 = `000${code}`.substr(-4);
        return `${result}\\u${code4};`
      }, ''); // \ud83d\udc69\ud83c\udfff
    

*️⃣ Универсальное

      const reg = new RegExp('
        \ud83d\udc69\ud83c\udfff|\ud83e
      ', 'g');
    

      txt.replace(reg, (match, p1) =>
        `<img src="/apple40/${toCodePoint(p1)}.png" alt="" />`
      );
    

Авторское право ©

Авторское право ©

https://developer.apple.com/app-store/review/guidelines/#intellectual-property

Что делать❓

👨‍💻 Разработчикам

1. Поддерживает ли ваш проект эмоджи
2. Системные шрифты или свой набор
3. Какую версию эмоджи поддерживать
4. Лицензия

👨‍🎨 Дизайнерам

1. Не придумывать свою реализацию эмоджи
2. Развивать существующие реализации
3. Следить за совместимостью
4. Лучше рисуйте стикеры 😀

Бонус 🎰

Как потроллить разработчика 👹

Материалы ℹ

1. http://unicode.org/reports/tr51/
2. https://emojipedia.org
3. http://www.emojination.org
4. https://github.com/Julia-Lavrova/emoji-js

Берегите
эмоджи 🛡