 Glocklin is going to be presenting the power lightning bolt and responsibility stress of unicode adoption sparkle. Please make a welcome. I know I'm the only person keeping you from lunch. So I won't have too many pictures of food, but I can't promise that. So hi. I love emoji. I love how broken it is. It's full of So because I only have half an hour short story is because computers we have unicode. You should be using unicode. Unicode is awesome. Unicode gives us a whole lot of power in order to communicate with nearly every written language that ever has been and is currently in use in human society today. If you're going to be using unicode, you may see stuff like this, the 16-bit representation or the 32-bit representation. There's a little you and a big you. I'm going to be referring to these throughout the talk. In unicode, you can have an A. An A is represented by this character. Every computer can see this code and say, ah, that's an A. You also have the ability to have a Japanese ah, with this particular code. We also have the ability to combine certain characters. So we can have an E and we can have an accent and you put it together and you have an E and an accent. That's unicode in a nutshell. And it works. Mostly. You can communicate between computers in different countries and you can have your code that's being sent around not be mangled if everyone's using unicode. You may not be able to read it if you don't know Russian, but your computers can. The problem is this doesn't work for Japanese. I say the Japanese, not Japanese because unicode can handle hiragana, katakana, kanji can handle a whole bunch of Asian texts. But what it doesn't handle? Well, it didn't until recently is emoji. The Japanese love these little tiny characters that they had on their mobile phones back in the 90s. You could send a little picture of a horse or a penguin to your friends. This was all implemented by the Japanese network carriers, so your telecoms and such. None of them used the same codes. These were all in private character space. So none of the characters matched. That all got fixed and what they did was once they consolidated it all, they went to the unicode consortium. Isn't that a magical word? The unicode consortium. It's a bunch of linguists who have regular meetings and they decide where characters should go in this great big unicode table. There's a million character spaces, a bit over a million, so you can have all the characters you want. The Japanese telcos tried to get emoji into unicode back in the early 2000s and unicode went. No, this emoji thing is probably a fad with you lot. It came back in 2007 and it got added and no one noticed until Apple came along. Who here has an iPhone? Who here has emoji on their iPhone? Yeah, emoji. Apple was creating the iPhone and putting it into the Japanese market and they realized that hey, we should probably add this emoji thing because the Japanese market like it. So iOS 2, 3 ish in Japan added this as an extra for the Japanese SIM cards only and the Japanese loved and they bought all the iPhone. About iOS 5 also they decided to just add this as a hidden feature on everyone's iPhone. So story goes that one day somebody in the US picked up their new shiny iPhone that had iOS 5 playing around with the settings and went, huh, I can send a picture of poop to my friends. And they sent it and someone received it and said, hey, how'd you do that? And so it starts spreading about because it started with the iPhone in Western society. People attribute emoji to Apple, but it's not. Thing is, this is back in 2010. So we've had emoji for a while now, but there have been updates to unicode since 2010. These are all standard emoji. We've got flowers, we've got penguins, we've got maple leaves. We also have squirrels now or a chipmunk. We also have the wonderful Balkan sign, which is wonderful. And, you know, paper clips and such. We also have at the end there are man in business suit levitating. Who here remembers Wingdings? Yeah. So in 2014, Wingdings and webdings were put into the unicode standard for backwards compatibility. Wingdings and webdings were Microsoft inventions and one or two engineers were the only people that had a say in what characters went in. And that man in business suit levitating is apparently a reference to a SCAR record label logo. So now we have man in business suit levitating. So that's cool. Last year we also had more emoji added, so now you can get tacos because tacos. Unicorn, Australian smiley is also in there, really important. But the one on the end here is of significance because it's coloured. This is actually a combination of two different characters, the rock on and a Fitzpatrick modifier. So there are six different colour skin tones. If you don't use a skin tone, it's supposed to turn up as a neutral colour. Simpsons yellow is not neutral, but that's fine. But when you combine them together, if your vendor supports it, it's supposed to colourize. And this will happen for any human related emoji. And guess what? We can play around with all this in Python if you're using Python 3. Use Python 3. Python 3 is good. It just works with emoji. In Python 3, you can import unicode data and you can ask it what the unicode character is. So in this case, if I import unicode data, unicode data.name and have the snake emoji comes up a snake. And I can also go the other way by using this slash and escape sequence, which is good for unicode and gravitational fields, escape sequences. This is all new in Python 3.3, so if you're using that, you're fine. You can also take the emoji and work out what its unicode escape representation is using the unicode escape encoding. And you can also go back again by using the slash U instead of the slash N from earlier. Python 3, it just works. Python 2 and unicode... Use Python 3. So this is where it gets complicated though, because we can make computers understand unicode pretty fine. It's the representations of the glyphs that get rushed. So back when I was describing what happened with Apple, people were sending poops to Android and Android didn't have emoji at the time. So they had to use it to keep up with Apple. They had to implement it all. This is the yellow heart. It is yellow. It looks yellow even on the washed out screen. The image on the left is the standardised image for it. And because it's black and white, what we're seeing here is the same sort of representation of colours that we see in British heraldy shields. This is ore. This is supposed to be gold. So gold yellow. This is yellow. Android 4.3 did this. That's supposed to be a colour representation. It's not supposed to be stubble. But it doesn't stop there. As soon as you start trying to compare the same character across all the different vendor implementations, you get some weird things happening. This is supposed to be flushed face. This is for Apple, Twitter, emoji one and Android. If I'm going to send one of those to my friends, they might pick it up as being, ah, I've done something wrong. I'm shocked. I'm embarrassed. But on Android, it looks like I'm trying to take credit for something. This has tripped me up far too many times. We also have this. Can anyone have a guess what this is supposed to be? Microservices. No, it's hugging. Yeah. Exactly. The one on the end is emoji one, which is the first purely open licenced kick-started emoji set. That one looks right, but none of these really mesh with me because I'm used to this as hugging. MSN Messenger represent. Yeah. Also, ha. When you clap, we've done a bit of clapping already in these last couple of days. When you clap, you're supposed to put your palms together and your thumbs facing the same way. The one on the end is Windows. Try not to do that too hard because if you've got knuckles or rings on it really starts to hurt. Yeah. They have fixed that though, so that's good. But yeah, that's Windows 8. Sometimes it's just like, hmm, what could this be? Any guesses? Pond. Yeah. So you can see where all this misinterpretation starts to come in, especially because these are all question mark. The one on the end is Facebook's implementation of question mark. This entire scientific paper is about this. This is grinning versus grimacing. The only difference you see here is the eyes. The one on the left is supposed to be grinning. The one on the right is grimace. Blissfully happy already to fight varying interpretations of emoji by the University of Minnesota. Goes into great detail where they did a great big survey across all the different vendors from a whole range of people. And they showed that yeah, people get confused about this. So now it's scientific fact. So how do we get new emoji anyway? If you wanted to, you know, add in say kiwi fruit or something. What you can do is anyone can submit a proposal to the Unicode consortium. But it has to go by some guidelines because there are guidelines for these things. If it's the backwards compatibility, you're great. The one on the end here is the Yahoo Messenger cowboy, which is now in Unicode. So that completes the set because backwards compatibility. Also, if you're going for completeness, there was one version of Unicode which didn't have the complete zodiac set. Okay. Also, if it's really frequently requested such as unicorns, it'll get in. The internet. Things that won't get you accepted is if it's too overly specific. So we already have wine, martini and tropical fruit drink. Getting an old fashioned in there probably won't happen. Also, you're never, never, never allowed any logos or brands. Yep. So you can see there how Apple's implementation is now out of date for the headphones. Topical. Also, absolutely no fads or memes. So, you know, the Star Trek stuff is, yeah, okay, it's 50 years old now. So that's fine. With all these new emoji though, you're going to have problems with backwards compatibility if your device, your computer, your operating system doesn't support the new versions. You're going to get what is known as Moji Bake or Moji Bake because I'm a Westerner and I absolutely am horrible at pronunciation and I like to mash all my vowels together. If you're using newer emoji and you're sending it to someone who doesn't have the new Unicode standard, you're going to get either wonderful diamond shaped boxes with question marks, empty boxes or nothing at all. So, that's going to be fun. Did anyone notice the sign outside when you came into this room which had my talk title on it? That actually worked this time. I'm impressed. They're using some sort of Windows 8 out there and I can tell because of the emoji. So they're probably running IE and let's not try to, let's be nice to the conference venue and not try to interact with their systems too much. One place that Unicode has to work though is domains. This is a valid URL. Spoon.ws. Spoon is one of the new Unicode 9 which happens to be one of the free URLs with only one emoji and I have registered it. Spoon Theory is all about people with physical issues having to have an amount of energy to be able to get through their day. And I have a link to this and I thought it was a good example of how to use an emoji in URLs. But for all this to work, there needs to be a standard. That standard is RFC 3980, 3492. And what it is, is it allows you to take emoji or Unicode and pass it into ASCII only. The actual algorithm for this is complicated but what it means is you get this Xn double hyphen URL. So if you're going to say Chinese URLs, you may see the Xn in there as well. So how do we actually get emoji into things in the first place? If you're on mobile, normally, at least for Android, you have a little smiley button near your enter key. There's a separate button in iPhones which I don't have but apparently there's a separate button just for emoji. If you're using a Mac, you can press the command control space and it brings up a nice little dialog box. Other platforms, your mileage may vary but there is a Python solution for this now. Kenneth Wrights who you may know from wonderful things such as requests now has emoji for humans. EM keyboard is pip installable and you can use the Unicode name to search and it will copy it automatically into your clipboard for you. So you can have cake sparkles all the time. Or instead of using all these soft keyboard options, you could make an entire emoji keyboard. Tom Scott, an English hacker, decided to put together 14 mechanical keyboards, a little bit of Lewis Script, a little bit of Auto Hockey and made an emoji keyboard. It filled a desk and it worked and it was awesome. There's a video online, The Art of the Bodge, which is really interesting. This is the same gentleman who also made an emoji-only network. You can tell how well that went. It got shut down about a year ago now. You can imagine why. Anyway, in the web, I am an operations engineer. I spend a lot of time making web stuff, cloud. In the web space, if you're using say Twitter or something, you have so many emoji. But if you're on GitHub or Slack, you use short codes. So if I want to have cake, if I'm on GitHub, I can use cake colon. And I get cake. And this is great because I don't have to have an emoji keyboard locally. I can just type out what I want. However, if you're on HipChat, instead of using colons, you use brackets. But then you get cake. But cake is not equal to cake. The implementations of cake are different across different social network-y thingies. And that's really annoying. You also get issues such as on GitHub, you have the Shippet Squirrel. Shippet Squirrel is not an emoji. PartyParat is not an emoji. Sorry. You could apply for PartyParat to become an emoji, except emoji cannot be animated. So you can't get the thing going. But that's fine. There's cross-platform compatibility issues here. So it is a dodgy hack, but it works mostly. If you have this on your system and you have any say in how it's implemented, please let me disable your auto correct. Please. Because there are so many times where a simple smiley changes into a really, really, really happy smiley. Which is also great if you're wanting to do, say, IPv6 stuff where colon 100, colon will turn into 100. Also, misinterpretation. I see the colon dollar as embarrassment. Most platforms see it as money mouth. I don't want to know how this person got money in their eyes. Anyway. Reading them back. So if your platform supports it, there is native support in your system. It will look different between mobiles, between browsers, between operating systems. However, on the web, you have absolutely complete control if you're the ones creating your website. If I have a suggestion, just one suggestion that you take away from today. Use fallback. You cannot rely on your user systems being able to present the same emoji as what you experience. The next slide is the only slide in this presentation to have actual emoji. The rest have been images because I wanted to show vendor differences. I'm running Ubuntu. That's how emoji renders on Ubuntu 16.4 as standard. They're black and white. They look like windings a little bit. There's no color. I don't know what the second last one on the top row is supposed to be. I have an entire website which has this and fallback option so you can see how your emoji look. Glazun.com Unicode test. The one on the end is supposed to be a Kiwi fruit, but this machine doesn't support Unicode 9. So that's fun. If you want to do the basics of this, there is the Twitter client-side implementation of this called twi-emoji, which replaces the Unicode characters with just the image. However, I think we can raise the bar here. What we can do is we can use a combination of highlights, mouseovers, and web accessibility to make it universally readable and discoverable what the emoji is supposed to be. So we can have something like this. Tumble glass, often depicted as whiskey, is now an emoji. Yay! But what we can do is we can have this sort of set up with our image tag, alt text, title, and RE label. Use PNGs. SPGs are not universally supported across all browsers yet. PNGs are. Use alt text as the actual character itself. With alt text, if you copy, highlight, and paste it, it will copy whatever's in the alt text. The alt text and the title text are different. The title text is the mouseover. So if you have the description of what the emoji is supposed to be in your title text, people can tell what it is. And also for extra bonus points for people with screen readers, describe what the emoji is. So then they don't just have breaks in the middle of what they're trying to read out. I have a proof of concept implementation of this, which is PIP installable, and is also a Django model template renderer widget thingy called EmojiVicate. It will do all that stuff for you automatically. And it's all server-side because it uses the Unicode data implementation. If you're going to be doing this client-side, the Unicode data you need to have all those titles is several megabytes. So keeping it server-side makes sense for performance reasons. And also if you're going to be doing any web stuff at all, please make sure that either your framework or you are manually putting in your char set, because by default it'll be ASCII and it won't work. So the future. We're nearly done. It's nearly lunchtime. Yay! Guess what? We got new emojis a couple of months ago. We have such timeless classics now as shrug and facepalm. There's kiwi fruit, as I mentioned. There's also a duck. Oh, and there's an egg. I've seen chicken since 2010, so now you know which came first. But a special mention here, I want to point out the shrug. This is now one character. This is what you used to have to use. This is how much data you used to have to use. There are macarons. This is on three different code tables. There's basic Latin, Latin, supplemental, and Japanese. Now you can just use one. And I think that this is a really useful way to save those precious bytes. There are also some Unicode that are going to be released next year, including some chopsticks and the Stephen Colbert emoji as it's been called. But there are also a whole lot of updates that have been happening recently with Android, with Microsoft, with Facebook. The flushing face from earlier. These are the different implementation of this across Android versions. I don't know why the last one looks like a duck now. If anyone's been using Facebook, you would have seen these wonderful Van Gogh style things happening. Depending on where you are on Facebook though, you will still see the old ones. So sometimes your question mark will be an exclamation point. Windows. Windows, the new anniversary edition fixes their emoji. So they actually look like emoji now instead of whatever those were. And they fix the clapping as well. So that's great. iOS 10, the new one that's coming out, fixes the issue with the grinning face. Now it actually looks grinning. This is the same emoji on different versions of iOS. We also have a great big update with the Unicode 9 standard with our zero width joiners. So now, if you have a white flag and a rainbow, you can get a pride flag. This is a vendor thing that can be implemented right now. You don't have to have Unicode 9 because both those two are pre-Unicode 9. But you use the combination characters in there and it will work. Most vendors are implementing this as a single click button on most soft keyboards. So you don't even have to worry about trying to put the extra characters in there. There's also been an accepted update to the Unicode standard to do with gender pairing. So now you can have a female policeman, female construction worker, female golfer, which is great. You can also have the male equivalents of getting a haircut, a grumpy information person and like. So some takeaways. There is a lot of power and speech and emojis just add that little bit of fun in there. But they have to be implemented responsibly. As a general rule, don't just substitute with emoji. Use words probably English. Your language may vary. But just have some fun with them. There's nothing wrong with a bit of sparkle. And thank you so much for your time. Thank you for that. Put your hand up if you have a question and I will run a mic towards you. Yay. Have you used emoji, which I say means something, but you use it with another man like your own? I don't know. Misen protected like with a with intention. There are many emoji that people use to represent things that they're not supposed to be. This is a thing that you need to discuss with the person that you're sharing these emoji with. Because otherwise they're prone to misinterpretation. They might think that you're going to make a vegetable lasagna instead of eggplant. Anybody else? Well, it's lunchtime. So let's give Katie a round of applause and then go and find something to eat. Yay sparkle.