基調講演：華やかなJavaScript：メイクアップとコーディング教育 - Anna Lytical

[0:00] Hi, I'm Analytical, the sickeningly entertaining and educational coding drag queen, and I'm so excited to join you at OpenJS World. I am a tech education content creator, and I basically just make videos with entertaining code examples. I share my programming journey and help others on theirs. And occasionally, I have very snarky tweets about things that bother me in tech. But before I start, this might be many of your first time seeing drag. And drag is just a way to play with self-expression, subvert gender, and for me, be very extra and really think into my full personality. It's a staple of the LGBTQ+ community, which I am a part of, happy pride, but anyone can do drag regardless of their gender or orientation. I know that was a long spiel, but if the first bitters I would be speaking has grabbed your of my glamorous coding content on Twitter, YouTube, Instagram, and TikTok. You can find me at @TheAnatLytical and you can also just google "coding drag queen" and I will come up. I wanted to give you all an opportunity to learn something new through a lens that might be familiar. We're going to do some coding but then we're going to do some makeup and we're really going to do them together. Once we get through that, I think you'll have a pretty good idea of my style of content and we can

[1:30] how to not be intimidated by it, and how to bring your own personality into it. I'm going to show you how I made this gorgeous purple eyeshadow look today. This is the plan. So I gotta go take it off so we can get started. But be right back. Hi, I'm back. You know what, I bet all of you think JavaScript is so powerful. Well, it has nothing on eyeshadow and eyelashes for a drag queen with any program, we need our packages, we need the materials. And this is really going to be whatever you can get your hands on if you want to follow along. So we'll need an eyeshadow palette, ideally very colorful, If you can get like a flat, more like a flat one. Concealer, eyelashes, these are really gonna Make everything pop. We need the lash glue to adhere them. A liner and mascara. If you think this is a lot of packages, you don't want to see everything it takes to get this full fantasy, even just up to this point. But through all the materials and the imports for the eyeshadow palette, ideally, if you're going to go try to find one, you can find one that's really colorful. This one's really colorful. Sometimes you've got to import a second package to get that one function, and it's like, I really like this one because it has this really nice...

[2:47] There's really nice purple in here, but this other one I have has all these really nice glitters. So it's like, you know, you just got to import both of them with code or with makeup. Importing another package has its costs with code. You know, it could make your app slower or larger or more confusing to contribute to. And with makeup, I don't know that much room in my New York City apartment to keep everything. There is definitely a cost. And also, you know, to import a package can be kind of free, but like, These are not free. So when I like to represent things in the real world with code, I love to make a class. So this is my eye. Well, it's not my eye. It's an eye. I googled an eye. And it has all these parts nicely labeled already. So we're going to stick with it. There's like a grid around like the main area that kind of captures most of the points. But then there are a few points like in the inner corner or maybe up here or like below that aren't captured. So they're labeled separately. Let's just focus on some of the grid for now. And made a class for an eye. I threw a 2D array in there for that main eye grid, and then I added a few individual variables just to indicate if the lashes are applied, the liner is applied, and then a lower lash line color. The grid is obviously very helpful because you know the precise location for where you're going to put everything, but a real eyeshadow tutorial isn't going to be saying, okay, go to index 00 of your eye and apply pink very gently with a small brush. No, no, no. They

[4:13] color like in your crease or your outer V. So there are a few common areas I've added. So there's the lid, outer V, inner corner, crease, and the outer area. Now that we've got the basics of our grid and the areas within that grid and even outside there, let's add a function apply color. I will take in a color and an area and use a for each loop to just apply the color to that whole area. We might also want to get the color for that area. So I added a getter here. One last thing before we actually Start printing the makeup on. I know we are excited. We just need a print function so we can see what's going on, check our progress. We're going to keep things fairly simple. We're just going to use the standard print for our 2D array. Use a template string to print out the lower lash line color. We're going to conditionally print if we've applied our liner and our lashes. Oh my god, it's make up time. I'm going to start out by just making a new eye object. I got two right here, but we're just going to work on one for now. We're going to grab some of this light purple color and fluffy brush and then we're just going to take it and apply it all around this lighter area. Now once this is done we can go in, I'm going to go in with like a bit more of a

[5:21] dense brush. I'm going to go and get this like really the really vibrant purple. I definitely want to be careful with it because otherwise it could get really messy. So I'm just going to kind of stamp that in. And I know I said I was going to do this on the whole crease, but I kind of like to do it just on the sides. Now we could leave it like this But to get a more natural look, *fart noise* natural. Well, I guess to get a more polished look, we want to blend these out. So it's time for a new function. We're going to take the two areas in our function, they'll be our inputs, We'll get their color and then again, because it's kind of rudimentary, we're just going to add the strings. Nothing too fancy. I'm going to grab a new brush and really start to blend this out.

[6:07] Thank you. There. Now that is so much better. It's just so soft and all the edges are really blurred. Now we need to add just a little bit more depth. I'll pull the darker one from in here. So and I'm going to just apply that to my outer V. It's just being very precise of where. where I'm putting things but like you know in the end if you've got purple all over your eye you're gonna look great you're gonna feel great. I will then just blend the crease and the outer v. Now this is looking great we could stop here but I am a drag queen I mean I've got purple all over my face and purple hair um so I want to go bigger and bolder and one way to do that is with glitter but right now there's kind of a lot of stuff going on on my eye so we're gonna do a cut crease. It a very hot and trending makeup term, but it just means we're going to reset some of our areas. Once they're reset, we can apply glitter and have it really pop. We're going to need to add a new area for where our cut crease will be. So it's basically like kind of the edge of the lid and then maybe in the inner corner a little bit. And then we just reset that to an empty string. With makeup though, you just grab your concealer and you can put it directly on your eye or grab your angled brush or any kind of flat brush and you just basically carve it out and

