Emoji, Web Components, and Art

Did everyone get a brownie? They're awesome brownies. You might sugar crash a little bit but they're definitely worth it. I definitely recommend it if you have haven't gotten one. So continuing our awesome ladies' block here at the Side Track, we have Monica who is from San Francisco, and she can be best described as screaming-cat-face-tada emoji. So please welcome Monica. Aw, man, I didn't realize that this was the women's block, but I'm super excited to talk today because the only thing that would make this talk more would be cats. So here's a little tiny one. Hi, everyone, I'm Monica, and I'm notwaldorf on GitHub, and I work with Polymer and I'll talk about that later because now I'm going to talk about art. So before I became a developer, I was convinced that I would become an architect because all of my life, I drew ammunition and I painted things and I really liked making art. But it turns out that art is kind of hard. My kitchen is now covered in, like, tiny little pots because I can't make, like, cups that are human sized yet because I don't know how. So I just have cups for dolls right now. And so art is really hard. And even if you're a really talented painter like van Gogh, even if you're naturally talented. When -- you start having different problems like my composition is off, my colors are off. It doesn't express the thing that I really want. This time at Christmas, like, 15 years ago, I came home and my mom was, like, oh, I gotta show you this thing that I discovered and she shows me this amazing painting of a landscape, or a street in Paris, I don't remember. Not a talented person. She's not an artistic person. She can draw. And I said, how have you managed to produce this? And as it turns out, it was a paint by numbers. And that's what I realized was that people really enjoy making art, even if they're not good at it if you give them the right tools. So in this case, paint by numbers is really good if you're not talented. It restricts the problem to something really small and in the end you get this awesome thing that looks pretty and then you get to show it to people. Because art is fun. You get to make things, you get to spend a little bit of time and produce something. And sharing art is really fun. She didn't, like, make this painting and, like, hide it away in the basement. She showed it to me and said, look at this thing I made I'm awesome. I'm van Gogh. She's not. And we know sharing art is fun because who here has -- raise your hand if you've never taken a photo and put it on the Internet. Yeah, nobody -- everybody takes photos and you put them on the Internet so all your friends see them. There's a whole industry of apps that put filters on your Instagram photos so that they're pretty and artsy. Last year, this, like, app came out that was called Prisma, and it made everything look like a painting and it was super popular for three weeks. Because we like making shit and saying, look at what I made, look at my artistic talent. And do you know what's good about sharing? All of these things are on the web on this fantastic cloud we have, we don't print them out and give them to people anymore, we put them on the website. So I'm going to show you some things that I've put on the web. So the first thing one is something called Octopus Holdings. So John and I'm going to butcher his last name, Hergenrother, basically made this thing where you could represent words in an URL, so this is cat using a necktie with pants on an elephants and it's really easy to share because you can show people what you made. And it's very easy to understand because the problem of you making art is very simple. You can only, like, use emoji and it's really amazing. It's kind of fun, you get to make fun things. The reason that it's called An Octopus Holdings is because if you don't make anything, it's, like, an octopus holding a trophy. It's awesome. Jen Schiffer made think project, pixels are easier, there's fewer of them. You can increase the resolution. The colors are more limited and you get to, like -- this is my attempt to draw a cat and it's terrible. But the reason why I know it's really fun and people really like it, and, again, people really like sharing this art, is that a lot of people will tweet at her and say, look at this thing, I've made a Make Art to work on a game for a kid who's six. And this is amazing, we're, like, exposing kids to making art with code and technology early on, which is kind of awesome. On a similar vein, my friend Wan made this Mega Emoji, where instead of drawing with art, you do it with emoji. So that takes another real world thing like tracing. Sometimes you'll trace it on a piece of paper. So this is a lot like that. I had a really bad day once, so I spent an hour making dumb shit. This is a cat that I've made out of emojis using Mega Emoji and it was really fun because it was really simple and I just traced the cat emoji. And now and, like, it all circles out, I started out with emojis, and then the drawing, and then back to emoji. This is Emojibrush that Sam Sico made, and it's literally a canvas and you draw with emojis and that's all you do. And people use it to make dumb things with it. I think Kia, she's @LadyLead on Twitter. And she would say, I made your Twitter on Emoji Brush. And this is really fun because it's a really easy and, like, a joyful project to do. And the reason I'm telling you all of this because I think we're really good at making art more accessible and more friendly by giving them better brushes. We've, like, learned this over the years. We have color by numbers, we have tracing, we have all these other apps that make it really easy for you create things. And so if you believe me that's true, I think the same thing is true for the web, the web can be more accessible, and fun, and by that I mean, making things on the web can be more accessible and fun if you give them better brushes because the same argument can be made for both things. And by better brushes, it's like making a better div because I like the div because it's like the pen and pencil, you still have to learn how to hold the div, and vertically size it, and how to center it, and all sorts of things like that. So the web is really good at semantics. And in HTML 5, we've got awesome things like header, and nav, and article that tell you what those elements do. They don't look any different. They just look like, you know, divs of text but at least they tell what they're supposed to do. So if you put a header, that should probably be at the top, and the article somewhere in the middle, and then the footer at the bottom, and the future you is going to read this page. It would be much easier if you had a pile of divs where hopefully you put a class="header" somewhere so that you knew that I meant to put this at the top. The other thing that the web is really good at is encapsulation and this is one of my favorite things about the web. So there are, like, these magical elements in the browser that do magical things, like video, or input, like input has 21 different types and you can do color picking and input different files but you don't have to wonder how they're implemented, they just come to you and you're like, sweet, this is amazing. But if you peek inside of them, if you go on Chrome, and you look at enableShadow Roots, if you look at, it's a content-editable div, that's pretty cool. There's one that lets you put a number on it, a number flicker that goes up and down, it's already more complicated. It has some pseudos in it that can be, like, a bridge that's like, I really need to style this spin button and the reason why this is important because these divs and these styles don't go outside of the input element. That's why you can't reach and style everything in it. You can only style things that, like, that element really wants you to style. And that's why encapsulation is awesome. So something like a video element is actually ginormous and terrifying. It's got, like, ranges and buttons, and a shit ton of divs and yeah. So cool, encapsulation is really awesome. So if semantics are awesome and encapsulation are awesome, that means that we can, like, keep waiting and it's going to give us something like a Emoji Brush, it's semantic expressive, and it's emoji, and it's impressive because it's impressive how God knows how Sam implemented this. But we can't just put an emoji brush in Chrome, that's not a thing that we can do. But that's why I like web components. It takes semantics and ability that the browser already has and giving it to you as developers so that you can use them yourselves. And the components are not special by themselves. The reason why web components are really awesome is they're web agnostic. And you can use it in an React dev, or use it in Ember because Thomas is sitting right there and I have to mention Ember. And they're really awesome because they interop with everything. Because they're browser language. Anywhere you can use an input, you can use this and that's awesome. And that's what I work on. But let's talk about art again as we were already talking about. So we make art with brushes. We, like, paint on things, we, like, trace things and we make apps with components and better our brushes are, the better our art is, or the easier our art is. So the better our components are, the easier our apps are going to be able to built, too. So I just wanted to show you, I built this really dumb app called emojillate. And basically it takes an image and pixelates it, and replaces every pixel with an emoji and you can change the resolution so it has more emoji, less emoji, and you can copy and paste it, and send it to all of your friends manipulated to tell you how I built this out of web components because I thought that was kind of fun. So if you looked at this enormous app, we have an input type="file," which is kind of an OG web component so that's cool and then we also have a paper slider. So this is an element that my team works on, and paper is code word for material design at Google. It was a terrible naming choice that now stuck forever. But that's a fancier slider because if you ever try to style a native input type="range" it's, like, 150 lines of CSS and pseudo-elements. That's fancier slider and it looks pretty. And in the middle, I have this giant emojillate element. And it basically collects things from the files. So it collects, like, the file contents and then it collects things from the configuration. So, like, the number of pixels on either side and stuff like that, and every time it gets changed, it gets updated. And the reason why this is important is because these changes are really easy if you've got, like, a data-binding sort of system and that's where Polymer comes into play because I told you that I worked on Polymer. So Polymer is kind of like jQuery. I'm trying to, like, pitch this sentence about it. So I think Polymer is kind of like jQuery for web components not in the sense that, like, you don't need it anymore and everybody hates it, and includes, like, seven versions of it on their site but in the sense that it sugars the DOM and makes DOM interactions a bit easier while waiting for the DOM to actually get a bit better because 15 years ago, or 12 years ago I didn't write C++, writing jQuery. But writing child nodes and manipulating child nodes and working on the DOM was kind of a pain. Well, Polymer now, web components are kind of new and I secretly hope one day that we're going to get native data binding on the web, and I keep trying to pitch this to the link team. But the way that data binding works is if you look at this emojillate element in the middle, it has a file, and a file contents, or whatever, and then of a an input type="file" at the top and we're pretending that the API is actually sane and it does which you want, which it doesn't. But if you had some file like containDataBlob, then you could change it magically and say, whenever this thing changes, teleport it over here. The reason why this is a lie is you need a JavaScript to respond to that input type="file" but, you know, it's nice in our dreams. The resolution is nice, too. So whenever move that slider and its value changes, then the resolution changes and you can put in a custom element. And at this point I haven't written any JavaScript. I've just written HTML and used data bindings because Polymer have sugared it for me. And I put in a checkbox because one of the things that emojillate can do is help you slow or hide the background image to make it bit prettier. So this emojillate element isn't really that weird. I wanted to show you that it's, like, platformy, and not, like, this weird code that you're not familiar with. There are two parts of defining a web component. You have so sort of provide prototypes, write a class that says what that element does and then you have to tell the browser to associate a particular element with that prototype. So that class is just a normal class that extends an HTML element and then the second part of it is saying, hey, browser, whenever you see emojillate on an element, put it over there. And Polymer 2 is something that we're announcing at IO. Polymer is an extension, it extends an HTML element, so basically it takes whatever you would normally do and then adds some sugar to it. And then it wraps it all nicely in what we call a taco because what I really like to do is write my HTML in HTML, and my CSS in CSS, and not JavaScript, I'm sorry. And so one of the things that we can do in Polymer is actually provide what this element looks like in html. So this element has a hidden canvas where I'm rendering this pixelated image and it has a hidden image where I've loaded the file that you've given me and the code isn't really hard. I have a properties block. I have some properties that this element cares about like that file in resolution, and that checkbox where I was binding and then I have, like, JavaScript functions and then whenever that resolution changes, I can just call an observer and then it calls it for me. Now, this isn't very hard. You could write this in vanilla JavaScript, it's just a getter and a setter for a thing called resolution. But you don't need to write it, you don't have to write it, so that's why Polymer does it for you. It does all the heavy lifting for you. That's all the code I'm going to show you. So let's talk about art again. How does emojillate actually work. So it pixelates and adds emojis to it, and that's why we have this dumb name but the really interesting question was should it use a canvas and should it use a span? They're both going to look the same in the end but I really wanted to use the span because we're going back to this idea of sharing art. I want people to be able to share these dumb productions that you make with emojillate and then if you share, you can copy and paste it, and send it on Slack to all of your friends, and everyone is going to be happy because all your history is going to be blown forever and ever. My team's name was Voltron, and I think Sarah Edo said this recently that every project, and every team has named at some point Voltron, and it's usually an awful combination of things being glued together. That's my team. So how do we actually emojillate? How does it actually work? First thing we do is you load your file and I put into a hidden image. And this is the image that I'm using, it's got lemons. And then each to find the ratio of the canvas so that your image isn't super wobbly. So I'm going to widen the canvas and then I'm going to pixelate it. It's like something that we take a tiny image and you stretch it out, and it looks like an enormous potato. So that's how we pixelate. So you take an image and bam, pixels. Now, if I wanted to pixelate it, I could stop here, but we want to put an emoji on it. So I'm going to divide this into a resolution sort of grid because here it's eight chunks that I want to split across and for each of these chunks, the canvas API gives you an array of every pixel in this file, so all you have to do is go through a subarray of the pixels and then pick a color. So I would just pick a color that's closest to the emoji in that blob. And here I've done very bad things to the RGB and assumed it's linear -- it's not. So I'm just taking a linear distance -- it's not correct. It's kind of correct. It's probably not the best emoji for that but I don't care, it's art. I can get away with this. So every single blob for this, I keep doing this and put the spans if the output. So in the end, you get a giant pile of spans that contain the emoji that are assorted that the colors in that image it's going to be warped because Slack doesn't use monospaced fonts. So it's like work lemons but it's fine because we've made and you're trying to share that with your friends which is exactly what you're trying to do in the first place. So all of that was made with web components and because you can make web components you should make like more awesome artsy web components like a WordArt component from, like, Windows 95, or Windows 97, I don't remember which of them, you have, like, a foreground emoji and a background emoji and it says why your text. Good news, my coworker implemented this. So this is a custom element that I've made called an emoji picturing and you put your emoji and text, and you make awesome things. And because it's a web component, it's semantically expressive, and it was called Emoji Art, and it's doing what it's supposed to do, and you don't need to know how it works because it's scary. So I want you to think of web components as apps because that's what they are but in particular I want you to think of them as tools to make art and share art on the Internet because that's what I really care about. So do things, share things, tell people how to pixelate their face and put an emoji on it. Thanks!