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

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

🎉🐱✨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.

Monica Dinculescu

December 23, 2015
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. ✨ @notwaldorf

  2. None
  3. None
  4. U+26C4 ☃

  5. “\u26C4” ☃

  6. “‚”.length == 1 ☃

  7. None
  8. U+1F43C

  9. "".charCodeAt(0).toString(16)

  10. \uD83D \uDC3C

  11. “”.length == 2

  12. )

  13. ) U+1F43C

  14. U+1F43C

  15. \ud83d \udc81 \ud83c \udffe

  16. ) “)”.length == 4

  17. None
  18. ok so fonts

  19. AppleColorEmoji Segoe UI Symbol/Emoji Noto

  20. AppleColorEmoji Segoe UI Symbol/Emoji Noto panda_face.png lolololololol

  21. None
  22. None
  23. None
  24. None
  25. if you can’t fix the problem be the problem

  26. None
  27. None
  28. @muan made emojilib { "grinning": { "keywords": ["face", "smile", "happy",

    "joy"], "char": "", "category": "people" } }
  29. None
  30. None
  31. None
  32. None
  33. None
  34. <meta charset="utf-8"> <title></title>

  35. <meta charset="utf-8"> <title></title> <div></div>

  36. . <div></div>

  37. . { font-size: 40px; } <div class=“ ”></div>

  38. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function

    ok() { . alert('hi'); . . }
  39. . { font-size: 40px; } <div class=“ ” onclick=“ok()”></div> function

    ok() { alert(‘ '); }
  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=“\u1F43C()”></div> function

    \u1F43C() { alert(‘ '); }
  44. . { font-size: 40px; } <div class=“ ” onclick=“\u1F43C()”></div> function

    \u1F43C() { alert(‘ '); }
  45. @notwaldorf ❤