🎉🐱✨or: How I didn’t fix emoji in Chrome

Last year, in the dark days of the web, Chrome couldn’t render emojis. I tried to fix it, failed, and have been making silly emoji related apps ever since.

Transcript

1. ✨ @notwaldorf
4. ☃
5. U+26C4 ☃
6. “\u26C4” ☃
7. “‚”.length == 1 ☃
9. U+1F43C
10. "".charCodeAt(0).toString(16)
11. \uD83D \uDC3C
12. “”.length == 2
13. )
14. ) U+1F43C
15. U+1F43C
16. \ud83d \udc81 \ud83c \udffe
17. ) “)”.length == 4
19. ok so fonts
20. AppleColorEmoji Segoe UI Symbol/Emoji Noto
21. AppleColorEmoji Segoe UI Symbol/Emoji Noto panda_face.png lolololololol
26. if you can’t fix the problem be the problem
29. @muan made emojilib { "grinning": { "keywords": ["face", "smile", "happy", "joy"], "char": "", "category": "people" } }
35. <meta charset="utf-8"> <title></title>
36. <meta charset="utf-8"> <title></title> <div></div>
37. . <div></div>
38. . { font-size: 40px; } <div class=“ ”></div>
39. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function ok() { . alert('hi'); . . }
40. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function ok() { alert(‘ '); }
41. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function ok() { alert(‘ '); }
42. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function ok() { alert(‘ '); }
43. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function ok() { alert(‘ '); }
44. . { font-size: 40px; } <div class=“ ” onclick=“\u1F43C()”></div> function \u1F43C() { alert(‘ '); }
45. . { font-size: 40px; } <div class=“ ” onclick=“\u1F43C()”></div> function \u1F43C() { alert(‘ '); }
46. @notwaldorf ❤