The Power and Responsibility of Unicode Adoption by Katie McLaughlin

Speaker 1: I first gave this talk the for the first time at DjangoCon Europe in Budapest and this is probably the last time I'm gonna give it at a Django Con in the US so that's kinda frickin' cool. Um also I do acknowledge that there is an emoji movie. Please don't see it. Three three of the lead characters aren't even actual emoji. Oh my god! Okay, that's done. Shh Okay. Um so we're all gonna look over this side now. Um the official emoji for the conference by the way, the evergreen, the unicorn, and uh yelly horn because conference Okay, great. Hi, I'm Katie. Um, my Twitter handle is hidden somewhere on this slide. If you'd like to tweet me during the talk,

Speaker 1: I can't reply to you during the talk, but I will endeavor to reply to you after the talk and I will be taking questions in the corridor after the talk. Yay! It's yellow! Okay, great. So, hi. I love emoji. I love how broken it is because, oh my gosh. So, TLDR, because computers We have this thing called Unicode. Unicode is great. You should all be using Unicode. You normally see Unicode in the form of say UTF-32 or UTF-8. UTF-8 is the flexible encoding that everyone should be using. Using to make sure that everyone can use your software. If you want to represent the character A using UTF-8, you have a string of ones and zeros. But if you wanted to represent the character R, you just use a couple more ones and zeros.

Speaker 1: So you can use more or less and you can have all this data saved because it's a flexible encoding system. It's all great. The ones and zeros are really hard to type out all the time, so we normally just use this sort of shorthand syntax. This particular code is A and this particular Unicode code will work on every single machine that supports Unicode. So you can send data from one machine to another and get it back and it'll be great And you can also do it for cool languages like Japanese and have an A as well. And you can do cool stuff where you have say an E and then you add an accent. and you put together and it's an in an accent. And that's really great because it means that with Unicode, you can encode every single language character set in the world, mostly, except for Japanese.

Speaker 1: I mentioned Japanese earlier. Haha. See, thing is, Unicode back in the day did hiragana, katakana, kanji. What it didn't do was emoji. So back in the dawn of time in the 19th century. The Japanese had pages. Who remembers what pages are? Their pages were cool because they had little characters on them. All these really cool little 12 pixel by 12 pixel characters were created by one of the mobile phone networks. So you could text in and say like cinema and it would go cinema or zoo and it would go zoo with penguin. And it was really cool and it was a great engagement strategy for the different networks and this was back in the 90s But

Speaker 1: this was all in Japan and nowhere else. So oh and there was also this small problem where um there were three major mobile networks. They all had their own encoding and they didn't match So if you send a horse to your friend, it may come up as like a a a pig. Anyway, um they consolidated all this in the early 2000s and it was really great. because once they got all their act together they could go to the Unicode Consortium, which is a wonderful group of people that would make a much more better movie than the actual emoji movie. And they With a little help from Google, back in Unicode version 6 in 2007, encoded all these emoji into Unicode. And nothing happened. until Apple came along. Who knows what Apple is?

Speaker 1: Who had an Apple iOS 4. 5 phone back in the day? I'm talking 2010, yeah? Yeah. So story goes. Apple was trying to break into the Japanese market, so they did all their phone. It's like here is our phone. It is very cool. Look at it. And the Japanese were like, but there's no emoji. So Apple put emoji in the very early iOS version two, version three phones. And that was great, because the Japanese are like, yay, emoji. And then Apple's like, hmm, we should add this to everyone. So about iOS version 5, emoji get added into the US version as an optional setting. Deep in the settings, we had to enable it as a keyboard option. Story goes that one day somebody was playing around with their phone, looked at it and went, huh, I can send a picture of poop to my friends.

Speaker 1: And so they sent the picture of poop. And someone else is like, what? And then it spreads as poop does. Um And so uh adoption of emoji in the Western world skyrockets and everyone loves emoji and the Unico Consortium starts adding more emoji. such as in 2014 we get such wonderful emoji as uh chipmunk and uh Star Trek and also uh in the bottom right there are men in business suit levitating Who remembers wingdings? Backwards compatibility is a thing if you happen to have a font that is kind of popular and you add a character in there just because then you'll end up in Unicode.

