Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 07, 2019

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

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

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 07, 2019
Tweet

Transcript

  1. ☕ Тим Чаптыков vk.com/tc @chaptykov

  2. постправда токсичность

  3. постправда токсичность 2016 2017 2018 Слово года по версии Oxford

    Dictionaries
  4. ֆจࣈ Тим Чаптыков vk.com/tc @chaptykov

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

    старых ошибок — Замена эмоджи в тексте на изображения — Сборка, спрайты, оптимизация, нейминг
  6. Что нужно знать об эмоджи?

  7. История

  8. :-) 
 Запад *_* Япония Ƒ.Ƒ 
 Корея ⯝
 Китай

  9. Каомоджи http://kaomoji.ru (˶ω˶)ů

  10. Шигетака Курита Дизайнер интерфейсов

  11. Пиктограммы с использованием
 эмоджи в i-mode

  12. Текст с использованием 
 эмоджи в i-mode

  13. Набор эмоджи на телефоне DoCoMo 2008 год

  14. The Original Emoji Музей современного искусства, Манхэттен

  15. Николя Лауфрани Глава Smiley

  16. None
  17. 2010 Apple и Google вносят предложение 
 о внесении эмоджи

    в Unicode
  18. Japanese 
 post office U+1F3E3 European 
 post office U+1F3E4

  19. Grinning face U+1F600 Grinning face 
 with squinting eyes U+1F604

  20. None
  21. Эмоджи — это текст

  22. Количество символов ''.length // 2

  23. Кодировки

  24. None
  25. None
  26. None
  27. None
  28. None
  29. ASCII 128 символов

  30. None
  31. KOI8 256 символов

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

    алфавитов, совместимая с ASCII. Использовалась, как основная русская кодировка в Unix-совместимых ОС.
  33. KOI8-R Русский KOI8-U Украинский KOI8-T Таджикский

  34. None
  35. None
  36. None
  37. Обратная совместимость

  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 Привет нердам
  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
  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
  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 (◕‿◕)ὑ
  42. CP1251 256 символов

  43. CP1251 Windows-1251 Восьмибитовая кодировка для кириллических алфавитов. Использовалась, как основная

    русская кодировка в Windows.
  44. None
  45. None
  46. None
  47. Теперь мы можем верстать так, как завещал А. Лебедев в

    § 62 своего „Ководства“», — пронеслось в моей голове… «
  48. ВКонтакте и CP1251

  49. ВКонтакте и CP1251 — Контент в БД — Кодировка страниц

    — Некоторые исходники
  50. ВКонтакте и CP1251 — Контент в БД — Кодировка страниц

    — Некоторые исходники (ϊ°ӹ°)ϊ
  51. 256 символов — мало.

  52. Unicode 1991 65 536 символов

  53. 216 = 65 536

  54. 01111101 01110101 0x7d75 ֆ 01100101 10000111 0x6587 จ 01011011 01010111

    0x5b57 ࣈ
  55. 65 536 символов — тоже мало. (›ớ‹,)

  56. UTF-16 1 112 064 символа

  57. None
  58. Принцип кодирования

  59. None
  60. 220 + 216 − 2048 = 1 112 064

  61. Количество символов ''.split('').map((s) => { 
 return s.charCodeAt(0).toString(16); 
 });

    // ["d83d", "de00"] 

  62. UTF-16 str.split() str.charCodeAt() String.fromCharCode() Unicode Array.from() str.codePointAt() String.fromCodePoint()

  63. Количество символов Array.from('').length // 1 


  64. Но… Array.from('.').length // 7 


  65. Стандарт

  66. None
  67. Variations

  68. U+2600 U+FE0F

  69. Keycaps

  70. U+0031 U+20E3

  71. None
  72. 0 1 2 3 4 5 6 7 8 9

    : ;
  73. Разобрать на байткод encodeURIComponent('').replace(/%/ig, ''); 
 
 // "F09F988C" 


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

    
 // "*%EF%B8%8F%E2%83%A3" 
 
 Цифры и * — безопасные символы 
 для URI и не заменяются
  75. Flags

  76. Enclosed Alphanumeric Supplement

  77. None
  78. Skin tones

  79. Шкала Фитцпатрика U+1F3FB — U+1F3FF

  80. None
  81. ZWJ Sequences

  82. Zero-width joiner

  83. None
  84. None
  85. None
  86. Tag sequences

  87. None
  88. Hair 2018

  89. None
  90. None
  91. Backspace

  92. Количество символов Array.from('.') // ["", "", "", "", "", "",

    ""]
 ZWJ — непечатный символ
  93. Регулярные выражения

  94. Зачем? — Заменять эмоджи на изображения — Выводить подсказки для

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

    PCRE — CP-1251 в исходниках и данных на сервере — Производительность — Толерантность к отступлениям от стандарта и отсутствие ложных срабатываний
  96. lodash/lodash /.internal/unicodeWords.js

  97. Вариант Lodash const rsEmoji = ( `(?:${[rsDingbat, rsRegional, rsSurrPair].join('|')})${rsSeq}` );

    [\\ud800-\\udbff][\\udc00-\\udfff]
  98. \u JavaScript charCode \x PCRE codePoint

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

    // true 

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

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

  102. JS 1023 + 1023 PHP 1023 × 1023 [\\ud800-\\udbff][\\udc00-\\udfff]

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

    «Регулярка не для этого была предназначена»
  104. mathiasbynens/emoji-regex

  105. Emoji Properties — Emoji — Emoji_Presentation — Emoji_Modifier — Emoji_Modifier_Base

    — Emoji_Component — Extended_Pictographic
  106. Unicode property escapes const regexGreekSymbol = /\p{Script_Extensions=Greek}/u; 
 regexGreekSymbol.test('π'); //

    true
 

  107. Unicode property escapes 
 in JavaScript regular expressions mathiasbynens.be/notes/es-unicode-property-escapes

  108. ES2018: Emoji regexp const regex =/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?
 |\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu; 
 
 


  109. ES2018: Emoji regexp const regex =/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?
 |\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu; 
 
 


  110. Unicode properties + JS RegExp

  111. Поддержка в браузерах — Chrome 64+ — Safari TP 42

    (Ň›ớ‹Ň)
  112. Плагин для Babel github.com/babel/babel/blob/master/packages/babel-plugin- proposal-unicode-property-regex/README.md

  113. emoji-regex github.com/mathiasbynens/emoji-regex

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

    без U+FE0F и поддерживаются операционными системами — Если мы игнорируем U+FE0F, то получим неприятные ложные срабатывания
  115. Regex101 regex101.com Unicode Emoji data files unicode.org/Public/emoji/12.0 Full Emoji List

    12.0 unicode.org/emoji/charts/full-emoji-list.html
  116. Заключение

  117. O ☠ Ничего страшного

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

    символов — Разобрать на Unicode-символы — Найти описание Unicode-символов
  119. Разобрать на UTF-16 слова ''.split('').map((s) => { 
 return s.charCodeAt(0).toString(16);

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

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


    }); 
 // ["1f4aa", "1f3fb"] 
 
 Эмоджи «flexed bicep» 
 со светлым цветом кожи
  122. Эмоджипедия emojipedia.org

  123. None
  124. U

  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
  126. Тим Чаптыков vk.com/tc @chaptykov