CodeFest 2019. Тимофей Чаптыков (ВКонтакте) — Пара слов об эмоджи

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 07, 2019

CodeFest 2019. Тимофей Чаптыков (ВКонтакте) — Пара слов об эмоджи

Всё ли так просто с эмоджи? Разберемся, что такое эмоджи, сколько их, какие они бывают, как добавляются новые эмоджи в стандарт, как их найти в тексте, и хорошая ли идея заменять эмоджи на собственные картинки.

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 07, 2019
Tweet

Transcript

  1. 5.

    Рефакторинг эмоджи в VK — Поддержка всех эмоджи — исправление

    старых ошибок — Замена эмоджи в тексте на изображения — Сборка, спрайты, оптимизация, нейминг
  2. 16.
  3. 20.
  4. 24.
  5. 25.
  6. 26.
  7. 27.
  8. 28.
  9. 30.
  10. 32.

    КОИ-8 код обмена информацией, 8 бит Восьмибитовая кодировка для кириллических

    алфавитов, совместимая с ASCII. Использовалась, как основная русская кодировка в Unix-совместимых ОС.
  11. 34.
  12. 35.
  13. 36.
  14. 38.

    11110000 11010010 11001001 11010111 11000101 11010100 00100000 11001110 11000101 11010010

    11000100 11000001 11001101 F0 D2 C9 D7 C5 D4 20 CE C5 D2 C4 C1 CD Привет нердам
  15. 39.

    F0 D2 C9 D7 C5 D4 20 CE C5 D2

    C4 C1 CD 11110000 11010010 11001001 11010111 11000101 11010100 00100000 11001110 11000101 11010010 11000100 11000001 11001101 0 0 0 0 0 0 0 0 0 0 0 0 0
  16. 40.

    F0 D2 C9 D7 C5 D4 20 CE C5 D2

    C4 C1 CD pRIWET NERDAM 11110000 11010010 11001001 11010111 11000101 11010100 00100000 11001110 11000101 11010010 11000100 11000001 11001101 0 0 0 0 0 0 0 0 0 0 0 0 0
  17. 41.

    F0 D2 C9 D7 C5 D4 20 CE C5 D2

    C4 C1 CD pRIWET NERDAM 11110000 11010010 11001001 11010111 11000101 11010100 00100000 11001110 11000101 11010010 11000100 11000001 11001101 0 0 0 0 0 0 0 0 0 0 0 0 0 (◕‿◕)ὑ
  18. 44.
  19. 45.
  20. 46.
  21. 47.

    Теперь мы можем верстать так, как завещал А. Лебедев в

    § 62 своего „Ководства“», — пронеслось в моей голове… «
  22. 57.
  23. 59.
  24. 66.
  25. 69.
  26. 71.
  27. 74.

    Разобрать на байткод encodeURIComponent(''); 
 // "%F0%9F%92%8B" 
 
 encodeURIComponent(';');

    
 // "*%EF%B8%8F%E2%83%A3" 
 
 Цифры и * — безопасные символы 
 для URI и не заменяются
  28. 75.
  29. 77.
  30. 80.
  31. 83.
  32. 84.
  33. 85.
  34. 87.
  35. 88.
  36. 89.
  37. 90.
  38. 91.
  39. 92.
  40. 95.

    Специфика — PHP, JS
 поддержка регулярных выражений на JS и

    PCRE — CP-1251 в исходниках и данных на сервере — Производительность — Толерантность к отступлениям от стандарта и отсутствие ложных срабатываний
  41. 100.

    JavaScript RegExp & Unicode /\u{1F600}/u.test(''); // true 
 
 /\uD83D\uDE00/u.test('');

    // true 
 Не забываем про флаг /u 
 для регулярок с Юникодом
  42. 103.

    Выводы — «Ну, не надо было конвертировать куда попало» —

    «Регулярка не для этого была предназначена»
  43. 114.

    Толерантность и U+FE0F Текстовая версия github.com/mathiasbynens/emoji-regex/blob/master/text.js — Некоторые Emoji используются

    без U+FE0F и поддерживаются операционными системами — Если мы игнорируем U+FE0F, то получим неприятные ложные срабатывания
  44. 118.

    Алгоритм — Разобрать на UTF-16 символы — Найти описание UTF-16

    символов — Разобрать на Unicode-символы — Найти описание Unicode-символов
  45. 119.

    Разобрать на UTF-16 слова ''.split('').map((s) => { 
 return s.charCodeAt(0).toString(16);

    
 }); // ["d83d", "dd25"] Суррогатная пара, указывающая 
 на символ 0x1f525
  46. 121.

    Разобрать на Unicode-символы Array.from('U').map((s) => { 
 return s.codePointAt(0).toString(16); 


    }); 
 // ["1f4aa", "1f3fb"] 
 
 Эмоджи «flexed bicep» 
 со светлым цветом кожи
  47. 123.
  48. 124.

    U

  49. 125.

    Unicode Technical Standard: Unicode Emoji unicode.org/reports/tr51 Презентация об эмоджи unicode.org/emoji/slides.html

    История эмоджи medium.com/@k4i/japanese-emoji-1-bf150c2825d1 VK Tech vk.com/tech