[7:23] space and it's so much sharper and defined. Now on to my favorite part, the glitter eyeshadows. You don't even really need a brush for glitter. I kind of mentioned this earlier, you can just take your finger and you get a lot more color and vibrancy when you do it like this. So I just kind of take my finger and tap it on gently. And for a smaller area, you could just grab it on your pinky and it'll be great. Now the final colors that we need to add is just the lower lash line so I can take I don't have any like to use like a more like firm brush for this so it doesn't get everywhere. And then I'm just going to go drag it around there. I'm going to go apply my lashes and liner off camera, do any finishing touches for my completed look, and I'll also obviously do the other eye.

[8:03] but I will be right back. Hi! I'm back and beautiful! Yeah. The completed look is here. We just cleaned up things a little bit. I really didn't even do that much on this eye. It's like the power of the lash. But other than that, I just duplicated it on the other eye. threw on some nails. Here we've also got the final code. And I'm sure you are eagerly awaiting to find out what the output of all of this is, and... here you go! I think, you know, it's a tough call of who wore it better, but as long as we're both feeling beautiful, it's...

[8:46] fully win in my books. But yes, I'm feeling my purple fantasy and I'm also feeling my teaching fantasy. Thank you so much for letting me teach you a little bit about makeup or maybe a little bit about code. And this is what I do. I take something that people know, maybe it's makeup, maybe it's drag, comedy. For most of you watching this video, it's probably JavaScript code, and I combine it with something new. I take all the things that I love and help people draw connections to things that they love and show that, you know, makeup and code aren't that different. Coding can be creative and there isn't a specific kind of person that can be an engineer. You know, I view the path as to becoming a great engineer or to even helping someone become a great engineer as a ladder. Each step might be clear, you know, but sometimes the rungs seem really far apart or maybe the ladder seems really tall or, you know, maybe you left your ladder in the shed and don't even know where the shed is. This might be the typical ladder into tech. It's a very easy one or not easy, but it's, you know, a very standard path there. Maybe start intro CS, maybe do some data structures, maybe an algorithms course, some kind of software engineering or web development course, and then get a job. But you know, that only works if you have all the knowledge and the resources available to take that path. You may not even know about some of those courses that you need to take and might get left out. This might be the latter for someone who's just getting into coding. Maybe they know about, you know, some of the free online resources like Free Code Camp. They think maybe they could take a class, but you know what, maybe they're even too

[10:16] they think they don't have the right knowledge to go into it. And even in the intro CS class, the rungs could be really far apart just to get through each lesson. It might feel like you're stretching so far beyond what your arms reach. And that's really scary. So this is where my content comes in. I fill in the gaps and I help people see a way to keep moving on, keep climbing, and also just have fun with it because there's a lot of fun to be had with coding and I don't want people to forget about that. I just fill in the gaps. I don't try to cover everything because, you know, it would take me forever if I wanted to try to disseminate all of my computer science and coding knowledge in the perfect way. I just pick bits and pieces and help people up that ladder. Even with the tutorial Maybe you didn't get all the eyeshadow tips and the blending and all of that, but it actually got you exposed to the subjects in a way that's interesting and engaging. And I find that it actually gets people to want to ask more questions if it isn't perfect. Someone might say, "What if we wanted to do the whole face? How would we represent that?" Or "Could we output an image instead of just that text of the array?" Or "Could we even do the reverse, take a picture of eyeshadow and turn it into code?"

[11:36] there are more complex problems, but people are more willing to engage and will also go deeper with their questions. Thank you. I've helped thousands of people continue on their coding journey, and I plan to keep reaching as many as I can. But you know what? Not everyone's into drag or makeup or my communication style. You know, my partner and I always say everyone's different. And you just have to have something special you could bring to the space. But I think all of you have that. Maybe it's a hobby. Maybe it's a point of view, a specific culture, or even it could just be a language that you speak.

[12:10] And I really want to encourage you to try making some form of content and bringing yourself into it. And it doesn't have to be what a standard coding tutorial looks like. It could be a 30-second TikTok about your favorite JavaScript framework or a drawing of different web tools working together and post that on Instagram. We've seen plenty of existing tutorials. I know I've gone through so many and It's really easy to think that they have to be a certain way, but really you could do it however you want. My drag is pretty different than most drag. A lot of drag queens will go into a bar, lip sync, but I make coding tutorials and I don't even do those in the traditional way. At its root, drag is subversive, and I've taken that into my technical content creation, too.

[13:05] by coding. Also, Selfishly, doing the work to put together some kind of content really forces you to dive deeper and understand the nuances and explain it well. This is really valuable if you're looking for some leadership opportunities at your job. Because if you can teach someone something, that's a really valuable skill. To me, though, I'm just sharing how I see the world. I'm not even teaching anything that complex. I look at my eyeshadow palettes, and I just see arrays. And I want to open people's eyes up.

[13:38] decade. I've been working as an engineer for about six years and I've been creating this content as analytical for two and a half. And I really think I learned the most from making this content. It's taught me to be a better engineer, better communicator, and has given me incredible opportunities like being able to give the keynote at this worldwide JavaScript conference and Talk about makeup. Thank you.