Introdução
Bom dia, boa tarde e boa noite, vocês talvez estejam se perguntando "o que diabos esse titulo quer dizer?", se acalmem que irei explicar. No nosso cotidiano, estamos cercados de tarefas chatas que devem ser realizadas sempre do mesmo jeito, nas mesmas métricas, são aquelas tarefas que você não consegue fugir, quando o cliente de liga pedindo pra fazer tal coisa no site pra ele, pois ele contratou o modo manual do sistema, você ja pensa "la vou eu fazer trabalho de corno de novo...".
Mas ae eu pensei "e se invés de ficar se lamentando sobre isso não automatizo esse trabalho?", nessa série que não tem data de término e nem periocidade, eu vou mostrar como resolvi alguns dos meus processos usando tecnologias WEB ! A intenção infelizmente não é fazer tutoriais, mas sim mostrar o meu problema, como eu tinha que fazer, e o que eu fiz para resolver ele. No final os códigos estarão todos no github e você poderá utilizar até a mesma solução caso tenha um problema semelhante.
Sem mais explicações, vamos ao primeiro problema da série ! Os thumbs do facebook
Problema
Fazer esses posts são muito legais, de verdade, eu gosto de escrever aqui sobre as coisas que eu faço, ou as idéias que eu tenho, ou até mesmo no caso da série do canvas, do menu toggle sem JS ou até mesmo dos desenhos feitos somente com CSS, ensinar algo que eu saiba fazer para vocês.
Mas toda essa parte boa e divertida, também trás algumas coisas que têm que ser feitas, uma delas é o o thumb que irá aparecer na chamada do post no facebook, tipo esse aqui em baixo.
Quando comecei a fazer o blog, eu tinha imaginado que o open graph fazia isso para mim, com alguma tag ultra bolada, mas como ja dizia collor é um sonho de uma noite de verão, e eu teria que ter esse corno job de montar a thumb do post sempre que eu terminasse de escrevê-lo.
Idéias de como solucionar
A princípio fui na mais básica, montar um templatezinho no inkscape, ou photoshop ou qualquer programa de edição de imagens e toda vez que eu fosse fazer um post novo era só entrar lá, mudar o texto, mudar a tag(que eu adicionei recentemente), a cor de fundo. Nada que uns 3~5 min não resolvam !
Eu até tinha aceitado bem esse método mas lembrei de um pequeno detalhe, eu não sou o às dos editores de imagem, o trabalho que eu iria ter de modificar as coisas toda vez(sim, eu me enrolo para caramba nas ferramentas), iria talvez demorar um pouco mais do que deveria, e pra montar o template ??? nusss... Realmente talvez existisse uma opção melhor.
Eis que então surge minha segunda solução, "bora fazer um plugin pro jekyll que vai gerar isso pra mim e adicionar no template", essa era uma ótima opção pois teria trabalho zero para gerar esses thumbs, imagina que fácil? só escrever e não ter o trabalho de fazer a thumb depois.
Mas novamente, temos um problema com essa ótima idéia, jekyll foi feito em ruby e não manjo nada de ruby(nunca vi, ja comi eu só ouço falar), e nem manjo sobre como fazer um plugin para o jekyll. Não que eu não queira aprender, afinal ruby será a próxima linguagem que irei brincar, mas eu precisava disso na hora.
Solução
Para firmar conhecimento, eu gosto de utilizar aquilo que aprendi em problemas da vida real, até mesmo porque é bem assim que a vida funciona, você tem problemas reais e precisa de soluções reais.
No caso do meu problema, eu sabia que com o canvas eu posso gerar imagens, por mais que não tenhamos visto isso na nossa série sobre o canvas, com ele nós podemos utilizar, manipular e criar imagens.
Sendo assim, a única coisa que eu tinha que fazer era utilizar meu conhecimento para fazer um gerador de thumbs de facebook v1.0 ! e o resultado disso eu estou compartilhando com vocês para utilizarem caso também precisem de algo semelhante !
LINK PARA O GERADOR DE THUMBS. :D
PS: preciso dar algumas considerações, eu fiz tudo(css/js) em um único arquivo HTML, dessa forma eu não preciso me preocupar sempre em ter assets comigo, se eu precisar do meu gerador é só dar dois cliques e funciona que nem um programa no browser. Todo o JS está comentado, sendo assim quem tiver interesse é só ler lá, também me mandar uma mensagem caso encontre alguma dúvida !
Conclusão
Primeiramente muito obrigado a todos que leram o post até aqui, espero que eu tenha ajudado alguém que estava precisando de algo semelhante e que eu tenha estimulado várias mentes a identificarem um processo e tentarem achar uma solução maneira para automatizá-lo.
Esse post não será o único nesse estilo, pretendo trazer outros posts sobre outras coisas que automatizei, ou boilerplates que criei,
Pra quem ficou chateado ao saber que da pra mexer com imagens no canvas eu nem comentei isso na série, se acalmem que está para vir aí um canvas avançado.
Amanhã tem post de novo, e espero todos vocês aqui ! obrigado novamente e estou a espera de duvidas, criticas, sugestões e qualquer outra interação nos comentários ! Passar bem e até a próxima !
