How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome

Two years ago, in the dark days of the web, Chrome couldn’t render emojis. Monica tried to fix it, failed, and has been obsessed with bringing unicode to the people ever since. Why do you sometimes get a square instead of a 🍕 if you type U+1F355?
How do skin coloured emoji work? How do you add a dinosaur emoji to the spec, which is decidedly lacking? If you’ve ever asked any of these questions, this talk is for you.

Transcript

1. H O W I D I D N ’ T F I X I N C H R O M E Ⓜ ℹ
2. @NOTWALDORF
3. @NOTWALDORF
7. :-)
8. ( ´ ̙ ` ).Ň̾ὑ
9. 1998 SHIGETAKA KURITA
16. 2000 CHAOS TBH
17. 2009 UNICODE 5.2
18. +27 2009
19. +994 2010
20. OSX 10.7 2010
21. 2016 +72
24. BUT WHAT IS IT OK
25. ASCII 128 CHARACTERS
28. “A”.LENGTH 1
29. “A”.CHARCODEAT(0)
30. .TOSTRING(16) “A”.CHARCODEAT(0)
31. ⛅
32. ⛅ U+26C5
33. ⛅ “⛅”.LENGTH 1
34. ⛅ “⛅”.CHARCODEAT(0) .TOSTRING(16)
35. “”.LENGTH 2
36. U+1F43C
37. “”.CHARCODEAT(0) .TOSTRING(16)
38. “”.CHARCODEAT(1) .TOSTRING(16)
39. \uD83D \uDC3C
40. )*+ WHAT ABOUT
41. ) “)”.LENGTH 4
42. ) \uD83D \uDC81 \uD83C \uDFFE
43. )
44. ) […”)”] [“”, “”]
45. ) ”)”.REPLACE(//g,””)
46. / ”)”.REPLACE(//g,””)
47. +
48. + […”+”] [“”, “”]
49. * “*”.LENGTH 11
50. * [“”, “”, “”, “”, “”, “”, “”]
51. * ”*”.REPLACE(//g,””)
52. 5 ”*”.REPLACE(//g,””)
53. YEAH BUT CHROME
54. FONTS, THEMS A PICKLE
55. APPLE COLOR EMOJI SEGOE UI SYMBOL/EMOJI NOTO EMOJI
56. APPLE COLOR EMOJI SEGOE UI SYMBOL/EMOJI NOTO EMOJI PANDA_FACE.PNG lolololololol
57. BLINK
58. TEXT SHAPER BLINK
59. PAINTER TEXT SHAPER BLINK
60. PAINTER TEXT SHAPER BLINK
61. <style> span { font-family: “Comic Sans MS”, sans-serif; } </style> <span></span>
63. pls shape in Comic Sans MS
64. pls shape in Comic Sans MS nah. not a thing fam
65. pls shape in Comic Sans MS nah. not a thing fam in sans-serif fallback???
66. pls shape in Comic Sans MS nah. not a thing fam in sans-serif fallback??? noooope.
67. uhh in AppleColorEmoji? (a hunch)
68. uhh in AppleColorEmoji? (a hunch) oh for sure. here’s the shape and position!
69. uhh in AppleColorEmoji? (a hunch) oh for sure. here’s the shape and position! yay! skia, here’s a text blob ! TM
70. uhh in AppleColorEmoji? (a hunch) oh for sure. here’s the shape and position! yay! skia, here’s a text blob ! YASSS. hey user, i painted a !!! TM
71. uhh in Segoe UI Emoji? (a hunch) oh for sure. here’s the shape and position! yay! skia, here’s a text blob ! YASSS. hey user, i painted a !!! TM
72. uhh in A Custom Font? (a hunch) nah welp. i don’t know. YASSS. hey user, i painted a ⌷ !!!
74. ANYWAY
79. ANYWAY
80. PRACTICAL SHIT
81. EMOJILIB BY @MUAN { "grinning": { "keywords": ["face", "smile", "happy", "joy"], "char": "", "category": "people" } }
82. MEOWNI.CA/EMOJI-TRANSLATE
84. WORD ART BY @CDATA
85. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
86. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
87. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
88. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
89. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
90. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
91. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
92. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
93. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
94. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
95. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
96. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
97. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
98. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
99. ⌘ + ⌃ + SPACE TIME WI-FIS DEVICE NAMES ACTUALLY EVERY NAME TERMINAL PROMPTS EVERY TEXTFIELD ON THE INTERNET CODE
102. <title> </title> <div class=“ ” onclick=“ok ()”> </div> function ok() { alert(‘ '); }
103. <title> </title> <div> </div> function ok() { alert(‘ '); }
104. <title> </title> <div class=“ ”> </div> function ok() { alert(‘ '); }
105. . { font-size: 40px; font-style: italic; } <div class=“ ”> </div> function ok() { alert(‘ '); }
106. . { font-size: 40px; font-style: italic; } <div class=“ ” onclick=“ “> </div> function ok() { alert(‘ '); } hi()
107. . { font-size: 40px; font-style: italic; } <div class=“ ” onclick=“ “> </div> function hi() { alert(‘ '); } hi()
108. . { font-size: 40px; font-style: italic; } <div class=“ ” onclick=“ “> </div> function hi() { alert(‘ '); } ()
109. . { font-size: 40px; font-style: italic; } <div class=“ ” onclick=“ “> </div> function hi() { alert(‘ '); } ()
110. . { font-size: 40px; font-style: italic; } <div class=“ ” onclick=“ “> </div> function hi() { alert(‘ '); } ()
111. . { font-size: 40px; font-style: italic; } <div class=“ ” onclick=“\u1F43C()“> </div> function \u1F43C() { alert(‘ '); }
112. . { font-size: 40px; font-style: italic; } <div class=“ ” onclick=“\u1F43C()“> </div> function \u1F43C() { alert(‘ '); }
113. @NOTWALDORF