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

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

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
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
21. Эмоджи — это текст
22. Количество символов ''.length // 2
23. Кодировки
29. ASCII 128 символов
31. KOI8 256 символов
32. КОИ-8 код обмена информацией, 8 бит Восьмибитовая кодировка для кириллических алфавитов, совместимая с ASCII. Использовалась, как основная русская кодировка в Unix-совместимых ОС.
33. KOI8-R Русский KOI8-U Украинский KOI8-T Таджикский
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.
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 символа
58. Принцип кодирования
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. Стандарт
67. Variations
68. U+2600 U+FE0F
69. Keycaps
70. U+0031 U+20E3
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
78. Skin tones
79. Шкала Фитцпатрика U+1F3FB — U+1F3FF
81. ZWJ Sequences
82. Zero-width joiner
86. Tag sequences
88. Hair 2018
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
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