Speaker 1: It's apparently a representation of the developers our favourite Scar band album. And so we have Man in Business suit levitating, because of course we do Um, and every year since 2014 we get new emoji characters. We get uh wonderful things such as uh Unicorn, only a couple of years ago now, uh Australian smiley, which is very useful. And taco, because taco. Um and just last year we got a whole nother set including uh cowboy emoji, duck, owl, spoon, and egg. So now you know which came first. Of particular note, uh the one in the bottom right corner here again is a combination of characters. It is the face

Speaker 1: palm character and a Fitzpatrick modifier to give the skin tone. This means that we can have more characters that we can create based on the existing code points we have. So say for haircut. In most of the most updated mobile phone keyboards you have, when you type that character, you're actually getting uh person with haircut and then uh female gender modifier. So it's actually two separate characters. characters, which means that if you change it to a male modifier and put them back together, you get mangetting haircut. Which means you can have wonderful combinations like this combination, which when you split it out is actually man blah pa man. This is where the emoji tax

Speaker 1: comes in because there may have been a medium article released in the last couple of hours saying that uh a whole bunch of female uh emoji and different color skin emoji takes up more characters. This is why. This really doesn't normally matter except for text and Twitter where you're limited to the amount of characters you can use But the fact that you can have these and the fact that everyone can get them and share them around all the different computers means it's really cool. And we can also get flags, which is really great. So who recognizes this flag? Yep. This flag is made up of two separate characters. These two separate characters are U and S. You put them together and you get a flag. Using all the ISO standard country codes, you can get all the different ISO

Speaker 1: standard country code flags just by combining the two characters. So In Python, we can play a lot of fun stuff with emoji, but only if you're using Python 3. You should use Python 3, it supports emoji In Python 3, if you import Unicode data and then you can give it a single character and it'll return the name for you. You can also use escape characters with that actual name to return back the emoji. And you can do the same with those codes that we saw earlier. Uppercase U in this case means you're always going to give it 8 numbers, so strict Unicode 32. The lowercase U that I've been using is for uh UTF 8. So we can have a snake and we can Unicode escape it and we can get a byte string with the its

Speaker 1: specific character point and we can move it back again. Which is great because Python supports emoji and Apple supports emoji and this is where it gets interesting. So you remember how I mentioned that Apple were the first ones to do it and everyone was like, oh I can see poop, I can see poop. Um Android is a thing. Android didn't have emoji and so they may have rushed it a little bit which is why we get some interesting things in Android emoji. This is a yellow heart. It is yellow It is represented as yellow. Thing is, in the Unicode standard, they use black and white. This particular pattern dates back to British heraldie shield

Speaker 1: And this particular sequence of dots means gold or yellow. This is a yellow heart. This is yellow. Yellow? Yellow. This is what Android did the first time they introduced color emoji Yeah. But doesn't stop there. This is a flushed face. from Apple, Twitter, Emoji One, and Google. Android, Google, Android, Android, Google. Every single one except for the Android one looks like a oh no, what did I do? But the Google one looks like a

Speaker 1: Which can have really fun when you're sending one to a friend that's got Apple and your your context gets lost. Um oh it doesn't stop there. Okay. This is jazz hands. Yeah? This is hugging. Jazz hands hugging. These are all the same character Oh, but it doesn't stop there. When you clap The one on the end is windows. I'm not sure how long you can actually do that before the back of your hand starts to really hurt Yeah.

Speaker 1: Oh, but it doesn't stop there. Who wants to take a guess what this character is? Blonde. There's entire scientific papers that go through and work out the fact that yes, this is a thing and it's not just something I noticed. Um this is grinning versus grimace The only difference is the eyes and given uh emoji started in Japan back in the back in the back of the day, this makes sense in Japanese culture because Japanese culture has a whole great big thing about the eyes in manga and anime. As a westerner, they look the same to me. Which means that if somebody sends me one and the other, I have no idea what's going on.

