Palestra principal: JavaScript Glamoroso: Maquiagem e Educação em Programação - Anna Lytical

[0:00] Oi, eu sou Anna Lytical, a drag queen de programação doentemente divertida e educativa, e estou muito animada para me juntar a vocês na OpenJS World. Sou criadora de conteúdo de educação tecnológica, e basicamente faço vídeos com exemplos de código divertidos. Compartilho minha jornada de programação e ajudo outros na deles. E ocasionalmente, tenho tweets muito sarcásticos sobre coisas que me incomodam na tecnologia. Mas antes de começar, pode ser a primeira vez de muitos de vocês vendo drag. E drag é apenas uma forma de brincar com a autoexpressão, subverter o gênero, e para mim, ser muito extra e realmente pensar na minha personalidade completa. É um marco da comunidade LGBTQ+, da qual faço parte, feliz orgulho, mas qualquer pessoa pode fazer drag independentemente de seu gênero ou orientação. Sei que foi um discurso longo, mas se os primeiros bitters que eu falar tiverem chamado sua atenção do meu conteúdo glamoroso de programação no Twitter, YouTube, Instagram e TikTok. Você pode me encontrar em @TheAnatLytical e também pode simplesmente pesquisar no Google "coding drag queen" e eu aparecerei. Eu queria dar a todos vocês a oportunidade de aprender algo novo através de uma lente que pode ser familiar. Vamos fazer um pouco de programação, mas depois vamos fazer maquiagem e realmente vamos fazê-los juntos. Depois de passarmos por isso, acho que vocês terão uma boa ideia do meu estilo de conteúdo e podemos

[1:30] como não se intimidar com isso, e como trazer sua própria personalidade para isso. Vou mostrar como fiz este look lindo de sombra roxa hoje. Este é o plano. Então tenho que tirar para começarmos. Mas já volto. Oi, voltei. Sabe de uma coisa, aposto que todos vocês acham que JavaScript é tão poderoso. Bem, não tem nada a ver com sombra e cílios para uma drag queen com qualquer programa, precisamos dos nossos pacotes, precisamos dos materiais. E isso vai ser realmente o que você conseguir pôr as mãos, se quiser acompanhar. Então vamos precisar de uma paleta de sombras, de preferência bem colorida, se você conseguir uma tipo plana, mais para plana. Corretivo, cílios postiços, esses vão realmente fazer tudo se destacar. Precisamos da cola de cílios para fixá-los. Um delineador e rímel. Se você acha que são muitos pacotes, você não quer ver tudo o que é preciso para conseguir essa fantasia completa, mesmo só até este ponto. Mas através de todos os materiais e as importações para a paleta de sombras, idealmente, se você for tentar encontrar uma, você pode encontrar uma que seja bem colorida. Esta é bem colorida. Às vezes você tem que importar um segundo pacote para obter aquela função, e é tipo, eu gosto muito desta porque tem esse...

[2:47] Tem um roxo bem bonito aqui, mas essa outra que eu tenho tem todos esses glitters bem bonitos. Então é tipo, você sabe, você só tem que importar os dois com código ou com maquiagem. Importar outro pacote tem seus custos com código. Você sabe, pode deixar seu aplicativo mais lento ou maior ou mais confuso para contribuir. E com maquiagem, não sei se tenho muito espaço no meu apartamento em Nova York para guardar tudo. Definitivamente há um custo. E também, você sabe, importar um pacote pode ser meio gratuito, mas tipo, esses não são gratuitos. Então, quando eu gosto de representar coisas no mundo real com código, eu adoro criar uma classe. Então este é o meu olho. Bem, não é o meu olho. É um olho. Eu pesquisei um olho no Google. E ele tem todas essas partes bem rotuladas. Então vamos ficar com ele. Há tipo uma grade em torno da área principal que meio que captura a maioria dos pontos. Mas então há alguns pontos como no canto interno ou talvez aqui em cima ou tipo abaixo que não são capturados. Então eles são rotulados separadamente. Vamos nos concentrar em parte da grade por enquanto. E fiz uma classe para um olho. Coloquei um array 2D ali para essa grade principal do olho, e então adicionei algumas variáveis individuais apenas para indicar se os cílios estão aplicados, o delineador está aplicado, e então uma cor da linha inferior dos cílios. A grade é obviamente muito útil porque você sabe a localização precisa de onde vai colocar tudo, mas um tutorial de sombra real não vai dizer, ok, vá para o índice 00 do seu olho e aplique rosa bem de leve com um pincel pequeno. Não, não, não. Eles

