Emojis

I've met a task related to the emojis on the front-end side, so I decided to make a public talk about learned and found.

Transcript

1. 2017 @arturparkhisenko 1 " " + "" + " " === " " "" it’s ZWJ
2. Parsing emoji in Javascript is… � not easy " ".length ? 11! 2 ◉︵◉
3. It does not make sense to have a string without knowing what encoding it uses. And There Ain’t No Such Thing As Plain Text. 3 About
4. 1963-1965 - ASCII and ECMA-6, 7 bit 1982 - emoticons, 1991 - Unicode 1994 - UTF-7 is not a Unicode 2003 - UTF-8 aka EASCII, 8 bit, 4 bytes 2006 - The Unicode Standard 5.0 #51 2017 - The Unicode Standard 10.0 History, ಠ_ಠ 4
5. History 5 source
6. Unicode (Universal Coded Character Set) Each char/symbol has a codepoint 65,536 code points * 17 planes = 1,114,112 cp ASCII is a first 128 symbols/chars of the UTF-8, also there’s only 95 printable characters. History 6
7. :( :) :‑) ;) :D :P XD =) @}->-- o_O (*_*) ^_^ -_- ( ͡ ° ͜ʖ ͡ °) (/◕ヮ◕)/ (=^··^=) ¯\_(ツ)_/¯ Emoticons 7
8. In 1999 the Japanese telecom NTT DOCOMO released the original 176 emoji. Today is there around 2600+ emoji. UNICODE: Mark Davis(Google), Peter Edberg(Apple). Unicode with Emoji 8
9. MacOS cmd(⌘)+ctrl+space Emoji pickers 9 Windows win+. or win+;
10. Are there any designers? 10
11. Emoji in Win 10 before and after the Anniversary Update 11
12. Fitzpatrick skin type in Unicode 8.0 Emoji Modifiers 12 Default 1-2 3 4 5 6
13. Numeric Character References 10 - decimal: & (&) 16 - hexadecimal: & (&) Usage HTML 13
14. <style> . { display: block; } . { display: none; } </style> <b class=" " onclick="\u1F43C()"> () &#x2665; &#9829; &hearts; ♥ </b> Usage HTML/CSS 14
15. . { /* <unicode-range> values */ unicode-range: U+26; /* 1 codepoint */ unicode-range: U+0-7F; unicode-range: U+0025-00FF; /* range */ unicode-range: U+4??; /* wildcard range */ unicode-range: U+0025-00FF, U+4??; /*mult*/ } UsageCSS 15
16. JavaScript encoding is UTF-16 16 Usage in JS
17. Number(128169).toString(16) // "1f4a9" parseInt('0000', 16) // 0 parseInt('007f', 16) // 127 parseInt('11111111', 2) // 255 Number(255).toString(2) // "11111111" 17 Usage in JS
18. All hexadecimal code points must be 4 characters. Use: ''.padStart(4, '0'); \u41 // This is invalid \u0041 // This is valid All hexadecimal code points are case insensitive. '\uD83D' or '\ud83d' Hexadecimal can be represented in two ways: '\u0041' and '0x0041' 18 Usage in JS
19. H e l l o U+0048 U+0065 U+006C U+006C U+006F 72 101 108 108 111 Usage in JS 19
20. String.fromCharCode(0x004a, 0x0053) // JS String.fromCharCode(74, 83) // JS String.fromCodePoint(0x2665) // ♥ 20 Usage in JS
21. // unicode code point escapes, for U+000000 -> U+10FFFF '\u{41}' - 'A' // ES6: Unicode code point escapes '\u{1F4A9}' - // up to 6 hexademical digits 21 Usage in JS
22. 'JS'.charCodeAt(0) // 74 - doesn’t work with emoji 'JS'.codePointAt(0) // 74 - use this! (surrogate pair) '\uD800\uDC00'.codePointAt(0) // 65536 22 Usage in JS
23. 23 [...' '] === [" ", "", " "] Usage in JS with ZWJ ZWJ is U+200D
24. 24 [" ", "", " ", "", " "] .reduce((prev, curr) => prev + curr) === " " Usage in JS with ZWJ
25. ' '.replace(' ', ' ') // ' '.replace(' ', '') // ' '.replace(' ', ' ') // Usage in JS with ZWJ 25
26. [...' '] (2) [" ", " "] Usage in JS with ZWJ 26
27. 27 The recommended maximum font size for emoji is 54px. (Tested May 2017, ch62 - 126px)
28. ☃ 28
29. Can i use emoji ? Edge Firefox Chrome Safari yes yes yes yes 29 caniemoji.com some OS fonts support But ask your font first!
30. 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 КБ */ Fonts 30 source
31. Of course browsers are sup-posed to use fallback fonts.. but Polyfills could be done with symbol parsing and replace with a usual img. gist.github.com/mwunsch/4710561 Usage in JS 31
32. This is why i never buy iPhoneX 32
34. 34 Waldo, Episode 3, Series 2
35. • twitter-symbols all , emoji-cheat-sheet - for a GitHub, search icon • https://www.bram.us/2016/08/27/fun-with-javascript-and-emoji/ • https://medium.com/reactnative/emojis-in-javascript-f693d0eb79fb • https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolute ly-positively-must-know-about-unicode-and-character-sets-no-excuses/ • https://en.wikipedia.org/wiki/Plane_%28Unicode%29#Basic_Multilingual_Plane • https://www.smashingmagazine.com/2016/11/character-sets-encoding-emoji/ • http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript • http://jkorpela.fi/html/characters.html • whats-emoji , how-i-didnt-fix-in-chrome , or-how-i-didnt-fix-emoji-in-chrome Standards • https://www.unicode.org/versions/Unicode10.0.0/ and RFC3986 for urls • https://www.unicode.org/emoji/charts/emoji-zwj-sequences.html • https://unicode.org/emoji/charts-5.0/emoji-list.html and https://unicode.org/Public/emoji/6.0/ Libs emojione and twemoji and fromCodePoint polyfill About size • https://tobireif.com/posts/maximum_font_size_for_emoji/ • https://twitter.com/wesbos/status/650006363041497088 Video • https://vimeo.com/76597193 + https://mathiasbynens.be/notes/javascript-encoding • https://youtu.be/_H1s9wBOqp8 URL’s 35 freeformatter
36. ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜ ⬜ ⬜⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜ ⬜⬜ ⬜ ⬜ ⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜ ⬜ ⬜⬜⬜ ⬜⬜ ⬜ ⬜ ⬜ ⬜⬜⬜ ⬜ ⬜ ⬜ ⬜ ⬜⬜⬜⬜ ⬜⬜ ⬜ ⬜ ⬜⬜⬜ ⬜ ⬜ ⬜ ⬜ ⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜⬜⬜ ⬜ ⬜⬜⬜ ⬜⬜⬜ ⬜ ⬜ ⬜ ⬜⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜⬜⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜ ⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ Emojilate 36
37. URL: https://goo.gl/9GVazH Thanks! Questions? ^‿^ 37 2017