Speaker 1: So we have a lot of emoji. We get emoji every year. How do we actually get new emoji? The Unico Consortium, the savage arbiter of the Sapio, sorry, Rogue Talk. There are a whole bunch of do's and don'ts if you want to get an emoji added, but it is up for public submission. You just submit a form with all the right things in it and they will take your consideration under to take your request under consideration. Things that will get you added. If you're talking about improving uh compatibility across platform Who recognizes the uh emoticons at the top there? Where are they from? Yahoo! Messenger! The only reason we have a cowboy emoji is because Yahoo Messenger had a cowboy.

Speaker 1: Um, completeness is also a factor. Um up until Unicode 7 they didn't have characters for every single Zodiac sign. So that's why they added Scorpion and the rest. rest because Zodiac is apparently a thing that people care about. Um frequently requested as well when you get entire chains that make tacos asking for a taco emoji. You'll get a taco emoji, but also unicorns, so that's kind of cool. Um, things that don't count. Overly specific There is a snow cone, there is a soft serve, and there is an ice cream sundae emoji. We're not going to get a banana split emoji anytime soon. I'm sorry. Also you can never never never never never never never have any logos or brands

Speaker 1: These are the Apple renditions that look like Apple products because Apple, Apple, Apple, Apple, um, Apple Apple, Apple, um, Apple Um also no fads or memes, which means we can never get a Star Trek emoji. There was a Star Trek emoji earlier. Anyway, um as we bring in new emoji, older systems get out of date, and then we get this wonderful image issue of the replacement character, which is when the computer goes, uh. Um, also known as moji bake in Japanese or moji bake because I'm a westerner and I bastardise any pronounced eight pronunciation of anything, including my own language apparently. Um if you don't have a phone that's up to date enough you can end up getting missed characters.

Speaker 1: And so you can't see the Australian smiley And it's really sad. But it's okay, because there's an app for that now. A wonderful gent out of Sydney has made a emoji sensor app, which means that if If you put it on Chrome or now Firefox, if you were to take a completely random tweet that I did not generate specifically for the purposes of this talk and make it so every single emoji doesn't exist It starts reading really rude. And this is also a reason why you shouldn't use emoji inline, because you end up seeming like you're saying silly things on the internet. And you really shouldn't say silly things on the internet. Um one thing where it does work though, emoji will most definitely work, is URLs.

Speaker 1: This is a real website. Spoonemoji. ws is a website that I've created. It cost me um twenty-two cents because. Um but it refers to Spoon Emoji uh and Spoon Theory. which is a mental health thing about having enough spoons in your day to be able to do things. Um, there is an entire RFC which uh determines exactly how you get from arbitrary Unicode characters into Latin characters and back again. So this is the actual URL of that website, but if you go to that URL, depending on your browser, it will change it into a spoon emoji. Browsers and emoji have some interesting eccentricities.

Speaker 1: Speaking of which, uh browser tabs. Um You can have emoji in the title of your website. You can also have emoji that make your title of your website look like it's secure because there is a padlock emoji Except in Safari they don't render that. If you look closely here, the other two tabs in this Safari view have the emoji that's being represented. presented and then the name of it. But the locker moji isn't there. This only happens at the moment in Safari, which means that your um terrible, terrible website that wants to get information out of helpless people can't actually look like a secure website unless you're actually secure.

Speaker 1: By the way, let's encrypt exist now. Um anyway So how do you get emoji into things? With a keyboard, because that's how you normally input stuff. Although as of yesterday, Google Voice now supports emoji dictation. I'm sorry. But on devices with actual keyboards, you normally see a button like this, say on Android, and then you get Android emoji, which are all very blobby and cute If you're on iOS, there's like a circ uh a smiley face, which is really easy. But on Mac, if you didn't already know, you can press command control space. And you bring up a wonderful searchable interface that allows you to search for all your emoji, which is really great.

Speaker 1: And I'm seeing a number of Macs in the room. So Now you know. Um or if you don't want to re rely on soft keyboards, you could always just connect together 14 hardware keyboards, one for every single uh emoji character Like a gentleman called Tom Scott did. Um so 14 mechanical keyboards maybe as big as this stage. But already that's now out of date because there's several more uh emoji carriers. characters. Um this is also about the same gentleman that made an emoji only network. Yeah you can imagine how well that went. They had they were vote uh they were approached by venture capitalists. Yeah. Anyway, webs, websites