[4:13] cor como no seu côncavo ou no seu V externo. Então há algumas áreas comuns que adicionei. Então tem a pálpebra, V externo, canto interno, côncavo e a área externa. Agora que temos o básico da nossa grade e as áreas dentro dessa grade e até fora dela, vamos adicionar uma função apply color. Vou receber uma cor e uma área e usar um loop for each para apenas aplicar a cor a toda aquela área. Também podemos querer obter a cor daquela área. Então adicionei um getter aqui. Uma última coisa antes de realmente começarmos a imprimir a maquiagem. Sei que estamos animados. Só precisamos de uma função de impressão para podermos ver o que está acontecendo, verificar nosso progresso. Vamos manter as coisas bem simples. Vamos apenas usar o print padrão para nosso array 2D. Usar uma template string para imprimir a cor da linha inferior dos cílios. Vamos imprimir condicionalmente se aplicamos nosso delineador e nossos cílios. Ah meu Deus, é hora da maquiagem. Vou começar apenas criando um novo objeto olho. Tenho dois aqui, mas vamos trabalhar em um por enquanto. Vamos pegar um pouco dessa cor roxa clara e pincel fofo e então vamos apenas pegar e aplicar ao redor dessa área mais clara. Agora, uma vez que isso esteja feito, podemos ir, vou entrar com um pouco mais de um

[5:21] pincel denso. Vou pegar esse tipo realmente o roxo realmente vibrante. Definitivamente quero ter cuidado com ele porque senão pode ficar muito bagunçado. Então vou apenas meio que carimbar isso. E eu sei que disse que ia fazer isso no côncavo todo, mas meio que gosto de fazer só nas laterais. Agora poderíamos deixar assim Mas para obter um visual mais natural, *barulho de peido* natural. Bem, acho que para obter um visual mais polido, queremos esfumar isso. Então é hora de uma nova função. Vamos pegar as duas áreas na nossa função, elas serão nossas entradas, Vamos obter a cor delas e então novamente, porque é meio rudimentar, vamos apenas adicionar as strings. Nada muito chique. Vou pegar um pincel novo e realmente começar a esfumar isso.

[6:07] Obrigada. Aí. Agora isso está muito melhor. É tão suave e todas as bordas estão realmente desfocadas. Agora precisamos adicionar só um pouco mais de profundidade. Vou pegar o mais escuro daqui. Então e vou apenas aplicar no meu V externo. É só ser muito precisa de onde. onde estou colocando as coisas mas tipo você sabe no final se você tem roxo por todo o olho você vai ficar ótima você vai se sentir ótima. Vou então apenas esfumar o côncavo e o V externo. Agora isso está ficando ótimo, poderíamos parar aqui mas eu sou uma drag queen, quer dizer, tenho roxo por toda a cara e cabelo roxo, então quero ir maior e mais ousada e uma maneira de fazer isso é com glitter mas agora tem meio que muita coisa acontecendo no meu olho então vamos fazer um cut crease. É um termo de maquiagem muito quente e tendência, mas significa apenas que vamos redefinir algumas das nossas áreas. Uma vez que elas estejam redefinidas, podemos aplicar glitter e fazer com que ele realmente se destaque. Vamos precisar adicionar uma nova área para onde nosso cut crease estará. Então é basicamente tipo a borda da pálpebra e talvez no canto interno um pouco. E então apenas redefinimos isso para uma string vazia. Com maquiagem, porém, você apenas pega seu corretivo e pode colocá-lo diretamente no olho ou pegar seu pincel angular ou qualquer tipo de pincel chato e você basicamente esculpe e

[7:23] espaço e é muito mais nítido e definido. Agora vamos para a minha parte favorita, as sombras com glitter. Você nem precisa realmente de um pincel para o glitter. Eu meio que mencionei isso antes, você pode simplesmente pegar o dedo e consegue muito mais cor e vibração quando faz assim. Então eu meio que pego o dedo e dou leves batidinhas. E para uma área menor, você pode simplesmente pegar com o dedinho e vai ficar ótimo. Agora as cores finais que precisamos adicionar são apenas na linha inferior dos cílios, então posso pegar, não tenho nenhum tipo de usar um pincel mais firme para isso, para não espalhar por todo lado. E então vou arrastar por ali. Vou aplicar meus cílios e delineador fora da câmera, fazer os retoques finais para o meu look completo, e também vou obviamente fazer o outro olho.

[8:03] mas já volto. Oi! Voltei e linda! É. O look completo está aqui. Só limpamos as coisas um pouquinho. Eu realmente nem fiz tanta coisa neste olho. É tipo o poder do cílio. Mas fora isso, eu só dupliquei no outro olho. coloquei umas unhas. Aqui também temos o código final. E tenho certeza de que você está ansiosamente esperando para descobrir qual é o resultado de tudo isso, e... aqui está! Eu acho que, sabe, é difícil dizer quem usou melhor, mas desde que nós duas estejamos nos sentindo lindas, é...

