$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. View Slide

  3. View Slide

  4. ☃

    View Slide

  5. U+26C4
    ☃

    View Slide

  6. “\u26C4”
    ☃

    View Slide

  7. “‚”.length == 1
    ☃

    View Slide

  8. View Slide


  9. U+1F43C

    View Slide


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

    View Slide


  11. \uD83D \uDC3C

    View Slide


  12. “”.length == 2

    View Slide

  13. )

    View Slide

  14. )
    U+1F43C

    View Slide

  15. U+1F43C

    View Slide


  16. \ud83d \udc81 \ud83c \udffe

    View Slide

  17. )
    “)”.length == 4

    View Slide

  18. View Slide

  19. ok so fonts

    View Slide

  20. AppleColorEmoji
    Segoe UI Symbol/Emoji
    Noto

    View Slide

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

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. if you can’t
    fix the problem
    be the problem

    View Slide

  27. View Slide

  28. View Slide

  29. @muan made emojilib
    {
    "grinning": {
    "keywords": ["face", "smile", "happy", "joy"],
    "char": "",
    "category": "people"
    }
    }

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide



  35. View Slide




  36. View Slide

  37. .

    View Slide

  38. . { font-size: 40px; }



    View Slide

  39. . { font-size: 40px; }

    function ok() { .
    alert('hi'); . .
    }


    View Slide

  40. . { font-size: 40px; }

    function ok() {
    alert(‘ ');
    }



    View Slide

  41. . { font-size: 40px; }

    function ok() {
    alert(‘ ');
    }






    View Slide

  42. . { font-size: 40px; }

    function ok() {
    alert(‘ ');
    }







    View Slide

  43. . { font-size: 40px; }

    function ok() {
    alert(‘ ');
    }






    View Slide

  44. . { font-size: 40px; }

    function \u1F43C() {
    alert(‘ ');
    }



    View Slide

  45. . { font-size: 40px; }

    function \u1F43C() {
    alert(‘ ');
    }




    View Slide

  46. @notwaldorf
    ❤

    View Slide