Speaker 1: and such, because there's now a web emoji and I can use a web emoji. now in this talk. Some websites, if you want to enter in your emoji, they have wonderful little soft panels in there so you can search for your stuff, say on Twitter. And as of a couple of months ago, you can actually search for emoji in Twitter. You have been able to for in Instagram for a while, including hashtag of emoji. No, the eggplant emoji hashtag on Instagram does not work. Um Yeah. Um I'll be tweeting out a ha Twitter. Tweeting out a link to these slides and there's entire um engineering blog articles from Instagram about how they actually get hashtag emoji stuff to work because there is some really big regex there. Really big. Speaking of which, if you don't want to have to try to get your soft keyboards and stuff, you can always use short codes.

Speaker 1: If you want to enter in cake, you could have say on Slack and on GitHub, colon, cake, colon, and you get cake. And this is really great when you're using to say the um hardware keyboard on your laptop that doesn't have emoji keyboards except if you've got a touch bar now on the cool max because then you can can get emoji keyboards. But the thing is that this doesn't work everywhere because this is a vendor specific implementation, which means it's safe use HipChat. you need to use brackets instead of colons. And their cake doesn't equal the slack cake. These are two completely different types of cake. One is a short cake and one is a cake cake. And they're not the same. Um, so who here is familiar with Slack?

Speaker 1: Yes. Party Parrot is not an emoji. It is an emoji con. You can add it specifically to a specific Slack network, but not all Slack networks. You have to add it manually. Ship it squirrel is not an emoji. This is something specific to GitHub. You can also import it into your various applications, but it is not globally recognized. This is an emoji con. This has been a public service announcement by me Um, if you're going to be using short codes in your system, please, for the love of all things, nice. Let me disable autocorrect. Um, I don't know how many times I've tried to put paste in IPv6 codes and it automatically corrects to like, hey.

Speaker 1: Um also Single colon and bracket is a smiley, not a super hyped up smiley eyes smiley with teeth showing. Um and if I'm embarrassed, I really don't think I'm vomiting money Especially because I'm Australian and our money normally isn't green. Except for the really big ones. Actually, never mind. The $100 notes are green-ish. So I would like to vomit that Um a note on Slack. Slack does not keep their emoji up to date. They haven't for a couple of years now, which means that yes, you can get chipmunk and popcorn, but you can't get duck. unless you add it manually. So people on Slack, hi, call me. Um, reading things back again.

Speaker 1: Most systems if you update them will automatically do this for you based on their system platform encodings. But on the web you have complete control so you can make it really nice for people that can't buy the newest iPhone every year to update their emoji. So if I can make one suggestion that you take back with you today if you develop websites. Enable fallback. Please use fallback images for any emoji you want to use in your website because you cannot rely on the system emoji being there, even if you use user aid. You cannot rely on people having more up-to-date systems. You're still going to have people that have black and white emoji on Android and context can be lost. So use fallback images

Speaker 1: Speaking of fullback images, the next slide is the only slide that actually has emoji on it. Everything else I've been using today has been fullback images. Mostly so I can show the difference between vendors, but I'm on a Mac. This is how emoji look on a Mac. They're really really really shiny now except the new ones still don't work and some of the older Unicode 2 and 3 aren't actually emojis that the text representation. If you go to this URL I have this exact thing that shows you how the different emoji actually show up on different platforms. But they kind of look shiny now, I guess. Um but if you run a website and you want to have a really easy way to enable fallback images, uh Twiemoji. js is the Twitter

Speaker 1: implementation of fallback for just images. WordPress. com now uses this by default which means that if you have a WordPress. com blog all your emoji will work for every user as long as they have images enabled. Which is great. Images and JavaScript enabled, but you know. But we can raise the bar here. Not only can we have image fallback, but we can also do things like having highlights Hi lights. The puns they keep coming. Tooltip and mouseovers. And web accessibility in general So, instead of just using and defaulting to system emoji, we can enable all these things which makes a for an extremely rich desktop experience for people who want to