[8:46] totalmente vitorioso na minha opinião. Mas sim, estou sentindo minha fantasia roxa e também estou sentindo minha fantasia de professora. Muito obrigada por me deixar te ensinar um pouco sobre maquiagem ou talvez um pouco sobre código. E é isso que eu faço. Eu pego algo que as pessoas conhecem, talvez seja maquiagem, talvez seja drag, comédia. Para a maioria de vocês assistindo a este vídeo, provavelmente é código JavaScript, e eu combino com algo novo. Eu pego todas as coisas que amo e ajudo as pessoas a criar conexões com as coisas que elas amam e mostro que, sabe, maquiagem e código não são tão diferentes. Programar pode ser criativo e não existe um tipo específico de pessoa que pode ser engenheira. Sabe, eu vejo o caminho para se tornar uma ótima engenheira ou até para ajudar alguém a se tornar uma ótima engenheira como uma escada. Cada degrau pode ser claro, sabe, mas às vezes os degraus parecem muito distantes ou talvez a escada pareça muito alta ou, sabe, talvez você tenha deixado sua escada no galpão e nem saiba onde fica o galpão. Esta pode ser a escada típica para a tecnologia. É uma muito fácil ou não fácil, mas é, sabe, um caminho muito padrão ali. Talvez comece com Introdução à Ciência da Computação, talvez faça algumas estruturas de dados, talvez um curso de algoritmos, algum tipo de curso de engenharia de software ou desenvolvimento web, e então consiga um emprego. Mas sabe, isso só funciona se você tiver todo o conhecimento e os recursos disponíveis para seguir esse caminho. Você pode nem saber sobre alguns desses cursos que precisa fazer e pode ficar de fora. Esta pode ser a escada para alguém que está apenas começando a programar. Talvez saibam sobre, sabe, alguns dos recursos online gratuitos como o Free Code Camp. Acham que talvez possam fazer um curso, mas sabe de uma coisa, talvez estejam até

[10:16] acham que não têm o conhecimento certo para entrar nisso. E mesmo na aula de Introdução à Ciência da Computação, os degraus podem ser muito distantes só para passar por cada lição. Pode parecer que você está se esticando muito além do alcance dos seus braços. E isso é realmente assustador. Então é aí que meu conteúdo entra. Eu preencho as lacunas e ajudo as pessoas a ver um caminho para continuar avançando, continuar subindo, e também apenas se divertir com isso, porque há muita diversão a se ter com programação e não quero que as pessoas se esqueçam disso. Eu só preencho as lacunas. Não tento cobrir tudo porque, sabe, levaria uma eternidade se eu quisesse tentar disseminar todo o meu conhecimento de ciência da computação e programação da maneira perfeita. Eu só escolho pedacinhos e ajudo as pessoas a subir aquela escada. Mesmo com o tutorial Talvez você não tenha absorvido todas as dicas de sombra e a esfumação e tudo isso, mas na verdade te expôs aos assuntos de uma forma interessante e envolvente. E eu acho que isso na verdade faz as pessoas quererem fazer mais perguntas se não for perfeito. Alguém pode dizer: "E se quiséssemos fazer o rosto inteiro? Como representaríamos isso?" Ou "Poderíamos gerar uma imagem em vez de apenas aquele texto do array?" Ou "Poderíamos até fazer o inverso, tirar uma foto de sombra e transformar em código?"

[11:36] há problemas mais complexos, mas as pessoas estão mais dispostas a se envolver e também vão mais fundo com suas perguntas. Obrigada. Eu ajudei milhares de pessoas a continuar sua jornada na programação, e pretendo continuar alcançando o máximo que puder. Mas sabe de uma coisa? Nem todo mundo gosta de drag ou maquiagem ou do meu estilo de comunicação. Sabe, meu parceiro e eu sempre dizemos que todo mundo é diferente. E você só precisa ter algo especial que possa trazer para o espaço. Mas eu acho que todos vocês têm isso. Talvez seja um hobby. Talvez seja um ponto de vista, uma cultura específica, ou até pode ser apenas um idioma que você fala.

[12:10] E eu realmente quero encorajar você a tentar fazer algum tipo de conteúdo e trazer você mesma para ele. E não precisa ser o que um tutorial de programação padrão parece. Poderia ser um TikTok de 30 segundos sobre seu framework JavaScript favorito ou um desenho de diferentes ferramentas web trabalhando juntas e postar isso no Instagram. Já vimos muitos tutoriais existentes. Eu sei que já passei por tantos e É muito fácil pensar que eles têm que ser de um certo jeito, mas na verdade você pode fazer do jeito que quiser. Meu drag é bem diferente da maioria dos drags. Muitas drag queens vão a um bar, fazem lip sync, mas eu faço tutoriais de programação e nem faço isso do jeito tradicional. Na sua raiz, o drag é subversivo, e eu levei isso para a minha criação de conteúdo técnico também.

[13:05] programando. Além disso, egoisticamente, fazer o trabalho de montar algum tipo de conteúdo realmente te força a mergulhar mais fundo e entender as nuances e explicar bem. Isso é realmente valioso se você está procurando algumas oportunidades de liderança no seu trabalho. Porque se você consegue ensinar algo a alguém, essa é uma habilidade realmente valiosa. Para mim, porém, estou apenas compartilhando como vejo o mundo. Nem estou ensinando nada tão complexo. Eu olho para minhas paletas de sombra e simplesmente vejo arrays. E quero abrir os olhos das pessoas.

[13:38] década. Trabalho como engenheira há cerca de seis anos e venho criando este conteúdo como analítica há dois anos e meio. E eu realmente acho que aprendi mais fazendo este conteúdo. Me ensinou a ser uma engenheira melhor, uma comunicadora melhor, e me deu oportunidades incríveis como poder fazer o keynote nesta conferência mundial de JavaScript e falar sobre maquiagem. Obrigada.