Speaker 1: be able to actually see what emoji mean and be able to have screen dictation work. So this is how you should be doing fallback images. in your websites. You have a source image, which would be the encoding of the Unicode character Please don't use SVG. Not everyone supports SVG. PNGs are good enough and they also are better for a performance thing. And there are a whole lot of CDNs that will give you access to uh cached versions of all your emoji. Um Max CDN I believe does Twitter. Um but if you use the Alt titol and Aria label you can get wonderful things like this because if you use Alt with the actual emoji in there If you copy and paste the entire string of text

Speaker 1: which includes your image, your emoji image, you will copy the actual Unicode character into your clipboard and then you can paste it again. Which is really cool. Also, did you know that alts are different to text titles? Because if you have title and you mouse over it, it will tell you what the emoji is supposed to be. supposed to be, which is great for people that need glasses to be able to read their screens and people who are over 40 and the rest of it. Um not knowing what all these little Th why is the owl purple? I don't know what that is. Is it supposed to be a jumper emoji? I don't know. Oh it's an owl, that's great. Um and also ARIA label for super bonus points means that when a screen reader comes across your website, they will hear emoji owl in the middle of your string. Which means that they can understand your website and you want people to understand your website

Speaker 1: because understanding websites is good But it's okay because I've done all this for you. Pip install emojificate is a Django template that will automatically translate any content that you have that includes emoji characters and translates this into the proper web accessible image fallback system. So you can use it as a template tag and then passing your content through a filter. Or you can use the full template tag on your site and it will automatically do all this for you. All the code is on GitHub and I've got a blog post there explaining a whole bunch of how it works One tip for general use, especially in the web world, please enable UTF-8 by default, because by default you will have

Speaker 1: snapping fingers apparently. Um ASCII four, which is yeah, no, don't. Um anyway, the future and I have minutes left. Minutes, this is great. Um guess what's happening More emoji. Yay! Um such enthusiasm! And then you didn't even see the hedgehog emoji we just got. Broccoli. Broccoli emoji, um dumpling emoji, Stephen Colbert emoji. We have two dinosaurs now, not just a T-Rex. Headscarf emoji. Which is wonderful. We also have some wonderful ones just in time for Halloween. We also have sandwich

Speaker 1: emoji. We also have zebras. and pie because we haven't had a pie emoji before. What's up with that? I know, right? Mind blown, which is also now an emoji. Also, some interesting things when um you're say jet lagged and are reading through the Unicode spec at whatever time of day it is in whatever time zone you are. Um there are some really interesting little subtle changes that came in with Unicode ten including the fact that your little sweat emoji isn't supposed to be on the face, it's supposed to be an anthropomorphic blob hovering at in front of the head. So for the various vendors that are supposed to um the for the current vendors that are currently um

Speaker 1: conforming to physics, get on that Um also in Unicode 10, which is really important to me, no longer is there just uh male and female modifiers and face faces or just child, adult, older person. There are now gender neutral faces, which means that you don't just have um uh well you're not supposed to have any more just a male zombie and a female zombie. By default, all your characters are supposed to be gender neutral and then you add your modifiers on top. But This hasn't really been implemented properly ever before because it's really new, which means when you have say uh rock climbers, the top one being Twitter, the bottom one being Facebook, the man on the left, the woman on the right

Speaker 1: Have I run out of time and my A B just cut off?

Speaker 2: It's it's exactly at time, so that's a pretty spooky coincidence. I don't think we planned it that way.

Speaker 1: I have like more slides, but I can stop now.

Speaker 2: No , we don't like that idea.

Speaker 1: Did I bump something up here, maybe? Too many emojis. Express yourself without emojis. How? How do I do that though?

Speaker 2: Hang tight everybody.

Speaker 1: There is now not just the default woman dancing emoji, there is a man dancing emoji which looks all like Saturday Night Fever, so yeah, there is a Russell emoji now. Thank you very much. You're welcome. Would you like to hear my review of the emoji movie while we wait? Yes. Okay. Anyone who doesn't want spoilers, cover their ears now.

Speaker 2: Wait.

Speaker 1: One of the main plot points in the emoji movie is that they have to get to the Dropbox app to get on the cloud. We have it on one side! Woo!

Speaker 2: Yes!

Speaker 1: Woo! Okay. As we continue, these are the new rock climbing emoji for male and female. What you're supposed to do is any character that doesn't have a specific modifier is supposed to be gender neutral. The problem is that on Twitter at the moment gender neutral for rock climbing looks like a man And on Facebook the gender neutral for rock climbing emoji looks like a woman. Hopefully vendors will fix this stuff, and I nearly swore then, um, because it's really annoying when you want to represent yourself and you have no idea how the emoji is going to look. So get on that. Other updates. The wonderful issue before of the grimacing face has now been fixed in Apple. So now the grimace actually looks like

Speaker 1: the sorry. That is the grinning face in different versions of Apple. It no longer looks like grimace, it now looks like grinning. So you no longer think that somebody is really upset at you. Good uh Android has also fixed their um different emoji. So this is the same flushed face from earlier in different versions, so it's gone from to uh to duck Although, the elephant in the room, there has been an elephant emoji in there for several years, by the way, but the actual elephant in the room This is the grinning emoji from Android 7 and then the Android 0 beta. They have reverted their grinning emoji into the old format. They have also apparently taken an intern and a free version of Photoshop with gradients

Speaker 1: and recreated all their emoji. Anthropomorphic orange, yellow, orange, yellowish blobs. I thought these were perfectly fine. The new versions hurt my eyes I mean, I don't know whether this is an accessibility thing or not, but I don't want to upgrade my phone if it means I'm gonna have have to look at that all day. Which is really bad coming from me because I'm like a security nut and I really like having updates on my phone so I my phone is secure But it's okay because on um Android phones, going back to um 2013 versions, there is going to be an emoji support library edition which means that apps don't have to rely on system emoji.

Speaker 1: They can download the emoji font for Android and replace in all their emoji, which means that you no no longer get emoji bucket. The problem is it's all the new terrible looking emoji. So yeah. Um who uses Windows? Your Windows emoji got awesome. The new Windows 10 emoji look freaking amazing They're like pop art and they no longer look like the end of a banana and it's great. And they fixed the clapping emoji. Also Also, Windows is the first platform to support interracial intergender couples. Yes And if you click the Windows button and period, you get your own search button now.

Speaker 1: That's cool! Linux, get on this! Um emoji one have also um had a recent update uh crowdfunded uh freemium platform. So now all their emoji are really shiny. it's cool. Um as a point, this is the first version of emoji you could get in a sufficiently open source license and was all kick started and they're really cool and they like my tweets. I'm hurrying up. Um the owl no longer looks like it's got an Argyle um jumper on. And they're also professions So you can have uh an emoji that looks like you because this emoji looks like me. Um, and new things that are coming. Um, there are a whole bunch of emoji that have been suggested to be implemented for next year, including cupcake emoji, including teddy bear emoji, and including all those horrible um

Speaker 1: feeling emoji from Facebook Um but you don't have to rely on the emoji consortium. Emoji consortium. Unicode consortium. You can use Wonderful CSS to make your own emoji if you want to. including um wonderful multicolour hearts. Um and you could say have your banana and your Sunday and make a banana sundae. Or you could have your chip uh your your chipmunk and your hat and have a hat and have a ship it thing. Or, well okay, you can't really have it with the party parrot, but you know what? I fixed it for you. You're welcome. As of last week, Party Parrot has been recommended to be added to the Unicode standard next year. You're welcome

Speaker 1: But there is now a new exclusion parameter that may be because of me Exclusion factor K, faulty comparison. The emoji dog and poodle and two different types of camel do not justify adding different varieties of the same kind of animal. I'm sorry, I broke emoji for you. Anyway, if you want to know no more information you can look up Wikipedia uh emojipedia. org which is a wonderful um website There's also the fake Unicode consortium, who may or may not be an Aussie, I'm not actually sure. You should also tweet them because they really hate any time I mention them in talks. There's also the Unicode consortium on Twitter and you can also um adopt an emoji to give them money to help with all the wonderful things that they're doing that does include things that aren't emoji

Speaker 1: including making sure that like indigenous uh written texts can be encoded in Unicode. Um so quickly some takeaways. Um Yes! One last groan. Um there's a lot of power in speech. Emoji add an additional level of communication, but there's a whole bunch of responsibility in the implementation and and accessibility that we need to as web devs be aware of. But remember to have fun. Thank you for your time.