[ { "path": ".babelrc", "content": "{\n \"presets\": [\"next/babel\"],\n \"plugins\": [\n [\n \"babel-plugin-styled-components\",\n {\n \"ssr\": true,\n \"displayName\": true\n }\n ],\n [\n \"prismjs\",\n {\n \"languages\": [\n \"javascript\",\n \"css\",\n \"typescript\",\n \"json\",\n \"jsx\",\n \"markdown\",\n \"bash\",\n \"yaml\"\n ],\n \"plugins\": [\"line-numbers\"],\n \"theme\": \"tomorrow\",\n \"css\": true\n }\n ]\n ],\n \"env\": {\n \"test\": {\n \"plugins\": [\n [\n \"babel-plugin-styled-components\",\n {\n \"ssr\": false,\n \"displayName\": false\n }\n ]\n ]\n }\n }\n}\n" }, { "path": ".editorconfig", "content": "# Editorconfig: https://editorconfig.org/\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\nindent_style = space\nindent_size = 2\n" }, { "path": ".eslintrc", "content": "{\n \"extends\": \"next\"\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n*.xml\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\npublic/images\n" }, { "path": ".nvmrc", "content": "lts/*\n" }, { "path": ".prettierrc", "content": "{\n \"trailingComma\": \"none\",\n \"tabWidth\": 2,\n \"semi\": false,\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "Readme.md", "content": "# Willian Justen - Blog\n\nPersonal website/blog.\n\nCurrently using:\n\n- [NextJS](https://nextjs.org/)\n- [Vercel](https://www.vercel.com)\n\nIf you're interested on learn these technologies, check [my courses](https://willianjusten.com.br/cursos/).\n" }, { "path": "jsconfig.json", "content": "{\n \"compilerOptions\": {\n \"baseUrl\": \"src\"\n }\n}\n" }, { "path": "next-seo.config.js", "content": "const DefaultSEO = {\n openGraph: {\n type: 'website',\n locale: 'en_US',\n url: 'https://willianjusten.com.br',\n site_name: 'Willian Justen'\n },\n twitter: {\n handle: '@Willian_justen',\n site: '@site',\n cardType: 'summary_large_image'\n }\n}\n\nexport default DefaultSEO\n" }, { "path": "next.config.js", "content": "module.exports = {\n webpack: (config, { dev, isServer }) => {\n // Replace React with Preact only in client production build\n if (!dev && !isServer) {\n Object.assign(config.resolve.alias, {\n react: 'preact/compat',\n 'react-dom/test-utils': 'preact/test-utils',\n 'react-dom': 'preact/compat'\n })\n }\n\n return config\n },\n async rewrites() {\n return [\n { source: '/js/', destination: 'https://willianjusten.com.br/' },\n { source: '/jekyll/', destination: 'https://willianjusten.com.br/' },\n { source: '/svg/', destination: 'https://willianjusten.com.br/' },\n { source: '/dev/', destination: 'https://willianjusten.com.br/' },\n { source: '/tags/', destination: 'https://willianjusten.com.br/' },\n {\n source: '/making-of-blog-novo/',\n destination:\n 'https://willianjusten.com.br/making-of-blog-novo-gatsby-js'\n },\n { source: '/page/:slug*', destination: 'https://willianjusten.com.br/' }\n ]\n },\n async redirects() {\n return [\n {\n source: '/my-trips/',\n destination: 'https://my-trips.willianjusten.com.br/',\n permanent: true\n },\n {\n source: '/japanese-words/',\n destination: 'https://japanese-words.willianjusten.com.br/',\n permanent: true\n },\n {\n source: '/learn-japanese/',\n destination: 'https://learn-japanese.willianjusten.com.br/',\n permanent: true\n },\n {\n source: '/js-com-tdd-na-pratica-na-udemy/',\n destination: 'https://www.youtube.com/@WillianJustenCursos',\n permanent: true\n },\n {\n source: '/novo-curso-aprenda-criar-sites-animados-greensock/',\n destination: 'https://willianjusten.com.br',\n permanent: true\n },\n {\n source:\n '/novo-curso-gatsby-crie-um-site-pwa-com-react-graphql-netlify-cms/',\n destination: 'https://willianjusten.com.br',\n permanent: true\n }\n ]\n },\n images: { domains: ['pbs.twimg.com', 'avatars.githubusercontent.com'] }\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"willianjusten-blog\",\n \"private\": true,\n \"description\": \"My personal blog on willianjusten.com.br\",\n \"version\": \"3.0.0-alfa\",\n \"author\": \"Willian Justen \",\n \"dependencies\": {\n \"@babel/core\": \"^7.14.6\",\n \"@openlab/vercel-netlify-cms-github\": \"^1.1.0\",\n \"algoliasearch\": \"^4.10.2\",\n \"babel-plugin-prismjs\": \"^2.1.0\",\n \"babel-plugin-styled-components\": \"^1.12.0\",\n \"date-fns\": \"^2.22.1\",\n \"gray-matter\": \"^4.0.3\",\n \"next\": \"^11.0.1\",\n \"next-instantsearch\": \"^0.3.15\",\n \"next-seo\": \"^4.26.0\",\n \"nextjs-progressbar\": \"^0.0.11\",\n \"preact\": \"^10.5.14\",\n \"preact-render-to-string\": \"^5.1.19\",\n \"prismjs\": \"^1.24.1\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-infinite-scroll-component\": \"^6.1.0\",\n \"react-instantsearch-dom\": \"^6.11.2\",\n \"remark\": \"^13.0.0\",\n \"remark-autolink-headings\": \"^6.0.1\",\n \"remark-html\": \"^13.0.1\",\n \"remark-oembed\": \"^1.2.2\",\n \"remark-slug\": \"^6.0.0\",\n \"slugify\": \"^1.5.3\",\n \"styled-components\": \"5.3.0\",\n \"styled-icons\": \"^10.30.0\",\n \"styled-media-query\": \"^2.1.2\"\n },\n \"devDependencies\": {\n \"eslint\": \"^7.30.0\",\n \"eslint-config-next\": \"^11.0.1\",\n \"globby\": \"^11.0.4\",\n \"prettier\": \"^2.2.1\",\n \"sitemap\": \"^7.0.0\"\n },\n \"keywords\": [\n \"nextjs\",\n \"frontend\",\n \"blog\"\n ],\n \"license\": \"MIT\",\n \"scripts\": {\n \"dev\": \"NODE_OPTIONS='--openssl-legacy-provider' next dev\",\n \"build\": \"NODE_OPTIONS='--openssl-legacy-provider' next build\",\n \"start\": \"NODE_OPTIONS='--openssl-legacy-provider' next start\",\n \"lint\": \"next lint\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/willianjusten/willianjusten.com.br\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/willianjusten/willianjusten.com.br\"\n }\n}\n" }, { "path": "posts/3-meses-de-globocom.md", "content": "---\nlayout: post\ndate: 2015-06-28T20:36:52.000Z\ntitle: 3 meses de globo.com\ndescription: Um pouco do que passei desde o primeiro contato, processo seletivo,\n contratação, minha mudança e o dia-a-dia.\nmain-class: dev\ntags:\n - trabalho\n - globo\ncategories: null\n---\n\n## Introdução\n\nComo faço em todos os posts, a trilha sonora desse post é da cantora [Banks](https://open.spotify.com/album/5tMskcB2i9chjb4zcHx20n). Escrevo também enquanto desço minha querida serra de Petrópolis, num agradável frio de 8 graus.\n\nAlgumas pessoas já haviam me pedido para falar um pouco sobre como foi o processo seletivo e como é trabalhar na globo.com, eu demorei um pouco para escrever esse post, pois queria capturar o máximo de coisas possíveis e também esperar um tempo suficiente para que eu pudesse analisar tudo.\n\nPretendo fazer um post simples, com as minhas experiências, mas isso não quer dizer que tudo que aconteceu comigo, acontece com quem é contratado ou passa pelo processo seletivo, são só as coisas que ocorreram comigo.\n\nP.S.: também esperei os 3 meses de experiência antes de escrever, vai que me demitem né? Meu time me zoava todo dia sobre isso xD\n\n## Contatos\n\nEu trabalhava no [Queremos](https://www.queremos.com.br/), um lugar muito legal, com várias pessoas legais e uma ideia incrível. A empresa fica no Humaitá, bairro da zona sul do Rio de Janeiro. Como eu sou de uma cidade serrana, bastante afastada, não tinha muitos contatos, mas quando desci para trabalhar no Queremos, acabei conhecendo muitas pessoas e uma delas foi o [Davidson Fellipe](https://twitter.com/davidsonFellipe).\n\nConversa vai, conversa vem, ele perguntou se eu um dia não teria interesse em trabalhar na globo.com. Na hora eu fiquei receoso, porque a gente ouve sempre que os caras que trabalham na globo.com são todos gênios (e são mesmo!) e eu, um pobre iniciante nesse ramo de desenvolvimento, achava que nunca iria passar, mas falei que tinha interesse sim.\n\nNão deu muito tempo e entraram em contato comigo, perguntando se eu teria interesse de participar do processo seletivo. Eu fiquei meio bolado e fui conversar com o Davidson sobre, ele falou para eu tentar, que não custava nada e ele acreditava bastante em mim. Como eu realmente não tinha nada a perder e queria saber meu nível, aceitei passar pelo teste.\n\n\n## Processo Seletivo - Parte 1\n\nAo aceitar participar, recebi um projeto com várias coisinhas para fazer e que eu deveria entregá-lo no tempo que eu desejasse. Me pegaram numa semana complicada, onde estava cheio de coisas para fazer, mandei um email avisando sobre isso e foram totalmente tranquilos quanto a isso, falando para eu não me preocupar. Mas como sou um cara desesperado e preocupado por natureza (um defeito que venho tentando corrigir), peguei uma madrugada desesperada e fiz tudo. Não era nada super difícil não, mas possuía alguns detalhes interessantes e podia fazer com qualquer linguagem e stack. Eu escolhi fazer em Javascript, usei uma stack que já estava bastante habituado a usar, que é o meu [Fast](https://github.com/willianjusten/fast).\n\nPassou por volta de 1 semana até eu receber uma resposta, que no caso foi positiva. Disseram que gostaram do que eu fiz e tinham interesse em fazer um entrevista agora por Skype e marcaram um dia comigo.\n\n\n## Processo Seletivo - Parte 2\n\nDo dia que marcamos até o dia da entrevista no Skype, eu estava uma pilha de nervos, como sempre preocupado achando que não iria passar, me rebaixando. Dessa vez, foi a hora de conversar com um outro amigo que já estava na globo.com também, mas que já havia trabalhado no Queremos comigo, [Rodrigo Machado](https://twitter.com/rcmachado). Ele falou que eu podia ir para o apartamento dele ficar lá para a entrevista, para assim não me atrasar para o trabalho depois, eu ainda descia a serra de Petrópolis todos os dias.\n\nNa hora que iria ter o teste, não teve! Isso mesmo que você leu, eu fiquei desesperado para caramba, nem tinha dormido direito e aí o teste precisou ser cancelado devido a alguns problemas. Ele foi então remarcado para uma outra data. Foi desse dia que eu resolvi que deveria parar de ficar tão preocupado/desesperado. Eu já trabalhava num lugar legal, não haveria problema se eu não passasse também, era só um teste.\n\nQuando finalmente chegou o dia do teste no skype, alguns programadores do TechTudo conversaram comigo, perguntaram um pouco do meu histórico, projetos que eu tinha orgulho de ter participado, coisas interessantes que eu gostaria de contar, etc. Curiosamente eu estava bem relaxado, a conversa fluiu super bem e falei para caramba (sim, eu falo demais!!!).\n\nApós a conversa, falaram que iriam fazer alguns testes comigo. Os 2 primeiros testes eram para escrever pequenos programinhas para resolver alguns problemas, resolvi fazer um em javascript e o outro em python. O primeiro problema eu demorei até começar, dei uma travada bonita, aquela preocupação de fazer algo com geral vendo do outro lado. O segundo já foi bem mais tranquilo e saiu mais fácil. Depois destes 2 problemas, me passaram acesso a um web app, para eu fazer a correção de pequenos trechos de código em Javascript. Não eram erros de sintaxe e sim erros de performance, como manipulação de DOM dentro de um loop, entre outros problemas graves. Essa parte já foi bem mais simples para mim, já que gosto bastante de performance e já havia visto aquelas falhas de performance, inclusive em códigos mais velhos meus.\n\nDepois de tudo feito, falaram que gostaram bastante, mas que iriam analisar um pouco mais e entrariam em contato para me avisar se eu passei e a próxima etapa.\n\n\n## Processo Seletivo - Parte 3\n\nPassado uma semana, recebi um email avisando que haviam gostado bastante do meu teste, que eu havia passado para a próxima etapa e que ela consistia em passar um dia na globo.com.\n\nEu já havia sido avisado que teria essa etapa, mas na hora que recebi o aviso real, fiquei mega feliz, conhecer uma empresa bastante grande e que todos falam! Marcamos um dia e, é claro, fiquei super ansioso até o dia chegar. Mal dormi naquele dia, acordei extremamente cedo para descer a serra e não ter problemas de atraso. Cheguei lá com quase 2 horas de antecedência e nesse meio tempo acabei escrevendo um post, de curiosidade fui ver que horas eu comecei a escrever o post:\n\n**\"Como ter Domínio Proprio no Github Pages\"\ndate: 2015-01-29 04:16:36**. Sim, eu praticamente não dormi!!\n\nApós a espera, entrei e fui apresentado a algumas pessoas e guiado por dentro da globo.com. Para quem vinha de uma startup com umas 8-9 pessoas, foi um grande baque, tem muita gente lá dentro! Vários times de diferentes áreas, isso porque eu só tinha visto um andar, depois fui apresentado ao andar inferior, com mais um monte de gente também.\n\nPela manhã tive uma conversa com um dos times de Esportes, basicamente a mesma coisa que tive no Skype, só que agora presencial. Finalizando a conversa, me passaram um probleminha para resolver. Foi uma das piores soluções que eu fiz na vida, tanto que nem finalizei direito, fiquei bastante nervoso e frustrado... Me pediram para explicar o código e enquanto eu explicava, fui tendo outras ideias e fui explicando o motivo de ter pensando em outras coisas e acho que isso que me ajudou, porque eles viram que eu até que sabia, mas estava nervoso.\n\nNa parte da tarde conversei com o time do TechTudo, falei um pouco sobre o problema que eu estava resolvendo e também sobre outras coisas que eles iam me perguntando. A conversa foi super legal e com isso adquiri até contato com o [Igor Canedo](https://twitter.com/Caned0) e simpatia com o resto do time. Depois dessa conversa, fui ter uma conversa um pouco mais técnica com o Gerente Técnico, falamos sobre muitas coisas e ele também me propôs 2 problemas mais teóricos para eu dizer como faria a arquitetura do sistema para comportar esses 2 problemas, indo de banco de dados, até número de requisições a uma API. Não foi totalmente técnico, mas também não foi tão fácil, mas consegui expor vários pontos que ele gostou.\n\nJá no finalzinho da tarde, conversei com o pessoal do RH, sobre benefícios da empresa e outras coisas mais burocráticas e então dei tchau para todos, com pelo menos a sensação de dever cumprido. Dali era só esperar a resposta, mas que já nem era a mais importante das coisas, já que eu estava feliz de ter participado de tudo.\n\n\n## Contratação\n\n\nDeu uns 2-3 dias e me ligaram falando que eu havia passado! Fiquei mega feliz, mas sabia que agora seriam várias mudanças. Disse que aceitava sim, mas que primeiramente precisava me desvincular da empresa em que trabalhava e conversar com eles, para não causar nenhum problema para eles. Conversei com o pessoal da empresa, alguns ficaram chateados, mas como todos são legais, me desejaram boa sorte nesse meu novo rumo.\n\n\n## Conhecendo meu novo time\n\nAo chegar na globo, já para trabalhar. Fui apresentado ao meu novo time, que seria o Time 1 de Esportes, um dos responsáveis pelo globoesporte. Acho que eu não poderia ter caído num melhor time (puxando saco =p). Meu time é relativamente pequeno e é composto por:\n\n[Kenji Yamamoto](https://twitter.com/kenjiyamamoto), não tem aquela frase: \"você pode ser bom, mas sempre vai ter um asiático melhor do que você\", então...O cara é sinistro em milhares de coisas, brincamos até que ele é o pau para toda obra do time. Sempre com uma calma nipônica e um conhecimento tanto de linguagem quanto de produto (por já estar há quase 10 anos na globo.com), sempre me ajuda nas minhas dúvidas, por mais bobas que elas sejam.\n\n[Rômulo Jales](https://twitter.com/romulojales), é um cabra da peste arretado, lá de Pernambuco, é o cara do Backend. Parece que respira programação e sempre te dá uma solução para um problema. Profundo conhecedor de Python e também um grande conselheiro e amigo. Não tem nem muito tempo que o conheço, mas já me acolhe e me ajuda como se nos conhecessemos há anos.\n\n[André Cataldo](https://twitter.com/andrecataldo), o SM (Scrum Master) do time. Sempre preocupado com o time e o andamento dos projetos, atento para nos ajudar e nos atender em nossos problemas. Sabe como ser justo e comemorar uma conquista. Também um dos caras mais experientes da globo.com, com quase 14 anos só lá dentro, sendo que a globo.com fez 15 anos esse ano!\n\n\n## Dia-a-dia no globoesporte\n\nNo globoesporte trabalhamos com uma variação do método ágil chamado [Scrum](http://www.desenvolvimentoagil.com.br/scrum/). Com isso temos nossos Plannings Semanais e Dailys, usando uma board para anotar nossas histórias, sempre na base (To Do, Doing, Done), com algumas coisinhas a mais, que variam de time para time.\n\nExistem projetos só para o produto (esportes ou jornalismo ou entretenimento), mas também existem os projetos integrados a todas as áreas, em geral, nesse tipo de projeto, são feitas várias reuniões para entender as necessidades de cada um, para que assim a construção seja adequada a todos.\n\nDentro da globo, os projetos, em sua maioria, são feitos em Python/Django, mas também já vi coisas em Ruby, outras em Go e algumas áreas mais legadas usando Java. A preocupação é sempre em solucionar o problema de forma eficiente e útil para todos, então as linguagens e frameworks utilizados não são fixos, podendo variar bastante.\n\nPrezamos muito pela comunicação, tanto dentro do time como em outras áreas também. Como o Rômulo Jales diz: \"Não existe desenvolvimento sem comunicação\".\n\nA empresa é bastante legal e as pessoas são ótimas, semana passada eu pude participar do meu primeiro HackDay na globo e foi super divertido! Meu time desenvolveu um bolão bolado, utilizando a API do Tempo Real do globoesporte, para dar os resultados durante a Copa América.\n\nDava para ver na galera a animação e empolgação nos projetos, pelo que falaram foi um recorde de pessoas participantes e de projetos desenvolvidos, muitos deles eu queria ter participado, de tão legais que eram.\n\n## Mudança e Conclusão\n\nBom, como disse lá no início, apesar de eu ser do Estado do Rio de Janeiro, sou de uma cidade serrana, chamada Petrópolis, que é cerca de 2:30 da globo.com (isso já contando o trânsito que sempre existe). Esse processo de subida todo dia, gastando cerca de 5h era muito cansativo. Mesmo indo num ônibus confortável e \"dormindo\" boa parte do trajeto, eu precisava acordar bastante cedo. Foi aí que resolvi me mudar para mais próximo do trabalho, é claro que toda mudança é cansativa e estressante também, mas já venho notado os benefícios de fazer isso. Então, se você é de longe, não tenha medo de se mudar, a empresa é legal e tenho certeza que você será bem acolhido.\n\nSe você tem interesse, não tenha medo de tentar e basta enviar seu currículo no [github da globo](https://talentos.globo.com/).\n\nUffa, escrevi demais já! Enfim, espero que tenha respondido a maioria das dúvidas que me fizeram nesse tempo e caso queiram comentar mais alguma coisa, só falar nos comentários.\n" }, { "path": "posts/65-dicas-para-ser-um-programador-melhor.md", "content": "---\nlayout: post\ndate: 2017-06-27T16:14:42.000Z\ntitle: 65 dicas para ser um programador melhor\ndescription: Algumas dicas que podem ajudar muito a sua maneira de programar e pensar.\nmain-class: dev\ntags:\n - dev\n - dicas\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, nos últimos dias eu não tenho passado bem de saúde e com isso não tenho ficado muito no computador, para não me entediar tanto, resolvi ler alguns livros e um deles é um livro incrível, que resolvi pegar as dicas dele e passar para vocês.\n\nEsse livro eu li pela primeira vez quando estava trabalhando na HUGE, eles compraram o livro e eu peguei emprestado para ler. Eu achei tão bom que resolvi comprar um para mim =)\n\nE qual é esse livro afinal hein? É o [The Pragmatic Programmer](https://www.amazon.com.br/Pragmatic-Programmer-Journeyman-Master/dp/020161622X), que se você ainda não conhecia, dá uma olhada com bastante carinho, acho que todo desenvolvedor deveria ler.\n\nJunto com esse post, eu vou ouvindo o novo album da banda [Royal Blood](https://open.spotify.com/album/3Rz6kF8eGqrDOEteo5YsBj) chamado de [How Did We Get So Dark?](https://open.spotify.com/album/3Rz6kF8eGqrDOEteo5YsBj), são só 2 caras com uma bateria e um baixo que tocam um rock muito bom, outra coisa que vale a pena ser ouvida.\n\nBom, vamos lá, eu basicamente vou passar aqui as dicas adaptadas do livro para vocês. Leiam e releiam essas dicas com carinho, se puderem, imprimam em algum lugar para sempre ler ou salvem nos favoritos. Compartilhem com TODOS que puderem, pois um mundo onde os programadores seguem essas dicas, é um mundo melhor.\n\n## Dicas\n\n1. **Se preocupe com o que constrói** - Por que se gastar sua vida desenvolvendo software se você não se preocupa com ele ser bom?\n2. **Pense! Sobre o seu trabalho** - Desligue o piloto automático e tome o controle. Constantemente critique e avalie o seu trabalho.\n3. **Dê opções, não crie desculpas** - Ao invés de dar desculpas, dê opções. Não diga que não pode ser feito; explique como *pode* ser feito.\n4. **Não conviva com janelas quebradas** - Corrija designs ruins, decisões erradas e código ruim quando vê-los.\n5. **Seja um catalisador de mudanças** - Você não pode forçar as pessoas a mudarem. Mas você pode mostrá-las como o futuro pode ser e ajudá-las a participar na criação disso.\n6. **Veja o quadro geral** - Não fique tão focado só nos detalhes que esqueça de verificar o que está acontecendo ao se redor.\n7. **Faça da Qualidade um requisito** - Envolva os usuários para determinar a real qualidade que o projeto precisa ter e cumpra.\n8. **Invista regularmente no seu Portfolio de Conhecimento** - Faça do aprender um hábito.\n9. **Analise criticamente o que você lê ou escuta** - Não seja influenciado pelo hype das coisas. Analise a informação em termos de você e seu projeto.\n10. **É o que você diz e a maneira que você diz** - Não faz sentido você ter grandes ideias se você não consegue comunicá-las efetivamente.\n11. **DRY - Don't Repeat Yourself (Não se repita)** - Cada pedaço de código deve ser único e o mais genérico possível.\n12. **Faça ser fácil de reutilizar** - Se é fácil de reutilizar, pessoas vão reutilizar. Crie um ambiente que suporte o reuso.\n13. **Elimine os efeitos colaterais entre coisas não relacionadas** - Crie componentes que sejam auto-contidos, independentes e tenham um único e bem definido propósito.\n14. **Não existem decisões finais** - Nenhuma decisão é escrita em pedra. Ao invés disso, pense que as decisões são escritas em areia de praia, e se planeje para ir sempre mudando e adaptando.\n15. **Use \"tracer bullets\" para achar o alvo** - Faça as coisas e as deixe serem vistas, assim você pode ver o quanto elas chegam do que seu cliente realmente deseja.\n16. **Faça protótipos para aprender** - Prototipar é uma experiência de aprendizado. O seu valor não está no código em que você produz, mas nas lições que aprendeu para montar.\n17. **Programe perto do problema** - Crie e codifique na linguagem do seu usuário, como se você fosse ele.\n18. **Estime para evitar surpresas** - Estime antes de começar. Você irá possivelmente ver problemas a frente e conseguirá se organizar melhor.\n19. **Itere o tempo com o código** - Use a experiência que você ganha construindo a aplicação para refinar a escala de tempo do projeto e ter melhores estimativas.\n20. **Escreva e Rabisque** - Textos e rabiscos nunca se tornam obsoletos. Eles ajudam a melhorar o seu trabalho e simplificar depurações e testes.\n21. **Use o poder da linha de comando** - Use linha de comando quando interfaces não são necessárias.\n22. **Use um bom editor** - O editor precisa ser uma extensão da sua mão, tenha certeza que seu editor é configurável, extensível e vocês trabalham bem juntos.\n23. **Sempre use versionamento de código** - Versionamento de código são como máquinas do tempo para o seu trabalho, aqui é possível voltar atrás!\n24. **Corrija o problema. Não fique culpando** - Não importa se o bug é sua culpa ou de outro, é um problema e precisa ser corrigido.\n25. **Não entre em pânico quando estiver debugando** - Respire bem fundo e *pense!* sobre o que pode estar causando o bug.\n26. **O \"select\" não está quebrado** - É muito raro achar um problema que seja de fato do sistema operacional ou do compilador. O bug na maioria das vezes está na sua aplicação.\n27. **Não presuma, prove!** - Prove suas premissas num ambiente com dado real e sob as mesmas condições.\n28. **Aprenda manipulação de texto na sua linguagem** - você passa boa parte do tempo trabalhando com textos. Por que não deixar o computador fazer um pouco desse trabalho para você?\n29. **Escreva código que faça código** - Geradores de código aumentam sua produtividade e ajudam a evitar duplicações.\n30. **Você não pode escrever um software perfeito** - Softwares não podem ser perfeitos. Proteja seu código e os usuários dos erros inevitáveis.\n31. **Faça o Design com contratos** - Use contratos para documentar e verificar se o código faz o que se é pedido.\n32. **Quebre cedo** - Um programa morto normalmente dá menos problemas que um programa deficiente.\n33. **Use *assertions* para previnir o impossível** - use assertions para validar suas premisas. E use para proteger seu código de incertezas.\n34. **Use *exceptions* para problemas excepcionais** - Exceptions podem prejudicar a leitura e manutenibilidade do projeto, criando os famosos código spaguetti. Reserve *exeptions* para coisas de fato excepcionais.\n35. **Termine o que você começou** - Quando possível, a rotina ou objeto responsável por alocar aquele recurso, precisa ser responsável por desalocar também.\n36. **Minimize o acoplamento entre os módulos** - Evite o acoplamento aplicando a [Lei de Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter).\n37. **Configure, não integre** - implemente escolhas de tecnologia para uma aplicação como se opções de configuração, não somente como processo de integração ou código agregado.\n38. **Coloque abstrações no código, detalhes no metadata** - Codifique para o caso geral e coloque os casos específicos de forma separada do código base.\n39. **Analise o Workflow para melhorar a concorrência** - busque formas de realizar código em concorrência no workflow de seu usuário.\n40. **Desenvolva usando serviços** - Codifique em termos de serviços, independentes, bem definidos e com interfaces consistentes.\n41. **Separe as Views das Models** - Para ganhar flexibilidade a baixo custo, desenvolva sua aplicação em termos de models e views.\n42. **Não programe por coincidência** - Confie em coisas confiáveis. Tome cuidado com a complexidade acidental e não confunda uma feliz coincidência com o plano final.\n43. **Estime a ordem de seus algoritmos** - Tenha uma ideia de o quão demoradas as coisas podem acontecer antes de escrever seu código.\n44. **Teste suas estimativas** - Análises matemáticas de algoritmos não dizem tudo. Teste seu código sempre no ambiente mais próximo do real.\n45. **Refatore cedo, refatore frequentemente** - Assim como você pode arrumar e reorganizar um jardim, reescreva, retrabalhe e rearquitete seu código sempre que necessário. Corrija a raiz dos problemas.\n46. **Codifique para testar** - Comece pensando sobre como testar antes de escrever uma linha de código.\n47. **Teste seu software, ou seus usuários irão testar por você** - Teste implacavelmente. Não deixe seus usuários acharem bugs para você.\n48. **Não use código mágico que você não entende** - Mágicas podem gerar códigos complicados. Tenha certeza que você entende tudo que o código faz, antes de implementá-lo em seu projeto.\n49. **Não pegue requisitos - cave até eles** - Os requisitos raramente estão só na superfície. Eles estão enterrados em camadas de premissas, equívocos e política. Veja além do que foi pedido.\n50. **Trabalhe com o usuário para pensar como o usuário** - Teste com o usuário, é a única maneira de saber como ele de fato será usado. Pegue todos os insights possíveis assim.\n51. **Abstrações vivem mais que detalhes** - Invista em abstrações, não na implementação. Abstrações podem sobreviver as mudanças de diferentes implementações e tecnologias.\n52. **Cria um Glossário do projeto** - Crie e mantenha um lugar com todos os termos e vocabulários do projeto, pessoas novas podem não saber certas definições do projeto.\n53. **Não pense fora da caixa, ache a caixa!** - Ao enfrentar com problemas impossíveis. Pergunte a si mesmo: \"Isso precisa ser feito dessa maneira? Isso realmente precisa existir?\".\n54. **Comece quando você estiver pronto** - Você tem adquirido experiência com o tempo, não ignore as dúvidas que tiver.\n55. **Algumas coisas são melhor quando feitas do que descritas** - Não caia numa espiral de criar especificações e pensamentos, uma hora você precisa começar a codificar.\n56. **Não seja um escravo de métodos formais** - Não adote cegamente uma técnica sem colocar no contexto do seu desenvolvimento e suas capacidades.\n57. **Ferramentas caras não produzem designs melhores** - Tome cuidado com o hype das ferramentas, dogmas da indústria e custos. Julgue suas ferramentas pelos seus méritos.\n58. **Organize equipes por funcionalidades** - Não separe designers de desenvolvedores, monte equipes da mesma forma que você cria o código.\n59. **Teste cedo, teste frequentemente, teste automaticamente** - Testes que rodam a cada build são muito mais efetivos que testes esporádicos.\n60. **O código não está pronto até que os testes rodem** - só isso.\n61. **Use sabotadores para testar seu teste** - Introduza bugs de propósito em partes separadas do código somente para verificar se os seus testes vão pegar.\n62. **Teste o estado de cobertura, não a cobertura do teste** - Identifique e teste os diferentes estados do código. Testar só linhas de código não é o suficiente.\n63. **Ache bugs uma única vez** - Uma vez que um humano encontrou um bug, essa deverá ser a última vez que ele irá achá-lo. Crie testes para sempre verificar o bug.\n64. **Inglês é uma outra linguagem de programação** - Escreva documentos como você escreve código, honre o princípio do *DRY*, use metadata e geração automática.\n65. **Assine o seu trabalho** - os grandes construtores ficam orgulhosos de assinar suas obras, você também deveria se orgulhar.\n\n## Conclusão\n\nEspero que depois dessa leitura, você tenha identificado várias das suas falhas e também vários dos seus acertos e se organize para seguir sempre assim. E lembre-se o aprendizado é algo contínuo e importante, então sempre dê uma lida nessas dicas e pensa se está utilizando tudo que está ali ou se está se sabotando em algum momento.\n\nÉ isso aí galera, deixem aí nos comentários o que acharam dessas dicas, sejam críticos também! Se tem algo que não concordam ou que querem falar um pouquinho mais, a área de comentários é o lugar para isso. E compartilhem no trabalho de vocês!\n" }, { "path": "posts/a-estrutura-do-svg.md", "content": "---\nlayout: post\ndate: 2015-01-20T15:01:39.000Z\ntitle: \"#4 - A estrutura do SVG\"\ndescription: Saiba como o SVG funciona de verdade, seus elementos, alguns de\n seus atributos e alguns atalhos para facilitarem nosso trabalho.\nmain-class: svg\ntags:\n - svg\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\n- [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/)\n- [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/)\n- [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/)\n\n## Introdução\n\nSei que muita gente já está doida para aprender a fazer desenhos loucos e animações com SVG, mas é ainda mais importante aprender tudo que está por trás do SVG, para poder então, entender tudo que virá pela frente. Isso que vai diferenciar um cara que sabe SVG de um cara que aprendeu a futucar numa biblioteca e fez um \"trequinho ali para empresa\".\n\nA ideia também não será escrever algo muito extenso e cansativo, mas uma base para que se você olhar para um arquivo SVG, entenda o que significa cada parte dele e inclusive poder fazer melhorias baseadas somente no código.\n\n## Estrutura\n\nComo a maioria já deve saber o SVG tem uma sintaxe baseada em `xml`. Estamos na segunda edição da versão [1.1](http://www.w3.org/TR/SVG/). E a especificação do [SVG 2.0](http://www.w3.org/TR/SVG2/) já está sendo formulada, já em um processo bastante adiantado, seguindo os moldes das novas especificações, como CSS3 e o HTML5.\n\n```xml\n\n\n\n\n\n```\n\n### O que são essas coisas ali com a tag SVG?\n\nSão os `namespaces` do SVG. Eles servem para identificar a versão utilizada no SVG e o namespace padrão dele, assim o browser irá saber qual a melhor forma de renderizar aquele SVG. Isso será bastante importante para nós quando formos manipular o SVG através do Javascript, pois para criar novos elementos e definir atributos, iremos trabalhar no DOM através dos namespaces.\n\n### Preciso definir isso sempre?\n\nNão, não é necessário definir isso tudo sempre, mas é aconselhável, já que alguns browsers podem não entender muito bem como renderizar o seu SVG.\n\nSe quiser entender um pouco melhor sobre Namespaces, acessa o [link da MDN](https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course).\n\n## Elementos\n\nO SVG é tem algumas formas básicas, que permitem fazer os lindos desenhos que vemos. Irei mostrar essas formas e alguns de seus atributos, mas vale lembrar que elas serão mais necessárias caso você queira escrever o SVG inline e/ou para entender melhor um arquivo SVG de um desenho já pronto. Não será necessário que você faça desenhos mais complexos na mão, usando só essas formas.\n\n### O elemento rect\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n```xml\n\n \n\n```\n\nEsse elemento permite criar um retângulo e tem os seguintes atributos:\n\n- `x` : desloca o elemento ao longo do eixo x (horizontal) de acordo com o espaço do svg (opcional)\n- `y` : desloca o elemento ao longo do eixo y (vertical) de acordo com o espaço do svg (opcional)\n- `width` : define a largura do elemento\n- `height` : define a altura do elemento\n- `fill` : define a cor do preenchimento (opcional)\n- `rx` : define um curva nos cantos do retângulo (opcional)\n\n### O elemento circle\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n```xml\n\n \n\n```\n\nEsse elemento permite criar um círculo e tem os seguintes atributos:\n\n- `cx` : determina em qual local do eixo x irá ficar o centro do círculo\n- `cy` : determina em qual local do eixo y irá ficar o centro do círculo\n- `r` : define o raio do círculo\n- `fill` : define a cor do preenchimento (opcional)\n\n### O elemento ellipse\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n```xml\n\n \n\n```\n\nEsse elemento permite criar uma ellipse e tem os seguintes atributos:\n\n- `cx` : determina em qual local do eixo x irá ficar o centro da ellipse\n- `cy` : determina em qual local do eixo y irá ficar o centro da ellipse\n- `rx` : define o raio da ellipse no eixo x\n- `ry` : define o raio da ellipse no eixo y\n- `fill` : define a cor do preenchimento (opcional)\n\n### O elemento line\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n```xml\n\n \n\n```\n\nEsse elemento permite criar uma linha e tem os seguintes atributos:\n\n- `x1` : determina a posição no eixo x do primeiro ponto da linha\n- `y1` : determina a posição no eixo y do primeiro ponto da linha\n- `x2` : determina a posição no eixo x do segundo ponto da linha\n- `y2` : determina a posição no eixo y do segundo ponto da linha\n- `stroke` : define a cor do contorno da linha (opcional)\n- `stroke-width` : define a largura da linha (opcional)\n\n### O elemento polyline\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n```xml\n\n \n\n```\n\nEsse elemento permite criar uma polyline e tem os seguintes atributos:\n\n- `points` : define os pares ordenados (x,y) para cada ponto do elemento\n- `fill` : define o preenchimento interno do elemento\n- `stroke` : define a cor do contorno do elemento (opcional)\n- `stroke-width` : define a largura do contorno (opcional)\n\n### O elemento polygon\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n```xml\n\n \n\n```\n\nEsse elemento permite criar um polígono e tem os seguintes atributos:\n\n- `points` : define os pares ordenados (x,y) para cada ponto do elemento\n- `fill` : define o preenchimento interno do elemento\n- `stroke` : define a cor do contorno do elemento (opcional)\n- `stroke-width` : define a largura do contorno (opcional)\n\n### O elemento path\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nO elemento Path é um dos mais complexos e também mais importantes para o SVG. A partir dele, conseguimos criar qualquer forma e com isso gerar os belos desenhos existentes.\n\nExistem 5 tipos de paths:\n\n- Curveto (C,c)\n- Smooth Curveto (Curveto Suave) (S,s)\n- Curva Quadrática de Bézier (Q,q)\n- Curva Quadrática de Bézier Suave (T,t)\n- Arco Elíptico (A,a)\n\nA letra **maiúscula** utiliza coordenadas **absolutas** para criar a forma, enquanto a letra **minúscula** utiliza coordenadas **relativas**.\n\n## Conclusão\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nA partir de formas básicas podemos até brincar um pouquinho de fazer alguns desenhos bobinhos, ou se você for um Mestre Jedi, até fazer coisas incríveis. Você consegue saber as formas usadas na imagem acima? Teve ideia para fazer algum desenho legal? Faz no [codepen](http://codepen.io/) e manda para cá nos comentários =)\n\nSe quiser saber um pouco mais sobre Inline SVG tem o [Guia de Bolso do SVG](https://github.com/jonitrythall/svgpocketguide/blob/master/svgpocketguide-ptbr.md), que foi um livro que eu e o [Lucas Maia](https://github.com/lucasmaiaesilva) traduzimos com muito amor e carinho <3\n\nE se tiver alguma dúvida, seja de algo que eu já falei ou que ainda não falei, manda nos comentários, tento responder o mais rápido que der =)\n" }, { "path": "posts/a-historia-por-tras-do-meu-curso-de-react-avancado.md", "content": "---\nlayout: post\ndate: 2020-06-30T08:36:52.000Z\ntitle: A história por trás do meu curso de React Avançado\ndescription: As primeiras ideias do curso, desistências, saída da Toptal e reinicio de tudo!\nmain-class: misc\ntags:\n - react\n - curso\n---\n\n## Introdução\n\nFala pessoal, há algum tempo eu venho falando sobre um novo curso que eu estava preparando junto com meu amigo [Guilherme Louro](https://twitter.com/guilhermelouro) e design do [Marcos Oliveira](https://twitter.com/vmaarcosp).\n\nE hoje nós estamos finalmente lançando o **módulo 1** do curso! E como assim só o módulo 1? Bom, a ideia é que seja um curso mais vivo, com mais participação dos alunos e também um curso bem maior do que os outros.\n\nNo [site do curso](https://reactavancado.com.br/) nós falamos sobre todos os módulos e eu também [gravei um vídeo](https://youtu.be/zrx9kTHU-8Y) explicando ainda mais sobre todos os detalhes. Aproveita e vai lá no [site do curso](https://reactavancado.com.br/) que tem descontão!\n\nSe você estiver interessado na criação do curso e os altos rolês que aconteceram, segue comigo aqui embaixo. Enquanto lê, aconselho a ouvir o novo [album do Tycho](https://open.spotify.com/album/3uqx22ScaYQujWq2lBvXuQ?si=CMvxg3p-SQqADx4ffbPw_Q), é um som chillwave perfeito para relaxar, programar e tudo mais que puder imaginar, eu sou apaixonado demais pela sonoridade!\n\n## Prelúdio do curso\n\nA ideia de criar esse curso vem desde quando criei o curso de GatsbyJS, ou seja, por volta de Agosto/Setembro de 2019 eu já estava pensando e querendo fazer esse curso.\n\nNo curso de Gatsby, eu ensinei a fazer um blog como o meu e a colocar ele em produção. Desde então tiveram muiiiitos novos blogs surgindo por aí, alguns sem quase nenhuma modificação, outros completamente diferentes. Mas o mais importante, o povo estava feliz de **estar colocando algo em produção**\n\n## Um curso mais próximo do real\n\nAssim como todo mundo, eu também consumo vários cursos e livros, em todos os cantos possíveis. E uma das coisas que sempre me frustrou foi ver cursos interessantes, mas que sempre me davam a sensação de terem \"acabado pela metade\" ou não serem parecidos com os cenários reais.\n\nMuitos não ensinam com **testes**, outros não ensinam como criar o **código para produção**, outros não ensinam como fazer o **deploy** de fato. E, com isso, por mais que fossem cursos muito bons, acabavam criando essa sensação de \"falta alguma coisa\".\n\nFoi aí que eu pensei em fazer um curso que fosse realmente de ponta a ponta. Desde a escolha das ferramentas, onde aprendemos para que serve e o porquê de escolhermos, até criação do código para produção, com boas práticas, testes e tudo mais que fosse necessário. E por fim, o deploy também, porque nada mais frustrante do que criar algo e não saber como colocar isso para que os outros vejam.\n\n## Primeiras ideias, desistências e problemas\n\nQuando eu resolvi criar esse curso, a primeira coisa que eu tinha em mente, é que eu não queria fazer ele sozinho. Eu queria fazer com mais alguém, para que tivessem mais discussões e que por mais que fosse um \"time pequeno\", ele se aproximaria de coisas reais, como diferentes cabeças/pensamentos. E foi por isso, que desde o início eu chamei o Guilherme para trabalhar comigo. Nós já fizemos muita coisa juntos, ele já me ensinou para caramba e era uma oportunidade para discutir mais.\n\nA primeira ideia era um \"Cartola da NBA\", onde as pessoas iriam poder apostar nos times de acordo com as partidas e teriam os rankings e etc. Mas como é uma algo sazonal (tem meses sem jogos) e também não tem tanta gente que conhece/entende o funcionamento das partidas/playoffs, a gente acabou desistindo dessa ideia. Depois tiveram outras ideias aqui e ali, mas nada muito sólido infelizmente.\n\nFoi aí que eu tive que fazer uma viagem pela Toptal para a Espanha e consequentemente as ideias do curso foram pausadas. Logo depois eu já engatei numa viagem para Itália/Suiça com objetivo de fotografar e só retornei ao Brasil no final do ano. Por causa disso, sequer discutimos e o projeto ficou engavetado por um tempo.\n\n## Saída da Toptal\n\nDurante os meses de Janeiro e Fevereiro eu estava em alguns projetos da Toptal, mas estava bastante desanimado, não eram projetos que eu estava muito feliz e eu queria criar meus cursos, meus posts para o blog.\n\nConversei com meu gestor dizendo que estava desanimado e já querendo sair mesmo, ele disse para me acalmar, pensar melhor e me ofereceu um outro time/projeto para eu participar. Fiquei o mês inteiro de Março nesse novo projeto, que tinha um prazo absurdo, mas com ajuda de todo o time, nós conseguimos entregar exatamente no prazo, foi bom ter essa sensação de dever cumprido, mas ao mesmo tempo eu já não queria mesmo trabalhar para ninguém, pelo menos por um tempo. Foi aí que no dia 1 de Abril, eu saí da Toptal (e nem era de mentira!).\n\n## Foco total e novo integrante!\n\nAssim que eu saí da Toptal, eu decidi que iria voltar a criar mais coisas, mais conteúdo e sim, eu iria fazer um curso legal!\n\nUma das primeiras coisas que eu fiz, foi \"renascer\" o meu [canal do YouTube](https://www.youtube.com/WillianJustenCursos) para começar a testar novos estilos de vídeo e conteúdo. Passei a conversar muito mais no [Slack dos Alunos](https://bit.ly/slack-will) e até brincava sobre a Toptal estar atrapalhando o meu trabalho. Fiz até aposta com aluno (Alô Bruno Melo, tá pago?)\n\nE, claro, eu comecei a repensar no curso e a ideia de fazer um Ecommerce de jogos veio quase que na hora! Faz pouco tempo eu comprei um PC e passei a usar a Epic Games (que apesar de bonita é horrível) e também a Steam (que apesar de funcional é feia que dói).\n\nEu conversei com o Guilherme e ele topou a ideia, apesar de nós dois não gostarmos muito de fazer ecommerce, é um projeto muito procurado e **bastante real**. Começamos pensando no que poderia ter, imaginar umas telas e então, do nada, o [Marcos Oliveira](https://twitter.com/vmaarcosp) mandou a seguinte mensagem no twitter:\n\n![Marcos falando: Opa! Fala Willian beleza? Cara, acompanho seu trabalho há algum tempo e você com certeza é uma das pessoas que me inspira como dev, obrigado por todo o material que você produz, de verdade, é sensacional! Hoje entrei no teu blog pra me atualizar com os últimos posts que você fez e me veio uma ideia! Se eu pudesse de alguma forma retribuir tudo que aprendi nesses anos que te acompanho. Pensei de repente, se você me autorizasse obviamente, fazer um redesign do seu blog, uma logo bacana + ui bem clean. Isso obviamente se você achar legal, se você estiver contente com o blog hoje, não teria pq um redesign, mas ofereci mesmo como uma forma de retribuir tudo que aprendi contigo. Willian respondendo: Opa, pow, fico muito agradecido pela proposta e acho foda demais! Mas se num for pedir mt, mas já pedindo. O meu blog eu mudei tem tipo 1 ano, acho que pode durar mais, até pq não sei se vou ter tempo de mexer nele. Mas eu to iniciando a ideia de um curso, que é para ensinar como criar um ecommerce com ReactJS, Next, Strapi, testes e outras coisas mais. Se tu me ajudasse na ideia do layout dessa parada, ajudaria muita coisa. E bom, não seria de graça tb, vamos conversar para vc dar seu valor](/assets/img/conversa-twitter.png)\n\nO cara me mandou uma mensagem as **2 horas da manhã**, não teve jeito, tive que chamar para participar da ideia e ele topou!!!\n\n## Criação de um branding e conversas\n\nNo momento que o Marcos entrou no time, eu me empolguei, pois o curso estava cada vez mais se materializando e seria ainda mais real do que eu sequer imaginava! Afinal de contas, agora teríamos um layout feito por quem entende de design, já que eu e o Guilherme até brincamos aqui e ali, mas enquanto eu não sei desenhar nada, o outro é daltônico ahhaha\n\nO Marcos começou a fazer as mágicas dele lá, enquanto eu e o Guilherme fomos pensando na estrutura do código e definindo features e outras coisas mais. Quando ele nos mostrou a logo, foi paixão a primeira vista.\n\n![4 imagens, a superior esquerda mostrando a logo (um controle curvilineo com a palavra won ao lado. A superior direita: mesma imagem do controle, agora explicando que é uma mistura da letra W com um controle. Imagem inferior esquerda: a tipografia utilizada na logo Nixmat. Imagem inferior direita: a paleta de cores, envolvendo 4 cores.](/assets/img/branding.png)\n\n## Ansiedade mais de 8000 e mudança na estrutura\n\n![Veggeta do Dragonball Z destruindo seu óculos e dizendo que é mais de 8000](/assets/img/more-8000.jpg)\n\nEu estava extremamente ansioso e já queria logo falar para os alunos do projeto! E fui logo dizer as boas novas no Slack, mas ao fazer isso, eu acabei criando uma cadeia de ansiedade nos outros também!\n\nMas o curso estava só começando a criação, faltava (ainda falta) coisa para caramba! E então eu fiquei pensando, o que eu faço agora? Não posso simplesmente dizer que só vou lançar daqui 5-6 meses, pessoal vai ficar triste/desacreditado.\n\nFoi daí que eu conversei de novo com o Guilherme e tivemos essa ideia de lançar o curso mesmo em andamento. Assim nós poderíamos ir criando o conteúdo, ao mesmo tempo que o pessoal vai consumindo. Confesso que preciso controlar minha ansiedade quase que todos os dias, e os próximos meses serem intensos, mas vamos que vamos.\n\n## Mais crises de ansiedade e inseguranças\n\nJá tem tempo que eu crio cursos, mas esse é o primeiro curso que eu faço com um escopo tão grande e com essa duração bem maior (lançando por módulos a cada mês e tudo).\n\nE por causa disso, já me bateram diversas crises. Fico direto me perguntando se vocês vão gostar, se num vai ser simples demais e vocês vão reclamar, se vai dar tudo certo, se eu vou cumprir todos os prazos direitinho.\n\nDireto eu me confidencio com alguns amigos que me apoiam e falam para eu ficar calmo, mas essas sensações de me [sentir um impostor](https://willianjusten.com.br/sou-bom-o-suficiente/) sempre aparecem.\n\nNoite passada eu me senti péssimo por ter tido esse atraso de 1 dia da Udemy e era 4h da manhã e eu estava no suporte reclamando com eles (parece que deu certo né?).\n\nEnfim, por essas várias coisas, eu considero esse como um dos cursos mais importantes para mim até hoje e eu espero que ele seja bastante legal e importante para todos vocês também.\n\n## Agradecimentos\n\nEu gostaria de agradecer ao apoio de todos, desde quando eu comentei sobre o desejo de fazer esse curso, vários vieram me incentivar e dizer o quanto gostam do meu conteúdo e o quanto confiam no sucesso desse novo curso.\n\nCada retweet, mensagem, like, inscrito em algum canto, já é uma mensagem para continuar me encorajando a criar conteúdo, que é o que mais gosto de fazer, então fica aqui, meu muito obrigado!\n" }, { "path": "posts/a-importancia-do-github-para-desenvolvedores.md", "content": "---\nlayout: post\ndate: 2017-08-04T15:04:36.000Z\ntitle: A importância do Github para Desenvolvedores\ndescription: Alguns motivos do porque eu acho que o Github é importante para os\n desenvolvedores.\nmain-class: dev\ntags:\n - dev\n - dicas\ncategories: null\n---\n\n## Introdução\n\nFala meus lindos, estou aqui com um post que pode ser polêmico ou não, vai depender muito da interpretação de todos vocês. Peço que leiam atentamente todos os detalhes, a ideia não é gerar #treta ahuahua\n\nVou escrevendo enquanto vou ouvindo um album incrível da banda [The Last Sights of the Wind](https://open.spotify.com/album/6tIzZJUF8WPl2YiHWxk4TU), um instrumental muito muito bom, mistura guitarras muito melódicas com som atmosférico, perfeito para quem quer se concentrar em alguma tarefa importante. Aliás, se você curte música, entra no meu [grupo do Slack](https://bit.ly/slack-will), tem um canal específico para quem curte um bom som! xD\n\nBom, vamos parar com a enrolação e vamos ao post!\n\n## Um tweet inocente\n\nMeu amigo [Bernard de Luna](https://twitter.com/bernarddeluna) que vem fazendo um trabalho muito maneiro na Bunee.io fez o seguinte tweet:\n\n

A cor roxa simboliza os talentos que aparentam serem bons, mas nao possuem um github ativo e relevante.

Entendem a importancia? pic.twitter.com/ZY2OTnZjWp

— Bernard De Luna (@bernarddeluna) August 3, 2017
\n\nO que eu acho que ele quis dizer com esse Tweet é como o Github é importante e pode mudar a visão da empresa que está procurando gente para contratar. Ele marcou alguns potenciais bons desenvolvedores, mas que não possuiam um Github ativo, ele não os excluiu de forma alguma, simplesmente apontou a falta de um **diferencial** que esses desenvolvedores poderiam ter.\n\nE aí fica o questionamento, o Github é realmente importante? Se ele é, por quê? Bom, vou tentar explicar um pouquinho disso, sem tomar muito tempo também.\n\n## Colaboração\n\nAntes de tudo, o Github não é só uma rede social de código, ela é uma plataforma que prega a colaboração das pessoas para criação de projetos que possam ser utilizados por todo mundo e de forma gratuita. Isso por si só é uma coisa fantástica! Imagina o seu código sendo usado por várias pessoas/empresas ao redor do mundo, isso é legal demais.\n\nMas isso não fica por aí, no Github não necessariamente precisa ser só código, existem vários projetos muiiiito bacanas sem ter uma linha de código, alguns exemplos são:\n\n- [Lista de Awesomes](https://github.com/sindresorhus/awesome) - grandes listas com conteúdos de todas as áreas, ajudando assim a quem quer aprender um novo assunto, mas não tem muito tempo para ficar garimpando bons links.\n- [Fórum da FrontendBR](https://github.com/frontendbr/forum) - uma das ideias mais geniais que temos, um fórum para desenvolvedores dentro da principal plataforma de desenvolvedores! São várias pessoas se ajudando todos os dias, num lugar aberto para todos e com uma indexação muito melhor que um Facebook da vida.\n- [Vagas FrontendBR](https://github.com/frontendbr/vagas) - um repositório para divulgação de boas vagas para desenvolvedores e moderado por desenvolvedores.\n- [Training Center](https://github.com/training-center) - um local onde mentores se oferecem para ajudar novatos a entrar nessa área maravilhosa que estamos.\n- [Learn X in Y minutes](https://github.com/adambard/learnxinyminutes-docs) - outro projeto genial para quem quer aprender algum assunto novo.\n\nEnfim, como você pode ver aí acima, nenhum dos repositórios é cheio dos códigos macabros que precisa ser um Deus para fazer, muito pelo contrário, várias das iniciativas partiram de pessoas iniciantes que queriam aprender e organizavam seus estudos lá.\n\nEntão se você acha que não pode contribuir/colocar nada lá, aprenda que qualquer coisa é válida! Um material de estudo seu, pode ser um ótimo guia para outra pessoa, eu incentivo demais que meus alunos sempre coloquem suas coisas lá, assim além da pessoa reforçar o que aprendeu, o material fica lá para posteriores pesquisas e para que outras pessoas também consigam achar e estudar junto, olha que coisa legal =D\n\n## Felicidade em poder ajudar\n\nEu vou pegar um exemplo que aconteceu tem dias atrás. Um aluno meu no Slack perguntou se alguém tinha projetos que contribuia ou sabia de algum projeto. Eu brinquei postando que tinha um monte no meu Github que precisava de ajuda. Porque sim, as vezes a gente começa algo, mas fica apertado de tempo e não consegue terminar ou até mesmo precisa de mais alguém para ajudar, essa é a graça do Github. Abaixo segue a imagem a imagem desse momento:\n\n![Imagem com o pedido sobre projetos para contribuir](/assets/img/github-importancia/ajuda-projetos.png)\n\nDepois dessa primeira conversa, eu lembrei que precisava fazer uma coisinha simples num repositório meu, mas que eu sempre tava enrolando por causa de tempo. Aproveitei, direcionei o Rafael do que eu precisava, ele foi lá e fez. Inclusive durante o processo ele aprendeu como submeter corretamente um PR, ou seja, de uma ajuda que ele foi fazer, ainda saiu aprendendo. E no final, nós comemoramos no canal o seu primeiro PR.\n\n![Imagem onde eu parabenizo ele pelo primeiro PR](/assets/img/github-importancia/primeiro-pr.png)\n\n## Portfólio Vivo\n\nQuando você coloca alguma coisa no seu Github, automaticamente isso fica visível para todo mundo e essa é a parte mais legal. E tanto pessoas como empresas podem ter uma ideia melhor das coisas que você faz, como, por exemplo:\n\n- Ver quais linguagens você tem mais costume de trabalhar\n- Ver mais ou menos como você pensa\n- Entender como você resolve alguns problemas particulares\n\nE claro, essas suas contribuições podem dizer sim, se você pode ser um potencial funcionário naquela empresa. As vezes a empresa busca alguém com conhecimentos em React e vê que você tem um boilerplate simples de React ou fez um curso de React e botou seus estudos lá. A empresa vai saber que você já teve contato com aquela tecnologia, o que vai facilitar demais na comunicação.\n\nAssim como os designers possuem redes como Behance e Dribbble, os fotógrafos possuem o 500px, Unsplash. Por que nós desenvolvedores não teríamos uma rede para nós?\n\n## Conclusão\n\nBom, não estendendo mais o post do que já estendi. O que eu quero dizer e também acho que foi o objetivo do Bernard é que o Github é sim um **diferencial** para um programador. Não estamos dizendo que só programadores que contribuem todos os dias que são programadores bons, muito pelo contrário, eu conheço gente que contribui uma vez por ano, mas são grandes programadores. A questão é tentar possuir um Github atualizado, tente ter uma foto sua, coloque onde mora, empresa que trabalha e nos momentos que forem possíveis, tente colocar algo lá e/ou tentar ajudar alguém em alguma coisa.\n\nVocê poderia começar tendo o seu curriculum lá também, eu tenho [o meu](https://github.com/willianjusten/resume), não é nada demais, mas a empresa que te alcançar por lá, já pode saber mais um pouquinho de você! =)\n\nExistem sim, vários poréms quando a análise é feita **somente** pelo Github, pois aí a comparação é injusta. Tem empresas que adotam o Github, então você trabalhando já está colocando código lá, outras empresas já não usam. Tem também a questão do tempo e prioridades, que as vezes a pessoa não está podendo priorizar o Github naquele momento.\n\nA ideia é que se você tiver um tempinho, ao invés de gastar 30min do seu dia num Twitter/Facebook da vida, você pode colocar algo lá no Github, nem que seja responder issues de um repositório ou colocar alguma coisa que aprendeu durante o seu dia. Existe um projeto bacaninha chamado [Today I learned](https://github.com/thoughtbot/til), ou \"Hoje eu aprendi\" em Português, onde você pode colocar por exemplo, algo que aprendeu no seu dia, como: \"Hoje eu aprendi que `git commit --amend` permite adicionar coisas que esqueci no commit anterior e/ou mudar o título do commit.\n\nE pronto! Você acabou de fazer uma contribuição beem simples no Github, que nem te tomou tanto tempo e garanto, pelo menos uma pessoa no post agora não sabia que isso existia!\n\nNossas vidas são corridas, cada um tem suas dificuldades e seus problemas, mas já parou para pensar que mesmo nossa vida tão cheia que é, a gente ainda consegue procrastinar? Por que não usar esses momentos de procrastinação e fazer algo que te ajude?\n" }, { "path": "posts/achievement-concluido-braziljs.md", "content": "---\nlayout: post\ndate: 2016-08-29T16:35:49.000Z\ntitle: Achievement concluído - BrazilJS\ndescription: Tudo que me aconteceu antes, durante e depois desse que foi meu\n maior evento de desenvolvimento.\nmain-class: misc\ntags:\n - dev\n - eventos\n - braziljs\ncategories: null\n---\n\n## Introdução\n\nFaaaaala pessoal, estou muiiito feliz com tudo que passei lá em Porto Alegre e então resolvi fazer um post sobre todas essas coisas. Já aviso que esse não será um post review sobre as coisas do evento, acho que já terão vários desses posts e inclusive que poderão ser até mais detalhados, visto que fiquei nervoso antes da minha palestra e posso ter perdido vários detalhes.\n\nEu vou separar o post entre antes, durante e depois da BrazilJS no meu ponto de vista e meus acontecimentos, acho que vai ser legal.\n\nPara não perder o costume, vou ouvindo [Madeon](https://open.spotify.com/track/4PTPZeJlK1rYlYr6bf11hk), música eletrônica bem maneira =)\n\n## Antes\n\n### Envio do Call for Papers e Resposta\n\nEu acompanho sempre as coisas da BrazilJS, principalmente a [Weekly](https://github.com/braziljs/weekly/issues), onde já tiveram vários posts meus lá indicados até por outros. Em um dia, eu vi que tinham aberto o Call for Papers para a BrazilJS e eu fiquei pensando bastante se mandava ou não. Já tive a felicidade de palestrar em vários eventos, mas como todo mundo sabe, a BrazilJS é bem grande e com muitas palestrantes bons lá de fora. Mas depois de ficar pensando bastante, eu me perguntei, por que não? Eu já tinha comprado as passagens e o ingresso, então eu já ia de qualquer maneira mesmo xD\n\nEu já estava brincando com algumas coisas de Audio Visualization e imaginei que seria um assunto legal para ser falado, já que nunca tinha visto nada parecido no Brasil. Já tinha visto uma palestra do [Shiota criando música com o RetroJS](https://www.youtube.com/watch?v=DMy3P6BF7Iw), mas nada muito visual, então quis experimentar. Para a felicidade do meu amigo [Márcio Ribeiro](http://shiz.co/), que é vidrado no assunto.\n\nBom, eu enviei sei lá quando, mas fiquei meses sem receber resposta. Como toda pessoa ansiosa, logo que eu enviei, fiquei umas semaninhas pensando e esperando, como não veio nada, já tinha aceitado que não tinha rolado. Quando o Jaydson me mandou um email falando que tinham gostado do meu tema e perguntando se eu queria me juntar, nossa, eu pulei de alegria!\n\n![Imagem dos emails trocados com o Jaydson](/assets/img/brazil-js-16/email.png)\n\n### Montagem dos slides e vôo\n\nEu confesso que estou num momento super embolado, estou prestes a me mudar, também terminando um projeto com um amigo, além de ter palestrado direto em Julho e Agosto. Então, como todo brasileiro, eu fui deixando os slides para a última hora. Como eu sou muiiiito chato com conteúdo, fiz e refiz meus slides várias vezes. É um tema que eu gosto bastante, então tinha tantos exemplos para colocar, mas que ao mesmo tempo eu achava que ficaria massivo...\n\nEnfim chegou um dia antes de eu embarcar e como eu sou de Petrópolis, combinei com um amigo que iria ficar na casa dele, porque meu vôo ia ser 6:30 da manhã. Mas, é claro que não foi bem assim, meus amigos que iam voar junto comigo resolveram sair para comer, e acabamos encontrando outros 2 amigos devs também, resultado? Ficamos jogando sinuca e conversando até super tarde e praticamente fomos virados para o aeroporto. Lá tivemos uma pequena parada para capturar um Sandslash (faz parte né xD) e então embarcamos! Segue foto minha e dos meus amigos, [Jonas Mendes](https://nipher.io/) e [Gabriel Godoy](http://gabrielgodoy.com/).\n\n![Eu e meus 2 amigos no avião](/assets/img/brazil-js-16/aviao.jpg)\n\n### Chegada e Teste dos slides\n\nCheguei na quinta bem cedinho e fui recepcionado pelo Jaydson com um micro-ônibus para me levar ao hotel junto com meus amigos, foi ali que começou a cair a ficha que eu ia palestrar no maior evento de Javascript do mundo! Ficamos um pouco no hotel e fomos almoçar numa churrascaria SUPER BARATA e que recomendo chamada Giovanaz (dicas do will para turistar =p).\n\nA tarde teve uma coletiva lá no shopping e também deu para testar o projetor e o som, para saber como iria ficar. E...deu TUDO errado! O contraste estava muito ruim nos slides, não dava para ver praticamente nada, o tamanho também tinha dado erro e cortado algumas coisas, confesso que fiquei bastante nervoso e triste. Eu só fiquei um pouco mais feliz, pois quando eu comecei a passar pelos exemplos com música, o Jake Archibald saiu correndo de um ponta até perto do palco para ver o que estava rolando, isso foi super legal <3\n\nMas, como nem tudo são flores, eu precisava voltar para o Hotel e refazer todos os slides que estavam ruins (90%), só que o pessoal todo tinha combinado de sair e conhecer um pouquinho da cidade, mas eu sabia que se eu não ficasse refazendo, o dia seguinte ia ser um desastre. Falei para os meus amigos que não ia dar para sair, aí que o [Jonas Mendes](https://nipher.io/) e o [Márcio Ribeiro](http://shiz.co/) ficaram comigo no hotel ajudando a refazer e ainda dando opiniões do que podia mudar, ficamos até muito tarde fazendo isso, mas no final de tudo, já estávamos rindo e eu estava bem aliviado que aparentemente estava tudo bom.\n\n

Indo dormir 3h da manhã, mas tendo a certeza que tenho amigos dispostos a me ajudar sempre, isso já valeu o evento para mim #braziljs

— Willian Justen (@Willian_justen) August 26, 2016
\n\n## Durante\n\nO evento estava um pouco atrasado e eu já estava bem nervoso/ansioso, já tinham tido palestras muito legais pela manhã, em particular a palestra do Jake Archibald, que para mim, foi uma das melhores do evento. Também teve a palestra da Ruth, que falou sobre o tema música também, mas que infelizmente uma das Demos tinha dado um probleminha, o que só me deixou mais nervoso, pensando se tudo iria funcionar mesmo.\n\nDe repente, o Jaydson sobe no palco e me chama, nossa, ver a galera toda lá, tava beeem cheinho, galera lado a lado nas arquibancadas e no chão também, bateu um baita de um nervosismo. Mas eu pensei, tá tudo certo e você vai falar de algo que ama, a galera vai curtir. E foi isso, foram 30 minutos que ao mesmo tempo que pareceram uma eternidade, quando acabou, eu pensei que tinha sido curto demais!\n\nTer visto a galera rindo dos meus exemplos e das minhas piadas bobas foi só me dando mais confiança e o barulho que geral fez no final, foi INCRÍVEL! Para quem não estava lá, segue um amostra de como foi, mas multiplica o som e eco por umas 10x.\n\n

final da palestra do @Willian_justen foi excelente 😁 #braziljs pic.twitter.com/aDLggwbhUd

— yuri (@ybrntt) August 26, 2016
\n\nE para assistir a apresentação inteira, só seguir [nesse link](https://youtu.be/tJ0XV9W4nHw?t=23396), já no tempo marcado. Os slides também [estão aqui](https://willianjusten.com.br/braziljs-16).\n\n## Depois\n\n### Tweets e carinho\n\nSabe quando você sente que saiu um peso enorme das costas? Foi exatamente isso, não que era um peso ruim, mas era uma ansiedade muito grande de apresentar, depois de ter falado e principalmente por ter sido bem recebido, nossa, aliviei muito e fiquei super feliz!\n\nEu saí do palco com 10% de bateria no celular e com tantas notificações, que eu sabia que seria impossível ler tudo antes de acabar a bateria, consegui conectar rapidinho no Mac e fui lendo várias mensagens de carinho, tanto de amigos, como de pessoas que eu não conhecia, mas que gostaram da palestra. Tiveram fotos lindas e até tweet em espanhol! Separei alguns que curti <3\n\n

música e JavaScript na #braziljs com o @Willian_justen. tá lindo demais! pic.twitter.com/NKakPXcdIm

— diéssica (@diessicode) August 26, 2016
\n\n

Entre lo que más me gustó hoy en #BrazilJS está la charla de música con JS de @Willian_justen , estuvo muy interesante!

— Werik (@erikfloresq) August 27, 2016
\n\n

Amei a palestra do @Willian_justen!!!
Vontade de largar tudo e começar a mexer com trem de audioviz NOW! *_*

— Camila Carrera (@cscarrera) August 26, 2016
\n\nAlém dos tweets, tiveram várias pessoas que me pararam para conversar e até mostrar seus projetos, uma coisa mais fantástica que a outra!\n\n### Lançamento do Curso\n\n![Banner curso](https://dien0bhzxjun5.cloudfront.net/ea2d1627-1750-4142-b8de-e806adbcb798/cursowill.crop_1438x532_0,0.resize_1440x532.png)\n\nDurante o evento, eu também lancei a pré-venda do meu mais novo curso, que será sobre Javascript com TDD na prática, ainda estou fechando a ementa e preparando bastante coisa legal, mas já queria lançar no evento e por isso eu botei um desconto de 50% para as pessoas que já me conhecem e vem me apoiando aí =)\n\nPara quem quiser já aproveitar a oportunidade, a [pré-venda está disponível nesse link](https://www.eventick.com.br/javascript-com-tdd-na-pratica).\n\n### Agradecimento no Aeroporto\n\nE para finalizar, eu gravei um vídeo rapidinho agradecendo todos vocês, diretamente do aeroporto de Porto Alegre, assiste aí =D\n\n\n" }, { "path": "posts/adicionando-icone-de-github-nos-projetos-opensource.md", "content": "---\nlayout: post\ndate: 2021-02-21T08:55:59.000Z\ntitle: Adicionando ícone de GitHub nos projetos opensource\ndescription: Já pensou como o pessoal sempre usa aquele ícone bonitinho no\n canto? Agora vai saber!\nmain-class: misc\ntags:\n - dica\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Utilizando com SVG puro ou componentes React/Vue\n\nO [projeto oficial](https://tholman.com/github-corners/) é chamado de GitHub Corners e disponibiliza um código em SVG bem simples que você consegue colocar em qualquer site de forma simples.\n\nMas se você quiser, também pode utilizar este [componente em React](https://projects.skratchdot.com/react-github-corner/) ou este [componente em Vue](https://gluons.github.io/vue-gh-corners/).\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/adicionando-night-mode-no-seu-site.md", "content": "---\nlayout: post\ndate: 2018-03-27T03:35:52.000Z\ntitle: Adicionando Night Mode no seu site\ndescription: Aprenda como criar um botão para mudar as cores do seu site com JS puro.\nmain-class: js\ntags:\n - js\n - theme\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, o post de hoje faz parte de um conjunto de mudanças e melhorias que venho fazendo no blog. E no caso, esse pedido foi feito por não **um**, mas vários usuários do blog.\n\n> Pelo amor de deus, bota um modo noturno no seu blog, esses posts gigantes cansam demais os olhos depois de um tempo. - Usuário Amado\n\nPensando nisso, eu venho anunciar que eu fiz o modo! E você já pode clicar na lâmpada ali para mudar entre um modo e outro. E vou descrever muito muito rapidinho o que eu fiz para mudar. É uma base super simples, então você não tem como se perder.\n\n## Como funciona a mudança de cores?\n\nBasicamente o que você precisa fazer é alterar as cores das fontes/fundo no CSS. E para isso, você precisa criar um `modificador` que vai sobrepôr as cores do tema \"light\", que é o tema claro. Você pode ver no meu [_night-mode.styl](https://github.com/willianjusten/willianjusten.com.br/blob/ecde3bd2481c24889932e1abaa5900a68cdc7769/src/styl/_night-mode.styl), que eu basicamente tenho uma classe `.night-mode` que é responsável por fazer esse `overwriting` das propriedades. E lá eu defini as duas cores principais para o texto (`text-color`) e para o fundo (`bg-color`), então foi bem simples ir passando essas variáveis em tudo.\n\n## E para ativar os modos?\n\nPara ativar os modos, nós vamos usar nosso lindo Javascript, que nos permite tudo! Primeiramente nós precisamos criar um input/botão que vai ser onde iremos clicar para ficar mudando entre um e outro.\n\n```html\n\n```\n\nRepare que eu coloco um id ali que é `#night-mode`, pois é ele que eu vou usar para ativar/desativar o nosso querido night mode. Como disse na primeira etapa, nós precisamos adicionar o modificador ao html, para que ele comece a fazer a troca de cores certo? Então no Javascript podemos fazer assim:\n\n```js\nconst nightMode = document.querySelector('#night-mode')\n\n// ao clicar mudaremos as cores\nnightMode.addEventListener('click', () => {\n // adiciona a classe `night-mode` ao html\n document.documentElement.classList.toggle('night-mode')\n})\n```\n\nE prontinho, só com isso, a gente já fez o night mode ativar e desativar, toda vez que clicamos nele! Mas podemos ir além!\n\n## Salvando o estado do usuário\n\nDepois que o usuário escolhe o tema, nós queremos que esse tema persista por todas as páginas, até que o usuário decida voltar ao outro tema. Para isso nós vamos usar o bom e velho `localStorage` para guardar esse dado para nós, assim a gente faz uma checagem e se tiver o night mode salvo, já habilitamos ele. O script vai ficar assim:\n\n```js\n// pegamos o valor no localStorage\nconst nightModeStorage = localStorage.getItem('gmtNightMode')\nconst nightMode = document.querySelector('#night-mode')\n\n// caso tenha o valor no localStorage\nif (nightModeStorage) {\n // ativa o night mode\n document.documentElement.classList.add('night-mode')\n\n // já deixa o input marcado como ativo\n nightMode.checked = true\n}\n\n// ao clicar mudaremos as cores\nnightMode.addEventListener('click', () => {\n // adiciona a classe `night-mode` ao html\n document.documentElement.classList.toggle('night-mode')\n\n // se tiver a classe night-mode\n if (document.documentElement.classList.contains('night-mode')) {\n // salva o tema no localStorage\n localStorage.setItem('gmtNightMode', true)\n return\n }\n // senão remove\n localStorage.removeItem('gmtNightMode')\n})\n```\n\nShow de bola! Agora o tema tá persistindo em todos os posts de forma bem legal!\n\n## Mudando a cor na barra de navegação (Android)\n\nSe você estiver usando um Android, vai notar que a barrinha superior vai mudando a cor de acordo com o post e não queremos isso no night mode, nós queremos que fique escuro para combinar com o tema, para isso, precisamos fazer um pequeno ajuste. E teremos o script final como o abaixo:\n\n```js\n// pegamos o valor no localStorage\nconst nightModeStorage = localStorage.getItem('gmtNightMode')\nconst nightMode = document.querySelector('#night-mode')\n// pega o valor do meta tag\nconst metaThemeColor = document.querySelector('meta[name=theme-color]')\n\n// caso tenha o valor no localStorage\nif (nightModeStorage) {\n // ativa o night mode\n document.documentElement.classList.add('night-mode')\n // pinta o theme color na meta tag\n metaThemeColor.setAttribute('content', '#2b2b2b')\n // já deixa o input marcado como ativo\n nightMode.checked = true\n}\n\n// ao clicar mudaremos as cores\nnightMode.addEventListener('click', () => {\n // adiciona a classe `night-mode` ao html\n document.documentElement.classList.toggle('night-mode')\n\n // se tiver a classe night-mode\n if (document.documentElement.classList.contains('night-mode')) {\n // salva o tema no localStorage\n localStorage.setItem('gmtNightMode', true)\n // pinta o theme color na meta tag\n metaThemeColor.setAttribute('content', '#2b2b2b')\n return\n }\n // senão remove\n localStorage.removeItem('gmtNightMode')\n // senão bota a cor original\n metaThemeColor.setAttribute('content', '#005f97')\n})\n```\n\n## E o visual do input?\n\nVocês podem ver que no meu blog eu botei uma lâmpada, mas você podem fazer qualquer coisa e qualquer estilo. Eu criei um post ensinando como [Criar um switch button com CSS](https://willianjusten.com.br/criando-um-switch-button-com-css/), onde eu ensino essa técnica de usar o atributo `:checked` para mudar o css. Dá uma lida para aprender, mas é super super simples!\n\n## Conclusão\n\nBom galera, esse é o post, espero que tenham gostado, foi bem simples e básico. A realidade é só que eu queria avisar a vocês que eu tinha adicionado essa feature e aí por isso resolvi criar esse post. Se curtiu, comenta/compartilha! E aceito críticas, sempre ajudam a melhorar o blog para vocês!\n" }, { "path": "posts/alguns-seletores-css-importantes-para-aprender.md", "content": "---\nlayout: post\ndate: 2015-06-30T00:22:47.000Z\ntitle: Alguns seletores css importantes para aprender\ndescription: Porque CSS é muito mais do que só classes e ids. Aprenda alguns\n truques legais para facilitar nos seus layouts.\nmain-class: css\ntags:\n - css\n - frontend\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nComo de costume, lá vai a playslist do dia, que se chama [Smart is the new sexy](https://open.spotify.com/user/spotify/playlist/1ewJMPn8IYsjGCqI1n5dfV), curtindo bastante.\n\nEscolhi escrever sobre um assunto que é bastante básico, mas importantíssimo, tanto para quem está começando, como para quem já trabalha há um tempo e não usa certos benefícios que o css dá.\n\nVai ser um post rapidinho, com alguns exemplos e caso tenham alguma dúvida, podem usar os comentários sempre =)\n\n## A + B\n\nChamado de seletor adjacente, serve para selecionar o elemento imediatamente depois do primeiro elemento.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nNote que somente o elemento `p` seguinte de `a` é afetado pelo estilo.\n\n## A > B\n\nO seletor descendente serve para editar todos os filhos diretos do primeiro elemento, não modificando os elementos mais internos.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nComo pode-se notar, as tags `p` diretas de `.container` ganharam o estilo, enquanto a tag `p` mais interna não sofreu alteração.\n\n## A ~ B\n\nConhecido como elemento irmão, é bastante parecido com o seletor **A + B**, porém ele seleciona todos os elementos diretos de A e não somente o primeiro. É também importante não se confundir com o seletor **A > B**, visto que ele não é para elementos filhos e sim para elementos seguintes.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nPerceba que os elementos `p` no mesmo nível de `a` recebem o estilo, enquanto os elementos mais internos e fora do contexto não são afetados.\n\n## A[contexto]\n\nAcho que um dos seletores mais interessantes, de acordo com o que está definido no contexto, conseguimos estilizar em diferentes abordagens.\n\n### A[alt]\n\nEsse irá selecionar os elementos com o atributo `alt` definido.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nSomente a imagem com o atributo `alt` recebeu o estilo. Útil para você rastrear se alguma imagem não recebeu o atributo `alt`, que é importante para a acessibilidade. Mas pode ser com qualquer tipo de atributo, como um `title`, por exemplo.\n\n### A[href='link']\n\nIrá editar só os links determinados.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n### A[href*='trecho']\n\nOs links que possuírem pelo menos esse trecho serão estilizados.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n### A[href^='inicio']\n\nLinks iniciados com o trecho serão estilizados.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n### A[src$='final']\n\nSó trechos com o final igual irão receber o estilo.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## A:not(B)\n\nQuando você quer selecionar todos os elementos, exceto um elemento em particular.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## A:first-child | A:last-child\n\nPara selecionar o primeiro e o último filho de um elemento. Um dos pseudo-seletores mais úteis que eu conheço. Para remover aquela borda do último elemento, entre outras várias coisas.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## A:checked\n\nSeletor utilizado em inputs do tipo `radio` e `checkbox`, serve para várias coisas legais, bastante utilizado em interações sem precisar usar uma linha de JS. Se quiser ver uns exemplos maneiros, tem esse [projeto do Felipe Fialho](https://www.felipefialho.com/css-components/).\n\nE aqui um exemplo simples:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## A:nth-child(n)\n\nOutro pseudo-seletor bastante bacana, serve para selecionar o elemento na posição indicada pelo argumento `n`. Por exemplo, se colocamos `:nth-child(2)` iremos selecionar o segundo elemento daquele conjunto. Mas podemos criar uma expressão `:nth-child(3n)`, onde todos os elementos múltiplos de 3 seriam selecionados (3,6,9...).\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Conclusão\n\nExistem outros vários seletores e pseudo-seletores, escolhi alguns que acho bastante interessantes, mas você sempre pode ir mais a fundo e buscar conhecimento. Aconselho muito a [MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference) e para quem já entende um pouco mais de inglês, tem o meu favorito e lindo [Codrops](http://tympanus.net/codrops/css_reference).\n" }, { "path": "posts/analisando-seu-codigo-js-com-linter.md", "content": "---\nlayout: post\ndate: 2015-12-05T00:43:23.000Z\ntitle: Analisando seu código JS com um linter\ndescription: Valide seu código em JS/ES6 em busca de erros, warnings, códigos\n esquecidos e melhore a sua qualidade. Seu amiguinho agradece um código mais\n limpo.\nmain-class: js\ntags:\n - js\n - linter\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nFaaaala pessoal, fazia muito tempo que eu não escrevia e confesso que isso já estava me agoniando. Então resolvi voltar a falar besteiras escrever!! \n\nComo não poderia deixar de ser, estou escrevendo ouvindo música. A playlist de hoje é [Brains](https://open.spotify.com/user/spotifybrazilian/playlist/0nUucSaL2BGl2VZlbY5TwR), uma playlist que está sendo montada lá na [CCXP](http://www.ccxp.com.br/), muita música maneira! Bota para tocar e vai lendo =D\n\n## Qualidade de Código\n\nProvavelmente você já passou horas escrevendo seu código lindo e aí, do nada, ele parou de funcionar. Então você ficou mais perdido que o John Travolta no Discurso da Dilma.\n\n![John Travolta Meme](https://media.giphy.com/media/FWXpxEbWcOapq/giphy.gif)\n\n Você, então, em toda sua humildade, chegou para um amigo e pediu para ele dar uma olhada e ele falou frases assim:\n\n> Você esqueceu de colocar o ponto e vírgula no final da linha.
\n> Essa variável tá escrita errada, faltou um 'a' ali.
\n> Cara, esse método não existe nessa linguagem...\n\nSe você já ficou puto com isso, sinta-se abraçado, porque eu também já cansei de cometer esses erros bobos que dava vontade de bater com a cara na parede depois de descobrir. Mas não fui só eu, nem só você, isso é normal do ser humano, não somos máquinas e as vezes uns detalhes passam sem percerbermos.\n\nNo momento você está igual o John Travolta de novo.\n\n![John Question](https://media.giphy.com/media/FxufOs6bQwxO0/giphy.gif) \n\n## Entendi seu ponto, mas como evitar isso?\n\nPensando nisso, foram criadas várias ferramentas para fazer análise por você. Seguem as principais e mais famosas:\n\n- [JSlint](http://www.jslint.com/)\n- [JSHint](http://jshint.com/)\n- [Eslint](http://eslint.org/)\n\nCada uma dessas ferramentas possui um módulo no npm e podem ser fácilmente instaladas.\n\n```bash\n\nnpm install -g jslint\n\nnpm install -g jshint\n\n## para poder fazer lint de ES6 e JSX\nnpm install -g eslint\nnpm install -g babel-eslint\n\n```\n\nE todas elas também possuem integrações com vários editores de código como Sublime, Atom, Brackets, etc...\n\n## Mas como elas funcionam?\n\nCada uma dessas ferramentas lê seus arquivos desejados e percorre pelos mesmos buscando por erros ou definições que as próprias consideram como má prática e para cada um dos erros, elas reportam ao final.\n\nPara os próximos passos, vou ensinar utilizando o `eslint`, que julgo o melhor dos Linters na atualidade, visto que ele dá um ótimo suporte a `ES6` e `JSX`, além do padrão do JS.\n\nApós instalado o `eslint`, vá até o diretório do seu projeto, digite `eslint --init` e responda as perguntas de acordo com sua necessidade, segue abaixo o print de um uso meu.\n\n![Print do eslint sendo usado](/assets/img/linter/eslint.png)\n\nApós isso, será criado um arquivo chamado `.eslintrc` dentro da pasta raiz do seu projeto, contendo informações parecidas com:\n\n```js\nmodule.exports = {\n \"rules\": {\n \"indent\": [\n 2,\n 4\n ],\n \"quotes\": [\n 2,\n \"single\"\n ],\n \"linebreak-style\": [\n 2,\n \"unix\"\n ],\n \"semi\": [\n 2,\n \"always\"\n ]\n },\n \"env\": {\n \"es6\": true,\n \"browser\": true\n },\n \"extends\": \"eslint:recommended\",\n \"ecmaFeatures\": {\n \"jsx\": true,\n \"experimentalObjectRestSpread\": true\n },\n \"plugins\": [\n \"react\"\n ]\n};\n```\n\nSe você quiser entender tudo que ele escreveu ali, dá uma olhadinha na [documentação](http://eslint.org/docs/user-guide/configuring) é super detalhada e bem explicada.\n\nTendo já o arquivo, basta você rodar no terminal em cima do arquivo desejado e ele fará o report se algum erro acontecer, como, por exemplo, tendo um arquivo js:\n\n```js\n(function () {\n 'use strict';\n \n const a = 'will';\n\n function() {\n console.log('Hello!')\n }\n\n})()\n```\n\nSe eu rodar o `eslint` no terminal analisando esse código, ele vai me retornar os seguintes erros:\n\n![imagem mostrando os erros como variável não utilizada e falta de ponto e vírgula](/assets/img/linter/erro-1.png)\n\nEu criei uma variável `a`, mas nunca utilizei no meu código, eu usei console.log num código que vai para produção e ainda esqueci de colocar o ponto e vírgula no final do código!\n\nPara um código pequeno desses, talvez não fizesse diferença, mas pense num código beeeem maior, ele pode ser uma mão na roda =D\n\nMas rodar isso o tempo todo no terminal é ruim, até mesmo se colocarmos num gulp/grunt da vida, o legal é mostrar no nosso editor. Se você usa Sublime Text, continua lendo aí, que vou mostrar a cereja do bolo!\n\n## Usando o eslint no Sublime\n\nPrimeiro de tudo, espero que você tenha instalado o [Package Control](https://packagecontrol.io/installation) no seu Sublime. Depois disso, mande instalar o [SublimeLinter](http://sublimelinter.readthedocs.org/en/latest/installation.html#installing-via-pc) e o [SublimeLinter-contrib-eslint](https://github.com/roadhump/SublimeLinter-eslint#plugin-installation), que vão fazer toda a integração e mágica.\n\nFeito isso, reinicie o seu Sublime e comece a escrever seu código JS! Quando tiver algum erro, ele irá te notificar com marcadores ao lado do erro e na parte inferior irá te avisar o erro. Como na imagem abaixo:\n\n![Sublime indicando os erros](/assets/img/linter/sublime.png)\n\nSe você for como eu e quiser ver todos os erros numa lista e poder navegar entre eles, aperte `cmd + shift + p` ou `ctrl + shift + p` e digite `linter show` e você verá uma opção igual da tela abaixo:\n\n![Opção](/assets/img/linter/show.png)\n\nCom essa opção selecionada, cada vez que você salvar o código, irá ver uma lista da seguinte forma:\n\n![Lista de erros](/assets/img/linter/errors-list.png)\n\n## Habilitando o Sublime para entender código ES6 + Eslint\n\nCaso o seu Sublime não identifique ES6 junto com o Eslint e não faça o lint correto, basta que você instale o plugin do [Babel](https://github.com/babel/babel-sublime) no seu Sublime. Com esse plugin instalado, defina que todos os arquivos JS e JSX serão interpretados como Babel, seguindo os seguintes passos:\n\n1) Abra um arquivo com a extensão JS ou JSX\n2) Vá na opção View do Menu\n3) Escolha Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).\n\nFeito isso, seu Sublime já vai entender aquele código em ES6 e o lint passará a funcionar! Agora vai lá e comece a programar com qualidade!\n\n![John Kissing](https://media.giphy.com/media/D4QLJVmdHB44g/giphy.gif)\n\n## Conclusão\n\nBom, é basicamente isso, se preocupe com seu código e evite demorar horas procurando o erro se uma ferramenta pode fazer por você.\n" }, { "path": "posts/animacoes-em-svg-com-css.md", "content": "---\nlayout: post\ndate: 2015-07-01T07:22:29.000Z\ntitle: \"#12 - Animações em SVG com CSS\"\ndescription: Aprenda como criar animações para o SVG usando só CSS e tenha um\n site leve e bonito.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\nTenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então, para facilitar, basta ir em [séries](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG.\n\n## Introdução\n\nComo de costume, a trilha sonora enquanto escrevo esse post é uma playlist chamada [Totally Stress Free](https://open.spotify.com/playlist/37i9dQZF1DWT7XSlwvR1ar?si=Msf4R5xgSxyBqfCxDb5rzQ), estou com uma puta sinusite e não consigo dormir, então umas músicas mais calmas para eu tentar relaxar e conseguir dormir. Por favor, ignorem os erros grotescos que puderem haver no post, ele vai ser bem pequeno até por isso também.\n\nO post de hoje será em forma de mini-tutorial, então já vou passando logo os exemplos que faremos hoje.\n\n- [Airplane Loader SVG](https://willianjusten.github.io/svg-animation-css/loader.html)\n- [Earth SVG](https://willianjusten.com.br/svg-animation-css/)\n- [Repositório no Github](https://github.com/willianjusten/svg-animation-css)\n\n## Relembrando...\n\nUma das grandes vantagens do SVG é que ele é um código xml, que pode ser facilmente manipulado. Esse código possui uma estrutura bem definida, com elementos bases e se você quiser lembrar um pouquinho, basta ler [A estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/).\n\nE como irei fazer animações usando CSS, é bom que você já tenha lido as formas de se [estilizar o SVG usando CSS](https://willianjusten.com.br/estilizando-svg-com-css-parte-1/) e se quiser, pode também se aprofundar em alguns dos [estilos especificos do SVG](https://willianjusten.com.br/estilizando-svg-com-css-parte-2/).\n\n### Passo 1 - Obtendo um SVG\n\nPara este tutorial, eu vou utilizar 2 SVG diferentes. Um contendo somente um elemento e o outro com vários elementos. Para poder mostrar que é possível animar tanto 1 como muitos elementos do DOM sem perda de performance e com uma qualidade bem bacana.\n\nOs arquivos foram [exemplo 1](http://www.freepik.com/free-vector/airplane-vector-template-free_714802.htm) e [exemplo 2](http://www.freepik.com/free-vector/world-travel-vector-free-template_714008.htm).\n\nSe você quiser, tem o link de [onde baixar svg?](https://willianjusten.com.br/onde-baixar-svg/).\n\n### Passo 2 - Limpando o vetor\n\nComo pode ter notado, o arquivo veio em `.AI`, para ser aberto no Illustrator. O que eu queria era somente o avião e seu rastro. Para isso selecionei somente esses dois elementos e os passei para um outro arquivo e o salvei como SVG.\n\n![Imagem do Illustrator](/assets/img/svg-animacoes-css/illustrator.png)\n\n### Passo 3 - Otimizando o SVG\n\nEm geral, esses vetores obtidos da internet vem muito sujos e com muita coisa escrita desnecessária e para isso temos o nosso salvador [SVGOMG](https://jakearchibald.github.io/svgomg/), que é o melhor otimizador de SVG que existe na face da Terra! Basta colocar o seu SVG lá e mandar otimizar, os ganhos as vezes podem ser de mais de 80%!!!\n\n![Imagem do Illustrator](/assets/img/svg-animacoes-css/svgomg.png)\n\n### Passo 4 - Dando nome aos bois\n\nJá tendo o nosso código otimizado, podemos nomear os elementos dos quais queremos estilizar e animar.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nNesse caso, eu criei um grupo para unir o avião e seu rastro e dei a esse grupo a classe `plane`. Ao redor eu criei uma classe `loader` só para poder segurar o elemento e centralizá-lo.\n\n### Passo 5 - Criando a animação\n\nPara ambos os exemplos, eu não fiz um uso maciço de tipos de animação, até porque o objetivo é só mostrar as habilidades do SVG e a facilidade com que temos para animar.\n\nNo caso eu utilizei `keyframes` para criar a minha rotação e o `animate` para chamar essa animação. Se você se interessar por animação e quiser saber mais sobre, só dar uma olhada nos posts:\n\n- [CSS Transition e CSS Animation por Raphael Fabeni](https://tableless.com.br/transition-e-animation/)\n- [CSS Animation for Beginners por Rachel Cope](https://robots.thoughtbot.com/css-animation-for-beginners)\n- [Usando animações CSS pela MDN](https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_animations)\n- [Criando animação Flipping por Maujor](http://www.maujor.com/tutorial/criando-animacao-flipping-com-css.php)\n\n### Extras: bug do Firefox e Safari\n\nPara as animações de `rotate` é necessário definir um ponte de origem onde a rotação irá ser realizada, para ambos os exemplos, o centro é ponto ideal, podemos fazer de duas formas:\n\n- `transform-origin: 50% 50%;`: dessa forma definimos o centro no eixo X e no eixo Y, considerando que o meio do elemento é sempre metade do mesmo.\n- `transform-origin: Kpx Zpx;`: onde K é a metade da largura e Z a metade da altura.\n\nPorém, nem tudo são flores e o Firefox ainda possui um bug em que ele não consegue identificar muito bem as origens quando se usa porcentagem e com pixels ele também se confunde. Então o jeito é utilizar o atributo prefixado.\n\n`-moz-transform-origin: Apx Bpx`\n\nAssim conseguimos contornar esse defeito no Firefox. Para você ter ideia, a Sara Soueidan, que é uma das maiores evangelistas de SVG, também já cansou de reclamar sobre esse bug.\n\n

Dear @firefox, Please fix that 100-years-old SVG `transform-origin` bug https://t.co/IO9Qy0gipD Sincerely, Everyone animating SVG w/ CSS

— Sara Soueidan (@SaraSoueidan) December 13, 2014

\n\n\nPara o Safari, o problema é bem mais simples, as animações de rotate e transforms ainda necessitam do uso do prefixo `-webkit`, então basta adicionar os prefixo e tudo passará a funcionar. Se você utilizar Gulp ou Grunt, basta adicionar o autoprefixer para fazer esse trabalho. Ou então crie mixins no seu pre-processador.\n\nNa dúvida do que funciona? Sempre veja no [Can I use](http://caniuse.com/).\n\n### Dica: SVG com muitos elementos\n\n![Segundo Exemplo mostrando um planeta rodeado por aviões e outras coisas](/assets/img/svg-animacoes-css/segundo-exemplo.png)\n\nNo segundo exemplo, apesar do código ser grande, existe um método bem fácil de conseguir nomear e separar as coisas. Insira o SVG inline na página sem nomear nada e com o inspect, vá marcando elemento a elemento e procurando dentro do arquivo para adicionar as classes. Caso tenha dificuldades de notar visualmente se está selecionando o elemento certo, modifique o `fill` do elemento para uma cor bem diferente, assim você consegue filtrar mais fácil também.\n\nPara o segundo exemplo, eu criei keyframes girando para o lado direito e esquerdo (`spin-right` e `spin-left`) e de acordo com o elemento, eu coloquei tempos diferentes, para que assim as rotações não ficassem tão embaralhadas e dessem um aspecto mais legal.\n\n## Conclusão\n\nBom, com esse post, acho que fica claro em como é fácil animar o SVG usando só CSS puro. Se você tiver curiosidade, aconselho a ver outros vários exemplos muito bacanas sobre.\n\nNa awesome tem em [Experimentos](https://github.com/willianjusten/awesome-svg/blob/master/topics/Experiments.md) e para se aprofundar ainda mais sobre o assunto também temos [Animations](https://github.com/willianjusten/awesome-svg/blob/master/topics/Animation.md) lá na awesome.\n" }, { "path": "posts/animando-svg-com-smil.md", "content": "---\nlayout: post\ndate: 2015-07-22T00:55:02.000Z\ntitle: \"#13 - Animando SVG com SMIL\"\ndescription: Aprenda a criar animações usando só SVG e nada mais!\nmain-class: svg\ntags:\n - svg\n - smil\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Introdução\n\nEnquanto escrevo esse post vou ouvindo [Deftones](https://open.spotify.com/artist/6Ghvu1VvMGScGpOUJBAHNH), mudar para um som mais pesado para animar um pouco.\n\nJá faz um tempinho que não escrevia sobre SVG, então vou dar uma quebra nos outros posts e voltar a falar um pouquinho sobre. Se você ainda não conhece SVG sai daqui, dá uma olhadinha na [série](https://willianjusten.com.br/series/) que eu escrevo nesse blog.\n\nEsse post foi baseado num apanhado de informações de vários cantos:\n\n- [Guide SVG Animation Smil](https://css-tricks.com/guide-svg-animations-smil/)\n- [Three ways animate svg](https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/)\n- [How SVG Shape Morphing Works](https://css-tricks.com/svg-shape-morphing-works/)\n\n## Animações\n\nNão é de hoje que animações são as queridinhas nos sites e apps, seja pela melhoria em algum aspecto na usabilidade, seja pela beleza que a animação pode proporcionar.\n\nO SVG é tão incrível que permite vários tipos de animações, já falei sobre [animações usando css](https://willianjusten.com.br/animacoes-em-svg-com-css/) e agora irei falar sobre um tipo específico do SVG, que é a animação usando SMIL.\n\n## Mas o que é SMIL? É de comer?\n\n[SMIL](http://www.w3.org/TR/2001/REC-smil-animation-20010904/) ou **S**ynchronized **M**ultimedia **I**ntegration **L**anguage é uma linguagem baseada em XML que permite escrever interações para os elementos. A sua sintaxe é basicamente representada pelos tempos de animações, mudanças dos elementos e inicializações dos comportamentos.\n\n**Obs.:** funciona em todos os browsers exceto IE [caniuse](http://caniuse.com/#feat=svg-smil)\n\n## Por que usar esse treco aí?\n\nA animação em SMIL é [declarativa](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#toc-imperative-declarative), ou seja, você declara transições e estados para os elementos. A vantagem é que os browsers podem otimizar esse tipo de animação, não pesando tanto na renderização. A grande desvantagem de animações declarativas é que, em geral, elas não são tem tanto poder e não fazem tantas coisas. Eis que o SMIL brilha, ele tem a facilidade e otimização que o CSS permite com o poder de manipulação que só o JS teria.\n\nComo o SMIL é mais poderoso, ele permite animar propriedades que o CSS não conseguiria, como, por exemplo, as formas das Paths.\n\nOutra coisa bastante bacana é que animações feita em SMIL funcionam até mesmo quando o SVG é inserido na tag `img`! =)\n\nE também conseguimos manipular as animações com eventos! Convencido?\n\n## Comandos básicos\n\nAssim como as diferentes tags que o SVG possui para suas formas, ele também possui algumas poucas tags para realizar essas animações, que são:\n\n- ``: permite animar atributos e propriedades num determinado período de tempo.\n- ``: usado para animar a transformação dos atributos num período de tempo.\n- ``: usado também como um \"shorthand\" para o `animate`, é útil para definir valores não numéricos para animação e propriedades, como a propriedade de `visibility`.\n\n### Sintaxe\n\n```html\n\n```\n\nPara o `animate` temos os principais atributos:\n\n- `attributeName`: o atributo do qual iremos alterar, pode ser um `fill` ou `points` de um `path`.\n- `from`: de onde se inicia.\n- `to`: para onde vai a animação.\n- `dur`: a duração da animação.\n- `begin`: é a \"trigger\" de inicialização da animação. Podemos colocar como `click` para dizer que só inicia com um click ou podemos colocar como `begin=2s`, onde dizemos que a animação só irá começar 2s depois de ter carregado.\n- `fill`: não confunda com preenchimento, esse atributo serve para dizer se a animação deve parar em seu estado final (`freeze`) ou a animação ser removida quando alcançar o estado final (`remove`).\n- `repeatCount`: como o nome já diz a quantidade de vezes que a animação vai repetir, se quiser que seja infinito, basta usar `indefinite`.\n- `repeatDur`: marca o tempo de duração da repetição, a notação é conforme relógio normal, exemplo, `1:30` significa 1 minuto e 30 segundos.\n\n### Modos de uso\n\nExistem duas formas de se aplicar animações, que são:\n\n#### Especificando um target\n\n```html\n \n```\n\n#### Aninhando dentro do elemento\n\n```html\n\n \n\n```\n\nUm outro detalhe muito importante é que para cada `animate` só podemos animar um atributo principal, que é determinado pelo `attributeName`. Portanto se quisermos fazer 2 tipos diferentes de animação, iremos precisar de 2 elementos `animate` para cada atributo.\n\n### Exemplo\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n```html\n\n \n\n \n\n```\n\nNo exemplo acima, determinamos que vamos alterar o atributo `cx` do círculo, ou seja, sua posição no `eixo x`, passando de `50` para `450`, com a duração de `1s` após haver o `click` e tendo animação finalizada pelo `freeze` ao final da movimentação.\n\nSegue abaixo um exemplo da mudança de posição e de cor, note que utilizamos 2 `animate`:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Controlando animações com keyTimes e values\n\nAssim como nos keyframes do css, no SMIL também podemos criar um conjunto de valores e tempos para criar a animação da forma que desejarmos.\n\nSegue um exemplo utilizando:\n\n```html\nvalues=\"50; 490; 350; 450\" keyTimes=\"0; 0.5; 0.8; 1\"\n```\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nComo pode perceber, no tempo `0` o círculo está na posição `50`, aos `0.5` é onde ele vai mais longe, `490`, depois ele retorna para `350` e então avança para `450`, exatamente como os valores informados. Sempre obedecendo a proporção de uma mudança para um tempo.\n\n## Mudando as formas de uma path\n\nComo disse no início do post, a vantagem do SMIL é poder manipular propriedades que o CSS não muda, como, por exemplo a forma de um path.\n\nVamos pensar num primeiro exemplo, onde queremos transformar um quadrado em um círculo.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nNós iremos trabalhar no `attributeName=d`, que é onde desenhamos a path e teremos 2 passos, `from`, que contém a forma de um quadrado e o `to`, que contém a forma de um círculo, definimos um tempo para a animação ocorrer e pronto, a mágica acontece.\n\nAgora vamos pensar numa situação em que eu tenho um quadrado virando um triângulo e este virando um círculo, ou seja, 3 etapas. Para trabalhar com mais de uma etapa, basta definir mais valores dentro de `values` e casos queiramos mudar o tempo de acordo com a mudança, podemos usar o `keyTimes`. Segue um exemplo dessa transição:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nMas e se eu quisesse além de mudar os 3 visuais, também quisesse mudar de cor? Basta adicionar mais um animate, passando os `values` do `attributeName=fill`. Segue um exemplo colorido:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Aplicação prática em UX\n\nPow Willian, isso tudo aí é muito legal, muito maneiro, mas não vejo utilidade nenhuma nisso aí. Onde eu poderia aplicar um treco desses no meu site?\n\nPodemos, por exemplo, aplicar uma mudança de um ícone para dar um feedback para o usuário. Segue um botão seguindo esse tipo de interação:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nAs animações realizadas para o botão acima ficam separadas em:\n\n- Transformar no check\n- Mudar para cor verde\n- Transformar na estrela\n- Mudar para cor amarela\n\nPara cada uma dessas animações utilizamos a tag `animate` sempre definindo o `to`, que significa para onde estamos transformando. O JS utilizado no exemplo é só para adicionar o textinho (salvar -> salvo!) e iniciar as animações. Mas lembramos que podemos utilizar o `begin=click` para fazer esse tipo de trigger para inicialização.\n\n## Conclusão\n\nBom pessoal, esse post serviu para mostrar mais uma habilidade exclusiva e super interessante que o SVG possui. Lembre-se que animações para conseguir melhorar a usabilidade do usuário são sempre boas adições e o SVG pode te prover isso muito bem. Existem muitas coisas sobre SMIL, portanto não fique somente neste post e busque ainda mais informação, qualquer coisa, também pergunte nos comentários.\n" }, { "path": "posts/ano-novo-blog-novo.md", "content": "---\nlayout: post\ndate: 2016-01-01T16:00:59.000Z\ntitle: Ano novo, blog novo\ndescription: Nada melhor que começar o ano com novidades né? Para isso, preparei\n um novo visual para blog, espero que gostem e todo feedback é bem vindo!\nmain-class: misc\ntags:\n - frontend\n - dev\n - theme\n - jekyll\ncategories: null\n---\n\n## Introdução\n\nFaaaaaaaala pessoal, primeiro de tudo, um Feliz 2016 para todos! Que grandes coisas aconteçam para todos e que seja um ano de muitos projetos, crescimentos pessoais e profissionais. Queria também agradecer o carinho de vários de vocês =)\n\nVou ouvindo uma playlist super super calma chamada [ChillStep](https://open.spotify.com/user/kent1337/playlist/6IjDl5eRczFdgZkKYXhuHZ) enquanto escrevo esse post, mas na criação desse novo visual, eu ouvi muito as [playlists comemorativas de Star Wars](https://open.spotify.com/user/official_star_wars), em especial a do [Finn](https://open.spotify.com/user/official_star_wars/playlist/6v62GOY5tiFfIwkhOHMwS5), que é composta de Indies, minha paixão <3\n\nBom, como eu havia falado no [post passado](https://willianjusten.com.br/meu-ano-de-2015/), eu estava preparando um visual novo para o site e esse post vai servir para falar um pouco desse processo, minhas viagens em busca do novo visual, algumas coisas que necessariamente precisavam ter, outras que eu queria manter, enfim, uma salada mista de inspirações e a concepção de fato.\n\nEu sempre fui uma pessoa muito curiosa para saber como certos designs foram pensados e criados, então acho que esse meu post vai servir para essas pessoas curiosas assim como eu.\n\n## Blog antigo\n\nO Blog anterior se destacava pela simplicidade nos elementos e cores, tendo como o maior destaque o `azulão` escolhido para estampar os grandes headers do blog. O azul ficou tão \"forte\" na cabeça de algumas pessoas, que teve gente que chamava até de \"garoto do blog azul\" né ahuahua\n\n![Home do Blog antigo](/assets/img/blog-novo/home-old.png)\n\nE os posts também ocupavam uma área relativamente grande, com a data num destaque muito grande.\n\n![Posts do Blog antigo](/assets/img/blog-novo/posts-old.png)\n\n### Características Básicas\n\n- Usava fonte [Open Sans](https://www.google.com/fonts/specimen/Open+Sans) bold para títulos e light para os textos\n- As cores eram azul(`#0562DC`), branco para elementos em contraste com o azul e para os textos um cinza grafite(`#333333`)\n- Minimalismo acima de tudo, então pouca coisa na tela\n- Mobile-first\n- Bastante leve, **menos de 80Kb** no primeiro load!\n- Site estático escrito em [Jekyll](https://jekyllrb.com/) e hospedado no [Github Pages](https://pages.github.com/)\n- Css feito usando [Stylus](http://stylus-lang.com/) `<3`\n- Gulp para fazer processamento dos assets, livereload e build\n\nSe quiser saber um pouco mais da construção dele, tem os posts [Making of - Parte 1](https://willianjusten.com.br/making-of-parte-1/) e [Making of - Parte 2](https://willianjusten.com.br/making-of-parte-2/)\n\n## Blog Novo\n\nTendo já as características do blog antigo, algumas coisas eu decidi permanecer, como o uso do Jekyll, Gulp e Stylus. Ele agora tinha de seguir as seguintes regras também:\n\n- Continuar sendo leve\n- Clean e com cores mais flat (o azul era legal, mas muito intenso)\n- Fácil de achar os artigos\n- Entregar mais informação já de primeira\n- Mais organizado\n\n### Desenhos!\n\nTendo mais ou menos uma ideia das características, eu sempre faço uns rabiscos bem vagabundos disso, eu ainda sou daqueles que funciona bem colocando coisas no papel e no quadro.\n\n**Ps.:** não sou designer, então não espere nada bom ahuahuahua\n\n![Rabiscos do novo blog](/assets/img/blog-novo/rabiscos.jpg)\n\nMeu processo de desenvolvimento é fazer os wireframes no papel e já converter em código, nada de Photoshop, Illustrator ou etc. Até porque não tenho paciência... Então, em posse de alguns desenhos, eu comecei já a desenvolver os componentes.\n\nComo você pode ver pelos desenhos e pelo oficial, muita coisa mudou! E é para ser assim mesmo, experimentações são importantes. Eu vou detalhar os novos elementos e o que eu pensei para cada um deles nascer.\n\n### Criação de Tarefas\n\n![Board de tarefas](/assets/img/blog-novo/board.jpg)\n\nPara otimizar meu tempo e organizar as ideias da cabeça, eu gosto de trabalhar com método de Kanban, tendo pequenas tarefinhas a fazer. Então a primeira coisa que eu fiz depois de pensar no layout, foi separar tarefa por tarefa. Com as tarefas em mãos, comecei o trabalho nos componentes!\n\n### Header Fixo\n\nComo um dos objetivos era já mostrar informação desde o início, não cabia mais ter um header enorme só com meu nome. Para isso, imaginei um header/navbar bem simples, em que contivesse meu nome e os elementos de menu e search. Só que como meu nome é relativamente grande, para que nada quebrasse em dispositivos mobiles, eu resolvi usar só as iniciais do meu nome em resoluções menores, ficando assim:\n\n![Header do novo blog](/assets/img/blog-novo/header-new.gif)\n\nPara fazer isso foi bastante simples, eu usei o seletor `:after` no meu link `a`, para adicionar conteúdos diferentes de acordo com a resolução.\n\n```stylus\n&:after\n transition all .4s\n content ' WJ'\n +above(cut)\n content ' Willian Justen'\n```\n\nO código está em `Stylus` e aquele comando `+above(cut)` é uma feature do [Rupture](https://jescalan.github.io/rupture/), que ajuda bastante para trabalhar com media-queries sem ter que escrever muita coisa.\n\n### Cards de Post\n\n![Cards do novo blog](/assets/img/blog-novo/cards-new.png)\n\nComo o objetivo era entregar mais conteúdo de uma vez só e ter mais organização, resolvi remover aquela lista, que entregava só 3 posts numa tela com resolução alta, por cards de 3 em 3, assim, no mesmo espaço de tela, eu consigo entregar **9 posts!**\n\n#### Anotomia do Card\n\n![Cards do novo blog](/assets/img/blog-novo/card.png)\n\nTalvez um dos elementos que eu mais fui modificando com o tempo, mas que curti o resultado final. Dentro do card temos o básico, que são `data`, `título`, `descrição` e `tags`. Mas para facilitar a organização das coisas, resolvi criar a `categoria principal`, que no caso do card acima é `Miscelânia`. Cada categoria também tem sua cor principal, que é responsável por mudar **TODOS** os elementos do site para a cor em questão.\n\nExato, se você entrou no blog por essa página, você está vendo tudo `verde`, devido a categoria em que o post está, mas se fosse um post de outra categoria, todas as cores também iriam mudar.\n\n#### Mobile-first para os cards\n\nDesde o primeiro blog, o objetivo foi entregar a melhor experiência para qualquer tipo de tela, com isso, tudo foi pensado no Mobile-first. Para isso, eu utilizei `flexbox` na construção dos cards, para que eles ficassem assim:\n\n![Cards do novo blog](/assets/img/blog-novo/cards-responsive.gif)\n\nPara ter isso, foi tão fácil, que tenho até vergonha de falar, já que eu pensava que `flexbox` era mais difícil e talz. Mas as linhas foram:\n\n```stylus\n.flex-grid\n display flex\n flex-flow row wrap\n\n.box-item\n flex 1 0 300px\n```\n\nO `.flex-grid` foi responsável só para ser o container `flex` dos cards, utilizando a propriedade `display flex`. Já o `flex-flow row wrap`, serve para dizer a `direction` dos elementos, no caso em coluna e o `wrap` para dizer como eles vão se comportar empilhando e diminuindo/aumentando.\n\nJá no `.box-item`, eu defino que eles terão o `flex-basis` no valor de `300px`, o valor `1` é para o `flex-grow`, assim eu digo para que os elementos ocupem todo os espaço que puderem e se comportem igualitariamente.\n\nSe você quiser entender mais de `flexbox`, acesse os seguintes links:\n\n- [A guide to Flexbox by Css-tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [Awesome Flexbox by Afonse Pacifer](https://github.com/afonsopacifer/awesome-flexbox)\n- [Flexbox Froggy](http://flexboxfroggy.com/)\n\n#### Interação no Scroll\n\nPara os cards não aparecem \"duros\" no scroll, eu resolvi aplicar uma leve animação neles. Essa animação foi inspirada nesse [post do Codrops](http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/), lá eles utilizam o Masonry e coisinhas a mais, o que eu precisava era só a interação no scroll, então fiz minhas devidas modificações.\n\nEu ia fazer um gif mostrando a animação, mas acho que é melhor você testar por si, vai lá na [Home](https://willianjusten.com.br), faça o scroll e veja por si mesmo =p\n\n### Organização\n\nUma das tarefas era essa, organizar mais o meu blog, para que tantos os novatos do blog, quanto os mais antigos, conseguissem saber logo de cara qual seria o assunto em destaque abordado e também para que pudesse filtrar por aquilo que realmente lhe interessam.\n\nPensando nisso, eu criei algumas categorias como:\n\n- `jekyll`: como esse post é feito nele e eu já comentei algumas dele, nada mais justo que ter sua categoria própria. A cor dele é vermelho.\n- `css`: que blog de frontend seria sem o css? Sua cor é um azul esverdeado.\n- `svg`: preciso dizer algo sobre? Sua cor é roxo\n- `js`: outro tópico indispensável para front, sua cor é o amarelo da linguagem.\n- `html`: para falar sobre coisas mais simples, como estrutura, semântica, a API do html5, entre outros. Sua cor é o laranja.\n- `dev`: essa categoria é para abordar temas mais abertos de programação como ter domínio próprio em github, testes, etc. Sua cor é o cinza.\n- `misc`: miscelânia, como o nome já diz, é um conjunto de tudo, que pode abordar tanto coisas de programação, como links da semana, novidades do blog, coisas off-topic, enfim, todo o resto. Sua cor é o verde.\n\nPara acessar qualquer uma das categorias em específico, basta clicar no `ribbon` no canto superior do card, segue exemplo da [página de js](https://willianjusten.com.br/category/js).\n\n### Página de Post\n\nTalvez a página que menos mudou, mas também mudou! Ela agora possui o header fixo que vem da home, já com as cores devidamente modificadas. O header ganha a cor de sua categoria principal e a fonte agora possui uma leve sombra flat e já não é mais Uppercase.\n\n![Home Post do novo blog](/assets/img/blog-novo/home-post-new.png)\n\nTodas os destaques de texto também passam a receber a cor da categoria, além dos links mudarem para agora uma borda `dashed`, com um hover background suave.\n\n![Post do novo blog](/assets/img/blog-novo/post-new.png)\n\n## Cores (Update)\n\nPara que as categorias tivessem suas respectivas cores, eu fiz o seguinte, separei todos os elementos de cor num arquivo chamado [_theme-colors.styl](https://github.com/willianjusten/willianjusten.github.io/blob/master/src/styl/_theme-colors.styl), criei um objeto tendo `categoria-cor` e então iterei a partir de um elemento pai, para que ele fosse modificando todas as cores.\nSegue um trecho do arquivo de cores:\n\n```stylus\n/* Aqui eu defino os temas e cores */\nthemes = {\n post-jekyll: #B31917,\n post-css: #2DA0C3,\n post-js: #D6BA32,\n post-html: #EB7728,\n post-svg: #7D669E,\n post-dev: #637a91,\n post-misc: #7AAB13\n}\n\n/* aqui eu faço a iteração, tendo o elemento pai\n o nome do tema */\nfor theme, category-color in themes\n .{theme}\n .title-category\n color category-color\n .post-content\n h1,h2,h3,h4\n color category-color\n a\n color category-color\n border-bottom 2px dashed category-color\n &:hover\n background-color category-color\n color #fff\n strong\n color category-color\n p,\n li\n code\n color category-color\n blockquote\n border-left .313rem solid category-color\n\n```\n\n## Conclusão\n\nBom pessoal, esse é o visual do Blog 2016, espero que tenham gostado, peço feedback de todos para saber o que posso melhorar ou até se odiaram o novo visual e querem que eu volte para o antigo mas eu não volto não =p\n" }, { "path": "posts/atomic-design-no-svg.md", "content": "---\nlayout: post\ndate: 2015-01-22T12:00:00.000Z\ntitle: \"#5 - Atomic Design no SVG - g, use, defs, symbol\"\ndescription: Neste artigo iremos saber mais sobre a estruturação de um SVG, seus\n elementos, suas vantagens e um pouco de Atomic Design.\nmain-class: svg\ntags:\n - svg\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\n* [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/)\n* [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/)\n* [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/)\n* [#4 - A Estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/)\n\n## Introdução\n\nPrimeiro de tudo, aviso que o início deste post será praticamente uma tradução adaptada desse [incrivel post](http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/) da [Sara Soueidan](https://sarasoueidan.com/about/), que escreveu tão bem essa parte, que não vi justificativas plausíveis para escrever de outra forma. Claro que tentarei ser um pouco mais simplista com as palavras, para facilitar o entendimento de todos.\n\nPs.: não é preguiça, é porque acho essa mulher incrível e sou mega fã das grandes contribuições em SVG que ela traz <3\n\nNeste post iremos abordar os elementos que dão uma melhor estruturação ao SVG, nos permitindo agrupar e referenciar partes do SVG dentro do documento, conferindo um código mais limpo, de melhor manutenção e com um código mais legível. É muito importante que prestem atenção a este assunto, já que ele contém a base principal para tudo que será feito e utilizado depois. Começarei utilizando o artigo da Sara como base e finalizarei divagando sobre um conceito que eu venho pensado bastante.\n\n## Agrupando com o elemento ``\n\nO `` vem da palavra *group*. Esse elemento serve para agrupar um conjunto de outros elementos relacionados. Em termos de editores gráficos, como o Adobe Illustrator, o elemento `` tem uma função similar a opção de agrupar objetos. Você também pode pensar no *group* num conceito similar a uma camada nos editores gráficos, visto que a camada é só um grupo de elementos.\n\nO elemento `` agrupa todos os seus descendentes em um só grupo, mesmo que exista outro elemento `` interno a ele. É comum possuir uma `id` para dar nome a todo um grupo e qualquer estilo que for aplicado ao elemento `` será aplicado em seus elementos internos. Isto torna fácil a adição de estilos, transformações, interatividades e até animações em um grupo inteiro de objetos.\n\nPor exemplo, o seguinte pássaro é feito de algumas formas, como `` e ``.\n\n![Um pássaro em SVG descontruido, mostrando suas formas basicas](/assets/img/atomic-svg/grouping-bird.svg)\n\nSe você quiser mover o pássaro inteiro de um lugar para o outro no Illustrator, você também irá querer agrupar todos os elementos juntos, para não ter que selecionar cada parte toda vez que quiser mover.\n\n![Agrupando no illustrator](/assets/img/atomic-svg/grouping-in-illustrator.png)\n\nAgrupar elementos no SVG funcionam da mesma maneira. Neste exemplo, nós agrupamos os elementos do corpo, os elementos da cabeça e então unimos os dois grupos em um grupo com a `id` igual a `bird`.\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\nSe você muda a cor de preenchimento do grupo `#body`, a cor de preenchimento de todos os elementos dentro do grupos irão mudar para a cor escolhida. Isto é muito conveniente.\n\nAgrupar elementos é muito útil, não só para própositos organizacionais ou estruturais. É particularmente útil quando você quer adicionar interatividade ou transformações em um gráfico SVG feito de muito elementos. Você pode associar estes elementos em um grupo e definir transformações para mover, redimensionar ou rotacionar todos os elementos juntos, dessa forma as relações espaciais de um para o outro se mantém.\n\nSe você quiser redimensionar o pássaro para duas vezes o seu tamanho, você poderá fazer isso com uma linha de CSS se todos os elementos estiverem no mesmo grupo.\n\n```css\n#bird {\n transform: scale(2);\n}\n```\n\nAgrupar faz a interatividade, em particular, mais conveniente. Você pode colocar eventos de mouse para todo o pássaro e ter a resposta a esses eventos em todo grupo.\n\nO elemento `` tem mais uma importante característica: ele pode ser o seu próprio `` e `<desc>`, que ajudam na acessibilidade aos leitores de tela, e sobretudo faz o código mais legível para os humanos. Por exemplo:\n\n```html\n\n<g id=\"bird\">\n <title>Pássaro\n A imagem de um pequeno e fofo pássaro verde com o bico laranja.\n \n\n```\n\n## Reutilizando Elementos com o ``\n\n**Aviso:** preste bastante atenção a esse tópico, pois será um dos mais importantes e utilizados no resto da série.\n\nMuitas vezes, existem elementos que são repetidos no desenho. Se você estiver trabalhando com o Illustrator e você quiser repetir algum elemento no desenho, você vai copiar o elemento e colar aonde quer que fique. Copiar e colar um elemento é muito mais conveniente do que precisar recriar o elemento do zero.\n\nO elemento `` permite você reutilizar elementos existentes, dando uma função similar ao *copia-cola* dos editores gráficos. Ele pode ser usado para reutilizar um elemento único ou um grupo de elementos definido pelo elemento ``.\n\nO elemento `` pega os atributos x, y, altura e largura, e então referencia esse conteúdo utilizando o atributo `xlink:href`. Portanto se você tiver um grupo em algum lugar definido por uma `id` e você quiser reutilizá-lo em algum lugar, você irá colocar essa URI em um atributo `xlink:href` e especificar a posição x e y que o ponto (0,0) desse novo grupo deverá ser movido.\n\nPor exemplo, se nós estivermos criando um outro pássaro no nosso SVG, nós poderemos reutilizar o pássaro existente, da seguinte forma:\n\n```html\n\n```\n\nPerceba que você pode referenciar qualquer elemento SVG dentro do atributo `xlink:href`, até mesmo se o elemento for de um arquivo externo. O elemento referenciado ou grupo não precisa estar no mesmo arquivo. Essa é uma grande forma de organizar arquivos (por exemplo, você pode ter um arquivo para componentes reutilizáveis) **eu ouvi um Atomic Design irmão?**\n\nSe o pássaro do nosso exemplo, estivesse em um arquivo separado chamado `animals.svg`, por exemplo, nós poderíamos referenciar da seguinte forma:\n\n```html\n\n```\n\nPorém, referenciar SVG externo no `` não funciona no IE grandes novidades, browser de bosta. Tem um [artigo](http://css-tricks.com/svg-use-external-source/) do Chris Coyier que fala em detalhes e mecanismos de fallback.\n\nAlguns detalhes sobre o `` que são importantes. Como dito anteriormente a movimentação do novo grupo é feita tomando como referência o ponto superior esquerdo (0,0), o que não foi dito é que essa relação é feita tomando como referência o ponto do objeto original. Como no exemplo abaixo:\n\n```html\n\n```\n\n![A copia de um pássaro deslocado 100,100](/assets/img/atomic-svg/bird-reuse.jpg)\n\nO fato de a movimentação ser feita tomando o elemento original como referência não é uma coisa muito boa. Outro pequeno problema é que o elemento copiado pelo `` terá sempre os mesmos estilos que o elemento original, portanto, se rotaciornarmos o elemento original, o elemento copiado também irá rotacionar.\n\nIsso acontece, pois o elemento `` reutiliza um elemento **que já foi renderizado**. Mas e se quisermos definir um elemento sem mostrá-lo inicialmente e então desenhar somente nas posições que queremos e com diferentes estilos? Aí que nasce o mais importante companheiro do ``, o elemento ``.\n\n## Reutilizando Elementos guardados com o ``\n\nO elemento `` pode ser usado para guardar conteúdo que não será diretamente mostrado. Em outras palavras, o elemento `` é usado para definir elementos sem renderizá-los. Ele guarda esse conteúdo escondido, que pode ser referenciado e mostrado por outros elementos do SVG, o que o torna ideal para conter desenhos reutilizáveis (**olha o Atomic Design sendo pensado novamente**).\n\nEntão, utilizando o `` nós podemos definir um elemento que queremos usar. Esse elemento pode ser qualquer coisa, um grupo de elementos como o pássaro anterior, um recorte, uma máscara ou um gradiente linear. Basicamente, qualquer coisa que queiramos definir e guardar para usar depois, pode ser definido dentro do elemento ``, e esse elemento irá servir como um *template* para uso futuro. Esse template nunca será renderizado, só as instâncias dele que serão mostrados.\n\nO seguinte exemplo mostra um gradiente SVG sendo definido e então sendo utilizado como preenchimento de um retângulo:\n\n```html\n\n \n \n \n \n \n \n\n \n\n```\n\nDefinindo o gradiente linear dentro do elemento `` garante que o gradiente não será renderizado até que ele seja referenciado em algum lugar que seja necessário.\n\nNa seção anterior nós mencionamos 2 problemas do elemento ``:\n\n* A posição do novo elemento ser relativa ao elemento original.\n* Os estilos do elemento original não poderem ser modificados nas cópias individuais.\n\nIsso, em adição ao fato que o elemento só pode ser reutilizado se o original já estiver renderizado.\n\nTodos esses problemas podem ser evitados usando o elemento ``. Não só o objeto original não está renderizado, como quando você quiser reutilizar um elemento dentro do ``, a posição que você irá especificar será relativa a origem do sistema de coordenadas e não relativo ao elemento original (o que faz mais sentido, já que o elemento original nem está renderizado).\n\nNo exemplo seguinte temos uma árvore. A árvore é feita de um caule e um grupo de folhas. As folhas são agrupadas em um grupo com a `id=\"leaves\"`, e então esse grupo é agrupado com o caule em um grupo com `id=\"tree\"`.\n\n```html\n\n \n \n \n \n \n \n \n \n \n\n```\n\nE teremos uma árvore igual a desenhada abaixo:\n\n![Desenho de uma árvore simples](/assets/img/atomic-svg/defined-tree.jpg)\n\nSe quisermos colocar esse grupo `#tree` em um elemento ``, a árvore não será mais renderizada.\n\n```html\n\n \n \n \n \n \n \n\n```\n\nAgora a árvore serve como template. Nós podemos usá-la utilizando o elemento ``, exatamente como faríamos com qualquer elemento. A única diferença nesse caso é que os atributos x e y agora são relativos ao sistema de coordenadas.\n\nPor exemplo, se quisermos criar três cópias dessa árvore e posicioná-las no SVG, e assumindo neste caso que o sistema de coordenadas bate com a largura e altura da viewport, nós teremos o seguinte resultado com este código:\n\n```html\n\n\n\n```\n\n![3 árvores identicas deslocadas](/assets/img/atomic-svg/tree.svg)\n\nComo você pode ver na imagem acima, cada uma das árvores foi posicionada relativamente a origem do sistema de coordenadas, que nesse caso é o canto superior esquerdo do SVG.\n\nQuando você usa o `` para reutilizar o elemento, você pode aplicar diferentes estilos e cores de preenchimento para cada árvore individualmente. Portanto, o `` é ótimo para criar um *template* mínimo, para que este seja estilizado depois, conforme necessário. **Olha a maravilha do nosso Atomic Design sendo descrito aqui.**\n\n## Agrupando elementos com o ``\n\nO elemento `` é similar ao elemento ``, já que possibilita uma maneira de agrupar elementos. Porém, ele difere do grupo em duas coisas:\n\n* O elemento `` não é renderizado. Ele é similar ao `` dessa maneira. E só é renderizado quando utilizado.\n* O elemento `< symbol>` pode ter sua própria viewBox e preserveAspectRatio. (Ainda não falei detalhadamente sobre eles, mas é importante saber que eles definem o espaço que irá ocupar e comportamento sobre a proporção tomada, respectivamente.)\n\nO `` é mais indicado para definir elementos reutilizáveis. E também serve como template para ser instanciado pelo elemento ``. E tendo atributos individuais, como a `viewBox` e o `preserveAspectRatio`, ele pode dimensionar para qualquer local em que for instanciado, deixando ele ainda mais independente, ou seja, mais próximo do **Atomic Design**.\n\nLeu tudo? Entendeu mais ou menos os conceitos de ``, ``, `` e ``? Então como prêmio, veja esse lindo filhotinho, relaxa um pouco, se estiver cansado, levanta, pega um café, dá um andadinha e volta, porque ainda não acabou!! =)\n\n![Cachorrinho filhote abaixado e olhando](/assets/img/atomic-svg/puppy_dog_eyes_cute.jpg)\n\n\n### Mas como assim Atomic Design? O que é essa bosta? E por que você tanto fala disso?\n\nO [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) é um conceito criado pelo [Brad Frost](https://twitter.com/brad_frost) fortemente influenciado por isso:\n\n> \"We're not designing pages, we're designing system of components.\" - Stephen Hay\n\nEsse pensamento que faz o motor do Atomic Design funcionar, nós não estamos desenvolvendo páginas e sim um sistema de componentes. E esse sistema pode ser dividido em várias partes, de acordo com cada idealizador, o pensamento original possui:\n\n* Átomos\n* Moléculas\n* Organismos\n* Templates\n* Páginas\n\nPara entender ainda melhor sobre todos os conceitos, leia o [post do criador Brad Frost](http://bradfrost.com/blog/post/atomic-web-design/).\n\n#### Mas voltando, por que eu estou falando disso no meio de um post sobre SVG?\n\nComo pôde ver durante todo o post, eu bati na tecla da utilização de componentes reutilizáveis, o que o SVG já faz por natureza. Aqui eu vou fazer uma mini mini divagação de alguns conceitos sobre isso e em outros posts, eu vou começar a mostrar claramente esses conceitos.\n\n#### Átomos\n\n> Átomos são as partes básicas. Aplicando em SVG, seriam os elementos básicos como ``, ``, ``.\n\n#### Moléculas\n\n> São nas moléculas q/ue as coisas ficam mais interessantes, quando combinamos alguns átomos para formar pequenos grupos. Seria como o grupo de folhas do exemplo da árvore.\n\n#### Organismos\n\n> As moléculas criam esses pequenos grupos, que podem se unir e formar organismos maiores, compostos de várias moléculas. Seria o grupo que contém toda a árvore, tendo como moléculas, o grupo das folhas e o grupo do caule.\n\n#### Templates\n\n> O template seria já a junção de todos os organismos para formar um componente reutilizável e customizável. Seria o nosso `` ou ``,\n\n#### Páginas\n\n> São as instâncias dos templates, já possuindo sua aparência definida e informações reais. Seria o nosso `` chamando um template do `` já com seus estilos definidos.\n\nBom, isso é só uma viagem minha, através de alguns conceitos que eu gosto e de algumas conversas que tenho com alguns desenvolvedores. Espero que tenham viajado um pouquinho comigo e curtido um pouco dessa ideia. Nos próximos posts já começarei a pôr tudo isso em prática e aí iremos ver cada vez mais como tudo funciona, parece difícil, mas é moleziiinha =)\n" }, { "path": "posts/atualizacoes.md", "content": "---\nlayout: post\ndate: 2015-01-11T20:34:00.000Z\ntitle: Atualizações\ndescription: O blog cresceu um pouquinho e algumas modificações foram\n inevitáveis. Vou mostrar um pouco do que mudou.\nmain-class: misc\ntags:\n - jekyll\ncategories: null\n---\n\n![Acessos no Brasil](/assets/img/atualizacoes/brasil.png)\n\nBom, primeiro de tudo gostaria de agradecer a quem tem acessado o blog, já vieram acessos de 23 países diferentes e de todos os estados do Brasil, sim, até o Acre! passei a acreditar que ele existe. Só em São Paulo já foram 7311 acessos, sendo um total de 32178 acessos até o momento deste post.\n\nJá foram 8 posts em 8 dias desde o lançamento, porém ontem eu acabei quebrando a sequência do **#1postperday**. Só que foi por um bom motivo, resolvi fazer algumas atualizações no blog e já prepará-lo para uma novidade que vou passar para vocês.\n\n### Menu mais completo\n\n![Menu do site](/assets/img/atualizacoes/menu-ativo.png)\n\nAgora na parte superior esquerda temos um botão de menu, que abre uma lista de links para facilitar a navegação dentro do blog.\n\n### Sobre mim\n\nComo eu expliquei quem eu era no primeiro post e ele já passou um pouquinho, caso as pessoas queiram saber mais sobre mim, só olhar lá na página [sobre mim](/about).\n\n### Pesquisa através de Tags\n\nTanto na home através dos botões das tags, quanto na página [tags](/tags), podemos acessar os conteúdos de acordo com suas tags.\n\n### Busca instantânea\n\n![Menu do site](/assets/img/atualizacoes/busca.png)\n\nNo canto superior direito temos uma lupa que abre um menu, possibilitando a busca dos posts pelos títulos das postagens, isso vai facilitar bastante quando o número de posts aumentar, pretendo fazer muitos posts ainda vai ter que me engolir.\n\n### Séries\n\nE essa na minha opinião é a melhor parte. Depois de conversar com algumas pessoas, resolvi que irei criar séries ensinando do 0 determinados assuntos. Essas séries serão posts normais, mas que serão divididos por numeração e a qual série pertence. Serão como aulas de um curso, em que você deverá acompanhar sempre para ir aprendendo. Ao final de cada série, faremos um projeto final, englobando tudo que foi aprendido sobre aquele assunto. E a primeira série, como não poderia deixar de ser, será \"O Mundo Mágico do SVG\", em que eu irei ensinar desde como usar o SVG, até estilizar com CSS e criar animações. Espero que gostem =)" }, { "path": "posts/background-fixo-com-css.md", "content": "---\nlayout: post\ndate: 2015-07-24T03:50:02.000Z\ntitle: Background fixo com CSS\ndescription: Como atrair usuários usando seções com backgrounds fixos usando só css.\nmain-class: css\ntags:\n - css\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nMais um post extra que venho fazendo enquanto subo a serra em direção a minha querida Petrópolis. No caminho, como não poderia deixar de ser, vou ouvindo uma incrível [playlist de jazz](https://open.spotify.com/playlist/37i9dQZF1DWVqfgj8NZEp1?si=tc-jCV7WQ_C4xwda_ZEVaQ), que foi importante para criação desse mini mini mini tutorial.\n\n## O que vamos fazer?\n\nSeguindo um pouco daquele post sobre [Seções em Fullscreen](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/), resolvi dar uma melhorada naquela técnica incluindo outras técnicas. A ideia desses tipos de posts é mostrar alguns conceitos simples e propriedades do css, para que iniciantes conheçam utilidades práticas de algumas coisas.\n\n**Lembrando que são experimentos, verifique a compatibilidade e o suporte que deseja ter.**\n\nPara quem gosta de ver o resultado antes mesmo de começar apressadinho =p, segue aqui o link do experimento:\n\n- [DEMO](https://labs.willianjusten.com.br/background-fixo-css/)\n\n## Montando o Markup\n\nPara cada frase eu criei uma seção e de acordo com os pesos que eu desejava para a fonte, utilizei diferentes `headings` e o `p` para os autores. Como são citações, utilizei a tag `blockquote`, se não conhece, dê uma olhada na [MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/blockquote).\n\n```html\n
\n

Great Music Quotes

\n
\n\n
\n
\n

\"Without music, life would be a mistake.\"

\n

Friedrich Nietzsche

\n
\n
\n\n
\n
\n

\"Some people have lives; some people have music.\"

\n

John Green

\n
\n
\n\n
\n
\n

\n \"Music expresses that which cannot be said and on which it is impossible\n to be silent.\"\n

\n

Victor Hugo

\n
\n
\n\n
\n

Where words leave off, music begins.

\n
\n```\n\n## Brincadeiras no CSS\n\n### Seções com altura total\n\nPrimeiro, para ter seções ocupando 100% da viewport, vou fazer o mesmo trabalho do [post anterior](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/), ou seja, irei [viewport units](http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/). E para os espaçamentos e fontes, resolvi brincar com as viewport units também, porém, trabalhando com a largura da tela `vw`.\n\n```css\nsection {\n height: 100vh;\n padding: 2vw;\n font-size: 4vw;\n}\n```\n\n### Textos centralizados verticalmente\n\nPara centralizar os textos, também resolvi brincar dessa vez com Flexbox, se quiser aprender sobre tem esse [artigo fodão](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) que ensina tudo. Primeiro defino o `display: flex` para informar que vou usar esse modelo de layout. Depois defino que quero organizar o layout com `flex-direction: column`, que no caso irá organizar de de cima para baixo. E então uso `align-itens: center` para ter meu texto centralizado verticalmente.\n\n```css\nsection {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n```\n\nPara a primeira seção o seu título precisava de um destaque maior, resolvi usar o pseudo-seletor `first-of-type` para pegar só essa primeira seção. Lembrando que pseudo-seletores não são tão performáticos quanto classes, mas em momentos que você não pode utilizar classes diretamente, se tornam ótimas soluções.\n\n```css\nsection:first-of-type {\n text-transform: uppercase;\n font-size: 7vw;\n}\n```\n\n### Background fixo e em toda área\n\nPara dar o toque final, primeiro vamos inserir um background que cubra a área toda.\n\n```css\nsection {\n background-size: cover;\n background-repeat: no-repeat;\n}\n```\n\nO `backgroung-size` será responsável por fazer a imagem ocupar toda a área que ela puder e se ajeitar se a tela for menor. Só tome cuidado para não colocar imagens com qualidade muito baixa, pois isso pode fazer com que a imagem perca muito a qualidade. O `background-repeat` servirá só para evitar que a imagem não se repita caso tenha espaço sobrando.\n\nComo são vários backgrounds diferentes, resolvi brincar com outro pseudo-seletor que é o `nth-child(n)`, ele é responsável por selecionar elementos de acordo com o valor de `n` passado. Aproveitei que as seções ímpares são aquelas com letra branca e sombra, usei o `nth-of-type(odd)`, para assim, selecionar os números ímpares (1,3,5).\n\n```css\nsection:nth-of-type(odd) {\n color: #fff;\n background-color: #000;\n text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);\n}\nsection:nth-child(1) {\n background-image: url(../img/guitar.jpg);\n}\nsection:nth-child(3) {\n background-image: url(../img/bass.jpg);\n}\nsection:nth-child(5) {\n background-image: url(../img/drums.jpg);\n}\n```\n\nNesse momento, temos o seguinte:\n\n![background scroll](/assets/img/reveal-bg/bg-scroll.gif)\n\nUm fundo fixo e um pouco sem graça né? Para deixar ele com uma interação diferente, coloquei ele como fixo, assim o texto na frente se move e o fundo fica fixo, causando uma espécie de paralax. Para deixar o fundo fixo, só usar `background-attachment: fixed`. E teremos algo assim:\n\n![background fixo](/assets/img/reveal-bg/bg-fixo.gif)\n\nE bom, é isso, algo bem simples, mas bonito e apresentável =)\n\n## Polyfill\n\nComo sabemos as viewport units não são totalmente compatíveis em todos os browsers e por isso, podemos usar algum polyfill para poder garantir uma melhor compatibilidade. Algumas pessoas me mandaram algumas dúvidas relacionadas a isso. Então estou adicionando aqui o link de um polyfill que achei excelente como se utiliza.\n\n- [VUnit](http://joaocunha.github.io/vunit/)\n\nPara utilizar é bem simples, basta inserir a chamada do script e seu inicializador:\n\n```html\n\nnew vUnit({ CSSMap: { '.vh': { property: 'height', reference: 'vh' } }\n}).init();\n```\n\nVocê define uma classe, ali no caso é o `.vh` e está irá de `.vh0` até `vh100` indicando o tamanho e qual a referência. No caso eu quero que ele mude as unidades de `vh` para `height`.\n\nNo markup ficaria assim:\n\n```html\n
\n
\n

\"Without music, life would be a mistake.\"

\n

Friedrich Nietzsche

\n
\n
\n```\n\nOnde o `class=\"vh100\"` indica que eu quero uma área com 100% de altura da viewport.\n\n## Conclusão\n\nEnfim, foi mais um post pequeno, fácil e rápido mostrando algumas coisinhas legais do css. Lembre-se que são só experimentos e não necessarimente você precisa usar todas essas coisas. Se tiver alguma dúvida ou quiser perguntar alguma coisa, só falar nos comentários abaixo.\n" }, { "path": "posts/build-incremental-gatsby-netlify.md", "content": "---\nlayout: post\ndate: 2020-04-24T15:34:33.000Z\ntitle: Como habilitar builds incrementais do Gatsby no Netlify\ndescription: Tenha builds muito mais rápidos com a nova atualização do Gatsby\n Incremental Build.\nmain-class: dev\ntags:\n - netlify\n - blog\ncategories: null\n---\n\n## Introdução\n\nDando uma leve pausa dos [vídeos de dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), o post de hoje vai ser rapidinho, mas foi extremamente útil para mim e tenho certeza que será super útil para todos aqueles que já fizeram o meu Curso de Gatsby: Crie um Site PWA com React, GraphQL e Netlify CMS.\n\nOntem o Gatsby lançou essa nova feature chamada de [Experimental Page Build Optimizations for Incremental Data Changes](https://www.gatsbyjs.org/docs/page-build-optimizations-for-incremental-data-changes/), onde eles criam um cache e fazem o build somente do que é necessário, fazendo com que certos builds que demoravam **~10min** passem a demorar **~1min**!\n\nExistem duas vantagens nisso, a primeira e mais óbvia é o ganho de tempo, já que você terá algo no ar muito mais rápido. A outra questão é que se você utiliza o [Netlify gratuito](https://www.netlify.com/pricing/) deve saber que eles deixam somente **300 minutos/mês**. Ou seja, em 30 deploys você acabaria gastando toda a quota do mês e isso não é nada legal né?\n\nBom, vamos deixar de papo furado e fazer logo isso funcionar né? Dá o play nessa [playlist de Eletronic Focus](https://open.spotify.com/playlist/37i9dQZF1DX0wMD4IoQ5aJ?si=-A5AVvQYQ76dRp_ZHFgzIQ) e vamos nessa!\n\n### Passo 1 - Atualize o Gatsby para v2.20.4 ou maior\n\nEssa nova feature veio somente na versão mais atual, então rode:\n\n```bash\n# se utilizar npm\nnpm install gatsby@latest\n\n# se utilizar yarn\nyarn upgrade gatsby@latest\n```\n\n### Passo 2 - Habilite o Netlify Build Plugins\n\nPara que a gente consiga salvar o cache entre os builds é necessário utilizar um build plugin, como essa é uma feature bem nova do Netlify, é necessário que você habilite através do [seguinte link](https://app.netlify.com/enable-beta).\n\nPara saber mais informações do Beta, só [entrar neste link](https://docs.netlify.com/configure-builds/build-plugins/).\n\n### Passo 3 - Adicione o Gatsby Cache Netlify Build Plugin\n\nOs builds incrementais dependem completamente do cache do Gatsby, portanto precisamos habilitar o `netlify-plugin-gatsby-cache`, que vai persistir as pastas `public` e `.cache` entre os builds.\n\nNo seu arquivo `netlify.toml` na raiz do projeto, adicione o seguinte:\n\n```bash\n[[plugins]]\n package = \"netlify-plugin-gatsby-cache\"\n```\n\nE instale o `netlify-plugin-gatsby-cache` no seu projeto com o comando:\n\n```bash\nnpm install netlify-plugin-gatsby-cache\n\n// ou se usar yarn\nyarn add netlify-plugin-gatsby-cache\n```\n\n### Passo 4 - Adicione a flag para habilitar o Gatsby incremental builds\n\nAtualize o comando de `build` no seu `package.json` para incluir a seguinte flag:\n\n```json\n\"scripts\": {\n \"develop\": \"gatsby develop\",\n \"build\": \"GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages\"\n}\n```\n\nA flag `--log-pages` irá mostrar quais páginas o Gatsby fez build em cada deploy, é opcional e se você quiser, basta remover.\n\n### Passo 5: Faça alguma mudança e veja funcionando!\n\nAssim que você fizer todas as mudanças acima, o site já estará preparado para os builds incrementais. Na primeira vez que você subir alguma mudança, ele irá demorar o mesmo tempo que já demora atualmente, porém já guardando os arquivos no cache.\n\nNa segunda vez que você rodar, prepare-se para um build bem mais rápido!\n\n## Conclusão\n\nÉ isso aí galera, foi um post rapidinho, mas que espero que seja útil para todos vocês, eu amo a dupla Gatsby+Netlify e eles estão cada vez mais se superando!\n" }, { "path": "posts/burnout-e-o-tempo.md", "content": "---\nlayout: post\ndate: 2023-09-08T08:00:40.000Z\ntitle: Burnout dura mais que você imagina!\ndescription: A gente pensa que aparece do nada e depois vai melhorar rápido e\n não é bem assim.\nmain-class: misc\ntags:\n - vida\n - reflexão\n---\n\n## Introdução\n\nOlá pessoal, hoje eu quero escrever algo bastante pessoal aqui, que é sobre o burnout (esgotamento mental) que eu tive em meados de 2021 e tudo que veio com ele depois disso também. Inclusive, para quem me segue e lê os posts aqui, notou que o ano inteiro de 2022 eu simplesmente não escrevi nada. Eu fiz um post [sobre o meu 2021](https://willianjusten.com.br/meu-ano-de-2021) e sumi. Inclusive quebrei a \"corrente\" que eu fazia de escrever sobre o meu ano todos os anos.\n\nEu não escrevi nada pois eu estava em um processo de recuperação e te falar que mesmo mais de 1 ano depois, eu ainda não estou 100%. E é sobre isso que eu quero falar hoje.\n\nEnquanto vou escrevendo, vou ouvindo esse excelente álbum do [Lowswimmer](https://open.spotify.com/album/1lmmfQayZ9x0mVbLn2Fn53?si=aj_uI4X1R7m3C1XTCPceNg), é um artista incrível, que fez parcerias com artistas que gosto muito, como a banda Novo Amor, que eu inclusive recomendei no [post anterior](https://willianjusten.com.br/mude).\n\n## O que é burnout?\n\nAntes de falar sobre o meu caso, eu quero falar um pouco sobre o que é o burnout. O burnout é um esgotamento mental, que pode ser causado por diversos fatores, como excesso de trabalho, excesso de estudo, excesso de responsabilidades, etc.\n\nO burnout é algo que vai se acumulando, e quando você percebe, você já está nele. E é muito difícil sair dele, pois você precisa mudar a sua rotina, mudar a sua forma de pensar, mudar a sua forma de agir e o mais importante de tudo:\n\n> Ter empatia com você mesmo.\n\nEu não vou falar muito sobre o que é o burnout, pois existem diversos artigos e vídeos sobre isso, mas eu quero falar sobre como foi o meu caso.\n\n## O que aconteceu comigo?\n\nPara explicar o meu caso, eu preciso explicar um pouco da minha personalidade, não vou aprofundar em traumas nem nada, porque aí esse post seria um livro. Mas explicando de forma simplificada, eu sou uma pessoa que se cobra demais em qualquer aspecto, além disso, eu me preocupo demais com o que os outros vão pensar/achar de mim. Com toda essa cobrança e ansiedade, é claro que eu acabo sendo uma pequena bomba relógio prestes a explodir.\n\nEm 2021 nós ainda estávamos na pandemia e apesar de eu já trabalhar remoto há muitos anos, eu também fui afetado, só que de formas um pouco diferentes. A primeira é claro, o confinamento não é legal para ninguém, uma coisa é você ficar em casa porque gosta, outra é você ser __obrigado__ a ficar em casa, pois é perigoso ir a rua.\n\nEu também enfrento depressão e a forma que eu melhor lido são com viagens, é onde eu consigo (nem sempre) esvaziar um pouco a cabeça das pressões e preocupações que eu mesmo coloco em mim. E em 2021 eu não pude viajar, isso me afetou terrivelmente, pois eu não tinha mais uma válvula de escape. Sei que é super \"white people problems\" isso, mas foi a forma que aprendi, tanto que eu praticamento não tenho luxos, exatamente para poder viajar mais.\n\nAlém disso, eu tinha acabado meu curso de [React Avançado](https://reactavancado.com.br) que foi massivo e consequentemente bastante cansativo. Tinham dias que eu acordava super cedo para gravar e parava só 1-2h da manhã. Pouco tempo depois do curso, eu fui trabalhar numa empresa e bom, como uma pessoa que se cobra demais, não seria diferente. O processo de entrar numa empresa nova causa ansiedade e é normal, são pessoas novas, cultura nova, processos novos, etc. E eu estava lá, tentando me adaptar a tudo isso, enquanto ainda estava com a cabeça cheia de preocupações e pressões que eu mesmo colocava em mim.\n\nConsegue ver que eu já estava no processo da \"bomba explodir\"? Só que normalmente a gente não vê isso, a gente só acha que tá um pouco cansado, mas que é okay, que só dormir um pouco melhor e vai ficar tudo bem. E é aí que a gente se engana, nesse momento você já tá vivendo o burnout e não sabe.\n\n## O burnout vem antes do \"burnout\"\n\nEu não sei se existe um nome para isso, mas eu chamo de \"pré-burnout\", é quando você já está no processo de burnout, mas ainda não chegou \"lá\". E é nesse momento que você precisa parar e pensar sobre o que está acontecendo, pois se você não fizer isso, você vai chegar no burnout e aí sim, vai ser difícil sair dele. E é exatamente isso que aconteceu comigo. Eu estava no processo de burnout, mas não parei para pensar sobre isso, eu só continuei, continuei, continuei, até que eu não aguentei mais.\n\n> No primeiro momento que você sentir que está mal, pare e pense sobre isso! Não deixe para depois, pois depois pode ser tarde demais.\n\n## O momento do burnout\n\nMeu burnout veio num dia que eu acordei e comecei a sentir um aperto forte no peito e falta de ar, exatamente porque eu precisava trabalhar e apresentar \"sei lá o quê\". Apesar de todo o apoio das pessoas da empresa, ter tido conversas com o CTO e o CEO sobre o que estava acontecendo, eles ofereceram para eu ficar umas semanas parado descansando. Eu não conseguia mais, eu não conseguia mais trabalhar, eu não conseguia mais fazer nada, eu só queria ficar deitado na cama e não fazer nada.\n\nPraticamente nas mesmas semanas eu tive o término do meu noivado, que foi outra coisa que eu na época não esperava, apesar de hoje conseguir ver vários e vários sinais, mas é claro, ninguém espera isso, ainda mais num momento já tão debilitado.\n\n## Momento de aceitação e recuperação\n\nLogo após tudo isso, as fronteiras começaram a abrir e eu resolvi de última hora ir para Vancouver ajudar um amigo na mudança dele e como ele precisava fazer 14 dias de quarentena, eu também passei 15 dias em NY. Foi uma viagem incrível, eu ainda não estava 100%, estava me recuperando, mas foi uma viagem que me ajudou bastante. Eu consegui esvaziar a cabeça, consegui pensar sobre tudo que estava acontecendo e consegui aceitar tudo que estava acontecendo.\n\nQuando voltei da viagem, também resolvi que iria dar uma pausa em toda criação de conteúdo e fiz um post bem rapidinho nas minhas redes sobre isso:\n\n![Um post no LinkedIn dizendo: \"Hoje avisei meus alunos que irei parar indefinidamente de criar conteúdos. Apesar de eu gostar muito, estava me gerando uma ansiedade muito grande que não me fazia bem.](/assets/img/parada.png)\n\nEu entendi que precisava dar um tempo em tudo que eu me cobrava e que me gerava ansiedade, e isso incluía a criação de conteúdo. Eu não sabia quando eu voltaria (e se voltaria), mas eu sabia que precisava de um tempo para mim.\n\n## Entrada na Appcues\n\nComo eu não podia/queria ficar simplesmente sem fazer nada, já que o ócio também me gera ansiedade, eu resolvi aplicar para algumas vagas para \"dev normal\", pois eu não queria trabalhar com liderança naquele momento e muito menos com coisas relacionadas a conteúdo. Eu queria ser só um dev normal, que trabalha, recebe seu salário e descansa no tempo livre. E foi exatamente isso que eu fiz, apliquei para algumas vagas, passei em praticamente tudo que tentei (é...o mercado ainda tava \"fácil\"), e acabei entrando na [Appcues](https://www.appcues.com/), uma empresa incrível, com pessoas incríveis e que me ajudaram muito nesse processo de recuperação (mesmo sem elas saberem).\n\nEu entrei na Appcues como Senior Frontend Engineer, e foi uma das melhores decisões que eu tomei. Eu consegui me recuperar, consegui me sentir bem novamente, consegui me sentir útil novamente. Pouco tempo depois eu acabei sendo \"promovido\" para Tech Lead no meu time e mais recentemente eu fui promovido para Staff Engineer, continuando na path de IC (Individual Contributor), que é mais ligada a parte técnica que gestão.\n\n## Retorno a criação de conteúdo e feedbacks\n\nNo início desse eu \"ensaiei\" um retorno, escrevendo sobre [valorize suas conquistas](https://willianjusten.com.br/valorize-suas-conquistas), onde comentava sobre minha ida a terapia, mas apesar do bom feedback do pessoal, ainda me sentia muito nervoso/ansioso em escrever, não é algo racional, mas é algo que eu sentia. Então eu resolvi esperar mais um pouco, até que eu me sentisse mais confortável em escrever novamente.\n\nFoi assim que eu voltei a escrever outros posts em Julho e Agosto, todos mais \"filosóficos\", falando sobre [feito é melhor que perfeito](https://willianjusten.com.br/feito-e-melhor-que-perfeito), [estar tudo bem não fazer nada](https://willianjusten.com.br/esta-tudo-bem-nao-fazer-nada) e [mude, mas comece devagar](https://willianjusten.com.br/mude).\n\nNão teve nenhum post técnico, mas para mim foram posts bem importantes, inclusive quando estive no Frontin Sampa, algumas pessoas vieram falar comigo sobre esses posts e como eles ajudaram elas. E isso é muito importante para mim, pois escrevo essas coisas muito para mim, mas saber que eu ajudei alguém no processo, me deixa muito feliz.\n\n## Regravação do React Avançado\n\nRecentemente eu resolvi regravar alguns pedaços do meu curso de [React Avançado](https://reactavancado.com.br), pois muita coisa mudou e muitos alunos pediam ajuda. Já consegui regravar cerca de 6h, contemplando a criação do boilerplate e também todo o setup do Strapi na v4.\n\nE aí fiz alguns posts nas redes sociais e a galera comentando feliz que eu estava retornando me deixou bastante feliz. Eu não sei se vou voltar a gravar cursos e muita coisa nova, mas aos pouquinhos vamos vendo, posso dizer que o pior já passou do burnout, mas não foi fácil, já são quase 2 anos e eu diria que ainda não estou 100%.\n\n## Conclusão\n\nEu não sei se esse post vai ajudar alguém, mas eu precisava escrever sobre isso, pois é algo que eu ainda estou passando e que eu ainda estou me recuperando (quase lá). Também é uma forma de agradecimento para as várias mensagens que recebi de pessoas dizendo que estavam com saudades dos meus conteúdos =)\n\n\n" }, { "path": "posts/chamada-curso-git-e-github-na-vida-real.md", "content": "---\nlayout: post\ndate: 2018-01-03T20:22:28.000Z\ntitle: Chamada Curso Git e Github na Vida Real\ndescription: Vamos dominar o Git e não ficar mais desesperado com conflitos e\n arquivos perdidos!\nmain-class: misc\ntags:\n - dev\n - cursos\n - git\n - github\ncategories: null\n---\n\n## Chamada\n\nOlá pessoal, como o título do post já diz, ele é na realidade só uma chamada para o meu mais novo **Curso de Git e Github na Vida Real**, o curso está em fase de produção, mas já quero compartilhar um pouquinho sobre ele com vocês, porque estou bastante ansioso com ele!\n\nPara quem não sabe, eu já tenho um curso sobre o assunto na Udemy que é o [Git e Github para Iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/), esse curso já tem hoje mais de **25 mil** alunos e milhares de reviews. Por ter sido um dos meus primeiros cursos, eu aprendi muito com os feedbacks e evoluí em vários aspectos.\n\nE pensando nisso, eu venho colhendo várias informações e dúvidas que as pessoas tem sobre Git e Github para criar um curso mais avançado e mais específico. Para ir além do básico **pull/push**, que agora todo mundo já aprendeu no curso anterior. No novo curso eu vou abordar comandos mais avançados e que são necessários no nosso cotidiano. Além disso, eu vou falar sobre os workflows mais comuns utilizados nas empresas, o que vai facilitar para que as pessoas tenham uma visão melhor e se adaptem mais facilmente ao entrar numa nova empresa. Enfim, eu criei um vídeo falando um pouco sobre o curso e você pode assistir logo abaixo:\n\n\n\n## Perguntas e Respostas\n\n> Quando o curso será lançado?\n\nEu planejo lançar em meados de Fevereiro, como disse acima, as gravações já iniciaram e a ementa está praticamente 100% feita (numa das atualizações vou liberar sobre).\n\n> Qual vai ser a duração do curso?\n\nNão tenho como dar um tempo exato de quanto o curso vai ter, mas como já é comum dos meus cursos, serão vídeos curtos e objetivos. Acho que dessa forma vocês conseguem absorver melhor e até utilizar o curso como uma referência rápida para alguma dúvida. Cursos e vídeos muito grandes tendem a ser cansativos e desestimular o aluno.\n\n> O curso vai ter certificado?\n\nSim, o curso terá certificado liberado através da Udemy para todos aqueles que completarem 100% das aulas.\n\n> Qual o preço do curso?\n\nPara garantir que a Udemy vai gerar certificado para todos (ele limita em cursos gratuitos), esse curso será pago, mas pretendo lançá-lo no valor mínimo **20-25 reais**, o objetivo é que quanto mais pessoas façam o curso melhor! Outra coisa legal, eu irei liberar vários cursos gratuitos lá no [slack dos meus alunos](https://bit.ly/slack-will), então se quiser pegar um curso na faixa, só entrar lá =)\n\n> O que preciso saber para fazer o curso?\n\nComo falei no vídeo acima, precisa ter só o básico de Git ou feito o [meu curso na Udemy](https://www.udemy.com/git-e-github-para-iniciantes/).\n\n> Em quanto tempo preciso fazer o curso?\n\nVocê pode fazer no seu tempo, o curso é vitalício! Faça 1x, 2x, infinitas vezes e quando quiser!\n\n> Como posso saber quando o curso foi lançado?\n\nTodos os meus alunos serão avisados lá no [slack](https://bit.ly/slack-will) e também na plataforma da Udemy.\n\n## Conclusão\n\nEspero que gostem bastante desse curso, estou me dedicando para fazer algo bem legal para a comunidade. E se você acha que vai ser legal, compartilha esse post com seus amigos de trabalho, amigos de fórum, família, gato, cachorro, papagaio! Qualquer dúvida e/ou sugestão, comenta aí embaixo! Como o curso ainda está em produção, vou levar todos os comentários para a criação! E calma, calma, não vai não! Você pensou mesmo que ia ficar sem música? O post de hoje eu deixo com a banda [All Them Witches](https://open.spotify.com/artist/29Wmfm1CojrjQ3aQP0FI65), outra banda altamente influenciado por Led Zeppelin e Black Sabbath. Abraço!\n" }, { "path": "posts/coisas-que-eu-nao-sei-em-ti.md", "content": "---\nlayout: post\ndate: 2019-01-02T06:02:08.000Z\ntitle: Coisas que eu não sei em TI\ndescription: Eu faço bastante coisa, mas existem outras mil coisas que eu não\n sei e não tem problema nisso.\nmain-class: misc\ntags:\n - dev\n - code\n - ti\n---\n\n## Introdução\n\nFaaaaala pessoal, como um objetivo de escrever mais nesse ano de 2019, vou começar com um post inspirado em um outro post. O post em questão é o [Things I don't know as of 2018](https://overreacted.io/things-i-dont-know-as-of-2018/) do [Dan Abramov](https://twitter.com/dan_abramov).\n\nPara quem não sabe, o Dan Abramov é o co-criador do Redux, Create React App, mantenedor do React e vários outros projetos. O cara trabalha no Facebook e ainda é uma grande referência para trabalhos na comunidade, ou seja, o cara é muito bom!\n\nSó que uma coisa super normal é nós pensarmos que pessoas como ele, sabem de tudo. Mas isso não é uma verdade e ele mostrou bem disso no [post](https://overreacted.io/things-i-dont-know-as-of-2018/).\n\nQuando eu vi o post, fiz questão de ler e retweetar, pois sei que muitas pessoas acabam se sentindo mal por não saber X ou Y. E imaginei que um post desses poderia ajudar a refletirem. E aí nesse retweet, recebi o seguinte pedido:\n\n

Que maravilhoso isso mano. Seria legal se você e outros devs brasileiros se sentisse a vontade pra fazer um também. Ia rolar mais identificação ainda.
Serio ajudou muito ja esse post

— Rafael Camillo (@camillodev) January 2, 2019
\n\nEntão, aqui estou eu, é claro que eu não sou mundialmente famoso igual ao Dan, mas já fiz uma coisa ou outra e tenho vários leitores, sendo um post em português, pode agregar mais um pouco também e ajudar nessa reflexão =)\n\nEnquanto vou escrevendo esse post, vou ouvindo uma playlist chamada [Lounge Soft House](https://open.spotify.com/user/spotify/playlist/37i9dQZF1DX82pCGH5USnM?si=I4-fbF6rTtmygTqDnj4JIg), só instrumentais calmos e relaxantes, perfeito para iniciar esse ano de 2019! E vamos logo ao que importa!\n\n## Coisas que eu não sei\n\nSe fosse para escrever tudo que eu não sei, o post iria ao infinito, então vou marcar algumas coisas que talvez as pessoas achem que eu sei ou que acham que é fundamental saber para ter uma carreira como a minha e na realidade nem é estritamente necessário.\n\n### Gramática em Inglês\n\n> Pera aí Willian, mas você trabalha numa empresa americana e fala em inglês todos os dias! Como assim não sabe gramática?\n\nPois é galera, eu sei me comunicar, hoje eu diria que falo até bem, mas meu aprendizado consistiu muito em prática e vivência. Se você me perguntar a diferença entre `Present Perfect` e `Present Continuous`, vou te falar que já vi isso aí, mas lembro não =p\n\n### Edição de Vídeo\n\nApesar de fazer tudo na criação dos meus cursos, onde inclui edição. Eu sei somente o básico de recortar pedaços ruins, juntar com outros, adicionar umas pequenas transições e só. Aquelas vinhetas super maneiras que os gringos tem nos cursos deles, eu não sei nem por onde começar.\n\n### Comandos Unix e Bash\n\nAssim como o Dan, eu sei `ls`, `cd`, algumas coisinhas menos básicas como uso de `grep` para logs, mas meu conhecimento para por aí. Não espere de mim aqueles scripts super elaborados e bem feitos.\n\n### Windows\n\nPode parecer bizarro, mas eu sou horrível no Windows. Não é ser hater nem nada, mas eu não uso Windows fazem anos e com isso, eu não sei mais nada do sistema. Quando alguns alunos enfrentam problemas no prompt de comando, eu sempre peço ajuda para outros alunos que usam o Windows, porque é algo bem fora do meu conhecimento. Estou até cogitando instalar uma VM para testar algumas coisas e não ficar tão ruim para dar suporte aos meus alunos.\n\n### Expressões Regulares (Regexp)\n\nEu sou **péssimo** com isso! Na real, eu odeio! Sei que tem suas utilidades e salva várias vezes, mas eu simplesmente não consigo fazer entrar na minha cabeça. Graças a Deus que temos o [Regex 101](https://regex101.com/) para fazer os testes, sem essa ferramenta, eu seria um completo leigo.\n\n### PHP\n\nFoi a primeira linguagem web que eu tive contato, mas meu contato foram com uns códigos super gambiarrados feitos por aquele patrão que diz saber mexer em código...\n\nSe eu precisar fazer qualquer coisa hoje nessa linguagem, eu precisaria ler tudo do zero, pois não sei uma boa prática, muito menos os frameworks, como o Laravel.\n\n### Linguagens de baixo nível\n\nEu fiz C/C++ na faculdade e tive um pouco de Assembly também, mas são coisas que eu não uso no meu dia-a-dia, então eu não me lembro de praticamente nada.\n\n### Docker\n\nEu sei +ou- para o que serve, já vi gente usando e só. Nunca fui além da instalação para começar aprender, mas aí nem estudei ~~que vergonha xD~~.\n\n### Devops/Deploys, etc.\n\nSe for um deploy de uma aplicação simples para um Netlify da vida, eu sei fácil. Mas coisas como existem na Toptal, com vários processos e automatizações, não sei nadinha. Só agradeço pelas mágicas que acontecem e fazem tudo funcionar.\n\n### React Native/Ionic ou qualquer outra coisa mobile\n\nA única coisa que fiz foram tutoriais, nunca fui além disso, por mais que sejam coisas interessantes e que pretendo ver mais esse ano.\n\n### Vue.JS e Angular Novo\n\nO famoso \"Nunca vi, nem comi, só ouço falar\". Exatamente, eu nunca sequer fiz um tutorial ou li sobre. No meu trabalho eu nunca tive necessidade de aprender e na vida pessoal, meus projetos sempre foram com React ou JS puro. Como o [@felipefialho\\_](https://twitter.com/felipefialho_) diz e eu sigo a mesma filosofia:\n\n

Como sempre digo, ir aprendendo conforme necessidade ou conforme surge interesse é muito melhor do que estudar milhares de coisas ao mesmo tempo.

— felipe.d.ts (@felipefialho_) January 2, 2019
\n\n## Conclusão\n\nEnfim galera, como eu disse, poderia passar o dia inteiro escrevendo sobre coisas que eu não sei, mas poderia se tornar chato também. O importante é que eu não sei várias coisas, mas sei outras também, que são suficientes para o meu cargo atual e também me permitem passar o pouco do que sei para outros.\n\nNão há problema nenhum em não saber todos os 1298319028 frameworks JavaScript ou todos os tipos de algoritmos do mundo. O importante é você saber o necessário para o seu trabalho e claro, querer sempre melhorar e aprender coisas novas, mas tudo a seu tempo.\n\nNão adianta querer aprender um milhão de coisas de uma vez só, no final você vai acabar se frustrando de não ter conseguido tudo que queria. Minha dica para o seu 2019 bem e feliz é que você defina um escopo pequeno de coisas pequenas e prioritárias e conforme for terminando, aí sim você pode adicionar outras coisas.\n\nA sensação de conquista ao finalizar várias coisas pequenas é bem melhor do que a sensação de ter feito várias coisas pela metade. Um Feliz 2019 para todo mundo, muito código e vamos que vamos!\n" }, { "path": "posts/colorindo-em-svg.md", "content": "---\nlayout: post\ndate: 2015-04-03T18:59:38.000Z\ntitle: \"#9 - Colorindo em SVG\"\ndescription: Vamos voltar a ser crianças e colorir as coisas! Aprenda as\n técnicas para mudar as cores do SVG.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\nTenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG.\n\n## Introdução\n\nComo disse, sempre que eu estiver escutando alguma música ou banda, irei passar aqui para vocês, esse post foi escrito ouvindo a banda [A love like pi](http://www.alovelikepi.com/), que inclusive tem um dos sites em SVG mais bonitos que já vi, vale a pena olhar o site e ouvir as músicas. Um agradecimento especial ao [Cleyson Leal](https://github.com/Cleysonlb) que me mostrou esse site e essa banda.\n\nEsses dias eu estava passeando por uma livraria (um dos meus passatempos favoritos) e encontrei um livro de colorir logo na entrada. Achei curioso, pois livros \"infantis\", em geral tem sua parte, coisas do gênero nunca ficam com tanto destaque. Depois cheguei em casa e acabei, por acaso, vendo [essa notícia](http://www.hypeness.com.br/2015/03/ilustradora-faz-sucesso-com-livro-de-colorir-para-adultos/).\n\nAchei tão legal a ideia de colorir, que pensei, porque não fazer um post brincando sobre colorir SVG? =)\n\n## Cores\n\nAs cores estão em tudo e a boa escolha delas irá influir diretamente na beleza do seu site e também na usabilidade do mesmo.\n\nEu costumo dizer que uma das melhores vantagens do SVG é poder manipular as cores, dessa forma podemos criar ícones únicos, ter várias logos diferentes no mesmo site, mas vindo de uma só fonte, dentre outras coisas mega legais.\n\nNo post [Estilizando SVG com CSS - Parte 1](https://willianjusten.com.br/estilizando-svg-com-css-parte-1/) eu falei das formas de se estilizar e no post [Estilizando SVG com CSS - Parte 2](https://willianjusten.com.br/estilizando-svg-com-css-parte-2/) eu mostrei algumas propriedades e como usá-las. Agora vamos a prática, que é mais legal.\n\n### Mas e como funciona?\n\nToda imagem SVG crua é dividida em várias partes, para quem está ambientado com ferramentas de edição, são as chamadas _Layers_. Cada uma dessas layers, são os nossos elementos. Nós podemos selecionar cada um desses elementos, criar classes e pintá-los da forma que desejarmos.\n\nSegue abaixo uma imagem de como funcionam as imagens em SVG.\n\n![Ícones em SVG coloridos](/assets/img/colorindo-svg/color-icons.jpg)\n\n### Colorindo com Fill\n\nApós definirmos uma classe para cada elemento, basta pintarmos utilizando a propriedade `fill`. Segue abaixo um exemplo de como ficou, tente pintar de outras cores, se divirta =)\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n#### Colorindo com Stroke\n\nOutra propriedade que também pode receber cor é o `stroke`, que nada mais é que o contorno do elemento. Também podemos utilizar a propriedade `stroke-width` para deixar o traço mais fino ou mais grosso. Veja o exemplo abaixo:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n### Logos com cores diferentes\n\nImagina ter um site com a logo de uma cor no rodapé e de outra cor no topo, além de tamanhos diferentes. O que as pessoas fazem normalmente?\n\n> \"Ah, eu peço para o designer um png para logo do topo e um png para a logo do rodapé.\" - Programador de esquina\n\nDessa forma, você tem retrabalho do designer para criar duas imagens diferentes, tem mais peso na página e ainda duas requisições. Olha só o problemão!\n\nAí o cliente olha, diz que achou legal até, mas queria a logo do rodapé com uma outra cor. O que você faz? Pede de novo para o designer a logo com a cor que o cliente pediu, olha a trabalheira!!\n\nRelaxa, com o SVG seus problemas acabaram! Basta termos uma só imagem em SVG e colorirmos com classes diferentes.\n\nPara funcionar, criamos uma imagem SVG padrão sem estilos, dentro do elemento `symbol`, que irá nos permitir trabalhar com diferentes tamanhos e utilizamos o elemento `use` para chamar a logo, dentro de alguns estilos diferentes.\n\nSe você se esqueceu como funciona o `symbol` e o `use`, dá uma lidinha no post [Atomic Design no SVG](https://willianjusten.com.br/atomic-design-no-svg/).\n\nA ideia é possuirmos um só componente reutilizável e independente, assim podemos brincar como quisermos =)\n\nSegue abaixo um exemplo de como funciona essa técnica:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Conclusão\n\nOlha como SVG se torna útil, essa semana na [globo.com](http://www.globo.com/) precisaram trabalhar com logos de diferentes cores para um trabalho novo e não pensaram duas vezes em utilizar SVG <3\n" }, { "path": "posts/comandos-uteis-do-chrome-devtools.md", "content": "---\nlayout: post\ndate: 2017-01-25T00:30:59.000Z\ntitle: Comandos úteis do Chrome DevTools\ndescription: Aumente sua produtividade em poucos minutos aprendendo esses comandos.\nmain-class: dev\ntags:\n - frontend\n - tip\n - devtools\ncategories: null\n---\n\n## Introdução\n\nFala galera, para quebrar um pouquinho com os posts não técnicos, o post de hoje será técnico! Será um post leve, porém de extrema importância para o nosso dia-a-dia. Você, como eu, deve passar boa parte do tempo escrevendo código, mas uma outra grande parte debugando e usando o Chrome DevTools para descobrir e inclusive testar coisas de forma rápida e prática.\n\nPensando nisso, a Google desenvolveu vários comandos super úteis, que agilizam bastante o nosso processo de desenvolvimento. E eu vou abordar alguns deles aqui. Será basicamente uma tradução adaptada da [documentação do Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference).\n\nA banda que me segue durante esse post será [God is an Astronaut](https://open.spotify.com/artist/079svMEXkbT5nGU2kfoqO2), mais uma banda instrumental incrível e que é da [Irlanda](https://willianjusten.com.br/vindo-morar-e-estudar-na-irlanda/)! Mas se você pensa que é um folk, tá enganado, é um rock regado de guitarras, confere!\n\nBom, chega de papo e vamos lá!\n\n### Notinha importante, leia =)\n\nAntes que muita gente fale que não funciona, se você estiver usando bibliotecas como `jQuery` que utilizam o `$`, a funcionalidade do DevTools será sobreescrita.\n\n### $_\n\n> `$_` retorna o valor do último código executado\n\nNo seguinte exemplo, rodamos a expressão `2 + 2`. E a propriedade `$_` quando chamada retorna o mesmo valor.\n\n![Funcionamento do $_](https://developers.google.com/web/tools/chrome-devtools/console/images/recently-evaluated-expression-1.png)\n\nNo próximo exemplo, a expressão executada inicialmente contém um `array` de nomes. Portando o nosso `$_` receberá esse array como seu valor inicial. Sabendo que o `$_` é um array podemos realizar as operações normais de um array, como, por exemplo, usar `$_.length` para descobrir o seu tamanho. E tendo este código executado, o valor de `$_` deixará de ser o array, para ser o tamanho do mesmo, conforme código abaixo.\n\n![Funcionamento do $_ usando propriedade](https://developers.google.com/web/tools/chrome-devtools/console/images/recently-evaluated-expression-2.png)\n\n### $0 - $4\n\n> Os valores `$0`, `$1`, `$2`, `$3` e `$4` funcionam como uma referência do histórico dos cinco últimos elementos inspecionados no DOM. `$0` retorna o elemento mais recente, `$1` o segundo mais recente e por aí vai.\n\nNosso exemplo abaixo, o elemento com a classe `medium` é selecionado no painel. E no console, no momento que executarmos `$0`, iremos mostrar o mesmo elemento:\n\n![Exemplo de $0](https://developers.google.com/web/tools/chrome-devtools/console/images/element-0.png)\n\nA imagem abaixo mostra um elemento diferente sendo selecionado na mesma página. O `$0` agora vai se referir ao elemento mais novo, enquanto o `$1` vai retornar o item previamente selecionado:\n\n![Exemplo de $0 - $1](https://developers.google.com/web/tools/chrome-devtools/console/images/element-1.png)\n\n### $(seletor)\n\n> O `$(seletor)` retorna a referência do primeiro elemento no DOM com o seletor CSS especificado. Essa função é um alias do método `document.querySelector()`.\n\n![Funcionamento do $(seletor)](https://developers.google.com/web/tools/chrome-devtools/console/images/selector-img.png)\n\nLembrando que assim como o `$_`, você é capaz de buscar todas as propriedades da variável, como no exemplo abaixo, onde pegamos a propriedade `src` da imagem previamente buscada.\n\n![Funcionamento do $(seletor) com propriedade](https://developers.google.com/web/tools/chrome-devtools/console/images/selector-img-src.png)\n\n### $$(seletor)\n\n> O `$$(seletor)` retorna um array de elementos que batem com o seletor CSS espeficificado. O comando é equivalente ao método `document.querySelectorAll()`.\n\nO seguinte exemplo mostra o uso do `$$()` para criar um array de todos os elementos `` na página atual e através de um loop mostrar o valor da `src` de cada elemento.\n\n![Funcionamento do $$()](https://developers.google.com/web/tools/chrome-devtools/console/images/all-selector.png)\n\n### $x(path)\n\n> O `$x(path)` retorna um `array dos elementos do DOM que batem com o `XPath` passado.\n\nPor exemplo, o seguinte código retorna todos os elementos `

` de uma página:\n\n![Funcionamento do $x(path)](https://developers.google.com/web/tools/chrome-devtools/console/images/xpath-p-example.png)\n\nE o seguinte código mostra todos os elementos `

` que possuem `` internamente.\n\n![Funcionamento do $x(path) com elementos internos](https://developers.google.com/web/tools/chrome-devtools/console/images/xpath-p-a-example.png)\n\n### clear()\n\n> Limpa o console do DevTools.\n\n### copy(objeto)\n\n> Copia a representação em string do objeto selecionado para o clipboard (teu famoso ctrl+V / cmd+V).\n\nPor exemplo, `copy($0)`, copia a string que representa o último elemento selecionado no DOM. \n\n### debug(função)\n\n> Quando a função especificada é chamada, o `debugger` será chamado e irá parar dentro daquela função no painel de Sources e vai te permitir ver passo a passo o código e então debugar.\n\nPor exemplo, executando o código `debug(jQuery.Animation)` e ela sendo chamada depois:\n\n![Funcionamento do debug](https://developers.google.com/web/tools/chrome-devtools/console/images/debug.png)\n\nPara remover o breakpoint utilize o `undebug(função)` ou use a UI para desabilitar. Para mais informações sobre como usar breakpoints, veja [esse link](https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints).\n\n### dir(objeto)\n\n> O `dir(objeto)` mostra uma lista de todas as propriedades do objeto especificado. Esse método é um alias para o `console.dir()`.\n\nO seguinte exemplo mostra o `dir()` em funcionamento:\n\n![Funcionamento do dir()](https://developers.google.com/web/tools/chrome-devtools/console/images/dir.png)\n\n### dirxml(objeto)\n\n> O `dirxml(objeto)` mostra uma representação XML do objeto especificado, como vemos na aba Elementos. Esse método é equivalente ao `console.dirxml()`.\n\n\n### inspect(objeto/função)\n\n> O `inspect(objeto/função)` abre e seleciona o elemento ou objeto especificado no painel apropriado: seja no Painel de Elementos para elementos do DOM no P{inel de Profile para objetos do Javascript.\n\nO seguinte exemplo abre o `document.body` no Painel de Elementos:\n\n![Funcionamento do inspect()](https://developers.google.com/web/tools/chrome-devtools/console/images/inspect.png)\n\n### getEventListeners(objeto)\n\n> O `getEventListeners(objeto)` returna os eventos registrados no objeto especificado. O valor retornado é um objeto que contém um array para cada tipo de evento registrado (\"click\" ou \"keydown\", por exemplo). Os membros de cada array são objetos que descrevem o `listener` registrado para cada tipo. Por exemplo, o código abaixo lista todos os eventos registrados no objeto `document`.\n\n![Funcionamento do getEventListeners()](https://developers.google.com/web/tools/chrome-devtools/console/images/get-event-listeners.png)\n\nSe mais de um `listener` for registrado para o objeto selecionado, o array então irá conter um membro para cada `listener`. No seguinte exemplo, existem dois `listeners` registrados para o elemento `#scrollingList` para o evento de `mousedown`:\n\n![Funcionamento do getEventListeners com 2 listeners](https://developers.google.com/web/tools/chrome-devtools/console/images/scrolling-list.png)\n\nVocê pode expandir esses objetos para explorar suas propriedades:\n\n![Funcionamento do getEventListeners com 2 listeners](https://developers.google.com/web/tools/chrome-devtools/console/images/scrolling-list-expanded.png)\n\n### keys(objeto)\n\n> O `keys(objeto)` retorna um array contendo o nome de todas as propriedades pertencentes ao objeto especificado. Para pegar os valores associados as propriedades, use `values()`.\n\nPor exemplo, supondo uma aplicação definida com o seguinte objeto:\n\n```js\nvar player1 = { \"name\": \"Ted\", \"level\": 42 }\n```\n\nAssumindo que o player1 está definido no namespace global (para simplificar), digitando `keys(player1)` e `values(player1)` no console, os resultados seriam:\n\n![Funcionamento de keys() e values()](https://developers.google.com/web/tools/chrome-devtools/console/images/keys-values.png)\n\n### monitor(função)\n\n> Quando uma função especificada é chamada, uma messagem é mostrada no console indicando que a função foi chamada e quais argumentos foram passados. Utilize `unmonitor()` para cancelar o monitoramento.\n\n![Funcionamento de monitor()](https://developers.google.com/web/tools/chrome-devtools/console/images/monitor.png)\n\n### monitorEvents(objeto[, eventos])\n\n> Quando um dos eventos especificados ocorre no objeto selecionado, o `Event Object` é mostrado no console. Você pode especificar um simples evento para o monitor, um array de eventos ou um tipo de evento genérico mapeado para ser a coleção pré-definida de eventos.\n\nO seguinte código monitora todos os eventos de `resize` no objeto `window`.\n\n![Funcionamento do monitorEvents()](https://developers.google.com/web/tools/chrome-devtools/console/images/monitor-events.png)\n\nSe você desejasse os eventos de `resize` e `scroll`, o código ficaria assim: `monitorEvents(window, [\"resize\", \"scroll\"])`.\n\nVocê pode, por exemplo, ao especificar só o tipo genérico, pegar tudo relacionado a aquele evento. Por exemplo, ao definir o tipo `key`, você consegue descobrir o valor da tecla pressionada.\n\n![Funcionamento do monitorEvents com tipo genérico](https://developers.google.com/web/tools/chrome-devtools/console/images/monitor-key.png)\n\n### profile([nome]) and profileEnd([nome])\n\n> O `profile()` inicia uma sessão de profiling do Javascript com o nome definido. E o `profileEnd()` completa o profile e mostra os resultados no painel de Profile. Para entender melhor como funcionam os profiles, veja [esse link](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution).\n\nPara começar um profiling, `profile(\"Meu profile\")` e para finalizar só usar `profileEnd(\"Meu profile\")`. Lembrando que profiles podem ser executados aninhados. Por exemplo:\n\n```js\n profile('A');\n profile('B');\n profileEnd('A');\n profileEnd('B');\n```\n\nResultaria no seguinte painel:\n\n![Resultado do profiling](https://developers.google.com/web/tools/chrome-devtools/console/images/grouped-profiles.png)\n\n### table(data[, colunas])\n\n> Imprime o objeto data no formato de tabela, passando um cabeçalho para as colunas opcional.\n\n![Funcionamento do table()](https://developers.google.com/web/tools/chrome-devtools/console/images/table.png)\n\n## Conclusão\n\nBom galera, é isso aí, o Chrome DevTools é bem importante e pode se tornar uma ferramenta ainda melhor com a ajuda desses pequenos comandinhos. Espero que eles sejam tão úteis para vocês, como eles são úteis no meu dia-a-dia. \nE aí, tem algum comando legal que você utiliza e não tá na lista? Ou uma curiosidade do DevTools que acha legal mencionar? Manda aí nos comentários =D\n" }, { "path": "posts/comecando-com-react.md", "content": "---\nlayout: post\ndate: 2015-07-10T22:04:05.000Z\ntitle: \"#1 - Começando com ReactJS\"\ndescription: Tentando entender o que é? Para que serve? Por onde começar?\nmain-class: js\ntags:\n - react\n - js\n - tutorial\ncategories:\n - Aprendendo ReactJS\n---\n## Introdução\n\nA trilha sonora da vez fica com a banda [Tristeza](https://open.spotify.com/artist/3oglFEsE6GvwwJFConxKa5), um indie instrumental bastante maneiro, ótimo para quem está querendo focar um pouco e também relaxar.\n\nComo podem notar pelo título **\\#1 - Começando com React**, farei uma nova série sobre React e este será o primeiro post sobre o assunto. O objetivo será aprender mais enquanto escrevo esses posts e também passar a bola para quem quiser começar a aprender também.\n\n## Moda Jovem\n\n![Gráfico indicando que o react é cada vez mais falado.](/assets/img/trends.png)\n\nDesde quando o React foi lançado, ele foi crescendo e ganhando bastante força, principalmente por ter o Facebook como seu criador. Isso, de fato, o tornou vítima do rótulo \"moda jovem\". Mas será que esse rótulo é válido e o React é só uma modinha passageira ou ele tem algo realmente bom? Não irei responder essa pergunta, irei mostrar o que ele faz, como funciona e você deverá escolher se ele te atende ou não em sua necessidade.\n\n## O que é o React?\n\nO React é uma `biblioteca` para criar interfaces, que foi idealizada pela galera do Facebook e Instagram.\n\nEle funciona como o `V` do `MVC`, permitindo criar seus próprios componentes. Numa aplicação em React, você deve quebrar os diferentes elementos dela em pequenos componentes reutilizáveis. Cada vez que algo for complexo, quebre em pequenas partes e desenvolva esses componentes, essa técnica é chamada de\n`component driven development`.\n\n**Mas e esse React? É tipo um Angular né?**\n\nNão, não, não e não! O Angular é um `framework`, ou seja, um conjunto de ferramentas para resolver vários tipos de coisas. Já uma biblioteca serve para resolver uma coisa em específico, no caso do React é renderizar componentes.\n\n## Legal, mas porque usar?\n\nExatamente por ter um objetivo específico, sua implementação é totalmente voltada para isso e consequentemente garante melhor performance e melhores formas de utilização.\n\nO pessoal que criou o React fez um [post bem bacana](http://facebook.github.io/react/blog/2013/06/05/why-react.html) falando o porquê deles terem criado e algumas de suas vantagens.\n\nResumindo:\n\n* Facilidade de se criar componentes pequenos e reutilizáveis;\n* Trabalhar com a abordagem do Virtual DOM, que é bem mais rápido que o DOM nativo;\n* O React pode rodar no lado do servidor, permitindo um melhor SEO;\n* Unificar markup e a lógica da view, facilitando a extensão e manipulação.\n\nSe quiser mais alguns motivos:\n\n* [6 Reasons Why We Love React.js](https://www.syncano.io/blog/reactjs-reasons-why-part-1/)\n\n## Como funciona?\n\nA principal mágica do React é de fato o uso do `Virtual DOM`, mas como ele funciona?\n\nComo todos sabemos o `DOM` é super lento e devemos evitar ao máximo manipulá-lo em excesso, visto que precisaríamos fazer muitos repaints e reflows, que iriam custar muito para o nosso browser.\n\n**É aí que o React brilha!**\n\nQuando um componente é inicializado, o método `render` é chamado, gerando uma representação da view. Dessa representação, um markup é produzido e injetado no documento. Quando algum dado muda, o método `render` é chamado novamente e para que tenhamos uma atualização mais eficiente possível, o React faz um diferenciação (`diff`) do valor novo com o valor velho e aplica no DOM somente a nova mudança.\n\nSegue um exemplo abaixo:\n\n![Diagrama mostrando o funcionamento do Virtual DOM no ReactJS](/assets/img/react-1/reactjs-virtual-dom.png)\n\nComo podemos observar, ele inicialmente tem a cópia \"original\" do componente e o estado que ele deve ter depois, para isso ele faz uma diferenciação entre os 2 modelos no Virtual DOM, vê o que precisa mudar e mandar aplicar, somente após isso que as operações são feitas no DOM real.\n\nSe você quiser saber ainda melhor como funciona, tem esse [post explicando o algoritmo](http://calendar.perfplanet.com/2013/diff/).\n\n## Pensando em Componentes\n\nComo enfatizado em algumas partes do post, o React serve para criar componentes, portanto é importante entender o conceito de componentização e saber como aplicá-lo para os seus sistemas.\n\n### Mas como conseguir separar esses componentes e seus subcomponentes?\n\nDa mesma forma que criamos nossas Classes e Métodos, devemos pensar o mesmo para os nossos componentes e seguir o [princípio da responsabilidade única](https://www.devmedia.com.br/arquitetura-o-principio-da-responsabilidade-unica/18700). Onde uma classe deve fazer apenas uma coisa, deve fazê-la bem e deve fazer somente ela.\n\n### Exemplo\n\nVou tomar como exemplo, o slide de destaques da Home do [Globoesporte.com](http://globoesporte.globo.com/) e vou chamá-lo de ``:\n\n![Destaques Home Globoesporte](/assets/img/react-1/slide.jpg)\n\nO `` possui uma única função, que é mostrar os destaques na página através de um Carousel. Dentro desse ``, já poderemos separar cada um desses retângulos e dar o nome de ``, que seriam os subcomponentes de ``.\n\n![SlideItem](/assets/img/react-1/slideItem.jpg)\n\nE ainda dentro desses subcomponentes, podemos separar mais 2 elementos, que são o `SlideTitle` e o `SlideSubtitle`.\n\n![SlideItem](/assets/img/react-1/slideElements.jpg)\n\nA partir disso, já conseguimos montar uma hierarquia desses componentes e subcomponentes, que seria:\n\n* Slide\n \t\t- SlideItem\n \t\t\t+ SlideTitle\n \t\t\t+ SlideSubtitle\n\nTendo a estrutura de componentes e seus subcomponentes, fica mais fácil de trabalhar com a abordagem do React e criar suas interfaces.\n\n## Conclusão\n\nEssa foi só a primeira parte, para entendermos pelo menos um pouco do que é, o que não é e seu funcionamento. Para os próximos posts, a ideia é já começar a pôr a mão na massa e codificar pequenos exemplos, até para entender mais algumas coisas de seu funcionamento.\n\n## Veja mais posts\n\n[Série sobre React](https://willianjusten.com.br/series/#aprendendo-reactjs)\n" }, { "path": "posts/como-colocar-seu-site-no-ar-de-graca.md", "content": "---\nlayout: post\ndate: 2018-04-02T01:30:42.000Z\ntitle: Como colocar seu site no ar de graca\ndescription: Calma, não é click-bait, é hospedagem grátis mesmo! Conheça e\n domine o Netlify para subir todos os seus projetos e freelas de um jeito\n fácil, rápido e otimizado.\nmain-class: dev\ntags:\n - hosting\n - performance\n - netlify\ncategories:\n - Performance Web\n---\n\n## Introdução\n\nFala pessoal, esse vai ser um post levemente diferente e acho que vocês vão curtir assim espero....\nPrimeiro, eu vou dar uma introdução do porquê desse post e como tudo nasceu xD\n\nPara quem acessa o meu blog, sabe que fiz várias mudanças no meu blog e inclusive iniciei uma série sobre [Performance Web](https://willianjusten.com.br/series/#performance-web), ensinando várias das coisas.\n\nUma das maiores mudanças internas que eu fiz, foi passar o meu blog do Github Pages para o Netlify. Eu estava \"namorando\" o Netlify e suas possibilidades há um tempo e aproveitei que já ia fazer várias mudanças no meu blog para mudar o hosting também. O que acontece é que eu acabei realmente me apaixonando pelo serviço e já uso para um monte de coisas minhas. E devido a esse amor, eu fiz um singelo tweet:\n\n

Deploy em 30s, SSL fácil e sem gambiarra, interface intuitiva, staging preview para commit/branch, test AB na palma da mão, custom header, redirects, cache invalidation, rollback em 1 click e mt mais. Como não amar o @Netlify <3

— Willian Justen (@Willian_justen) March 30, 2018
\n\nLogo após esse Tweet várias pessoas curtiram e comentaram e eu então decidi que eu queria fazer mais um teste.\n\n## Canal no YouTube\n\nEu quero expandir meu conhecimento para mais canais, já tinha usado o YouTube para postar alguns vídeos, mas nunca de forma séria, até esse final de semana eu num tinha nem noção de como criava um canal! Pois bem, eu não só aprendi a criar um canal,como eu já tenho um canal e alguns inscritos!\n\nEntão venho aqui humildemente pedir para vocês se [inscreverem lá no canal](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), vou subir bastante coisa legal lá para vocês, inclusive aceito pedidos!\n\n## Curso de Netlify\n\nComo forma de inaugurar o [Canal do Youtube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu aproveitei o momento que falava do Netlify e pensei, por que não criar uns vídeos sobre ele? Aí pensei logo no primeiro vídeo que eu queria fazer, dizendo [10 razões para utilizar o Netlify](https://www.youtube.com/watch?v=a1cIjP1bueM). Só que eu acabei me empolgando e gravei **16 vídeos no total!**\n\nUm resumo sobre o que é o Netflix: a [Netlify](https://www.netlify.com/) é uma plataforma de static hosting, ou seja, um servidor para arquivos estáticos, onde você tem diversas funcionalidades muito muito maneiras e o melhor, ela é **GRATUITA**. Existem planos pagos, mas você consegue fazer praticamente 95% das coisas no modo grátis, o que é bastante incrível!\n\nDentro do curso eu vou explicando várias coisas sobre a plataforma, desde subir o seu site, até usar um domínio próprio e fazer otimização dos assets, tem bastante coisa! Então segue aqui a [playlist dos vídeos](https://www.youtube.com/watch?v=a1cIjP1bueM&list=PLlAbYrWSYTiMGMxQf9JSoZUU1rgVpGPth), assim é só você dar play e aprender a colocar os seus projetos, freelas e outras coisas mais lá no Netlify de forma muito rápida!\n\nSe você quiser ver só os vídeos que te interessa ou até mesmo saber o que tem, segue aqui a lista vídeo a vídeo:\n\n1. [10 razões para usar o Netlify](https://www.youtube.com/watch?v=a1cIjP1bueM)\n1. [Fazendo deploy via CLI](https://www.youtube.com/watch?v=fSdSIybdABs)\n1. [Fazendo deploy via Drag and Drop](https://www.youtube.com/watch?v=5jl_EKTfK8o)\n1. [Fazendo deploy via Git (Github, Bitbucket, Gitlab)](https://www.youtube.com/watch?v=uMBorVg5Oa0)\n1. [Mudando o nome do site](https://www.youtube.com/watch?v=zK2cSvINxng)\n1. [Criando domínio próprio](https://www.youtube.com/watch?v=2DCIDr6n3WU&)\n1. [Habilitando SSL](https://www.youtube.com/watch?v=m4549OevsxI)\n1. [Rollbacks](https://www.youtube.com/watch?v=1Kr30tV4SRw)\n1. [Deploy Previews](https://www.youtube.com/watch?v=5sFdBIg2cVc)\n1. [Integrando notificações com o Slack](https://www.youtube.com/watch?v=sCxmVHtaMV4)\n1. [Otimizando assets](https://www.youtube.com/watch?v=W33UdPV5QDk)\n1. [Postprocessing](https://www.youtube.com/watch?v=LBgDKzePTtU)\n1. [Integrando um formulário](https://www.youtube.com/watch?v=Q62s0loSY9w)\n1. [Configurando página de sucesso](https://www.youtube.com/watch?v=EH3-T951V4M)\n1. [Redirects](https://www.youtube.com/watch?v=IJH7HZECjNc)\n1. [Agradecimentos e Brinde](https://www.youtube.com/watch?v=6qgOrFP18M0)\n\n## Conclusão\n\nBom galera, espero que curtam essa nova parte aí, tendo vídeos também no YouTube.\n\n``\n
\nSe você gostou do canal, se inscreve, dá joinha e compartilha, vai me ajudar muito a conseguir alcançar novos alunos e espalhar conhecimento.\n
\n``\n\nPor favor comentem coisas que vocês acharam bom, coisas que não gostaram, até mesmo se achou a ideia ruim, pode falar também. O feedback de vocês é bastante importante! E se você é novo no blog e gostou dele, compartilhe com seus amigos, colegas de trabalho, primos, mãe, papagaio...\n" }, { "path": "posts/como-configurar-o-google-analytics-no-nextjs-em-2021.md", "content": "---\nlayout: post\ndate: 2021-09-15T13:40:01.000Z\ntitle: Como configurar o Google Analytics no NextJS em 2021\ndescription: Como configurar corretamente o Google Analytics no NextJS com o next/Script\nmain-class: js\ntags:\n - nextjs\ncategories:\n - NextJS\n---\n## Introdução\n\nFala povo, tem um tempinho eu [migrei meu blog do Gatsby para o NextJS](https://willianjusten.com.br/migrei-meu-blog-do-gatsby-para-o-nextjs) e inclusive falei que iria fazer vários pequenos posts com dicas sobre alguns dos detalhes dessa migração e até mesmo como fazer certas coisas no NextJS. Acabei não tendo tempo, mas agora estou aqui! Vou começar com uma coisinha bem simples, mas que teve um diferencial com a versão mais nova do NextJS.\n\nEnquanto vou escrevendo esse post vou ouvindo uma das minhas bandas favoritas de todas em um dos meus albuns favoritos, que é [Freak Show - Silverchair](https://open.spotify.com/album/511p6iaCuK8Sr0BYdpcfkq?si=e9lY9trvQJyJ5fhhdAO8WQ&dl_branch=1)\n\n## Novo componente de Script\n\nUma coisa que eu gosto muito do NextJS é que eles estão sempre se atualizando e tentando melhorar ainda mais a performance das aplicações. Como é o slogan deles `Let’s make the Web. Faster.`\n\nNa versão 11 eles lançaram o [Componente de Script](https://nextjs.org/docs/basic-features/script) que permite com que você tenha uma granularidade melhor no carregamento de scripts third-parties, o que como nós sabemos, pode afetar demais a performance dependendo do tamanho do arquivo e se ele é carregado junto com todo o resto ou se é carregado depois.\n\nCom esse novo componente, nós temos 3 formas de carregamento:\n\n- `beforeInteractive`: Para scripts críticos que precisam ser baixados e executados antes mesmo da página ser interativa. Normalmente scripts que são fundamentais para o funcionamento da página. Esses scripts são adicionados no server side.\n\n- `afterInteractive` (padrão): Para scripts que podem ser baixados e executados após o carregamento da página. Coisas como tag managers e o próprio analytics. Esses scripts são adicionados já no client-side e rodam depois do hydrate.\n\n- `lazyOnload`: Para scripts que podem carregar quando o carregamento das partes fundamentais já tiver finalizado e não tiver mais nenhuma ação acontecendo. Normalmente para scripts de redes sociais, chats, elementos que não vão estar aparecendo na primeira dobra da página.\n\n## Configurando o Analytics e usando o Script\n\nAgora que já conhecemos o componente de Script, podemos configurar o nosso Analytics para carregar no modo `afterInteractive`. Eu costumo criar um componente `Analytics` para ficar mais fácil de editar/adicionar:\n\n```jsx\nimport Script from 'next/script'\nimport { GA_TRACKING_ID } from 'lib/gtag'\n\nconst Analytics = () => (\n <>\n \n \n \n)\n\nexport default Analytics\n```\n\nNote que o `afterInteractive` é o comportamento padrão, mas eu costumo deixar bem explícito, até para que mesmo quem não conheça o `Script` saiba o que vai acontecer.\n\nOutro detalhe é que eu tenho um arquivo `lib/gtag` que fica responsável pelos métodos e variáveis, que é assim:\n\n```jsx\nexport const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID\n\n// https://developers.google.com/analytics/devguides/collection/gtagjs/pages\nexport const pageview = (url) => {\n window.gtag('config', GA_TRACKING_ID, {\n page_path: url,\n })\n}\n\n// https://developers.google.com/analytics/devguides/collection/gtagjs/events\nexport const event = ({ action, category, label, value }) => {\n window.gtag('event', action, {\n event_category: category,\n event_label: label,\n value: value,\n })\n}\n``` \n\nNote que para tudo funcionar precisamos criar uma variável `NEXT_PUBLIC_GA_ID` no nosso `.env.production` para que o mesmo funcione. Se quiser testar em local, basta criar um arquivo `.env.local`.\n\n## Colocando para funcionar e enviando pageview\n\nSó com os arquivos acima ainda não vai funcionar, pois precisamos adicionar esse componente na nossa `_app` e também precisamos enviar as `pageviews` sempre que tiver um acesso na página. Para isso, vamos precisar adicionar alguns detalhes, segue abaixo um arquivo `_app` só com os trechos necessários:\n\n```jsx\nimport { useEffect } from 'react'\nimport { useRouter } from 'next/router'\n\nimport * as gtag from 'lib/gtag'\nimport Analytics from 'components/Analytics'\n\nfunction App({ Component, pageProps }) {\n const router = useRouter()\n\n useEffect(() => {\n const handleRouteChange = url => {\n gtag.pageview(url)\n }\n router.events.on('routeChangeComplete', handleRouteChange)\n return () => {\n router.events.off('routeChangeComplete', handleRouteChange)\n }\n }, [router.events])\n\n return (\n <>\n \n \n \n )\n}\n\nexport default App\n\n```\n\nSe você notar, na primeira parte nós temos:\n\n```jsx\nconst router = useRouter()\n\nuseEffect(() => {\n const handleRouteChange = url => {\n gtag.pageview(url)\n }\n router.events.on('routeChangeComplete', handleRouteChange)\n return () => {\n router.events.off('routeChangeComplete', handleRouteChange)\n }\n}, [router.events])\n```\n\nEssa parte é a responsável por a cada mudança de rota enviar o `gtag.pageview` daquela url.\n\nE para termos o `gtag` funcionando no escopo global, nós adicionamos o componente de `Analytics` bem ao final da `_app`:\n\n```jsx\nreturn (\n <>\n \n \n \n)\n```\n\nCom esses passos, aí sim toda pageview já será enviada ao Google Analytics de forma prática e sem impactar tanto a performance! =D\n\n## Conclusão\n\nEspero que tenha curtido esse post, ele já estava na minha lista de posts e tudo, mas semana passada mesmo teve um PR [no repositório oficial do NextJS](https://github.com/vercel/next.js/pull/27674) exatamente sobre isso, então achei bacana trazer para cá por agora e depois vou continuar com alguns outros posts do NextJS também, então fica ligado!" }, { "path": "posts/como-configuro-meu-editor-e-desktop-para-gravar-codigo.md", "content": "---\nlayout: post\ndate: 2021-03-06T14:30:49.000Z\ntitle: Como configuro meu editor e desktop para gravar código\ndescription: São muitos anos gravando aulas, então aqui compartilho algumas\n coisas que descobri.\nmain-class: misc\ntags:\n - Dicas\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Nem todo mundo tem tela 4k gigante\n\nQuando for gravar seus vídeos com código, lembre-se que você pode estar enxergando lindo na sua tela, mas tem muita gente que acessa por celular e as vezes um celular bem fraquinho, com uma tela pequena. \n\nPensando nisso, quando for gravar, tente seguir alguns desses passos:\n\n- Utilize fontes bem grandes\n- Se preocupe com um bom contraste para que dê para ler sem forçar\n- Remova qualquer coisa que ocupe espaço em tela e não seja útil\n\n## Evite distrações!\n\nQuando você está ensinando algo, o que você menos quer é que o aluno perca a atenção e fique olhando outras coisas, ao invés do principal, que é sua aula.\n\nExistem alunos com TDAH, outros que são simplesmente curiosos, então faça o seguinte:\n\n- Esconda sua barra de tarefas (dock)\n- Esconda qualquer notificação \n- Feche janelas desnecessárias\n- Evite ficar trocando muito rápido entre janelas/abas\n\n\n## Conclusão\n\nPode ter certeza que só de fazer esses pequenos ajustes, os alunos irão conseguir prestar muito mais atenção, além de aprender muito mais com isso. \n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/como-criar-e-publicar-um-pacote-de-extensoes-do-vscode.md", "content": "---\nlayout: post\ndate: 2020-07-08T14:26:49.000Z\ntitle: Como criar e publicar um pacote de extensões do VSCode\ndescription: Um jeito ainda mais fácil de compartilhar seus plugins com os outros.\nmain-class: dev\ntags:\n - vscode\n---\n\n## Introdução\n\nFala pessoal, o post de hoje vai ser bem simples, mas eu achei super legal de fazer. Tem uns 3 anos que [migrei para o VS Code](https://willianjusten.com.br/migrei-para-o-vscode-e-estou-feliz/) vindo do Sublime e posso dizer que cada dia estou mais feliz com ele.\n\nÉ um editor super completo e funcional e cada dia eu descubro um plugin novo legal! Hoje eu uso quase sempre os mesmos plugins e gosto bastante, para sincronizar os plugins entre meus computadores, eu sempre usei o [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) que cumpre muito bem o seu papel, mas ele gera um gist feinho, eu queria algo mais legal e é por isso que eu aprendi a criar um pacote de extensões e agora vou mostrar para vocês como é fácil!\n\nEnquanto isso, vamos ouvindo uma banda de rock instrumental vindo diretamente da Irlanda do Norte, que se chama [And so I watch you from afar](https://open.spotify.com/artist/7qKMNwlACMZOUdMG3acwst?si=WGQVbOOwT7CJcIWD3s6Tlw).\n\n## De onde surgiu a ideia\n\nComo a maioria de vocês deve saber eu finalmente lancei o módulo 1 do meu curso de [React Avançado](https://reactavancado.com.br/?blog_post=1), e como é um curso bastante vivo e participativo, um aluno pediu as extensões que eu usava.\n\n![Petrus: @willianjustenqui Você se importaria em listar os plugins que você usa no VSCode para trabalhar com a stack usada no curso? Willian: Opa, eu tenho um gist, mas deixa eu atualizar. Eu na realidade uso bem pouca coisa... Willian: https://gist.github.com/willianjusten/5d469f31516cda667dba94fa0948f1c3 Esse é o Gist mas verdade, é mó feio, deixa eu fazer uma lista bonitinha. Willian: Tive uma ideia melhor, vou fazer um pack instalável via Marketplace, daqui +ou- 2h eu lanço tá: Petrus: Esse professor é outro nível! Muito obrigado!](/assets/img/extension-1.png)\n\nE foi assim que eu tive essa ideia legal. Se você já quiser ver o pacote de extensões, o [link está aqui](https://marketplace.visualstudio.com/items?itemName=willianjusten.reactavancado-extension-pack), lá eu descrevo plugin a plugin.\n\nMas chega de papo furado, vamos ao que interessa.\n\n## Inicializando a estrutura do projeto\n\nO VS Code tem na [documentação explicando](https://code.visualstudio.com/blogs/2017/03/07/extension-pack-roundup) mais ou menos como fazer e eu segui basicamente os passos de lá, com umas pequenas diferenças.\n\nEle recomenda usar o [Yeoman](https://yeoman.io/) para iniciar a estrutura, então primeiro de tudo, você precisa instalar na sua máquina.\n\n```bash\n$ npm install -g yo generator-code\n```\n\nE então é só iniciar:\n\n```bash\nyo code\n```\n\nE você vai ver uma tela similar a esta:\n\n![Uma tela dizendo bem vindo ao gerador de extensões do vs code e perguntando qual tipo eu desejo criar.](/assets/img/extension-2.png)\n\nE aí nós escolhemos a opção `New Extension Pack`. Depois ele pergunta se deseja importar as extensões que já possui no VS Code, eu escolhi como não, pois como uso algumas extensões do lado local e outras do lado do WSL, no meu caso o gerador fica confuso.\n\nVão ter mais algumas perguntas e no final ele vai ter criado tudo que é necessário para você.\n\n![Perguntas como qual o nome, identificador e descrição do pacote.](/assets/img/extension-3.png)\n\n## Configurando e instalando localmente\n\nA primeira coisa a fazer, é editar o seu `package.json` na chave `extensionPack` para adicionar os plugins desejados. E como saber o nome dos plugins? É só ir na aba de plugins, pesquisar pelo plugin desejado e ao clicar nele, na parte superior, ele possui o `identifier` dele, segue um exemplo:\n\n![Imagem do plugin com seu identifier circulado em vermelho](/assets/img/inkedextension-4_li.jpg)\n\nNo meu caso, depois de adicionar todas as extensões, ficou assim:\n\n```json\n\"extensionPack\": [\n \"editorconfig.editorconfig\",\n \"dbaeumer.vscode-eslint\",\n \"esbenp.prettier-vscode\",\n \"formulahendry.auto-rename-tag\",\n \"mrmlnc.vscode-duplicate\",\n \"patbenatar.advanced-new-file\",\n \"waderyan.gitblame\",\n \"ms-vsliveshare.vsliveshare\",\n \"apollographql.vscode-apollo\",\n \"jpoissonnier.vscode-styled-components\",\n \"xabikos.javascriptsnippets\",\n \"andys8.jest-snippets\",\n \"skyran.js-jsx-snippets\",\n \"pulkitgangwar.nextjs-snippets\",\n \"zhuangtongfa.material-theme\",\n \"ms-vscode.vscode-typescript-next\",\n \"VisualStudioExptTeam.vscodeintellicode\"\n ]\n```\n\nDepois disso, nós precisamos editar alguns detalhes para aparecer na Marketplace, que seriam:\n\n```json\n \"publisher\": \"willianjusten\",\n \"icon\": \"logo.png\",\n \"galleryBanner\": {\n \"color\": \"#030518\",\n \"theme\": \"dark\"\n },\n \"keywords\": [\n \"react\",\n \"typescript\",\n \"next\",\n \"styled-components\",\n \"graphql\",\n \"apollo\"\n ],\n \"repository\": {\n \"url\": \"https://github.com/React-Avancado/reactavancado-extension-pack\"\n },\n \"homepage\": \"https://github.com/React-Avancado/reactavancado-extension-pack\",\n \"bugs\": {\n \"url\": \"https://github.com/React-Avancado/reactavancado-extension-pack/issues\"\n },\n```\n\nO `publisher` que é basicamente o seu identificador para o VS Code (nós vamos falar disso já já), o `icon` só para ficar bonitinho, o `galleryBanner` serve para na Marketplace o header ficar com a cor do seu plugin e bom, os outros são o que nome já diz, repositório, lugar para issues e palavras chave.\n\n## Gerando o pacote e instalando\n\nDepois de adicionar todas essas coisas, nós precisamos instalar a dependência que vai empacotar a nossa extensão, que é o `vsce`. Para isso:\n\n```bash\nnpm install -g vsce\n```\n\nAgora para gerar o pacote, basta digitar:\n\n```bash\nvsce package\n```\n\nE ele vai gerar um pacote da seguinte forma `identifier-do-pacote-x.x.x.vsix`, onde o `x.x.x` é a `version` definida lá no `package.json`.\n\nPara testar localmente, basta que você aperte ctrl+shift+p (ou cmd+shift+p) e escolha a opção `Install from VSIX`:\n\n![Menu mostrando a opção Install from VSIX](/assets/img/extension-5.png)\n\nEscolha o local onde seu pacote foi criado e mande instalar, ele vai demorar um pouquinho dependendo da quantidade de plugins que você tiver instalado e logo após, você poderá ver o seu pacote na lista de plugins instalados. Olha como fica bonitinho:\n\n![Interface do VS Code com o pacote de extensões instalado](/assets/img/extension-6.png)\n\nBem legal né? Agora vamos aprender a colocar na Marketplace!\n\n## Publicando o pacote na Marketplace\n\nJá foi muito legal criar nosso pacote né, mas ainda mais legal é lançar isso online para que outras pessoas possam também instalar e usar!\n\nLembra que eu falei que iríamos conversar sobre o `publisher`, então chegou a hora. Primeiro de tudo, para poder publicar na Marketplace oficial, você precisa criar uma conta na [Visual Studio Team Service](https://visualstudio.microsoft.com/team-services/). Logo após criar a conta, você precisa criar um `Access Token` que vai permitir você publicar.\n\nPara isso, lá no seu profile, vá no canto superior direito e escolha a opção `Security` no menu. E aí na página, escolha a opção `Personal Access Tokens` e então crie seu token, com um identifier adequado e um tempo de expiração de acordo.\n\nLogo após criar seu token, você pode conectar na sua máquina e publicar sua extensão, rodando o comando:\n\n```bash\nvsce publish -p \n```\n\nFeito isso, só aguardar um tempo até que a Marketplace consiga fazer as checagens e pronto! Seu pacote já estará online!\n\n![Interface da Marketplace mostrando o pacote](/assets/img/extension-7.png)\n\nE aí você pode instalar seja pelo botão de `Install` ali no site ou pesquisando dentro do próprio VS Code (esse pode demorar a indexar, então digite o identifier inteiro para achar).\n\n## Conclusão\n\nEspero que tenham gostado do post e agora criem seus próprios e/ou outras extensões também. O processo vai ser muito similar ao que fizemos.\n\nE, momento de jabá, se você se interessou pelo curso e quer um desconto na faixa, [aproveite esse cupom](https://www.udemy.com/course/react-avancado/?couponCode=2C411EA38BFBEE2145C1), mas fica ligado, ele só vai até o final do mês! Então aproveite o preço mais barato possível agora!\n" }, { "path": "posts/como-criar-footer-fixo.md", "content": "---\nlayout: post\ndate: 2016-06-01T17:43:06.000Z\ntitle: Como criar footer fixo\ndescription: Aprenda a criar um footer fixo e evite aqueles saltos feios quando\n se tem pouco conteúdo na tela.\nmain-class: css\ntags:\n - css\n - frontend\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, esse será um post bem rapidinho, que eu achei que todo mundo deveria ver. A maioria de vocês já deve ter feito um site com um rodapé e em determinadas páginas o conteúdo era tão pequeno que o rodapé subia e ficava feio para caramba. Hoje eu vou mostrar para vocês algumas das técnicas para se evitar isso, criando um rodapé fixo de acordo com o conteúdo.\n\nEsse post é uma adaptação/tradução de um post muito bom que vi no [CSS Tricks](https://css-tricks.com/couple-takes-sticky-footer/) e me deu vontade de guardar esse conteúdo no meu site, porque eu mesmo acabo sempre precisando xD\n\nVou ouvindo meu ídolo [John Frusciante](https://open.spotify.com/artist/7rN3Agir6FaZNfhf5V7mfN) enquanto escrevo esse post.\n\n## A necessidade\n\nComo falei um pouco acima, as vezes, nós temos algum site e queremos que o rodapé fique fixo na parte inferior, mesmo que o conteúdo seja menor que a tela, algo similar a seguinte imagem.\n\n![Imagem de um rodapé fixo](/assets/img/footer-fixo/sticky-footer-1.svg)\n\nE para fazer isso, não é tão complicado, mas demanda alguns \"pulos do gato\", que vou mostrar para vocês.\n\n## Wrapper com margem negativa\n\nUma das formas mais comuns é criar um elemento que segura todo o conteúdo exceto o footer e ele tem uma margem da altura do footer. Então para fazer isso, fazemos o seguinte:\n\n```html\n\n
\n content\n\n
\n
\n
\n\n```\n\nAqui você cria um `wrapper` que será responsável por ter uma altura máxima da tela e empurrar o nosso `footer` para baixo. Essa técnica também necessita de um elemento `push` para garantir que a margem negativa não puxe o rodapé e ele cubra alguma parte do conteúdo. E para o css faremos:\n\n```css\nhtml,\nbody {\n height: 100%;\n margin: 0;\n}\n\n.wrapper {\n min-height: 100%;\n margin-bottom: -50px;\n}\n\n.footer,\n.push {\n height: 50px;\n}\n```\n\nPara que possamos definir um elemento qualquer da tela com altura máxima, precisamos primeiro definir que o `html` e o `body` tenham uma altura de `100%`. Depois temos ali nosso `wrapper` que vai ter obrigatoriamente ter uma altura mínima de `100%` e ali está a margem negativa, que representa a altura do rodapé. Segue abaixo um pen dessa técnica:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Margin-top negativa no footer\n\nEssa técnica não necessita de um elemento `push`, mas ao invés disso, necessita de um outro elemento de `wrapper` em torno do conteúdo, isso para poder aplicar um `padding-bottom` para não permitir o rodapé subir em cima do conteúdo. O markup fica assim:\n\n```html\n\n
\n
content
\n
\n
\n\n```\n\nE o CSS então, irá aplicar um `padding-bottom` no `content-inside` e o rodapé fará a margem negativa, para poder ocupar seu espaço na parte inferior.\n\n```css\nhtml,\nbody {\n height: 100%;\n margin: 0;\n}\n\n.content {\n min-height: 100%;\n}\n\n.content-inside {\n padding: 20px;\n padding-bottom: 50px;\n}\n\n.footer {\n height: 50px;\n margin-top: -50px;\n}\n```\n\nO visual ficará o mesmo:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Usando calc() para calcular a altura certa\n\nEsse método é bastante legal, pois você não vai precisar criar elementos extras para ajudar a altura. Para isso você vai utilizar o método `calc()` e uma unidade de medida que eu gosto bastante que é a `vh` (viewport height), que serve para calcular a altura máxima da tela.\n\n```html\n\n
content
\n
\n\n```\n\nE no css teremos:\n\n```css\n.content {\n min-height: calc(100vh - 70px);\n}\n\n.footer {\n height: 50px;\n}\n```\n\nRepare que estamos diminuindo ao invés de um altura de `50px`, o valor de `70px`, isso está sendo feito, pois assumimos que o último elemento do `content` tenha uma margem para o rodapé. O valor de `100vh` fará com que o content tenha o tamanho todo da tela menos a altura que determinamos.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Utilizando flexbox\n\nUm grande problema das técnicas acima é que precisamos ter uma altura fixa para o nosso footer e isso, em geral, não é algo muito bom para o design, os conteúdos podem mudar, assim como a altura. Usar o flexbox para o rodapé fixo não só não necessita de markup extra, como também não precisa de uma altura fixa, genial não?\n\n```html\n\n
content
\n
\n\n```\n\nE um css tão simples quanto:\n\n```css\nhtml {\n height: 100%;\n}\n\nbody {\n min-height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.content {\n flex: 1;\n}\n```\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nVocê pode até adicionar um header acima ou mais conteúdo abaixo, sem problemas. O truque é o seguinte:\n\n- `flex: 1` no elemento filho que você quer que ocupe todo o espaço (o `content` no nosso caso)\n\nTem um guia bastante legal sobre flexbox [aqui](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).\n\n## Utilizando Grid Layout\n\nA opção de Grid Layout é a opção mais nova de todas e ainda não tem um suporte tão bom. Mas se você já quiser dar uma olhadinha, tem [outro guia legal](https://css-tricks.com/snippets/css/complete-guide-grid/). No markup teremos:\n\n```html\n\n
content
\n
\n\n```\n\nE no CSS:\n\n```css\nhtml {\n height: 100%;\n}\n\nbody {\n min-height: 100%;\n display: grid;\n grid-template-rows: 1fr auto;\n}\n\n.footer {\n grid-row-start: 2;\n grid-row-end: 3;\n}\n```\n\nEssa demo irá funcionar no Chrome Canary e Firefox Developer Edition, então, muito provavelmente não vai estar funcionando no seu browser tá, mas já é uma forma de começar a ver essa nova tecnologia =)\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Conclusão\n\nBom pessoal, foi um post rapidinho e simples, só mesmo para que vocês vejam as diferentes formas de fazer essa técnica, que é bastante importante e legal.\n\nSe você gostou do post, não deixe de comentar, curtir, compartilhar =)\n\nTambém lembrando aqui, que a promoção de [pré-venda](https://willianjusten.com.br/pre-venda-curso-de-svg/) do meu Curso de SVG está chegando ao fim, esse domingo (05/06) é o último, então corre para aproveitar o descontão!\n" }, { "path": "posts/como-criar-secoes-fullscreen-com-css.md", "content": "---\nlayout: post\ndate: 2015-07-19T16:44:01.000Z\ntitle: Como criar seções fullscreen com CSS\ndescription: Vários sites famosos criam divisões grandes na tela que chamam\n bastante atenção, vamos aprender a fazer também.\nmain-class: css\ntags:\n - css\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nO som de hoje fica com uma banda brasileira que mescla MPB e Rock e chama [Maglore](https://open.spotify.com/artist/24me6m3bV7l2rnUwaXV0Tj), curti bastante o som deles, espero que curtam também =)\n\nO post de hoje é extra, ele não era esperado, mas recebi um email de mais uma pessoa com a mesma dúvida, então resolvi externalizar essa dúvida aqui e como fazer.\n\nSe você quiser pular já para o resultado está aqui:\n\n- [Usando CSS simples](https://labs.willianjusten.com.br/full-screen-sections/height-100.html)\n- [Usando Viewport Units](https://labs.willianjusten.com.br/full-screen-sections/viewport.html)\n\n## Dúvida\n\n> Willian tem uma tecnica que vi no seu blog e gostei muito...dai fui procurar como fazer mais não consegui encontrar nada parecido, até consegui mas não era como eu queria.. sou muito perfecionista.. XD. O efeito que me refiro é o que faz com que a div quer vem os titulos dos posts a \"header-post\" ela ocupa sempre a tela completa do usuario.. sei que é uma duvida bem simples, mas agradeço se puder me dar help. Abraços!\n\n## Contexto\n\nComo já devem ter notado, de um tempo para cá, virou uma tendência dos sites possuírem grandes headers ou seções para chamar atenção dos usuários. Essas grandes seções em geral se baseiam na altura do browser e acabam entregando exatamente aquele espaço, assim evitando que algo corte ou não fique tão legal para o usuário.\n\nSeguem alguns exemplos de sites que utilizam dessa técnica:\n\n![Spotify](/assets/img/header-full/header-4.png)\n[Spotify](https://www.spotify.com/br/)\n\n---\n\n![Cameo](/assets/img/header-full/header-1.png)\n[Cameo - Vimeo](https://vimeo.com/cameo)\n\n---\n\n![Pen & Quill](/assets/img/header-full/header-3.png)\n[Pen & Quill](http://penandquill.net/)\n\n## Problema\n\nNós estamos muito acostumados a trabalhar com a largura dos elementos e deixamos as alturas fluidas e no máximo conseguimos definir um `min-height`.Isso acontece pois, em geral, trabalhamos com o scroll do próprio browser, se definirmos uma altura, podemos acabar cortando alguma coisa que não queremos, então fica mais fácil deixar seguir sem problemas. Mas e se quisermos criar uma grande seção com uma altura pegando a tela toda?\n\n## Solução 1\n\nA primeira solução e mais simples é criar uma forma do elemento que desejamos ter altura máxima ter algum ponto relativo para que ele se expanda. Vamos tomar como o exemplo o seguinte markup:\n\n```html\n\n \n \n
\n
\n

Header Full Screen com CSS!!

\n

Dá para brincar e chamar atenção dos usuários! =)

\n
\n
\n \n\n```\n\nOs elementos mais externos que envolvem o `header` são o `html` e o `body`, dessa forma, podemos determinar que ambos devem conter em todo o espaço da tela:\n\n```css\nhtml,\nbody {\n width: 100%;\n height: 100%;\n}\n```\n\nDepois disso, basta definirmos a altura em porcentagem que queremos que o `header` tenha, no caso vamos colocar um altura de 100%.\n\n```css\nheader {\n height: 100%;\n}\n```\n\nSegue um [exemplo](https://labs.willianjusten.com.br/full-screen-sections/height-100.html) de como ficará no final. O código está, é claro, no meu [github](https://github.com/willianjusten/labs/blob/gh-pages/full-screen-sections/height-100.html). Lembrando que é um código experimental, sempre separe o css do seu html, use meta-tags, classes bem definidas, wai-aria e etc =)\n\nSe você se perguntar, mas como centralizou o texto, tem um [site irado](http://howtocenterincss.com/) que ajuda como centralizar qualquer coisa só com CSS.\n\n## Solução 2 - Viewport Units\n\nParticularmente acho essa unidade de medida incrível, como o nome já diz, ela trabalha com as unidades de medida da viewport, ou seja, de acordo com o tamanho da tela que ela tiver, ela irá calcular corretamente. Se você quiser saber um pouco mais sobre, tem [esse post super legal](http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/).\n\nComo nem tudo são flores, essas unidades não são compatíveis com todos os browsers e você pode ver no link do [can i use](http://caniuse.com/#feat=viewport-units). Mas como para todo problema, existe uma pessoa para resolvê-lo, existe um [polyfill](https://github.com/rodneyrehm/viewport-units-buggyfill) que ajuda a corrigir isso =)\n\nEntão, para a nossa situação, vamos imaginar o seguinte markup:\n\n```html\n
\n
\n

Viewport Units são demais!

\n

Essa div foi setada para ter 80vh, ocupando 80% da tela =)

\n
\n
\n```\n\nPara termos uma altura de 80% da tela usando o viewport units é bastante simples. Iremos utilizar a unidade `vh` que vai de 0 até 100vh, que é o mesmo que 0 a 100%. Nosso css ficaria assim:\n\n```css\n.height-80 {\n height: 80vh;\n}\n```\n\nBasta só essa linha para tudo ficar perfeito. Se você quiser ver um exemplo, está aqui o [link](https://labs.willianjusten.com.br/full-screen-sections/viewport.html) e o [código no github](https://github.com/willianjusten/labs/blob/gh-pages/full-screen-sections/viewport.html).\n\n## Conclusão\n\nBom, esse foi um post rapidinho, espero que ajude quem ainda tinha essa dúvida e para lembrar que CSS é demais e podemos fazer muitas coisas com ele =)\nSe alguém tiver alguma dúvida sobre qualquer coisa, pode mandar nos comentários, email ou redes sociais e eu terei o maior prazer de tentar ajudar.\n" }, { "path": "posts/como-criar-um-curso-online.md", "content": "---\nlayout: post\ndate: 2018-10-29T05:55:18.000Z\ntitle: Como criar um Curso Online\ndescription: Algumas dicas de como dividir seu curso, materiais de apoio,\n softwares que utilizo e outras coisas mais.\nmain-class: misc\ntags:\n - courses\n - udemy\n - dev\n---\n\n## Introdução\n\nFala pessoal, em comemoração a incrível marca de **mais de 50 mil alunos na Udemy**, eu resolvi fazer um post bem completo sobre esse assunto que pode ser bem interessante para quem também tem o desejo de passar seu conhecimento adiante.\n\nHá cerca de 4 meses, eu fiz uma palestra para a rede de freelancers da Toptal, explicando exatamente sobre esse assunto e aí vou tentar transcrever basicamente o que eu falei nessa palestra. Lá teve uma sessão de perguntas e respostas, que vocês podem e devem fazer através dos comentários okay =)\n\nO post é grande, então provavelmente eu vou ouvir mais coisas, mas no momento estou ouvindo o [primeiro album](https://open.spotify.com/album/7zeCZY6rQRufc8IHGKyXGX?si=3ju90hWyTTO606aYm4UfSg) da banda Greta Van Fleet, um som que lembra muito Led Zeppelin, eu já falei uma vez dessa banda, mas precisava falar de novo agora que lançaram esse album, eles são espetaculares!\n\n## Índice\n\n- [Razões para criar um curso online](#razões-para-criar-um-curso-online)\n- [Princípios para um bom curso online](#princípios-para-um-bom-curso-online)\n- [Planejando o curso](#planejando-o-curso)\n- [Produzindo o curso](#produzindo-o-curso)\n - [Detalhes técnicos e qualidade](#detalhes-técnicos-e-qualidade)\n - [Entrega do Instrutor](#entrega-do-instrutor)\n - [Dicas de Softwares](#dicas-de-softwares)\n - [Meu passo-a-passo ao gravar um curso](#meu-passo-a-passo-ao-gravar-um-curso)\n- [Publicando o seu curso](#publicando-o-seu-curso)\n - [Self Hostings](#self-hostings)\n - [Marketplaces](#marketplaces)\n - [Minha opinião](#minha-opinião)\n - [Meu histórico](#meu-histórico)\n- [Sobre feedbacks](#sobre-feedbacks)\n- [Conclusão](#conclusão)\n\n## Razões para criar um curso online\n\nBom, existem diversas razões para lançar um curso online, vou passar alguns pontos que mais acho válidos, mas é claro que você pode incluir mais coisas.\n\n**Aprendizado Exponencial**: quando você está ensinando você também está aprendendo. Costumo dizer que o momento que eu mais estudo um assunto é quando eu quero ensinar, seja num post ou num curso. Porque você precisa pensar desde a parte mais básica até a mais avançada. E, com isso, você vai sempre se aprofundar mais no assunto e tentar torná-lo de mais fácil entendimento.\n\n**Ganho de novas habilidades**: ao gravar um curso de programação, você aprende mais daquela tecnologia, mas não só isso! Você vai acabar aprendendo como gravar a tela corretamente, como editar o vídeo, editar som, escrever e organizar conteúdo. No final, você não é só mais um programador, mas uma pessoa com múltiplos conhecimentos =)\n\n**Devolver a comunidade**: ao fazer cursos, sejam eles pagos ou gratuitos, você está pegando seu conhecimento e permitindo que ele seja compartilhado por outras pessoas e isso é uma coisa incrível!\n\n**Conquistas financeiras**: não estou dizendo que você vai ficar rico (alguns até conseguem isso), mas só de ganhar um dinheiro inesperado já é uma coisa legal. E o mais legal disso, é saber que pessoas valorizam seu conhecimento e querem pagar por ele.\n\n**Ganhos passivos**: após ter um curso consolidado, você pode ser chamado para fazer freelas ou até cursos presenciais, o que acaba te garantindo outros ganhos até externos aos cursos.\n\n## Princípios para um bom curso online\n\nEntão, como vimos acima, existem várias razões para se fazer um curso online e por isso, muitos cursos são lançados dia após dia. Só que existe um porém nisso, muitos cursos são bastante fracos e rasos. Então o que faz um curso ser bom?\n\n**Tópico Original**: esse pode ser um assunto meio que polêmico, pois existem 6 milhões de cursos de React por aí, como exemplo. Mas se o seu tópico for mais específico/original, você acaba se destacando em relação aos concorrentes e isso é bastante importante.\n\n**Boa qualidade de vídeo e som**: muitas pessoas desistem do curso já de cara se ele possuir muitos ruídos ou imagem ruim. Num mundo onde temos TVs 4K e som digital de alta qualidade, é praticamente inaceitável que o curso tenha qualidade baixa. Mas também não se assuste nesse tópico, você não precisa também ter uma qualidade de estúdio bizarra de início, você pode ir melhorando aos poucos. Me usando como exemplo, meus primeiros cursos tem uma qualidade bem abaixo do que hoje, mas isso é até mesmo pois eu estava iniciando. Uma dica que pode servir de início, faça um mini-curso gratuito, até mesmo para testar sua audiência e ver se você está agradando e a partir daí, vá fazendo melhorias.\n\n**Bem organizado e num ritmo adequado**: ninguém quer fazer um curso onde o professor não explica de onde aquilo veio ou que simplesmente pula mil coisas já achando que você entende tudo. Um bom curso, é aquele que vai evoluindo gradativamente, num ritmo que dá para ser acompanhado e de uma forma que o aluno veja sua própria evolução.\n\n## Planejando o curso\n\nEssa talvez seja a parte mais \"complicada\" de todo o curso, mas se você conseguir o planinho abaixo, ficará bem mais fácil.\n\n1. Defina o escopo do seu curso - o que você quer ensinar no curso?\n2. Com o tema em mão, separe o curso em tópicos grandes, esses irão funcionar como seus módulos.\n3. Em cada módulo, separe nas partes pequenas, que vão ser suas aulas.\n4. Para cada aula, separe conteúdos extras e/ou exercícios se necessários.\n\nVamos agora na prática, para ficar um pouquinho mais fácil de entender. Digamos que você quer fazer um curso chamado \"Desenvolvimento Web para Iniciantes\". Primeiro precisamos fazer a separação dos blocos maiores (módulos), que poderia ser algo como:\n\n- Introdução\n- HTML\n- CSS\n- JS\n\nDentro de cada tópico, podemos ter aulas direto, por exemplo:\n\n- Introdução\n - História sobre a Web\n - Funcionamento dos protocolos\n - ...\n\nMas você também pode granularizar mais os tópicos também. Como, por exemplo:\n\n- HTML\n - Elementos inline\n - links\n - imagens\n - ...\n - Elementos bloco\n - div\n - listas\n\nOu seja, pegamos o tópico principal que é **HTML** e quebramos ele outras pequenas partes e dentro dessas, colocamos as aulas.\n\nRepare que de início, é muito possível que você acabe esquecendo um assunto ou outro, mas não tem problema! Tudo pode ser mudado/adicionado antes de se publicar um curso!\n\nMinha dica é que você monte um curso como se fosse seu plano de estudos. Pense que é você quem estará aprendendo aquilo ali e então, eu tenho certeza que você vai achar uma organização muito boa. A empatia é a melhor arma para um bom instrutor.\n\n## Produzindo o curso\n\nEu vou separar essa parte de produção em alguns pedaços, pois acho que vai facilitar e também fazer muito sentido.\n\n### Detalhes técnicos e qualidade\n\nComo dito no início, um dos princípios de um bom curso, é que ele tenha uma boa qualidade. E para isso, algumas regrinhas são bem necessárias:\n\n**Os vídeos devem ser entre 2 a 20 minutos**: não estou dizendo com isso que um vídeo não possa ser um pouco maior ou menor, mas é comprovado que vídeos muito grandes se tornam cansativos de assimilar e consequentemente os alunos desistem mais facilmente. A sensação de recompensa por ter terminado 4 vídeos de 5 minutos e maior do que ao terminar um vídeo único de 20 minutos. Pensando nisso, sempre tente cortar seus vídeos para que eles se encaixem em tempos menores, isso facilita demais para o aluno, até mesmo para uma possível conferência do dia-a-dia.\n\n**Os vídeos precisam ser gravados em pelo menos HD**: num mundo onde temos telas 4k e até mesmo os celulares já possuem alta resolução, não vale gravar vídeos com qualidade menor que HD, pois pode ficar até difícil de o aluno enxergar algo. O mais recomendado é que se possível seja em fullHD (1080p).\n\n**Use textos grande o suficiente para serem lidos em qualquer dispositivo**: cada vez mais as pessoas estudam através dos seus celulares e com isso, nós precisamos ficar atentos para usar fontes que facilitem a leitura nesses displays. Eu sei que nem sempre poderemos fazer isso, principalmente quando se tratar de muito código, mas faça alguns testes para chegar num tamanho agradável.\n\n**Audios devem sair dos 2 canais e sem ruídos**: a coisa mais horrível do mundo é você botar para ouvir algo e sair só de um lado, a primeira coisa que vai acontecer é aquele desespero \"meu deus, meu fone estragou\" e seguido disso vai ser \"que merda de curso, nem para sair som dos 2 lados\", então fique atento nisso. A outra coisa é que ruídos atrapalham muito, as vezes pode sair algum barulho leve ou até mesmo a digitação do teclado, mas fique atento para cortar qualquer coisa extra a isso, nada de outras falas, latidos e carros passando.\n\n### Entrega do Instrutor\n\nEsse é um tópico extremamente importante também e dentro dele, existem alguns pontos necessários para falar:\n\n- Pronuncie as palavras de forma limpa e enfatize partes importantes.\n- Corte \"huuumms\" e \"ããã\", os estudantes querem um instrutor que passe confiança nas suas palavras.\n- Fale para entregar o conteúdo num tom entusiasmado, não precisa berrar nas aulas ou ser artificial, mas evite o mesmo tom monótono, pois isso pode cansar o aluno.\n\n### Dicas de Softwares\n\nExistem milhares e milhares de softwares por aí, eu vou colocar aqui os que conheço/uso como forma de lhes ajudar como um guia inicial.\n\n- `Audacity`: melhor programa para edição de audio que existe, com um visual que remete o Windows 95 até hoje, ele é imbatível e o melhor, é de graça!\n- `Camtasia`: um ótimo editor de vídeo e com várias opções para adicionar textos, transições, cortar áudios e muito mais. (Pago)\n- `Screenflow`: é o editor que eu utilizo no meu curso, ele é super simples de usar, em 30 minutos você já aprendeu tudo e funciona de uma forma bem leve. (Pago)\n- `Quicktime/iMovie`: editores padrões que já vem no Macbook, são simples de usar, mas não possuem tantas features como os outros, a vantagem é que são de graça.\n- `Windows Movie Maker`: o mesmo que os 2 acima, só que para Windows xD\n- `Handbrake`: melhor ferramenta para compressão de vídeos que vi na vida. Para quem tem taxa de upload baixa, ele pode te salvar horas, já que comprime os vídeos sem perder a qualidade.\n\n### Meu passo-a-passo ao gravar um curso\n\nCom base nos programas que uso e na organização do curso, eu sigo os seguintes passos:\n\n1. Escrevo o código que vou ensinar / monto slides\n1. Faço um treino sozinho sem gravar (somente para ver pontos de atenção)\n1. Gravo o vídeo (se errar durante o vídeo, dou uma pausa e continuo antes do erro e deixo o vídeo assim bem cru)\n1. Recorto as partes dos erros, tempos de download, pausas grandes\n1. Separo o audio do vídeo e edito no Audacity (equalizo o som e removo ruídos)\n1. Sincronizo o audio com o vídeo\n1. Adiciona vinheta inicial, marca d'agua ou qualquer coisa externa\n1. Exporte na melhor resolução possível\n1. Comprimo o vídeo usando o Handbrake para ter um tamanho menor\n1. Faço backup desse vídeo (SEMPRE FAÇA BACKUPS!)\n1. Faço o upload para a plataforma\n1. Adiciono descrição e links caso necessário\n\nÉ bem normal que eu faça somente as etapas de **1 a 3** e então faça toda a etapa de pós-produção de todos os vídeos depois. Isso vai variar da quantidade de vídeos que planejo gravar/editar no dia.\n\n## Publicando o seu curso\n\nDepois de montado e gravado o curso, precisamos de uma outra etapa extremamente importante, que é: \"Onde vou publicar meu curso?\".\n\nBasicamente existem 3 opções:\n\n- `Plataforma Própria`: onde você tem toda sua infraestrutura, onde serve os vídeos, faz cobranças, cadastro de alunos, publicidade própria, enfim, o trabalho é todinho seu.\n- `Plataformas de hosting prontas`: essa seria a opção intermediária, onde você já não precisa fazer suas coisas do zero, mas também é uma plataforma só sua, onde tem somente seus cursos e aí a publicidade é você quem vai fazer também.\n- `Marketplaces`: são plataformas prontas e que já vendem cursos e você vai ser mais um de lá.\n\nDentre esses tipos, temos algumas opções:\n\n**Self-hostings**:\n\n- Teachable\n- Thinkific\n- Wordpress (WooComerce + Plugins de vídeo)\n\n**Marketplaces**:\n\n- Lynda\n- Skillshare\n- Udemy\n\nE para cada uma dessas opções, nós temos as vantagens e desvantagens.\n\n### Self Hostings\n\n**Vantagens:**\n\n- A taxa a ser paga é basicamente do sistema de pagamento, todo o resto é seu.\n- Os valores a serem cobrados ficam de acordo com você, nada é fixo.\n- Controle total na customização: cores, textos, layouts, player de vídeo.\n\n**Desvantagens:**\n\n- Todos os custos de manutenção são por sua conta.\n- O Marketing precisa ser feito por você.\n- Caso você não seja conhecido, sua marca terá menos credibilidade e pessoas terão medo de comprar e não receber.\n\n### Marketplaces\n\n**Vantagens:**\n\n- O Marketing é feito para você\n- Sem custos de manutenção\n- Uma base gigante de alunos já cadastrados\n- Marketplaces famosas como a Udemy já são mais confiadas pelos alunos, até mesmo pela política de devolução em 30 dias.\n\n**Desvantagens:**\n\n- Nenhum ou baixo controle na determinação dos preços\n- Caso a venda seja orgânica, a taxa que eles pegam pode ser muito alta\n- Sua marca pode acabar sendo diluída\n- Sem acesso aos emails dos estudantes ou pouquíssimas informações\n\n### Minha opinião\n\nOs Marketplaces como a Udemy são bons para pessoas que não possuem nenhum pública, ou seja, estão começando do zero, pois lá eles já vão ter um alcance para a base da própria Marketplace. Outro ponto importante é que as pessoas não precisam de ter um capital inicial para começar, visto que já está tudo pronto e não é necessário pagar nada por isso.\n\nO Self-hosting é melhor para pessoas que já possuem um público ou que sejam excelentes com publicidade, um exemplo de pessoa que faz assim é o Wes Bos, mas ele fez parcerias com mil lugares e todo mundo acabou conhecendo ele. Precisa lembrar que nesse caso, é necessário já ter um capital legal, pois você precisa pagar servidores, campanhas de publicidade e outros pequenos detalhes também.\n\n### Meu histórico\n\nEu cheguei a usar a Teachable que é uma plataforma de Self-hosting onde eu pagava bem menos taxas, mas após pedidos de muitos alunos, eu resolvi fazer a migração para a Udemy. Posso dizer com 100% de certeza que minhas taxas só aumentaram, hoje já tenho mais de 50 mil alunos e muito disso é graças ao marketing pesado que a Udemy faz.\n\nÉ claro que os preços são bem complicados e as vezes a gente se sente um pouco prostituído com isso, afinal de contas é algo que dá muito trabalho, mas acaba sendo vendido por R\\$ 19,99. Só que precisa se pensar em duas coisas:\n\n- Sendo mais barato, seu conhecimento pode ser passado para mais e mais pessoas, inclusive aquelas que realmente necessitam e não teriam como pagar mais por isso.\n- A balança acaba se equilibrando, se você vende muitos cursos a um preço mais baixo, isso vai dar a mesma coisa ou até mais que vender poucos cursos a um preço mais alto.\n\n## Sobre feedbacks\n\nDepois de publicado o curso, está na hora de vender os cursos e receber os feedbacks dos alunos. E essa parte também é muito importante estar preparado! Existem alguns tipos de feedback aqui:\n\n- `Só elogios`: esse é um feedback que te deixa sempre muito feliz, a pessoa elogia seu modo de ensinar, como seu curso foi feito e agradece por tudo.\n- `Bons elogios mas algumas ressalvas`: esse aqui é o meu feedback favorito! A pessoa elogia o curso, mas aponta coisas que poderiam ser melhoradas ao ponto de vista dela. Isso é sempre bom, pois você sempre acaba aprendendo alguma coisa nova com o aluno, as vezes são coisas que para você é normal, mas para o aluno acaba sendo ruim ou difícil. Você como aluno, não tenha medo de dar suas críticas, é super importante para o crescimento do professor.\n- `Só críticas, mas construtivas`: a pessoa não gostou nada do curso, mas deu vários pontos para isso. Sei que você vai ficar triste, pois a gente sempre quer fazer o melhor, mas as vezes isso acontece. Pegue essas críticas e se possível, tente melhorar e atualizar no curso mesmo, caso seja inviável, já deixe anotado para não repetir num próximo curso.\n- `Mil xingamentos e reclamações infundadas`: nesses casos, a gente costuma ficar é puto ao invés de triste. O cara está reclamando coisas que não fazem sentido, muitas vezes a pessoa sequer viu o restante do curso. Nesses casos, tente se acalmar e então vá conversar educadamente com o aluno, muitas das vezes eles mesmos se arrependem do que disseram e mudam seus reviews.\n\n## Conclusão\n\nBom pessoal, espero que esse post seja interessante para vocês, mesmo que vocês não tenham interesse em criar um curso, mas para saberem como que funciona por trás. Existe muito trabalho até sair um curso fresquinho para vocês, mas é sempre um trabalho bem gratificante, quando a gente recebe mensagens de apoio e agradecimento.\n" }, { "path": "posts/como-criar-um-spinner-loader-com-css-puro-e-uma-div.md", "content": "---\nlayout: post\ndate: 2018-06-04T13:00:00.000Z\ntitle: Como criar um loader com CSS puro e uma div\ndescription: Todos nós já tivemos que usar um loader na vida, aprenda a criar o\n seu do zero com pouquíssimas linhas de código.\nmain-class: css\ntags:\n - video\n - css\n - frontend\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, seguindo a mesma onda dos outros posts, eu acabei criando uma nova série chamada [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), que é onde eu vou estar jogando esses posts com dicas simples, porém utéis para a gente.\n\nE o post de hoje é para mostrar como se criar um spinner loader com **uma div** e só **10 linhas** de CSS. Bom, segue o vídeo embaixo e o código, como tem sido nesses posts.\n\nSe você quiser ver funcionando, aqui [está o link](https://labs.willianjusten.com.br/spinner-loader/).\n\n## Video\n\n\n\n## Código\n\nPara fazer esse loader, vamos utilizar só a `div.spinner` e iremos usar o `border` para criar o entorno do nosso loader. O \"pulo do gato\" é que mudamos a cor de só um lado do quadrado, assim fará nosso efeito desejado, para isso, usaremos o `border-left-color`. Ao final é só usar o `border-radius:50%` para transformar num círculo:\n\n```css\n.spinner {\n border: 8px solid rgba(0, 0, 0, 0.1);\n border-left-color: #22a6b3;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1s linear infinite;\n}\n```\n\nComo podem ver, ainda temos o `animation` ali, que vai ser o responsável por criar a animação, que é basicamente um `keyframes` fazendo uma rotação de 360 graus infinitamente:\n\n```css\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n```\n\nSe você quiser, o código também está lá no [Github](https://github.com/willianjusten/labs/blob/gh-pages/spinner-loader/index.html).\n\n## Conclusão\n\nEspero que tenham curtido esse post/vídeo e lembrando, por favor, compartilhem em todas as redes sociais que puderem, manda naquele slack/telegram que vocês participam, quanto mais gente seguinte lá no [YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), melhor! =)\n" }, { "path": "posts/como-deixar-a-imagem-da-webcam-redonda-no-obs.md", "content": "---\nlayout: post\ndate: 2021-03-06T14:15:30.000Z\ntitle: Como deixar a imagem da webcam redonda no OBS\ndescription: Como utilizar filtro e máscara para ter seu vídeo mais legal\nmain-class: misc\ntags:\n - dicas\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Máscara!\n\nBom, a ideia dessas dicas rápidas vai do código a qualquer outra coisa. Um aluno me perguntou como eu fazia para ter minha imagem redonda nos meus vídeos, então porque não ensinar isso?\n\nBom, eu utilizo o [OBS Studio](https://obsproject.com/), que além de ser um projeto opensource, ele funciona em qualquer Sistema Operacional, o que facilitou minha vida, já que eu uso muito Mac OS e Windows.\n\nPara fazer esse círculo, a única coisa que você precisa fazer é adicionar um filtro de máscara e utilizar uma máscara [como essa aqui](https://github.com/willianjusten/willianjusten.com.br/blob/b64731bae5466f63f9c7a7d34d607ee812ce3006/static/assets/img/mask.png), onde ela basicamente remove tudo que é preto, deixa só a bolinha redonda.\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/como-fazer-seu-site-funcionar-offline-com-pwa.md", "content": "---\nlayout: post\ndate: 2018-03-26T06:20:50.000Z\ntitle: Como fazer seu site funcionar offline com PWA\ndescription: O passo-a-passo de como criar um site PWA que funciona até offline.\nmain-class: dev\ntags:\n - performance\n - pwa\n - serviceworker\ncategories:\n - Performance Web\n---\n## Índice\n\n- [Introdução](#intro)\n- [O que é Progressive Web App](#o-que-e-pwa)\n- [O checklist para se ter um PWA](#checklist-pwa)\n - [Use HTTPS e redirecione sempre para HTTPS](#https)\n - [Tenha um site Responsivo e Rápido](#responsivo)\n - [Tenha uma cor tema no site](#tema)\n - [Tenha um Manifesto com informações do seu site](#manifest)\n - [Registre um Service Worker e responda 200 quando offline](#register)\n- [O que é um Service Worker?](#o-que-e-service-worker)\n - [Informações Importantes do Service Worker](#informacoes-importantes)\n - [Detectando se o Browser suporta](#detectando)\n - [Registrando](#registrando)\n - [Ciclo de Vida](#ciclo-de-vida)\n - [Install](#install)\n - [Activate](#activate)\n - [Fetch](#fetch)\n- [Conclusão](#conclusao)\n\n

Introdução

\n\nFala pessoal, continuando a série sobre [Performance Web](https://willianjusten.com.br/series/#performance-web), hoje vou falar sobre um assunto que tem bombado bastante, principalmente pelo suporte que a Google dá para essa iniciativa, que são os Progressive Web Apps, mais conhecido como PWA. Você vai ver que é tãaaaao fácil transformar seu site num PWA que nem vai acreditar que não tinha feito até hoje.\n\nEnquanto vou escrevendo, vou ouvindo uma playlist no Spotify chamada [Relax & Unwind](https://open.spotify.com/user/spotify/playlist/37i9dQZF1DWU0ScTcjJBdj?si=MYwbFh_iQTOIlmYVfHGmaQ), é bem calminha e está sendo útil para mim hoje.\n\nA ideia desse post é fazer uma pequena introdução sobre o conceito e os passos para fazer no seu site. Como é um assunto bem amplo, eu vou colocar vários links ao decorrer do post, para você ver mais a fundo os detalhes também. Mesmo assim o post deve ficar um pouquinho grandinho, mas não tenha preguiça não xD\n\n

O que é Progressive Web App?

\n\nAqui tem o link oficial da [Google sobre PWA](https://developers.google.com/web/progressive-web-apps/), mas podemos resumir em:\n\n> Progressive Web Apps são experiências que combinam o melhor da Web e o melhor dos aplicativos.\n\nE para ser considerado um PWA, ele precisa seguir os seguintes requisitos:\n\n* **Progressivo** - Funciona para qualquer usuário, independentemente do navegador escolhido, pois é criado com aprimoramento progressivo como princípio fundamental.\n* **Responsivo** - Se adequa a qualquer formato: desktop, celular, tablet ou o que for inventado a seguir.\n* **Independente de conectividade** - Aprimorado com service workers para trabalhar off-line ou em redes de baixa qualidade.\n* **Semelhante a aplicativos** - Parece com aplicativos para os usuários, com interações e navegação de estilo de aplicativos, pois é compilado no modelo de shell de aplicativo.\n* **Atual** - Sempre atualizado graças ao processo de atualização do service worker.\n* **Seguro** - Fornecido via HTTPS para evitar invasões e garantir que o conteúdo não seja adulterado.\n* **Descobrível** - Pode ser identificado como \"aplicativo\" graças aos manifestos W3C e ao escopo de registro do service worker, que permitem que os mecanismos de pesquisa os encontrem.\n* **Reenvolvente** - Facilita o reengajamento com recursos como notificações push.\n* **Instalável** - Permite que os usuários \"guardem\" os aplicativos mais úteis em suas telas iniciais sem precisar acessar uma loja de aplicativos.\n* **Linkável** - Compartilhe facilmente por URL, não requer instalação complexa.\n\nAí você pode ouvir algo como:\n\n> \"Nossa, tudo isso? Deve ser difícil para caramba fazer isso! Vou fazer não.\" - Sobrinho\n\nMas fique tranquilo, segue o post que eu vou explicar o passo-a-passo e é mais fácil do que você imagina.\n\n

O checklist para se ter um PWA

\n\nA Google criou uma [checklist para ter um PWA](https://developers.google.com/web/progressive-web-apps/checklist) que diz o mínimo necessário para ser considerado um PWA e também algumas coisas a mais que podem ser interessantes.\n\nE o Lighthouse, que é aquela ferramenta que vimos [nesse post](https://willianjusten.com.br/medindo-performance-do-seu-site-com-lighthouse/) usa essa checklist para analisar seu site para ver se ele está de acordo ou não. Vai ser através dessa lista que iremos partir =D\n\n

1 - Use HTTPS e redirecione sempre para HTTPS

\n\nO HTTPS é uma implementação do protocolo HTTP já conhecido, sobre uma camada adicional de segurança que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam transmitidos por meio de uma conexão criptografada e também é feita uma verificação de autenticidade do servidor e do cliente por meio de certificados digitais.\n\nSe você estiver usando o Github Pages, eu escrevi [um post ensinando](https://willianjusten.com.br/https-no-github-pages-com-custom-domain/) como fazer isso. Se você usa outro servidor, verifique como habilitar o SSL no seu domínio, isso é uma regra **obrigatória**. E, por favor, lembre de habilitar o redirecionamento 301 de `http` para `https`, senão as pessoas vão acabar podendo acessar através dos 2 protocolos e a Google pode acabar até punindo por considerar conteúdo copiado.\n\n

2 - Tenha um site Responsivo e Rápido

\n\nSe a ideia é dar uma interação como se fosse de um app, isso é uma regra mais que fundamental. E dentro dela, não se esqueça de definir a meta tag correta para a viewport:\n\n```html\n\n```\n\nSobre performance, só ficar ligado na série [Performance Web](https://willianjusten.com.br/series/#performance-web) e seguir as dicas que o seu site com certeza irá passar.\n\n

3 - Tenha uma cor tema no site

\n\nEu escrevi um post sobre essa [Theme Color](https://willianjusten.com.br/theme-color-android-lollipop/) lá em 2015, na época era meio que uma novidade para quem usava Android Lollipop, mas hoje funciona em todos os Androids atuais e também é uma regra. E para fazer isso é só adicionar essa meta tag:\n\n```html\n\n```\n\n

4 - Tenha um Manifesto com informações do seu site

\n\nO que significa isso? É um arquivo chamado `manifest.json` que vai conter informações relevantes do seu site, permitindo que o browser entenda que seu site é um PWA e vai inclusive habilitar uma mensagem para o usuário para que ele possa instalar o site na home do celular, o que faz com o site fique com um visual igual de um app mesmo.\n\nE como esse `manifest.json` se parece? Segue abaixo o exemplo do meu blog (sem todos os ícones):\n\n```js\n{\n \"name\": \"Willian Justen Blog\",\n \"short_name\": \"WJusten\",\n \"theme_color\": \"#005f97\",\n \"background_color\": \"#005f97\",\n \"display\": \"standalone\",\n \"scope\": \"/\",\n \"start_url\": \"/?utm_source=homescreen\",\n \"lang\": \"pt-BR\",\n \"orientation\": \"any\",\n \"icons\": [\n {\n \"src\": \"/assets/img/icons/favicon-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ]\n}\n```\n\nEsse `manifest.json` possui algumas regras muito importantes que são:\n\n* O `short_name` não pode exceder 12 letras, pois é o nome que vai aparecer abaixo do ícone do app.\n* O `background_color` é obrigatório.\n* O array de `icons` precisa ter pelo menos um ícone de `512x512`.\n* O ícone precisa ser em `png`.\n\nExistem sites que fazem a criação para você:\n\n* [App Manifest](https://app-manifest.firebaseapp.com/)\n* [PWA Builder](https://preview.pwabuilder.com/generate)\n\nEssa configuração serve para 2 momentos. O primeiro é para a criação do ícone do site igualzinho de um app. E o segundo momento é no momento de abertura do site, que vai mostrar uma splash screen se tudo estiver configurado corretamente.\n\nRepare que eu tenho também a propriedade `\"start_url\": \"/?utm_source=homescreen\"`, que serve para podermos verificar através do nosso Analytics se a página foi aberta via app, o que é bem útil para quem é doido de dados, como eu.\n\nCom o `manifest.json` criado corretamente, não esqueça de adicionar no `head` do projeto a seguinte linha:\n\n```html\n\n```\n\nTudo estando certinho, se você tiver visitantes assíduos, é possível que eles vejam uma telinha como a seguinte:\n\n![Tela do meu blog mostrando para instalar o site como app](/assets/img/manifest.jpg)\n\n

5 - Registre um Service Worker e responda 200 quando offline

\n\nÉ aqui onde começa a brincadeira legal e que representa o título! E para essa parte, eu vou separar um pouquinho, pois é um assunto com mais detalhes.\n\n

O que é um Service Worker?

\n\nUm **Service Worker** é um script que seu navegador executa em segundo plano, separado da página da Web, possibilitando recursos que não precisam de uma página da Web ou de interação do usuário. Atualmente, os service workers já incluem recursos como notificações push e sincronização em segundo plano. No futuro, os service workers permitirão outras ações como sincronização periódica ou geolocalização. O que mais vamos discutir aqui é a capacidade de interceptar e tratar solicitações de rede, respondendo com um cache caso tivermos.\n\nEu vou explicar algumas coisas de forma básica, mas tem um curso **MARAVILHOSO** e **GRÁTIS** lá na [Udacity](https://br.udacity.com/course/offline-web-applications--ud899) feito por nada menos que o Jake Archibald. Sério, se você se interessou pelo assunto, faz o curso, ele é rápido, leve e muito didático!\n\n

Informações Importantes do Service Worker

\n\n* O Service Worker funciona numa thread separada no browser, com isso não tem acesso ao DOM.\n* O arquivo do SW precisa sempre ter o mesmo nome e ficar sempre no mesmo lugar. Caso contrário, vai gerar uma duplicação de Service Worker.\n* O arquivo do SW não pode cachear de forma alguma, senão ele pode agir contra você e deixar um cache infinito na máquina do usuário. Porém não use `sw.js?hash_aqui`, pois será considerado outro SW. O certo é dentro do seu servidor você definir o max-age e colocar para sempre carregar de novo, sem cache.\n* Fique atento ao ciclo de vida do SW, ao mesmo tempo que ele ajuda, também pode atrapalhar. Lembre sempre de deletar o cache antigo quando atualizar algo no site.\n\nExiste esse [post](https://jakearchibald.com/2014/offline-cookbook/) do Jake Archibald que é bem completo e explica sobre os ciclos de forma bem detalhada. Abaixo eu vou mostrar de forma simples e rápida como construir seu Service Worker do zero.\n\n

Detectando se o Browser suporta

\n\nO site [Is Service Worker Ready?](https://jakearchibald.github.io/isserviceworkerready/) mostra os browsers que já suportam e quais coisas que já funcionam. E como você pode ver, nem todos os browsers suportam 100% ainda, então, nós fazemos um snippet bem simples.\n\n```js\nif ('serviceWorker' in navigator) {\n console.log('ServiceWorker é suportado, vamos usar!');\n} else {\n console.log('ServiceWorker não é suportado.');\n}\n```\n\n

Registrando

\n\nCom o snippet dali de cima que já faz a verificação, precisamos registrar o nosso arquivo de Service Worker para ele poder começar a funcionar. Coloque esse registro no `head` do site, pois é muito importante inicializar o worker antes de tudo.\n\n```js\nif ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('sw.js')\n .then(reg => console.info('registered sw', reg))\n .catch(err => console.error('error registering sw', err));\n}\n```\n\n

Ciclo de Vida

\n\nO Service Worker trabalha numa estrutura já determinada de ciclo de vida. Entendendo como funciona cada evento e suas respostas é a melhor forma de atualizar e cachear os arquivos.\n\nO Service Worker possui então as seguintes etapas:\n\n* install\n* activate\n* fetch\n* message\n* sync\n* push\n\nEu vou cobrir somente os 3 primeiros eventos, que são os necessários para fazer nossas páginas funcionarem em modo offline. Então, mãos na massa, vamos criar o arquivo `sw.js` na raiz do nosso site e ir preenchendo.\n\n

Install

\n\nO evento de `install` é ativado somente uma vez, quando você registra a versão do `sw.js` pela primeira vez. Se o `sw.js` muda uma única coisa, o `install` é chamado novamente. Use esse evento para preparar tudo que seja necessário. Abaixo eu vou mostrar um exemplo com alguns detalhes que fiz para o meu caso, que é em Jekyll:\n\n```js\n---\nlayout: null\n---\n\nconst staticCacheName = 'willian-justen-{{ site.time | date: \"%Y-%m-%d-%H-%M\" }}';\n\nconst filesToCache = [\n { % for page in site.pages_to_cache % }\n '{ { page } }',\n { % endfor % }\n { % for post in site.posts limit: 6 % }\n '{ { post.url } }',\n { % endfor % }\n { % for asset in site.files_to_cache % }\n '{ { asset } }',\n { % endfor % }\n];\n\n// Cache on install\nthis.addEventListener(\"install\", event => {\n this.skipWaiting();\n\n event.waitUntil(\n caches.open(staticCacheName)\n .then(cache => {\n return cache.addAll(filesToCache);\n })\n )\n});\n```\n\nBom, primeiro de tudo, eu defini um front matter ali acima como `layout: null`, para que eu pudesse utilizar o liquid template e chamar algumas variáveis do meu Jekyll.\n\nE aí entram coisas importantes em qualquer site, não só sites em Jekyll. Precisamos definir uma variável para nomear o nosso cache. Que é o caso do `staticCacheName`. Como você pode ver, eu passo o tempo de quando o site foi gerado, o que me garante que é um valor único e para aquele build. Precisamos disso, pois se o valor não mudar, o Service Worker nunca irá atualizar o cache, caso a gente atualize.\n\nDefinido o nome do cache, precisamos definir quais os arquivos que vamos salvar! No meu blog, eu defino algumas variáveis no meu [_config.yml](https://github.com/willianjusten/willianjusten.com.br/blob/master/_config.yml) e também itero para pegar os últimos 6 posts do meu blog.\n\n

Activate

\n\nO evento `activate` é ativado somente uma vez também, quando uma nova versão do `sw.js` foi instalado e não tem nenhuma versão anterior rodando em outra aba. Então você basicamente utiliza esse evento para deletar coisas antigas de versões anteriores.\n\n```js\n// Clear cache on activate\nthis.addEventListener('activate', event => {\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames\n .filter(cacheName => (cacheName.startsWith('willian-justen-')))\n .filter(cacheName => (cacheName !== staticCacheName))\n .map(cacheName => caches.delete(cacheName))\n );\n })\n );\n});\n```\n\nVerifique que eu filtro o cache para ver se ele inicia com `willian-justen-` que é o que eu defini no nome do meu cache e também se o nome é diferente. Caso o nome seja diferente, eu deleto os arquivos antigos. Isso é **muito** importante, cache é a coisa mais braba do Service Worker, se você não deletar corretamente, o usuário vai estar vendo coisas velhas.\n\n

Fetch

\n\nO evento de `fetch` é ativado toda vez que uma página é requisitada.\n\n```js\n// Serve from Cache\nthis.addEventListener(\"fetch\", event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n return response || fetch(event.request);\n })\n .catch(() => {\n return caches.match('/offline/index.html');\n })\n )\n});\n```\n\nO `fetch` irá verificar se o arquivo requisitado contém no cache e caso sim, ele retorna o arquivo direto do cache. E uma coisa muito legal é que se o arquivo não existir, você pode redirecionar para alguma página, no meu caso eu criei uma [página offline](https://willianjusten.com.br/offline/), onde tem um joguinho e uma lista para os 6 posts salvos. Você pode clicar no link acima para ver a página ou ficar offline e tentar abrir alguma página bem antiga, como [essa aqui](https://willianjusten.com.br/making-of-parte-1/). E abaixo segue a imagem da página:\n\n![Página Offline com um jogo e uma lista de posts](/assets/img/offline-page.png)\n\nYeeeey! Agora nosso site salva algumas páginas e também tem redirect para um joguinho super legal caso não tenha aquele arquivo salvo! Se quiser, aqui está [o arquivo completo](https://github.com/willianjusten/willianjusten.com.br/blob/master/sw.js) do `sw.js`.\n\n

Conclusão

\n\nÉ isso galera! Espero que tenham curtido o post, eu tentei fazer algo mais simples e rápido, mas não sem passar os passos necessários para você ter sua PWA. Espero que se divirtam com o [joguinho](https://willianjusten.com.br/offline/) também! Nos próximos posts irei falar um pouco sobre o [Netlify](https://www.netlify.com/), não, não é aquela plataforma de séries que você assiste todo dia, mas é algo tão legal quanto!\n" }, { "path": "posts/como-melhorar-meu-seo.md", "content": "---\nlayout: post\ndate: 2015-01-09T23:21:53.000Z\ntitle: Como melhorar meu SEO?\ndescription: Algumas dicas para fazer com que seu site ou blog seja melhor\n indexado pelos buscadores.\nmain-class: dev\ntags:\n - seo\n - tutorial\n---\n\n![SEO](/assets/img/seo/seo.jpg)\n\n## O que é SEO?\n\nSearch Engine Optimization ou SEO é um conjunto de estratégias e métodos para melhorar o posicionamento de páginas da internet nos mecanismos de buscas, como o Google e Bing.\n\n## Qual a importância?\n\nEstar [bem posicionado](http://neilpatel.com/br/2016/01/15/o-guia-rapido-e-pratico-para-seo-on-page/) nos mecanismos de busca lhe permite ganhar mais acessos e com isso divulgar mais o seu produto.\n\n>Ahhhh é só para isso? Não preciso disso não, eu quero fazer é um brógui.\n\nQuando eu disse produto, pode ser qualquer coisa, pode ser uma loja de e-commerce em que você realmente vende produtos. Pode ser um site de agência em que você vende um serviço. Pode ser um blog também, onde você divulga no intuito de compartilhar seus pensamentos e conhecimento. Enfim, se você tem um site, você deve querer que ele seja visto, então é importante que você faça um trabalho legal de SEO.\n\n## E como faço esse tal de SEO?\n\nBom, o assunto SEO é gigantesco, existem livros, cursos e inclusive profissionais que trabalham somente com isso. Vou passar aqui umas dicas importantes, que podem ajudar bastante:\n\n### 1) Faça o uso correto dos Headers\n\nNão utilize as `heading tags` (h1,h2,h3,h4,h5,h6) somente para efeito visual, os robôs de buscas não identificam css, eles identificam peso informativo. Portanto, `h1` é o que possui maior peso e `h6` é o de menor peso, tenha sempre um heading para cada `section` e distribua corretamente suas informações.\n\n### 2) Tenha titles diferenciados\n\nA tag `title` é basicamente o que vai marcar o seu site no sistema de busca, é aquele link azul escrito grandão no Google. Portanto, defina bem o título de acordo com a página, nada de repetir o nome do seu site em todas as páginas. O Google só vai mostrar títulos de 50-60 caracteres, então evite ter títulos cortados, isso irá fazer com que a pessoa não clique.\n\n### 3) O Conteúdo é TUDO\n\nSim, o conteúdo é a chave do seu site crescer ou afundar. Não adianta você ter um site mega preparado no SEO e um conteúdo fraco, pois as pessoas não irão se interessar e com isso, você vai caindo rapidamente no ranking. Sem contar que o próprio robô de busca irá ver se seu conteúdo é relevante de acordo com o título e a pesquisa do usuário.\n\n### 4) Utilize URL's amigáveis\n\nA URL é uma das primeiras análises que os mecanismos de busca fazem, se a sua url possuir palavras-chaves de acordo com a pesquisa do usuário, já irá ganhar alguns pontos. Outra questão é que url's amigáveis são mais fáceis de serem compartilhadas e lembradas pelo usuário. Afinal de contas, é muito mais fácil você lembrar de algo como: `www.site.com/panela-de-aluminio/` do que `www.site.com/1247657939`.\n\n### 5) Otimize a página em torno da palavra-chave\n\nNão existe mais a ideia de se trabalhar só com palavras-chaves igual antigamente. Mas ainda é importante que você saiba a principal \"ideia\" do que quer passar. Se você quer falar sobre SEO, utilize um título que inclua essa palavra, assim será mais fácil de indexar e do usuário também se interessar no resto do conteúdo.\n\n### 6) Adicione alt na imagem\n\nNão é para colocar uma simples palavra como alt, descreva aquela imagem corretamente, isso também irá influenciar no crawler quando estiver lendo\n\n### 7) Se mantenha atualizado\n\nSites que se mantém sempre atualizados, acabam ganhando relevância para os mecanismos de buscas e para os usuários. Afinal nenhum usuário vai ficar acessando site com layouts de 2000 ou que o conteúdo não seja atualizado com uma frequência mínima.\n\n### 8) Preste atenção em links canônicos\n\nDefina seu domínio principal com `www` ou sem e então utilize um 301 redirect para o outro. Senão você poderá cair como conteúdo duplicado.\n\n### 9) Cuidado com páginas que utilizam Flash, Ajax e Iframes\n\nOs mecanismos de busca tem evoluído bastante quanto a isso, mas ainda possuem certas deficiências nas leituras de páginas com esse tipo de conteúdo, se você preza o SEO acima de certas funções, reveja seu projeto.\n\n### 10) Faça um site fácil\n\nComo assim? O seu site precisa ser acessível a todos os usuários, quando mais fácil de ser utilizado, mais ele pode ser compartilhado e com isso ganhe popularidade.\n\n### 11) Use links absolutos\n\nLinks absolutos permitem que o mecanismo de busca indexe ou links ligados aquela página.\n\n### 12) Utilize um sitemap\n\nSitemaps facilitam o trabalho dos mecanismos de busca, já que eles irão saber qual o esqueleto do site e irão ler conforme encontrado ali. Outro motivo é que isso facilita aos usuários acharem conteúdos um pouco mais \"escondidos\" a primeira vista.\n\n### 13) Utilize redes sociais\n\nPraticamente todo mundo usa redes sociais hoje em dia, então criar o site trabalhando nesse aspecto, irá com certeza melhorar o número de pageviews recebidas.\n\n### 14) Crie um site responsivo\n\nCom a última atualização da Google, os sites mobile agora ganharam ainda mais relevância, inclusive agora recebendo uma \"tag\" para avisar se o site é mobile ou não.\n\n### 15) Melhore a velocidade do seu site\n\nA Google tem trabalhado cada vez mais com a experiência do usuário, um site que carrega rápido é fator importantíssimo.\n\n### 16) Trabalhe com dados estruturados\n\nDados estruturados permitem uma maior organização de seu conteúdo e na minha opinião, ainda tem muito futuro.\n\nSegue um link bem legal da google: [Introduction to Data Highlighter](https://www.youtube.com/watch?v=WrEJds3QeTw)\n\n### 17) Crie uma rede\n\nÉ aquele famoso \"me segue que eu sigo de volta\". Se você faz um link de alguém, talvez você seja linkado também, isso acaba causando um crescimento no número de backlinks, o que é bastante importante.\n\n### Não pare por aqui!\n\nComo eu disse, existem várias informações por aí sobre SEO, aqui eu falei beeem pouquinho, cabe a você pesquisar mais sobre todo o resto. Se você entende de SEO e tem alguma dica, fala nos comentários, será muito legal =)\n\n\n\n\n\n\n" }, { "path": "posts/como-mostrar-trechos-de-codigo-num-blog-com-nextjs.md", "content": "---\nlayout: post\ndate: 2021-09-16T14:16:42.000Z\ntitle: Como mostrar trechos de código num blog com NextJS\ndescription: Aprenda a usar um syntax highlighter para mostrar trechos de código\n mais bonitos no seu blog\nmain-class: js\ntags:\n - nextjs\ncategories:\n - NextJS\n---\n## Introdução\n\nContinuando com os [posts sobre NextJS](https://willianjusten.com.br/series#nextjs), o de hoje vai ser super rápido, mas vivem me perguntando. Como fazer para colocar os trechos de código no blog para ficarem bonitinhos com a sintaxe colorida. Vocês vão ver que é molezinha!\n\nEnquanto eu escrevo esse post, vou ouvindo outra banda que gosto demais que é [Alice in Chains](https://open.spotify.com/artist/64tNsm6TnZe2zpcMVMOoHL?si=F1VYqFDsR6e7-6xHf2uRDg&dl_branch=1), esse post vai ser tão pequeno, que se depender não vai dar para ouvir nem uma música completa.\n\n## Instalando e configurando\n\nPara poder ter os blocos de código bonitos vamos usar um **Syntax Highlighter** chamado [PrismJS](https://prismjs.com/), que é super simples de usar e funciona para praticamente todas as linguagens.\n\nPara isso você primeiro vai ter que instalar o pacote e também para nos facilitar, também vamos instalar um plugin do babel para facilitar a carregar só as linguagens que desejamos:\n\n```bash\nyarn add prismjs babel-plugin-prismjs\n```\n\nDepois de instalado, podemos configurar o pacote no nosso `.babelrc`, algo como por exemplo:\n\n```json\n{\n \"plugins\": [\n [\"prismjs\", {\n \"languages\": [\"javascript\", \"css\", \"markup\"],\n \"plugins\": [\"line-numbers\"],\n \"theme\": \"twilight\",\n \"css\": true\n }]\n ]\n}\n```\n\nPara mais detalhes e configurações, vale olhar o [repositório oficial](https://github.com/mAAdhaTTah/babel-plugin-prismjs).\n\n## Fazendo funcionar\n\nDepois de instalado o Prism e o plugin do babel, basta ir na página/componente de Post para configurar. É muito importante que você configure **somente** na página do Post para que você não carregue coisas desnecessárias em páginas que não forem utilizar o highlighter.\n\nPara configurar, é só importar e mandar carregar:\n\n```jsx\nimport { useEffect } from 'react'\nimport Prism from 'prismjs'\n\nuseEffect(() => {\n Prism.highlightAll()\n}, [post]) // note que eu atualizo sempre que o post muda já que meu layout é fixo\n```\n\nE aí sempre que for escrever um bloco de código, só lembrar de usar a sintaxe padrão do markdown que é usar 3 vezes o símbolo de crase seguido da linguagem que vai escrever e fechando com as mesmas 3 crases:\n\n```markdown\n\n` ` `js\n\n` ` `\n\n```\n\n## Conclusão\n\nComo falei, foi um post super super rápido e prático, mas que funciona super bem. Aí vai caber a você usar um tema padrão e/ou editar suas próprias cores, assim como que plugins quiser usar também, mas a estrutura será sempre a mesma. Se você curtiu esse post, fica atento nos [posts sobre NextJS](https://willianjusten.com.br/series#nextjs) que eu tenho feito." }, { "path": "posts/como-se-manter-atualizado-no-frontend.md", "content": "---\nlayout: post\ndate: 2016-09-03T18:06:13.000Z\ntitle: Como se manter atualizado no Frontend\ndescription: O mundo do Frontend muda muito o tempo todo e fica difícil de\n acompanhar toda essa mudança, aqui vão umas dicas para ajudar bastante nisso.\nmain-class: dev\ntags:\n - frontend\n - tip\n - eventos\ncategories: null\n---\n\n## Índice\n\n- [Introdução](#intro)\n- [Se atualizando através de blogs](#blogs)\n - [Feedly](#feedly)\n - [Panda](#panda)\n - [Pocket](#pocket)\n - [Links dos blogs](#links-blogs)\n- [Reddit](#reddit)\n- [Weekly](#weekly)\n- [Youtube](#youtube)\n- [E eventos?](#eventos)\n - [Meetup](#meetup)\n - [Eventos - Front-end Brasil](#eventos-frontendbr)\n- [Seguindo pessoas boas](#follow)\n - [Twitter](#twitter)\n - [Github](#github)\n- [Conclusão](#conclusao)\n\n

Introdução

\n\nFaaala pessoal, o post de hoje é uma dúvida comum de todo mundo (inclusive minha), afinal, como se manter atualizado nessa bagunça que é o mundo de Frontend? Todo dia lança algo novo, e se você não souber seguir os lugares certos, você acaba nem sabendo o que aconteceu ou deixou de acontecer.\n\n**Primeiro aviso**, a ideia do post não é que você saia correndo pelos hypes e modinhas que aparecem todo dia no nosso mundo, a ideia é você saber melhor quando um post de certo blog que você segue lançou tipo o meu ou quando vai rolar um eventinho bacana e talz, enfim, serão várias dicas de apps e sites que poderão facilitar e muito a sua vida!\n\nEu vou dividir cada tópico em 2 pedaços, um para falar das ferramentas/apps/sites e outro para vários links que vocês deveriam seguir. Nessa segunda parte, eu vou pedir muito a ajuda de vocês! Sim, quero deixar esse post vivo, e para isso, é só vocês enviarem links maneiros lá no [github desse blog](https://github.com/willianjusten/willianjusten.github.io), seja em forma de issue ou até [PR nesse post](https://github.com/willianjusten/willianjusten.com.br/blob/master/posts/2016-09-03-como-se-manter-atualizado-no-frontend.md) (mais legal ainda =p), com coisas que vocês acham que todos deveriam ver/seguir.\n\nA trilha sonora do post de hoje é uma banda sueca, que faz um som instrumental de muito boa qualidade e se chama [pg.lost](https://open.spotify.com/artist/6YK58h9BCYpFNv10fsMwoS), talvez um dos melhores sons dos últimos tempos que eu tenha ouvido.\n\n

Se atualizando através de blogs

\n\nExistem vários e vários blogs maneiros por aí, mas a frequência de posts de cada um deles pode ser bem variada. E aí, como saber que lançou um post novo ou não? Bom, tem gente que é maluca, coloca o blog nos favoritos e abre de vez em quando to falando de você mesmo (brincadeirinha). Mas realmente tem muita gente que faz isso, mas e se for seguir milhares de blogs? Não dá certo né? Então existem algumas coisinhas que podem te salvar.\n\n

Feedly

\n\n![Tela de abertura do Feedly](/assets/img/up-to-date/feedly-1.png)\n\nAtravés do [Feedly](https://feedly.com/) você consegue marcar quais blogs quer seguir e ele atualiza para você sempre que tiver alguma novidade, ele é basicamente o que o finado Google Reader fazia. Você só precisa se cadastrar nele, usando o Google, Facebook ou Twitter e ele já libera uma interface para você ir cadastrando os blogs que deseja seguir. Ele é um agregador que funciona através do **RSS**, então é basicamente pegar o feed.xml do blog que você quiser e preencher lá.\n\nMas se você for ainda mais preguiçoso e não quer ficar acessando o feedly, existem extensões para o Chrome e Firefox que notificam quando algo novo saiu, o que facilita para caraaaamba!\n\n![Tela do notifieer do Feedly](/assets/img/up-to-date/feedly-5.png)\n\n- [Feedly Notifier Chrome](https://chrome.google.com/webstore/detail/feedly-notifier/egikgfbhipinieabdmcpigejkaomgjgb?hl=pt-BR)\n- [Feedly Notifier Firefox](https://addons.mozilla.org/pt-br/firefox/addon/feedly-notifier/)\n\n

Panda

\n\n![Tela do Panda](/assets/img/up-to-date/panda-1.png)\n\nOutra parada genial, que segue um pouco na linha do Feedly, para armazenar links de blogs/sites é o [Panda](http://usepanda.com/app/). Com o Panda, você consegue criar várias áreas para seguir e mostrar os blogs que você desejar, o legal que ele pode ser instalado no seu browser e funcionar sempre quando você abrir uma aba nova, então ao invés de sua nova aba ser branca ou inútil, tu já tem ali um monte de conteúdo maneiro! Eu uso muiiito para ver os novos sites da Awwwards já em miniaturas e também o Dribble. Vale muiito a pena!\n\n- [Panda News Chrome](https://chrome.google.com/webstore/detail/panda-hacker-news-dribbbl/jhiocdmmaannaccoofjfmjpbfkogmnap)\n\n

Pocket

\n\n![Tela de pesquisa do Pocket](/assets/img/up-to-date/pocket-1.png)\n\nE como fazer para ler tantos links legais? Bom, durante muito tempo, eu trabalhei distante de onde morava, então, ler no percurso casa-trabalho e trabalho-casa se tornou uma rotina. Só que como sabemos, nem sempre nosso 4G vai pegar bem, então uma forma legal é poder salvar os links mais interessantes para poder ler até mesmo offline e para isso, temos o [Pocket](https://getpocket.com), através dele você consegue salvar os posts e sincronizar com seu celular/tablet/computador. Outro recurso legal do Pocket é que você consegue colocar tags em cada link, então fica mais fácil de você procurar por determinado assunto e numa interface mais amigável também, bem melhor que a bagunça dos favoritos num é mesmo?\n\n\n\nExistem vários blogs, tanto brasileiros como estrangeiros, eu vou colocar alguns aqui e aí conto com a ajuda de vocês para fazer a lista crescer com referências maneiras hein! Acabei me lembrando que o Lfeh fez uma [lista bem maneira de alguns blogs](https://github.com/felipefialho/feed-list), vale a pena olhar também hein!\n\n#### Em inglês\n\n- [Codrops](http://tympanus.net/codrops/) - o melhor blog para buscar boas referências e tutoriais sobre coisas voadoras de front.\n- [Smashing Magazine](https://www.smashingmagazine.com/) - outro blog referência para front, com artigos sobre diversos assuntos, como performance, UX, novas metodologias.\n- [CSS Tricks](http://css-tricks.com/) - quem nunca caiu no CSS-tricks numa busca no Google? O blog tem de tudo, muitos tutoriais de CSS, SVG e JS.\n- [CSS Wizardry](https://csswizardry.com/) - blog do criador do ITCSS, tem bastante coisa sobre boas práticas de CSS.\n- [David Walsh](https://davidwalsh.name/) - esse cara escreve muito há anos, sempre com novas dicas sobre JS e coisas para desenvolvimento.\n- [Sara Soueidan Blog](https://sarasoueidan.com/blog/) - sou fã demais dessa mulher, a maior referência de SVG do mundo!\n- [A List Apart](http://alistapart.com/) - um blog escrito por várias autoridades de desenvolvimento.\n- [Sitepoint](https://www.sitepoint.com/) - como se entitulam um blog de desenvolvedores para desenvolvedores.\n- [Mozilla Hacks](https://hacks.mozilla.org/) - novidades da Mozilla para desenvolvedores web.\n- [Hacker News](https://news.ycombinator.com/) - páginas selecionadas diariamente com novidades sobre front-end e TI em geral.\n- [Design Modo](http://designmodo.com/) - desde inspiração e novidade sobre UI/UX até programação front-end.\n- [Developer Drive](http://www.developerdrive.com/) - blog com novidade e tutoriais sobre desenvolvimento web.\n- [Wes Bos](http://wesbos.com/) - blog do canadaense Wes Bos, criador de alguns cursos de muita qualidade e ta sempre trazendo coisas novas.\n\n#### Em português\n\n- [Esse blog lindo](https://willianjusten.com.br/) - um blog que de vez em quando escreve algo que presta =)\n- [Blog do Maujor](http://www.maujor.com/blog/) - como não falar dessa lenda? Muito material bom lá.\n- [Felipe Fialho Blog](https://www.felipefialho.com/blog/) - blog de um parceirão que tá sempre ajudando a comunidade de desenvolvimento, mas que vou dar um apertão de orelha para escrever mais =p\n- [Da2k](http://blog.da2k.com.br/) - blog de outro amigão o Fernando Daciuk, com posts super completos de JS.\n- [UX Collective](https://brasil.uxdesign.cc/) - blog bem legal sobre usabilidade, user experience, design, tecnologia e comportamento.\n- [UI Lab](http://www.uilab.com.br/) - blog com novidades e dicas sobre usabilidade, user experience, design e user interface.\n\n

Reddit

\n\nO [reddit](https://www.reddit.com) é um agregador de links/notícias, quase que uma rede social para postar coisas de diversas categorias (os chamados [subreddits](https://www.reddit.com/subreddits/)) e, eventualmente, discutir sobre elas. Para desenvolvedores web, existem vários subreddits interessantes:\n\n- [/r/programming](https://www.reddit.com/r/programming) - links mais gerais sobre programação\n- [/r/webdev](https://www.reddit.com/r/webdev/) - links específicos sobre desenvolvimento web\n- [/r/Frontend](https://www.reddit.com/r/Frontend/) - links específicos sobre front-end\n- [/r/css](https://www.reddit.com/r/css/) - links específicos sobre CSS\n- [/r/javascript](https://www.reddit.com/r/javascript/) - links específicos sobre JavaScript\n\nÉ possível ainda criar uma coleção pessoal (chamado de multireddit), onde todas as coisas postadas nos subreddits selecionados passam a aparecer nessa coleção.\n\n

Weekly

\n\nWeekly é um conjunto de links, como o nome já diz, semanal. Dos trocentos links que são lançados por dia, é feita uma curadoria pescando os links mais importantes daquela semana. Então se você tiver preguiça de fazer essa separação você mesmo, uma weekly pode ajudar bastante. E vão aqui algumas que eu sigo:\n\n\n\n- [BrazilJS Weekly](https://braziljs.org/#weekly) - a weekly mais famosa de desenvolvimento no Brasil.\n- [Web Design Weekly](https://web-design-weekly.com/) - muitos artigos sobre desenvolvimento em geral.\n- [Frontend Focus](https://frontendfoc.us/) - antiga html5weekly, focando em bastante conteúdo de canvas, webGL, etc.\n- [Javascript Weekly](http://javascriptweekly.com/) - weekly totalmente focada em JS.\n- [Web Tools Weekly](http://webtoolsweekly.com/) - já pensou numa newsletter falando sobre ferramentas para te ajudar\n- [Umaar Hansa Dev Tips](https://umaar.com/dev-tips/) - Uma weekly para acompanhar as novas features e recursos do Devtools do Chrome\n- [Accessibility Weekly](http://a11yweekly.com/) - Uma weekly focado em recursos de acessibilidade e diversas dicas sobre o assunto.\n- [Node Weekly](http://nodeweekly.com/) - Weekly com as principais novidades sobre Node.js.\n- [X-Team Weekly](https://x-team.com) - Weekly do X-team, com conteúdo além de links técnicos, como produtividade e inspiração.\n- [Ruby Weekly](http://rubyweekly.com/) - Ruby Weekly com o melhor do ruby.\n\n

Youtube

\n\nO Youtube é uma plataforma que oferece uma grande variedade de vídeos, principalmente para desenvolvedores, há muitos tutoriais e cursos que ajudam os desenvolvedores a se manterem atualizados. Segue alguns que podem ajudar nessa missão:\n\n#### Em inglês\n\n- [thenewboston](https://www.youtube.com/user/thenewboston/videos)\n- [codigofacilito](https://www.youtube.com/user/codigofacilito/videos)\n- [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/videos)\n- [LearnCode Academy](https://www.youtube.com/user/learncodeacademy/videos)\n- [Nic Raboy](https://www.youtube.com/user/nicraboy/videos)\n- [DevTips](https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ)\n- [Codecourse](https://www.youtube.com/channel/UCpOIUW62tnJTtpWFABxWZ8g)\n- [CSS-TRICKS](https://www.youtube.com/channel/UCADyUOnhyEoQqrw_RrsGleA)\n- [Funfunfunction](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q)\n- [Level Up Tuts](https://www.youtube.com/user/LevelUpTuts/)\n\n#### Em português\n\n- [Rodrigo Branas](https://www.youtube.com/channel/UCkqOofjb7nl6V8vXrIbGtiQ)\n- [Webschool JavaScript](https://www.youtube.com/channel/UCKdo1RaF8gzfhvkOdZv_ojg)\n- [Loiane Groner](https://www.youtube.com/channel/UCqQn92noBhY9VKQy4xCHPsg)\n- [Curso em Vídeo](https://www.youtube.com/channel/UCrWvhVmt0Qac3HgsjQK62FQ)\n- [BrazilJS](https://www.youtube.com/channel/UCnLdHOuue5i1O7TsH6oh07w)\n- [CSS Cast Show](https://www.youtube.com/channel/UC9d_htYmYYFUXB2vBKx4NgA)\n- [Gravento](https://www.youtube.com/channel/UCU_SZQAcN4IDs_RXY7iT4sg)\n- [Elcio Ferreira](https://www.youtube.com/channel/UCQj6o0dPVJd6yy16-49qIIg)\n- [Estevan Maito](https://www.youtube.com/channel/UCIUOmAsotrzdK8VsZuHfVHw)\n\n

E eventos?

\n\nEu costumo comparar eventos de Desenvolvimento com Pokemon, temos que capturar todos! piadinha infâme Mas é sério, eventos são uma das principais fontes para se atualizar, mas e como saber quais eventos estão para acontecer? Bom, existem dois excelentes =D\n\n

Meetup

\n\n![Tela do Meetup](/assets/img/up-to-date/meetup.png)\n\nO [Meetup](https://www.meetup.com) é definitivamente o mais famoso site/app para se buscar eventos tanto no Brasil como lá fora, tem uma interface bem direta e simples, listando os eventos que tem para acontecer e se você clicar no evento, poderá ver quem vai no evento e mais detalhes sobre ele. No mês de Julho inclusive, eu tive a honra de participar do [Meetup CSS SP](https://www.meetup.com/CSS-SP/) que aconteceu lá na Google e tudo é sempre coordenado pela plataforma do Meetup.\n\n

Eventos - Front-end Brasil

\n\n![Tela do Eventos](/assets/img/up-to-date/eventos.png)\n\nE claro, nossa comunidade não poderia ficar de fora! Idealizado pela galera do [FrontendBr](https://github.com/frontendbr/) lá do Github, eu e uns amigos ajudamos a criar uma plataforma para que todo mundo também pudesse cadastrar os eventos que estão acontecendo pelo nosso Brasilzão =D\n\nSó acessar lá o [FrontendBR Eventos](https://eventos.frontendbr.com.br/) para ver o que está para acontecer e claro, ajudar a anunciar os eventos. Todo o código está no [Github](https://github.com/frontendbr/eventos) e toda ajuda é sempre bem vinda!\n\n

Seguindo pessoas boas

\n\nNa nossa área, todo mundo está sempre em busca de bom material e também estamos sempre curtindo e recomendando coisas legais que vemos por aí. Então nada melhor que seguir essas pessoas e encontrar várias pérolas. E como fazer isso? Existem dois lugares que TODO dev deveria ficar atento, [Twitter](https://twitter.com/) e [Github](https://github.com/).\n\n

Twitter

\n\nJá se imaginou conversando com criadores das ferramentas que você utiliza no dia a dia? Através do twitter isso é bem simples e fácil! Eu poderia botar uma coleção gigante de Devs aqui, mas aí o post ficaria enorme e cansativo, então vou selecionar alguns dos que julgo bem importantes e também deixo [a lista dos que eu sigo](https://twitter.com/Willian_justen/following).\n\n- [Eu - @Willian_justen](https://twitter.com/Willian_justen/) - as vezes posto algo legal sério, segue lá T.T\n- [@addyosmani](https://twitter.com/addyosmani) - engenheiro na Google, trabalhando ativamente no Google Chrome.\n- [@cowboy](https://twitter.com/cowboy) - desenvolvedor na Bocoup e criador do GruntJS.\n- [@chriscoyier](https://twitter.com/chriscoyier) - escritor do CSS-Tricks e A List Apart.\n- [@davidwalshblog](https://twitter.com/davidwalshblog) - desenvolver na Mozilla e escritor no blog de próprio nome.\n- [@jaffathecake](https://twitter.com/jaffathecake) - engenheiro na Google, vem falando muito sobre Service Workers.\n- [@jeresig](https://twitter.com/jeresig) - criador do jQuery, fundador da Khan Academy e escritor.\n- [@leaverou](https://twitter.com/leaveroudev) - criadora de várias ferramentas de desenvolvimento e pesquisadora no MIT.\n- [@paul_irish](https://twitter.com/paul_irish) - outro engenheiro da Google, que trabalha bastante no Chrome DevTools.\n\n

Github

\n\nMuita gente não vê a razão de seguir pessoas no Github, mas é uma das formas mais incríveis de você descobrir projetinhos novos! Assim como o Twitter, não vou colocar todos, pois seria uma lista gigantesca, mas coloco [minha lista de pessoas que sigo](https://github.com/willianjusten/following) e alguns importantes.\n\nAlém de seguir pessoas no Github, existe o [Trending](https://github.com/trending), onde mostra os projetos que receberam mais stars durante um período de tempo, o que também é bastante legal.\n\n- [Euzinho](https://github.com/willianjusten/) - ah vai, segue lá, custa nada ahuahua\n- [Sinde Sorhus](https://github.com/sindresorhus) - o mito do Github, o cara criou praticamente tudo que você conhece e mais.\n- [Contra](https://github.com/contra) - criador do Gulp e várias outras coisinhas.\n- [Jason Miller](https://github.com/developit) - criador do Preact e entusiasta de Performance e JS.\n- [Matt DesLauriers](https://github.com/mattdesl) - desenvolvedor na Jam3, escritor do Promise Cookbook e outras coisas legais.\n- [Lea Verou](https://github.com/LeaVerou) - criadora de várias ferramentas de desenvolvimento e pesquisadora no MIT.\n- [Addy Osmani](https://github.com/addyosmani) - engenheiro na Google, trabalhando ativamente no Google Chrome.\n- [John Resig](https://github.com/jeresig) - criador do jQuery, Engenheiro de Software na Khan Academy e escritor.\n\n

Conclusão

\n\nBom galera, é isso aí, se atualizar no mundo de Frontend é bastante complicado, mas podemos tornar essa tarefa um pouco mais simples e mais direcionada utilizando essas ferramentas e dicas =)\n\nLembre-se, conhece algo maneiro e que merece ser mencionado aqui? Manda uma issue lá no [Github do blog](https://github.com/willianjusten/willianjusten.github.io) ou até mesmo um [PR direto nesse post](https://github.com/willianjusten/willianjusten.com.br/blob/master/posts/2016-09-03-como-se-manter-atualizado-no-frontend.md).\n" }, { "path": "posts/como-se-tornar-um-desenvolvedor-front-end.md", "content": "---\nlayout: post\ndate: 2015-02-24T18:46:24.000Z\ntitle: Como se tornar um desenvolvedor Front End\ndescription: Aprenda os caminhos para virar um desenvolvedor Front End de qualidade.\nmain-class: dev\ntags:\n - frontend\n - css\n - js\n - tutorial\ncategories: null\n---\n\n## Índice\n\n- [Introdução](#intro)\n- [O que faz um desenvolvedor Front End?](#oqfaz)\n- [Qual a importância do Front End?](#import)\n- [Mercado de Trabalho](#mercado)\n- [Níveis de conhecimento](#niveis)\n- [Eita lascou, como aprendo tudo isso?](#eita)\n- [Inglês](#ingles)\n- [Editores de Código](#editores)\n- [Básico do Terminal](#terminal)\n- [HTML](#html)\n- [CSS](#css)\n- [Javascript](#js)\n- [Controle de Versão](#git)\n- [Seo](#seo)\n- [Performance](#perf)\n- [Automação de Tarefas](#task)\n- [Mantenha-se Atualizado](#update)\n- [Dicas](#dicas)\n\n

Introdução

\n\nBom, já faz um tempinho que eu não escrevo no blog, mas é por um bom motivo, estou me mudando de empresa e com isso eu estou precisando organizar algumas coisas da minha vida, inclusive uma mudança de cidade.\n\nAlgum tempo eu já pensava em fazer um post parecido e como estou precisando também deixar alguns guias para os futuros desenvolvedores que vão entrar no meu lugar, resolvi unir o útil ao agradável e criar esse post. Espero que ajude a quem está começando e para quem já é experiente, que possa acrescentar com outras dicas, dar alguns detalhes de sua experiência, seria bastante legal.\n\nO post será separado em algumas partes, onde irei responder algumas dúvidas comuns, links para estudo, requisitos básicos, enfim, um compilado grandão de informações. A ideia é passar só um pouco de conteúdo para vocês se guiarem, é claro que não vou colocar todos os meus favoritos, senão seria um post gigantesco.\n\n

O que faz um desenvolvedor Front End?

\n\n> O desenvolvedor front end é o profissional responsável por projetar, construir e otimizar as interfaces de um projeto web.\n\n### Responsabilidades\n\n- Trabalhar junto a equipe de design para criar a melhor experiência possível\n- Desenvolver código limpo e bem documentado\n- Seguir os web standards\n- Se preocupar com a performance no client-side\n- Aplicar técnicas de SEO\n- etc...\n\nÉ claro que as responsabilidades mudam de acordo com a empresa em que você for trabalhar, mas essa é uma base comum na maioria dos lugares.\n\n

Qual a importância do Front End?

\n\nÉ claro que a maioria já deve saber a necessidade desse profissional, mas vale ressaltar alguns detalhes:\n\n- 80% do tempo de carregamento é gasto no frontend\n- Cada vez mais as interfaces vem ficando complexas e detalhadas, fazendo ainda mais necessária a presença de um especialista\n- O visual é a primeira coisa a ser vista, se ele estiver quebrado, o risco do usuário sair e nunca mais voltar é maior\n- etc...\n\n

Mercado de trabalho

\n\n![Gráfico de Frontend Developer](/assets/img/quero-ser-desenvolvedor-frontend/frontend-mercado.png)\n\nAcho que uma imagem já fala mais que mil palavras né? A busca por desenvolvedores front end só está crescendo, isso permite salários maiores para quem é qualificado de verdade, boas empresas para se trabalhar, etc.\n\n

Níveis de conhecimento

\n\nOlha, definir níveis de conhecimento, seja para qualquer profissão é algo bastante complicado, porque depende do que você vai se especializar. Eu meio que fiz uma separação mais ou menos de alguns assuntos que julgo necessários para cada nível de desenvolvedor. Terão alguns **extras**, que são assuntos interessantes, mas não fundamentais para aquele nível. Lembrando que os níveis mais altos compreendem tudo dos níveis anteriores.\n\n> Lembre-se: essas informações podem variar bastante de lugar para lugar.\n\n### Iniciante Básico\n\n- HTML (estrutura e tags)\n- CSS (propriedades básicas)\n- JS (pequenas noções, chamadas de scripts prontos)\n- Básico de Photoshop (recortes, cores, fontes)\n\n### Intermediário\n\n- HTML (Semântica e Acessibilidade)\n- CSS (propriedades avançadas do CSS3, Design Responsivo, funcionamento de grids e noção de frameworks)\n- JS (Entendimento da linguagem, noções de orientação a objeto)\n- Ferramenta de Versionamento (Git)\n- Noções de performance\n- SEO (**Extra**)\n\n### Avançado\n\n- CSS (Entender pre-processadores e suas funcões)\n- JS (Conhecimento forte na linguagem, entender algumas arquiteturas e Testes)\n- NodeJS (Saber como funciona e alguns conhecimentos basicos para automatização e afins)\n- Grunt/Gulp (saber como automatizar processos)\n- Bons conhecimentos de performance\n- Noções de UX/UI (**Extra**)\n\n### Master\n\n- CSS (conceitos avançados de arquitetura - BEM, Organic, Atomic)\n- JS (Total domínio na linguagem, design patterns na palma da mão)\n- NodeJS (saber como criar módulos, chamá-los tanto no front quanto no back)\n- Ter sólida experiência em sistemas front como o MEAN Stack\n\n![Gato surpreso](https://i.imgflip.com/1ih4qs.jpg)\n\n

Eita lascou, como aprendo tudo isso?

\n\nEstava achando que ser desenvolvedor front end é moleza? Como disse o [Nicholas C. Zakas](https://twitter.com/slicknet)\n\n![Um tweet falando sobre como a profissão de frontender é difícil](/assets/img/quero-ser-desenvolvedor-frontend/twitter.png)\n\nCada dia uma nova tecnologia é lançada e precisamos nos manter sempre atualizados, a questão é, como fazer tudo isso? Fiz um post há um tempo atrás falando sobre [técnicas de aprendizado](https://willianjusten.com.br/tecnicas-de-aprendizado/), que podem ajudar um pouco nessa longa caminhada.\n\nVou separar aqui as principais áreas que precisamos estudar, o porquê delas e alguns links para auxiliá-los no estudo.\n\n---\n\n

Inglês

\n\nSim, uma das coisas mais importantes para se tornar um bom desenvolvedor é saber inglês. É claro que eu não estou falando que você precisa ser fluente como um americano legítimo de início, mas saber ler e assistir vídeos vai te ajudar muito, visto que a maioria do material vai estar em inglês, você querendo ou não. Não fique mendigando informações só na sua língua, saia do comodismo e vá aprender inglês, vai por mim, vai ser o melhor investimento que você pode fazer. Sobre como aprender inglês, existem vários métodos, desde os cursos tradicionais até programinhas para te ensinar. Dependendo do seu nível, eu recomendo fortemente um professor particular, pois ele poderá focar exatamente nas suas deficiências e você conseguirá evoluir bem rápido. Aqui vão alguns links legais falando do assunto:\n\n- [Como aprender inglês](https://carlosschults.net/pt/como-aprender-ingles-parte-1/)\n- [Será que realmente o profissional de TI deve aprender inglês?](http://www.adamsilva.com.br/carreira/sera-que-realmente-o-profissional-de-ti-deve-aprender-ingles/)\n\n---\n\n

Editores de código

\n\nEles são basicamente o nosso braço direito, é importante escolher um editor que seja confortável para você e agilize o seu workflow. Não entre em guerrinhas de qual é melhor ou pior, instale, use e veja qual te agrada mais. Os iniciantes sempre caem na tentação de perguntar o melhor e bom, cada um vai puxar sardinha para o seu lado.\n\n- [Sublime Text](http://www.sublimetext.com/)\n- [Brackets](http://brackets.io/)\n- [Atom](https://atom.io/)\n- [Vim](http://www.vim.org/)\n- Procure que tem muitos!\n\n#### Sublime Text\n\n- [12 Most-Wanted Sublime Text Tips And Tricks](http://www.hongkiat.com/blog/sublime-text-tips/)\n- [7 Plugins do sublime que você deveria conhecer](https://tableless.com.br/7-plugins-sublime-text-que-voce-deveria-conhecer/)\n\n#### Brackets\n\n- [Brackets Course](http://css-snippets.com/brackets-course/)\n\n#### Vim\n\n- [12 Vim Tips](http://dalibornasevic.com/posts/43-12-vim-tips)\n- [Powe Vim Usage](http://www.ukuug.org/events/linux2004/programme/paper-SMyers/Linux_2004_slides/vim_tips/)\n- [Vim Adventures](http://vim-adventures.com/) - aprenda Vim jogando!!! Demais! <3\n- [Vim Tutorials Screencasts and Resources](http://code.tutsplus.com/articles/25-vim-tutorials-screencasts-and-resources--net-14631)\n\n---\n\n

Básico do Terminal

\n\nSe você quer ser realmente um programador bom, vai ter que largar esse medo e colocar a mão na massa. O terminal se torna ferramenta **FUNDAMENTAL** para níveis do intermediário ao avançado. Seja para usar seu controle de versão, seja para utilizar ferramentas de automação e outras várias ferramentas.\n\n- [Unix: Conceitos e Comandos Básicos](http://www.ime.usp.br/~ueda/ldoc/rb.html)\n- [Unix Course](http://www.tutorialspoint.com/unix/)\n- [Learn Shell](http://learnshell.org/)\n- [Learning the Shell](http://linuxcommand.org/lc3_learning_the_shell.php)\n- [Blog do Vitor Britto](http://vitorbritto.com.br/blog/) - Esse cara vira e mexe solta alguma dica muito legal sobre.\n\n---\n\n

HTML

\n\nA base de tudo, que vai governar a estrutura de todo o sistema. Qualquer desenvolvedor precisa saber ao menos o básico de html, inclusive a galera de backend. Já para galera de frontend, temos que nos atentar a mais detalhes, como: acessibilidade e semântica.\n\n#### Básico\n\n- [Codecademy HTML](https://www.codecademy.com/catalog/language/html-css)\n- [Dash](https://dash.generalassemb.ly/)\n- [Teamtreehouse](http://teamtreehouse.com/library/topic:learn-html/type:course)\n- [CodeSchool](https://www.codeschool.com/paths/html-css)\n- [30 Days to Learn Html and CSS](https://www.youtube.com/watch?v=yTHTo28hwTQ&list=PLgGbWId6zgaWZkPFI4Sc9QXDmmOWa1v5F)\n- [Learn to code Html & CSS](https://learn.shayhowe.com/)\n- [Apostila Web da Caelum](http://www.caelum.com.br/apostila-html-css-javascript/)\n- [Dive into Html5 em Português](https://diveintohtml5.com.br/)\n\n#### Semântica\n\n- [Use Html5 sectioning elements](http://blog.teamtreehouse.com/use-html5-sectioning-elements)\n- [SEO, Semântica e Html5](http://www.slideshare.net/fabioflat/seo-semantica-e-html5-12901651)\n- [A semântica do HTML](https://speakerdeck.com/diegoeis/a-semantica-do-html)\n\n### Acessibilidade\n\n- [Slides de Acessibilidade na web](https://tableless.com.br/slides-para-devs-9-acessibilidade-na-web/)\n- [WebAIM](http://webaim.org/intro/)\n\n---\n\n

CSS

\n\nNo início era só um modo de deixar as páginas um pouquinhos mais bonitas, hoje já é uma tecnologia que faz milagres, permitindo animações, melhores interações e até mesmo substituir alguns tipos de imagens. Para o desenvolvedor frontend é uma das áreas mais importantes rivalizando com JS, dependendo de onde você deseja se especializar. Para os que preferem mais a parte de UX/UI e design, aqui será onde você deve se aprimorar cada vez mais.\n\n**Dica**: CSS funciona muito na base de teste e acerte, veja o que cada propriedade faz, brinque com elas até se sentir confortável. Depois disso procure códigos alheios e tente entender o funcionamento e comece a aplicar em seus próprios códigos. Não há nada de errado olhar código alheio, open-source está aí para isso mesmo.\n\n#### Básico\n\n- [Site do Maujor](http://www.maujor.com/)\n- [Aprenda Layout com CSS](http://pt-br.learnlayout.com/)\n- [CSS Cross-country - Code Scholl](https://www.codeschool.com/courses/css-cross-country)\n\n#### CSS3\n\n- [Css3 for web Designers - Book](http://www.abookapart.com/products/css3-for-web-designers)\n- [The Guide to CSS Animation](http://www.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/)\n- [Transition e Animation](https://tableless.com.br/transition-e-animation/)\n- [MDN: CSS Animations](https://developer.mozilla.org/pt-BR/docs/CSS/Using_CSS_animations)\n\n#### Frameworks / Grids / Responsive\n\n- [Utilizando o bootstrap de forma consistente](https://www.felipefialho.com/blog/2014/utilizando-o-bootstrap-de-forma-consistente)\n- [Desenvolvendo com Bootstrap 3](http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena)\n- [Snippets para Bootstrap](http://bootsnipp.com/)\n- [Foundation 5 para iniciantes - video](http://dev.rbtech.info/zurb-foundation-5-iniciantes-aula-1/)\n- [Jeet](http://jeet.gs/) - aconselho fortemente\n- [Skeleton](http://getskeleton.com/)\n- [Responsive Design Workflow - Video](https://vimeo.com/45915667)\n- [Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html)\n\n#### Pré-processadores\n\n- [Less](http://lesscss.org/)\n- [Sass](http://sass-lang.com/)\n- [Stylus](http://learnboost.github.io/stylus/)\n- [Por que usar pré-processadores?](https://speakerdeck.com/romulomachado/por-que-usar-pre-processadores-css)\n- [Slide comparando os 3 pré-processadores](https://speakerdeck.com/willianjusten/pre-processadores-css)\n\n#### Metodologias / Boas Práticas\n\n- [How to structure a Sass project](http://thesassway.com/beginner/how-to-structure-a-sass-project)\n- [Css Performance Organization](https://learn.shayhowe.com/advanced-html-css/performance-organization/)\n- [OOCSS, SMACSS](http://www.slideshare.net/maxdesign/css-oocss-and-smacss)\n- [Understanding BEM syntax](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)\n- [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/)\n\n#### Inpirações / Tutoriais\n\n- [Codrops](http://tympanus.net/codrops/) - só ame <3\n- [CSS-Tricks](http://css-tricks.com/)\n- [Codepen](http://codepen.io/)\n- [24 ways](http://24ways.org/topics/code/)\n\n---\n\n

Javascript

\n\nBasicamente a única real linguagem no client side e que agora já se extende para o server side também. Essa linguagem tem crescido muito e hoje permite fazer praticamente tudo, seja na web e até fora dela. Se você quer ser considerado um desenvolvedor front end completo é bom que tenha essa linguagem como sua melhor amiga. Como um amigo diz:\n\n> Desenvolvedor Front End que não sabe javascript é recortador de layout. - Suissa\n\nTome bastante cuidado ao querer tomar atalhos, como utilizar JQuery para tudo ou já tentar ir direto para Angular, que é modinha.\n\nNo início é comum utilizarmos plugins prontos para realizar ações específicas (sliders, lightbox), mas com o tempo vai se fazendo necessário criar soluções únicas e para isso que precisamos entender bem a linguagem.\n\nO Vitor Britto também fez outro [incrível post](http://www.vitorbritto.com.br/blog/the-book-is-on-the-table/) falando sobre livros de JS.\n\n- [Codecademy - JS](https://www.codecademy.com/catalog/language/javascript)\n- [MDN - JS](https://developer.mozilla.org/en-US/Learn/JavaScript)\n- [How to Learn JS Properly](http://javascriptissexy.com/how-to-learn-javascript-properly/)\n\n---\n\n

Controle de Versão

\n\nQuantas vezes você já se pegou fazendo 1000 backups só para não perder certas versões dos arquivos? E se isso pudesse ser feito de uma forma mais fácil e ainda permitisse muito mais? Para isso temos ferramentas de controle de versão, sendo o [Git](http://git-scm.com/) e o [SVN](https://tortoisesvn.net/) os mais famosos. Se você quiser brincar com o [github](http://github.com), o git será a pedida.\n\nA maioria das empresas utiliza um desses dois para poder organizar melhor seu código, além de poder versionar, o git permite um controle dos colaboradores, controle de flow, separação em branches e muito mais.\n\n#### Básico\n\n- [Meu curso de Git e Github para iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/)\n- [Try Git - Code School](https://try.github.io/levels/1/challenges/1)\n- [Guia prático](http://rogerdudler.github.io/git-guide/index.pt_BR.html)\n- [Introdução ao git e github - Vídeo](https://www.youtube.com/watch?v=yNwh0S0S0bU)\n\n#### Intermediário/Avançado\n\n- [A web-focused git workflow](http://joemaller.com/990/a-web-focused-git-workflow/)\n- [Deploy web applications easily with svn](http://taylorjasko.com/deploy-web-applications-easily-with-svn/)\n\n---\n\n

SEO

\n\nSearch Engine Optimization ou SEO é um conjunto de estratégias e métodos para melhorar o posicionamento de páginas da internet nos mecanismos de buscas, como o Google e Bing.\n\nE qual a importância disso? Estar bem posicionado nos mecanismos de busca lhe permite ganhar mais acessos e com isso divulgar mais o seu produto.\n\nNem todo desenvolvedor Front End precisa ser o mestre de tudo em SEO, podemos deixar isso para especialistas, mas algumas informações básicas é importante também.\n\n- [Agência Mestre - MestreSEO](https://www.agenciamestre.com/)\n- [Como melhorar meu SEO?](https://willianjusten.com.br/como-melhorar-meu-seo/)\n- [Dicas de SEO para Front-end](https://tableless.com.br/dicas-de-seo-para-front-end/)\n\n---\n\n

Performance

\n\nComo disse no início do artigo, uma das responsabilidades do desenvolvedor front end é cuidar da performance da aplicação, visto que 80% do carregamento está envolvido diretamente com o client side. Sendo assim, se você quiser se destacar entre os desenvolvedores, foque bastante em performance, os resultados são muito satisfatórios e recompensadores.\n\nO [Davidson Fellipe](https://twitter.com/davidsonFellipe) fez uma awesome só disso e bom, ela está tão completa, mas tão completa, que basta o link dela, para você achar todo o resto. [Segue aqui esse ótimo compilado](https://github.com/davidsonfellipe/awesome-wpo).\n\n---\n\n

Automação de Tarefas

\n\nDurante o percurso de frontend, principalmente na parte de performance você irá ver que muitas tarefas se tornam bastante repetitivas, como compilar o css, minificar javascript e etc. Para facilitar essas tarefas, temos essas ferramentas de automação. Existem várias, mas dentre as puramente Javascript e que se tem mais utilizado na área de Front End, temos o [Grunt](https://gruntjs.com/) e o [Gulp](http://gulpjs.com/).\n\n- [State of Grunt](https://cowboy.github.io/state-of-grunt-fe-summit-2014-talk)\n- [Gulp - The vision, history and future of the project](https://medium.com/@contrahacks/gulp-3828e8126466)\n- [Grunt vs Gulp - Beyond Numbers](https://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/)\n- [Building with Gulp](https://www.smashingmagazine.com/2014/06/11/building-with-gulp/)\n- [Slides of Gulp](https://slides.com/contra/gulp)\n- [Gulp, Grunt, Whatever](https://ponyfoo.com/articles/gulp-grunt-whatever)\n- [Gulp: O novo automatizador](https://tableless.com.br/gulp-o-novo-automatizador/)\n- [Bye bye Grunt.js, hello Gulp.js!](https://blog.caelum.com.br/bye-bye-grunt-js-hello-gulp-js/)\n\n---\n\n

Mantenha-se Atualizado

\n\nComo já deve ter visto, a área de Front End é uma das que mais se movimenta. Do dia para a noite podem nascer 20 ferramentas novas para você conhecer e aprender. Para você não perder nada de novo que está acontecendo, aconselho muito a seguir as pessoas certas, assinar weeklys e seguir blogs da área. Vou colocar aqui só alguns, porque só dessa parte temos muita coisa!\n\n#### Pessoas para seguir\n\n- [Addy Osmani](https://twitter.com/addyosmani)\n- [Ben Alman](https://twitter.com/cowboy)\n- [Brad Frost](https://twitter.com/brad_frost)\n- [Chris Coyer](https://twitter.com/chriscoyier)\n- [John Resig](https://twitter.com/jeresig)\n- [Sara Soueidan](https://twitter.com/SaraSoueidan)\n\n#### Weeklys\n\n- [Web Design Weekly](http://web-design-weekly.com/)\n- [Frontend Focus](https://frontendfoc.us/)\n- [Css Weekly](http://css-weekly.com/)\n- [Javascript Weekly](http://javascriptweekly.com/)\n\n#### Blogs\n\n- [Codrops](http://tympanus.net/codrops/)\n- [EchoJS](http://www.echojs.com/)\n- [Google’s Web Fundamentals Program](https://developers.google.com/web)\n- [Css-tricks](http://css-tricks.com/)\n- [Smashing Magazine](http://www.smashingmagazine.com/)\n- [Da2k Blog](http://blog.da2k.com.br/) - PtBr\n- [Leandro Oriente Blog](http://leandrooriente.com/) - PtBr\n- [Felipe Fialho Blog](https://www.felipefialho.com/blog/) - PtBr\n\n#### Eventos\n\nNada melhor que um bom networking para te ajudar a conhecer mais coisas. E nada melhor que os eventos para isso, além de palestras ótimas, sempre acaba conhecendo alguém para te ajudar no futuro.\n\nFalando nisso, vai rolar o GDG DevFest em BH, se quiser que eu vá, [vote aqui](http://call4paperz.com/events/gdg-devfest-extended-bh-2015--2)\n\n---\n\n

Dicas

\n\nPara quem está começando é sempre um pouquinho complicado saber por onde começar, como fazer e o que fazer. Aqui vão algumas dicas que o [Vitor Britto](http://vitorbritto.com.br/) deu uma vez na Timeline dele e que eu concordo 110%.\n\n- Não adianta querer saber tudo em um curto espaço de tempo. Mas saiba que você pode aprender muito com o passar do tempo e se estiver disposto a aprender.\n- Vai com calma, estude no seu tempo, aprecie um tempo de estudo, mas também seu lazer. O mundo não vai acabar se você não conseguir estudar tudo que quer.\n- Se afobar para querer o aprendizado a todo custo é uma péssima ideia. Aprenda na medida do possível, respeitando o seu limite e praticando sempre que puder.\n- Pegue as coisas que você gosta, separe, estude a base daquilo e faça pequenos experimentos, porque a prática leva a perfeição. E se puder, passe adiante o que aprendeu, que será ainda mais recompensado.\n -Na programação: a leitura vale prata e a prática vale ouro.\n\n---\n\n## Conclusão\n\nÉ claro que existem outros links, outras coisas para aprender e outros métodos, nossa área é bastante grande. Mas espero que isso já lhe auxilie um pouco nessa longa jornada que é se tornar um desenvolvedor front end.\n\nPara os mais experientes, faltou alguma coisa muito importante que esqueci de falar? Explica aí embaixo nos comentários ou manda um Pull Request, críticas são sempre boas, principalmente para ajudar a quem está começando.\n\n---\n\n## Fontes\n\n- [O Papel do Desenvolvedor Front End](http://pt.slideshare.net/raelmax/o-papel-do-desenvolvedor-front-end)\n- [Guia Front-end das Galáxias](http://pt.slideshare.net/davidsonfellipe/guia-do-front-end-das-galaxias)\n- [Como me tornar um desenvolvedor front end](http://leandrooriente.com/como-me-tornar-um-desenvolvedor-front-end/)\n- [Como se tornar um dev front-end](https://tableless.com.br/tornar-dev-front-end/)\n" }, { "path": "posts/como-ter-um-blog-ajuda-a-conseguir-oportunidades.md", "content": "---\nlayout: post\ndate: 2021-06-30T04:02:12.000Z\ntitle: Como ter um Blog ajuda a conseguir melhores oportunidades\ndescription: Se você está procurando um emprego ou melhores oportunidades, ter\n um blog pode ajudar muito!\nmain-class: dev\ntags:\n - blog\n - code\n - dev\n---\n## Introdução\n\nFala pessoal, o post de hoje é patrocinado pela [Hashnode](https://hashnode.com/?source=willian), mas não saia daí! Não é um mero post para te vender algo, muito pelo contrário, o intuito desse post é te dar ideias e te ajudar a conseguir um emprego e/ou melhores oportunidades.\n\nSeguindo a tradição dos meus posts, enquanto eu escrevo, vou ouvindo uma banda chamada [Sleeping Pandora](https://open.spotify.com/artist/4PqIQknvBTor383DY4zJXb?si=KvYkbtb2SFqNsPHS0dz4hA&dl_branch=1), eles tocam um instrumental meio psicodélico, ótimo para estudar, ler, relaxar, super recomendo!\n\nE como vai funcionar esse post? Eu vou falar um pouco sobre nossa área, como que certas coisas funcionam e também como ter um blog pode te ajudar a se destacar numa busca por um emprego. E no final vou te dar uma dica para que você possa começar a fazer isso ainda hoje sem gastar tempo, para você parar de dar desculpas e procrastinar. Vamos lá?\n\n## Então você quer arrumar um emprego?\n\nSe você está começando ou até mesmo está na área, deve saber que nosso mercado de TI está super aquecido e as vagas estão aparecendo em todos os cantos, certo? Mas isso não quer dizer que estão contratando \"qualquer um\", junto com o crescimento do mercado, as demandas por gente mais qualificada também aumentaram. Pensando nisso, muitas empresas tem processos seletivos enormes que envolvem milhares de coisas como:\n\n* Entrevista com RH\n* Projeto de código para fazer no seu tempo\n* Conversa com Devs da empresa\n* Live coding\n* e mais...\n\nUfa, parece muita coisa e é mesmo! Mas e se eu te falar que algumas dessas etapas você pode acelerar e as vezes até mesmo cortar? \n\n> Fala sério Willian, como é que vou pular etapas? Isso é maior mentira sua. — Você\n\nEu sei que pode parecer mentira ou exagero, mas não é. O simples fato de você possuir um blog pode sim te ajudar a acelerar algumas das etapas. **Não estou dizendo que você vai pular tudo e vão te contratar na hora**, mas ter um blog ajuda bastante. E quer um grande exemplo disso? Euzinho, isso mesmo, o simples fato de eu ter um blog me ajudou em processos desde quando eu comecei a trabalhar na área e até hoje me ajuda demais em várias coisas.\n\nInclusive, os dois últimos prêmios que recebi, que foram o [GitHub Stars](https://stars.github.com/profiles/willianjusten/) e o [Microsoft MVP](https://mvp.microsoft.com/pt-br/PublicProfile/5004209?fullName=Willian%20%20Justen%20de%20Vasconcellos), eu ganhei exatamente pelos meus trabalhos com a comunidade e muito desse trabalho foi o blog, que alimento há mais de 6 anos.\n\n## Ganhando visibilidade\n\nQuando você escreve um blog, as pessoas começam a ler e começam a compartilhar entre os amigos. Querendo ou não, se você escrever bem e as pessoas gostarem do seu conteúdo, o seu nome acaba sendo espalhado. A ideia não é **ser famosinho**, eu por exemplo, nunca escrevi pensando em ser \"estrelinha\", o objetivo aqui é ser conhecido por ajudar os outros, por demonstrar conhecimento em determinada área e claro, aumentar minha **rede de amigos**.\n\nQuanto mais pessoas te conhecem e mais pessoas você conhece, **mais oportunidades** aparecem. E esse era o objetivo inicial não? Viu só, não é mágica, é só lógica.\n\n## Aprendendo em público\n\nPode não parecer, mas quando a gente tem um blog, a gente aprende muito e nós botamos isso em prática o tempo todo, seja falando sobre o que aprendemos, seja escrevendo os passos para caso vá precisar no futuro.\n\nEu pensava que isso era uma coisa mais minha, mas depois eu fui ver que na realidade, isso é mais comum do que eu imaginava. Existe inclusive o termo `Learn in Public` que é exatamente isso, aprender em público. Existem alguns posts super interessantes que falam sobre o assunto que eu recomendo:\n\n* [Post Learn In Public - Swyx](https://www.swyx.io/learn-in-public/)\n* [Talk Learn In Public - Swyx](https://www.youtube.com/watch?v=znNxtSbuBjI)\n* [Learn in Public, It’s Great - Ali Abdal](https://aliabdaal.com/friendzone/learn-in-public-it-s-great-268305/)\n\n## Seu portfólio vivo\n\nUnindo ao tópico acima, toda vez que você escreve que está fazendo/aprendendo algo, automaticamente aquilo vira seu portfólio para demonstrar suas habilidades em X ou Y. E aí como eu falei sobre `acelerar/pular etapas` é aqui que esses posts entram. Digamos que a empresa esteja contratando pessoas para trabalhar com React e você tem diversos artigos sobre React no Blog, já mostra que você ao menos já teve contato.\n\nDependendo do nível dos seus posts e interação com a sua comunidade, muitas vezes a etapa de fazer o projeto é pulada, afinal de contas, a empresa já consegue analisar um pouco do seu conhecimento e código ali. Como eu falei, **ter um blog não garante vaga nenhuma**, mas pode sim ajudar a cortar essa etapa, que muitas vezes toma muito tempo e é chata. E aí fica mais para discussões de código mais alto nível, conversas com RH e talvez algum live coding para confirmar seu conhecimento.\n\n## Importância do conteúdo ser seu!\n\nEspero já ter te convencido que vale a pena ter um blog, mas antes de já falar do blog em si, eu preciso falar de outra coisa tão ou mais importante quanto, que é sobre ser dono do seu conteúdo. Como assim? Talvez você já deve ter visto uma imagem assim no Medium:\n\n![Imagem do Paywall do Medium dizendo que parar ler, precisa criar conta](/assets/img/medium.jpeg)\n\nEssa é uma prática chamada `Paywall`, onde só permite ler quem criar conta/pagar. **Isso é um absurdo!** O nosso objetivo é que o conteúdo seja livre para todos, não faz sentido criar esse tipo de bloqueio. Eu já escrevi falando mais detalhadamente [sobre isso aqui](https://willianjusten.com.br/diga-nao-ao-medium-tenha-sua-propria-plataforma/). Então, por mais que o Medium pareça uma alternativa rápida, ele não é uma plataforma legal e eu sou completamente contrário ao que eles fazem.\n\n## Começando hoje mesmo com Hashnode\n\n\n[![Hashnode - Everything you need to start blogging as a developer](/assets/img/hashnode.jpg)](https://hashnode.com/?source=willian)\n\nNem sempre a gente quer criar um blog do zero, ou até mesmo tem muita gente que não sabe codar, mas ao invés de usar plataformas abomináveis como o Medium, eu venho aqui falar da [Hashnode](https://hashnode.com/?source=willian).\n\nEles são uma plataforma de blog super simples de usar e com várias funcionalidades **MUITO LEGAIS!** E não, não tô falando por ser patrocinado, quem me conhece sabe que eu só indico coisas das quais eu realmente gosto/acho legal. A primeira grande vantagem de usar a Hashnode é que você basicamente só vai precisar se preocupar em escrever o conteúdo, num vai ter preocupações com design/gatsby/next/jekyll/whatever, então se você é daqueles que sempre diz que não faz porque é difícil, **chega de desculpas!**\n\nAgora algumas outras vantagens que eu não conhecia da Hashnode e fui descobrindo e que nossa, achei ótimas!\n\n#### Você pode usar seu próprio domínio\n\nQuando você tem o seu próprio domínio, as pessoas falam \"O post do fulano\", \"O blog do fulano\". Mas quando você não tem, vira \"O post do Medium\" e isso dilui demais sua marca. Podendo ter seu próprio nome, isso marca muito mais. Eu tenho uma amiga que se chama [Luisa Bezerra](https://luisarbezerra.com/) e o blog dela é lá na Hashnode. Hoje ela mora na Espanha e tudo, muito chique.\n\n#### Sem Paywall, sem propaganda, nada\n\nTudo que você quer é que a pessoa acesse seu post e leia. Esse negócio de ter bloqueio ou até mesmo aquelas propagandas pulando na tela são horríveis!\n\n#### Customização\n\nUma coisa que eu gostei bastante na [Hashnode](https://hashnode.com/?source=willian) em relação ao Dev.to é que aqui você consegue editar o visual todo do seu blog, mudando sua logo, cores, posições. Além disso, você também consegue integrar diferentes ferramentas e até criar Widgets customizados que desejar.\n\n#### Importar / Replicar\n\nSe você já tiver um blog e pensar \"Ah, eu já tenho um blog, nem me é útil isso daí\", na realidade o Hashnode pode ser muito útil! Você pode importar seus posts do seu blog via RSS, por exemplo e com isso aumentar seu alcance pela própria rede do Hashnode, tendo assim o canonical no seu blog e uma outra fonte no Hashnode. E você pode fazer isso com um simples clique em botões. Inclusive, se você tiver posts lá naquela rede porcaria ~~Medium~~, você pode importar também e se livrar de lá!\n\nInclusive, eu vou começar a [migrar meus posts](https://willianjusten.hashnode.dev/), se quiser assinar a newsletter por lá, também vai poder!\n\n#### Newsletter integrada\n\nDentro da Hashnode você pode habilitar a opção de ter uma newsletter, assim as pessoas podem assinar e receber aviso toda vez que um post novo for lançado, o que vai ajudar a ter leitores recorrentes, o que é muito importante para marcar sua presença.\n\n#### Muito mais e comparativos\n\nEles tem muitas outras coisas, então fica até mais fácil você ver esses excelentes comparativos que eles mesmos dão:\n\n- [Hashnode vs Medium](https://hashnode.com/vs/medium)\n- [Hashnode vs Dev.to](https://hashnode.com/vs/devto)\n- [Hashnode vs Wordpress](https://hashnode.com/vs/wordpress)\n\n## Conclusão\n\nEspero que vocês tenham entendido e visto as grandes vantagens de se criar um blog. E se vocês pensarem \"Ah, mas eu não sei escrever\", perca esse medo e simplesmente comece! Pense que o seu aprendizado pode ajudar muitos outros a aprender também. Os posts não precisam ser enormes, inovadores e mega complexos, o importante é você estar aprendendo e ajudando os outros, enquanto você também cresce a sua presença digital.\n\nE se você nem sabe por onde começar, já começa [criando sua conta na Hashnode](https://hashnode.com/?source=willian) e brincando com o painel, quando você menos perceber, estará publicando seu primeiro post!\n" }, { "path": "posts/como-um-patinho-me-ajudou-a-ser-um-programador-melhor.md", "content": "---\nlayout: post\ndate: 2019-09-06T13:06:02.000Z\ntitle: Como um patinho me ajudou a ser um programador melhor\ndescription: Sim, é isso mesmo, um patinho de borracha pode ajudar demais a você\n encontrar seus bugs.\nmain-class: dev\ntags:\n - debug\n - code\n---\n\n## Introdução\n\nOlá pessoal, eu sei que esse título parece estranho demais e pode não fazer sentido mas prometo que será efetivo.\n\nHoje eu estou escrevendo esse post de Porto de Galinhas, que é um paraíso absurdamente lindo! Estou num encontro promovido pela empresa que trabalho, a ([Toptal](https://www.toptal.com/)), e é incrível poder escrever tendo como companhia uma vista tão linda. Abaixo deixo uma foto que tirei com meu drone:\n\n![Uma foto aérea mostrando algumas casas na orla da praia, uma faixa de areia com alguns guarda sóis, pessoas, e uma água bem verde e cristalina do mar](/assets/img/porto-de-galinhas.jpeg)\n\nO album recomendado e que estou ouvindo enquanto escrevo, é o [novo album da banda Tool](https://open.spotify.com/album/7acEciVtnuTzmwKptkjth5?si=P4isRw-xSuOcVS1F26rPJA), que está incrível. dê o play e volte para terminar a leitura.\n\nBom, já falei demais, vamos ao que importa!\n\n## Qual é desse pato afinal?\n\nA primeira vez que eu ouvi sobre essa técnica foi no meu livro favorito de programação, ~~se você achava que era o Clean Code, erroooou~~, que é o [The Pragmatic Programmer](https://www.amazon.com.br/Pragmatic-Programmer-Journeyman-Master/dp/020161622X), inclusive já escrevi um post com [65 dicas para ser um programador melhor](https://willianjusten.com.br/65-dicas-para-ser-um-programador-melhor/) que foram também retiradas do livro.\n\nEsse pato tem a ver com uma técnica bem famosa que se chama [Rubber Duck Debugging](https://rubberduckdebugging.com/) que consiste em você explicar o seu processo/código para um patinho de borracha (pode ser qualquer outra coisa também).\n\n## Como funciona?\n\nOs computadores são máquinas muito eficazes, mas elas são \"burras\" e só seguem processos. E o seu código não é diferente disso, você escreve comandos que possuem um fluxo com intuito de obter um resultado desejado.\n\nO que muitas vezes acontece é que esquecemos ou fazemos algo errado durante o processo e aparece o famoso **bug**. Nesse momento entra o desespero e a pergunta mais famosa:\n\n> Mas o que há de errado? Estava funcionando ainda pouquinho!\n\nNesse momento que o seu patinho de borracha entra em ação. Você vai falar passo-a-passo em voz alta para o seu pato, o que fez e o que está acontecendo. E pronto! A mágica vai acontecer e o pato vai te ajudar a encontrar o problema!\n\n![Uma ilustração mostrando o cérebro trabalhando mais e mais: quando você trava num código, aí pega o pato, aí explica o problema e aí o problema é resolvido.](/assets/img/rubber-duck-magic.jpg)\n\n## Que bruxaria é essa?!\n\nExiste [toda uma psicologia de como isso funciona](https://www.thoughtfulcode.com/rubber-duck-debugging-psychology/), mas basicamente quando você fala em voz alta (por isso a importância), o seu cérebro consegue processar melhor os detalhes e, com isso, sua atenção a detalhes/erros fica mais aguçada, consequentemente você acha os problemas mais rapidamente.\n\nÉ aqui que você se pergunta:\n\n> Tá, mas por que de um pato?\n\nNão tem motivo, pode ser um pato, um coelho, um bicho de pelúcia, um boneco, enfim, qualquer coisa que não seja você, inclusive, se você puder falar/explicar para um amigo é ainda melhor, mas obviamente, seria chato ficar chamando atenção/atrapalhando alguém a cada 30 segundos durante o processo de encontrar o erro.\n\n## Conclusão\n\nEsse foi um post rápido e simples para apresentar uma técnica que a maioria já conhecia, mas continuo achando muito importante que esse tipo de técnica seja passada sempre adiante.\n\nMuitos de nós já fazemos isso sem perceber, ou já não lembra das vezes que você chamou um amigo/colega para ajudar a corrigir um bug e só de explicar para ele o contexto, você mesmo resolveu?\n\nEu resolvi escrever esse post, exatamente pois quando o [Felipe Fialho estava fazendo o novo blog dele](https://www.felipefialho.com/blog/como-foi-desenvolver-meu-novo-blog-usando-o-gatsbyjs/) ele me chamou para ajudar com alguns problemas do Gatsby e por várias vezes, eram coisas bobinhas, que só de falar/mostrar, já ia se resolvendo.\n\nEntão, sempre que você puder, chame um amigo/colega ou fale com seu patinho de borracha, mas dê preferencia pelo patinho, assim estará evitando que seu amigo/colega atrapalhe-se e estará criando uma maior autonomia!\n" }, { "path": "posts/como-usar-e-se-comportar-melhor-em-chats.md", "content": "---\nlayout: post\ndate: 2021-04-13T13:50:09.000Z\ntitle: Como usar e se comportar melhor em chats\ndescription: 10 dicas para você tirar o melhor do Slack, Discord, etc.\nmain-class: misc\ntags:\n - chat\n - dicas\n---\n\n## Introdução\n\nFala pessoal, ontem eu lancei um vídeo no meu [canal do YouTube](https://www.youtube.com/watch?v=KBJiXB48lrE) dando algumas dicas que considero essenciais para que tenhamos um bom convívio em aplicativos de mensagens como o Slack, Discord, etc.\n\nComo é um assunto muito importante, eu resolvi trazer essas dicas aqui para o blog também, para que mais pessoas leiam e passem a seguir essas dicas. Então vamos lá!\n\n## Dica 1: Utilize threads\n\nSe o chat disponibilizar `threads`, utilize a mesma, crie uma mensagem e coloque o resto das mensagens dentro dela para evitar poluir.\n\nPara quem não sabe, thread é uma maneira de criar mensagens dentro de uma mensagem em específico, isso é super útil pois organiza um contexto inteiro num ponto só.\n\n## Dica 2: Use a busca\n\nAntes de mandar qualquer mensagem, use a busca, possivelmente alguém já teve a mesma dúvida e você pode conseguir sua solução mais rápido ainda.\n\n## Dica 3: Evite postar blocos grandes de código\n\nEvite postar blocos grandes de código diretamente no chat, avise do erro/problema e então dentro da thread você coloca o código ou disponibiliza um link para um gist ou algo parecido, assim vai evitar a poluição do chat e mais possivelmente irá conseguir ajuda.\n\n## Dica 4: Evite mandar mensagens separadas\n\nEvite mandar um \"olá boa tarde\" no chat separado e depois em outra mensagem escrever, se quiser ser cordial, bote na mesma msg, lembre-se da regra 1 de não poluir.\n\nUma coisa muito chata em chats é quando você recebe 99 notificações que na realidade poderia ser 1 mensagem só.\n\n## Dica 5: Ao enviar DM, seja educado mas seja direto\n\nAo mandar DM, mande diretamente qual seu problema, evite mandar um \"Oi, tá por aí?\", a graça dos chats é ser assíncrono, pode ser que a pessoa esteja ou não, mas quando ela puder, ela responde.\n\n## Dica 6: Dê o máximo de contexto\n\nSempre que tiver um problema, dê o máximo de contexto possível. Diga quais os passos para quebrar, que sistema está usando, browser, se possível, deixe um repositório para que possamos testar localmente.\n\n## Dica 7: Não só diga resolvido, mas diga como\n\nSe alguém resolveu seu problema, agradeça e `avise`, é importante saber que foi resolvido e ainda mais importante, `como` foi resolvido.\n\n## Dica 8: Evite repetir a mesma mensagem\n\nA sua mensagem está salva no chat, assim que alguém ver, pode tentar te ajudar e responder. Evite ficar colocando a mesma mensagem em diferentes canais e também ficar repetindo a mesma pergunta em intervalos muito curtos, isso além de poluir o chat, pode te dar uma imagem de \"pessoa incômoda\" e que não espera.\n\n## Dica 9: São pessoas do outro lado\n\nEssa é a dica **mais importante de todas**. Lembre-se que existem pessoas reais do outro lado, seja educado e respeite as regras de conduta do chat. Uma comunidade saudável é uma comunidade que se ajuda mais.\n\n# Conclusão\n\nEspero que tenham gostado das dicas e passem a fazer o mesmo nos ambientes de vocês, certeza que vai ser bem efetivo e terão resultados melhores.\n\nE se você quiser participar de uma comunidade super legal, saudável e que se ajuda bastante, entra no [Slack dos meus alunos](https://bit.ly/slack-will), eu estou sempre por lá também e é bem legal.\n" }, { "path": "posts/como-usar-o-google-analytics-events-tracker.md", "content": "---\nlayout: post\ndate: 2019-07-23T09:50:10.000Z\ntitle: Como usar o Google Analytics Events Tracker?\ndescription: Qual a importância de rastrear eventos no seu site e como fazer\n isso de forma simples.\nmain-class: dev\ntags:\n - google analytics\n - javascript\n - react\n---\n## Introdução\n\nFala pessoal, o post de hoje será sobre um assunto que eu gosto demais, **métricas!** Vira e mexe eu posto algumas coisinhas no meu [Twitter](https://twitter.com/Willian_justen) sobre estatísticas do blog e até mesmo em outros trabalhos, eu era vidrado em analisar dados. Sejam dados de performance, acessos e outras coisinhas mais.\n\nNa maioria das vezes, eu faço essas métricas por curiosidade e elas não tem nenhum objetivo final. Mas essas métricas são extremamente importantes, principalmente se você tem um negócio próprio e deseja medir sua performance de vendas, atração de novos usuários e etc. Então por isso que irei falar sobre isso =)\n\nEnquanto eu escrevo esse post vou ouvindo um músico/youtuber que encontrei por acaso no Spotify, ele faz músicas instrumentais muito boas! Se curte rock instrumental, vai no [perfil dele no Spotify](https://open.spotify.com/artist/4vnQIQmsGTMXSQy3B5ElAw?si=INHTMGSZRsSjirgq7ohA6Q).\n\n## O que são esses eventos?\n\nAntes de falar como usar, é melhor explicar o que são né? A explicação mais simples é:\n\n> Evento é uma interação/atividade do usuário com elementos da página, pode ser desde a simples `view` até interações mais diretas, como o clique ou submissão de um formulário.\n\nAlguns exemplos de interação seriam:\n\n* View de uma página\n* Clique num link de menu\n* Uma busca no site\n* Play num vídeo\n* Download de um pdf\n* Play de um podcast\n* Scroll da página\n\nEnfim, você pode mensurar qualquer tipo de interação que o usuário tenha no seu site!\n\n## Qual a importância disso?\n\nSe até agora você não viu a importância disso, vou dar alguns exemplos para ajudar.\n\n### Situação 1:\n\n> Você tem um site onde publica seus podcasts e quer saber quantas pessoas entram na página e quantas de fato botam para tocar o episódio.\n\n### Situação 2:\n\n> Você tem um blog e deseja saber se as pessoas fazem de fato a leitura do post. Você pode analisar a porcentagem de scroll que eles fazem na página, assim é possível ter uma métrica melhor do que só a view.\n\n### Situação 3:\n\n> Você tem um ecommerce online e deseja saber a porcentagem de pessoas que adicionam coisas no carrinho, mas não finalizam. Você pode adicionar um evento no botão de adicionar ao carrinho e analisar contra as vendas e assim vai ter dados melhores também.\n\nEnfim, são **infinitas** as possibilidades de métricas que você pode criar e analisar e os ganhos são imensos!\n\n## A estrutura dos eventos\n\nO Google Analytics tem uma estrutura bem definida dos eventos, o que facilita demais para podermos criá-los e criar métricas em cima deles. Essa estrutura é formada por **5 dados**:\n\n### Event Category\n\nEsse é o nome dado para um grupo de eventos similares que você deseja rastrear. Exemplo: eu tenho uma [página de cursos](https://willianjusten.com.br/cursos/) e quero analisar o clique nos cursos. Todos os eventos ficam na categoria \"cursos\" então. Assim como os links de curso que tenho.\n\n### Event Action\n\nComo o nome já diz, essa é a ação que você está rastreando. Exemplos: play de vídeo, clique num curso, clique num link do menu, scroll de uma página.\n\n### Event Label\n\nAqui é onde você especifica melhor o evento em si. Por exemplo, no caso dos meus cursos, é aqui que eu defino o nome do curso que foi clicado. Assim eu consigo através do `category` ver todos os cliques nos cursos e aqui eu consigo ver curso a curso de forma mais específica. Assim eu consigo saber qual o curso mais clicado, por exemplo.\n\n### Event Value\n\nEsse é um valor **numérico**, que você assinala ao evento que está rastreando. Geralmente é associado a um valor monetário. Exemplo: o valor do produto que foi adicionado ao carrinho, valor que o download de um pdf significa, etc.\n\n### Non Interaction\n\nEsse é o último parâmetro que você passa no evento. Como disse lá acima, evento pode ser uma interação ou atividade do usuário. Para informar se esse evento é interativo ou não, você passa esse último parâmetro, iremos entrar em mais detalhes da implementação logo abaixo.\n\n## Implementando o Google Analytics\n\nA primeira das coisas e mais óbvia é que você precisa criar uma conta no [Google Analytics](https://analytics.google.com/analytics/web/) e o processo, como mostrado na imagem abaixo, são basicamente 3 etapas:\n\n![Uma imagem mostrando as 3 etapas do Google Analytics. Você primeiro passa alguns dados, vai receber um script para colocar no site e depois é só aguardar e ver os dados no site do analytics.](/assets/img/google-analytics-tracker.png)\n\nEsse código de acompanhamento é bem famoso, e fica parecido com o abaixo:\n\n```html\n\n\n\n\n```\n\nO mais importante desse script é o seu **tracking code**, que ali está representado por `XX-XXXXXXXX-X`.\n\nNo meu caso, como eu uso o Gatsby, existe o [gatsby-plugin-google-analytics](https://www.gatsbyjs.org/docs/adding-analytics/), e aí a configuração fica:\n\n```js\n\n// gatsby-config.js\n\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-plugin-google-analytics`,\n options: {\n // replace \"XX-XXXXXXXX-X\" with your own Tracking ID\n trackingId: \"XX-XXXXXXXX-X\",\n },\n },\n ],\n}\n```\n\n## Implementando os eventos\n\nComo eu já disse tudo sobre a estrutura ali acima, então fica muito fácil de implementar! A sintaxe é a seguinte:\n\n```js\nga('send', {\n hitType: 'event',\n eventCategory: [Category],\n eventAction: [Action],\n eventLabel: [Label],\n eventValue: [Value],\n nonInteractive: [True | False]\n});\n```\n\nComo a ordem dos parâmetros é sempre a mesma, você pode simplificar mais e colocar só:\n\n```js\nga('send', 'event', 'Category', 'Action', 'Label', 'Value');\n```\n\nOkay, o código é esse, mas como e onde você coloca? Vamos a alguns exemplos:\n\nEm eventos de `click`, onde são geralmente botões, você pode fazer até inline como:\n\n```html\nIr para Foo\n```\n\nSe for algum evento de view, você pode colocar também diretamente na página, com um script inline:\n\n```html\n\n```\n\nE se for algum evento ligado a um scroll, por exemplo, você pode adicionar diretamente no seu script, só lembrando de verificar a existência do `window.ga`, algo como:\n\n```js\n\ndocument.addEventListener('scroll', () => {\n if typeof window.ga !== undefined {\n // sua implementação aqui e mais o evento\n ga('send', 'event', 'Category', 'Scroll', 'Label', 'Value');\n }\n})\n```\n\n## Como eu faço no Gatsby/React?\n\nExiste um plugin chamado [React GA](https://github.com/react-ga/react-ga), que já facilita com todas as configurações necessárias para mim. E aí no exemplo da minha página de cursos, basta eu fazer o seguinte código:\n\n```jsx\nconst courseClickTrack = title => {\n ReactGA.event({\n category: 'cursos',\n action: 'click',\n label: `Link Curso - ${title}`\n })\n}\n\nconst Course = ({ title, description, link, image }) => {\n return (\n courseClickTrack(title)}>\n \n {title}\n \n {title}\n {description}\n \n \n \n )\n}\n```\n\nRepare que no `onClick` do React eu ainda passo o `title` para que assim a minha `label` tenha diferentes valores para cada curso.\n\nE eu faço isso para outras coisas, como podem ver [nesse tweet](https://twitter.com/Willian_justen/status/1151614625768755207). Então, se quiserem ver os trackers que eu uso, só acessar o [código fonte do blog](https://github.com/willianjusten/willianjusten.com.br/).\n\n## Conclusão, Agradecimento e chamada para Open Source\n\nÉ isso pessoal, espero que esse post ajude você a conseguir criar métricas mais legais e interessantes para os seus próximos sites. E se você tiver outras sugestões, não deixe de falar ali nos comentários ou no Twitter.\n\nE para continuar, quero fazer um agradecimento ao [Luciano Carvalho](https://github.com/lucianocarvalho) que achou links quebrados no blog e não só avisou, como fez [um Pull Request](https://github.com/willianjusten/willianjusten.com.br/pull/110) corrigindo. \n\nOutras pessoas avisaram coisas via Twitter também e até fizeram sugestões, fica aqui meu obrigado a todos vocês! <3\n\nE se você está começando na área e não sabe como iniciar, está aí uma oportunidade! O meu blog inteiro é open source e você pode ajudar na revisão dos artigos, melhorias de código e até inclusão de features que você acha que seria legal ter. Não perde a oportunidade e [vai lá no Github agora](https://github.com/willianjusten/willianjusten.com.br).\n\n\n\n\n\n\n\n\n" }, { "path": "posts/como-usar-o-reactjs.md", "content": "---\nlayout: post\ndate: 2015-07-14T15:16:16.000Z\ntitle: \"#2 - Como usar o ReactJS\"\ndescription: As diferentes formas de se usar e se iniciar um projeto com ReactJS.\nmain-class: js\ntags:\n - react\n - js\n - tutorial\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nA trilha sonora fica por conta de [Tame Impala](https://open.spotify.com/artist/5INjqkS1o8h1imAzPqGZBb), uma banda bastante psicodélica e que fez um dos melhores shows que já pude assistir =)\n\nComo prometido, vou dar continuidade a série de posts sobre ReactJS e para acompanhar tanto essa série, como outras, é só ir no link [series](https://willianjusten.com.br/series/).\n\n## Iniciando\n\nNo [post anterior](https://willianjusten.com.br/comecando-com-react/) eu falei um pouquinho do que era o React, como ele funciona e uma nova forma de se pensar em componentes que ele traz. Só que ficou faltando o mais importante, como usar?\n\nNesse post irei dar algumas alternativas de como trabalhar com o ReactJS, para assim já podermos começar a trabalhar ainda mais com ele. Lembrando que nenhuma das formas é a melhor, cada uma tem sua utilidade em determinado momento.\n\nNão se preocupe com todos os detalhes dos códigos, pois iremos ver mais detalhadamente em outros posts. Não curto muito exemplos de Hello World, já que não ensinam nada, mas para esse caso será útil, visto que só quero mostrar as formas de uso.\n\nSe você quiser se adiantar um pouco, aconselho a ir dando uma lida na [API do React](https://reactjs.org/docs/react-api.html), que contém todos os comandos primários que vamos utilizar nos exemplos.\n\n### Arquivos\n\nPara usar o React da forma mais simples, basta baixar esse [template html deles](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), mas lembrando que é só uma página html com alguns links para carregar.\n\nVocê também pode utilizar a CDN deles, [aqui tem os links](https://reactjs.org/docs/cdn-links.html)\n\n```html\n\n\n```\n\n### Básico sem JSX\n\nEssa forma é a mais básica de todas e funciona como se fosse usar uma biblioteca normal de Javascript. Baixe o arquivo do React e chame no seu html:\n\n```html\n\n\n```\n\nE logo após a chamada da biblioteca, coloque o seu script, seja ele inline ou chamando de um outro arquivo.\n\n```js\nvar ExampleApplication = createReactClass({\n render: function() {\n var elapsed = Math.round(this.props.elapsed / 100);\n var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );\n var message =\n 'O React está rodando com sucesso há ' + seconds + ' seconds.';\n return ReactDOMFactories.p(null, message);\n }\n});\n\nvar ExampleApplicationFactory = React.createFactory(ExampleApplication);\nvar start = new Date().getTime();\n\nsetInterval(function() {\n ReactDOM.render(\n ExampleApplicationFactory({elapsed: new Date().getTime() - start}),\n document.getElementById('container')\n );\n}, 50);\n```\n\n**update: (02/06/2016)** - na linha `16` atualizamos para utilizar o `ReactDOM.render()`, pois ele agora é separado do React original.\n\n**update: (16/05/2018)** - na linha `1` atualizamos para utilizar `createReactClass` e na linha 8 atualizamos para `ReactDOMFactories` pois `React.createClass` e `React.DOM` foram marcados como deprecated na versão 15.0 e removidos na 16.0, para utilizá-los é necessário adicionar as bibliotecas create-react-class e react-dom-factories ao projeto\n\n```html\n\n\n```\n\nUtilizando o React em JS cru, necessitamos de algumas manipulações para criação de elementos ou utilizar alguns que o próprio React nos dá.\n\nComo disse anteriormente, não se preocupe com todo o código, visto que irei falar sobre cada detalhe mais tarde. Só se atente as linhas `8`, `12` e `17`, que são as mais específicas para o caso de React sem JSX.\n\nNa linha `8`, estamos utilizando um factory built-in do React para selecionar a tag `p` no DOM e inserir o valor de `message`. Na linha `12` estamos criando um elemento de React com o método [createFactory](https://reactjs.org/docs/react-api.html#react.createfactory), que nos permitirá extendê-lo e utilizá-lo sempre que quisermos. Na linha `17`, estamos chamando o elemento criado, passando a propriedade `elapsed` e seu valor.\nEssa sintaxe é mais verbosa e precisaremos escrever um pouco mais, mas ela é Javascript puro e os mais puristas, que reclamam de Html no JS, não podem reclamar.\n\n\n### Utilizando JSX\n\nO JSX é uma sintaxe criada para o React, que se assemelha ao XML e que facilita bastante o nosso workflow. Se quiser saber um pouco mais sobre, aconselho [este link](https://reactjs.org/docs/jsx-in-depth.html).\n\nPara usar essa sintaxe diretamente no Browser, precisamos do Babel e do React chamados no nosso html:\n\n```html\n\n\n\n\n\n```\n\nPodemos ter o JSX de duas formas: inline, utilizando a tag `\n\nPara adicionar um SVG como imagem, basta colocá-lo dentro da `src` da tag `img`.\n\n```html\n\"Logo\"\n```\n\nA utilização desta forma impede o acesso dos elementos separados do SVG, porém a imagem não irá perder qualidade caso seja redimensionada.\n\n### 2 - Como Background-image\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nPara adicionar um SVG como background-image, basta criar um elemento com uma classe definida e então nesta classe, adicionar o SVG na propriedade de background-image.\n\n```css\n.element {\n background-image: url(/image/image.svg);\n}\n```\n\nQuando se deseja criar grandes cenários, um método bastante interessante é utilizar o background-image para o SVG, assim você consegue desenhar vários elementos na tela com mais facilidade e podendo replicá-los ao decorrer de seu ambiente. Um exemplo bem legal é o [Santa Tracker](https://santatracker.google.com) da Google, que utiliza está técnica.\n\n### 3 - Inline SVG\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nO SVG inline é a utilização da sua estrutura jogada diretamente no código html, como o SVG trabalha numa estrutura similar ao xml/html, ele acaba se encaixando sem problemas dentro do site. Uma dica é criar partials separadas, contendo todos esses elementos SVG e adicioná-los no seu código, assim evita de ver aquele código gigante que algumas imagens podem ter. As vantagens do inline é que você tem a manipulação total dos elementos e também tem um carregamento super veloz.\n\n### 4 - Via Iframe/Object/embed\n\nSão métodos antigos, que eu já não aconselho a utilizar, visto que perdem performance na página e não irão adicionar nada para que o workflow seja preferido. De qualquer forma, para adicionar, seria:\n\n```html\n\n\n\n\n\n```\n\n### 5 - Via Data URIs\n\nUma das últimas formas de se adicionar o SVG no nosso html é utilizando os Data URIs, que pode ser inserido como utf-8 ou convertido para base64 e adicionado na tag de `img` ou como propriedade de `background-image`.\n\n```html\n\"\"\n\n.base64 { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i etc);\n}\n```\n\nA vantagem é que dependendo do tipo do seu svg, ele convertido pode ficar bastante pequeno, deixando o sistema ainda mais leve. Um dos exemplos mais legais que eu já vi trabalhando com isso é o site do [Make your money matter](http://makeyourmoneymatter.org/).\n\n## Conclusão\n\nBom galera, essa é a primeira sobre como utilizar SVG. Agora que você já sabe, procura alguns sites legais que utilizaram, vejam quais técnicas que eles usaram e tente entender o porquê de ter sido de forma `A` e não `B`, as vezes você pode propôr até uma mudança para algo melhor.\n" }, { "path": "posts/configurando-2-contas-de-git-no-mesmo-computador.md", "content": "---\nlayout: post\ndate: 2021-09-14T13:31:30.000Z\ntitle: Configurando 2 contas de Git no mesmo computador\ndescription: Aprenda como configurar uma conta pessoal e uma conta da empresa no\n Git, incluindo chaves SSH e emails.\nmain-class: dev\ntags:\n - git\n - dev\n---\n## Introdução\n\nFala povo, recentemente eu voltei ao mercado de trabalho para trabalhar numa startup chamada [Zapt](https://zapt.com.br/) e consequentemente precisei configurar o Git da minha máquina para não usar somente o meu email pessoal, mas também o da empresa, principalmente porque lá utilizam o [GitLab](https://gitlab.com/) ao invés do GitHub, então ele é mais chatinho para reconhecer os emails e chaves SSH. \n\nÉ bem simples de configurar, mas percebi que muita gente não sabe como fazer da mesma maneira que eu faço, então resolvi escrever esse post rapidinho para ensinar. Lembrando que os processos descritos abaixo funcionam no Linux, Mac e Windows com WSL, no Windows puro algumas outras configuração seriam necessárias, mas não irei abordar aqui.\n\nEnquanto eu vou escrevendo esse post vou ouvindo [Pitty](https://open.spotify.com/artist/2dmQ0vMD3THLMcz7DsvfaT?si=19mAEx4OQWeiYbx0duNobw&dl_branch=1), isso mesmo, aquela rockeira baiana que era bem famosa nos 2000, como já disse, escuto de tudo xD\n\n## Por que configurar o Git e como fazer?\n\nAntes mesmo de começar a falar de SSH e etc, a gente precisa falar a razão de configurar o Git num é mesmo? Bom, quando nós criamos um commit, ao ver no log, ele fica numa estrutura similar a essa:\n\n```bash\ncommit 82a24142b6df8049787760c82d29728f8fb0eee5 (HEAD -> master, origin/master, origin/HEAD)\nAuthor: Willian Justen de Vasconcellos \nDate: Sun Sep 5 23:31:04 2021 -0300\n\n Remove dangerously to use Script\n```\n\nSe você notar, tem uma parte separada especificamente para o `Author`. Se você não configurar, o Git vai pegar o que tiver de informação no computador e na maioria das vezes ele não vai colocar direito nem o nome e muito menos o email.\n\nPara configurar uma conta única e global é super simples, basta digitar:\n\n```bash\ngit config user.name --global \"Willian Justen de Vasconcellos\"\ngit config user.email --global \"willianjustenqui@gmail.com\"\n```\n\nMas e se precisar mudar para o email da empresa no projeto X? A forma não automatizada é **dentro do projeto** definir manualmente:\n\n```bash\ngit config user.name \"Willian Justen de Vasconcellos\"\ngit config user.email \"will.justen@zapt.com.br\"\n```\n\nE aí talvez você pergunte:\n\n> Mas e se tiverem vários projetos da empresa, preciso fazer isso em cada projeto?\n\nA resposta antes desse post seria que sim, você precisa definir manualmente. Mas como vocês sabem, programador é bicho preguiçoso e sempre vai querer automatizar as coisas e bom, é o que faremos xD\n\n## Configurando diferentes emails\n\nQuando o Git vai assinar um commit ele primeiro procura as informações dentro da pasta `.git` dentro do projeto e caso não tenha nada definido localmente, ele procura pela configuração global que fica num arquivo chamado `.gitconfig` na pasta raiz do usuário.\n\nE é aqui que iremos fazer uma jogada para o Git ler o que nós queremos que ele leia. Eu costumo ter uma estrutura de pastas da seguinte forma:\n\n```bash\n~/Development\n /github # meus projetos pessoais\n /zapt # projetos da zapt\n```\n\nComo é um padrão bem simples, fica fácil de falar para o Git o seguinte:\n\n- Se estiver na pasta `github` use meu email pessoal\n- Se estiver na pasta `zapt` use o email da empresa\n\nE aí para definir isso, eu crio 2 arquivos:\n\n- `.gitconfig-github`\n- `.gitconfig-zapt`\n\nE os conteúdos ficam:\n\n```yaml\n# .gitconfig-github\n\n[user]\n email = willianjustenqui@gmail.com\n```\n\nE no outro:\n\n```yaml\n# .gitconfig-zapt\n\n[user]\n email = will.justen@zapt.com.br\n```\n\nLembrando que aqui estou mostrando só o email, mas outras configurações como aliases específicos para cada conta e qualquer outra coisa, você consegue separar tranquilamente nesses arquivos.\n\nMas só fazendo isso, ainda não vai funcionar, nós precisamos informar ao Git quando é parar ler um ou outro, para isso nós editaremos o `.gitconfig` original para ficar assim:\n\n```yaml\n[user]\n name = Willian Justen de Vasconcellos\n[init]\n defaultBranch = main\n\n[includeIf \"gitdir:~/Development/github/\"]\n path = .gitconfig-github\n[includeIf \"gitdir:~/Development/zapt/\"]\n path = .gitconfig-zapt\n```\n\nNote que eu tenho coisas globais ainda, como meu nome e o branch inicial quando criar. Mas utilizo um `includeIf` exatamente para quando cair numa opção ou outra, ele adicionar meus dados específicos. Só de fazer isso, se eu criar um commit na Zapt, já ficaria com o commit assim:\n\n```bash\ncommit e07164f972a15bbf7c681970a5cf547db966867d (origin/fix/update-map-use-lat-long, fix/update-map-use-lat-long)\nAuthor: Willian Justen de Vasconcellos \nDate: Thu Aug 26 12:16:44 2021 -0300\n\n Fix Map position to use flat lat and long\n```\n\nComo podem ver, o email já fica certinho o da empresa e não o meu pessoal.\n\n## Configurando duas chaves SSH\n\nAgora vamos a segunda parte que é ainda mais importante, afinal de contas, se as chaves não estiverem bem configuradas, você não consegue nem fazer push para o repositório.\n\nPrimeiro de tudo, você precisa criar chaves SSH separadas, até para facilitar nessa separação, para isso, é só rodar:\n\n\n```bash\nssh-keygen -t rsa -C \"email@pessoal.com\" -f \"id_rsa_pessoal\"\nssh-keygen -t rsa -C \"email@trabalho.com\" -f \"id_rsa_trabalho\"\n```\n\nAo fazer isso, ele vai criar duas chaves separadas na pasta `~/.ssh`, depois basta adicionar na sua máquina usando:\n\n```bash\nssh-add ~/.ssh/id_rsa_pessoal\nssh-add ~/.ssh/id_rsa_trabalho\n```\n\nDepois disso precisamos configurar o ssh para também entender quando usar uma chave ou outra. Para isso vamos criar um arquivo `config` dentro da pasta `.ssh`:\n\n```bash\ncd ~/.ssh\ntouch config\ncode config # você pode usar vi, vim, nano, enfim, editor favorito\n```\n\nLá dentro do arquivo é só editar:\n\n```yaml\n# Conta pessoal como default\nHost github.com\n HostName github.com\n User git\n IdentityFile ~/.ssh/id_rsa_pessoal\n \n# Conta do trabalho\nHost github.com-trabalho \n HostName github.com\n User git\n IdentityFile ~/.ssh/id_rsa_trabalho\n```\n\nAli está como `github`, mas para o `gitlab` é só mudar no `Host` e `Hostname`, você inclusive pode ter diferentes configs de diferentes repositórios remotos no mesmo arquivo.\n\nE aí, sempre que for clonar um repositório, se ele for de trabalho, basta editar na url para ficar de acordo com a estrutura acima:\n\n```bash\ngit clone git@github.com-trabalho:seu_user/repo_name.git\n```\n\nProntinho, agora sua máquina está configurada para trabalhar com duas contas do Git e assim você não fica misturando usuários e chaves entre coisas pessoais e empresa!\n\n## Conclusão\n\nEspero que este post tenha sido útil e lembrando que qualquer dúvida e/ou sugestão é só me mandar um [tweet](https://twitter.com/Willian_justen)." }, { "path": "posts/configurando-o-macbook-m1-para-desenvolvimento-web.md", "content": "---\nlayout: post\ndate: 2021-09-13T12:46:46.000Z\ntitle: Configurando o Macbook M1 para Desenvolvimento Web\ndescription: Alguns passos dicas de como configurar o seu Macbook M1 para\n desenvolver na web.\nmain-class: dev\ntags:\n - macbook\n - m1\n---\n## Introdução\n\nFala povo, recentemente eu [fiz um vídeo](https://youtu.be/9Rp39orl1DM) falando sobre minhas impressões do Macbook Air M1 e no vídeo mesmo eu havia comentado que iria fazer um post falando um pouquinho sobre como configurar as coisas e tudo mais, então aqui estou.\n\nEnquanto escrevo esse post, vou ouvindo uma banda chamada [The American Dollar](https://open.spotify.com/artist/5r4OqYJL7JrtZlffx7FJlb?si=8PYvbk6GRHiAbn3qGHbagw&dl_branch=1) que é um Post-rock bem calmo e bom para ouvir trabalhando e/ou relaxando, super recomendo.\n\n### O que roda no M1?\n\nComo a arquitetura do M1 é diferente, no início muita coisa não tinha suporte, o que já está bem diferente de agora (pouco mais de 1 ano depois de lançado), mas se você ainda tiver dúvida se algo roda ou não, existe um site bem legal que indica o suporte de tudo, se chama [isapplesiliconready.com](https://isapplesiliconready.com/). Lá você pode pesquisar se determinada aplicação vai rodar ou não. É até bom para decidir na hora da compra, vai que você necessita de uma aplicação bem específica e ela ainda não roda.\n\n### Xcode - command line tools\n\nPor mais que você nem vá programar no Xcode ou coisas mobile é super importante instalar o xcode / command line tools no Mac, pois várias outras ferramentas utilizam de alguns pacotes dali de dentro. Para instalar, basta rodar no terminal:\n\n```bash\nxcode-select --install\n```\n\n### Rosetta 2\n\nCom essa mudança de arquitetura, assim como aconteceu dos Powerbook para Intel, a Apple lançou o Rosetta 2, que é uma espécie de emulador do x86 para o Arm. Então caso algo não rode nativamente, você vai precisar ter o Rosetta para te ajudar. Para instalar é bem simples, basta abrir o terminal e digitar:\n\n```bash\n/usr/sbin/softwareupdate --install-rosetta --agree-to-license\n```\n\n### Homebrew\n\nOutra ferramenta quase que obrigatória no Mac para quem programa é o [Homebrew](https://brew.sh/), que é um Package Manager, permitindo instalar vários outros programas diretamente do terminal, para quem vem do Linux, já está acostumado com ferramentas como `apt get`, `yum`, `pacman`, o funcionamento é bem similar.\n\nPara instalar, só rodar no terminal:\n\n```bash\n/bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"\n```\n\n### iTerm2\n\nDepois de instalar as 3 partes mais fundamentais para o funcionamento das outras aplicações no Mac, agora vamos aos programas. Lembrando que são escolhas minhas e não necessariamente você precisa instalar no seu Mac, mas eu aconselho fortemente.\n\nA primeira ferramenta não poderia deixar de ser um terminal melhorado e na minha opinião, não existe melhor terminal no Mac que o iTerm, ele está aí há tantos anos e continua sempre adicionando pequenas melhorias.\n\nComo já temos o brew instalado, basta rodar:\n\n```bash\nbrew install --cask iterm2\n```\n\n#### Configurando o iTerm2 com Rosetta 2\n\nApós isso, já teremos um terminal melhorado e também vamos poder configurar para ter 2 terminais separados, um para rodar as coisas necessárias com o Rosetta e outro para rodar as coisas normais. Para fazer isso é bem simples, abra o finder e vá em `Applications`, procure pelo `iTerm`, clique com botão direito e escolha a opção de `duplicar`. \n\n![Imagem do finder do Mac com varias aplicacoes, incluindo o iTerm](/assets/img/iterm-finder.png)\n\nAo duplicar, mude o nome da aplicação para algo como `iTerm-Rosetta` ou qualquer outra coisa que te facilite a identificar qual é qual. \n\nDepois disso, clique com o botão direito no app novo e escolha a opção `get info` para abrir a seguinte tela:\n\n![Tela com informacoes do iTerm e uma opcao de abrir usando o Rosetta marcado](/assets/img/iterm-rosetta.png)\n\nNote que a opção de `Open using Rosetta` precisa estar marcada para poder funcionar de fato. Uma outra coisa que eu fiz foi mudar o ícone para me facilitar a entender qual é qual ainda mais rápido. Para isso eu baixei um ícone [nesse repositório](https://github.com/dhanishgajjar/terminal-icons) e com o arquivo em mãos é só arrastar a imagem para cima do ícone ali no header que ele automaticamente já vai trocar.\n\nE prontinho, com essa configuração se existir qualquer programa que você precisar usar e ainda não for compativel com Arm você vai conseguir rodar usando o Rosetta.\n\n### Zsh / Oh my Zsh\n\nContinuando com as configurações do terminal, vamos instalar agora o Oh my Zsh para deixar o terminal turbinado. Gosto também de usar o Oh my Zsh pois é o mesmo que utilizo no Windows/WSL, então fica tudo muito igual e não me confundo com alias/autocomplete nem nada.\n\nPara instalar, é só rodar:\n\n```bash\nsh -c \"$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)\"\n```\n\nDepois disso, eu costumo configurar alguns plugins, novamente, isso não é obrigatório, mas se quiser usar minhas indicações =)\n\n#### Syntax highlighting\n\nEsse plugin serve para o terminal identificar os comandos e colorir facilitando a leitura de tudo. Para isso, rode primeiro:\n\n```bash\n# Aqui é a pasta onde devem estar seus plugins\ncd $HOME/.oh-my-zsh/plugins\n\n# clone o repositório\ngit clone https://github.com/zsh-users/zsh-syntax-highlighting.git\n\n# adicione o plugin no seu arquivo de configuração\necho \"source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh\" >> ${ZDOTDIR:-$HOME}/.zshrc\n```\n\nPara garantir que o plugin vai funcionar, você também deve adicionar na lista de plugins no arquivo `.zshrc`, procure pela linha de plugins e adicione:\n\n```bash\nplugins=(\n zsh-syntax-highlighting\n)\n```\n\n#### Autosuggestions\n\nEsse plugin é perfeito para quem esquece sempre como se escreve aquele comando X, que já usou mil vezes, mas ainda assim esquece. O terminal vai auto completar as coisas baseado no seu histórico, o que é super útil. Para instalar, basta rodar:\n\n```bash\ngit clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions\n```\n\nE depois, assim como no plugin acima, precisa editar o arquivo `.zshrc`:\n\n```bash\nplugins=( \n zsh-autosuggestions\n)\n```\n\n### NVM\n\nPara quem trabalha com frontend, uma outra ferramenta indispensável é o `nvm` que permite instalar diferentes versões do Node sem dificuldades. E aqui já tem um **detalhe importante**, se você tentar instalar via Homebrew, ele vai ficar demorando infinitos e não vai funcionar. Para evitar esse problema, vamos instalar com o comando dado por eles no repositório oficial:\n\n```bash\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash\n```\n\nDepois de instalado, vamos adicionar as seguintes linhas ao **final** do `.zshrc`:\n\n```bash\nexport NVM_DIR=\"$([ -z \"${XDG_CONFIG_HOME-}\" ] && printf %s \"${HOME}/.nvm\" || printf %s \"${XDG_CONFIG_HOME}/nvm\")\"\n[ -s \"$NVM_DIR/nvm.sh\" ] && \\. \"$NVM_DIR/nvm.sh\" # This loads nvm\n```\n\n### VsCode\n\nCom tudo instalado, falta só nosso querido editor né? Eu utilizo o VsCode, para instalar via Homebrew é só rodar:\n\n```bash\nbrew install --cask visual-studio-code\n```\n\nE se você quiser usar as mesmas extensões que eu utilizo, tenho um [pacote](https://marketplace.visualstudio.com/items?itemName=willianjusten.reactavancado-extension-pack) que criei para o curso [React Avançado](https://reactavancado.com.br/).\n\n### Conclusão\n\nBom, das partes essenciais para desenvolvimento web, essas são as ferramentas mais importantes. É claro que existem milhares de outros Apps por aí, mas eu confesso que gosto de partir do simples e necessário e conforme eu vou precisando, aí instalo mais coisas. Se tiver alguma coisa que você acha que faltou ou precisa falar, manda [um tweet para mim](https://twitter.com/Willian_justen)." }, { "path": "posts/configurando-o-webpack-para-rodar-react-e-es6.md", "content": "---\nlayout: post\ndate: 2016-06-19T06:00:46.000Z\ntitle: Configurando o Webpack para rodar React e ES6\ndescription: Aprenda como utilizar esse module bundler para facilitar sua vida\n nos projetos com ES6 e React.\nmain-class: js\ntags:\n - react\n - es6\n - tutorial\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nO post de hoje é para falar de mais uma forma de se trabalhar com módulos e automatizar algumas tarefas, dessa vez com o `webpack`. Aí você vem e fala: \"pxxxx mais um automatizador e module loader? Essa galera do Front tá louca\". E eu nem vou discordar de você não, porque é quase isso. Mas assim como o React se popularizou bastante, o webpack também e, com isso, precisamos aprender como ele funciona. O alívio é que é muito fácil de aprender.\n\nEnquanto escrevo esse post, vou ouvindo o novo album do Red Hot Chili Peppers, que se chama [The Getaway](https://open.spotify.com/album/43otFXrY0bgaq5fB3GrZj6) e está muito bom! Acabou que enrolei pacas, o album do RHCP acabou e eu fui então ouvir a trilha sonora do filme [Warcraft](https://open.spotify.com/album/1sPM7Tn95VHElwAs8Cwp10), que também ficou demais!\n\nSe você quiser pular tudo e ver o código final, só [abrir aqui](https://github.com/willianjusten/webpack-example).\n\n## O que é webpack?\n\nBom, eu falei que o webpack é um `module loader`, mas que desgraça é essa? Foi-se o tempo que escrevíamos todo o nosso código num grande arquivo javascript e chamávamos de `script.js`. Com o tempo, fomos aprendendo que é importante separar as responsabilidades e criar arquivos menores. Esses arquivos menores, nada mais são, que `módulos` da nossa aplicação. E o webpack é responsável por empacotar esses módulos e entregá-los para a web.\n\nExistem outros do gênero como o [Browserify](http://browserify.org/), que trabalha com a estrutura de CommonJS para requerer novos módulos, por exemplo.\n\nOs criadores do webpack fizeram [uma página](https://webpack.js.org/concepts/manifest/) explicando as motivações para a criação desse projeto, se você estiver interessado em saber mais um pouquinho, vai lá.\n\n## Instalando o webpack\n\nSua máquina obviamente precisa ter o [Node.js](https://nodejs.org/en/) instalado e funcionando. Quanto mais atualizado, melhor também hein =)\n\n### Instalando o webpack globalmente\n\nPara instalar globalmente, basta ir no terminal e digitar:\n\n```bash\nsudo npm install webpack -g\n```\n\nLembrando que a necessidade do sudo pode variar de sistema para sistema.\n\n### Iniciando o webpack em um projeto\n\nÉ sempre importante ter o webpack como dependência dentro do projeto, para que você possa usar via local ao invés de só globalmente. Para isso, primeiro inicie um projeto:\n\n```bash\nnpm init\n```\n\nE então instale o webpack salvando o mesmo no `package.json` criado.\n\n```bash\nnpm install webpack --save-dev\n```\n\n### Dev Tools\n\nSe você quiser usar coisas como `hot reload`, levantar um servidor automaticamente, mapsource e outras coisinhas, você precisa instalar esse também.\n\n```bash\nnpm install webpack-dev-server --save-dev\n```\n\n## Começando a trabalhar\n\nVocê pode usar só a ferramenta do webpack pelo terminal, mas como, em geral, você vai utilizá-lo só em projetos um pouquinho mais detalhados, é legal criar um arquivo de configuração. Então, para isso, crie um arquivo `webpack.config.js`. E as primeiras configurações podem ser:\n\n```js\nmodule.exports = {\n entry: './app/App.js',\n output: {\n path: __dirname + '/public',\n filename: 'bundle.js'\n }\n}\n```\n\nEncapsulamos tudo dentro do `module.exports`, porque nosso arquivo não deixa de ser também um módulo. Na linha `2`, determinamos qual é o arquivo principal que irá carregar toda nossa aplicação. Depois definimos no `output`, na linha `4` onde vamos jogar o arquivo e na linha `5`, qual será o nome do arquivo.\n\nAgora crie seu arquivo `App.js` na pasta `app` e escreva dentro dele:\n\n```js\nconsole.log('webpack está funcionando');\n```\n\nCrie seu `index.html` na pasta `public` e coloque a seguinte linha:\n\n```html\n\n```\n\nAgora se você rodar `webpack` dentro da pasta raiz, ele irá criar o arquivo `bundle.js` dentro de public e se você abrir o `index.html`, vai estar lá a mensagem no seu console =)\n\n## Criando um servidor com Hot Reload\n\nComo já instalamos o `webpack-dev-server` lá no início, a única coisa que precisamos é configurar para tudo funcionar certinho. Então vamos adicionar ao `webpack.config.js` mais o seguinte trecho:\n\n```js\ndevServer: {\n inline: true,\n contentBase: './public',\n port: 3333\n}\n```\n\nUtilizamos o `inline: true` para ele colocar um runner do webpack dentro do arquivo temporariamente, que vai servir para nosso hot reload. O `contentBase` é de onde queremos que ele leia, em geral, vai ser onde seu `index.html` estiver. Por fim, escolha uma porta não utilizada e pronto. Para rodar digite `webpack-dev-server` no terminal e ele irá levantar um servidor local para você.\n\n## Brincando com ES6\n\nO ES6 está aí e hoje em dia quem não escreve com ele, está perdendo muita produtividade, pois a linguagem ganhou muitas coisas legais, que facilitam bastante, então vamos configurar para usar. Para isso, iremos utilizar o [Babel](https://babeljs.io/), que irá compilar o nosso código para funcionar em todos os browsers.\n\nPrecisamos primeiro instalar todas as coisinhas necessárias:\n\n```bash\nnpm install --save-dev babel-core babel-loader babel-preset-es2015\n```\n\nO `babel-core` e `babel-loader` são os pacotes principais do babel para o funcionamento do mesmo, enquanto o `babel-preset-es2015`, como o nome já diz, será responsável pelas coisas do es6 (aka es2015).\n\nCom tudo instalado, precisamos colocar mais algumas linhas no nosso `webpack.config.js`, para avisar dessa compilação.\n\n```js\nmodule: {\n rules: [{\n test: /\\.js$/,\n exclude: /node_modules/,\n loader: 'babel-loader',\n query: {\n presets: ['es2015']\n }\n }]\n}\n```\n\nNa linha `3` eu defino que quero que ele leia qualquer arquivo `.js`, na `4` eu garanto que ele não vai ler os `node_modules` (muito importante hein!), na `5` eu defino o babel como meu loader e da `6-8`, eu defino que o preset que vou usar é do `es2015` para ele compilar meus códigos novos.\n\nFeito isso, para testar, vamos lá no nosso arquivo `App.js` e escrever:\n\n```js\nconst hey = 'Heyyy';\nconsole.log(`${hey} webpack funcionando!`);\n```\n\nSe mandarmos rodar agora o `webpack-dev-server`, ele vai entender coisas novas como o `const` e o template literal. Bastante legal né? Se você queria só o es6, é só parar por aí e está tudo ok.\n\n## Colocando o React\n\nComo disse para vocês, o webpack se popularizou muito devido ao React, pois a maioria dos devs passaram a preferir ele ao browserify. Então, vamos aprender a usar o React junto =)\n\nPara isso é bem fácil, primeiro vamos instalar as coisinhas do nosso React queridão:\n\n```bash\nnpm install react react-dom --save\n```\n\nDepois precisamos também instalar o preset do react, para o nosso Babel conseguir compilar o JSX.\n\n```bash\nnpm install babel-preset-react --save-dev\n```\n\nFeito isso, é só adicionar esse novo preset na configuração do `webpack.config.js`.\n\n```js\nquery: {\n presets: ['es2015', 'react']\n}\n```\n\n## Vendo o React em ação\n\nAgora que já temos tudo montadinho, vamos só criar uma bobeirinha em React para ver se está tudo ok. Primeiro vá no index e crie uma div com o id `app`.\n\n```html\n
\n```\n\nDepois, dentro da pasta `app`, vamos criar uma nova pasta chamada `components` e nela criar um arquivo `Home.js`, com o seguinte conteúdo:\n\n```js\nimport React from 'react';\n\nconst Home = () =>

Hello World!

\n\nexport default Home;\n\n```\n\nSó estou importando o React e criando uma stateless function de um componente chamado Home e exportando ele.\n\nDepois disso, vamos ao nosso arquivo `App.js`, apagar o que tinha lá e escrever:\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Home from './components/Home';\n\nReactDOM.render(, document.getElementById('app'));\n```\n\nImporto as coisas do React, o nosso novo componente da Home e então mando renderizar. Se tudo estiver configurado certinho, você verá um belo `Hello World!` na tela =D\n\nSe quiser dar uma olhada no código final do que fizemos, só [abrir aqui](https://github.com/willianjusten/webpack-example).\n\n## Conclusão\n\nBom gente, é basicamente esse o start para configurar o webpack para es6 e react. Existem várias configurações que vocês podem adicionar depois, como um uglify do código para quando for levar para produção, carregar css direto por ali, enfim, um mundo de coisinhas legais, mas a base está aí =D\n" }, { "path": "posts/convertendo-um-class-based-component-para-react-hooks.md", "content": "---\nlayout: post\ndate: 2019-03-10T10:29:00.000Z\ntitle: Convertendo um Class Based Component para React Hooks\ndescription: Como converter um class based component para o novo React Hooks.\nmain-class: js\ntags:\n - react\n - hooks\n - youtube\n - testes\n---\n\n## Introdução\n\nFala pessoal, esse é mais outro post/vídeo, e como o título diz, a ideia será converter um componente para usar o novíssimo hooks. Se você é um leitor assíduo do post, já deve ter visto [meu post sobre hooks](https://willianjusten.com.br/habemus-react-hooks/), lá eu falo o que são, para que servem e outras coisas mais.\n\nO componente escolhido para converter foi o [React-Snakke](https://github.com/diogomoretti/react-snakke/) feito pelo [Diogo Moretti](https://twitter.com/diogomoretti_).\n\nVocê pode ver o código todo nesse link do [CodeSandbox](https://codesandbox.io/s/jjyyn9n1vv) e abaixo deixarei o vídeo também.\n\n## Vídeo\n\n\n\n## Sobre o código e o refactor\n\nBom, eu vou pontuar as partes mais importantes do código aqui, mas eu aconselho a assistir o vídeo também, já que nele eu explico mais detalhadamente o processo. Certas partes do código serão simplificadas com `...`, mas você pode ver tudo lá no [CodeSandbox](https://codesandbox.io/s/jjyyn9n1vv).\n\n### Transformar de Classe para Função\n\nBom, a primeira etapa, é transformar o componente que usava classe, para função. Já que os hooks **não funcionam** dentro de classes.\n\n```js\n// antes\nexport default class Snakke extends Component { ... }\n\n// depois\nexport default function Snakke(props) { ... }\n```\n\n### Remover o this e usar as variáveis diretamente\n\nFeito isso, a outra coisa é que todos os lugares que tiverem referências ao `this`, ou seja, o objeto da classe, não existem mais e você precisa usar ou direto do `props` ou a variável direta se for o caso. E variáveis dentro das funções precisam ser assinaladas como tal, usando `let` ou `const`.\n\n```js\n// antes\nstyles = {\n ...\n height: this.props.height,\n opacity: this.props.opacity,\n zIndex: this.props.zIndex,\n ...\n}\n\n// depois\nconst styles = {\n ...\n height: props.height,\n opacity: props.opacity,\n zIndex: props.zIndex,\n ...\n}\n```\n\n### Substituir state pelo useState\n\nDepois dessas duas mudanças, nós começamos a procurar locais onde tenham definições e mudanças de `state`.\n\nE no caso do código inicial, nós tínhamos a variável `progress` que possuía um valor inicial e também recebia uma atualização através do `this.setState`\n\n```js\nstate = {\n progress: 0\n}\n\nthis.setState({\n progress: total\n})\n```\n\nDentro do React Hooks, para trabalhar com estados, nós temos o método [useState](https://willianjusten.com.br/habemus-react-hooks/#usando-o-hook-de-estados-usestate). E ele funciona da seguinte forma:\n\n```js\nimport React, { useState } from 'react'\n\nconst [progress, setProgress] = useState(0)\n```\n\nNós criamos um array que recebe 2 valores, o primeiro é a variável que queremos mexer com os valores dela (nosso estado) e o segundo parâmetro é o método que vai ser responsável por atualizar esse estado, no caso o `setProgress`.\n\nO último detalhe sobre o `useState` é que ele recebe um parâmetro, que é o estado inicial da variável, no nosso caso, é o valor `0`.\n\n### Substituir métodos lifecycle por useEffect\n\nDentro desse componente inicial, nós usávamos o `componentDidMount` e `componentWillUnmount`, que serviam para adicionar/remover o listener de scroll no momento que o componente era montado/desmontado.\n\nNos hooks, nós podemos substituir essa parte pelo `useEffect`, ficando dessa forma:\n\n```js\n// antes\ncomponentDidMount() {\n window.addEventListener('scroll', this.setProgress)\n}\n\ncomponentWillUnmount() {\n window.removeEventListener('scroll', this.setProgress)\n}\n\n// depois\nuseEffect(() => {\n window.addEventListener('scroll', handleScroll)\n return () => {\n window.removeEventListener('scroll', handleScroll)\n }\n}, [])\n```\n\nComo funciona isso? No momento que o componente renderiza na tela, o `useEffect` é chamado e com ele, o listener é adicionado. O mesmo método possui um `cleanup` que é chamado sempre quando o componente desmonta e para indicar isso, basta que você retorne uma função, que é exatamente o que fazemos, dentro do nosso `return` nós passamos o `removeListener`, assim garantimos que o listener vai ser desmontado junto do componente, sem causar problemas de memory leak/performance.\n\nUm último detalhe do `useEffect` é que ele recebe como segundo parâmetro, um array, onde podemos indicar quais propriedades queremos ficar vigiando, para que o `useEffect` execute toda vez que essas propriedades sejam atualizadas. Se não passarmos nenhum array, o `useEffect` vai ser chamado em cada rerender, para evitar isso, já que só queremos adicionar o listener uma vez, nós passamos um array vazio `[]`, isso garante que o `useEffect` será chamado só quando for montado e o cleanup só quando desmontado.\n\n### Substituir setState para o método criado no useState\n\nVimos acima que nós criamos o método `setProgress` certo? Ele vai servir para atualizar o `progress` quando desejarmos, assim como o `setState` fazia. Então, para que tenha essa mudança de estado, falta chamar esse método no seu devido lugar, passando o novo valor.\n\n```js\n// antes\n...\nthis.setState({\n progress: total,\n})\n\n// depois\n...\nsetProgress((window.scrollY / bodyHeight) * 100)\n```\n\nApós ter feito essas mudanças, é possível que já esteja tudo funcionando certinho. Caso não esteja, verifique se todos os `this` foram removidos e se onde estava usando `state` já está atualizado para a variável escolhida.\n\nViu só? Não é tão difícil fazer essa conversão não é mesmo? =D\n\n### Antes/depois\n\nVamos fazer uma comparação (antes e depois) dos componentes. Abaixo segue o componente utilizando classe (antes das nossas alterações):\n\n```jsx\nimport React, { Component } from 'react'\n\nexport default class Snakke extends Component {\n constructor(props) {\n super(props)\n this.setProgress = this.setProgress.bind(this)\n this.getPercentageScroll = this.getPercentageScroll.bind(this)\n }\n\n state = {\n progress: 0\n }\n\n styles = {\n position: 'fixed',\n top: '0',\n left: '0',\n width: '100%',\n height: this.props.height,\n opacity: this.props.opacity,\n zIndex: this.props.zIndex,\n filter: this.props.shadow ? `drop-shadow(0 0 .1em ${this.props.color})` : 'none',\n background: `linear-gradient(to right, ${this.props.color} var(--scroll), transparent 0)`\n }\n\n getPercentageScroll (scrollPos) {\n const bodyHeight = document.body.clientHeight - document.documentElement.clientHeight\n return (scrollPos / bodyHeight) * 100\n }\n\n setProgress () {\n let total = this.getPercentageScroll(window.scrollY)\n\n this.setState({\n progress: total\n })\n }\n\n componentDidMount () {\n window.addEventListener('scroll', this.setProgress)\n }\n\n componentWillUnmount () {\n window.removeEventListener('scroll', this.setProgress)\n }\n\n render () {\n return (\n
\n )\n }\n}\n\nSnakke.defaultProps = {\n color: '#000',\n height: '5px',\n opacity: '1',\n zIndex: '9999',\n shadow: false\n}\n```\n\nVeja abaixo o componente, já com as nossas alterações, utilizando hooks:\n\n```jsx\nimport React, { useState, useEffect } from 'react'\n\nexport default function Snakke(props) {\n const styles = {\n position: 'fixed',\n top: '0',\n left: '0',\n width: '100%',\n height: props.height,\n opacity: props.opacity,\n zIndex: props.zIndex,\n filter: props.shadow ? `drop-shadow(0 0 .1em ${props.color})` : 'none',\n background: `linear-gradient(to right, ${props.color} var(--scroll), transparent 0)`,\n }\n\n const [progress, setProgress] = useState(0)\n\n function handleScroll() {\n const bodyHeight = document.body.clientHeight - document.documentElement.clientHeight\n setProgress((window.scrollY / bodyHeight) * 100)\n }\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll)\n return () => {\n window.removeEventListener('scroll', handleScroll)\n }\n }, [])\n\n return
\n}\n\nSnakke.defaultProps = {\n color: '#000',\n height: '5px',\n opacity: '1',\n zIndex: '9999',\n shadow: false,\n}\n```\n\n## Conclusão\n\nA mudança não é enorme, mas dá para ver que o código foi simplificado, não precisamos mais ficar preocupados em entender de onde o `this` tá vindo e para onde tá indo, qual o seu contexto. Podemos também diminuir métodos e ~~pelo menos para mim~~, o código ficou bem melhor.\n\nLembrando que não é errado usar Classes para os componentes, a própria equipe do React diz [para não sairmos convertendo tudo sem necessidade](https://reactjs.org/docs/hooks-faq.html#do-i-need-to-rewrite-all-my-class-components). A ideia do post é mais para mostrar como é o funcionamento de um e outro, para que caso você pegue um código em hooks, não se sinta perdido.\n\nSe você ficou com alguma dúvida, só falar nos comentários ou me mandar mensagem, que eu ajudo =)\n" }, { "path": "posts/criando-animacao-ondas-css-svg.md", "content": "---\nlayout: post\ndate: 2020-04-30T21:38:15.000Z\ntitle: Criando uma animação de ondas com CSS e SVG\ndescription: Aprenda a animar ondas feitas em SVG somente com CSS puro e cria um\n hero muito mais criativo e bonito.\nmain-class: css\ntags:\n - css\n - videos\n - dicas\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje iremos adicionar um novo amigo na parceria, que é o SVG e iremos criar uma linda animação de ondas.\n\nPara gerar as ondas eu utilizei o site [getwaves.io](https://getwaves.io/) e você pode ver [a demo do vídeo aqui](https://labs.willianjusten.com.br/wave-svg-css-animation/) e o [código aqui](https://github.com/willianjusten/labs/blob/gh-pages/wave-svg-css-animation/index.html).\n\n## Vídeo\n\n\n\n## Conclusão\n\nNovamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!\n" }, { "path": "posts/criando-apresentacoes-e-hospedando-no-github.md", "content": "---\nlayout: post\ndate: 2015-10-04T21:36:35.000Z\ntitle: Criando apresentações e hospedando no github\ndescription: Aprenda a criar slides para suas apresentações e hospedá-las online\n no github pages.\nmain-class: dev\ntags:\n - js\n - github\ncategories: null\n---\n\n## Introdução\n\nCaramba, como fazia tempo que eu não postava nada aqui. O mês passado foi muito apertado, participei de vários eventos, tanto palestrando como assistindo e por isso não conseguia muito tempo para escrever. Um pouco também foi devido a preguiça...pois é, vergonha né? =/\n\nBom, para não perder o costume, hoje estou ouvindo uma playlist bem calminha e legal que se chama [Your favorite Coffeehouse](https://open.spotify.com/playlist/37i9dQZF1DX6ziVCJnEm59?si=90_msHLtR3S1YBlx-2vlLA), já tinha passado o olho nela, mas resolvi aproveitar o climinha de Petrópolis para ouvir.\n\nO post de hoje será bem simples, mas que me salvou bastante nesse mês, que como eu disse, precisei fazer várias apresentações.\n\n### Por que não usar o Keynote, PowerPoint ou outro similar?\n\nBom, eu não tenho as melhores aptidões em design e confesso que ver aquele monte de opções escondidas não me deixa muito confortável. Outra questão é que eu queria poder fazer meus slides em qualquer computador e de qualquer lugar, se eu usasse um desses programas, eu seria obrigado a escrever só em máquinas que tivessem esses programas...\n\nSempre que eu vou a eventos, me interesso em ter os slides depois para poder ler com mais calma e até mesmo fazer testes quando são códigos expostos ali. Então eu queria disponibilizar meus slides de forma fácil também, sendo assim, eu vi que realmente precisava de algo web.\n\nEu já havia visto um padrão de algumas palestras e todas elas eram web, fui caçar melhor e então encontrei o amado [RevealJS](https://lab.hakim.se/reveal-js/). Junto com ele achei alguns outros, como o [Slides](http://slides.com/), que é mantido pela galera do RevealJS, só que possui uma UI para poder montar os slides. Também encontrei o [Spectable](http://spectacle.surge.sh/#/), que foi baseado no RevealJS, mas feito todo em React <3 (preciso testá-lo depois!)\n\n## Coisas legais que o RevealJS tem!\n\nMuitos me perguntavam, mas poxa, o Keynote tem várias coisas legais e você vai acabar perdendo... Só que não, o RevealJS tem tudo que o Keynote tem e ainda melhor! Vou colocar uma listinha de coisas muito maneiras que ele tem:\n\n- Slides agrupados, tendo uma navegação vertical no mesmo assunto\n- Suporte a Markdown (quem me conhece sabe que amo escrever assim)\n- Permissão de exportar em PDF\n- Notas do Editor em tela separada + countdown para saber o tempo que já passou\n- Sintaxe colorida para código <3\n- Vários e vários plugins!\n\n## Sobre o RevealJS\n\nA documentação dele se encontra [aqui](https://github.com/hakimel/reveal.js) e é muito muito fácil de entender e usar. Eu vou passar por alguns detalhes importantes e básicos para construção dos slides.\n\n\n### Markup\n\nO Markup inicial precisa seguir um padrão, que é:\n\n```html\n
\n
\n
Slide Horizontal Simples
\n
\n
Slide Veritical 1
\n
Slide Veritical 2
\n
\n
\n
\n```\n\nPara iniciar uma apresentação, precisamos de uma `div` com a classe `reveal`, que deverá englobar todos os slides. A seção de slides deverá ficar dentro de uma `div` com a classe `slides`. Agora cada `section` dentro dessa organização já será um slide.\n\n### Slide backgrounds\n\nO legalzão do RevealJS é que eu posso colocar qualquer coisa como fundo do meu slide, vídeos, sites, cores e **GIFS**! E é fácil fácil de fazer funcionar:\n\n```html\n\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n
\n```\n\n### Slide transitions\n\nPodemos fazer diferentes transições entre os slides e para isso, usamos a propriedade `data-transition` dentro da nossa `section`, que é o nosso slide.\n\n```html\n\n
\n\n\n
\n```\n\nPodemos usar também as transições de entrada e saída de cada slide:\n\n```html\n\n
\n\n\n
\n\n\n
\n```\n\n### Transições dentro do slide\n\nDigamos que queremos ir passando item por item de uma lista, sem mostrar ela toda, para isso, basta usarmos `class='fragment'` e esse só será mostrado ao pressionar a tecla de próximo.\n\n```html\n
\n

grow

\n

shrink

\n

fade-out

\n

visible only once

\n

blue only once

\n

highlight-red

\n

highlight-green

\n

highlight-blue

\n
\n```\n\n### Configurações\n\nO RevealJS te permite fazer várias configurações para iniciar a apresentação, como são muitas, prefiro passar [esse link](https://github.com/hakimel/reveal.js#configuration) que diz todas e ainda explica um pouco sobre cada opção.\n\n## Passos para criar uma apresentação do zero!\n\n#### 1 - Baixe os arquivos no github\n\nSó ir no [github deles](https://github.com/hakimel/reveal.js) e mandar baixar, lá já terão os arquivos necessários para criar a apresentação.\n\n#### 2 - Monte um html básico\n\n```html\n!doctype html>\n\n\n \n\n\n\n\n```\n\n#### 3 - Adicione o css e o tema no head\n\n```html\n\n \n Reveal.js Slide Demo\n \n \n\n```\n\nExistem diferentes temas, basta escolher dentro da pasta de \"themes\".\n\n#### 4 - Crie o Markup básico\n\nComo dito um pouco mais acima, precisamos ter um markup com as classes `reveal` e `slides` para tudo passar a funcionar direitinho.\n\n```html\n
\n
\n
Slide Horizontal Simples
\n
\n
Slide Veritical 1
\n
Slide Veritical 2
\n
\n
\n
\n```\n\n#### 5 - Carregue o Javascript no fim do html\n\n```html\n\n\n```\n\n#### 6 - Inicialize o RevealJS e configure\n\nNão adianta só colocar o `js` no final do arquivo, precisamos inicializar para que a mágica aconteça!\n\n```js\n// Veja todas as configurações em:\n// https://github.com/hakimel/reveal.js#configuration\nReveal.initialize({\n controls: true, // mostra as setinhas na parte inferior\n progress: true, // mostra uma barra de progresso\n center: true, // centraliza os slides\n transition: 'slide' // none/fade/slide/convex/concave/zoom\n});\n```\n\n#### 8 - Hospedando no Github\n\nComo sabemos, o Github tem um sisteminha legal chamado [Github Pages](https://pages.github.com/), que permite hospedar páginas estáticas nele. Para hospedarmos algo lá, basta criarmos um projetinho com o nome que desejarmos e ao invés de usar a branch master, usarmos a branch `gh-pages`. Após isso, o projeto vai ficar hospedado em `nomedousuario.github.io/nome-do-projeto`, caso você tenha um domínio configurado, ele ficará como `dominio/nome-do-projeto`. Segue um exemplo de uma das minhas últimas apresentações [Frontend Carioca 2015](https://willianjusten.com.br/frontend-carioca-2015/).\n\n---\n\n### Pow, legal, mas não tem nada mais prático não?\n\n![Qualy Presenter](https://raw.githubusercontent.com/Qualy-org/qualy-presenter/master/src/img/qualy-presenter.png)\n\nEu sou a preguiça em pessoa e sempre que eu puder, vou tentar fazer algo para agilizar e organizar minhas coisas. Pensando nisso, eu criei o [Qualy Presenter](https://github.com/Qualy-org/qualy-presenter), que além de já ter tudo do RevealJS, inclui algumas coisas legais para o meu desenvolvimento.\n\nEu uso o [Jade](http://jade-lang.com/) para escrever meus slides separados de forma mais organizada. Tem também o [Stylus](http://learnboost.github.io/stylus/), que é o pre-processador mais lindinho de todos. E para rodar tudo, compilar e fazer todas as outras mágicas, eu tenho o [GulpJS](http://gulpjs.com/).\n\n### Como funciona o Boilerplate?\n\n#### 1 - Estrutura\n\nTodos os arquivos importantes ficam dentro da pasta [src](https://github.com/Qualy-org/qualy-presenter/tree/master/src), que é onde ficam os arquivos ainda não compilados.\n\nA pasta [src/templates](https://github.com/Qualy-org/qualy-presenter/tree/master/src/templates) é onde ficam os [includes](https://github.com/Qualy-org/qualy-presenter/tree/master/src/templates/inc), estes são responsáveis pela inclusão dos scripts, arquivos de css, descrições, meta-tag e etc.\n\nE o arquivo [src/templates/index.pug](https://github.com/Qualy-org/qualy-presenter/blob/master/src/templates/index.pug) é onde eu monto e faço a chamada dos meus slides.\n\nCada slide fica separado na pasta [src/slides](https://github.com/Qualy-org/qualy-presenter/tree/master/src/slides) e pode ser chamado nessa index na ordem que eu desejar, assim fica tudo mais arrumadinho e me facilita a deletar/chamar ou não um slide =)\n\nOs slides podem ser escritos usando a sintaxe do Pug ou tambem em html normal, então se você não souber escrever em Pug, não se preocupe, escreva em html e tudo irá funcionar igual, basta lembrar de quando for incluir um slide na `index.pug`, coloque a extensão `.html` no final do arquivo. Segue exemplo:\n\n```pug\ndoctype html\nhtml\n include inc/head\n body\n .reveal\n .slides\n include ../slides/slide-1.html\n include ../slides/slide-2.html\n include inc/scripts\n```\n\nQuando o arquivo for compilado, ele irá ler normalmente e juntar tudo para você em um só arquivo.\n\n#### 2 - Baixando o Boilerplate e instalando\n\nBasta ir em [Qualy Presenter](https://github.com/Qualy-org/qualy-presenter/), clonar ou baixar os arquivos na sua máquina.\n\nDepois basta criar um repositório no seu github com os arquivos iniciais. Segue os passos básicos:\n\nVá em `Create new repository` na parte superior do github e preencha os dados corretamente:\n\n![Imagem de criação de um novo repositório no Github](/assets/img/reveal/github-repo.png)\n\n```bash\n// inicializando um repositório git no seu local\ngit init\n\n// adicionando todos os arquivos\ngit add .\n\n// commitando tudo\ngit commit -m \"initial commit\"\n\n// adicionando o repositório remoto do github\ngit remote add origin git@github.com:seu-usuario/seus-slides-lindos.git\n\n// fazendo o primeiro deploy na mão para ligar os repositórios\ngit push -u origin master\n```\n\n#### 3 - Rodando, compilando e fazendo deploy\n\nComo eu disse, uso o Gulp para fazer as mágicas, então a primeira coisa a se fazer é instalar as dependências do `package.json`, para isso é só rodar:\n\n```bash\nnpm install\n```\n\nDepois de tudo instalado, é só rodar `npm start`. Ele possui alguns comandos separados, mas em geral o comando principal utilizado será só `npm start`, que é responsável por fazer todas as compilações necessárias e levantar um servidor com livereload em `localhost:3000`. Os arquivos compilados irão para uma pasta `build`, que irá conter só os arquivos finais que são as pastas: `css`, `js`, `images` e `index.html`.\n\nDepois de tudo feito e compilado, só precisamos fazer o deploy para o github, para isso temos o seguinte comando:\n\n- `npm run deploy`: faz deploy dos arquivos de `build` para o branch `gh-pages`.\n\n\n## Conclusão\n\nBom, é só isso pessoal, espero que esse post ajude e que passem a criar mais apresentações direto no browser ao invés de usarem softwares proprietários. E é claro, quem quiser contribuir no meu [boilerplate](https://github.com/Qualy-org/qualy-presenter/), ficarei eternamente grato! Não sabe o que pode melhorar? Fala comigo que eu com certeza tenho uma lista de desejos, que inclusive deveria colocar lá nas issues, mas estou com preguiça, me pergunta que eu falo e você preenche para mim pelo menos, já vai estar ajudando ahuahuahua\n" }, { "path": "posts/criando-botao-animado-com-css-e-svg.md", "content": "---\nlayout: post\ndate: 2017-08-14T21:14:48.000Z\ntitle: Criando botao animado com CSS e SVG\ndescription: Aprenda a criar uma interação mais bonita para os botões de sua aplicação.\nmain-class: css\ntags:\n - css\n - svg\n - frontend\ncategories: null\n---\n\n## Introdução\n\nFaaala pessoal, tentando manter a promessa de sempre ter um post por semana, lá vamos nós para mais um post. Eu achei esse botão lá no meu codepen e acho que é interessante de ensinar, é extremamente simples, mas bem legalzinho.\n\nNeste post iremos utilizar animações com o famoso [Keyframes do CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Animations/Usando_anima%C3%A7%C3%B5es_CSS) e o efeitinho de [desenhar em SVG](https://willianjusten.com.br/efeito-de-desenhar-com-svg/) que usa `stroke-dashoffset` e `stroke-dasharray`.\n\nEnquanto vou escrevendo esse post, eu vou ouvindo a trilha sonora de [Hellblade Senua's Sacrifice](https://willianjusten.com.br/efeito-de-desenhar-com-svg/), na minha opinião um dos melhores jogos do ano, a trilha sonora mistura sons nórdicos e celtas, vale bastante a pena ouvir e também vale procurar por esse jogo =)\n\n## Criando o botão\n\nPara quem gosta de ver o exemplo já funcionando antes, já vou deixando aqui embaixo a demo do Codepen.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nA ideia desse botão é basicamente para processos em que nós enviamos uma chamada para alguma API e esperamos um resultado para jogar um feedback para o usuário. No exemplo, eu vou colocar só o feedback de `success`, mas vocês estão mais do que livres de criar o `error`, `warning` e o que mais desejarem.\n\nVamos as etapas:\n\n### Antes do Envio\n\nO primeiro de tudo é criar nosso botão limpo, ou seja, o estado `antes do envio`. Que vai ter o seguinte html e css:\n\n```html\n\n```\n\nJá estou adicionando o `id` pois ele será utilizado futuramente em nosso Javascript. E a classe será para adicionarmos os estilos, que serão:\n\n```css\n.send {\n background: none;\n color: white;\n border: 1px solid #45981b;\n border-radius: 70px;\n cursor: pointer;\n font-size: 20px;\n outline: none;\n padding: 15px 70px;\n}\n```\n\nCom isso, vamos ter nosso botão hiper mega simples na tela. Se você estiver partindo do zero, lembre-se de adicionar um `background` no body e alinhamentos/resets se desejar. Adicionei os seguintes detalhes:\n\n```css\n* {\n margin: 0;\n padding: 0;\n}\n\nbody {\n align-items: center;\n background: #333;\n display: flex;\n height: 100vh;\n justify-content: center;\n}\n```\n\n### Estado de Loading\n\nPara o estado de loading, queremos fazer um efeito do botão diminuindo para ficar do tamanho de uma bola e criar um efeito como se estivesse \"pulsando\". E para isso farei o seguinte, irei encapsular o texto de send num `spam`, que assim posso adicionar um `display: none` nesse estado de loading. Outra coisa que irei fazer é diminuir o padding desse botão, transformando ele num círculo e vou utilizar o `transition` para que está mudança de tamanho seja suave.\n\n```html\n\n```\n\nAcima é o nosso html e assim vai ficar o nosso css, utilizando uma classe `.is-loading` para indicar que está carregando/enviando o dado.\n\n```css\n.send {\n // outras propriedades\n transition: padding 500ms ease-in-out;\n}\n\n.send.is-loading {\n padding: 15px 17px;\n}\n\n.is-loading span {\n display: none;\n}\n```\n\n### Adicionando a trigger\n\nComo aqui já temos dois estados o `normal` e o `is-loading` eu vou adicionar já uma trigger para que quando eu clique no botão, ele adicione a classe `is-loading`, assim já vamos conseguir ser capazes de ver a mudança do botão para o círculo.\n\nPara isso é bem simples, vou buscar o elemento e usar o `addEventListener` para verificar o `click` e usarei o `classList.add` para adicionar a nossa classe, ficando assim:\n\n```js\nconst btn = document.getElementById('send')\n\nbtn.addEventListener('click', () => {\n btn.classList.add('is-loading')\n})\n```\n\nFeito isso, já podemos clicar no botão e veremos a animação simples de diminuir. Agora vamos fazer o pulse!\n\n### Criando o efeito de Pulse\n\nPara fazer esse efeito, iremos utilizar o `animation` com o `keyframes`. Precisamos aumentar/diminuir o botão e para isso vamos usar o `scale` e o efeito da sombra expandida será feita com o `box-shadow`, o conjunto pronto então será:\n\n```css\n.send {\n // outras propriedades\n box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5);\n}\n\n.send.is-loading {\n // outras propriedades\n animation: pulse 1.5s infinite;\n}\n\n// nossa animacao\n@keyframes pulse {\n 0% {\n transform: scale(0.9);\n }\n 70% {\n transform: scale(1);\n box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);\n }\n 100% {\n transform: scale(0.9);\n box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);\n }\n}\n```\n\nEu adicionei no estado `0%` que é o `.send` puro um `box-shadow` sem mover nenhuma posição da cor verde e eu então criei 3 diferentes etapas na nossa animação. No primeiro momento, que é o `0%`, eu diminuo a bolinha. Depois um pouco mais da metade da animação, em `70%`, eu volto ao tamanho normal e crio a expansão do `box-shadow` mudando o `blur` (que é a última propriedade do box-shadow) para `50px` e por fim, aos `100%` eu volto o blur para zero e diminuo o botão. Isso com a opção de `infinite` na animação, faz com que o botão fique aumentando/diminuindo com a sombra até que eu remova essa classe.\n\n### Criando trigger para o Success\n\nComo aqui é só exemplo, para que a gente possa simular um `success` vamos utilizar o `setTimeout` que vai adicionar a classe `is-success` e remover a `is-loading` depois de um tempo. Ficando assim:\n\n```js\nconst btn = document.getElementById('send')\n\nbtn.addEventListener('click', () => {\n btn.classList.add('is-loading')\n\n // fake API call\n setTimeout(() => {\n btn.classList.add('is-success')\n btn.classList.remove('is-loading')\n }, 4000)\n})\n```\n\nReparem que com esse código, ao final de `4s` ou `4000ms`, o botão vai voltar ao estado inicial, pois estaremos removendo a classe `is-loading` e ainda não temos estilos para o `is-sucess`, vamos fazê-lo então.\n\n### Criando o estado de Success\n\nPara finalizar nosso botão, a classe `is-success` vai mudar o `background` para ter a cor sólida e vai permanecer também no mesmo formato de círculo que o `is-loading`, para isso vamos adicionar o `background` dentro da `transition` do nosso botão e adicionar os estilos do `is-success` ficando assim:\n\n```css\n.send {\n // outras propriedades\n transition: background, padding 500ms ease-in-out;\n}\n\n.send.is-success {\n background: #45981b;\n padding: 15px 17px;\n}\n\n.is-success span {\n display: none;\n}\n```\n\nDepois disso, vamos fazer o pequeno detalhe do sinal de ok/certo com SVG, para isso vamos adicionar o seguinte SVG dentro do nosso botão.\n\n```html\n\n```\n\nE vamos fazer também uma edição no CSS para ele sumir/aparecer com o `is-sucess`.\n\n```css\nsvg {\n width: 0;\n height: 0;\n}\n\n.is-success svg {\n height: 30px;\n width: 30px;\n}\n```\n\nAgora está faltando só fazer o efeito de desenhar, para isso, já temos uma classe `check` lá no nosso SVG, para que possamos fazer essa animação, que vai ser baseada em `stroke-dashoffset` e `stroke-dasharray`, que você pode ler [melhor sobre aqui](https://willianjusten.com.br/efeito-de-desenhar-com-svg/). O CSS dessa parte ficará:\n\n```css\n.check {\n stroke-dasharray: 130px 130px;\n stroke-dashoffset: 130px;\n transition: stroke-dashoffset 500ms ease-in-out;\n}\n\n.is-success .check {\n stroke-dashoffset: 0px;\n}\n```\n\nReparem que inicialmente eu to movendo o meu desenho todo para fora de visão e no `.is-success .check` eu retorno para o zero, através de uma `transition`, criando o efeito final que queríamos, que é o símbolo ser desenhado na tela. Segue então nosso resultado final:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Conclusão\n\nBom pessoal, foi um post bem simples, mas que pega alguns conceitos bacaninhas para criar um pequeno detalhe na interface, mas que faz a diferença. Espero que tenham gostado do post e estejam a vontade para criar edições do botão e mandar nos comentários =)\n" }, { "path": "posts/criando-componente-de-tipografia-com-styled-components.md", "content": "---\nlayout: post\ndate: 2021-03-06T13:50:06.000Z\ntitle: Criando componente de Tipografia com styled-components\ndescription: Utilizando o poder do polymorphic no styled-components\nmain-class: js\ntags:\n - dicas\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Utilizando o poder do `as` polymorphic\n\nDentro do Styled Components existe um método muito bacana, que é a [polymorphic prop](https://styled-components.com/docs/api#as-polymorphic-prop), que serve para criar um componente e determinar que ele se comporte `como (as)` a tag que você desejar.\n\nIsso é muito legal, pois permite que criemos diferentes estilos, mas sem perder a semântica das tags e não fiquemos reféns a usar `div` em tudo.\n\nNo vídeo acima eu mostro como utilizar o `attr` junto ao `as` exatamente para determinar estilos visuais e também que tipo de tag deve ser.\n\n## Exemplo de código\n\nAo trabalhar com styled components, normalmente nós temos um tema que tem as cores e tamanhos, um exemplo seria:\n\n```javascript\nconst theme = {\r\n colors: {\r\n white: '#eee',\r\n black: '#111',\r\n gray: '#333',\r\n lightGray: 'CCC'\r\n },\r\n sizes: {\r\n xsmall: '1rem',\r\n small: '1.2rem',\r\n medium: '1.6rem',\r\n large: '2.4rem',\r\n xlarge: '3.2rem',\r\n xxlarge: '4.0rem'\r\n }\r\n}\n```\n\nSe você estiver utilizando TypeScript, nós também devemos determinar os types disponíveis para o componente, por exemplo:\n\n```typescript\nexport type HeadingProps = {\r\n color?: keyof typeof theme.colors\r\n size?: keyof typeof theme.sizes\r\n fontWeight?: 100 | 400 | 700\r\n level?: 1 | 2 | 3 | 4 | 5 | 6\r\n}\r\n```\n\nE aí baseado nisso, podemos criar nosso componente, tendo valores default e também podendo receber esses valores passados:\n\n```typescript\nexport const Heading = styled('h1').attrs(({ level }) => ({\r\n as: `h${level}`\r\n}))`\r\n ${({\r\n color = 'white',\r\n size: 'medium',\r\n fontWeight: 700\r\n }) => css`\r\n font-size: ${theme.sizes[size]};\r\n color: ${theme.colors[color]};\r\n font-weight: ${fontWeight};\r\n `}\r\n`\n```\n\nNote que nós utilizamos um `level` exatamente para poder determinar qual vai ser a tag semântica e aí fazemos um concatenação da string no `as` para ter nosso `h${level}` que pode ir de 1 a 6.\n\nCom o componente pronto, você pode usar da seguinte maneira:\n\n```javascript\nEsse é o h1 padrão branco, size medium e negrito\nEsse é um h2 bem grande e cinza\n```\n\nComo você pode ver, esse foi um exemplo bem rápido e simples, mas você pode criar toda uma estrutura para seus Headings, textos e etc. É essa maneira que bibliotecas maiores como o Material Design utilizam.\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/criando-componentes-react-com-testes-lyef-flag.md", "content": "---\nlayout: post\ndate: 2017-08-22T20:36:07.000Z\ntitle: Criando Componentes React com Testes - Lyef-flag\ndescription: Como escrever um componente React com Mocha, Chai, Enzyme e Storybook.\nmain-class: js\ntags:\n - react\n - js\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nFaaaala pessoal, como eu comentei no [post passado](https://willianjusten.com.br/lyef-criando-componentes-desacoplados-em-reactjs/), estarei fazendo mais posts sobre React e claro, irei utilizar o boilerplate da Lyef em questão, que eu descrevi e expliquei bastante no post citado.\n\nEnquanto vou escrevendo, vou ouvindo uma ótima banda chamada [All Them Witches](https://open.spotify.com/artist/29Wmfm1CojrjQ3aQP0FI65), um rock atual mas bem inspirado em clássicos como Led Zeppelin, vale ouvir.\n\nBom, deixar de conversa e vamos lá. O componente de hoje será extremamente simples, mais para podermos ir acostumando com a estrutura da Lyef, onde iremos ter um flow básico para desenvolver. Pretendo criar uma série de posts com diversos componentes sendo criados.\n\n## Sobre o Componente que iremos criar\n\nComo dito, o componente de hoje será bastante simples e se chama [Lyef-flags](https://github.com/lyef/lyef-flags), o código você pode ver no link ali e se quiser, pode ver a [demo aqui](https://lyef.github.io/lyef-flags/). O componente irá utilizar o banco de images do [Flagpedia](http://flagpedia.net/) para poder renderizar a bandeirinha de acordo com a sigla passada e o tamanho definido.\n\n![Exemplo das bandeirinhas](/assets/img/lyef-flags/flags.png)\n\n### Sobre o flow de desenvolvimento com a Lyef\n\nPara trabalhar com a Lyef, existe um flow bem básico a ser seguido, mas que não é nada complicado e não necessariamente precisa de todas as etapas. É só uma forma que eu acho bem otimizada e interessante de fazer as coisas funcionarem e de uma forma legal.\n\nPrimeiro de tudo é necessario clonar o [lyef-react-component](https://github.com/lyef/lyef-react-component) ou gerar com o [Slush-lyef-react](https://github.com/lyef/slush-lyef-react). Uma CLI para facilitar isso também está sendo criada [aqui](https://github.com/lyef/lyef-react-cli).\n\nDepois de clonado/gerado, lembre-se de instalar as dependências todas rodando o comando `npm i`. Feito isso, já podemos prosseguir então.\n\nTodo o processo é baseado em ferramentas ágeis e a primeira dela é a [User Stories](http://www.agilemodeling.com/artifacts/userStory.htm), onde você define coisas básicas da sua aplicação, através de textos bem curtos.\n\nDepois de definidas as `stories` nós iniciamos o desenvolvimento pelos **testes**, já trabalhando com outro método ágil que o TDD (Test Driven Development), você pode ler mais sobre testes [nesse link](https://willianjusten.com.br/entendendo-testes-de-software/).\n\nE para cada teste escrito, nós vamos sempre atualizando o código e passando os testes, lembrando que só se escreve um teste quando se passa no anterior. E depois de etapas de teste, temos também etapa de `refactor` caso seja necessário. No final teremos nosso componente todo testado e graças as `stories` do Storybook já teremos também uma aplicação Demo =D\n\n**Um aviso importante:** o desenvolvimento assim pode parecer lento de início, mas não é e traz uma segurança muito maior no desenvolvimento.\n\n## Escrevendo as Stories\n\nComo dito acima, as `stories` são pequenos textos que definem o funcionamento da aplicação. Escrevendo só um rascunho do nosso componente seria:\n\n- Renderizar bandeira passado a sigla mesmo sem passar `size`\n- Renderizar com tamanho `small`\n- Renderizar com tamanho `normal`\n- Renderizar com tamanho `big`\n- Renderizar com tamanho `ultra`\n- Renderizar mais de uma bandeira ao mesmo tempo\n- Renderizar a mesma bandeira em tamanhos diferentes ao mesmo tempo\n\nNosso componente poderia ser escrito da seguinte forma então:\n\n```html\n\n```\n\nEle vai ser o `Flag` e poderá receber duas `props` que são `country` e `size`. Tendo isso em mente, a gente já pode então definir o código para as stories, para você entender mais sobre como escrever Stories e como elas funcionam, [segue esse link](https://storybook.js.org/basics/writing-stories/). Dentro do arquivo `stories/Main.js` iremos escrever o seguinte código:\n\n```js\nimport React from 'react';\nimport Flag from '../src/Main'; // Nosso Componente\nimport { storiesOf } from '@storybook/react';\n\nstoriesOf('Flag', module)\n .add('small brazil flag without size defined', () => (\n \n ))\n .add('small canada flag', () => (\n \n ))\n .add('normal brazil flag', () => (\n \n ))\n .add('big brazil flag', () => (\n \n ))\n .add('ultra brazil flag', () => (\n \n ))\n .add('more than one small flag', () => (\n
\n \n \n \n \n \n
\n ))\n .add('more than one sized flag', () => (\n
\n \n \n
\n ));\n```\n\nComo pode ver, eu utilizei o `storiesOf` para criar as `stories` do meu componente que será o `Flag` e utilizei o `.add('description')` para colocar cada `story` que nós queriamos.\n\nTendo isso pronto, podemos rodar o Storybook com o comando `npm start` e você irá receber a seguinte tela:\n\n![Tela com as Stories](/assets/img/lyef-flags/stories.png)\n\nComo pode ver, as descrições das `stories` são mostradas ao lado, mas ainda só temos um \"Hello !\" pois nem iniciamos a criação do nosso componente.\n\n## Escrevendo Testes\n\n### Primeira Etapa\n\nComo falado no [primeiro post sobre a Lyef](https://willianjusten.com.br/lyef-criando-componentes-desacoplados-em-reactjs/) iremos utilizar o [Mocha](https://github.com/mochajs/mocha), [ChaiJS](https://github.com/chaijs/chai) e [Enzyme](https://github.com/airbnb/enzyme) para escrever nossos testes de forma bem fácil.\n\nEntão vamos lá para o arquivo `tests/specs/Main.spec.js`, podemos apagar o que tiver lá e deixar só os `imports` necessários e escrever nosso primeiro teste, ficando assim:\n\n```js\n// tests/specs/Main.spec.js\n\nimport React from 'react';\nimport { expect } from 'chai';\nimport { shallow } from 'enzyme';\nimport Flag from '../../src/Main';\n\ndescribe('', () => {\n\n it('should have props for country and size', () => {\n const wrapper = shallow();\n expect(wrapper.props().name).to.be.defined;\n expect(wrapper.props().small).to.be.defined;\n });\n\n});\n```\n\nPrecisamos garantir que o componente vai responder pela tag `` e que essa terá suas `props` recebidas corretamente. Se você rodar o teste com o comando `npm run test:tdd`, não vai quebrar pois já tem um código sujo lá em `src/Main.js` criando o \"Hello !\", mas você vai receber um warning até relacionado a props não passada. Mas claramente vamos arrumar o código lá então:\n\n```js\n// src/Main.js\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Flag = ({ country, size }) => (\n

\n);\n\nFlag.propTypes = {\n country: PropTypes.string.isRequired,\n size: PropTypes.string,\n};\n\nexport default Flag;\n\n```\n\nReparem que eu defini então o nosso componente para usar o nome `Flag` como default e também já defini nossas `props` como o teste determinava. Reparem que eu defini o `country` como `isRequired` visto que para renderizar a bandeira eu preciso sempre desse valor, já para o `size` eu só defini que preciso de uma `string`, mas deixei aberto para que possa ter ou não o valor definido.\n\n### Segunda Etapa\n\nBeleza, temos aí o início do nosso componente, mas obviamente tá longe do que queremos. Nós queremos renderizar uma `img` com a bandeira definida né? Então o próximo passo é verificar se estou renderizando uma `img` ao montar o componente, escrevendo o próximo teste:\n\n```js\n// tests/specs/Main.spec.js\n\n...\n\nit('should render an image element', () => {\n const wrapper = shallow();\n expect(wrapper.find('img')).to.have.length(1);\n});\n\n...\n\n```\n\nAo adicionar esse novo teste, nossos testes quebraram, informando `AssertionError: expected { Object (root, unrendered, ...) } to have a length of 1 but got 0`, ou seja, não tem nenhuma `img` renderizada. Para resolver isso de um jeito bem fácil, é só ir no nosso componente e adicionar isso:\n\n```js\n// src/Main.js\n\nconst Flag = ({ country, size }) => (\n \"\"\n);\n```\n\nE prontinho, mais um teste passando! Só que ainda longe do que queremos.\n\n### Terceira Etapa\n\nAgora já renderiza uma `img`, mas cadê a bandeirinha? A `src` sequer tá preenchida! Vamos mudar isso né, então vamos a mais um teste:\n\n```js\n// tests/specs/Main.spec.js\n\nit('should get have br on img src when country br is passed', () => {\n const wrapper = shallow();\n expect(wrapper.find('img').props().src.includes('br')).to.equal(true);\n});\n\n```\n\nNesse meu teste, eu estou fazendo o seguinte, estou checando se dentro da `src` da imagem eu tenho a string `br`, pois eu sei que a url da bandeira do brasil é `http://flagpedia.net/data/flags/small/br.png`, ou seja, utiliza o `br` ali. Para fazer o nosso teste passar, lembrando que:\n\n> Os testes precisam ser resolvidos do jeito mais fácil e \"burro\" possível, depois existem etapas de refatoração.\n\nNós podemos alterar o nosso componente para o seguinte código:\n\n```js\n// src/Main.js\n\nconst Flag = ({ country, size }) => (\n \"br\"\n);\n```\n\nE prontinho! Nosso teste está passando!\n\n### Quarta Etapa\n\nJá estamos chegando lá, a bandeirinha tá inclusive aparecendo agora, mas o código tá `hardcoded`. Qual melhor maneira de evitar isso num teste? Escrever mais um teste similar, só que agora usando uma outra bandeira, ficando assim:\n\n```js\n// tests/specs/Main.spec.js\n\nit('should get have ca on img src when country ca is passed', () => {\n const wrapper = shallow();\n expect(wrapper.find('img').props().src.includes('ca')).to.equal(true);\n});\n\n```\n\nClaro que o teste quebrou, pois só temos a bandeirinha do Brasil sempre. Para corrigir o código, vamos finalmente iniciar a codificação. Para essa primeira etapa, eu vou alterar a `url` da imagem só na parte da sigla, vou utilizar o [Template String](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings) para facilitar nessa concatenação. E como é um código JS, eu preciso encapsular isso entre as chaves também:\n\n```js\n// src/Main.js\n\nconst Flag = ({ country, size }) => (\n {country}\n);\n```\n\nAgora falta só fazer a parte do tamanho, lembrando que se eu não passar nenhum valor, eu preciso que o tamanho seja `small`.\n\n### Quinta Etapa\n\nAgora já pensando na parte do `size`, precisamos criar um teste que dado um diferente `size` passado, eu mude na url o tamanho. Vamos fazer assim:\n\n```js\n// tests/specs/Main.spec.js\n\nit('should get have normal on img src when size normal is passed', () => {\n const wrapper = shallow();\n expect(wrapper.find('img').props().src.includes('normal')).to.equal(true);\n});\n\n```\n\nAqui eu quero verificar que dado `size=\"normal\"` a url precisa conter a string `normal`. E claro, quebrou! Vamos então ao código para corrigir isso:\n\n```js\n// src/Main.js\n\nconst Flag = ({ country, size }) => (\n {country}\n);\n```\n\nE com isso, o teste passou normalmente.\n\n### Sexta Etapa\n\nMas e se eu não passar `size` nenhum? Eu preciso também garantir que vai vir `small` né? Vamos criar o seguinte código de teste:\n\n```js\n// tests/specs/Main.spec.js\n\nit('should get have small on img src even when size is not passed', () => {\n const wrapper = shallow();\n expect(wrapper.find('img').props().src.includes('small')).to.equal(true);\n});\n\n```\n\nCom isso, nosso teste quebrou, mostrando que ainda falta esse pedaço. Para resolver isso vou usar o [default parameter](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Parametros_Predefinidos), garantindo que `size` vai ser `small` caso não receba nada.\n\n```js\n// src/Main.js\n\nconst Flag = ({ country, size = 'small' }) => (\n {country}\n);\n```\n\nE prontinho, nosso teste passou!\n\n### Sétima Etapa\n\nAgora só precisamos garantir que nosso código vai funcionar com os tamanhos `big` e `ultra` também. E para isso vamos adicionar os testes:\n\n\n```js\n// tests/specs/Main.spec.js\n\nit('should get have big on img src when size big is passed', () => {\n const wrapper = shallow();\n expect(wrapper.find('img').props().src.includes('big')).to.equal(true);\n});\n\nit('should get have ultra on img src when size ultra is passed', () => {\n const wrapper = shallow();\n expect(wrapper.find('img').props().src.includes('ultra')).to.equal(true);\n});\n\n```\n\nE dessa vez não precisamos escrever mais nenhum teste, pois o código já está passando! Se você rodar agora o Storybook novamente com `npm start` você irá ver todo ele funcionando com as bandeirinhas! E você sequer precisou ficar vendo a tela para garantir que está funcionando, pois já tinha teste para tudo =D\n\n![Storybook Rodando](/assets/img/lyef-flags/storybook.gif)\n\n## Conclusão\n\nBom galera, é isso aí! Esse foi o primeiro post dessa série que pretendo fazer sobre criação de componentes React com Testes. Espero que tenham gostado e qualquer dúvida ou dica que tiverem, postem aí nos comentários.\n\nLembrando que o processo de User Stories e TDD pode parecer difícil e demorado no início, mas depois de um tempo, ele agiliza bastante o processo e seu desenvolvimento fica muito mais seguro e bem orientado dessa forma =)\n" }, { "path": "posts/criando-componentes-usando-so-es6.md", "content": "---\nlayout: post\ndate: 2017-07-07T13:09:11.000Z\ntitle: Criando componentes usando só ES6\ndescription: Muita gente usa React, outros usam Vue e outros Angular. Por que não só ES6?\nmain-class: js\ntags:\n - js\n - es6\n---\n## Introdução\n\nFaaaaala pessoal, hoje eu venho trazendo um post bem legal, que sempre acabo me perguntando. Será que precisamos usar React/Vue/Angular para criar componentes sempre? Se for algo simples, por que não usar ES6 puro?\n\nNesse post irei falar sobre uma propriedade do ES6 que curto muito que é a [Template Strings](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings).\n\nE durante esse post eu vou ouvindo a trilha sonora de um dos mais belos jogos desse ano [Horizon Zero Dawn](https://open.spotify.com/album/5ZAaYcFudS0BtKhWJqeMCH), o jogo é incrível e a trilha sonora é ainda melhor, bota para ouvir, garanto que não vai se decepcionar!\n\n## Trabalhando com Strings no passado\n\nAs `strings` são representadas no JavaScript utilizando as aspas simples `'minha string'` ou aspas duplas `\"minha string\"`. Mas para algumas tarefas em JS, trabalhar com strings era bem chatinho, como, por exemplo, para trabalhar com múltiplas linhas, o código precisava ser assim:\n\n```js\nconst text = 'Minha primeira linha\\n' +\n 'Minha segunda linha\\n' +\n 'Minha terceira linha.';\n\nconsole.log(text);\n\n// > Minha primeira linha\n// Minha segunda linha\n// Minha terceira linha\n```\n\nRepare que precisávamos utilizar o operador `+` para concatenar as strings e não só isso, precisávamos também utilizar o `\\n` para indicar uma quebra de linha.\n\nOutro caso em que era bem chatinho trabalhar com strings era essa parte da concatenação, onde precisávamos quebrar a string e usar o `+` para juntar com nossa variável. Dessa forma:\n\n```js\nconst name = 'Willian';\n\nconsole.log('Hello ' + name + '!');\n\n// > Hello Willian!\n```\n\nPrecisávamos inclusive prestar atenção para não esquecer o espaço depois da palavra, porque senão juntava com a variável e ficava tudo horrível.\n\n## Trabalhando com Strings no ES6\n\nCom a chegada do ES6, veio essa coisa maravilhosa que é o Template String. Agora basta utilizarmos o símbolo de crase **`** na string e conseguimos criar interpolações e concatenar muito mais facilmente.\n\nPara trabalhar com múltiplas linhas ficaria assim:\n\n```js\nconst text = `Minha primeira linha\n Minha segunda linha\n Minha terceira linha.`;\n\nconsole.log(text);\n\n// > Minha primeira linha\n// Minha segunda linha\n// Minha terceira linha\n```\n\nE para trabalhar com interpolação, podemos utilizar a sintaxe `${variavel}` dentro da string, desse forma:\n\n```js\nconst name = 'Willian';\n\nconsole.log(`Hello ${name}!`);\n\n// > Hello Willian!\n```\n\nOutra coisa legal é que podemos adicionar funções dentro dessas strings para rodar, um exemplo:\n\n```js\nfunction sum(a, b) {\n return a + b;\n}\n\nconsole.log(`2 + 2 = ${sum(2, 2)}`);\n\n// > 2 + 2 = 4\n```\n\nIsso abre diversas possibilidades e facilita demais na escrita e leitura do nosso código.\n\n## Criando templates\n\nAí você vem e pergunta: \"Tá Willian, mas o que isso tem a ver com componentes?\". E eu respondo, tem tudo! Antigamente nós utilizávamos coisas como [Handlebars](http://handlebarsjs.com/) e outros mais para poder criar templates e assim formar componentes. Mas agora com o Template String, nós podemos usar esse poder para criar nossos próprios componentes! =D\n\nSe você quiser já ver o que vamos criar direto, só acessar esse [link do codepen](https://codepen.io/willianjusten/pen/ZyMMbd).\n\n### Criando método para montar o markup\n\nO primeiro componente que iremos criar será o componente onde mostra as informações do album, conforme a imagem abaixo:\n\n![Imagem mostrando capa do album, o nome do mesmo e a quantidade de músicas](/assets/img/componentes-es6/album-info.png)\n\nPara isso teríamos um Markup da seguinte forma:\n\n```html\n \"Ten\"\n

Ten

\n

Pearl Jam

\n

11 Músicas

\n```\n\nE transformando isso para o nosso lindo ES6, ficaria assim então:\n\n```js\nfunction createMarkupAlbum(data) {\n return (`\n \"${data.name}\"\n

${data.name}

\n

${data.artists}

\n

${data.tracks.length} Músicas

\n `);\n}\n```\n\nOnde o `data` é a informação que pode vir de uma `API`, `json` ou até mesmo uma `variável`, como utilizada no exemplo.\n\n### Criando método para renderizar o markup\n\nDepois de criada o método de montar o markup, precisamos renderizar na tela e para isso é bastante simples. Precisamos basicamente selecionar um elemento do DOM e usar o `innerHTML` para apendar o nosso markup criado, que nada mais é que uma string =D\n\n```js\nfunction renderAlbumInfo(data, element) {\n const markup = createMarkupAlbum(data);\n element.innerHTML = markup;\n};\n```\n\nRepare que o meu método chama internamente o `createMarkupAlbum` que vai montar o nosso markup recebendo a informação do nosso `data` passado e depois disso, apenderemos o markup no `element` definido.\n\n### Chamando o método e pintando na tela\n\nCom os nossos métodos criados, precisamos só então criar um elemento no html para apendar nosso componente na tela e chamar o método para fazê-lo.\n\n```js\nconst album = document.getElementById('album');\nrenderAlbumInfo(data, album);\n```\n\n### Criando markups mais complexos e utilizando funções\n\nCom o código feito acima, já temos as informações do album, mas ainda faltam as músicas ao lado. Conforme a imagem abaixo:\n\n![Lista de músicas do album](/assets/img/componentes-es6/album-list.png)\n\nSe vocês repararem, dentro dessa lista temos um padrão básico, que é sempre: `Número da Música - Nome da Música - Tempo`. O que podemos fazer então é criar um loop para criar música depois de música e então apendar a lista inteira.\n\nNosso conjunto de dados para as `tracks` é um array da seguinte forma:\n\n```js\n\"tracks\" : [\n {\n \"duration_ms\" : 231367,\n \"spotify\" : \"https://open.spotify.com/track/4nRyBgsqXEP2oPfzaMeZr7\",\n \"name\" : \"Once\",\n \"track_number\" : 1\n }, {\n \"duration_ms\" : 292580,\n \"spotify\" : \"https://open.spotify.com/track/6QewNVIDKdSl8Y3ycuHIei\",\n \"name\" : \"Even Flow\",\n \"track_number\" : 2\n }...\n]\n```\n\nPara isso podemos utilizar o método `map` que vai iterar cada item dessa lista e vai criar o markup para nós. Ao final de cada iteração vamos usar o método `join('')` para unir as strings criando a lista completa. O código fica assim:\n\n```js\nfunction createMarkupTracks(tracks) {\n return tracks.map(track => `\n
\n

${track.track_number}

\n

${track.name}

\n

${convertToHumanTime(track.duration_ms)}

\n
`).join('');\n}\n```\n\nRepare que ali eu ainda tenho uma função `convertToHumanTime`, ela é necessária pois no meu array eu estou recebendo o tempo em `ms`, que não é tão legível para nós. Então como eu posso utilizar funções dentro dos meus templates, eu crio essa função do lado de fora, que fica desse jeito:\n\n```js\nfunction convertToHumanTime(duration) {\n let s = parseInt((duration / 1000) % 60, 10);\n const m = parseInt((duration / (1000 * 60)) % 60, 10);\n\n s = (s < 10) ? `0${s}` : s;\n\n return `${m}:${s}`;\n}\n```\n\nDepois disso é só criar a função para apendar esse markup igual feito anteriormente:\n\n```js\nfunction renderAlbumTracks(data, element) {\n const markup = createMarkupTracks(data);\n element.innerHTML = markup;\n}\n\nconst list = document.getElementById('list');\nrenderAlbumTracks(data.tracks, list);\n```\n\nE é isso gente! Nosso componente está prontinho e renderizado na tela! =D\n\nPara ver o código completo, só ir lá no [link do codepen](https://codepen.io/willianjusten/pen/ZyMMbd).\n\n### Separando em diferentes arquivos e usando import/export\n\nSó para complementar o código, podemos separar esses métodos e importá-los num arquivo `main` que será responsável por fazer tudo isso. Um exemplo seria:\n\n```js\nfunction createMarkup(data) {\n return (`\n \"${data.name}\"\n

${data.name}

\n

${data.artists[0].name}

\n

${data.tracks.total} Músicas

\n `);\n}\n\nexport default function renderAlbumInfo(data, element) {\n const markup = createMarkup(data);\n element.innerHTML = markup;\n\n return data;\n};\n```\n\nRepare que eu estou exportando somente a função `renderAlbumInfo`, deixando assim o método `createMarkup` como privado, assim não corro o risco da criação do meu markup ser poluído por outro código.\n\nE aí no meu arquivo `main` eu teria algo como:\n\n```js\nimport renderAlbumInfo from './AlbumInfo';\n\nconst albumInfo = document.getElementById('album-info');\n\nspotify.album.getAlbum(albumId)\n .then(data => renderAlbumInfo(data, albumInfo))\n```\n\nOnde o meu `data` está sendo extraído da própria API do Spotify e alimentando o meu método `renderAlbumInfo`.\n\n## Conclusão\n\nÉ isso galera, sei que o React/Vue/Angular fazem muito mais do que isso, mas as vezes nem precisamos deles se quisermos criar componentes básicos e as vezes até complexos xD\n" }, { "path": "posts/criando-e-exportando-svg-para-web.md", "content": "---\nlayout: post\ndate: 2016-02-06T15:29:04.000Z\ntitle: \"#16 - Criando e Exportando SVG para Web\"\ndescription: Aprenda como otimizar seu SVG para ter a melhor entrega para web.\n Se você é designer ajude seu amigo dev.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Introdução\n\nFala pessoal, faz um tempo que não tenho postado aqui, como falei em um post anterior, estou trabalhando na [HUGE](http://hugeinc.com), tem sido bastante divertido, mas também tenho trabalhado bastante. Com isso, tive que dar uma desligada rapidinho, mas já estou de volta =D\n\nEu já estava para fazer um post parecido, mas alguns amigos lá da HUGE me perguntaram sobre e eu resolvi fazê-lo. Ele será fortemente baseado [num post da Sara Soueidan](https://sarasoueidan.com/blog/svg-tips-for-designers/), que faz um trabalho incrível de SVG pelo mundo afora.\n\n## Importância da otimização\n\nAssim como as imagens vem com várias informações desnecessárias, da qual podemos remover utilizando otimizadores como Tinypng, Imageoptim, etc, o SVG também vem com bastante informação inútil ou não otimizada. Esse peso a mais prejudica os usuários que não possuem uma banda larga boa e até mesmo o browser, que pode sofrer na renderização de alguns elementos mais complexos, que não precisavam ser.\n\nAs dicas que vou passar são direcionadas para aqueles que utilizam o Adobe Illustrator, mas que podem ser aplicadas no Sketch também sem problema algum. O motivo disso é porque o Illustrator ainda é o mais utilizado e ele também gera mais sujeira que o Sketch.\n\nBom, vamos parar de blabla e partir direto para o que realmente importa.\n\n## 1 - Crie formas simples usando os elementos de forma Simples, não ``\n\nÉ claro que conseguimos fazer basicamente tudo com ``, mas se você quer criar formas básicas, porque não utilizar as formas básicas que o SVG já provê?\n\nNós temos: ``, ``, ``, ``, `` e ``. Esses elementos são mais fáceis de ler e dar manutenção, visto que suas propriedades são bem descritivas.\n\nAs formas básicas vem com um conjunto de atributos que permitem manipular posição (`x`, `y`, `cx`, `cy`) assim como suas dimensões de largura e altura.\n\nSegue um exemplo da diferença entre a criação de um círculo via forma básica e via path:\n\n```html\n\n\n\n\n\n```\n\nUm exemplo bem bacana sobre a importância da otimização e o quão impactante é. A Google não faz muito tempo, refez sua logo se baseando em SVG e no quanto podia otimizar/economizar com isso.\n\nA logo inicial, possuía vários pontos e detalhes:\n\n![Logo antiga do Google](https://i.kinja-img.com/gawker-media/image/upload/s--zmSvRcRR--/c_scale,fl_progressive,q_80,w_800/1416113051534017317.png)\n\nPara melhor performance, a Google resolveu trabalhar com formas básicas, diminuindo e muito o uso de pontos e paths.\n\n![Nova Logo do Google](https://i.kinja-img.com/gawker-media/image/upload/s--IcQEd58x--/c_scale,fl_progressive,q_80,w_800/1416113051641962533.png)\n\n## 2 - Converta textos para Outlines... Ou não...\n\nPara converter textos para outlines:\n\n- Selecione o texto que você quer converter\n- Escolha **Type > Create Outlines**\n\n![Exemplo convertendo texto para outlines](https://sarasoueidan.com/images/convert-to-outlines.png)\n\n### Prós:\n\n* Textos convertidos para outlines vão preservar a font-face utilizada, sem precisar de uma web font para isso. Isso significa que você pode salvar algumas requisições HTTP e também não vai correr o risco da fonte ser renderizada diferente.\n* Outlines são boas para casos de logos em que a forma e fonte precisam ser preservadas.\n\n### Contras:\n\n- Textos convertidos para outlines não são mais texto real. Eles são somente `` que formam o contorno do texto. Consequemente, o texto passa a ser inacessível, não indexável e não selecionável. No caso do uso de logos que são outline, use um `alt text` se a logo for adicionada como `` ou elementos de acessibilidade do SVG como `` para prover textos alternativos para os leitores de tela.\n\nA Sara recomenda e eu também, a leitura sobre como fazer o SVG mais acessível, nesses dois artigos:\n\n* [Tips for creating Acessible SVG](http://www.sitepoint.com/tips-accessible-svg/)\n* [Using Aria to Enhance SVG Acessibility](https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/)\n\n\nOutro contra é que se você converter textos para outlines, pode acabar aumentando bastante o tamanho do arquivo SVG, dependendo da complexidade da fonte, com esse aumento de código, você também pode acabar afetando a leitura do código gerado. Segue um exemplo do texto convertido e o outro não:\n\n![Exemplo de texto convertido e não convertido](https://sarasoueidan.com/images/text-output.jpg)\n\n## 3 - Simplifique seus Paths\n\nUm path é um conjunto de pontos que são definidos por um conjunto de coordenadas. Quanto menor o número de pontos, menor é o código gerado no atributo `d` do path e, consequentemente, menor é o tamanho do arquivo final. É sempre ter arquivos pequenos para melhorar a performance como um todo.\n\nPara simplificar um path:\n\n- Selecione o path\n- Vá em **Object > Path > Simplify**\n- Modifique as precisões, ângulos e etc.\n\n**Obs.:** lembre de deixar o preview ativado para você ver se o Path não está sendo muito alterado, as vezes você pode destruir seu path se diminuir muito a precisão.\n\n![Paths sendo simplificados](https://sarasoueidan.com/images/simplify-paths.png)\n\n![Opções para simplificar os Paths](https://sarasoueidan.com/images/path-points.png)\n\nTem um video tutorial criado pela Adobe para explicar esse processo, se você gosta mais de vídeos, dê [uma olhada lá](http://tv.adobe.com/watch/companion-videos-for-inspire/svg-for-the-web-using-the-simplify-panel-in-illustrator-cc/).\n\nVocê também pode simplificar os paths usando a `Warp Tool`. Tem um [artigo na Smashing Magazine](http://www.smashingmagazine.com/2011/07/examples-and-tips-for-using-illustrator-s-warp-tools/) explicando mais sobre o uso dessa ferramenta.\n\n## 4 - Evite juntar Paths a menos que você não precise controlá-los individualmente\n\nMuitos designers estão acostumados a juntar os paths sempre que possível, isso pode ser bom ou ruim. Por quê? Bom, quando você junta todos os paths, o desenvolvedor acaba perdendo a possibilidade de controlar diferentes partes do objeto, ficando impossível de realizar certas animações.\n\nPortanto, se você quiser animar algum elemento do SVG ou até mesmo pintar de diferentes cores, por favor, não junte os paths. Se é só um ícone e você tem certeza que não haverá nenhuma manipulação, então faça o merge sem problemas.\n\nPara juntar paths:\n\n- Selecione os paths que deseja juntar\n- Vá até **Window > Pathfinder**\n- Clique na opção de **merge**, terceira opção de baixo para cima da esquerda para direita. Assim como mostrada no screenshot abaixo:\n\n![Merge Paths](https://sarasoueidan.com/images/merge-paths.png)\n\n## 5 - Crie filtros usando SVG filters, não filtros de Photoshop\n\nSe você utilizar filtros do Photoshop, ao abrir no Illustrator ele irá transformar esses efeitos em imagens rasterizadas, o que não desejamos. O SVG possui filtros incríveis que fazem basicamente a mesma coisa, porém de forma mais leve e através de código.\n\nPara gerar efeitos via SVG:\n\n- Vá em **Efects > SVG Filters**\n- Escolha e use um dos filtros disponíveis no painel.\n\n![Usando filtros SVG](https://sarasoueidan.com/images/svg-filters-in-ai.png)\n\n## 6 - Encaixe a artboard ao desenho\n\n**Se você é designer, peloamordedeus faça isso!** Você desenvolvedor já pegou um ícone SVG, foi colocar num lugar e reparou que ele não ficou do tamanho desejado, contendo uns espaços brancos? Na maioria dos casos, isso acontece pois ao exportar o SVG, o designer deixou espaços brancos dentro da [Viewport](https://sarasoueidan.com/blog/svg-coordinate-systems).\n\nPara que isso não aconteça, você precisa garantir que a artboard tem as mesmas dimensões da imagem/vierport, não salvando espaços em branco inúteis.\n\nPara encaixar a artboard ao desenho:\n\n- Selecione toda a arte\n- Vá em **Object > Artboards** e escolha a opção **Fit to Artwork Bounds**\n\n## 7 - Use bons nomes, grupos e convencões nas camadas\n\nSabemos que isso é uma coisa idiota, mas é importante de se falar, por algumas razões:\n\n- **Os ids e classes que você usa no editor gráfico vão ser passados para o código gerado.** Quanto mais semântico e explicativos são seus nomes, menos confusão e ruído gerado com o seu desenvolvedor. Não precisa ser neurótico e querer os nomes perfeitos. Mas, por exemplo, se você estiver desenhando um carro, crie um id para grupo ou layer das rodas, quanto mais fácil de lermos esse código gerado, melhor para a manutenção.\n- **Use camadas(layers) para agrupar elementos relacionados.** Camadas são traduzidas em grupos no código, o que auxilia a identificação. Crie grupos/camadas principalmente se você deseja animá-los como um todo. Muito tempo gasto do desenvolvedor é organizando e reagrupando elementos, se você como designer já fizer isso, vai ajudar muito no processo.\n\n## 8 - Escolhas as melhores opções de exportar para web\n\nEm Novembro de 2015 o Illustrator CC foi atualizado, ganhando um novo workflow para exportar SVG, que permite algumas opções como exportar objetos individuais ou um artboard inteiro. Vale dar uma conferida [nesse artigo](https://helpx.adobe.com/illustrator/how-to/export-svg.html).\n\nSe você não tem essa versão, não tem problema, segue como pode ser feito com versões mais antigas:\n\n- Escolha **File > Save As**\n\n![Save as](https://sarasoueidan.com/images/file-save.png)\n\n- Na parte inferior, onde ficam os formatos, escolha **SVG**\n\n![Save as SVG](https://sarasoueidan.com/images/save-as.png)\n\n- Clique em Salvar\n\nQuando você clicar em salvar, uma outra janela irá abrir contendo um conjunto de opções:\n\n![Opções para salvar SVG](https://sarasoueidan.com/images/export-options.png)\n\nAs opções mostrada acima são as mais recomendadas para se salvar um SVG para web.\n\nA opção de `Image Location` especifica se qualquer imagem rasterizada será inserida inline no seu SVG ou como um link externo dentro do SVG. Isto vai depender do que você precisa/usa. Eu não aconselho que tenha nada rasterizado em seu SVG, isso aumenta muito o peso, além de em 99% das vezes ser desnecessário. Se tiver algo rasterizado, verifique se não pode ser feito de outra maneira, dentro do próprio SVG.\n\nA opção de `CSS Properties` é uma das mais importantes para a parte de desenvolvimento. Se você escolhe para que fique numa `<style>` tag, pode correr o risco de outros SVG's possuírem uma mesma classe e isso acabar quebrando outros elementos de tela, tenha em mente que você definiu todos os elementos com prefixos específicos e bem separados. Se você escolher `presentation attributes`, tudo já estará no elemento e vai facilitar a vida do desenvolvedor.\n\nQuanto menor o número de casas decimais (`Decimal Places`), menor será o tamanho do SVG. Uma casa decimal já é o suficiente na maioria das vezes.\n\nUma outra opção muito importante é **Use Artboards**, se você tem o costume de criar várias artboards para seus ícones, vai gostar dessa opção. Ela irá gerar múltiplos arquivos SVG, um para cada artboard.\n\n![Use artboards](https://sarasoueidan.com/images/use-artboards.png)\n\nPor exemplo, se você for criar um Sprite de SVG para um sistema de ícones, existem várias formas de se criar e usar sprites, e para cada técnica se tem uma abordagem diferente: uma técnica requer que os ícones estejam separados, a outra requer que todos os ícones estejam em um só arquivo.\n\nVocê pode ler mais sobre essas técnicas:\n\n- [An Overview of SVG Sprite Creation Techniques](https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/)\n- [Usando SVG Sprites](https://willianjusten.com.br/usando-svg-sprites/)\n- [Sistema de ícones em SVG](https://willianjusten.com.br/sistemas-de-icones-em-svg/)\n\n## Otimizar ou não otimizar...\n\nÉ recomendável, que após criar as imagens, mesmo que já melhor exportadas, utilizemos ferramentas para otimizar ainda mais. A Sara recomenda o uso do [SVGO](https://github.com/svg/svgo), que de fato é uma excelente ferramenta. Se você quiser uma ferramenta visual para otimizar, eu aconselho muito o [SVGOMG](https://jakearchibald.github.io/svgomg/), que tem várias opções, além de um preview para ver a otimização.\n\nEnquanto estive no Globoesporte, também precisei criar sprites contendo todos os escudos dos times, além de fazer várias otimizações e com isso criei dois projetinhos separados para esse tipo de otimização:\n\n- [SVG Gulp Optimizer](https://github.com/willianjusten/svg-gulp-optimizer)\n- [SVG Grunt Optimizer](https://github.com/willianjusten/svg-grunt-optimizer)\n\nSão projetinhos bem simples, que fazem otimização, criam os arquivos \"bundle\" contendo todas imagens em um só arquivo e geram fallback para browsers que não suportem sprite SVG. Aceito sugestões de melhorias, até porque não tenho tido muito tempo para atualizá-los.\n\n## 9 - Se comunique, se comunique cedo.\n\nPossivelmente a dica mais importante é que você se comunique, e faça isso cedo, durante o processo de design ainda.\n\nQuase todas as dicas acima requerem um pouco de conhecimento da fase de desenvolvimento e o que o desenvolvedor pretende fazer para adicionar o SVG na página, animar e criar os scripts necessários. Portanto, a não ser que você seja a mesma pessoa que vai tomar as decisões em todas as fases e a menos que você queira perder uma grande parte do tempo editando e modificando o SVG o tempo todo, você precisa ter certeza do que o desenvolvedor precisa para entregar o SVG na melhor abordagem possível. Se o projeto que você está trabalhando possui uma deadline, provavelmente você não pode perder uma grande parte do tempo fazendo mudanças e revisões dos assets, que você pode evitar se comunicando rápido.\n\nDesigners e desenvolvedores podem ser melhores amigos. A natureza do SVG requer tanto a fase de design como a de desenvolvimento e que uma esteja aberta a outra, sendo assim, requer que os designers e desenvolvedores se comuniquem, antes do processo de design começar e durante todo o processo também.\n\n## Conclusão\n\nBom galera, espero que esse artigo tenha ajudado a vocês. Que no futuro vocês usam os SVG's mais otimizados do mundo e façam projetos maravilhosos, sempre com uma boa comunicação entre designers e desenvolvedores. Deixo também um obrigado a [Sara Soueidan](https://twitter.com/SaraSoueidan), que é uma grande evangelizadora de SVG e que sempre traz um conteúdo excelente para nossa área.\n" }, { "path": "posts/criando-efeito-parallax-no-header.md", "content": "---\nlayout: post\ndate: 2016-04-16T13:39:03.000Z\ntitle: Criando efeito parallax no header\ndescription: Aprenda a fazer esse efeito simples que pode deixar seu site ainda mais bonito.\nmain-class: css\ntags:\n - css\n - frontend\n - parallax\ncategories: null\n---\n\n## Introdução\n\nE aí pessoal, aproveitando que não escrevo há um tempinho aqui, resolvi fazer esse post bastante simples, explicando como fiz o novo estilo do header do meu blog. Aproveito para pegar feedbacks do que acharam, eu confesso que ainda não sei se gostei ou não =/\n\nVou ouvindo uma banda bem maneira chamada [Dark Stares](https://open.spotify.com/album/4I63EqCJ5b8sfJyWSo5bvS), um rock bem maneiro com guitarras distorcidas, baixos e baterias bem destacados.\n\n## Motivação\n\nEu estava com uns amigos brincando com um [crawler](https://github.com/willianjusten/crawler-huge) que eu fiz um tempinho atrás (totalmente experimental, cheio de erros e que ainda não tive tempo de mexer), que rastreia as urls do site e tira screenshots.\n\nQuando eu fui tirar screenshots do meu blog, notei que todas acabavam ficando com o header percorrendo toda a página e aí nem o texto aparecia. Isso acontece, pois como o crawler não tem uma viewport e eu havia definido uma altura de 100% da tela para o header, ele acabava ocupando tudo.\n\nFoi aí que um amigo falou que gostava muito do header do [blog do Invision](http://blog.invisionapp.com/designtalk-a-license-for-creative-advocacy/), eu olhei e pensei, pow isso aí é simplão, dá para fazer com css rapidinho e o detalhe do scroll com js puro. Acabou que eu fiz um para mim...\n\nSe você quiser ver a demo feita para esse post, [clique aqui](https://labs.willianjusten.com.br/header-parallax/).\n\n## Parte do CSS\n\nO esquema é o seguinte, para dar a impressão que o conteúdo está passando por cima do header, precisamos trabalhar com a propriedade `position: fixed`, ela é responsável como o nome já diz, por deixar os elementos fixos na tela, ou seja, sem serem afetados pelo scroll da página. Nosso header também precisa ter uma altura definida e uma largura de 100% para se acomodar bem a página.\n\nNosso header então vai ter as seguintes propriedades:\n\n```css\n.header-paralax {\n background-image: url('img/header.jpg');\n background-size: cover;\n width: 100%;\n position: fixed;\n height: 600px;\n}\n```\n\nDepois de feito o header, só precisamos ajustar o conteúdo da parte que vai sobrepor o header. Quando colocamos um elemento com `position: fixed` ele passa a não ter \"espaço ocupado\" e todo conteúdo já sobrepõe ele na hora. Mas não queremos isso, senão o header nem apareceria. Nós precisamos pegar o nosso conteúdo e espaçar exatamente da altura do header, no nosso exemplo `height: 600px`. Para isso, definimos um `position: relative`, que fará nosso conteúdo respeitar a nova posição e daremos um `top: 600px`.\n\nO problema de fazermos isso é que se o conteúdo não tiver um fundo, na hora que ele sobrepôr o header, ele vai ficar todo vazado e feio, para isso, definimos um `background` com a cor que desejarmos, assim ele vai de fato, fazer sumir o header.\n\nAs propriedades do nosso exemplo vão ficar assim:\n\n```css\nmain {\n background: #e7e3da;\n position: relative;\n top: 600px;\n font-family: 'Raleway', sans-serif;\n}\n```\n\nPronto! O efeito de sobrepôr já está feito! Se você quiser, já pode parar por aí =)\n\n## Parte do JS\n\nSe você quiser deixar um detalhe sutil e de fato criar a sensação do Parallax (quando elementos se movem em velocidades e planos diferentes). Podemos usar nosso querido JS.\n\nO efeito pode ser aplicado em qualquer parte do hero, seja o background vindo em sua direção, o título movendo e sumindo, enfim, use sua criatividade. No exemplo eu vou mostrar o efeito de sumir e subir um pouco no scroll.\n\nVou separar bastante para todo mundo, mesmo que não saiba muito de JS, entenda bem o que aconteceu. Existem várias formas de se fazer isso, se você tem uma maneira ainda melhor e mais performática, fala nos comentários =)\n\n```js\nfunction scrollBanner() {\n var scrollPos\n var headerText = document.querySelector('.header-paralax h1')\n scrollPos = window.scrollY\n\n if (scrollPos <= 600) {\n headerText.style.transform = 'translateY(' + -scrollPos / 3 + 'px' + ')'\n headerText.style.opacity = 1 - scrollPos / 600\n }\n}\n\nwindow.addEventListener('scroll', scrollBanner)\n```\n\nCriamos uma função scrollBanner que vai ser a responsável pela mágica. E então criamos um `addEventListener`, que serve para ficar vigiando se houve `scroll` ou não ná página. Se houver um scroll, a função é chamada.\n\nDepois disso, precisamos pegar o valor da posição do scroll, que pode ser capturado pelo `window.scrollY`, pois é no eixo vertical que estamos preocupados.\n\nPara não ficar chamando a função o tempo todo, mesmo depois do header sumir, verificamos se o valor de `scrollPos` é menor que a altura do nosso header. Se for menor, nós aplicamos o `translateY` para subir um pouquinho o título e também diminuímos a `opacity`, causando o efeito desejado. Os cálculos ali acima foram feitos só para a transição ser mais suave e ajustados no olho mesmo. Queremos uma `opacity` de zero quando o scroll for total (600), então `600 - (600/600)` vai se encarregar disso. E a movimentação do título precisa ser mais devagar para dar o efeito de parallax, então divido o valor do scroll por 3.\n\nSe você não clicou ainda, o [demo está aqui](https://labs.willianjusten.com.br/header-parallax/).\n\n## Conclusão\n\nPronto pessoal, foi um post bastante simples, mas que é interessante para firmarmos algumas propriedades e conceitos importantes. Espero que tenham gostado, devo fazer mais alguns posts do gênero, ensinando a fazer pequenos detalhes/efeitos para deixar seus sites mais legais.\n\nQueria também agradecer o carinho da galera que tem acessado os meus [cursos online](https://willianjusten.com.br/cursos/), tem sido bastante legal ver todo mundo assistindo, aprendendo, divulgando e dando dicas. Se você ainda não acessou, vai lá e se inscreva. Todo mundo que se inscreve nos meus cursos, são avisados quando lanço um novo post e também devo começar a enviar links e notícias interessantes que eu ver por aí, em forma de weekly. Não perde a chance =)\n" }, { "path": "posts/criando-icone-menu-hamburguer-animado-com-css-puro.md", "content": "---\nlayout: post\ndate: 2018-05-31T04:18:14.000Z\ntitle: Criando ícone menu hamburguer animado com CSS puro\ndescription: Nesse post/vídeo eu ensino como criar esse ícone animado para na\n segunda parte integrar a um menu real e bem legal.\nmain-class: css\ntags:\n - video\n - css\n - animacao\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, como o [ultimo post](https://willianjusten.com.br/menu-sticky-e-smooth-scroll-com-css-puro/) que eu escrevi teve uma recepção muito legal, resolvi dar continuidade e ensinar coisinhas úteis com css, que podem ser interessantes e utilizadas no seu dia-a-dia de trabalho.\n\nEu resolvi fazer em vídeo, porque fica mais fácil de mostrar cada detalhe, e bom, assim se você nunca fez um [curso meu](https://willianjusten.com.br/cursos/), já pode ver a didática para ver se gosta.\n\nA proposta desses vídeos é fazer algo bem \"cru\", sem edições, assim você vai vendo de fato na prática como eu fui fazendo as coisas e explicando e até mesmo os erros (que, é claro, sempre acontecem). Acho que assim é melhor do que aqueles vídeos super editados, onde só tem copia/cola e no final você nem entende nada do que aconteceu. Se você achar que assim ficou muito ruim/lento, por favor, deixe seu feedback também.\n\n## Demo live\n\nVocê pode ver o exemplo final através [desse link](https://labs.willianjusten.com.br/menu-fullscreen/) e se reparar, eu resolvi separar esse post e vídeo em duas partes, que serão:\n\n- Como criar o ícone hamburguer animado\n- Como criar o menu fullscreen animado\n\nAssim fica mais leve para você, podendo ver só o que se interessa e também ajuda o meu SEO, que vai ter duas entradas diferentes =p\n\n## Vídeo\n\n<iframe width=\"560\" height=\"420\" src=\"https://www.youtube.com/embed/IGz4BI-aO_8\" frameborder=\"0\" allowfullscreen></iframe>\n\n## Código e detalhes\n\nO vídeo já é bem explicativo, então eu não vou entrar em muitos detalhes, só vou deixar aqui alguns links complementares, que podem ser importantes para você, caso não tenha entendido alguns dos pedaços:\n\n- [Seletores CSS importantes para aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/)\n- [Como usar o input:checked num exemplo de switch button](https://willianjusten.com.br/criando-um-switch-button-com-css/)\n\nE o código que temos na aula por enquanto é, primeiro o markup html:\n\n```html\n<body>\n <input id=\"menu-hamburguer\" type=\"checkbox\" />\n\n <label for=\"menu-hamburguer\">\n <div class=\"menu\">\n <span class=\"hamburguer\"></span>\n </div>\n </label>\n</body>\n```\n\nOnde eu criei um `input` e `label` para fazer o funcionamento do estado `:checked` e o `hamburguer`, que eu resolvi usar só um elemento e o `:before` e `:after`.\n\nO nosso CSS dessa primeira parte ficou assim:\n\n```css\n*,\n*:before,\n*:after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background: #81ecec;\n}\n\n.menu {\n background: #fff;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n position: fixed;\n bottom: 25px;\n right: 25px;\n}\n\n.hamburguer {\n position: relative;\n display: block;\n background: #000;\n width: 30px;\n height: 2px;\n top: 29px;\n left: 15px;\n transition: 0.5s ease-in-out;\n}\n\n.hamburguer:before,\n.hamburguer:after {\n background: #000;\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n transition: 0.5s ease-in-out;\n}\n\n.hamburguer:before {\n top: -10px;\n}\n\n.hamburguer:after {\n bottom: -10px;\n}\n\ninput {\n display: none;\n}\n\ninput:checked ~ label .hamburguer {\n transform: rotate(45deg);\n}\n\ninput:checked ~ label .hamburguer:before {\n transform: rotate(90deg);\n top: 0;\n}\n\ninput:checked ~ label .hamburguer:after {\n transform: rotate(90deg);\n bottom: 0;\n}\n```\n\nTem ali também um \"reset default\", que sempre uso nesses experimentos básicos e também as `transitions` e `transforms` que foram necessários para rotacionar os elementos e criar a animação necessária.\n\n## Conclusão\n\nBom pessoal, espero que tenham gostado do post/vídeo, é uma nova modalidade que eu quero estar testando. E se você curtiu, não deixe de se inscrever lá no [Canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1) e também compartilhar com a galera.\n\nLembrando que amanhã (se você estiver lendo no dia que lancei), vai ter a segunda parte, onde eu ensino a criar o menu. Se esse dia já passou, vai ter o link aqui direitinho para o próximo post/vídeo.\n" }, { "path": "posts/criando-imagens-bonitas-de-codigo.md", "content": "---\nlayout: post\ndate: 2021-02-18T15:20:55.000Z\ntitle: Criando imagens bonitas de código\ndescription: Já viu blocos de código bonitos no Twitter e sempre quis fazer? Chegou sua vez!\nmain-class: misc\ntags:\n - dica\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/ZJpeMczm-s0\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n\n## Blocos bonitos\n\n![Trecho de código numa interface atraente](/assets/img/raycast-untitled-2-.png)\n\nÉ possível que já tenha visto uma imagem bonita assim em um slide de uma apresentação ou num Tweet né? Existem alguns serviços que fazem isso e os que mais indico são:\n\n- [Ray.so](https://ray.so/)\n- [Carbon.sh](https://carbon.now.sh/)\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/criando-menu-fullscreen-animado-com-css-puro.md", "content": "---\nlayout: post\ndate: 2018-06-01T04:09:38.000Z\ntitle: Criando Menu Fullscreen animado com CSS puro\ndescription: Nesse post/video eu vou ensinar a segunda do nosso experimento,\n onde vamos criar um menu fullscreen animado e aprender um pouco de cubic\n bezier.\nmain-class: css\ntags:\n - video\n - css\n - frontend\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, dando continuidade ao [experimento](https://labs.willianjusten.com.br/menu-fullscreen/) que fizemos no [post passado](https://willianjusten.com.br/criando-icone-menu-hamburguer-animado-com-css-puro/), hoje iremos aprender a criar a animação para o nosso menu fullscreen.\n\nComo já disse, a ideia é fazer vários tipos de vídeos lá no Youtube sobre coisinhas técnicas que podemos usar no nosso dia-a-dia e também, pretendo fazer alguns outros vídeos sobre carreira, trabalho remoto e outras coisas mais, que sempre me perguntam e que não daria para se fazer como um curso, mas cabe muito bem num vídeo.\n\nEntão, sem mais delongas, vamos ao vídeo e logo abaixo, o código como sempre.\n\n## Vídeo\n\n<iframe width=\"560\" height=\"420\" src=\"https://www.youtube.com/embed/i5Fps4GBBns\" frameborder=\"0\" allowfullscreen></iframe>\n\n## Código\n\nPrimeiro segue o nosso html, que dessa vez não mudou muita coisa, só mesmo tendo a adição do nosso menu:\n\n```html\n<ul>\n <li><a href=\"#\">Home</a></li>\n <li><a href=\"#\">About</a></li>\n <li><a href=\"#\">Work</a></li>\n</ul>\n```\n\nE aí, na parte do nosso css, tivemos também poucos detalhes. Nós primeiro fizemos o nosso efeito de hover, que também foi a base para usar na nossa animação, onde usamos a propriedade de `box-shadow`, que como eu disse, é extremamente poderosa no CSS.\n\nEu também uso `viewport unit` para definir os tamanhos do shadow e se você nunca tinha ouvido falar, eu tenho [um post](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/) onde eu falo um pouquinho sobre e também mostro com exemplos.\n\nO CSS feito nesse vídeo então, fica assim :\n\n```css\n.menu {\n cursor: pointer;\n box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff;\n transition: box-shadow 1.1s cubic-bezier(0.19, 1, 0.22, 1);\n}\n\n.menu:hover {\n box-shadow: 0 0 0 8px #fff, 0 0 0 8px #fff;\n}\n\n// animação do menu\ninput:checked ~ label .menu {\n box-shadow: 0 0 0 130vw #fff, 0 0 0 130vh #fff;\n}\n\n// só aparecer o menu ao clicar\ninput:checked ~ ul {\n opacity: 1;\n}\n\n// animação e estilo do menu\nul {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n list-style: none;\n font-size: 45px;\n opacity: 0;\n transition: 0.25s 0.1s cubic-bezier(0, 1.07, 0, 1.02);\n z-index: 2;\n}\n\na {\n color: #00cec9;\n display: block;\n margin-bottom: 1em;\n text-decoration: none;\n}\n```\n\nSe você quiser ver todo o código completo, só acessar [esse link do Github](https://github.com/willianjusten/labs/blob/gh-pages/menu-fullscreen/index.html).\n\n## Conclusão\n\nBom pessoal, espero que tenham gostado desse novo formato, com vídeo e post. Acho que fica mais dinâmico quando é para explicar esse tipo de coisa. Se vocês gostaram, por favor, não deixem de compartilhar e dar joinhas lá no [YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1).\n\nE se você achou uma merda, pode falar também, eu aceito críticas numa boa e isso ajuda muito a melhorar para os próximos vídeos. Espero vocês nos próximos posts e vídeos!\n" }, { "path": "posts/criando-o-efeito-da-chuva-do-matrix-com-javascript-puro.md", "content": "---\nlayout: post\ndate: 2021-12-20T14:16:50.000Z\ntitle: Criando o efeito da chuva do Matrix com JavaScript puro\ndescription: Aprenda como criar esse efeito em poucas linhas manipulando o Canvas\nmain-class: js\ntags:\n - js\n - canvas\n---\n## Introdução\n\nFala pessoal, faz um bom tempo que não escrevo no blog e um dos motivos é que eu estava viajando em NY e Vancouver, se quiser ver umas fotinhas de lá, [só me seguir no IG](https://www.instagram.com/will_justen/). \n\nEsse post eu planejava fazer até como um vídeo, mas infelizmente eu acabei contraindo Covid assim que cheguei no Brasil, então estou isolado num cômodo só da casa, ou seja, sem um microfone decente para gravar. E como estou entediado, vou fazer em post agora e depois qualquer coisa eu faço em vídeo se vocês quiserem.\n\nNesse post eu serei bem detalhista e farei bem passo-a-passo, já que muita gente pode não estar ambientada com o conceito de Canvas e quero também fazer algo onde qualquer iniciante consiga acompanhar. Minha dica é que você vá fazendo junto comigo, garanto que será uma experiência divertida e interessante.\n\nE claro, para continuar com a tradição das músicas nos posts, eu estou ouvindo [Post Malone](https://open.spotify.com/artist/246dkjvS1zLTtiykXe5h60?si=jKgOAYKlTmmYLihN1iebMQ), que andei ouvindo bastante na viagem.\n\n## Como é a chuva do Matrix e Demo\n\nAntes de começarmos o projeto, precisamos falar sobre o que é né? Bom, se você nunca viu Matrix <del>pode se retirar</del>, eles basicamente brincam com a ideia de que o mundo em que vivemos nada mais é que um código de computador. Em alguns momentos do filme, eles mostram esses \"códigos\", que muito depois foi descoberto que [eram receitas de Sushi](https://nerdist.com/article/the-matrix-code-sushi-recipe/) usando hiragana, katakana, kanjis e alguns outros símbolos. Esses símbolos por sua vez vão caindo pela tela, fazendo o famoso efeito da \"chuva do Matrix\". \n\nSe você nunca viu esse efeito, [segue a demo do projeto](https://labs.willianjusten.com.br/matrix-rain).\n\n## Inicializando o projeto\n\nNesse projeto não utilizaremos React, Next, SVG, nada nada, será um bom e velho `index.html` e um pouquinho de JavaScript. Então segue abaixo o esqueleto base:\n\n```html\n<!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Matrix Rain\n\n\n\n\n\n```\n\n### Entendendo o Canvas API\n\nO [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) é basicamente uma maneira de conseguirmos desenhar na tela utilizando o JavaScript. Para isso, precisamos criar esse elemento no nosso html para então manipular com o JS, adicionaremos dentro do `body` a seguinte linha:\n\n```html\n\n```\n\nTendo esse elemento, nós precisamos prepará-lo para começar a desenhar. Essa \"preparação\" consiste em buscar o elemento do Canvas e definir em qual contexto iremos desenhar, que pode ser desde o `2d` que o nome já diz, desenhar em 2 dimensões ou até o `webgl`, que já expande para experimentos em 3d bem interessantes também. Como nosso propósito é simplesmente descer as letrinhas na tela, iremos utilizar o `2d`. Essa definição de contexto se faz com o comando [getContext](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).\n\nNosso código inicial ficará da seguinte forma então:\n\n```html\n\n```\n\n### Pintando algo na tela\n\nComo falei, quero fazer esse tutorial bem devagar, sem simplesmente tacar as coisas para ter o projeto pronto. Então, primeiro vamos aprender a pintar na tela utilizando o Canvas. \n\nO primeiro comando mais simples para pintar no Canvas é utilizar o [fillRect](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect), que pelo nome já dá para entender que permite desenhar retângulos. Então se escrevermos algo como:\n\n```js\n// fillRect(eixoX, eixoY, largura, altura)\nctx.fillRect(0, 0, 100, 100)\n```\n\nNós teremos um quadrado de 100x100 no canto superior da tela! \n\n![Pequeno quadrado preto na tela](/assets/img/small-square.png)\n\nE se quisermos pintar o canvas inteirinho? Podemos fazer o seguinte código:\n\n```js\nctx.fillRect(0, 0, c.width, c.height);\n```\n\nNote que `c` é o nosso elemento do canvas definido logo acima, então estaremos pegando sua largura e altura para pintar o retângulo, mas se você reparar, preencheu apenas um pedaço da tela! \n\n![Um retangulo preto na tela](/assets/img/all-canvas-without-size.png)\n\n### Definindo o canvas para o tamanho todo da tela\n\nNo nosso exemplo, nós queremos que o desenho cubra toda a tela, não apenas um pequeno pedaço como vimos acima. Se você inspecionar o seu elemento de canvas, verá que ele por padrão tem um tamanho especificado pelo browser, no Chrome é 300x150. Para torná-lo do tamanho total da página, basta editar os atributos do canvas:\n\n```js\n// definindo o canvas com tamanho máximo da tela\nc.height = window.innerHeight;\nc.width = window.innerWidth;\n```\n\nAgora o seu canvas já se comporta com o tamanho todo da tela e se você tiver pintado o retângulo todo de preto, a tela deve estar \"quase\" toda preta, mas ainda ficaram umas bordas!\n\n![Tela quase toda preta mas com bordas brancas](/assets/img/fullscreen-canvas.png)\n\n### Resetando margins e paddings\n\nEssas margens brancas que estamos vendo nada mais são que definições padrões do browser. Para removê-las, nós precisamos fazer uma coisa que chamamos de `Reset CSS`, onde removemos de qualquer elemento `*` as margins e paddings. Além disso também vou definir o `display: block` do nosso canvas, assim ele não correrá risco de vazar a tela e criar scrolls laterais. Vou então colocar o seguinte trecho no nosso `index.html` acima do body:\n\n```html\n\n```\n\nE agora, pode reparar que a tela ficou completamente ocupada pelo canvas.\n\n\n\n![Tela completamente preta](/assets/img/with-reset.png)\n\n### Escrevendo no Canvas\n\nBeleza, nós já aprendemos como criar o canvas, pintar ele e inclusive colocar do tamanho máximo da tela, mas agora nós precisamos também aprender como escrever textos no Canvas, já que teremos vários símbolos caindo. Para isso, nós primeiro definimos um tipo de fonte e então usamos o comando de [fillText ou strokeText](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text). Vamos fazer um exemplo simples:\n\n```js\n// definindo o tamanho e tipo de fonte\nctx.font = `60px arial`;\n\n// definindo o texto a ser escrito e posição x, y\nctx.fillText(\"Matrix Rain\", 0, 60);\n```\n\nCom isso, você ter visto o texto \"Matrix Rain\" escrito bem grande começando na pontinha da tela. Se você não viu e está tudo preto, é porque tanto o retângulo desenhado quanto o texto estão em preto, remova o retângulo que criamos por um momento e veja o texto. \n\n![Matrix rain escrito em preto na tela](/assets/img/matrix-rain-black-text.png)\n\nMas note uma coisa! Eu não comecei na posição `0,0`, mas sim na posição `0,60`, isso acontece pois se eu iniciar o eixo Y como `0`, o texto iria ficar para cima e sequer apareceria na tela, então eu preciso mover o mesmo tamanho da fonte, para que o texto de fato apareça na tela, lembre-se desse detalhe, é fundamental.\n\n### Colorindo as formas e textos\n\nComo você notou nas coisas que fizemos até agora, tudo é sempre preto, mas nossa letra é verdinha e o fundo que é preto, para mudar as cores, temos outra propriedade chamada [fillStyle/strokeStyle](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors).\n\nSe colocarmos o seguinte trecho:\n\n```js\nctx.fillStyle = \"#0F0\";\nctx.font = `60px arial`;\nctx.fillText(\"Matrix Rain\", 0, 60);\n```\n\nNós iremos ver nosso texto finalmente em verde na tela! \n\n![Matrix rain texto escrito em verde](/assets/img/matrix-rain-green-text.png)\n\n\n\nAgora você já sabe o suficiente para poder criar o nosso projetinho! **Fim da introdução**, vamos para diversão!\n\n### Pegando os símbolos do Matrix\n\nPara utilizar os mesmos símbolos do Matrix, eu encontrei esse [post](https://scifi.stackexchange.com/questions/137575/is-there-a-list-of-the-symbols-shown-in-the-matrixthe-symbols-rain-how-many) já indicando todos os símbolos. Com isso em mãos, eu criei um array:\n\n```js\nconst letters = [\"日\",\"ﾊ\",\"ﾐ\",\"ﾋ\",\"ｰ\",\"ｳ\",\"ｼ\",\"ﾅ\",\"ﾓ\",\"ﾆ\",\"ｻ\",\"ﾜ\",\"ﾂ\",\"ｵ\",\"ﾘ\",\"ｱ\",\"ﾎ\",\"ﾃ\",\"ﾏ\",\"ｹ\",\"ﾒ\",\"ｴ\",\"ｶ\",\"ｷ\",\"ﾑ\",\"ﾕ\",\"ﾗ\",\"ｾ\",\"ﾈ\",\"ｽ\",\"ﾀ\",\"ﾇ\",\"ﾍ\",\":\",\"・\",\".\",\"=\",\"*\",\"+\",\"-\",\"<\",\">\",\"¦\",\"｜\",\"ﾘ\"];\n```\n\n### Definindo as colunas para imprimir as letras\n\nPara posicionarmos corretamente as letras, nós precisamos dividir o espaço total da tela pelo tamanho das letras. \n\nAlém disso, eu também irei criar um array chamado `drops` que vai servir exatamente para podermos ir variando as posições no eixo y, já que o eixo x nunca vai mudar para a gota, ela sempre vai cair na mesma linha vertical. Para isso, criei o seguinte código:\n\n```js\nconst fontSize = 18\n\n// definindo quantas colunas serão necessárias pelo tamanho da tela e fonte\nconst columns = c.width / fontSize;\n\n// criando um array para cada gota, sempre iniciando na posição do y=1\nconst drops = new Array(Math.floor(columns)).fill(1);\n```\n\n### Escrevendo toda a primeira linha\n\nJuntando os pedacinhos que já fizemos e removendo as coisas que estávamos só aprendendo, teremos o código assim:\n\n```js\n// Pegando o elemento do Canvas\nconst c = document.getElementById(\"matrix\");\n\n// Definindo o seu contexto\nconst ctx = c.getContext(\"2d\");\n\n// definindo o canvas com tamanho máximo da tela\nc.height = window.innerHeight;\nc.width = window.innerWidth;\n\n// letras do Matrix Rain\n// ver mais em: https://bit.ly/3yFJoU3\nconst letters = [\"日\",\"ﾊ\",\"ﾐ\",\"ﾋ\",\"ｰ\",\"ｳ\",\"ｼ\",\"ﾅ\",\"ﾓ\",\"ﾆ\",\"ｻ\",\"ﾜ\",\"ﾂ\",\"ｵ\",\"ﾘ\",\"ｱ\",\"ﾎ\",\"ﾃ\",\"ﾏ\",\"ｹ\",\"ﾒ\",\"ｴ\",\"ｶ\",\"ｷ\",\"ﾑ\",\"ﾕ\",\"ﾗ\",\"ｾ\",\"ﾈ\",\"ｽ\",\"ﾀ\",\"ﾇ\",\"ﾍ\",\":\",\"・\",\".\",\"=\",\"*\",\"+\",\"-\",\"<\",\">\",\"¦\",\"｜\",\"ﾘ\"];\n\nconst fontSize = 18;\n\n// definindo quantas colunas serão necessárias pelo tamanho da tela e fonte\nconst columns = c.width / fontSize;\n\n// criando um array para cada gota, sempre iniciando na posição do y=1\nconst drops = new Array(Math.floor(columns)).fill(1);\n```\n\nSó com o código acima não teremos absolutamente nada pintado na tela ainda. Para isso, iremos criar uma função `draw`, onde primeiro eu irei pintar nosso fundo de tela e também irei preencher a nossa primeira linha com as letras do Matrix.\n\n```js\nfunction draw() {\n // preenchendo a tela toda de preto com opacidade\n // esse truque da opacidade será útil para o efeito \n // das letras sumindo aos poucos\n // como teremos muitos quadros sobre quadros\n // o preto que no início é quase transparente ficará bem opaco\n ctx.fillStyle = \"rgba(0, 0, 0, 0.05)\";\n ctx.fillRect(0, 0, c.width, c.height);\n\n // definindo a cor e estilo da fonte\n ctx.fillStyle = \"#0F0\";\n ctx.font = `${fontSize}px arial`;\n\n for (let i = 0; i < drops.length; i++) {\n // pegando uma letra randomicamente no nosso array\n const text = letters[Math.floor(Math.random() * letters.length)];\n\n // escrevendo na tela\n ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n }\n}\n\n// chamando a função criada\ndraw()\n```\n\nRepare que eu fiz um loop iniciando com `i=0`, isso significa que nossa primeira letra será impressa na posição `ctx.fillText(text, 0, 18)`, afinal de contas `0 * 18 === 0` e como todos os items dentro de `drops` tem o valor iniciado como `1`, `drops[0] = 1 * 18 === 18`.\n\nSe você continuar iterando de cabeça, fazendo `i=1,2,3,por aí vai`, verá que eu estarei sempre movendo as letras no eixo x até preencher toda a primeira linha.\n\n\n\n![Tela com primeira linha impressa](/assets/img/first-line-matrix.png)\n\n### Animando quadro a quadro\n\nAté agora sempre estávamos criando imagens estáticas, mas nosso projeto necessita de uma animação para fazer as gotas caírem. Para isso, irei alterar nossa função `draw` acrescentando alguns detalhes.\n\nA primeira delas é utilizar o método de [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). Esse método recebe uma callback que diz ao browser para realizar a animação antes do próximo repaint. Ou seja, ele vai ficar chamando o método numa animação quadro a quadro, que é exatamente o que nós queremos. Eu vou aplicar isso dentro da própria função de `draw` e utilizar o `requestAnimationFrame` para chamar a `draw`, criando assim uma [função recursiva](https://www.geeksforgeeks.org/recursive-functions/), que é uma função que chama ela mesma, causando o loop da nossa animação.\n\n```js\nfunction draw() {\n // preenchendo a tela toda de preto com opacidade\n // esse truque da opacidade será útil para o efeito \n // das letras sumindo aos poucos\n ctx.fillStyle = \"rgba(0, 0, 0, 0.05)\";\n ctx.fillRect(0, 0, c.width, c.height);\n\n // definindo a cor e estilo da fonte\n ctx.fillStyle = \"#0F0\";\n ctx.font = `${fontSize}px arial`;\n\n for (let i = 0; i < drops.length; i++) {\n // pegando uma letra randomicamente no nosso array\n const text = letters[Math.floor(Math.random() * letters.length)];\n\n // escrevendo na tela\n ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n }\n\n // chamada recursiva para animar quadro a quadro\n window.requestAnimationFrame(draw);\n}\n\n// chamando a função criada\ndraw()\n```\n\nAo fazer isso, você vai ver que a primeira linha vai ficar se redesenhando, com as letras umas em cima das outras. \n\n![Letras se sobrepondo](/assets/img/overlap-letters.gif)\n\nIsso está ocorrendo pois eu não estou mudando as letras no eixo y, para isso, lá nosso `for`, eu vou adicionar ao final, um contador para o `drops[i]`, assim ele vai crescer conforme o loop e fará as letras descerem.\n\n```js\nfunction draw() {\n // preenchendo a tela toda de preto com opacidade\n // esse truque da opacidade será útil para o efeito \n // das letras sumindo aos poucos\n ctx.fillStyle = \"rgba(0, 0, 0, 0.05)\";\n ctx.fillRect(0, 0, c.width, c.height);\n\n // definindo a cor e estilo da fonte\n ctx.fillStyle = \"#0F0\";\n ctx.font = `${fontSize}px arial`;\n\n for (let i = 0; i < drops.length; i++) {\n // pegando uma letra randomicamente no nosso array\n const text = letters[Math.floor(Math.random() * letters.length)];\n\n // escrevendo na tela\n ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n\n // movendo as gotas no eixo y\n drops[i]++;\n }\n\n // chamada recursiva para animar quadro a quadro\n window.requestAnimationFrame(draw);\n}\n\n// chamando a função criada\ndraw()\n```\n\nCom isso feito, as letras já descem certinhas, mas depois de chegarem ao fim, elas simplesmente não retornam e aí é como se a chuva tivesse \"acabado\". \n\n![Chuva uma unica vez](/assets/img/rain-without-loop.gif)\n\nPara fazer com que as gotas fiquem caindo infinitamente, o que eu farei é sempre que elas chegarem no ponto final da tela (altura máxima) que elas resetem para posição inicial. Para isso, no nosso `for` loop colocarei o seguinte:\n\n```js\nif (drops[i] * fontSize > c.height) {\n drops[i] = 0;\n}\n```\n\nAo fazer isso, temos um loop certinho, onde a gota começa do topo e vai caindo. Mas ainda não está legal, já que a chuva fica sempre sincronizada e sem graça. \n\n\n\n![](/assets/img/rain-uniform-loop.gif)\n\nPara tornar as gotas mais randomicas, eu vou adicionar mais uma regra nesse `if`, só dizendo que além da questão da altura, também quero que respeite uma comparação com um número randômico qualquer:\n\n```js\nif (drops[i] * fontSize > c.height && Math.random() > 0.95) {\n drops[i] = 0;\n}\n```\n\nEu cheguei nesse `0.95` testando para ver como as gotas caíam, se o número era abaixo de `0.5` significa que pelo 50% das gotas de chuva iriam respeitar a regra e com isso ainda parecia algo muito \"sincronizado\", então botei um número bem grande, fazendo com que se tornasse algo realmente bem variado.\n\n![Chuva da Matrix](/assets/img/final-rain.gif)\n\nE pronto! Sua chuva da Matrix está feitinha! Segue o código inteiro:\n\n```js\n// Pegando o elemento do Canvas\nconst c = document.getElementById(\"matrix\");\n\n// Definindo o seu contexto\nconst ctx = c.getContext(\"2d\");\n\n// definindo o canvas com tamanho máximo da tela\nc.height = window.innerHeight;\nc.width = window.innerWidth;\n\n// letras do Matrix Rain\n// ver mais em: https://bit.ly/3yFJoU3\nconst letters = [\"日\",\"ﾊ\",\"ﾐ\",\"ﾋ\",\"ｰ\",\"ｳ\",\"ｼ\",\"ﾅ\",\"ﾓ\",\"ﾆ\",\"ｻ\",\"ﾜ\",\"ﾂ\",\"ｵ\",\"ﾘ\",\"ｱ\",\"ﾎ\",\"ﾃ\",\"ﾏ\",\"ｹ\",\"ﾒ\",\"ｴ\",\"ｶ\",\"ｷ\",\"ﾑ\",\"ﾕ\",\"ﾗ\",\"ｾ\",\"ﾈ\",\"ｽ\",\"ﾀ\",\"ﾇ\",\"ﾍ\",\":\",\"・\",\".\",\"=\",\"*\",\"+\",\"-\",\"<\",\">\",\"¦\",\"｜\",\"ﾘ\"];\n\nconst fontSize = 18;\n\n// definindo quantas colunas serão necessárias pelo tamanho da tela e fonte\nconst columns = c.width / fontSize;\n\n// criando um array para cada gota, sempre iniciando na posição do y=1\nconst drops = new Array(Math.floor(columns)).fill(1);\n\nfunction draw() {\n // preenchendo a tela toda de preto com opacidade\n // esse truque da opacidade será útil para o efeito \n // das letras sumindo aos poucos\n ctx.fillStyle = \"rgba(0, 0, 0, 0.05)\";\n ctx.fillRect(0, 0, c.width, c.height);\n\n // definindo a cor e estilo da fonte\n ctx.fillStyle = \"#0F0\";\n ctx.font = `${fontSize}px arial`;\n\n for (let i = 0; i < drops.length; i++) {\n // pegando uma letra randomicamente no nosso array\n const text = letters[Math.floor(Math.random() * letters.length)];\n\n // escrevendo na tela\n ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n\n // resetando a posição da gota ao chegar no fim\n if (drops[i] * fontSize > c.height && Math.random() > 0.95) {\n drops[i] = 0;\n }\n\n // movendo as gotas no eixo y\n drops[i]++;\n }\n\n // chamada recursiva para animar quadro a quadro\n window.requestAnimationFrame(draw);\n}\n\n// chamando a função criada\ndraw()\n```\n\nSe quiser ver o codigo pelo [meu GitHub](https://github.com/willianjusten/labs/blob/main/matrix-rain/index.html).\n\n## Conclusão\n\nEspero que tenha gostado do post e tenha feito o passo-a-passo junto comigo. Pode parecer bobeira, mas tivemos vários conceitos super interessantes nesse exemplo! Desde desenhar no canvas, entender coordenadas do plano cartesiano, animações quadro-a-quadro e até uma leve rebuscada de funções recursivas!\n" }, { "path": "posts/criando-reading-progress-com-css-variables.md", "content": "---\nlayout: post\ndate: 2017-08-05T16:02:18.000Z\ntitle: Criando Reading Progress com CSS Variables\ndescription: Uma forma fácil de implementar uma barra de reading progress em poucas linhas.\nmain-class: css\ntags:\n - css\n - frontend\ncategories: null\n---\n\n## Introdução\n\nFaaala pessoal, nem era a ideia escrever um post hoje não, mas o tempinho aqui em Petrópolis está meio chuvoso e friozinho. Coloquei para tocar [Donovan Woods](https://open.spotify.com/artist/4SOtk3HtPYKqxnVuxNBMti) que é um cantor canadense que toca um Folk bem calminho, e pensei, por que não escrever um post?\n\n## CSS Variables\n\nO post de hoje eu vou utilizar uma feature bem maneira que é a [CSS Variables](https://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables), basicamente é a possibilidade de utilizar variáveis dentro do CSS de forma nativa! Isso não é demais? =D\n\nE sempre quando se fala de algo novo, vem a primeira pergunta `ahhh, mas isso não deve pegar em lugar nenhum!`. Só que é aí que você se engana. O suporte é até bem legal como você pode ver aqui no [Can I use](http://caniuse.com/#feat=css-variables), basicamente Firefox, Chrome, Android Browser e até o Safari! Não funciona no IE, mas quem se importa? =p\n\nA outra pergunta comum é: `Mas por que usar isso? Já tenho no meu pre-processador.`, bom isso é uma verdade, o pre-processador ajuda pacas e possui várias coisas legais para brincar, inclusive variáveis. Mas essas variáveis ficam somente naquele momento, depois você gera o CSS final e essas variáveis somem. Aqui não é o caso, a variável está disponível no Browser para você poder criar várias brincadeiras, como a que vamos fazer, por exemplo.\n\n### Básico do CSS Variables\n\nBom, vamos logo para a parte prática que é mais interessante. Digamos que eu tenha um site e eu quero que o header tenha cores diferentes se estiver na home ou em páginas normais. Seguindo o seguinte html:\n\n```html\n\n\n\n \n
\n ...\n \n\n\n\n\n \n
\n ...\n \n\n```\n\nTendo em vista o seguinte markup, podemos criar um css assim:\n\n```css\n:root {\n --header-home-bg-color: blue;\n --header-pages-bg-color: white;\n}\n\n.home .header {\n background-color: var(--header-home-bg-color);\n}\n\n.page .header {\n background-color: var(--header-pages-bg-color);\n}\n```\n\nBastante intuitivo né? Mas vamos as explicações de como funciona. Para você definir uma variável no CSS, basta utilizar esses dois traços no início da variável, `--variavel-linda` e para utilizar o valor dela, é só chamar dentro do `var(--variavel-linda)`. Sim gente, é só isso. Precisa de mais nada! E outra coisa bastante legal, o `var` pode receber dois parâmetros, um que é sua variável e o outro que é um fallback caso o valor da sua variável seja inválido. Por exemplo:\n\n```css\n:root {\n --font-stack: 'Open Sans';\n}\nbody {\n font-family: var(--font-stack, 'Arial');\n}\n```\n\nCaso o valor de `--font-stack` não fosse achado ou válido, ele iria utilizar o valor `Arial`.\n\n### Integrando com Javascript e criando nosso Reading\n\nClaro que precisamos integrar isso com JS né? E é também simples demais. Basta utilizar o método `setProperty` do `style` no elemento que você desejar.\n\nPrimeiro vamos criar nosso html bem bobo, que vai ser um grande texto num container. E o item principal, nossa div `progress`, que vai ser responsável por fazer a barrinha de progresso no topo.\n\n```html\n
\n\n
\n \n
\n```\n\nDepois vamos criar nosso CSS para o `progress`.\n\n```css\n.progress {\n background: linear-gradient(to right, #3863a0 var(--scroll), transparent 0);\n background-repeat: no-repeat;\n position: fixed;\n width: 100%;\n height: 8px;\n z-index: 2;\n}\n```\n\nReparem que eu estou utilizando uma variável ali que é `var(--scroll)` e também reparem que eu não criei ela no CSS, pois eu vou criar no meu JS.\n\nPara fazer o cálculo do scroll e identificar o progresso, vamos utilizar algums métodos do JS, que são:\n\n- [clientHeight](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/clientHeight) - permite verificar a altura da janela do browser, ou seja, só a parte visível da sua tela.\n- [scrollTop](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollTop) - verifica a distância do topo da página até o topo da primeira parte visível da tela. Dá uma olhada no link, lá tem uma imagem bem explicativa.\n- [scrollHeight](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollHeight) - verifica a altura do elemento, considerando suas partes não visíveis.\n\nTendo esses métodos em mente, fica fácil criar a seguinte função:\n\n```js\nconst progress = document.querySelector('.progress')\nconst body = document.body\nconst page = document.documentElement\nlet scroll\n\ndocument.addEventListener('scroll', function () {\n scroll = (body.scrollTop / (body.scrollHeight - page.clientHeight)) * 100\n progress.style.setProperty('--scroll', scroll + '%')\n})\n```\n\nPrimeiro eu verifico a altura do topo da página até o topo do meu elemento (body.scrollTop) e então divido pelo tamanho total do meu elemento menos a altura do browser, isso multiplicado por 100, para poder obter a porcentagem do quanto eu já desci na tela.\n\nTendo esse valor fica fácil, basta definir esse valor dentro de `progress`, para isso eu uso o método `setProperty`, que vai definir o valor da variável `--scroll` e assim vai aumentar e diminuir o background do meu elemento, fazendo o efeito de progresso na leitura.\n\nAbaixo você pode ver esse exemplo rodando:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Conclusão\n\nBom galera, espero que tenham gostado do post, é bem simplão, mas é bem maneiro. E mostra como as CSS Variables podem se tornar ótimas ferramentas no futuro. Eu aconselho a assistirem [essa talk da Lea Verou](https://www.youtube.com/watch?v=2an6-WVPuJU) que foi basicamente de onde eu extraí tudo para fazer esse post. Ela é incrível nessa talk, vale muito a pena =)\n" }, { "path": "posts/criando-svg-responsivo.md", "content": "---\nlayout: post\ndate: 2015-04-04T18:18:49.000Z\ntitle: \"#10 - Criando um SVG responsivo e adaptativo\"\ndescription: Hoje em dia com a variedade de telas que temos, o desafio é dar o\n melhor conteúdo para cada tipo de tela.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\nTenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG.\n\n## Introdução\n\nEnquanto escrevo esse post, vou ouvindo uma [playlist de Chill Step](https://open.spotify.com/user/kent1337/playlist/6IjDl5eRczFdgZkKYXhuHZ), ótimo para relaxar e programar, aconselho fortemente!\n\nHoje será outro post rapidinho, mas bastante importante, visto que falaremos sobre uma coisa que está muito em alta, responsividade!\n\n## Tamanhos e tamanhos\n\nHoje em dia com a variedade de telas que temos, o desafio é dar o melhor conteúdo para cada tipo de tela e isso está diretamente ligado aos ícones e imagens que o seu site irá possuir.\n\nTelas menores não devem ter um conteúdo muito grande ou organizado de forma errada, visto que seu espaço é muito menor e a quantidade de informações que iremos colocar precisa em geral estar uma em cima da outra.\n\nMas e por que SVG se torna tão importante? Simples, SVG é responsivo por natureza. Ele é uma imagem vetorial, que não perde qualidade independente do tamanho do device, até num projetor hiper mega bolado, o SVG vai estar lá lindão.\n\n## Tornando o SVG fluido\n\nAntes de sair adicionando o SVG a torto e a direito, precisamos nos atentar para alguns detalhes.\n\n### 1 - Retire o width e height do elemento SVG\n\nSe você determinar um tamanho dentro do elemento `svg`, que é o nosso \"container\", você estará bloqueando o tamanho e com isso perdendo a fluidez.\n\n```html\n\n \n\n```\n\n### 2 - Determine uma viewBox\n\nA viewBox permite a visualização de uma parte específica de uma parte de um elemento. Esses valores incluem quatro números separados por \"commas\" ou espaços: `min-x`, `min-y`, `width` e `height` esses parâmetros geralmente, são os limites da viewport.\n\nOs valores min representam em qual ponto dentro da imagem a viewBox deve iniciar, enquanto o width e height estabelecem o tamanho do box.\n\nSe nós optarmos por não definir a viewBox a imagem não será redimensionada e irá corresponder a configuração feita na viewport.\n\n```html\n\n \n\n```\n\n### 3 - Coloque o preserveAspectratio para xMidYMidmeet\n\nSe a `viewport` e `viewBox` não possuirem as mesmas dimensões de width e height, o atributo `preserveAspectRatio` direciona o browser em como efetuar o display da imagem. Se o elemento já possuir uma viewBox e não tiver tamanho fixado na viewport, este se torna um item não obrigatório.\n\n```html\n\n \n\n```\n\n## Adicionando o SVG\n\nTendo feito essas especificações, basta inserir o seu SVG onde quiser. E como eu disse no post [Como usar SVG](https://willianjusten.com.br/como-usar-svg/), existem algumas maneiras de se utilizar SVG e em todas elas é possível criar um SVG fluido, uns são nativos e outros precisam de hack para IEca... Mas isso não é problema para nós!\n\n### Como imagem, object e embed\n\nBasta adicionar o svg como `src` e para assegurar que ele possua o tamanho máximo de onde se encontrar, basta definir o `width` como máximo. Assim, a imagem vai adquirir o tamanho máximo de onde você adicionar.\n\n```html\n\n\"Minha\n\n\n```\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nExperimente mudar o tamanho do container para ver que a imagem continuará a mesma.\n\n### Como background e inline\n\nNesses casos não há necessidade de nenhum hack, basta adicionar onde desejar e ele irá se adaptar de acordo com o container em que estiver.\n\n```html\n\n.element { background-image: url(\"imagem.svg\"); }\n\n
\n\n\n
\n \n \n \n
\n```\n\n## Logos Adaptativas\n\nUma das mágicas mais legais do SVG é fazê-lo mudar de acordo com o espaço em que ele estiver contido. O exemplo é a imagem abaixo:\n\n![Logos em diferentes tamanhos](/assets/img/responsivo-svg/logos-sizes.jpg)\n\nPara fazer essa mágica é bastante fácil, basta já termos definido como Responsivo, seguindo os passos acima e então definir grupos para cada elemento e classes para eles, assim, poderemos trabalhar com as `media-queries`.\n\n![Logo descontruída](/assets/img/responsivo-svg/logo-ungroup.png)\n\nSegue uma base de código de como fica:\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\nDe posse das classes dos elementos, basta pensarmos nos Steps que queremos e nos cortes da tela.\n\n### Corte 1\n\nPara a primeira diferenciação, queremos retirar os cristais amarelo e verde, visto que eles ficam muito grandes para telas menores, para isso, basta omitirmos a classe `.shards`, que definimos anteriormente.\n\n```css\n@media (min-width: 480px) and (max-width: 640px) {\n .shards {\n display: none;\n }\n}\n```\n\n### Corte 2\n\nPara o corte 2, queremos retirar também o cristal grande e para que a logo permaneça visível, queremos deixar o texto na cor roxa. Para isso é só usar a propriedade `fill`, como vimos no [post anterior](https://willianjusten.com.br/colorindo-em-svg/).\n\n```css\n@media (max-width: 480px) {\n .shards {\n display: none;\n }\n\n .text path {\n fill: #ba27e4;\n }\n\n .crystal {\n display: none;\n }\n}\n```\n\nFeito isso, seu componente já está responsivo e adaptativo!! Veja o experimento pronto abaixo:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nPara ver os diferentes estados de uma forma mais fácil, [abra esse link](http://codepen.io/willianjusten/full/ZYVPep/) e faça resize da tela.\n\n## Conclusão\n\nDepois dessa simples explicação, fica claro que o SVG veio para dominar no quesito responvidade e adaptatividade. Vamos parar de usar imagens png para tudo e vamos tratar de criar novas interatividades com o SVG.\n" }, { "path": "posts/criando-textos-responsivos-com-css.md", "content": "---\nlayout: post\ndate: 2020-04-28T05:38:15.000Z\ntitle: Criando Textos Responsivos com CSS\ndescription: Aprenda a deixar seus textos responsivos e fluidos em qualquer tela\n com viewport units e funções min-max do CSS.\nmain-class: css\ntags:\n - css\n - videos\n - dicas\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje iremos aprender sobre um tema extremamente importante! Os famososo **textos responsivos**!\n\nÉ muito normal utilizarmos vários media-queries para poder ter o nosso texto funcionando para diferentes tipos de tela, mas nem sempre fica tão legal ou fluido. Sem contar que escrevemos muito mais código para isso.\n\nA maneira que vamos fazer aqui, nós iremos utilizar a viewport unit `vw`, que calcula uma porcentagem da largura (`width`) da tela e vamos usar as [funções matemáticas do CSS](https://caniuse.com/#feat=css-math-functions) de `min` e `max` para podermos ter os textos em seus tamanhos corretos.\n\nEsse post foi inspirado [nesse tweet da Una Kravets](https://twitter.com/Una/status/1254906546179526657) e espero que gostem!\n\nVocê pode ver [a demo do vídeo aqui](https://labs.willianjusten.com.br/responsive-text/) e o [código aqui](https://github.com/willianjusten/labs/blob/gh-pages/responsive-text/index.html).\n\n## Vídeo\n\n\n\n## Conclusão\n\nNovamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!\n" }, { "path": "posts/criando-toda-a-estrutura-de-um-site-usando-o-strapi-cms.md", "content": "---\nlayout: post\ndate: 2021-03-06T14:57:17.000Z\ntitle: Criando toda a estrutura de um site usando o Strapi CMS\ndescription: Nessa aula eu mostro como penso e monto o backend de um site\n institucional simples.\nmain-class: dev\ntags:\n - dicas\n - strapi\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Utilizando tudo que o Strapi tem a oferecer\n\nQuando eu vou montar um backend de qualquer coisa com o Strapi, eu tento pensar em cada pedaço e ver o que posso reaproveitar, o que será único e o que vai ser repetido. Baseado nisso, eu consigo definir se vai ser `Single Type`, `Component`, `Collection Type`.\n\nExemplo, para partes únicas de um site, como um `Menu` eu costumo criar como um `Single Type`, afinal de contas, todas as páginas vão possuir o mesmo componente, então nem faz sentido ficar adicionando/removendo nas collections.\n\nAgora para estruturas que podem ou não se repetir em diferentes páginas eu costumo criar como `Component`, assim eu tenho a estrutura de dados e posso reutilizar nos seus devidos lugares.\n\nE para as páginas em si, eu gosto bastante de utilizar o `Dynamic Zone`, que permite uma área onde você pode adicionar diferentes tipos de componentes, assim a sua página se torna super genérica, podendo ir desde uma Home, até a página de about, baseado em quais componentes você for utilizar.\n\nNo vídeo acima você consegue ver mais desses pensamentos em prática.\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/criando-um-background-com-gradient-animado.md", "content": "---\nlayout: post\ndate: 2020-04-23T15:04:15.000Z\ntitle: Criando um background com gradiente animado com CSS Puro\ndescription: Aprenda a criar um background animado para os seus sites e acaba\n com a monotonia dos fundos estáticos.\nmain-class: css\ntags:\n - css\n - videos\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, continuando com os vídeos de dicas de CSS, hoje vai mais um vídeo bem simples, mas de uma técnica super famosa e utilizada em diversos sites.\n\nVocê pode ver a demo de hoje [nest link](https://labs.willianjusten.com.br/gradient-animation/) e o [código está lá no Github](https://github.com/willianjusten/labs/blob/gh-pages/gradient-animation/index.html)\n\n## Video\n\n\n\n## Conclusão\n\nNovamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!\n" }, { "path": "posts/criando-um-codepen-simples-em-poucas-linhas.md", "content": "---\nlayout: post\ndate: 2018-05-28T06:20:42.000Z\ntitle: Criando um Codepen simples em poucas linhas\ndescription: Aprenda a criar um live editor na web com poucas linhas de código.\nmain-class: js\ntags:\n - editor\n - js\n---\n## Introdução\n\nFala pessoal, faz um bom tempinho que não escrevo no blog e menos ainda sobre coisinhas técnicas. Então resolvi fazer um post simples de uma bobeirinha que fiz para uma palestra lá em [São Carlos](http://2018.devconf.opensanca.com.br/).\n\nEu queria muito fazer um live-coding, mas imaginei que não fosse ter internet e por isso o Codepen não iria funcionar. E aí o que eu pensei? Vou fazer um Codepen meu! Porque claro, eu tinha feito uma viagem de 11h de ônibus já era 1h da manhã, mas eu tinha que inventar besteira... No final deu tudo certo e umas pessoas até me perguntaram como funcionava e é tão idiota que tenho vergonha de mostrar, mas funciona xD\n\nComo de costume, vou ouvindo música enquanto escrevo, hoje estou ouvindo vários remixes do [Neelix](https://www.youtube.com/watch?v=3TCTJ_Rqyf4&start_radio=1&list=RD3TCTJ_Rqyf4).\n\n## Sobre o Editor\n\n![Screenshot do editor](/assets/img/cover.png)\n\nAssim como o codepen, ele basicamente tem 3 `textareas`, para html, css e js. E, claro, um live preview do que está acontecendo.\n\nSe quiser ver funcionando, só [acessar aqui!](https://willianjusten.com.br/dumb-codepen/)\n\n**Lembrando que é só um experimento e com isso não tem objetivo de ter o melhor código do mundo ou funcionar em todos os browsers.**\n\n## Criando a estrutura\n\nA primeira coisa que precisamos fazer é um `index.html` que vai ter os componentes necessários para funcionar:\n\n```html\n \n \n\n \n
\n \n \n \n
\n```\n\nÉ necessário ser um `iframe`, pois é nele que vamos jogar o código gerado dos 3 `textarea`. Tendo feito isso, vamos dar uma organizada na tela para ficar mais apresentável. Vamos criar um `style.css` e dentro dele vamos colocar:\n\n```css\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\niframe {\n width: 100%;\n height: 50vh;\n border: none;\n}\n\n.editor {\n display: flex;\n}\n\n.editor textarea {\n background: #1E1F20;\n border: 1px solid #d3d3d3;\n color: #d3d3d3;\n flex: 1;\n font-size: 16px;\n height: 50vh;\n}\n```\n\n## Fazendo funcionar\n\nAgora nós precisamos fazer esse código funcionar né? E para isso, vamos criar um arquivo `app.js` que vai conter toda a lógica do nosso editor. Vou colocar todo o código abaixo e aí vou explicando os detalhes, que são bem simples na realidade.\n\n```js\nconst htmlField = document.getElementById(\"html\");\nconst cssField = document.getElementById(\"css\");\nconst jsField = document.getElementById(\"js\");\nconst preview = document.getElementById(\"preview\");\n\nfunction render() {\n let iframeComponent = preview.contentWindow.document;\n\n iframeComponent.open();\n\n iframeComponent.writeln(`\n ${htmlField.value}\n \n `);\n\n iframeComponent.close();\n}\n\nfunction compile() {\n document.addEventListener('keyup', function() {\n render();\n });\n};\n\ncompile();\nrender();\n```\n\nSim, todo o código necessário para criar esse editor está aí. Então vamos por partes. \n\nPrimeiro é necessário criar os seletores para todos os nossos campos, que são criados nas linhas `1-4`.\n\nDepois temos a função que faz a mágica acontecer, que é a `render()`, ela eu vou separar um pouquinho para explicar. \n\nA primeira coisa que precisamos fazer é pegar o iframe para poder editá-lo, por isso eu uso o [contentWindow.document](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow) que vai me liberar a API do `#document` do iframe, me permitindo assim editar todo o seu conteúdo.\n\nApós isso, eu uso o `.open()` para abrir a edição e utilizo o [writeln](https://developer.mozilla.org/en-US/docs/Web/API/Document/writeln), que nada mais é que um processo de escrita. E aí, se você reparar, eu uso [Template String](https://willianjusten.com.br/criando-componentes-usando-so-es6/) para poder criar o conteúdo que vou adicionar. Que é o valor do html, o css que eu deixo inline encapsulado na tag `\n `);\n```\n\nCom essas mudanças, nosso editor já tem um syntax highlight lindão e o resto todo funcionando! =)\n\nComo eu tirei o placeholder, já que agora é um `pre`, eu resolvi no css adicionar as seguintes linhas para deixar bonitinho uma label para cada campo e também precisei renomear onde era `textarea` para `pre`, ficando assim:\n\n```css\n.editor pre {\n background: #1E1F20;\n border: 1px solid rgb(211, 211, 211);\n color: rgb(211, 211, 211);\n flex: 1;\n font-size: 16px;\n height: 50vh;\n padding: 30px 10px;\n margin: 0;\n position: relative;\n}\n\n.editor pre:before {\n display: block;\n font-size: 12px;\n position: absolute;\n top: 10px;\n left: 10px;\n}\n\n#html:before {\n content: 'HTML';\n}\n\n#css:before {\n content: 'CSS';\n}\n\n#js:before {\n content: 'JS';\n}\n```\n\nSe você quiser ver o código inteiro, segue o [repositório no Github](https://github.com/willianjusten/dumb-codepen), inclusive, se você quiser sugerir melhorias e inclusive falar que tá uma merda e refazer, sinta-se a vontade! =D\n\n## Conclusão\n\nBom pessoal, é só isso, espero que tenham gostado do post e achado interessante e útil de alguma forma. O objetivo desse post é mostrar que por mais que já exista algo e, na maioria vezes, muito superior, você sempre pode criar seus próprios projetinhos e não há nada de errado nisso. É sempre bom exercitar seus conhecimentos e subir isso no Github, além de você estar [contribuindo com o Open Source](https://willianjusten.com.br/guia-como-contribuir-em-open-source/), você está aprendendo e se divertindo.\n \n \n" }, { "path": "posts/criando-um-loader-animado-em-svg.md", "content": "---\nlayout: post\ndate: 2017-06-15T22:59:34.000Z\ntitle: Criando um loader animado em SVG\ndescription: Aprenda a criar um loader com uma animação única em SVG com apenas\n poucas linhas.\nmain-class: svg\ntags:\n - svg\n - animacao\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Introdução\n\nFaaaaaala pessoal, quanto tempo não escrevo aqui e hoje eu venho trazer um post um pouco diferente para vocês, com um vídeo do meu [Curso de SVG do Início ao Avançado](https://www.youtube.com/watch?v=VNTmT1qMgp0&list=PLlAbYrWSYTiOufRJOeP73o4GR9N1afQdP). Nesse vídeo eu explico como fazer uma das coisas mais legais do SVG, que é trabalhar com as propriedades de `stroke` do SVG. Mas também mostro um pouquinho sobre como construir uma forma geométrica e outras coisinhas mais que temos no SVG.\n\n## Vídeo\n\n
\n\n## Detalhes\n\nSe você quiser ver na prática ao invés de só no vídeo, segue o [link da demo](https://willianjusten.com.br/curso-de-svg/strokes/loader.html).\n\nComo visto no vídeo, primeiro a gente precisa criar um triângulo, definindo um `svg` com sua `viewbox`. Se quiser, tem um [post sobre a estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/) onde você pode ler mais sobre também. E o código fica:\n\n```html\n\n \n\n```\n\nDepois disso, nós precisamos criar a nossa animação usando as propriedades `stroke-dasharray` e `stroke-dashoffset`, você pode ler mais nesse [post sobre o efeito de desenhar com SVG](https://willianjusten.com.br/efeito-de-desenhar-com-svg/). E unida a essas duas propriedades, precisamos usar o `keyframes` para criar a animação.\n\n```css\n.triangle {\n stroke-dasharray: 17;\n animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n}\n@keyframes dash {\n to {\n stroke-dashoffset: 136;\n }\n}\n```\n\nPor fim, basta adicionar o texto de loading e posicioná-lo em nosso SVG.\n\n```html\n\n \n Loading...\n\n```\n\nE fazer a animação dele utilizando a opacidade para que ele fique piscando.\n\n```css\n.loading {\n font-family: 'Orbitron', sans-serif;\n font-size: 7px;\n animation: blink 0.9s ease-in-out infinite;\n}\n@keyframes blink {\n 50% {\n opacity: 0;\n }\n}\n```\n\n## Conclusão\n\nBom galera, é só isso! Bem simples de fazer uma animação utilizando o SVG e você consegue um efeito que não veria usando só CSS/JS. Se você gostou do vídeo e da explicação, aproveita e faz o [curso completo de SVG de graça no YouTube](https://www.youtube.com/playlist?list=PLlAbYrWSYTiOufRJOeP73o4GR9N1afQdP)\n" }, { "path": "posts/criando-um-menu-off-canvas-com-css3.md", "content": "---\nlayout: post\ndate: 2015-11-01T15:01:02.000Z\ntitle: Criando um menu Off Canvas com CSS3\ndescription: Aprenda a criar um menu off canvas usando CSS3 Transitions e Transforms.\nmain-class: css\ntags:\n - css\n - frontend\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nComo eu disse no post anterior, vou tentar voltar a escrever um pouquinho mais e para isso escolhi uma coisa que há muito tempo já haviam me perguntado, que era, como criar um menu off canvas como eu uso nesse blog. A trilha sonora de hoje vai ser [Forever Alone](https://open.spotify.com/playlist/5ngzYTyvT5UnRSoTj0rUPC?si=yZfinALfRiShVsb2cKKICQ) (que minha namorada não leia isso =o).\n\n## Off Canvas\n\nEsse menu passou a ser mais famoso com o uso de dispositivos mobile, onde não possuímos tanto espaço em tela para poder ter um menu lateral. Então nada melhor do que esconder e mostrar só quando necessário né?\n\nSe você é daqueles que gosta de ver funcionando primeiro, segue a [DEMO](https://labs.willianjusten.com.br/menu-off-canvas/#).\n\n**O exemplo mostrado aqui abaixo está bem simplificado sem o uso de prefixos para os browsers e pode ser instável em certas versões. Por favor, utilize um auto-prefixer para que tudo fique correto =)**\n\n## Funcionamento\n\nO funcionamento é bem básico e consiste de trabalhar com camadas deslocadas. Vamos imaginar os seguintes elementos:\n\n- `Wrapper`: elemento do tamanho da viewport da tela.\n- `Canvas`: área onde teremos nosso conteúdo de fato.\n- `Menu`: nosso menu.\n\nEm seu primeiro momento, teremos o menu totalmente fora do `wrapper` e o canvas ocupando toda a tela, conforme imagem abaixo:\n\n![Menu Off Canvas do lado de fora](/assets/img/off-canvas/layer-1.png)\n\nPara que o menu apareça na tela, o que fazemos é deslocar tudo para o lado direito, ou seja, no `eixo X` e assim o menu passa a aparecer e um pedaço do nosso canvas sai da tela, conforme imagem abaixo:\n\n![Menu Off Canvas do lado de dentro](/assets/img/off-canvas/layer-2.png)\n\n## HTML\n\nBom, vamos começar a mão na massa, porque isso é tão fácil de fazer e já estou enrolando muito. Primeiro de tudo, vamos montar nossa estrutura, que vai seguir basicamente aquelas 3 camadas ditas acima.\n\n```html\n\n
\n
\n
\n
\n
\n\n```\n\nDentro dessas camadas, vamos colocar algum conteúdo, só para não ficar muito vazio.\n\n```html\n\n
\n
\n \n
\n Fechar o menu\n \n
\n \n
\n Abrir o menu\n

Menu Off Canvas!!

\n

Uma simples demo mostrando como funciona o menu off canvas.

\n

\n Tutorial em\n willianjusten.com.br\n

\n
\n
\n
\n\n```\n\nNote também, que eu criei um botão com a seguinte classe `toggle-menu`, que vai ser responsável por fazer a mágica de abrir e fechar o menu.\n\n## CSS\n\n### Wrapper\n\nDepois de montada a estrutura, precisamos deixar um pouco bonitinho e fazer a mágica acontecer. Primeiro vamos montar nosso `wrapper`, ele é o responsável por segurar o conteúdo de nosso site e \"esconder\" as coisas que estiverem por fora dele, por esse motivo iremos utilizar a propriedade `overflow: hidden`, que vai esconder essas coisinhas.\n\n```css\n.wrapper {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 3000px; /* só para deixar a página grande*/\n}\n```\n\n### Canvas\n\nO canvas nada mais é que nossa tela e que será responsável por se mover pelas laterais junto com o menu, ou seja, movimentos no `eixo X`. Em seu estado inicial, ele deverá assumir que `x é igual a 0`, visto que ainda não se moveu. Coloquei também uma `transition` só para que o efeito seja suave e bonitinho <3\n\n```css\n.canvas {\n width: 100%;\n height: 100%;\n position: relative;\n transform: translateX(0);\n transition: 0.3s ease all;\n}\n```\n\n### Menu\n\nNosso menu inicialmente precisa estar do lado de fora do wrapper e para isso terá um valor negativo de X. As outras propriedades são somente para dar um pouco de estilo ao mesmo.\n\n```css\n.menu {\n height: 100%;\n position: absolute;\n transform: translateX(-300px);\n width: 300px;\n background: #bf0000;\n padding: 5rem;\n}\n```\n\n### Animação\n\nDepois de feitas essas adições de CSS, nosso menu já se encontra do lado de fora escondido, nosso canvas já está aparecendo, mas e como será o efeito para tudo funcionar? Simples, precisamos mover o nosso canvas para o lado direito, no tamanho exato que o menu foi deslocado, ou seja `300px`.\n\n```css\n.wrapper.show-menu .canvas {\n transform: translateX(300px);\n}\n```\n\n## Javascript\n\nPara funcionar o menu, só falta criarmos alguma trigger que será responsável por adicionar e remover a classe `.show-menu` do nosso `wrapper`. Podemos fazer isso usando Javascript puro, jQuery ou podemos até fazer sem o uso de classes e sim esquema de `:checked` de inputs e aí nem usar JS, enfim, fica a seu critério. Aqui segue um exemplo bem simples com JS Puro.\n\n```js\n// elementos auxiliares\nvar toogleMenu = document.querySelectorAll('.toggle-menu'),\n wrapper = document.querySelector('.wrapper')\n\n// criando evento de click para abrir o menu\nfor (var i = 0; i < toogleMenu.length; i++) {\n toogleMenu[i].addEventListener('click', menuAction)\n}\n\n// função auxiliar que abre e fecha o menu\nfunction menuAction() {\n if (wrapper.classList.contains('show-menu')) {\n wrapper.classList.remove('show-menu')\n } else {\n wrapper.classList.add('show-menu')\n }\n}\n```\n\nO código acima usa o `classList` para verificar se já existe a classe e adicionar ou então remover, fazendo assim a animação funcionar.\n\nE o resultado fica assim:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Melhorias\n\n### Performance com uso da GPU\n\nUm truque bem famoso que podemos usar para otimizar a animação é forçar o uso da aceleração via hardware do computador, definindo as transições em `3D`. A mudança pode ser bem pequena e quase imperceptível para a maioria das máquinas, mas já é um ganho, no caso, faríamos assim, substituimos o `translateX()` pelo `translate3d()`.\n\n```css\n/* Antes */\n.canvas {\n transform: translateX(0);\n}\n.show-menu .canvas {\n transform: translateX(300px);\n}\n\n/* Novo */\n.canvas {\n transform: translate3d(0);\n}\n.show-menu .canvas {\n transform: translate3d(300px, 0, 0);\n}\n```\n\n### Fechar o menu com a tecla ESC\n\nUma coisa que já é quase intuitivo é fechar as coisas usando a tecla `ESC`, então por que não criar um evento para isso no nosso menu? Em Javascript Puro ficaria assim\n\n```js\n// Adicionando evento para fechar o menu ao pressionar a tecla ESC\ndocument.addEventListener('keyup', function (e) {\n if (e.keyCode == 27) {\n if (wrapper.classList.contains('show-menu')) {\n menuAction()\n }\n }\n})\n```\n\n## Conclusão\n\nÉ basicamente isso pessoal, existem várias coisas que vocês podem brincar, como tipos diferentes de animação e velocidades de transição. Também podem brincar com novas posições, com menus vindo de cima, da direita, enfim...\nQuem fizer uma brincadeira nova, posta aí nos comentários.\n" }, { "path": "posts/criando-um-react-custom-hook-com-testes.md", "content": "---\nlayout: post\ndate: 2020-04-09T12:08:32.000Z\ntitle: Criando um React Custom Hook com Testes\ndescription: Aprenda como criar um react hook de Konami Code a partir do zero com TDD.\nmain-class: js\ntags:\n - react\n - js\n - tdd\n---\n\n## Introdução\n\nFala pessoal, o post de hoje vem com vídeo, espero fazer mais alguns assim, vamos juntos na expectativa que vocês gostam. Para o assunto de hoje, eu resolvi falar sobre hooks em React, dessa vez como criar um do zero.\n\nO vídeo ficou longo (~30min), então dá uma paradinha, vai lá pegar um café ou chá, avisa no _Whatsapp_ que vai assistir algo importante e segue junto =)\n\n~~Como eu falo devagar, bota em 2x que melhora~~\n\n## Video\n\n\n\n### Alguns links e informações\n\nTodo o código do projeto que fizemos, você encontrará no [repositório do Github](https://github.com/willianjusten/use-konami-code).\n\nO [post sobre React Hooks do blog é esse](https://willianjusten.com.br/habemus-react-hooks/) e o [post sobre como converter class para hooks](https://willianjusten.com.br/convertendo-um-class-based-component-para-react-hooks/).\n\nA biblioteca que usei para testar foi a [@testing-library/hooks](https://github.com/testing-library/react-hooks-testing-library), além disso, utilizei também o [create-react-app](https://github.com/facebook/create-react-app) para fazer a estrutura sem perder tempo.\n\nVocê pode ler mais sobre o _Konami Code_ [neste link](https://pt.wikipedia.org/wiki/C%C3%B3digo_Konami) e eu usei o [keycode.info](https://keycode.info/) para descobrir os valores certinhos de cada tecla.\n\n## Conclusão\n\nEspero que tenham gostado do vídeo e se gostaram, por favor, se inscrevam no [meu canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), compartilhem e comentem!\n" }, { "path": "posts/criando-um-switch-button-com-css.md", "content": "---\nlayout: post\ndate: 2015-12-06T22:42:25.000Z\ntitle: Criando um switch button com CSS\ndescription: Aprenda a criar os famosos botões deslizantes de on/off usados no\n iOS, Android e WebApps.\nmain-class: css\ntags:\n - css\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, para não deixar a peteca cair, resolvi escrever hoje também! Para me animar enquanto escrevo, estou uma playlist perfeita para a época, [Best of Star Wars](https://open.spotify.com/playlist/37i9dQZF1DXaUaRhCgtpCo?si=hA6xkhVFTGW0Tv8ekL817w) <3\n\nO post de hoje será bem simples, mas que eu precisei fazer há pouco tempo para um freela e achei que pudesse ser útil para mais pessoas, pois além de ser uma paradinha útil, também ajuda a entender mais conceitos de css e seletores.\n\n## Botão de On/Off\n\n![Vários botões de on/off do iphone](/assets/img/on-off/on-off-ios.jpg)\n\nMuitas vezes, precisamos responder alguma pergunta com `Sim` ou `Não` ou ligar e desligar alguma coisa. E na web, acabamos utilizando `checkbox` ou `radio` inputs. Mas acaba que eles não tem nenhum apelo visual e nem uma usabilidade tão boa. Pensando nisso, foram desenvolvidos esses tipos de botões, que são constantemente utilizados no iphone e android, possuem um visual mais bonito e são bem mais indicativos, facilitando até mesmo o uso. Pensando nisso, por que não utilizar nos nossos webapps também?\n\n## Organizando o Markup\n\nPrimeiro de tudo, como vamos trabalhar com um `checkbox`, nada mais justo que criar um né?\n\n```html\n
\n \n \n
\n```\n\nA classe `switch__container` por fora vai servir só para se você quiser dar algum espaçamento e organizar melhor a combinação input + label. Por dentro, vamos criar um `input` e um `label` ligados, para isso, utilizamos o `id=\"switch-shadow\"` e o `for=\"switch-shadow\"`. Precisamos que a label tenha o `for` para o input, pois esse será o truque mais importante.\n\n## Criando a base do CSS\n\nDepois de criada a base, veremos simples inputs de checkbox, aqueles quadradinhos sem graça e bobos. Para não ficar assim, precisamos adicionar um css básico, para esconder esse checkbox feio e também já deixar preparada a \"interface do clique\".\n\n**Atenção, todo o css usado aqui, foi sem prefixos, por favor, se desejar maior compatibilidade, use os prefixos, de preferência use um pre-processador para isso =)**\n\n```css\n.switch {\n position: absolute;\n margin-left: -9999px;\n visibility: hidden;\n}\n\n.switch + label {\n display: block;\n position: relative;\n cursor: pointer;\n outline: none;\n user-select: none;\n}\n```\n\nUsamos aqui o seletor `+`, conhecido como adjacente, que pega o primeiro elemento após o primeiro seletor. Se quiser ver mais sobre esse seletor, veja [esse meu post sobre alguns seletores css](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/).\n\nAs linhas `1-5` servem somente para esconder o checkbox feio e jogá-lo para fora da tela, garantindo assim, que ele não seja clicável. Enquanto as linhas `5-13` serão responsáveis por deixar o elemento ali \"clicável\" usando a propriedade `cursor: pointer`, também remove a opção de selecionar a label com o `user-select: none` e deixa ele como um elemento de bloco, para que possamos botar tamanho e estilo.\n\n## Definindo o estilo iOS\n\n![botão estilo iOS](/assets/img/on-off/switch-button.gif)\n\nAqui, nossa `label` será o elemento principal para criação do desenho. Primeiro, vamos definir um tamanho para ela, uma cor e também esse aspecto arredondado.\n\n```css\n.switch--shadow + label {\n padding: 2px;\n width: 120px;\n height: 60px;\n background-color: #dddddd;\n border-radius: 60px;\n}\n```\n\nCom esse primeiro passo, teremos nada mais que um retângulo com as bordas completamente arredondadas, num fundo cinza.\n\nDepois, na própria label, iremos utilizar o seletor `:before`, que vai ser responsável por fazer a transição entre o cinza e o fundo verde. E vamos usar o seletor `:after` para criar a bolinha, que irá de um lado para o outro.\n\n```css\n.switch--shadow + label:before,\n.switch--shadow + label:after {\n display: block;\n position: absolute;\n top: 1px;\n left: 1px;\n bottom: 1px;\n content: '';\n}\n.switch--shadow + label:before {\n right: 1px;\n background-color: #f1f1f1;\n border-radius: 60px;\n transition: all 0.4s;\n}\n.switch--shadow + label:after {\n width: 62px;\n background-color: #fff;\n border-radius: 100%;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\n transition: all 0.4s;\n}\n```\n\nAs primeiras propriedades que são em conjunto para o `:before` e para o `:after`, servem para definir conteúdo para os mesmos, para que assim, possamos manipular.\n\nPreste atenção, que eu coloco `transition: all 0.4s` para o before e o after, para que ocorra a transição suave, entre o estado de ON para o estado de OFF e vice-versa.\n\nCom esses estilos, nós já temos o nosso botão prontinho, só falta criar a interação.\n\n## Criando interação com clique no CSS\n\nEsse é um truque bem legal e que serve para muitas coisas, existe um seletor no css, chamado `:checked`, que verifica se o input foi marcado ou não. Com isso em mãos, podemos fazer a seguinte regra:\n\n```css\n.switch--shadow:checked + label:before {\n background-color: #8ce196;\n}\n.switch--shadow:checked + label:after {\n transform: translateX(60px);\n}\n```\n\nVerificando se o input foi marcado e caso tenha sido, mudar a cor e também mover a bolinha para o lado. E pronto! Seu switch botão no estilo iOS está criado! Se quiser, você pode brincar com o CSS e fazer outros estilos, como um flat ou qualquer outro. Segue abaixo uma Demo do que fizemos:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Atualização\n\nMeu amigo [Davidson](https://twitter.com/davidsonFellipe) lá de NY resolveu dar uma de flanelinha de layout =p\nBrincadeiras a parte, ele fez umas edições para que o visual ficasse um pouco mais realista e condizente com o iOS. A mudança foi basicamente no tamanho da bolinha, que estava erroneamente com `width:58px`, se quiser, dá uma olhadinha na [pen original](http://codepen.io/fellipe/pen/adzmPR) dele também.\n\n## Conclusão\n\nBom, mais um post bem rapidinho, mas que espero que tenha gostado. Se gostaram, não deixe de compartilhar e também fazer outros estilos e comentar aqui embaixo. Até a próxima o/\n" }, { "path": "posts/criando-um-tooltip-animado-com-css-clip-path.md", "content": "---\nlayout: post\ndate: 2020-05-07T13:19:46.000Z\ntitle: \"Criando um tooltip animado com CSS clip-path \"\ndescription: Aprenda a fazer uma micro interação bem sútil, mas que vai fazer\n toda a diferença no seu layout.\nmain-class: css\ntags:\n - css\n - video\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje vamos aprender a fazer uma micro interação bem legal ao criar um tooltip.\n\nE para criar nossa interação, nós vamos utilizar o `clip-path`, se você nunca utilizou, não se preocupe, no vídeo vamos aprender. Fica aqui também, [um post completo](https://willianjusten.com.br/mask-e-clip-com-css-e-svg/) explicando como utilizar o `clip-path` com CSS e também SVG.\n\nVocê pode ver todo o [código da demo aqui](https://github.com/willianjusten/labs/blob/gh-pages/tooltip-clip-path/index.html) e pode ver [a demo rodando aqui](https://labs.willianjusten.com.br/tooltip-clip-path/).\n\n## Vídeo\n\n\n\n## Conclusão\n\nNovamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!\n" }, { "path": "posts/criando-uma-animacao-de-card-com-hover.md", "content": "---\nlayout: post\ndate: 2020-05-14T06:44:15.000Z\ntitle: Criando uma animacao de Card com Hover\ndescription: Aprenda a fazer uma animação bem legal utilizar os pseudo-seletores\n :after e :before\nmain-class: css\ntags:\n - css\n - videos\ncategories:\n - Dicas de CSS\n---\n## Introdução\r\n\r\nFala pessoal! Continuando as nossas [Dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje vamos aprender a fazer animação bem legal ao fazer um hover num card. Mas essa animação pode ser feita também em um botão, ícone ou qualquer coisa que tenha uma caixa/borda ao redor.\r\n\nPara essa animação nós usaremos os pseudo-seletores `:after` e `:before` e um pouquinho da mágica do `scale`.\n\r\nVocê pode ver todo o [código da demo aqui](https://github.com/willianjusten/labs/blob/gh-pages/card-hover-animation/index.html) e pode ver [a demo rodando aqui](https://labs.willianjusten.com.br/card-hover-animation/).\r\n\r\n## Vídeo\r\n\r\n\n\r\n## Conclusão\r\n\r\nNovamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo esses pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!\r\n" }, { "path": "posts/criando-uma-animacao-de-digitacao-com-css.md", "content": "---\nlayout: post\ndate: 2020-04-21T09:04:15.000Z\ntitle: Criando uma animação de digitação com CSS\ndescription: Como fazer um efeito parecido com uma máquina de escrever digitando\n na tela somente só CSS.\nmain-class: css\ntags:\n - css\n - videos\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, hoje vou começar uma série de vídeos curtos ~~ou nem tanto~~, onde vou ensinar pequenas dicas de animações ou efeitos legais com CSS.\n\nJá tenho alguns outros vídeos que o pessoal gostou bastante como:\n\n- [Como criar um spinner loader com CSS puro e uma div](https://willianjusten.com.br/como-criar-um-spinner-loader-com-css-puro-e-uma-div/)\n- [Criando um ícone menu hamburguer com CSS puro](https://willianjusten.com.br/criando-icone-menu-hamburguer-animado-com-css-puro/)\n- [Criando um menu fullscreen animado com CSS puro](https://willianjusten.com.br/criando-menu-fullscreen-animado-com-css-puro/)\n\nE por isso, eu acho que vai ser legal gravar mais coisinhas como essas. Aceito sugestões de coisas que vocês gostariam que eu ensinasse também =D\n\nVocê pode ver a demo de hoje [nest link](https://labs.willianjusten.com.br/typing-effect-css/) e o [código está lá no Github](https://github.com/willianjusten/labs/blob/gh-pages/typing-effect-css/index.html)\n\n## Video\n\n\n\n## Conclusão\n\nEspero que vocês gostem da animação e do modelo de post/vídeo, por favor, não deixem de comentar, compartilhar e se inscrever no meu canal no YouTube, quanto mais gente assistir, mais coisas eu vou fazer.\n" }, { "path": "posts/criando-uma-animacao-de-reveal-block-com-css.md", "content": "---\nlayout: post\ndate: 2020-04-22T09:04:15.000Z\ntitle: Criando uma animação de Reveal Block com CSS\ndescription: Como fazer um efeito de mostrar um bloco e então revelar o conteúdo\n por trás com CSS.\nmain-class: css\ntags:\n - css\n - videos\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, continuando com os [vídeos de dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css), hoje vai mais um vídeo bem simples, mas de uma técnica super famosa e utilizada em diversos sites.\n\nVocê pode ver a demo de hoje [nest link](https://labs.willianjusten.com.br/reveal-effect/) e o [código está lá no Github](https://github.com/willianjusten/labs/blob/gh-pages/reveal-effect/index.html)\n\n## Video\n\n\n\n## Conclusão\n\nNovamente foi um post/vídeo bastante simples, mas que espero que seja útil para vocês irem aprendendo pequenos detalhes. Peço novamente que se puderem, compartilhem com seus amigos e não deixem de se [inscrever no canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), eu estou começando ainda, então é muito importante que vocês me ajudem nesse início!\n" }, { "path": "posts/criando-uma-lib-js-com-testes-do-zero.md", "content": "---\nlayout: post\ndate: 2019-03-06T07:23:39.000Z\ntitle: Criando uma lib JS com testes do Zero\ndescription: Uma mini-série de vídeos no Youtube onde eu ensino a criar uma lib\n JS simples usando testes do zero.\nmain-class: js\ntags:\n - youtube\n - testes\n - js\n - tdd\n---\n\n## Introdução\n\nFala pessoal, o post de hoje é mais um link para o meu [Canal no Youtube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1). Eu fiz uma pequena série de vídeos exatamente com o mesmo título desse post.\n\nTive uma demanda na Toptal para criação de um modal com vários comportamentos e notei que eles poderiam ser desacoplados do componente e reutilizados onde quisesse. Para isso criei umas pequenas bibliotecas e vi que seria interessante mostrar para vocês o processo da criação de uma delas.\n\n## Videos\n\n\n\nVocê pode também assistir a playlist inteira, diretamente no [Youtube](https://www.youtube.com/watch?v=nrNvUDPKcBk&list=PLlAbYrWSYTiPR9DhcL9-22W-E-p8LmDOJ).\n\nAbaixo vou colocar os links e comandos utilizados no curso.\n\n## Estrutura utilizada\n\nPara a formatação do código e regras, eu utilizei:\n\n- [Eslint](https://eslint.org/)\n- [StandardJS](https://standardjs.com/)\n- [Prettier](https://prettier.io/)\n\nPara os testes, utilizei o [Jest](https://jestjs.io/) e na compilação/server exemplo, utilizei o [Webpack](https://webpack.js.org/)\n\nSei que pode parecer um monstro de coisas, mas confesso que a maioria são coisas que uso sempre, então é só um copy/paste, no final tu nem precisa se preocupar com isso.\n\n### Instalação do Babel e suas dependências\n\nPara poder usar features novas do JS e poder depois transpilar para funcionar em todos os browsers, eu precisei do Babel e por isso instalei a versão mais nova que é a 7, abaixo segue o comando:\n\n```bash\nyarn add --dev @babel/core@7.3.4 @babel/plugin-proposal-class-properties@7.3.4 @babel/preset-env@7.3.4 babel-loader@8.0.5\n```\n\nDepois disso, é só criar um arquivo `.babelrc` na raiz do projeto com o seguinte:\n\n```json\n{\n \"presets\": [\"@babel/preset-env\"],\n \"plugins\": [\"@babel/plugin-proposal-class-properties\"]\n}\n```\n\nLembrando que você pode utilizar o `npm install` se desejar.\n\n### Eslint + StandardJS + Prettier\n\nO Eslint e o StandardJS são fundamentais para manter o meu código padronizado, evitando formatações erradas, variáveis não utilizadas e outras coisas mais. Para tudo funcionar, precisei instalar os seguintes pacotes:\n\n```bash\nyarn add --dev babel-eslint@10.0.1 eslint@5.15.0 eslint-config-standard@12.0.0 eslint-plugin-import@2.16.0 eslint-plugin-node@8.0.1 eslint-plugin-promise@4.0.1 eslint-plugin-standard@4.0.0\n```\n\nDepois de instalado é só criar um arquivo `.eslintrc.json` na raiz do sistema com o seguinte conteúdo:\n\n```json\n{\n \"parser\": \"babel-eslint\",\n \"env\": {\n \"jest\": true,\n \"browser\": true\n },\n \"extends\": [\"standard\"],\n \"rules\": {\n \"space-before-function-paren\": \"off\",\n \"comma-dangle\": \"off\"\n }\n}\n```\n\nRepare que eu sobrescrevo duas regras que são o espaço antes da função (não curto muito esse monte de espaço, mas na real, quem usa `function` hoje em dia? xD). A outra é para usar a vírgula na última propriedade, isso facilita e muito no diff do git.\n\nDepois do eslint+standardjs instalados, foi a vez do prettier:\n\n```bash\nyarn add --dev prettier@1.16.4\n```\n\nSe você utilizar o VSCode como eu, é só configurar o `formatOnSave` e fica lindo, aqui [como configurar](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).\n\n### Jest e Babel-Jest\n\nPara rodar nossos testes, eu resolvi utilizar o Jest, que tá começando a me conquistar, apesar de eu ainda amar o Mocha+Chai. Para isso, também precisa instalar o `babel-jest` para ele entender tudo certinho e ler nosso `.babelrc`.\n\n```bash\nyarn add --dev jest@24.1.0 babel-jest@24.1.0\n```\n\n### Webpack\n\nPara gerar a biblioteca e também a página de exemplo, eu utilizei o Webpack nas configurações mais simples, sem fazer quase nada na configuração, só instalei o necessário:\n\n```bash\nyarn add --dev webpack@4.29.6 webpack-cli@3.2.3 webpack-dev-server@3.2.1\n```\n\nA configuração ficou assim:\n\n```js\nconst path = require('path')\n\nmodule.exports = {\n mode: 'production',\n entry: './index.js',\n output: {\n path: path.join(__dirname, 'lib'),\n filename: 'on-leave-intent.min.js',\n libraryTarget: 'umd',\n library: 'OnLeaveIntent'\n },\n module: {\n rules: [\n {\n loader: 'babel-loader',\n test: /\\.js$/,\n exclude: /node_modules/\n }\n ]\n },\n devServer: {\n contentBase: [path.join(__dirname, 'example'), path.join(__dirname, 'lib')]\n }\n}\n```\n\n### Código / Pacote\n\nBom, eu não vou colar todo o código aqui, até porque acho que seria legal você assistir e tentar fazer também. Mas se você quiser ver já pronto, [aqui está o repositório](https://github.com/willianjusten/on-leave-intent).\n\nSe você quiser utilizar em algum projeto, o [pacote está no npm](https://www.npmjs.com/package/on-leave-intent). E você pode instalar com:\n\n```bash\nyarn add on-leave-intent\n```\n" }, { "path": "posts/customizando-o-disqus.md", "content": "---\nlayout: post\ndate: 2018-03-28T07:49:06.000Z\ntitle: Customizando o Disqus\ndescription: Como adaptar esse sistema de comentários para funcionar melhor no seu site.\nmain-class: jekyll\ntags:\n - disqus\n - jekyll\ncategories: null\n---\n## Introdução\n\nFala pessoal, quem não viu, eu lancei o [Night Mode](https://willianjusten.com.br/adicionando-night-mode-no-seu-site/) no meu blog, basta você clicar ali na lâmpada para mudar entre tela escura e clara, facilitando assim a visualização do blog!\n\nMas junto a essa mudança, que eu fiz super rápido após conversar com um leitor, veio também uma pequena chateação, o [Disqus](https://disqus.com/), que é o sistema de comentários que uso no meu blog tava ficando uma bela cagada e váaarias pessoas vieram comentar comigo sobre isso. Muito obrigado por me alertar galera, eu já tava ciente desse bug, mas tinha umas coisas que eu não sabia que o Disqus permitia e como agora eu sei, melhor compartilhar né? =)\n\nVou ouvindo um instrumental muito bom do [David Maxim Mimic](https://open.spotify.com/artist/0wQa1N4q3HmLwxqkpVcYhs?si=UDKr3WVnT0uk9SzXBI2qNA), umas guitarras bem legais e ótimas para dar foco e trabalhar.\n\n## Como o Disqus define os estilos?\n\nQuando você vai na [administração do Disqus](https://willianjusten.disqus.com/admin/settings/general/), lá no final, você vai encontrar a seguinte opção:\n\n![Select box mostrando 3 opções (Auto, Light Backgrounds e Dark Backgrounds)](/assets/img/disqus-appearance.png)\n\nE essas opções são bem simples de entender:\n\n- `Auto`: o próprio Disqus verifica se seu site é claro ou escuro e determina então o estilo que vai aplicar.\n- `For light backgrounds`: ele vai entender que seu site é claro e vai aplicar as cores padrões desse modo (era o que eu usava no meu blog).\n- `For dark backgrounds`: vai endender que o site é escuro e vai usar branco e cinza claro para contrastar melhor no fundo claro.\n\nOk, sabendo disso, agora que tem o `Night Mode` no blog bastava eu escolher o `auto` certo? Sim e não...\n\n## Como o Disqus escolhe as cores?\n\nNós já vimos que o Disqus tem as opções ali para light e dark, mas como ele decide as cores? Onde ele define as cores dos links dos usuários e dos pequenos detalhes?\n\nTem [um artigo](https://help.disqus.com/customer/portal/articles/545277-disqus-appearance-tweaks) no fórum deles explicando isso bem detalhadamente, então você pode ler lá com mais clareza, mas vou resumir aqui.\n\nO Disqus herda a cor do link diretamente colocado no seu site, então se você tiver um css como:\n\n```css\na {\n color: red;\n}\n```\n\nO Disqus vai herdar essa cor. Mas se estivesse num seletor mais interno como `.post-content .link` ou algo como `.link`, o Disqus não consegue achar e não vai modificar. Então defina a cor do `a` diretamente como se fosse o seu reset mesmo. Se no resto do site você precisar mudar, é só criar um seletor mais específico.\n\n## E quando o site muda de claro para escuro?\n\nO Disqus tem o seguinte script para iniciar nas páginas:\n\n```js\nvar disqus_config = function () {\n this.page.url = '{{ site.url }}{{page.url}}';\n this.page.identifier = '{{page.url}}';\n};\n\nvar d = document, s = d.createElement('script');\n\ns.src = '//willianjusten.disqus.com/embed.js';\n\ns.setAttribute('data-timestamp', +new Date());\n(d.head || d.body).appendChild(s);\n```\n\nEle cria o script, apenda na página e é isso. O disqus vai carregar a partir dali e não vai fazer mais nada.\n\nSó que como fica se o site mudar de claro para escuro? Isso mesmo, o disqus não vai mudar nada, ele vai ter carregado e identificado que era claro e fim. Só que não queremos isso né? Por isso, na trigger onde eu chamo a mudança do tema, eu coloquei a seguinte linha:\n\n```js\nconst pageUrl = document.location.href;\n\nDISQUS.reset({\n reload: true,\n config: function () {\n this.page.identifier = pageUrl;\n this.page.url = pageUrl;\n }\n});\n```\n\nOu seja, assim que a pessoa apertar no botão para mudar de tema, eu forço o Disqus a fazer um reload e com isso, ele vai verificar que a página mudou a cor e tudo vai funcionar lindo! =D\n\n## Conclusão\n\nBom, é só isso gente, o post foi mais uma forma de pedir perdão pelo vacilo, sim o blog tava bugado, mas agora já tá legal de novo! Obrigado pelos comentários apontando a falha e também fazer um chamado, o blog é **100% open source** e você pode contribuir nesse [link do Github](https://github.com/willianjusten/willianjusten.github.io). Então se você quer começar a ajudar um projeto open source, meu blog tá de braços abertos sempre!\n" }, { "path": "posts/debugando-e-agilizando-testes-na-react-testing-library.md", "content": "---\nlayout: post\ndate: 2021-02-18T15:09:30.000Z\ntitle: Debugando e agilizando testes na React Testing Library\ndescription: Como um método tão simples pode te ajudar a acelerar os seus testes\n e também descobrir erros escondidos.\nmain-class: js\ntags:\n - js\n - react\n - test\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Método mágico\n\nDentro da React Testing Library existe um método chamado [screen.logTestingPlaygroundURL()](https://testing-library.com/docs/queries/about/#screenlogtestingplaygroundurl) que ao rodar seu teste, ele gera uma url, onde você pode inspecionar o seu código e descobrir as melhores queries, além de ver tudo que está renderizado, podendo inclusive descobrir se existe algum bug ou algo inesperado. Super útil né?\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.\n\n" }, { "path": "posts/devo-fazer-faculdade.md", "content": "---\nlayout: post\ndate: 2015-02-07T12:47:02.000Z\ntitle: Devo fazer faculdade?\ndescription: Essa dúvida sempre acontece, principalmente para quem trabalha com\n programação. Vamos conversar mais sobre o assunto.\nmain-class: dev\ntags:\n - faculdade\n - programação\ncategories: null\n---\n\n## Introdução\n\nOntem conversando com o [Fernando Daciuk](http://blog.da2k.com.br/), começamos a falar de um assunto que eu julgo bastante importante, ainda mais para nossa área. É engraçado como esse assunto pode diferir de pessoa para pessoa, conheço pessoas que dizem que uma boa universidade é o mais importante de tudo e outras que acham uma bobeira. Por esse ser um assunto tão dividido, vou contar um pouco da minha história e também um pouco da minha opinião sobre o assunto e também levantar algumas dúvidas comuns em relação a isso.\n\n## Histórico\n\nComo disse no meu [primeiro post](https://willianjusten.com.br/making-of-parte-1/), meu primeiro curso foi bem diferente do que eu faço atualmente, foi Química Industrial, mas vou falar um pouco dele, porque foi fundamental para mim. Eu tinha 17 anos quando passei para a faculdade, resolvi me mudar de cidade (Petrópolis -> Niterói) só para poder fazer o curso. Foi uma experiência completamente nova, eu nunca tinha saído de casa, ainda mais tão novo e eu estudava em lugares bem pequenos, quando vi a imensidão da UFF, com seus inúmeros Campus, foi algo bastante diferente para mim.\n\nSempre fui um cara que passava em tudo com grande facilidade, fiz o vestibular praticamente sem me preparar como meus amigos e mesmo assim passei em várias faculdades e principalmente a que eu queria, que era a UFF. E esse foi o meu primeiro baque na faculdade. Meu primeiro período teve uma das matérias conhecidas como a mais carrasca de todas, que é Cálculo I e é claro que eu levei bomba na primeira prova, mas não foi coisa pouca não, eu tirei 0,3 de 10,0. Aquilo feriu demais o meu orgulho e a partir dali comecei a criar uma pequena rotina de estudos e fui um dos poucos da turma que conseguiu passar. Isso me ajudou a ver a importância dos estudos, dedicação e foco, coisa que eu nem dava bola antes.\n\nDurante o curso de Química tive a oportunidade de conhecer professores muito bons, que se esforçavam para que o aluno saísse da turma não só com o conhecimento da matéria, mas com o conhecimento da vida, para buscar mais conhecimento e crescer ainda mais. Mas também tive professores péssimos, que só estavam ali por estarem obrigados por algum motivo oculto. Se você está começando a faculdade ou desistiu de alguma faculdade por causa disso, saiba que isso é muito comum, em todo lugar você é capaz de encontrar os bons e os péssimos profissionais, cabe a você analisar e escolher o seu lado. Essa foi outra grande lição que aprendi na faculdade, como analisar pessoas e ambientes.\n\nLá ná Química mesmo eu comecei a me aproximar mais da computação, já que eu trabalhei no laboratório de Modelagem Molecular, onde fazíamos cálculos matemáticos para tentar buscar solucionar ou descobrir novas informações acerca de compostos químicos. E foi aí que eu comecei a me interessar mais por computação e resolvi fazer TI no IST em Petrópolis.\n\nDurante o meu curso de TI, eu já estava mais experiente, sabia sobre o funcionamento de uma faculdade, quais disciplinas necessitariam de mais foco, quais professores eu deveria forçar mais ou menos e o principal, com quais pessoas eu deveria me relacionar. Foi um curso relativamente mais fácil, devido a essa experiência de uma faculdade passada, mas muito proveitoso. Consegui passar um pouco da minha experiência para alguns dos colegas da turma, que hoje posso dizer que são bons amigos e que também aprendi muito com eles.\n\nPara mim, as faculdades serviram para meu amadurecimento pessoal e também profissional. Me permitiram pensar mais distante e não só uma visão de 1-2 meses. Fizeram com que eu fosse mais analítico a problemas e soluções, nunca mais resolvo um problema grande sem fazer uma análise completa dele e separá-lo por etapas e detalhes importantes. Também me ajudaram a me relacionar melhor com as pessoas e o mais importante, as pessoas certas. Tive milhares de trabalhos que necessitavam de longos textos a serem escritos e com isso, acabei tomando bastante gosto por escrever e por uma gramática correta. Enfim, eu tenho certeza que não seria o mesmo sem minhas faculdades e tenho muito a agradecer por isso.\n\n## Faculdades e \"faculdades\"\n\nO primeiro ponto a se entender é que as faculdades não vão te preparar para tudo na vida, seja para o mercado de trabalho, seja para a área científica.\n\n> Quem faz a faculdade são os alunos!\n- Autor desconhecido\n\nEssa frase faz todo o sentido do mundo, se você quer fazer uma faculdade só para ganhar um diploma, já desiste agora, pois muito provavelmente você não irá conseguir e se conseguir, não terá valido de nada.\n\nFaculdade não é pra te dar conhecimento técnico. Pra isso vc tem cursos, livros, tutoriais na internet e afins.\nFaculdade não acompanha mercado. Se for assim, faculdade vai mudar de 2 em 2 semanas.\n\nA faculdade foi feita pra te mostrar a base daquilo que vc estuda, te fazer evoluir como pessoa e profissional.\nAlém disso, faculdade está longe de se resumir a ir a aula. É todo o ambiente ao seu redor.\n\nA faculdade irá servir para te mostrar situações e oportunidades para que você adquira experiência e busque mais conhecimento. E nesse caso temos dois tipos bem diferentes: as faculdades mais tradicionais (Federais e Estaduais) e as vendedoras de diploma. Se você está numa faculdade que promete diploma rápido e fácil em dois anos, não vá esperando algo muito bom por aí. E isso é o que geralmente acontece com a maioria das pessoas na nossa área, fazem uma faculdade qualquer, tem uma péssima experiência e aí acaba falando mal.\n\n## Já sei programar, para que vou fazer isso?\n\nEssa é uma das frases mais equivocadas que eu vejo por aí. A faculdade não está lá para te ensinar necessariamente a programar, você terá diversos tipos de disciplinas, algumas aplicadas a programação e outras até bastante distantes a primeira vista. Muitos dos melhores programadores já sabiam programar antes de entrar na faculdade, isso acontece porque temos cada vez mais contato com computadores e tutoriais na internet e isso é excelente, porque já mostra a força de vontade de aprender.\n\nNa faculdade aprenderemos conceitos e paradigmas que são mais difíceis de serem vistos no cotidiano, como estudo de grafos, algoritmos eficazes, matemática discreta aplicada, dentre outros vários assuntos, dependendo da sua instituição de ensino. E isso irá te ajudar a ter uma cabeça mais aberta quando novos assuntos aparecerem.\n\n## Famosos nem fizeram faculdade...\n\n> Você não é todo mundo. - Sua mãe\n\nAssim como você pode acabar não fazendo faculdade e se tornar um cara de sucesso como Bill Gates, Steve Jobs, Mark Zuckerberg...Você também pode fracassar feio e não conquistar nada na sua vida. Não devemos comparar casos a parte com a nossa realidade, não que fazendo faculdade você será bem sucedido, isso será conquistado com o seu esforço.\n\nExiste uma [palestra muito famosa do Jobs](https://www.youtube.com/watch?v=66f2yP7ehDs), em que ele fala um pouquinho da sua experiência e como ele deixou a faculdade para estudar caligrafia, vale assistir.\n\n## Já sou velho e trabalho com isso tem 20 anos\n\nNunca se é velho para qualquer coisa =)\n\nRealmente se você já trabalha há tanto tempo na área, uma faculdade de programação pode não lhe trazer tantos benefícios. Mas por que não um curso diferente? Talvez administração, se quiser focar talvez em criar uma startup ou até mesmo Design, sempre vai ter alguma coisa legal para se aprender e aprimorar.\n\n## Ok, me convenceu, mas qual eu faço?\n\nO primeiro de tudo é ter uma noção do que deseja seguir para frente, se quer algo mais focado em infra ou desenvolvimento, se quer algo bastante acadêmico ou não.\n\nTendo um pouco disso em mente, leia as ementas dos cursos, existem milhares de cursos e cada um tem suas peculiaridades.\n\n## Mas não se esqueça...\n\nPor mais que você esteja na faculdade, todo o seu sucesso irá depender de você, então siga algumas dicas importantes:\n\n* **Leia bastante**: não se prenda ao dado nas aulas, busque conhecer mais sobre aquele assunto.\n* **Discuta**: não seja só mais um na sala que escuta e acredita em tudo que o professor diz, discuta opiniões, mostre seus pontos e espere receber mais conhecimento.\n* **Estude Certo**: estudar 16h por dia não te fará mais inteligente e nem estudar 1 dia antes da prova. Estude um pouco sempre, quando chegar uma prova ou trabalho, você já saberá tudo.\n* **Tenha bons grupos**: escolha pessoas que compartilhem do seu pensamento e não carregue ninguém, divida as tarefas e aprenda bastante com todos.\n* **Viva o ambiente**: não entre já querendo sair, conviva lá, retire o máximo que puder do lugar.\n\n## Busquem conhecimento\n\nDurante a criação do post, acabei achando alguns vídeos legais e excelentes posts sobre mil vezes melhores que o meu.\n\n* [O que aprendi em Harvard - Jorge Paulo Lemann](https://www.youtube.com/watch?v=rhaeYj7cln0) - **ASSISTA**\n* [Faculdade de informática. fazer ou não fazer? - Leandro Oriente](http://leandrooriente.com/faculdade-de-informatica-fazer-ou-nao-fazer/)\n* [Devo fazer faculdade? - Fabio Akita](http://www.akitaonrails.com/2009/04/17/off-topic-devo-fazer-faculdade#.VNYHTFPF88Y)\n" }, { "path": "posts/devs-brasileiros-gringos-trabalhar-exterior.md", "content": "---\nlayout: post\ndate: 2017-12-01T17:34:06.000Z\ntitle: Devs Brasileiros, Gringos e trabalhar no exterior\ndescription: Será que a diferença é tão grande assim? Vamos conversar um pouco sobre isso.\nmain-class: dev\ntags:\n - experiencia\n - dicas\n - lifestyle\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Introdução\n\nFaaaala pessoal, o post de hoje vai ser retirado da minha primeira iteração com as respostas do [formulário](https://willianjusten.typeform.com/to/MtDdfi) que passei pedindo para as pessoas me perguntarem coisas sobre Trabalho Remoto, viagens e etc. Todos esses posts vão ficar separados na série chamada [Trabalhar no exterior, remoto, viagens e etc.](https://willianjusten.com.br/series/#trabalhar-no-exterior-remoto-viagens-etc).\n\nTiveram muiiitas perguntas que acho que dá para criar uns 50 posts só disso. Mas uma pergunta que teve bastante repetição e por isso resolvi falar especificamente sobre foi:\n\n> Como é trabalhar com pessoal de fora? O que preciso aprender para ficar no nível deles?\n\nComo esse é um assunto bem interessante e pertinente, resolvi começar por ele. Relaxa que vai ser um post bem levinho e pequeno, sem nenhuma treta. São só algumas coisas que fui percebendo sobre meu tempo morando na Europa e trabalhando com gringos. Eu vou falar um pouquinho também sobre a europa em si, pois isso influi diretamente no comportamento do dev.\n\n Enquanto vou escrevendo, vou ouvindo o primeiro album da banda [Greta Van Fleet](https://open.spotify.com/album/6CGAeo2AyBkblQpnD9Gj22), que para mim é o Led Zeppelin da atualidade. Já tinha postado sobre eles antes e agora eles merecem destaque de novo, som de altíssima qualidade.\n\n## Resumo para os preguiçosos\n\nTrabalhar com o pessoal de fora é praticamente a mesma coisa que trabalhar com outros brasileiros. O nível deles não é mais alto que o nosso, pelo contrário, julgo a dizer que, em boa parte, eles estão abaixo do nível dos devs brasileiros. O que diferencia muito o dev brasileiro para o gringo é o estilo de vida e vou explicar um pouco sobre isso se você quiser continuar lendo =)\n\n## Nível dos Devs Gringos\n\nBom, a primeira coisa que eu vou falar é nesse aspecto. Será realmente que o nível dos devs gringos é maior que os devs brasileiros? Eu pude participar de muiiitos meetups e pequenos eventos enquanto estive na Irlanda. Eu fui em Meetups como o NodeJS Dublin, JS Dublin, React Dublin, Google Developers e vários outros. E a primeira coisa que percebi é que muitas das coisas que o pessoal discutia e apresentava eram, em sua maioria, coisas antigas e ou muito básicas. Sim, isso mesmo que você leu, eu fui em Meetup que tinha \"Introdução a AngularJS\" e não era das versões novas não, era do primeirão mesmo...\n\nTambém ao conversar com o povo, pude perceber o como a galera ainda era receosa de atualizar as coisas e estudar coisas novas. Lembro de ter ido num Meetup da Zendesk (que tem um escritório lindo e enorme <3) e o cara estava falando de ES6 para o povo e quando ele perguntou quem já tinha ao menos testado algo, quase ninguém levantou a mão! Isso foi em Novembro do ano passado gente!\n\n> É claro que tem devs muito bons e técnicos, eu pude conhecer vários. Mas não vá pensando que todo dev gringo é um [Dan Abramov](https://twitter.com/dan_abramov) da vida e que é melhor que você.\n\n## Estilo de Vida e como trabalham\n\nÉ aqui onde as coisas mudam **muito** entre o brasileiro e o gringo. Novamente, isso se aplicando a minha realidade e ao que vi (isso pode variar em outras regiões). Dentro do trabalho eles são bastante sérios, diretos e focados.\n\nÉ super normal você fazer um código e submeter para code review e os caras serem secos e falarem na lata que tá ruim, para fazer X ou Y. No Brasil eu acho que as vezes a gente tem aquela coisa de \"tentar amenizar\" a parada e falar \"com jeitinho\". O europeu não vai ter disso não, se estiver errado/ruim, ele vai falar \"seco\". Para quem não está acostumado com esse estilo, pode achar que os caras são grossos, arrogantes e outras coisas mais. Só que na realidade é só a forma deles falarem mesmo, sempre tentando ser o mais concisos possível. E no final, sendo muito sincero, isso é ótimo! Eu prefiro ter um feedback importante sobre o meu código para que eu possa evoluir, do que ficar sempre recebendo tapinha nas costas e não crescer.\n\nE outra coisa extremamente importante é que o Europeu preza ainda mais sua vida fora do trabalho. Deu 17/18h o pessoal está saindo e é isso aí. O mundo está caindo, eles vão desligar o computador e ir embora. Não tem essa cultura de que \"aquele que trabalha até mais tarde que tá mandando bem\", raramente você vai ouvir relatos de pessoas que ficaram até tarde nos escritórios.\n\nOutra coisa é a pontualidade, brasileiro é famoso em tudo que é canto pelos atrasos. E bom, isso é verdade, acho que não teve uma empresa brasileira que eu tenha trabalhado que não tenha tido atrasos constantes (até eu me incluo na parte de se atrasar). Como os gringos querem entrar e sair corretamente do trabalho, eles também prezam as reuniões e os tempos determinados. Se a reunião é para começar as 15h, ela vai começar as 15h tendo todo mundo ou não. E se é para demorar 30min, ela vai durar isso. Se for notado que o papo vai estender, já olham a agenda e separam um outro momento para isso.\n\n## Situação Financeira, estudos e pressão\n\nIsso é uma coisa interessante que estava até conversando com uns amigos hoje. Todos sabemos que a situação financeira acaba influindo no comportamento das pessoas e como elas vivem. Por mais que você diga \"Dinheiro não é importante, o importante é trabalhar no que gosta.\", o mundo é capitalista e não funciona 100% assim.\n\nOs europeus, em sua maioria, tem uma situação financeira melhor que nós brasileiros. E isso acaba lhes dando um pouco mais de comodidade, que pode vir a ser uma coisa boa ou ruim. Por terem essa facilidade, eles acabam querendo aproveitar mais da vida e muitos não estudam tanto ou evoluem fora do trabalho. Afinal de contas, eles já vivem bem e tem sua estabilidade.\n\nPor outro lado, o brasileiro vive na incerteza, as vezes você não sabe se vai estar empregado até amanhã, além da taxa de desemprego e pessoas fora da área de trabalho ser muito grande. E por causa dessa pressão e necessidade de se mostrar eficiente e bom, o brasileiro estuda no trabalho, em casa, no feriado, final de semana, dia santo e as vezes tá dormindo e estudando. E sabe o que acontece?\n\n> Ele acaba virando um desenvolvedor quase sempre atualizado e com bons conhecimentos, mas ao mesmo tempo lhe bate a síndrome do vira lata, porque ele está estudando e com isso está vendo grandes desenvolvedores de fora e pensando que todos são como aqueles caras.\n\nTenta pensar naquele seu parceiro do trabalho que manda absurdamente bem, mas tá sempre achando que é ruim e que a galera de fora é muito melhor. Te garanto que você vai achar vários exemplos. Manda esse post para ele, vai que ele acorda um pouquinho =D\n\n## Eventos e Meetups\n\nUma coisa que na Irlanda eu e uns amigos brincávamos era como tinha Meetup. Você podia comer e beber de graça todos os dias a noite, afinal de contas tinha Meetup todo dia! Isso é uma coisa bem bacana lá de fora e que ajuda o povo a ter um networking legal e com isso muitos ganham mais visibilidade e evoluem mais rápido.\n\nNo Brasil temos alguns eventos muitos maneiros e em São Paulo tiveram já dois anos tendo a semana Frontend. Isso foi fantástico! Mas ainda é muito pouco se comparar com grandes polos daqui de fora. E não pode ser só em São Paulo, eu sou do Rio (na real da Serra do Rio) e eu ouvi vários amigos comentando como que tem estado morta a comunidade...\n\nEu sei como é difícil organizar essas coisas, tenho amigos que tão aí fazendo evento todo ano e eles contam como é pedreira. Então, se você não sabe como ajudar na área, já pensou em se oferecer para ajudar nos eventos? E lembre-se, o evento não é só no dia. Na realidade o antes e o depois são muiiiito mais trabalhosos e os caras tão sempre precisando de ajuda.\n\n## Estrutura, empresas, transporte...\n\nMuito pela Europa ser mais evoluída, a estrutura das empresas acaba sendo muito melhor. E não, eu não estou falando sobre a empresa dar aquela cervejinha e lanchinho e salário baixo. Eu digo sobre o equipamento para trabalhar, mesas, cadeiras, prédios com boa acústica para não ficar um ruído horrendo o tempo todo. Além é claro, os salários são muito bons. Os salários de desenvolvedores são sempre bem acima do salário mínimo, o que já te permite viver de forma mais confortável. Quando você não precisa se desesperar se vai ter dinheiro para pagar o aluguel, você acaba tendo a cabeça mais limpa para poder trabalhar.\n\nOutra coisa importantíssima da Europa é que o transporte aqui funciona maravilhosamente bem em quase todas as grandes cidades. Existem várias opções e com isso, o tempo de deslocamento para o trabalho passa a ser bem menor ou menos sofrido.\n\nPensa no brasileiro comum, a média de deslocamento que ele leva para o trabalho é coisa de 1h. Claro que tendo pessoas com menos tempo e pessoas que chegam a até 2h! Então, o que acontece é que essa pessoa já precisa acordar bem mais cedo, passa um tempão até chegar no trabalho, em geral, num metrô lotado ou num trânsito caótico. Isso é algo extremamente desgastante, porque a pessoa já chega no trabalho cansada, com isso ela produz menos. Aí para compensar, o que a pessoa faz? Isso, ela fica mais tempo no trabalho e sai mais tarde. Só que com isso, ela chega ainda mais tarde em casa e aí tem todas as coisas que precisa fazer da vida pessoal, quando vai ver, acabou o dia e a pessoa sequer descansou ou estudou um pouco. E no dia seguinte segue a mesma rotina.\n\nEsse padrão de comportamento é repetido por muitos brasileiros, mas não ocorre com os europeus. Isso facilita com que o Europeu possa ter uma vida mais saudável e possa também estudar e trabalhar melhor.\n\n## Como o Br é visto no exterior?\n\nIsso é uma parada bem legal. Sempre quando eu conversava com a galera e perguntavam de onde eu vinha e eu falava do Brasil, eu diria que em 90% dos casos eles faziam expressão de impressionados e falavam que conheciam muitos brasileiros ótimos. Já teve muito RH falando comigo se eu não conhecia brasileiros para vir para algum país do lado de cá. Isso é porque nós somos conhecidos como pessoas que trabalham muito e são muito esforçadas. Porque como eu disse acima, o europeu preza muito mais a vida pessoal e nós brasileiros estamos acostumados a \"se matar\" tanto que até mudar o mindset que não precisa de tudo isso, demora um pouco.\n\n## Conclusão\n\nComo eu falei, o post não seria nenhuma treta nem nada. O que eu concluo a partir de tudo isso é que temos muitos brasileiros fantásticos e bem superiores aos gringos. Os europeus tem mais facilidades para evoluir, mas isso não significa necessariamente que todos aproveitam essas oportunidades. Nós brasileiros temos boa imagem na área de desenvolvimento no exterior e não é impossível trabalhar para uma empresa estrangeira, as vezes é até mais fácil." }, { "path": "posts/dez-anos-de-blog.md", "content": "---\nlayout: post\ndate: 2024-12-26T08:00:40.000Z\ntitle: Dez anos de blog e mais alguns de carreira\ndescription: Alguns aprendizados e reflexões ao longo desse tempo\nmain-class: misc\n---\n\n## Introdução\n\nFala pessoal, até que num demorei muito a escrever, depois que fiz minha [retrospectiva de 2024](https://willianjusten.com.br/meu-ano-de-2024).\n\n> Achou que ia ficar sem post no blog? Achou errado otário! - Choque de cultura\n\nJá vou começar quebrando uma tradição nos posts, ao invés de recomendar uma música/banda, hoje eu vou falar sobre um filme.\nMas num é só um filme, é um dos melhores filmes que assisti. Se trata de [Nosferatu](https://www.youtube.com/watch?v=nulvWqYUM8k), novo filme do Robert Eggers.\nSe faça um favor e vá ao cinema assistir, é bom demais!\n\nEsse post aqui vai ser uma mistureba de dicas, aprendizados, reflexões e sei lá o que mais me der na telha de escrever até minha reunião\ncomeçar (pois é, quanto mais tempo de área, mais reuniões também...).\n\n## Dez anos de blog\n\nÉ isso aí, dia 3 de Janeiro de 2015, eu escrevi sobre [Como fiz meu blog em Jekyll](https://willianjusten.com.br/making-of-parte-1), de lá para cá, esse\nmesmo blog já foi [reescrito em Gatsby](https://willianjusten.com.br/making-of-blog-novo-gatsby-js) e [reescrito novamente em Next.js](https://willianjusten.com.br/migrei-meu-blog-do-gatsby-para-o-nextjs), então já ficam umas primeiras dicas:\n\n- Não tenha medo de [aprender em público](https://www.swyx.io/learn-in-public)\n- Crie projetos pessoais para testar novas tecnologias e praticar\n- A máxima de [Feito é melhor que perfeito](https://willianjusten.com.br/feito-e-melhor-que-perfeito) existe, então só escreva e publique, depois você se preocupa\n\nEsse meu blog sobreviveu exatamente por causa dessas três coisas, mesmo eu sendo uma pessoa extremamente perfeccionista, teve um dia que eu simplesmente\nliguei o \"foda-se\", escrevi, publiquei e bom, aí foi.\n\nMuito se engana quem achou que eu já soubesse tudo que escrevi aqui de anos e anos, na realidade, muita coisa eu estava aprendendo e o processo de escrever\najudava exatamente nisso.\n\n## A dificuldade de se manter criando conteúdo\n\nA dificuldade de se manter criando conteúdo é enorme, principalmente quando você não tem um objetivo claro e/ou não é tão organizado. Isso sem falar que\nse você não tem um público no início, isso pode ser um pouco frustrante. Vem então mais umas dicas:\n\n- Todo assunto é assunto, não deixe de escrever/gravar algo por achar que é \"simples\" e ou \"bobo\"\n- Faça listinhas de assuntos para escrever/gravar, isso vai te ajudar a manter a consistência\n- Evite pensar/ver só números, eles podem ser enganosos, as vezes você impacta uma pessoa só, mas ela passa isso para outras mil e você nem sabe\n\nVocê pode falar:\n\n> Ah Will, mas você não posta praticamente nada há anos e agora vai vir nesses papos de coach?\n\nSim, exatamente por saber o quanto é difícil, que acho importante falar. É o famoso \"faça o que falo mas não faça o que faço\".\nE coach de c\\* é rola!\n\n## Será que sou bom o suficiente?\n\nEu escrevi um post sobre [esse assunto](https://willianjusten.com.br/sou-bom-o-suficiente), mas sempre gosto de trazer ele de volta, pois é algo que\nme persegue bastante até hoje, isso mesmo, com mais de 10 anos só de blog e outros de carreira, ainda me pergunto se sou bom o suficiente.\n\nE se você vive se perguntando sobre isso, saiba que é natural e esse sentimento não vai desaparecer, mas o que você pode fazer é tentar refletir sobre\nseu próprio desempenho e evolução. Talvez esse post que estou escrevendo aqui, seja exatamente eu tentando me ajudar a ver como cresci nesse tempo.\nFaça você o mesmo, tenho certeza que vai notar o quão melhor você está.\n\n## Dicas de carreira e código\n\nLá em 2017 eu escrevi um post baseado num dos meus livros favoritos que é o [The Pragmatic Programmer](https://pragprog.com/titles/tpp20/the-pragmatic-programmer-20th-anniversary-edition/), nele eu listei [65 dicas para ser um programador melhor](https://willianjusten.com.br/65-dicas-para-ser-um-programador-melhor). As dicas são valiosas e funcionam até hoje, então recomendo que você leia e aqui vão algumas outras dicas também que vou pegando pelo caminho da vida:\n\n- Ajudar outros é a melhor forma de se aprender.\n- Ainda sobre ajudar, comece ajudando e pessoas irão te ajudar de volta, nem sempre da mesma maneira, mas sempre de alguma forma.\n- Faça redes, é muito mais fácil entrar num emprego por uma pessoa que você conhece do que por uma vaga publicada.\n- Ser uma voz ativa no seu trabalho/time pode te trazer mais oportunidades que imagina.\n- Antes de sair falando sua opinião, tente entender o contexto que X ou Y foi feito, você pode aprender muito com isso.\n- Leia códigos de outros, mesmo que não seja do seu time/contexto, você vai aprender e ainda abrir seu leque de conhecimento\n- Se aprofundar em uma tecnologia é bom, mas o grande valor estar em ser [T-shaped](https://petarivanov.me/blog/the-t-shaped-software-developer/), ou seja, ter uma expertise em uma área e conhecimento em outras áreas, se você é Front, tenta ver um pouco de Back e Banco de Dados, se você é Back, tenta ver um pouco de Front, no final, o que ajuda a definir Jr/Pleno/Senior/Whiskas Sache é a sua habilidade de entender o contexto e resolver problemas, sejam quais forem.\n- Criar bugs é mais comum do que você imagina, então tente sercuidadoso, mas não seja tão cuidadoso a ponto de não conseguir se mexer.\n- Outras áreas importam tão ou mais que programação, então se envolva com elas, seja marketing, design, vendas, produto, etc.\n- Com a dica de cima, pense mais no produto e em seus usuários e não só na tecnologia. Um produto bom é aquele que resolve problemas e atende às necessidades dos usuários.\n- Cada um tem seu tempo e seu entendimento das coisas, então não se preocupe com o que outros fazem, mas sim com o que você faz.\n- Deixe o código melhor do que o encontrou, mas sempre que possível, converse com quem fez o código para entender o que foi feito e como pode ser melhorado.\n- Outras pessoas tem medo de fazer as mesmas \"perguntas idiotas\" que você, então as pergunte, vão até te agradecer.\n- Não existem \"perguntas idiotas\".\n- Aprenda a usar um debugger, um `console.log` ajuda, mas um debugger vai te permitir muito mais.\n- Ir \"tomar um banho ou dormir\" já resolveu mais bugs que ficar horas olhando para a tela.\n\n## Conclusão\n\nÉ isso aí, eu comecei com ideia de escrever uma coisa, depois virou outra coisa e no final saiu esse post aqui, mas como falei, importante é escrever.\nEspero que tenha sido útil de qualquer forma.\n\nSe você tiver outras dicas legais, compartilha aí nos comentários.\n" }, { "path": "posts/dica-de-css-scroll-snap.md", "content": "---\nlayout: post\ndate: 2019-07-17T10:39:23.000Z\ntitle: \"Dica de CSS: Scroll Snap\"\ndescription: Criando fullpage scroll com simples linhas de CSS.\nmain-class: css\ntags:\n - CSS\n - Dicas\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, uma coisa que pediam muito enquanto eu estava meio parado, eram dicas e coisas com CSS. Pois então, vamos voltar a fazer mais posts para a [série de dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css).\n\nA dica de hoje é extremamente simples, mas bem interessante, nós vamos aprender a criar um efeito que é usado em vários sites famosos, que é o chamado fullpage scroll ou onepage scroll. Ele nada mais é que uma adaptação do scroll, que faz com que ao você dar scroll, ele \"mova uma tela inteira de uma vez só\".\n\nBom, enquanto escrevo esse post, eu vou ouvindo o [Unplugged MTV do Alice in Chains](https://open.spotify.com/album/5PdgIAHzwDvTZRjIGSQGtN?si=FA3a1dtIQnmRZH_c50E0Xg), na minha opinião, é um dos melhores Unplugged que já ouvi, e olha que existem muitos bons.\n\n## Demo\n\nSe você quiser ver logo o negócio funcionando, seguem aqui as 3 diferentes demos:\n\n- [Vertical](https://labs.willianjusten.com.br/scroll-snap/vertical)\n- [Horizontal](https://labs.willianjusten.com.br/scroll-snap/horizontal)\n- [Proximity](https://labs.willianjusten.com.br/scroll-snap/proximity)\n\nAbaixo segue um gif do exemplo vertical, para você já entender o que faremos.\n\n![Fotos de paisagens na Austria sendo scrolladas verticalmente](/assets/scroll-snap.gif)\n\n## Plugins famosos e sites que usam\n\nComo disse, vários sites usam essa técnica, mas eles acabam caindo em plugins JS. Que são os casos do:\n\n- [FullPage](https://alvarotrigo.com/fullPage/)\n- [One Page Scroll](http://www.thepetedesign.com/demos/onepage_scroll_demo.html)\n- [RevealJS](https://revealjs.com/#/)\n\nE aí, eu separei alguns sites bem legais que usam:\n\n- [BBC - Partition of India Article](https://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02)\n- [One Month Off - Indonesia](https://readymag.com/repponen/20907/10/)\n- [Coca Cola Annual Review](https://www.coca-colacompany.com/annual-review/2017/index.html)\n\nE quanto ao [RevealJS](https://revealjs.com/#/), existem várias apresentações de dev por aí usando ele. Já pensou, agora você pode fazer suas apresentações usando só css simples para passar os slides! =D\n\n## Mas e como fazer isso só com CSS?\n\nExiste um conjunto de propriedades chamadas [CSS Scroll Snap](https://caniuse.com/#feat=css-snappoints), que já é até bem antigo, mas vem ganhando compatibilidade com os browsers aos poucos. E algumas dessas propriedades, que é o caso do [scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) já é bastante compatível e já faz o efeito que precisamos.\n\nA sintaxe mudou um pouco e agora está ainda mais simples de usar, então vamos ver como que faz.\n\n### Criando o Markup\n\nBasicamente precisamos criar um `.container` e então as `sections`, que irão ocupar toda a página e para ter as imagens, utilizaremos diferentes `backgrounds`, então a forma mais simples fica assim:\n\n```html\n
\n
\n
\n

\n Um caminho qualquer em Bad Ausee, uma cidade na região da Estíria que\n tem pouco mais de 5 mil habitantes.\n

\n
\n
\n
\n
\n

\n A caminho da cidade de Hallstatt, conhecida como uma das mais bonitas do\n mundo. Para chegar lá, somente de barco ou dando uma grande volta pelo\n lago de mesmo nome.\n

\n
\n
\n
\n
\n

\n As margens do lago Autaussee. Esse dia fazia apenas 10 graus negativos,\n mas eu queria muito passear e explorar todos os lugares.\n

\n
\n
\n
\n
\n

\n Mais uma foto do mesmo barco que leva a Hallstatt, mas dessa vez do meu\n drone, amo como a reflexão ficou tão azul em contraste com as montanhas.\n

\n
\n
\n
\n
\n

\n Momentos antes do pôr-do-sol visto de Hallstatt. Essa cadeia de\n montanhas é realmente maravilhosa!\n

\n
\n
\n
\n```\n\nCada `section` tem uma classe específica, assim conseguimos adicionar diferentes backgrounds para cada um.\n\n### Criando o CSS base para as sections\n\nAntes de fazer o scroll funcionar, vamos criar os estilos para as seções ficarem fullscreen e a caixa da descrição da foto. Para ocupar a tela inteira vamos utilizar as propriedades `vw` e `vh`, que são unidades de viewport, eu falo [mais sobre elas aqui](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/). Segue abaixo o css:\n\n```css\nsection {\n background-size: cover;\n background-position: center center;\n height: 100vh;\n width: 100vh;\n}\n\n.description {\n background: rgba(0, 0, 0, 0.3);\n bottom: 1rem;\n color: white;\n font-size: 1rem;\n line-height: 1.5;\n max-width: 250px;\n padding: 2rem;\n position: absolute;\n right: 1rem;\n}\n\n.one {\n background-image: url('./img/one.jpg');\n}\n.two {\n background-image: url('./img/two.jpg');\n}\n.three {\n background-image: url('./img/three.jpg');\n}\n.four {\n background-image: url('./img/four.jpg');\n}\n.five {\n background-image: url('./img/five.jpg');\n}\n```\n\n### Agora a mágica do CSS\n\nBasicamente precisamos dizer ao nosso `.container`, que ele vai ter esse controle de scroll, utilizando a propriedade `scroll-snap-type`. Ela recebe 2 parâmetros que podem ser `scroll-snap-type: x|y|both mandatory|proximity`.\n\nO primeiro parâmetro indica para onde será o scroll, `x` para o scroll horizontal, `y` para scroll vertical e `both` se for para os dois eixos. Já o segundo parâmetro indica como funcionará o scroll.\n\nO `mandatory` diz que pelo simples fato de você mover um pouco o scroll, ele já irá para o próximo \"slide\", já o `proximity`, ele vai calcular qual está mais próximo, se você mover só um pouco ele vai voltar a centralizar o slide atual.\n\nEntão para fazer os slides mudarem de forma horizontal, usaremos da seguinte forma:\n\n```css\n.container {\n scroll-snap-type: x mandatory;\n display: flex;\n}\n\nsection {\n scroll-snap-align: start;\n}\n```\n\nPassando a propriedade `scroll-snap-align`, a gente diz em qual parte do slider queremos que o scroll pare e alinhe, como é uma página inteira, faz mais sentido ser no `start`, mas existem também as opções de `end` e `center`.\n\nE pronto! Já está funcionando! Sim, só isso, não precisa de mais nadinha! Você pode ver o exemplo do [horizontal aqui](https://labs.willianjusten.com.br/scroll-snap/horizontal) e se quiser ver o [código inteiro](https://github.com/willianjusten/labs/blob/gh-pages/scroll-snap/horizontal.html).\n\nPara o exemplo na vertical, basta trocar o eixo de `x` para `y`, ficando `scroll-snap-type: y mandatory;`. Você pode ver exemplo do [vertical aqui](https://labs.willianjusten.com.br/scroll-snap/vertical) e se quiser ver o [código inteiro](https://github.com/willianjusten/labs/blob/gh-pages/scroll-snap/vertical.html).\n\n## Conclusão\n\nA dica de hoje foi super rápida e simples, mas é possível que muita gente não conheça essa propriedade, então é legal passar adiante. Vou continuar postando algumas outras dicas com CSS para criar soluções que usamos no nosso dia a dia. Se vocês tem alguma coisa específica em mente, deixa aí nos comentários ou manda lá no [Twitter](https://twitter.com/Willian_justen) que eu posso estar fazendo.\n" }, { "path": "posts/dica-rapida-1.md", "content": "---\nlayout: post\ndate: 2015-01-07T23:31:05.000Z\ntitle: \"Dica rápida #1\"\ndescription: Detalhes fazem a diferença, vamos falar sobre Favicons, Touch Icons\n e Tile Icons e como eles fazem a diferença.\nmain-class: dev\ntags:\n - dicarapida\n---\n\nJá que estou participando da campanha do [Fernando Daciuk](http://blog.da2k.com.br/) que é o **#1postperday**, resolvi criar uma outra hashtag, que será a **#dicarapida**. Como o próprio nome diz, serão dicas rápidas, mas que as vezes a gente não faz ou esquece ou ninguém falou por ser \"bobo\".\n\nA minha ideia também será postar coisas em um nível também iniciante, assim ajuda uma galera nova, que está começando agora.\n\n## Favicons\n\n![Favicons](/assets/img/dica-rapida-1/favicons.png)\n\nPequenos e bastante simples, mas que já ajudam a identificar um site sem necessidade de mais nenhuma informação. Aposto que você sabe todos os sites que estão abertos na imagem acima =)\n\nAntigamente os favicons eram somente na extensão `.ico` e possuiam um tamanho padrão de `16x16`. E a partir da windows 7, com a possibilidade de se adicionar sites na barra de tarefas o tamanho foi passado para 3 versões:\n\n- `16x16`: tamanho na barra de endereço\n- `32x32`: ícone na barra de tarefas ou atalhos\n- `24x24`: favorito no browser\n\nMas se você acha que irá precisar criar então 3 arquivos diferentes, se enganou, a extensão `.ico` permite ter várias dimensões em um mesmo arquivo. E se você quiser gerar automático, tem esse [site aqui](http://www.favicomatic.com/).\n\n### E como faço isso funcionar?\n\nBasta adicionar a seguinte `meta tag` no `head`:\n\n```html\n\n```\n\nAlgumas pessoas apoiam utilizar um formato mais adaptável que é o `png` usando as novas meta tags com size, como mostrado no código abaixo:\n\n```html\n\n\n\n```\n\n### Mas se pode usar png, por que você vem me falar para usar o formato .ico que é velho??\n\nSimples! Nesse caso, eu digo que em time que se está ganhando não se mexe. É utilizado já deve ter uns 10 anos e funciona com suporte para browser novo, velho, ATÉ NO IE FUNCIONA! Então deixa eles felizes com um ícone pelo menos.\n\n## Touch Icons\n\nCom o advento dos devices da apple, ela decidiu criar meta-tags para lerem ícones de diferentes tamanhos e formatos, possibilitando uma qualidade maior quando o ícone fosse colocado na _home screen_ ou favoritado no safari.\n\nDe acordo com as versões do iOS e o aparelho, temos os seguintes tamanhos:\n\n![Tabela de tamanhos dos ícones da Apple](/assets/img/dica-rapida-1/favicons-table.png)\n\n####JESUS, MARIA, JOSÉ, É IMAGEM PARA CARAMBA! NÃO VOU FAZER ISSO!\n\nRelaxa amigo, existem geradores na net, esses dois abaixo são muito bons:\n\n- [Real Favicon Generator](http://realfavicongenerator.net/)\n- [Iconogen](http://iconogen.com/)\n\nE como faço para os apps lerem isso aí?\n\n```html\n\n\n\n\n\n\n\n\n```\n\nE prontinho, olha que legal, já funciona!!\n\n![Imagem em um ipad](/assets/img/dica-rapida-1/icon-apple-circle.png)\n\n## Tile Icons\n\nCom o desenvolvimento do windows 8 e do surface, agora temos aquela interface flat e os ícones também mudaram. Para se adaptar a isso, a M\\$ também resolveu criar suas meta tags e passou a definí-las como `tiles`.\n\nPara fazer funcionar, basta adicionar as seguintes linhas no head:\n\n```html\n\n\n```\n\n## Conclusão\n\nPequenos detalhes fazem grandes diferenças e passam de simples sites feitos por sobrinhos, para sites profissionais. Se liga, faz um trabalho legal e será recompensado.\n\nFica aqui a primeira #dicarapida, quer que eu fale de algum assunto? Manda para [@willian_justen](https://twitter.com/Willian_justen) com a hashtag ou comenta aqui embaixo.\n" }, { "path": "posts/diga-nao-ao-medium-tenha-sua-propria-plataforma.md", "content": "---\nlayout: post\ndate: 2019-07-30T14:11:25.000Z\ntitle: \"Diga não ao Medium: tenha sua própria plataforma\"\ndescription: Algumas razões para você ter sua própria plataforma ao invés de\n soluções como o Medium.\nmain-class: misc\ntags:\n - blog\n - medium\n---\n## Introdução\n\nFala pessoal, o post de hoje é sobre um assunto que eu já abordo faz um tempo, criei vários tweets uma época, mas agora reparei que nunca tinha escrito um post sobre isso. Provavelmente será um post curto e a ideia é que ele seja usado como referência em discussão.\n\nEnquanto escrevo esse post, vou ouvindo uma banda de post-rock que eu amo demaaais, que é a [Explosions in the Sky](https://open.spotify.com/artist/1uQWmt1OhuHGRKmZ2ZcL6p?si=6Cdmq6BERceYUJSTEi9svQ). Na minha opinião, uma das melhores bandas para se ouvir enquanto se está trabalhando.\n\n## O que a web é hoje e como deveria ser?\n\nExiste um site bem bacaninha que trouxe esse assunto há um tempo, que foi o [alwaysonyourplatform.com](https://www.alwaysownyourplatform.com/). Basicamente, ele lembra que antes tínhamos o RSS, cada um tinha o seu próprio blog e apesar de parecer \"mais difícil\", todo mundo se achava.\n\nA ideia da web é ser livre e descentralizada, mas por causa de monopólios como Facebook, Google, Medium, está tudo centralizado na mão de poucos. E o que acontece com isso? Nós perdemos a nossa liberdade! \n\nE essa liberdade não é só de poder fazer o que quiser com seu conteúdo, mas isso inclui até mesmo quem isso alcança. Ou vai dizer que você nunca viu ninguém mendigando para acionar o \"sininho\" para que o conteúdo chegasse até você? \n\nE o que dizer do **paywall**? Se você usa o Medium, provavelmente já deve ter visto a imagem abaixo:\n\n![Texto cortado dizendo que para continuar lendo a história, você precisa se logar no Medium.](/assets/img/medium.jpeg)\n\nE quais seriam as outras razões para se ter a própria plataforma ao invés de um Medium da vida?\n\n## Razões para ter sua própria plataforma\n\nEu compartilharei somente algumas das razões e isso é altamente opinativo, você pode não concordar com tudo e é por isso que eu gostaria muito que você comentasse na seção de comentários, participe =D\n\n### 1. Ownership do Projeto\n\nJá parou para reparar que as pessoas normalmente falam \"Você viu aquele post do Medium?\" ao invés de falar \"Você viu aquele post do fulano?\". A descredibilização começa por aí. Os posts deixam de ser seus e sim do Medium, por mais que tenha sua fotinha lá e diga que você é o autor, já perdeu a relevância.\n\nTer um blog pessoal, marca sua presença na web, as pessoas te identificam e identificam o seu conteúdo. Por mais que o Medium tenha um alcance bem grande e você ache que está ganhando notoriedade com isso, a sua imagem é pulverizada e às vezes o retorno é até menor do que se fosse em seu próprio blog.\n\n### 2. Medium é uma empresa!\n\nLembra do Blogger? MySpace? Google Plus? Inbox? Se você lembra, sabe que todos eles tem uma coisa em comum, foram descontinuados ou estão praticamente abandonados. E sabe o que aconteceu com o conteúdo lá? Morreu...\n\nO que te garante que o Medium não vai quebrar e com isso, você vai perder tudo que tinha lá?\n\n### 3. Personalização\n\nPode parecer bobeira, mas as vezes você quer um widget específico ou o código num highlight diferente e bom, lá você não terá isso. \n\n### 4. Aprendizado\n\nQuando você cria seu blog pessoal, você aprende **MUITO** no processo. Você aprende a usar as ferramentas, aprende como publicar seu site, usar um domínio próprio, coisinhas de DNS. E além de todas as coisas técnicas, você também aprende um pouco de marketing, para conseguir aumentar seu alcance e atrair mais gente. E bom, todo aprendizado é útil e importante.\n\n### 5. UI/UX confusa\n\nExiste um post bem legal explicando [vários problemas de UI/UX](https://medium.com/@nikitonsky/medium-is-a-poor-choice-for-blogging-bb0048d19133) do Medium. Problemas como modais chatos aparecendo, banners de cookie, tooltip para qualquer texto que você seleciona a todo tempo, uma timeline desorganizada, e etc.\n\n### 6. Aberto a colaboração\n\nIsso mesmo, a plataforma é sua e você decide o que quiser nela! E isso inclui deixá-la opensource e receber ajuda de outras pessoas! Uma coisa que eu tenho dado bastante ênfase desde que refiz o novo layout do blog, é pedir a colaboração da galera, fazer com que as pessoas se sintam parte do meu blog, não só como leitores. Às vezes é difícil saber por onde começar a contribuir no Github, e ter um lugar onde você pode contribuir com uma revisão de texto ou até mesmo mudar estilos e parte do código, é bem legal.\n\nInclusive, deixo aqui agradecimento ao [Gabriel Ramos](https://github.com/gabrieluizramos) que [submeteu um PR](https://github.com/willianjusten/willianjusten.com.br/pull/112) melhorando as transições do blog.\n\nAo [Ademílson Tonato](https://github.com/ftonato), que está sempre revisando meus posts, sem ele, meus posts estariam cheios de erros xD\n\n## Conclusão\n\nEnfim, existem várias razões para você ter sua própria plataforma, seja para aprender, crescer sua imagem na web, ou até mesmo ajudar os outros e ganhar colaborações.\n\nNão deixe que a web seja dominada por poucos! Faça com que a internet seja como ela sempre foi planejada para ser, livre e descentralizada!\n\n```bash\n(•_•)\n<)    )╯Always\n/    \\\n\n\\(•_•)\n(    (> Own\n/    \\\n\n(•_•)\n<)    )> Your Platform\n/    \\\n```\n\n" }, { "path": "posts/dominio-proprio-no-github-pages.md", "content": "---\nlayout: post\ndate: 2015-01-29T06:16:36.000Z\ntitle: Como ter Domínio Proprio no Github Pages\ndescription: O passo a passo para deixar seu blog com seu domínio.\nmain-class: dev\ntags:\n - github pages\n - jekyll\n - tutorial\ncategories: null\n---\n\nComo já disse no [Making of - Parte 1](https://willianjusten.com.br/making-of-parte-1/) e no [Making of - Parte 2](https://willianjusten.com.br/making-of-parte-2/), o meu blog é hospedado no github pages. E não é só o meu, mas vários, um que está fazendo muito sucesso agora é o blog do [Fernando Daciuk](http://blog.da2k.com.br/), que é feito no [Hexo](https://hexo.io/), mas também hospedado no github pages.\n\n**Ou seja, esse processo é para qualquer tipo de site feito no github pages, através de qualquer ferramenta!!**\n\nO processo engloba 3 etapas muito fáceis e rápidas:\n\n## 1 - Subindo para o Github Pages\n\nPara subir os arquivos para o Github é bastante simples, mas para isso você precisa ter o [Git](http://git-scm.com/) instalado na sua máquina. Teste o comando `git` na sua máquina, se ele disser que o comando não existe, faça o download e instale, se ele mostrar a possibilidade de comandos, quer dizer que está instalado =)\n\nOutra dependência é que você cadastre uma conta no [Github](https://github.com/). Tendo isso pronto, é só seguir os seguintes passos:\n\n#### Passo 1: Crie um repositório\n\n![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/criar-repo.png)\n\nPara que funcione no branch `master`, você precisa criar utilizando o `seunomedeusuario.github.io`, no meu caso ficou `willianjusten.github.io`.\n\n![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/nome-repo.png)\n\n#### Passo Final:\n\n```bash\n# Iniciar um repositório git na pasta do projeto\ngit init\n\n# Adicionar todos os arquivos\ngit add -A\n\n# Commitar os arquivos\ngit commit -m \"Commit Inicial\"\n\n# Adicionar o repositório remoto\ngit remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git\n\n# Subir seu lindo blog\ngit push -u origin master\n```\n\nCom esses passos o seu Blog já está no Github Pages e se tudo estiver certinho em 20-30 minutos você já pode acessar através da url `seunomedeusuario.github.io`.\n\n## 2 - Comprando um domínio e direcionando o DNS\n\nExistem vários lugares para se comprar domínio, principalmente dependendo do domínio que você queira comprar. Aqui eu irei falar do mais comum, que é o domínio `.com.br`.\n\nPara comprar um domínio `.com.br` você pode utilizar o [Registro.br](http://registro.br/). Abrindo o site, você tem uma ferramenta para verificar se o domínio desejado está livre ou não.\n\n![Imagem mostrando a Home Page com a ferramenta de analise de domínios](/assets/img/dominio/dominio-livre.png)\n\nTendo o domínio livre, basta fazer o registro do domínio e aí lhe serão dadas algumas opções de pagamento, quanto mais anos, maior o desconto no valor final. Após seguir todos os passos, você terá acesso ao painel daquele domínio e poderá ir nas opções de DNS.\n\n![Imagem indicando a opção de DNS](/assets/img/dominio/dns.png)\n\nClicando para editar a zona de DNS, você terá que criar 2 `A record` e um `CNAME`, conforme a imagem abaixo. Caso tenha alguma outra dúvida, existe o [link oficial do github](https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider/) falando sobre.\n\n![Zona de DNS](/assets/img/dominio/zona.png)\n\n**Lembrando que onde está o meu domínio, você precisa mudar para o seu domínio desejado e o CNAME precisa ser o link do repositório do github.**\n\nFeito isso fica faltando somente mais uma etapa.\n\n## 3 - Criação do arquivo CNAME\n\nEsse é molezinha, basta criar um arquivo CNAME **(precisar estar maiúsculo)**. E dentro deste arquivo, você irá colocar o seu domínio próprio. **Lembre-se de não colocar protocolo e nem www.**\n\nFeito tudo isso, basta esperar um tempinho até o DNS propagar e tudo show de bola =)\n" }, { "path": "posts/efeito-de-desenhar-com-svg.md", "content": "---\nlayout: post\ndate: 2015-10-05T21:41:21.000Z\ntitle: \"#15 - Criando o efeito de desenhar com SVG\"\ndescription: Um tutorial de como fazer aquele efeito legal de desenhar elementos\n na tela com SVG.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Introdução\n\nEstou aproveitando que estou descendo a serra e vou iniciar mais um post, não sei se vou ter paciência para terminar, mas vamos lá. No momento estou ouvindo Radiohead, mais especificamente o cd The Bends, que é um dos meus favoritos.\n\nNesse post eu vou mostrar uma das paradas mais legais de todas do SVG, que é a técnica de Line Drawing, mais famosa como \"aquele efeito louco de desenhar na tela\". Essa é uma técnica bastante simples, mas que pode ser utilizada de diversas formas e permite criar vários tipos de interação e usabilidade.\n\nSe você não sabe que efeito é esse, dá uma olhadinha nessa [coleção do codepen](http://codepen.io/collection/cEust/10/).\n\n## Contornos\n\nSe pararmos para pensar, todo desenho começa a partir de um contorno e depois colorimos as formas criadas. Então, para criarmos esse efeito de \"desenhar\" basta manipularmos o contorno, que no nosso SVG é a propriedade `stroke`.\n\n## Stroke-dasharray e Stroke-dashoffset\n\nA propriedade `stroke-dasharray` permite você determinar qual vai ser o tamanho do traço no contorno e o espaço entre um traço e outro. Exemplo:\n\n```css\npath {\n stroke-dasharray: 10;\n}\n```\n\nIsso significa que cada traço no desenho terá um tamanho de 10 e um espaço de 10 para o próximo traço.\n\nJá a propriedade `stroke-dashoffset` permite mudar onde o `stroke-dasharray` vai começar e terminar.\n\nEntão para o efeito acontecer, basta que eu determine que o `stroke-dasharray` seja o tamanho máximo do elemento e fazer com que o `stroke-dashoffset` vá diminuindo do tamanho máximo até zero. Assim teríamos:\n\n#### Passo 1\n\n```css\ninicio {\n stroke-dasharray: 'tamanho do desenho';\n stroke-dashoffset: 'tamanho do desenho';\n}\n```\n\nAqui, como determinamos que o `stroke-dashoffset` é o tamanho do desenho, ele empurra todo o traço e não enxergamos nada na tela.\n\n#### Passo 2\n\n```css\nfinal {\n stroke-dashoffset: 0;\n}\n```\n\nNesse passo, dizemos que o traço deve começar do ponto zero do mesmo e como dizemos que o `stroke-dasharray` tem o tamanho todo, vemos claramente todo o contorno.\n\nMas vamos parar de falar teoria e vamos para a prática:\n\n## Criando o Efeito de Desenhar\n\n### 1 - Baixando um SVG ou criando um.\n\nPara esse primeiro exemplo, eu resolvi criar um bem simples, que nada mais é que escrever \"Hello\" na tela. Minha letra é uma bosta, então releve, por favor, depois faça com sua assinatura ou qualquer coisa e manda nos comentários =)\n\nEu fiz o desenho no Illustrator, mas ele também pode ser feito no Inkscape, Sketch e outros editores de SVG.\n\n![Imagem mostrando um Hello escrito no Illustrator](/assets/img/draw-svg/hello.png)\n\n### 2 - Otimizando o SVG\n\nSempre que baixar um SVG ou criar um, a melhor coisa a se fazer é dar uma otimizada, isso ajuda a eliminar muita sujeira que atrapalharia até na leitura do próprio SVG. Nesses casos pontuais (só um item), aconselho muito o [SVG OMG](https://jakearchibald.github.io/svgomg/).\n\n### 3 - Inserindo o SVG na página\n\nBasta copiar o código gerado e colar inline no seu html. Aproveite e defina uma classe para o SVG, no caso, eu coloquei `class=\"hello\"`.\n\n```html\n\n \n\n```\n\n### 4 - Descobrindo o tamanho total do path\n\nPara que possamos fazer o truque de desenhar, precisamos saber o tamanho do path para definir em nosso `stroke-dasharray` e `stroke-dashoffset`. Para isso, basta usarmos um método do Javascript. No próprio console do seu devTools, faça:\n\n```js\nvar draw = document.querySelector('.hello path')\nconsole.log(draw.getTotalLength())\n```\n\nNo meu caso, o resultado foi de `1044.4212646484375`.\n\n### 5 - Criando a animação\n\nDepois de tudo ali em cima, agora fica bem fácil de fazer essa animação. Primeiro vamos definir para a nossa classe `hello`, o seu tamanho máximo e uma largura para o traço.\n\n```css\n.hello {\n stroke-width: 3px;\n stroke-dasharray: 1045; // numero arrendoda do tamanho\n}\n```\n\nDepois disso, vamos criar a animação em css usando `@keyframes`, se você não conhece ainda, dá uma lidinha no [site da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes), lá eles falam bastante sobre. Mas o que você precisa saber é que através dos keyframes a gente consegue definir estados da animação, seja \"de-para\" (from-to) até o uso de porcentagens de um tempo. Para o nosso caso, faremos aquela jogadinha dos `strokes`.\n\n```css\n// write é o nome da nossa animação\n@keyframes write {\n 0% {\n stroke-dashoffset: 1045; // tamanho inicial\n }\n 100% {\n stroke-dashoffset: 0; // tamanho final\n }\n}\n```\n\nFeito isso, basta definirmos essa animação lá na nossa classe `hello`:\n\n```css\n.hello {\n stroke-width: 3px;\n stroke-dasharray: 1045; // numero arrendoda do tamanho\n animation: 6s write; // quanto menor, mais rápido\n}\n```\n\nProntinho, temos nossa animação feita!! Segue abaixo o exemplo criado, para ver a animação é só clicar em \"Rerun\" ali no canto inferior direito:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Desenhando e preenchendo\n\nJunto a essa brincadeira de desenhar, podemos além de só desenhar o contorno, podemos também pintar as coisas. Segue um exemplo simples feito com a logo do Python, que baixei no [SVG Porn](http://svgporn.com/). Lembre de clicar no \"Rerun\" caso a animação já tenha acontecido:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nPara esse exemplo, utilizei 3 pontos no `keyframe` para poder pintar somente ao finalizar os traços, deixando como se fosse um efeito de montar a logo. Para que desse uma suavizada das cores, eu usei a propriedade `fill-opacity`, que é bastante similar a propriedade `opacity` do css, porém que funciona só nos preenchimentos.\n\n## Desenhando com Scroll\n\nOutro efeito legal é fazer o desenho ser criado ao scrollar a tela. Para isso precisamos de um pouquinho mais de Javascript, para que a cada scroll, a gente vá diminuindo o valor do `stroke-dashoffset` até que ele alcance o valor de zero.\n\nSegue um exemplo:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nVamos prestar atenção a certos trechos do código. Primeiro precisamos verificar qual o tamanho do elemento e então definir seu `stroke-dasharray` e o `stroke-dashoffset` igual nos outros exemplos.\n\n```js\n// Seleciona o path do nosso desenho\nvar path = document.querySelector('path')\n\n// Pega o tamanho total dele\nvar pathLength = path.getTotalLength()\n\n// Faz com que o stroke-dasharray fique com o tamanho total\npath.style.strokeDasharray = pathLength + ' ' + pathLength\n\n// Faz com que o stroke-offset fique com o tamanho total\n// Escondendo assim o desenho\npath.style.strokeDashoffset = pathLength\n```\n\nDepois nós precisamos criar um evento de `scroll` e de acordo com ele, ir diminuindo o valor do `stroke-dashoffset` até 0.\n\n```js\n// Adiciona o evento de Scroll\nwindow.addEventListener('scroll', function (e) {\n // determina a porcentagem do quanto o usuário já scrollou na tela\n var scrollPercentage =\n (document.documentElement.scrollTop + document.body.scrollTop) /\n (document.documentElement.scrollHeight -\n document.documentElement.clientHeight)\n\n // Determinando o tamanho do desenho pela porcentagem\n var drawLength = pathLength * scrollPercentage\n\n // Diminuindo o valor do offset para criar o desenho\n path.style.strokeDashoffset = pathLength - drawLength\n})\n```\n\n## Conclusão\n\nBom, espero que tenham gostado desse post, essa é uma das animações mais legais que tem no SVG e que é praticamente exclusiva dele, visto que não conseguimos interagir com imagens e criar certos desenhos somente em CSS é quase inviável.\n\nE se você acha que o efeito é legal, mas não saberia aplicar em seu site, seguem alguns sites que utilizam muito bem dessa técnica.\n\n- [Garden](http://gardenestudio.com.br/)\n- [Panizzon](http://panizzon.ind.br/)\n" }, { "path": "posts/entendendo-especificidade-em-css.md", "content": "---\nlayout: post\ndate: 2020-04-06T05:43:00.000Z\ntitle: Entendendo especificidade em CSS\ndescription: O CSS não é difícil, mas é fundamental entender suas regras para\n não ficar tentando as coisas na sorte.\nmain-class: css\ntags:\n - css\n - \"\"\n---\n## Introdução\n\nFala meu povo, espero que todos estejam bem nesses tempos de quarentena. Faz muito tempo que não escrevo, estava cheio de trabalho e outras coisas, mas agora pretendo voltar com tudo! \n\nIrei escrever vários posts de diferentes assuntos, o de hoje é um assunto comum, mas que ainda confunde muita gente e não só os iniciantes. Já vi muita gente \"tentando na sorte\" para ver se funcionava e acho que não deveria ser assim, então vamos descomplicar isso.\n\nA ideia desse post veio porque eu fiz alguns questionários na Pluralsight, que [abriu os cursos de graça em Abril](https://www.pluralsight.com/offer/2020/free-april-month), e algumas das perguntas eram sobre isso.\n\nEnquanto escrevo, vou ouvindo o álbum [Triumph & Disaster](https://open.spotify.com/album/5VbiQX9WB7ZDNvFOy3pY7J?si=t1I5SJAhRlycG352f4VKSg) de uma banda chamada [We Lost the Sea](https://open.spotify.com/artist/7GVByFFfFJYCzK4d8ZyL6s?si=MseOnVrwSU-BuXfYCVexzA). Um som instrumental bom demais, perfeito para escrever posts, programar e estudar!\n\n### Antes de tudo, um resumo de seletores CSS\n\nEu tenho um [post sobre seletores CSS](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) onde explico cada um em detalhes, mas aqui vamos falar só dos tipos que existem, que são:\n\n* **Seletores de Tipo**: onde marcamos diretamente as tags que queremos selecionar, exemplo `p` para selecionar todo `

`.\n* **Pseudo-elementos**: como o nome sugere, eles não são elementos em si, mas servem para selecionar parte do html relativo a outro seletor. Por exemplo, `p::first-letter`.\n* **Seletores de Classe**: um dos que mais utilizamos, podemos atribuir classes para diferentes elementos e então selecionar essas classes. Exemplo: `

` pode ser selecionado com `.text`.\n* **Seletores de atributo**: selecionamos elementos com um tipo específico de atributo. Por exemplo, `input[type='number']`. Aqui estamos selecionando todos os inputs que tiverem `type=number` como atributo.\n* **Pseudo-classes**: selecionamos elementos baseados em seus estados CSS. Por exemplo `:hover`, `:active`, `:checked` e outros.\n* **Seletores de Id**: selecionamos um elemento pela sua Id única. Só pode existir um único elemento para cada id. Exemplo: `

` seria selecionado com `#header`.\n* **Estilos inline**: são estilos aplicados diretamente ao elemento, através do atributo `style`. Por exemplo, `

`\n\n### Os pesos de cada seletor\n\n* **Peso mais baixo**: seletores de tipo e pseudo-elementos\n* **Peso baixo**: classe, atributo e pseudo-classes\n* **Peso médio**: seletores de id\n* **Peso alto**: estilos inline\n\n### Regras de estilo aplicados\n\n**1.** Se estilos de diferentes pesos são aplicados a um mesmo elemento, o estilo que tiver o maior peso será o aplicado. Se os estilos tiverem o mesmo peso, os estilos que vierem mais abaixo, serão os aplicados. Isso é devido ao \"efeito cascata\" que dá exatamente o nome do CSS (Cascading Style Sheets).\n\n```scss\n//

\n\n.foo {\n color: green;\n}\n\n.bar {\n color: red; // essa será a cor aplicada\n}\n```\n\n**2.** Quando dois seletores de mesmo peso são aplicados a um elemento, é contado como 2x o peso. Por exemplo, elementos com duas classes aplicadas terão um peso maior do que um elemento com só uma classe.\n\n```scss\n.foo.bar {\n color: blue; // essa será a cor aplicada\n}\n\n.bar {\n color: red;\n}\n```\n\n**3.** Estilos de peso maior **sempre** irão prevalecer, não importa quantos elementos você colocar. \n\nExemplo com id:\n\n```scss\n#footer {\n background: red; // essa será a cor aplicada\n}\n\ndiv.class1.class2.class3.class4 {\n background: blue;\n}\n```\n\nExemplo com inline:\n\n```html\n#title {\n color: blue;\n}\n\n\n

Eu terei a cor Vermelha

\n```\n\n**4.** Uma regra para ganhar de todos, o famigerado (famoso) `!important`. Essa regra _basicamente_ ignora qualquer outra regra, até mesmo um estilo inline!\n\n```html\n#title {\n color: green;\n}\n\nh1 {\n color: blue !important;\n}\n\n

Eu terei a cor Azul =)

\n```\n\nPor favor, **~~não use~~ evite usar** !important. A única maneira de sobrepor uma regra com _important_ é adicionando ainda mais especificidade somado a outro `!important`, o que torna o código ainda mais dificil de sobreescrever e complexo durante a manutenção.\n\nCaso tenha algum estilo sobreescrevendo o seu, dê uma olhada no nível de especificidade e suba um, seja através do `id` ou uma classe a mais. Mas evite o `!important` o máximo que puder.\n\n**5**. O seletor universal e os combinadores **não** impactam no peso dos seletores. Os combinadores são `>`, `~` e `+`. Por exemplo, se tivermos o seguinte markup:\n\n```html\n
\n

Foo

\n

Bar

\n
\n```\n\nE tivéssemos a seguinte regra css:\n\n```scss\n#block > .text {\n color: red;\n}\n\n#block .text {\n color: green; // essa será a cor aplicada\n}\n```\n\nAs duas regras possuem exatamente a mesma especificidade (id + classe), portanto, a regra mais embaixo será aplicada.\n\n### Momento do teste\n\nComo eu falei, a ideia do post foi devido a umas perguntas disso no questionário da Pluralsight, então vou deixar aqui para vocês responderem =)\n\n**Pergunta 1**\n\n![Qual vai ser a cor final do background? rect fill=\"red\" style=\"fill: blue; color: green\" Opções: black, green, blue, red](/assets/img/css-question-1.jpeg)\n\n**Pergunta 2**\n\n![Qual a regra vai ter mais especificidade? 1) seletor universal * 2) div > strong 3) .footer h2 span 4) #footer](/assets/img/css-question-2.jpeg)\n\nSe você respondeu `blue` para a pergunta 1 e `#footer` na segunda pergunta, meus parabéns! Se você errou alguma delas, tente ler de novo as regras a cima e descobrir o porquê das respostas.\n\n### Conclusão\n\nEspero que o post tenha sido útil e se você tiver dúvidas e/ou sugestão de assuntos, me manda também! Quero voltar a escrever mais e é sempre bom saber sobre o que escrever.\n" }, { "path": "posts/entendendo-testes-de-software.md", "content": "---\nlayout: post\ndate: 2015-12-12T13:49:42.000Z\ntitle: Entendendo Testes de Software\ndescription: Para que servem os testes? O que eu ganho com eles? Que tipos de\n testes existem? O que fazer e o que não fazer.\nmain-class: dev\ntags:\n - tdd\n - dev\n---\n## Índice\n\n* [Introdução](#intro)\n* [Qualidade de Software](#qualidade)\n * [Qualidade para o Cliente](#qualidade-cliente)\n * [Qualidade para o Chefe](#qualidade-chefe)\n * [Qualidade para o Desenvolvedor](#qualidade-dev)\n* [Test Driven Development (TDD)](#tdd)\n* [Ciclo de desenvolvimento com TDD](#ciclo)\n* [Por que poucos fazem TDD?](#poucos)\n* [O que ganho com TDD?](#ganho)\n* [Tipos de testes](#tipos)\n * [Teste Unitário (Unit Test)](#unit)\n * [Teste de Sanidade (Smoke Test)](#smoke)\n * [Teste de Integração (Integration Test)](#integracao)\n * [Teste de Aceitação (Acceptance Test)](#aceitacao)\n* [Mocks](#mocks)\n* [Dicas para se fazer melhores testes](#dicas)\n* [Ferramentas para testar](#ferramentas)\n * [JS](#tool-js)\n * [Python](#tool-python)\n * [Ruby](#tool-ruby)\n* [Conclusão](#conclusao)\n\n

Introdução

\n\nFala pessoal, esse talvez seja um dos posts que mais quis escrever e mais demorei também. Muito pelo fato de que eu não conseguia definir uma linha de pensamento de como escrever. Eu decidi que irei falar as teorias primeiro, que eu considero muito importante por mais que ninguém goste e então farei a prática.\n\nEnquanto eu vou escrevendo, vou ouvindo [Ghost B.C.](https://open.spotify.com/artist/1Qp56T7n950O3EGMsSl81D), uma banda bastante controversa, mas que passei a curtir bastante.\n\nPega lá um cafézinho e vem comigo, sei que você não gosta de teoria, mas é importante saber umas coisinhas.\n\n

Qualidade de Software

\n\nAntes mesmo de começar a falar sobre Testes, precisamos voltar um pouco e falar sobre Qualidade de Software. A nossa preocupação por ter um sistema de qualidade, que nos fez pensar em métodos para garantir isso e daí nasceram os testes! =D\n\nEsse ano eu tive a oportunidade de palestrar na Imasters DeveloperWeek 2015 - RJ e falei sobre Qualidade de Software, você pode ver os [slides aqui](https://willianjusten.github.io/imasters-2015/#/). E como a palavra _qualidade_ é um termo vago e que possuem diferentes pontos de vista, eu resolvi mostrar algumas dessas visões.\n\n

Qualidade para o cliente

\n\nPara um cliente, ele quer que tudo esteja funcionando, que seja bonito e o principal, que ele não gaste muito com isso. O medidor de qualidade para o cliente é quando ele faz uma cara mais ou menos assim:\n\n![Foto de um cara sorrindo](https://willianjusten.github.io/imasters-2015/img/visao-cliente.gif)\n\n

Qualidade para o chefe

\n\nJá para o seu chefe/empresa, qualidade é quando você faz as coisas sem demorar muito ou ter que refazer. Quando ele consegue gerar lucros e o cliente está feliz. Uma imagem que demonstra muito bem o que importa (qualidade) para o seu chefe é:\n\n![Um homem deitado no dinheiro](https://willianjusten.github.io/imasters-2015/img/visao-chefe.gif)\n\n

Qualidade para o desenvolvedor

\n\nNós desenvolvedores, obviamente vamos ver qualidade aonde? Se você respondeu no código, ponto para você! Quanto mais fácil de ler e entender o código, mais qualidade ele tem para nós. Assim como você ter uma boa documentação. Segue abaixo uma imagem que descreve bastante nossas reações a códigos bons e ruins:\n\n![Uma imagem com duas portas e pessoas discutindo, uma tem várias reclamações pelo código ruim, a outra tem poucas, pois o código é bom.](https://willianjusten.github.io/imasters-2015/img/visao-programador.png)\n\nPensando num código legível, documentação e agilidade, que nasceu o TDD, trazido pelo Kent Beck, na época da ascenção do Método Ágil.\n\n

Test Driven Development (TDD)

\n\nTDD é o desenvolvimento de software orientado a testes, Test Driven Development em inglês. Porém mais do que simplesmente testar seu código, TDD é uma filosofia, uma cultura. E foi fortemente adotado e influenciado pelo movimento ágil.\n\nDe acordo com Kent Beck, um método ágil é comparável ao ato de dirigir um\ncarro: você deve observar a estrada e fazer correções contínuas para se manter no caminho. Neste contexto onde a agilidade é fundamental, o testador seria aquele que ajuda o motorista a chegar com segurança ao seu destino, impedindo que sejam feitas conversões incorretas durante o percurso, evitando que o motorista se perca e fazendo com que ele pare e peça instruções quando necessário.\n\nNeste ambiente, destaca-se o TDD, como sendo uma abordagem evolutiva na qual o desenvolvedor escreve o teste antes de escrever o código funcional necessário para satisfazer aquele teste.\n\n

Ciclo de desenvolvimento com TDD

\n\n![Flow de Desenvolvimento com TDD](https://willianjusten.github.io/imasters-2015/img/tdd_flow.gif)\n\nTodos que já viram pelo menos um pouco sobre TDD devem ter visto essa imagem. Ela é basicamente a estrutura do funcionamento da cultura do TDD. Possuindo 3 grandes passos:\n\n* `Red`: etapa inicial do TDD, onde você escreve um teste que falha, para alguma funcionalidade que você ainda vai escrever.\n* `Green`: já com o teste criado, é o momento que você precisa fazer o teste passar, lembrando sempre de ir para solução mais simples primeiro.\n* `Refactor`: etapa para eliminar códigos redundantes, remover acoplamentos e deixar o design de código mais legível.\n\n

Por que poucos fazem TDD?

\n\nExistem alguns pontos principais que os desenvolvedores falam, quando tentam justificar porque não fazem TDD:\n\n* `Perda de tempo`: os desenvolvedores acham que por ter de escrever além do código, os testes, vai fazer com que demorem mais para desenvolver. Para quê perder tempo aprendendo uma coisa que eu não vejo como útil/importante não é mesmo?\n* `Curva de aprendizado`: o estilo de programar muda, é uma nova cultura e para isso, você precisa se adaptar. E é nesse ponto que a maioria desiste, pois não conseguem ver o valor do esforço inicial.\n\n

O que ganho com TDD?

\n\nBom, ali acima eu dou algumas das justificativas que os desenvolvedores dão para não usar. Mas se eles continuassem, olhe as vantagens que eles teriam:\n\n### Reduz o tempo gasto em depuração e correção de bugs\n\nQuando iniciamos o processo de correção de um bug, a primeira coisa que geralmente fazemos é tentar reproduzir o erro, para em seguida depurar o fluxo onde ocorre o bug para enfim analisar o estado dos objetos em busca da raíz do problema. Quando você não possui testes, você precisa mais uma vez realizar os passos de um teste funcional para depurar. Se você escrever um teste unitário que “estimule” o sistema a passar pelo código defeituoso, você estará “reproduzindo” o erro sem necessidade de executar a aplicação como um todo.\n\n### Não é desenvolvido código desnecessário\n\nEssa pode parecer uma frase um pouco controversa, mas não é. Como o flow de desenvolvimento é \"Criar testes antes, fazer solução depois\", você acaba não criando código desnecessário, visto que você sempre faz o suficiente para os testes passarem.\n\n### Auxilia testes de regressão\n\nÉ comum, ao corrigir um bug, introduzir um novo bug. Em outras palavras, a correção de um bug pode ter como efeito colateral que uma parte do software que antes funcionava deixe de funcionar. Quando isto ocorre, dizemos que o software regrediu. Chamam-se “teste de regressão” os testes que visam verificar a integridade geral do sistema quando um bug é corrigido, ou até mesmo quando uma nova funcionalidade é implementada no sistema. O uso do TDD vai reduzir a introdução de efeito colaterais junto com alterações no código. É claro que apenas na parte do código que seja coberta pelo testes unitários. Além disso, quando um teste passa a falhar após sua alteração, você acabou de identificar o bug num momento muito próximo de sua introdução.\n\n### Melhora a qualidade do código\n\nO TDD encoraja que você pense antes de desenvolver a solução e que você sempre crie as soluções mais simples. Existe uma frase muito importante no TDD que é:\n\n> \"Se são necessárias muitas linhas de código criando objetos para uma simples\n> asserção, então há algo de errado.\"\n\nIsso faz com que você já saiba se está indo na direção certa para construção da solução ou se ela está fortemente acoplada e precisa ser modularizada/simplificada.\n\n### Documentação pelos testes\n\nOs testes nos ajudam a documentar o sistema se nomearmos ele bem. Como pensamos antes de codificar e fazemos testes pequenos para cada pedaço de funcionalidade, praticamente somos obrigados a escrever um teste legível. Se pararmos para ver todos os testes de uma funcionalidade temos ali praticamente uma documentação de caso de uso.\n\n### Refatoração constante\n\nComo o próprio ciclo do TDD já sugere, a última etapa é a refatoração. Então, para cada teste que escrevemos, olhamos novamente nosso código e se nos sentirmos incomodados devemos refatorá-lo. O grande diferencial de trabalharmos com testes automatizados é que temos a segurança de fazer alterações, pois nossos testes devem garantir que nosso código continuará funcionando. Outro aspecto interessante é que refatorando a cada “verde”, evitamos que nosso código fique ilegível e com repetições desnecessárias.\n\n

Tipos de testes

\n\nO TDD se baseia principalmente nos testes unitários, que de fato são a base para o desenvolvimento orientado por testes. Mas existem outros testes tão importantes quanto. Martin Fowler, que é basicamente um dos maiores apoiadores do TDD, disse o seguinte: a maioria do desenvolvimento sempre foi pensada na interface e, com isso, os testes mais criados também eram os de interface. Mas o problema é que esses testes são muito lentos e nós não queremos isso. Nós queremos respostas eficientes e rápidas, por isso, os testes unitários precisam ser o de maior de número e os mesmos precisam ser bem rápidos. Seguindo esse pensamento, ele desenvolveu a seguinte pirâmide:\n\n![Pirâmide de testes](/assets/img/pyramid.png)\n\nNessa pirâmide, podemos ver que os testes unitários formam a base, seguidos pelos testes de serviço, que podem ser entendidos como testes de integração e testes de sanidade. Por final, temos os testes de interface, também conhecidos como testes de aceitação. Esse tipo de lógica faz com que os testes sejam mais eficazes e rápidos.\n\nE eles seguem o seguinte fluxo, se os testes unitários passarem, realizamos a integração entre os componentes e vemos se os mesmos continuam funcionando. Tudo estando ok, fazemos os testes de aceitação, que já trabalham com a interface e também com usuários diretamente. Se algum teste quebra, todo o resto é abortado, evitando assim de rodarmos testes mais lentos sem necessidade.\n\nExistem outros vários tipos de testes, mas irei abordar os principais, que serão os utilizados no nosso dia-a-dia.\n\n

Teste Unitário (Unit Test)

\n\nO teste unitário tem por objetivo testar a menor parte testável do sistema (unidade), em geral, um método.\n\nIdealmente, o teste unitário é independente de outros testes, validando assim cada parte ou funcionalidade individualmente.\n\nPara seguir um padrão legal do seu teste unitário, ele deve ser capaz de responder as seguintes perguntas:\n\n* O que eu estou testando?\n* O que o método deveria fazer?\n* Qual o seu atual retorno?\n* O que eu espero que retorne?\n\nSe você conseguir olhar para o teste e responder tudo isso, seu teste é bastante válido e irá te ajudar bastante caso algo dê errado.\n\n

Teste de Sanidade (Smoke Test)

\n\nEsse é um teste pouco conhecido e pouco utilizado, mas que tem sua utilidade. Originado dos testes de hardware, ele serve para dizer somente se sua aplicação está respondendo corretamente ou não. Na nossa área de web, ele seria basicamente o teste de retorno das rotas e nada mais que isso.\n\n

Teste de Integração (Integration Test)

\n\nTeste de integração é a fase do teste de software em que módulos são combinados e testados em grupo. Ela vem depois dos testes unitários, em que os módulos são testados individualmente, e vem antes dos testes de aceitação, em que o sistema completo é testado num ambiente que simula o ambiente de produção.\n\nO teste de integração é alimentado pelos módulos previamente testados individualmente pelos testes unitários, agrupando-os assim em componentes, como estipulado no plano de teste, e resulta num sistema integrado e preparado para o teste de sistema.\n\n

Teste de Aceitação (Acceptance Test)

\n\nO teste de aceitação verifica se todo o projeto funciona de acordo com sua especificação, ele já é um teste final, que visa juntar todos os módulos e testá-los em conjunto já a uma interface gráfica. Esses testes visam aferir se algo na interface faça o sistema não funcionar ou que dificulte o acesso ao usuário, um exemplo seria se um input não estivesse aparecendo para que dados fossem inseridos.\n\n

Mocks

\n\nOs mocks são extremamente úteis quando precisamos isolar pontos de integração externos, como Web Services e bancos de dados, por exemplo. Vamos imaginar o seguinte ambiente:\n\nTemos 2 métodos:\n\n* `buscaInfoProduto`: método que vai ao banco de dados e retorna um objeto contendo o nome e preço do produto.\n* `blackFriday`: método que pega o valor do produto, multiplica ele por 2 e retorna o objeto desse produto.\n\nConcorda comigo que para testar o método `blackFriday`, eu só preciso saber que dado um objeto com preço X, ele vai multiplicar esse valor por 2?\n\nSendo assim, eu não preciso rodar o `buscaInfoProduto`, pois requisições ao banco são muito mais lentas. Para isso, eu crio um objeto esperado (mock) e analiso o que de fato é a **responsabilidade única** do método `blackFriday`.\n\n

Dicas para se fazer melhores testes

\n\nJá tendo uma ideia de como funciona o Ciclo do TDD, quais tipos de testes existem e como eles devem ser organizados e testados, é bom ter algumas dicas, para que a gente não saia testando coisas a mais ou coisas a menos.\n\n### Não coloque a carroça na frente dos bois\n\nSim, é isso mesmo que você leu. Não tente avançar o ciclo dos testes, só porque você já sabe como implementar do início ao fim. É importante que você se mantenha no ciclo (Red, Green, Refactor), isso vai fazer com que através da prática e disciplina, você se acostume e acabe ganhando agilidade e melhor visão do processo de desenvolvimento.\n\n### Trate código de teste como código de produção\n\nO código de teste precisa ser legível, separado em etapas bem definidas e possuir um bom report. Isso vai permitir termos nossa documentação, além de facilitar com que outros desenvolvedores entendam o sistema a partir dali. De nada adianta criar um conjunto de testes se eu não souber qual problema aconteceu se algum teste quebrar.\n\n### Evite acoplamento\n\nQuanto mais desacoplados seus testes, melhor. Isso evita a quebra em cascata, auxiliando na busca de erros. Isso também auxilia até mesmo o seu design de código, garantindo algo modularizado e de bem mais fácil manutenção.\n\n### Um teste de cada vez\n\nEsse é o padrão do TDD, mas não custa reafirmar, só escreva um próximo teste, se o primeiro passar. Isso garante que não ficarão coisas pela metade e nem o risco de acabar esquecendo algo no meio do caminho.\n\n### Não teste o desnecessário\n\nPor exemplo, se você estiver usando um framework, você não precisa testar se o método dele está funcionando, isso já foi amplamente testado no framework e o que você estará fazendo, nada mais é que repetindo testes.\n\n### Responsabilidade Única\n\nIsso serve para o seu código e para o seu teste também, se você precisa escrever muito para fazer um teste, significa que alguma coisa está errada. Sempre faça testes pequenos, em geral, um teste para um método ou mais testes para um mesmo método, nunca o contrário. Um teste jamais poderá testar mais de um método.\n\n

Ferramentas para testar

\n\nClaro que para rodar todos esses testes, é melhor automatizar tudo, assim, a cada teste que escrevemos, uma ferramenta roda tudo e nos reporta os erros que tivermos e os que passaram. Para auxiliar, seguem algumas ferramentas comuns, lembrando que existem centenas por aí, então vou me atentar a colocar algumas das mais comuns.\n\n

Javascript

\n\n* [Mocha](https://mochajs.org/) - bastante conhecido, altamente plugável e com várias features excelentes.\n* [Jasmine](http://jasmine.github.io/edge/introduction.html) - trabalha com BDD (behavior-driven development), ou seja, teste orientado a comportamento, bastante utilizado também.\n* [Ava](https://github.com/sindresorhus/ava) - como se entitula, um test runner futurista, desenvolvido pelo famoso Sindresorhus, promete ser bem mais veloz que todos os outros.\n* [Tape](https://github.com/substack/tape) - criado pelo Substack, outro com proposta de ser bem pequenino, mas com bastante plugins.\n* [Jest](https://facebook.github.io/jest/) - criado pelo Facebook para realizar testes no React, trabalha em cima de Mocks por default.\n* [QUnit](https://qunitjs.com/) - usada pela galera do JQuery e vários outros grandes projetos, tendo o [Leo Balter](https://twitter.com/leobalter) como um dos desenvolvedores.\n* [Karma](http://karma-runner.github.io/0.13/index.html) - diferente dos outros, o Karma não serve para escrever os testes e sim para rodá-los em cima de browsers, dos quais inclui até headless browser como o PhantomJS.\n* [CasperJS](http://casperjs.org/) - permite rodar testes de aceitação usando headless browser (PhantomJS e SlimerJS), numa sintaxe bastante simples.\n* [Nightwatch](http://nightwatchjs.org/) - talvez um dos melhores para se fazer testes End-to-End (E2E), onde você faz um teste completo de sua aplicação.\n* [Protractor](http://www.protractortest.org/#/) - outro para testes E2E, mais focado para o AngularJS.\n\n

Python

\n\n* [Unit testing framework](https://docs.python.org/2/library/unittest.html) - talvez a mais comum e conhecida do Python, até por já vir inclusa com a linguagem. Bastante poderosa e simples de se utilizar.\n* [Pytest](http://pytest.org/latest/) - outra bastante utilizada no universo python, possui várias integrações e ótima sintaxe.\n* [Splinter](https://splinter.readthedocs.io/en/latest/) - criada por uma galera da Globo para realizar testes E2E, vale uma olhada.\n* [Locust](https://locust.io/) - ferramenta para teste de carga.\n\n

Ruby

\n\n* [Test::Unit](http://test-unit.github.io/) - outra que vem por padrão na linguagem, sendo amplamente utilizada.\n* [RSpec](http://rspec.info/) - framework para testes BDD em Ruby, tem uma ótima documentação.\n* [Minitest](http://docs.seattlerb.org/minitest/) - é uma suite completa de testes, para TDD, BDD, mocks e benchmarking.\n\n

Conclusão

\n\nBom pessoal, sei que foi um post grande, talvez um pouco cansativo, mas é bastante importante que se entenda a teoria para partir para a prática, ao menos um pouquinho, para que a prática seja mais proveitosa. Nos próximos posts falarei sobre CI/CD e então a prática de tudo que falamos. Peço que comentem sobre o que acharam, o que esperam ler/ver sobre o assunto, enfim, qualquer feedback será bastante importante para o desenvolvimento dos outros posts.\n" }, { "path": "posts/erros-comuns-com-o-react-testing-library.md", "content": "---\r\nlayout: post\r\ndate: 2020-05-11 10:44:51\r\nimage: /assets/img/testing-library-mistakes.jpg\r\ntitle: Erros comuns com o React Testing Library\r\ndescription: Aprenda com os erros dos outros e melhore seu código também.\r\nintroduction: Aprenda com os erros dos outros e melhore seu código também.\r\ntwitter_text: Aprenda com os erros dos outros e melhore seu código também.\r\nmain-class: js\r\ncolor: \"#D6BA32\"\r\ntags:\r\n - react\r\n - testes\r\n - tdd\r\n---\r\n## Introdução\r\n\r\nFala pessoal, o post de hoje é na realidade uma tradução/adaptação [desse excelente post do Kent C. Dodds](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library), que é o criador da [React Testing Library](https://testing-library.com/).\r\n\r\nHá pouco tempo eu fiz um [vídeo/post](https://willianjusten.com.br/criando-um-react-custom-hook-com-testes/) ensinando a criar um custom hook do zero com testes e utilizei essa biblioteca, que para mim é a melhor para o ecossistema React atual.\r\n\r\nBom, vamos lá, enquanto escrevo esse post, vou ouvindo um cara chamado [Malaki](https://open.spotify.com/artist/6DWp3hFGq7c3nyQ3AT7RDF?si=BEE2nTzYTC6jOyNO7mCYhw), um irlandês natural de Dublin (cidade que tenho no coração) que canta um hip-hop misturado com um R&B e outras coisas mais, é um som bom, pode conferir.\r\n\r\n## Notas\r\n\r\nCada erro foi organizado pelo seguinte nível de importância:\r\n\r\n- `baixa`: é mais da opinião do Kent e você pode ignorar se quiser e não vai ter nenhum problema.\r\n- `média`: você pode começar a ver bugs, perder confiança nos testes ou fazendo trabalho que nem precisa.\r\n- `alta`: definitivamente veja isso. Muito provavelmente você está perdendo confiança dos testes e provavelmente terá testes problemáticos.\r\n\r\n### Usar `wrapper` como nome da variável no retorno da função `render`\r\n\r\n> Importância: baixa\r\n\r\n```javascript\r\n// ❌\r\nconst wrapper = render()\r\nwrapper.rerender()\r\n\r\n// ✅\r\nconst {rerender} = render()\r\nrerender()\r\n```\r\n\r\nO nome `wrapper` é uma coisa velha que vem do `enzyme` e não precisamos disso aqui. O valor do retorno de `render` não está \"encapsulando\" nada. É simplesmente um conjunto de utilitários (que graças a dica mais abaixo) na maioria das vezes você nem vai precisar mesmo.\r\n\r\n**Dica: use destructure do que você precisa do `render` ou então chame de `view`**\r\n\r\n### Usar `cleanup`\r\n\r\n> Importância: média\r\n\r\n```javascript\r\n// ❌\r\nimport {render, screen, fireEvent, cleanup} from '@testing-library/react'\r\n\r\nafterEach(cleanup)\r\n\r\n// ✅\r\nimport {render, screen, fireEvent} from '@testing-library/react'\r\n```\r\n\r\nJá tem um bom tempo que o `cleanup` acontece automaticamente (suportado pela maioria dos frameworks de teste) e você não precisa se preocupar com isso. Você pode ver [mais aqui](https://testing-library.com/docs/react-testing-library/api#cleanup).\r\n\r\n **Dica: não use `cleanup`**\r\n\r\n### Não estar usando `screen`\r\n\r\n> Importância: média\r\n\r\n```javascript\r\n// ❌\r\nconst {getByRole} = render()\r\nconst errorMessageNode = getByRole('alert')\r\n\r\n// ✅\r\nrender()\r\nconst errorMessageNode = screen.getByRole('alert')\r\n```\r\n\r\nO `screen` foi adicionado na [versão 6.11.0](https://github.com/testing-library/dom-testing-library/releases/tag/v6.11.0). Ele vem do mesmo import que você pega o `render`:\r\n\r\n```javascript\r\nimport {render, screen} from '@testing-library/react'\r\n```\r\n\r\nO benefício de usar o `screen` é que você não precisa ficar atualizando a chamada do destructuring do `render` para cada query que você precisar. Além disso, basta digitar `screen` e deixar a mágica do autocomplete fazer o resto para você.\r\n\r\nA única exceção para isso é se você estiver definindo um `container` ou `baseElement`, o que muito provavelmente você nem deveria estar fazendo.\r\n\r\nVocê também pode usar `screen.debug` ao invés de `debug`.\r\n\r\n**Dica: use `screen` para queries e debug**\r\n\r\n### Usar a asserção errada\r\n\r\n> Importância: alta\r\n\r\n```javascript\r\nconst button = screen.getByRole('button', {name: /disabled button/i})\r\n\r\n// ❌\r\nexpect(button.disabled).toBe(true)\r\n// error message:\r\n// expect(received).toBe(expected) // Object.is equality\r\n//\r\n// Expected: true\r\n// Received: false\r\n\r\n// ✅\r\nexpect(button).toBeDisabled()\r\n// error message:\r\n// Received element is not disabled:\r\n// \r\n\r\nscreen.getByText(/hello world/i)\r\n// ❌ falha com o seguinte erro:\r\n// Unable to find an element with the text: /hello world/i. This could be\r\n// because the text is broken up by multiple elements. In this case, you can\r\n// provide a function for your text matcher to make your matcher more flexible.\r\n\r\nscreen.getByRole('button', {name: /hello world/i})\r\n// ✅ funciona!\r\n```\r\n\r\nUma das razões para as pessoas não usarem o `*ByRole` é porque elas não estão familiares com os papéis implícitos nos elementos. [Aqui vai uma lista dos papéis na MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Outro dos meus recursos favoritos do `*ByRole` é que se você não for capaz de encontrar um elemento com o papel especificado. Além de mostrar no log todo o DOM, que é o normal que você recebe ao usar o `get*` ou `find*`, ele também vai mostrar todos os papéis que você pode buscar!\r\n\r\n```javascript\r\n// assumindo que temos essa estrutura de DOM para trabalhar\r\n// \r\nscreen.getByRole('blah')\r\n```\r\n\r\nIsso irá falhar com a seguinte mensagem de erro:\r\n\r\n```javascript\r\nTestingLibraryElementError: Unable to find an accessible element with the role \"blah\"\r\nHere are the accessible roles:\r\n document:\r\n Name \"\":\r\n \r\n --------------------------------------------------\r\n button:\r\n Name \"Hello World\":\r\n \r\n
\r\n\r\n```\r\n\r\nRepare que nem precisamos adicionar `role=button` ao nosso `button`, afinal ele já possui esse papel. É um papel implícito, o que nos leva ao próximo tópico...\r\n\r\n### Adicionar `aria-`, `role` e outros atributos incorretamente\r\n\r\n> Importância: alta\r\n\r\n```javascript\r\n// ❌\r\nrender()\r\n\r\n// ✅\r\nrender()\r\n```\r\n\r\nTacando atributos de acessibilidade de qualquer maneira não é somente desnecessário (como o caso acima), como também pode confundir os leitores de tela e os usuários. Os atributos de acessibilidade devem ser utilizados onde realmente precisam, nos casos onde a semântica do HTML não satisfaz o caso de uso (como quando você está criando um elemento não nativo e quer fazê-lo nativo, como um [autocomplete](https://github.com/downshift-js/downshift)).\r\n\r\nSe é isso que você está construindo, certifique-se de usar uma biblioteca existente que faça isso de forma acessível ou siga as práticas do WAI-ARIA. Eles geralmente têm [ótimos exemplos](https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html).\r\n\r\n**Dica: evite adicionar atributos desnecessários ou incorretos**\r\n\r\n### Não usar o `@testing-library/user-event`\r\n\r\n> Importância: média\r\n\r\n```javascript\r\n// ❌\r\nfireEvent.change(input, {target: {value: 'hello world'}})\r\n\r\n\r\n// ✅\r\nawait userEvent.type(input, 'hello world')\r\n```\r\n\r\nO [@testing-library/user-event](https://github.com/testing-library/user-event) é um pacote criado em cima do `fireEvent`, mas ele fornece vários métodos que se assemelham mais às interações do usuário. No exemplo acima, o `fireEvent.change` vai simplesmente disparar um evento de `change` no input. No entanto, o `type` da chamada vai ativar para os eventos de `keyDown`, `keyPress` e `keyUp`, o que é muito mais próximo da interação real de um usuário. Isso pode ser útil para trabalhar com bibiliotecas que talvez não possuam um `listener` para o evento de `change`.\r\n\r\nAinda estamos trabalhando no `@testing-library/user-event` para garantir que ele entrega o que promete: disparar todos os mesmos eventos que um usuário irá fazer em uma específica ação. Não acho que estamos lá ainda e por isso não está dentro da `@testing-library/dom` (mas é possível que estará no futuro). Entretanto, estou confiante o suficiente para recomendar que você dê uma olhada e utilize nos seus testes ao invés do `fireEvent`.\r\n\r\n**Dica: use o @testing-library/user-event no lugar do fireEvent sempre que possível.**\r\n\r\n### Usar `query*` variantes para tudo exceto checar a não-existência\r\n\r\n> Importância: alta\r\n\r\n```javascript\r\n// ❌\r\nexpect(screen.queryByRole('alert')).toBeInTheDocument()\r\n\r\n// ✅\r\nexpect(screen.getByRole('alert')).toBeInTheDocument()\r\nexpect(screen.queryByRole('alert')).not.toBeInTheDocument()\r\n```\r\n\r\nA única razão pela qual a variante da consulta `query*` é exposta é para você ter uma função que você pode chamar, que não gere um erro se nenhum elemento for encontrado para corresponder à consulta (ela retornará `null` se nenhum elemento for encontrado). A única razão pela qual isso é útil é verificar se um elemento não é renderizado na página.\r\n\r\n**Dica: só use `query*` variantes para fazer asserções de quando um elemento não deve ser encontrado.**\r\n\r\n### Usar o `waitFor` para buscar elementos que podem ser buscados com `find*`\r\n\r\n> Importância: alta\r\n\r\n```javascript\r\n// ❌\r\nconst submitButton = await waitFor(() =>\r\n screen.getByRole('button', {name: /submit/i}),\r\n)\r\n\r\n// ✅\r\nconst submitButton = await screen.findByRole('button', {name: /submit/i})\r\n```\r\n\r\nEssas duas pequenas partes de código são basicamente equivalentes (`find*` usa o `waitFor` embaixo dos panos), mas o segundo é mais simples e a mensagem de erro que você vai encontrar será melhor.\r\n\r\n**Dica: use `find*` sempre que você quiser buscar por algo que talvez não esteja disponível logo de início.**\r\n\r\n### Passar uma callback vazia para o `waitFor`\r\n\r\n> Importância: alta\r\n\r\n```javascript\r\n// ❌\r\nawait waitFor(() => {})\r\nexpect(window.fetch).toHaveBeenCalledWith('foo')\r\nexpect(window.fetch).toHaveBeenCalledTimes(1)\r\n\r\n// ✅\r\nawait waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))\r\nexpect(window.fetch).toHaveBeenCalledTimes(1)\r\n```\r\n\r\nO propósito do `waitFor` é permitir que você espera para que alguma coisa específica aconteça. Se você passar uma callback vazia, pode até funcionar, muitas vezes você só precisa de \"mais um tick no event loop\". Mas fazendo isso, você estará criando um teste frágil que pode facilmente falhar se você refatorar sua lógica assíncrona.\r\n\r\n**Dica: espere pela específica asserção dentro do `waitFor`**\r\n\r\n### Ter múltiplas asserções para uma mesma `waitFor` callback\r\n\r\n> Importância: baixa\r\n\r\n```javascript\r\n// ❌\r\nawait waitFor(() => {\r\n expect(window.fetch).toHaveBeenCalledWith('foo')\r\n expect(window.fetch).toHaveBeenCalledTimes(1)\r\n})\r\n\r\n// ✅\r\nawait waitFor(() => expect(window.fetch).toHaveBeenCalledWith('foo'))\r\nexpect(window.fetch).toHaveBeenCalledTimes(1)\r\n```\r\n\r\nDigamos que, no exemplo acima, `window.fetch` foi chamado duas vezes. Portanto, a chamada `waitFor` falhará, no entanto, teremos que aguardar o tempo limite antes de vermos a falha no teste. Ao colocar uma única asserção, podemos esperar que a interface do usuário se estabilize no estado em que queremos verificar e também falhar mais rápido se uma das asserções acabar falhando.\r\n\r\n**Dica: use uma asserção por callback**\r\n\r\n### Gerando efeitos colaterais com `waitFor`\r\n\r\n```javascript\r\n// ❌\r\nawait waitFor(() => {\r\n fireEvent.keyDown(input, {key: 'ArrowDown'})\r\n expect(screen.getAllByRole('listitem')).toHaveLength(3)\r\n})\r\n\r\n// ✅\r\nfireEvent.keyDown(input, {key: 'ArrowDown'})\r\nawait waitFor(() => {\r\n expect(screen.getAllByRole('listitem')).toHaveLength(3)\r\n})\r\n```\r\n\r\nO `waitFor` foi feito para coisas onde você não tem determinado o tempo entre uma ação que você fez e a asserção criada. Por esse motivo, o retorno de chamada pode ser chamado (ou verificado quanto a erros) um número não determinístico de vezes e frequência (é chamado tanto em um intervalo quanto em quando há mutações no DOM). Portanto, isso significa que seu efeito colateral pode ser executado várias vezes!\r\n\r\nIsso também significa que você não pode usar asserções de `snapshot` com o `waitFor`. Se você deseja usar um `snapshot`, primeiro aguarde uma asserção específica e, em seguida, você pode criar seu `snapshot`.\r\n\r\n**Dica: coloque os efeitos colaterais fora da callback do `waitFor` e reserve a callback somente para asserções.**\r\n\r\n### Não usar os plugins do ESlint para a Testing Library\r\n\r\n> Importância: média\r\n\r\nSe você quiser evitar todos esses erros comuns, então esse plugins oficiais irão ajudar muito:\r\n\r\n- [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library)\r\n- [eslint-plugin-jest-dom](https://github.com/testing-library/eslint-plugin-jest-dom)\r\n\r\n\r\n## Conclusão\r\n\r\nA grande razão para eu ter traduzido esse artigo, é porque ele é espetacular e quanto mais gente ver, melhor. Eu posso afirmar que aprendi muita coisa no post e inclusive cometia alguns dos erros!\r\n" }, { "path": "posts/esta-tudo-bem-nao-fazer-nada.md", "content": "---\nlayout: post\ndate: 2023-08-07T08:00:40.000Z\ntitle: Está tudo bem não fazer nada\ndescription: Vivemos numa corrida sem fim e isso é cansativo! Dê seu tempo!\nmain-class: misc\ntags:\n - vida\n - reflexão\n---\n\n## Introdução\n\nQuase não escrevo mais no blog e quando resolvo escrever, não é algo técnico, mas é isso, o blog é meu né, escrevo o que gosto e no momento gosto dessas reflexões. Vai ser um post super rapidinho, mais para te fazer esse lembrete que você não precisa estar a 220v o tempo todo.\n\nEsse post foi motivado após uma conversa com minha mãe, como estou em SP e ela em Petrópolis, a gente sempre manda mensagem de bom dia (não, ela não me manda Gifs de velho), e ela estava reclamando que já era praticamente meio-dia e ela não tinha feito nada. Mas assim, é um Domingo, por que essa pressão de ter que fazer algo?\n\nBom, vamos lá, enquanto eu escrevo vou ouvindo o novo album do [Post Malone](https://open.spotify.com/album/1F9LY06gadScF4g3g3BrDC?si=EQzh8ovARuqH4Oz0Ezmm5A), Postinho para os íntimos hahaha.\n\n## A cobrança da produtividade\n\nVocê já se pegou igual minha mãe falando?\n\n> Nossa, num fiz nada hoje.\n\nBom, isso acontece direto comigo, até mesmo nos dias que eu faço coisa para caramba! Mas isso acontece porque sempre queremos mais e mais, tem até um pouco a ver sobre não valorizarmos tanto nossas conquistas, igual [falo nesse post](https://willianjusten.com.br/valorize-suas-conquistas).\n\nDurante a pandemia, todos nós tivemos que ficar em casa e isso fez um caos na cabeça de muita gente, galera sempre querendo estar fazendo algo, seja vendo live, estudando, maratonando 122383 séries, trabalhando mais do que deveria, o importante era \"não ficar parado\".\n\nCom o término da pandemia muitas pessoas melhoraram, mas outros continuam nessa espiral de cobranças e bom, tem os outros que sempre se cobraram, mesmo antes da pandemia, me incluo nesse grupo.\n\n## Dolce far niente\n\nTem um filme bacaninha chamado \"Comer, rezar e amar\" que tem um trecho que acho super legal:\n\n\n\nEle fala sobre o \"Dolce far niente\" que significa \"a arte de não fazer nada\". O Spaguetti critica como o povo americano vive a vida, sempre buscando razões e coisas para fazer o tempo todo, sem necessariamente só simplesmente aproveitar o simples ato de \"fazer nada\".\n\nAcho que é nisso que também pecamos, as vezes é bom a gente simplesmente aproveitar o fato de não estar fazendo nada e sentir esse momento presente. As vezes ficar na cama mais tempo, só relaxando, tomar um café/chá enquanto se concentra exatamente no que está bebendo, sentir a brisa entrando pela janela, ouvir o barulho da rua. Afinal:\n\n> Está tudo bem não fazer nada\n\n## Conclusão\n\nConfesso que maioria dos meus posts eu escrevo para mim, mas espero que seja útil para você que estiver lendo, que é raro nos dias de hoje!\n\nE fica aqui o lembrete, não se cobre/puna se você tiver um diazinho mais lento, esse é só um sinal do seu corpo pedindo para você descansar e você merece!\n" }, { "path": "posts/estilizando-svg-com-css-parte-1.md", "content": "---\nlayout: post\ndate: 2015-03-07T17:58:45.000Z\ntitle: \"#7 - Estilizando SVG com CSS - Parte 1\"\ndescription: Aprenda as diferentes formas de mudar o estilo de um SVG somente com CSS.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\nUffa, tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG.\n\nEspero voltar a escrever com mais frequência, até porque tem muita coisa legal para aprendermos em SVG ainda!\n\nTambém pretendo escrever menos e colocar mais exemplos, para facilitar o entendimento de todos e lembre-se, qualquer dúvida é só falar nos comentários, terei o maior prazer em ajudar.\n\n## Introdução\n\nComo eu sempre escrevo escutando alguma coisa, vou sempre falar o que estou ouvindo nos meus posts, hoje é dia de [Faded Paper Figures](http://www.fadedpaperfigures.com/).\n\nNo [artigo passado](https://willianjusten.com.br/sistemas-de-icones-em-svg/) eu falei que uma das vantagens do SVG é poder estilizá-lo via CSS e hoje vamos falar um pouquinho sobre essa grande vantagem.\n\n## Propriedades de Estilo\n\nPara nós que trabalhamos com Web sabemos que existem milhares de propriedades CSS e cada vez tem [crescido mais](https://webdesignerdepot.com/2015/01/css-you-can-get-excited-about-in-2015/). No SVG não é diferente, ele além de compartilhar uma série de propriedades com o CSS, também tem suas propriedades únicas.\n\n![Propriedades em SVG e CSS](/assets/img/estilizando-svg/svg-properties.png)\n\nSe quiser saber melhor de todas as propriedades tem esse [artigo da W3C sobre SVG 1.1](http://www.w3.org/TR/SVG/styling.html) e temos também o [draft da W3C sobre SVG 2](http://www.w3.org/TR/SVG2/styling.html#SVGStylingProperties).\n\n## Métodos para estilizar\n\n### Estilo inline\n\n```html\n\n \n\n```\n\nNote que eu adiciono um `style` dentro elemento que eu desejo modificar, as vezes pode ser útil quando não tenho acesso a uma folha de estilo independente ou desejo fazer uma rápida modificação.\n\n### Estilo dentro do SVG\n\n```html\n\n \n \n\n```\n\nBastante útil quando se deseja componentizar um elemento SVG, visto que sua estrutura e todo o seu estilo pode ser facilmente movimentado entre sistemas diferentes.\n\n### Estilo fora do SVG\n\n```html\n\n\n ...\n \n\n \n \n \n\n```\n\nNão é um método muito utilizado, visto que caso aquele SVG não fique mais naquele arquivo depois de um tempo, os estilos tornam-se inúteis e a manutenção não é tão boa.\n\n### Estilos externos\n\n```html\n\n\n\n\n \n\n```\n\nQuando você quiser separar totalmente a estrutura do estilo, você pode criar um arquivo separado contendo os estilos. **Nota:** você pode ser \"purista\" e chamar o estilo pelo xml _para_ manter um padrão de SVG ou também pode chamar via ``\n\n## Peso das propriedades\n\n![Peso das propriedades](/assets/img/estilizando-svg/css-specificity.jpg)\n\nNa imagem acima os elementos na parte inferior sobreescrevem os elementos anteriores, ou seja, um estilo inline irá sobreescrever um estilo em um arquivo externo. Vamos a um exemplo para entedermos melhor:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nComo podemos notar no exemplo acima, a estrela ficou com a cor amarela, mesmo tendo outras cores atribuídas. Mas por que disso? A cor amarela está sendo atribuída como estilo inline: `style=\"fill:yellow\"`, que possui o maior peso, depois nós temos o estilo no documento: ``, depois a cor vermelha atribuída no arquivo css externo: `polygon {fill: red;}` e por último temos o estilo de apresentação na cor preta: `fill=\"black\"`. Continuou sem entender? Vai lá no [pen](http://codepen.io/willianjusten/pen/VYGzZK) e tenta ir apagando uma propriedade de cada vez para notar quem vai ser priorizado, vai ser bem mais didático do que eu falando aqui =)\n\nEntendendo bem sobre como funcionam os pesos e sabendo como estilizar, já vamos poder brincar com as propriedades, mas este será assunto para o próximo post, espero vocês até lá.\n" }, { "path": "posts/estilizando-svg-com-css-parte-2.md", "content": "---\nlayout: post\ndate: 2015-03-08T15:58:00.000Z\ntitle: \"#8 - Estilizando SVG com CSS - Parte 2\"\ndescription: Aprenda quais as propriedades que o SVG possui e como trabalhar com elas.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\nTenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG.\n\n## Introdução\n\nHoje resolvi que seria o dia de escutar clássicos e estou ouvindo [Pink Floyd](http://www.pinkfloyd.com/), para ser mais específico o [The Dark Side of The Moon - 2011 Remastered Version](http://open.spotify.com/album/3a0UOgDWw2pTajw85QPMiz), se quiser clica ali e segue junto =)\n\nNo [post anterior](https://willianjusten.com.br/estilizando-svg-com-css-parte-1/) eu expliquei um pouco sobre quais propriedades o SVG possui, quais ele compartilha com o CSS e quais as formas de estilizar. Hoje vou mostrar um pouco de algumas propriedades na prática.\n\n**Nota**: irei utilizar alguns conceitos já explicados e mostrados em outros posts, então caso você se perca em alguma parte do código, dá uma olhada nos [posts anteriores](https://willianjusten.com.br/series/)\n\n## Propriedade Fill\n\nComo o nome diz, ela quem irá preencher a cor da forma selecionada. Uma das propriedades mais utilizadas e vai servir para dar aquele toque especial na imagem. A grande vantagem é poder preencher cada pedaço desejado da imagem.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Propriedade Fill-opacity\n\nUma variável da propriedade `fill`, onde iremos só modificar a opacidade do preenchimento naquele elemento.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Propriedade Stroke e Stroke-width\n\nEssa propriedade irá alterar a cor do contorno (`stroke`) e sua espessura (`stroke-width`). Por padrão, os elementos vem sem nenhum contorno.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Propriedade Stroke-dasharray\n\nO atributo `stroke-dasharray` transforma os caminhos em traços ao invés de linhas sólidas.\n\nCom o atributo você pode especificar o tamanho do traço, assim como a distância entre eles, separados por vírgulas ou espaços.\n\nNo exemplo abaixo, temos o primeiro círculo com a propriedade `stroke-dasharray: 10`, então cada traço terá `10px` e uma distância de `10px` para o próximo traço. O segundo círculo tem a propriedade `stroke-dasharray: 10, 40`, ou seja, cada traço terá `10px` e a distância entre eles será de `40px`.\n\nPara mostrar que podemos brincar também com interatividade no SVG, adicionei um evento ao dar `hover` no segundo círculo, para que mude a propriedade `stroke-dasharray` do mesmo.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Propriedade Stroke-linecap\n\nO `stroke-linecap` define qual forma terá o final de um caminho aberto, seja ele uma `path`, `line` ou `polyline`. E aceita três valores possíveis: `butt`, `round` e `square`.\n\nDe acordo com o exemplo abaixo, podemos observar o seguinte:\n\n- `butt`: irá cortar a ponta exatamente na sua espessura, deixando a ponta quadrada.\n- `round`: irá deixar as pontas arredondas, acrescentando um \"padding\" nas pontas.\n- `square`: irá deixar a ponta quadrada, acrescentando um \"padding\" nas pontas.\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Propriedade Stroke-linejoin\n\nO `stroke-linejoin` define qual aparência os cantos dos contornos irão possuir nos caminhos e formas básicas.\n\n- `mitter`: terá o canto pontiagudo\n- `round`: terá o canto arrendondado\n- `bevel`: terá o canto chanfrado\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\n## Conclusão\n\nEssas são as propriedades mais comuns que o SVG possui, mas olhando para elas já podemos imaginar várias brincadeiras que podemos fazer não?\n\nNo início parece um pouco complicado e inútil, mas o SVG tem um grande poder. No primeiro exemplo do fill eu mostro um gráfico de barras feito em SVG, imagina fazer bibliotecas de gráficos em SVG como o [chartist](http://gionkunz.github.io/chartist-js/)?\n" }, { "path": "posts/exemplos-de-sites-com-parallax.md", "content": "---\nlayout: post\ndate: 2016-05-08T13:16:24.000Z\ntitle: Exemplos de sites com Parallax\ndescription: Se inspire com alguns sites feitos usando a técnica do parallax.\nmain-class: css\ntags:\n - css\n - frontend\n - parallax\ncategories: null\n---\n\n## Introdução\n\nFala pessoal! Hoje eu venho a trazer para vocês um post bem simples, mais para vocês se inspirarem um pouco e verem algumas das várias possibilidades de uma técnica que eu acho bastante interessante. Eu vou começar a criar posts que vão entrar na categoria de collections, onde vou juntar vários sites para vocês se inspirarem que utilizem certa técnica ou tecnologia.\n\nEnquanto vou escrevendo, vou ouvindo um bom som na playlist [Volume Máximo](https://open.spotify.com/playlist/37i9dQZF1DX4908CEYEdlz?si=GvxYazSLTA6iHzAv0oi77w) do Spotify.\n\n## O efeito parallax\n\nO efeito parallax veio dos videogames e desenhos clássicos e servia para compôr cenários dando a sensação de profundidade. Onde os elementos de fundo se movem em tempos diferentes dos elementos da frente. O nome da técnica é derivado da palavra grega \"parallaxis\" que significa \"alteração\".\n\nHoje essa técnica é bastante utilizada em diversos sites, seja para contar histórias ao mover o scroll, para seguir o mouse enquanto o usuário, ou até mesmo para deixar só um efeito sutil para o usuário enquanto ele desce a página.\n\nSegue aqui um vídeo do próprio Walt Disney explicando como funciona esse efeito tão interessante:\n\n\n\n## Exemplos\n\n### Alquimia WRG\n\n![Alquimia WRG](/assets/img/parallax-sites/alquimia.png)\n\nAnimação de background baseada no movimento do mouse. [Vá para o site](http://www.alquimiawrg.com/#/home)\n\n\n### Scroll for your Health\n\n![Scroll for your Health](/assets/img/parallax-sites/health.png)\n\nScrolls que desenham ilustrações de cores sólidas pela tela. [Vá para o site](http://tomerlerner.com/web/scroll/index.html)\n\n### Mélanie F - Slippers for children\n\n![Mélanie F - Slippers for children](/assets/img/parallax-sites/melanie.png)\n\nObjetos com movimentações em tempos/velocidades diferentes ao decorrer da tela. [Vá para o site](http://melanie-f.com/en/)\n\n### Giampiero Bodino - Italian High Jewellery\n\n![Giampiero Bodino - Italian High Jewellery](/assets/img/parallax-sites/giam.png)\n\nVárias ilustrações em camadas diferentes que são movimentadas baseadas no drag. [Vá para o site](http://www.giampierobodino.com/)\n\n### Anton & Irene\n\n![Anton & Irene](/assets/img/parallax-sites/anton.png)\n\nSite simples, com animações de hide/show/movimentação de acordo com o scroll. [Vá para o site](http://antonandirene.com/)\n\n### Werkstatt - l'atelier interactif\n\n![Werkstatt - l'atelier interactif](/assets/img/parallax-sites/latellier.png)\n\nInteração suave no scroll com uma máscara sendo formada entre as imagens dos projetos. Site belo, merece ser visto como um todo. [Vá para o site](http://www.werkstatt.fr/#/home)\n\n### Giacomorelli\n\n![Giacomorelli](/assets/img/parallax-sites/giaco.png)\n\nMais um site com parallax utilizando a ideia de movimentação via mouse. [Vá para o site](http://www.giacomorelli.com/)\n\n### Social King. Social Media Studio\n\n![Social King. Social Media Studio](/assets/img/parallax-sites/king.png)\n\nSite carregado de objetos em diferentes profundidades e movimentações. [Vá para o site](http://socialking.ru/eng)\n\n### You waste a lot of time at work\n\n![You waste a lot of time at work](/assets/img/parallax-sites/work.png)\n\nEsse site já merece um aplauso e uma lida só pelo conteúdo. Mas ele também utiliza parallax em backgrounds. [Vá para o site](https://www.atlassian.com/time-wasting-at-work-infographic)\n\n### Make your money matter\n\n![Make your money matter](/assets/img/parallax-sites/money.png)\n\nSite em ilustração contando uma história a partir do scroll. [Vá para o site](http://makeyourmoneymatter.org/)\n\n### Every last drop\n\n![Every last drop](/assets/img/parallax-sites/drop.png)\n\nSite em ilustração contando uma história a partir do scroll. [Vá para o site](http://everylastdrop.co.uk/)\n\n### The Arnold Clark Savings Challenge\n\n![The Arnold Clark Savings Challenge](/assets/img/parallax-sites/arnold.png)\n\nSite utilizando scroll para animar e montar um infográfico. [Vá para o site](http://www.arnoldclark.com/challenge/)\n\n### Rumchata.com\n\n![Rumchata.com](/assets/img/parallax-sites/rum.png)\n\nAnimações sutis nos elementos enquanto é feito o scroll. [Vá para o site](http://www.rumchata.com/)\n\n## Conclusão\n\nBom galera, espero que tenham se inspirado com esses vários sites maravilhosos. Eu sou viciado em ver referências e roubar pequenos detalhes para mim =p\nEntão espero que tenha bastante gente que goste desse tipo de coisa também.\n" }, { "path": "posts/falando-sobre-rscss.md", "content": "---\nlayout: post\ndate: 2016-02-07T20:48:16.000Z\ntitle: Falando sobre RSCSS\ndescription: Escrevendo CSS sem perder a sanidade. Aprenda uma metodologia que\n pode salvar muitas dores de cabeça.\nmain-class: css\ntags:\n - css\n - metodologia\n - frontend\ncategories: null\n---\n\n## Índice\n\n- [Introdução](#intro)\n- [O que vem a ser o RSCSS?](#oq-vem)\n- [Por que usar metodologias?](#por-que)\n- [Escrevendo CSS](#escrevendo)\n- [Tentando melhorar...](#tentando)\n- [E se existisse uma maneira de ter os dois limpos?](#e-se)\n- [Trabalhando com RSCSS](#trab-rscss)\n - [1. Tudo é um componente ](#comp)\n - [1.1 Nomeando Componentes](#comp-name)\n - [2. Elementos](#elementos)\n - [2.1 Nomeando elementos](#elementos-name)\n - [2.2 Elementos seletores](#elementos-seletores)\n - [2.3 Múltiplas palavras](#elementos-multiplas-palavras)\n - [2.4 Evite usar tags como seletores](#elementos-evite-tags)\n - [3. Variações](#variacoes)\n - [3.1 Nomeando variações](#variacoes-name)\n - [3.2 Variações nos elementos](#variacoes-elementos)\n - [3.3 Por que usar prefixos com traço?](#variacoes-tracos)\n - [4. Componentes aninhados (nested)](#componentes-nested)\n - [4.1 Variações](#nested-variacoes)\n - [4.2 Simplifique componentes internos](#nested-simplifique)\n - [5. Layouts](#layouts)\n - [5.1 Evite propriedades de posicionamento](#layouts-evite)\n - [5.2 Defina posicionamento nos pais](#layouts-posicionamento)\n - [6. Helpers](#helpers)\n - [7. Estrutura CSS](#estrutura-css)\n- [Exemplo](#exemplo)\n- [Conclusão](#conclusao)\n\n

Introdução

\n\nHey Hey pessoal! Para não perder o ritmo de carnaval, vamos a mais um post! Como alguns reclamaram que não teve playlist no post antigo, já vou deixando aqui a playlist que estou ouvindo agora [Trabalhando até Tarde](https://open.spotify.com/user/h36xa8q6jlmht02o8i7obn90y/playlist/1ko8oEe7Nhi8PzfWdypZbZ?si=L6g3IJv6Q0qltG4W4n3Vxg), e nossa, que playlist foda demais! Várias músicas mesclando um eletro, chill, house, etc.\n\nO post de hoje vai ser relacionado a uma metodologia CSS que eu não conhecia e passei a conhecer lá na HUGE. Confesso que a primeira, segunda, terceira e até a quarta vez que eu vi, achei bem ruinzinha. Mas há uns dias eu peguei para ler, fazer uns testes e até assistir uns vídeos e bom, fui convertido!\n\nResolvi fazer esse post por alguns motivos e eles foram:\n\n- Fixar um pouco da metodologia (sim! eu uso meu blog para estudar, você deveria também =p)\n- Não achei NADA em português!\n- Por que não fazer? xD\n\nO post será fortemente baseado na [ÓTIMA documentação do RSCSS](https://rscss.io/), se você não gostar da forma com que escrevo ou quiser simplesmente partir para o original, só clicar ali =)\n\nEu irei escrever os exemplos em **SCSS**, porém eles podem ser portados para qualquer pre-processador e até mesmo CSS puro tem maluco para tudo.\n\n

O que vem a ser o RSCSS?

\n\nQuanto maior o projeto vai ficando, mais elementos são criados e mais CSS é criado. Isso pode acarretar em linhas e mais linhas de CSS, que se não forem bem cuidadas, poderão causar várias confusões. Você já se pegou fazendo as seguintes perguntas:\n\n- O que essa classe significa?\n- Essa classe está sendo utilizada?\n- Se eu fizer uma classe X, será que ela vai dar conflito?\n\nO **RSCSS** é uma tentativa de fazer essas coisas terem sentido. Ele não é um framework, é simplesmente um conjunto de ideias para orientar o seu processo de construção de CSS sustentável para qualquer site ou aplicação.\n\n

Por que usar metodologias?

\n\nO CSS pode parecer complicado, principalmente quando você escreve de qualquer maneira. Mas ele não precisa ser assim. Se você cria um padrão de escrita, que pode ser passado a outros do time e que você mesmo entenda como funciona, todo o resto acaba se tornando bem simples.\n\nExistem várias metodologias de escrita, temos a metodologia [BEM](https://en.bem.info/method/) que é bastante famosa, temos também o [OSCSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/), [SuitCSS](https://suitcss.github.io/), dentre outras...\n\n

Escrevendo CSS

\n\nO CSS de hoje em dia nos permite componentizar tudo muito facilmente, ainda mais com os Pre-processadores nos ajudando bastante ali por trás. O problema é que da mesma forma que os pre-processadores nos ajudam, eles também podem nos atrapalhar bastante.\n\nAtire a primeira pedra quem nunca fez um grande uso de nesting como:\n\n```scss\n.nav {\n ul {\n li {\n a {\n ...\n }\n }\n }\n}\n```\n\nO problema de se fazer isso ali, é que quando temos um grande número de propriedades, a leitura já começa a ficar dificultada, como:\n\n```scss\n.nav {\n width: 100%;\n padding: 10px 25px;\n position: fixed;\n\n ul {\n max-width: 940px;\n li {\n display: inline-block;\n border: 1px solid #ccc;\n padding: 10px 50px;\n\n a {\n color: #333;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n }\n}\n```\n\nSem contar a dificuldade de leitura daquilo ali, ainda estamos gerando um código assim:\n\n```css\n.nav ul li a {\n ...;\n}\n```\n\nIsso é horrível, pois aumenta bastante a especificidade e se eu num futuro quiser mudar um pouco das propriedades, vou ter que criar algo para sobrescrever isso, o que vai acabar sujando ainda mais o meu código.\n\nOutro problema de se utilizar tags diretas como `ul`, `li`, `a`, é que podemos acabar sem querer modificando a aparência desse elemento em algum outro lugar que cumpra as mesmas regras.\n\nPensando no exemplo de um card, usando esse tipo de abordagem de nesting, acabaríamos criando algo mais ou menos assim:\n\n![Abordagem de nesting na criação de um card](/assets/img/rscss/nesting-card.png)\n\n

Tentando melhorar...

\n\nTentando evitar esse tipo de coisa, vieram metodologias em que são utilizadas classes para todos os elementos do css, que é o caso do BEM. Onde você escreve o CSS na forma **B**lock, **E**lement, **M**odifier. Para o mesmo exemplo do card, teríamos algo assim:\n\n![Abordagem utilizando BEM](/assets/img/rscss/bem-css.png)\n\nO problema dessa abordagem, é que apesar de no CSS evitar muitos problemas, ela suja e muito o HTML. Essa abordagem tem outro side-effect bem ruim, se vamos escrever classes gigantescas tanto do lado do css, quanto do lado do html, acabamos aumentando o tamanho final dos arquivos, que é algo que não queremos também.\n\n![Dirty HTML usando BEM](/assets/img/rscss/dirty-html.png)\n\nOlhando a abordagem inicial de css nativo (nesting) e essa abordagem do BEM, podemos ter um gráfico assim:\n\n![Gráfico mostrando como funciona com BEM e CSS puro](/assets/img/rscss/css-cleanliness-chart.png)\n\nSe temos o markup limpo, colocando só classes base e usando nesting, acabamos tendo um css sujo e difícil de ler. Porém se escrevemos um CSS mais organizado, tendo classes para cada elemento, acabamos tendo um html sujo.\n\n

E se existisse uma maneira de ter os dois limpos?

\n\nDessa forma nasceu o [RSCSS](https://rscss.io/)! A ideia principal dele é criar um componente pai, que irá governar os elementos internos a partir do `child selector >`, também chamado de seletor filho ou descendente. Se você não conhece esse seletor, aconselho ler esse post [seletores css importantes para aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/), que eu fiz no ano passado.\n\nO mesmo exemplo do card usando essa metodologia ficaria:\n\n![Abordagem do RSCSS](/assets/img/rscss/rscss.png)\n\n

Trabalhando com RSCSS

\n\n

1. Tudo é um componente

\n\nA primeira coisa que você deve fazer é pensar em tudo como se fossem componentes. Considere cada pedaço de sua interface como um componente individual. Segue exemplo de um form dentro de uma navbar:\n\n![Search Form dentro de uma navbar](/assets/img/rscss/component-example.png)\n\n

1.1 Nomeando Componentes

\n\nOs componentes deverão ter **pelo menos duas palavras**, separadas por um traço. Exemplos:\n\n- Um botão de like (.like-button)\n- Um form de busca (.search-form)\n- Um card de artigo (.article-card)\n\n

2. Elementos

\n\nElementos são coisas dentro do seu componente:\n\n![Elementos dentro do search-form](/assets/img/rscss/component-elements.png)\n\n

2.1 Nomeando elementos

\n\nCada componente deve ter elementos. E eles devem ter classes com **somente uma palavra**.\n\n```scss\n.search-form {\n > .field {...}\n > .action {...}\n}\n```\n\n

2.2 Elementos seletores

\n\nPrefira usar o seletor filho `>` sempre que possível. Isso previne que a propriedade passe para componentes internos indesejados, e também performa melhor que seletores descendentes.\n\n```scss\n.article-card {\n .title {\n /* bom */\n }\n > .author {\n /* melhor ainda */\n }\n}\n```\n\n

2.3 Múltiplas palavras

\n\nPara aqueles elementos que precisam de uma ou mais palavras, concatene elas sem traços ou underscore.\n\n```scss\n.profile-box {\n > .firstname {\n /* ... */\n }\n > .lastname {\n /* ... */\n }\n > .avatar {\n /* ... */\n }\n}\n```\n\n

2.4 Evite usar tags como seletores

\n\nUse classe sempre que possível. Tags são ok, mas podem vir com uma pequena perda de performance por não serem muito específicas e também podem não ser tão descritivas.\n\n```scss\n.article-card {\n > h3 {\n /* ✗ evite */\n }\n > .name {\n /* ✓ melhor */\n }\n}\n```\n\n

3. Variações

\n\nComponentes podem ter variações, assim como os elementos também.\n\n![Exemplo de variações](/assets/img/rscss/component-modifiers.png)\n\n

3.1 Nomeando variações

\n\nAs classes de variações devem ser prefixadas por um traço. É legal pensar nisso como forma de comandos no terminal, onde a gente tem o comando principal e podemos passar opções sempre como `-algumaCoisa`.\n\n```scss\n.like-button {\n &.-wide {\n /* ... */\n }\n &.-short {\n /* ... */\n }\n &.-disabled {\n /* ... */\n }\n}\n```\n\n

3.2 Variações nos elementos

\n\nAssim como os componentes, podemos querer variar os elementos. Preste atenção, essa variação é específica daquele elemento (classe), portanto, não há problemas em colocá-lo adjacente, como mostrado abaixo.\n\n```scss\n.shopping-card {\n > .title {\n /* ... */\n }\n > .title.-small {\n /* ... */\n }\n}\n```\n\n

3.3 Por que usar prefixos com traço?

\n\nAlguns dos motivos de se usar são:\n\n- Previne ambiguidade com elementos, já que ambos são escritos com um só nome.\n- O traço é mais rápido de digitar, só uma tecla. Além de ser mais fácil de selecionar palavras pelo teclado.\n- Lembra a forma de se passar comandos no terminal UNIX.\n\n

4. Componentes aninhados (nested)

\n\n![Componentes aninhados](/assets/img/rscss/component-nesting.png)\n\n```html\n
\n
...
\n

...

\n

...

\n
\n```\n\nAlgumas vezes precisamos ter componentes dentro de componentes. Aqui vão algumas dicas de como se fazer:\n\n

4.1 Variações

\n\nEvite modificar o componente interno através do commponente principal.\n\n```scss\n.article-header {\n > .vote-box > .up {\n /* ✗ evite isso */\n }\n}\n```\n\nAo invés disso, prefira adicionar uma variação ao componente interno e aplicar a partir dele.\n\n```html\n
\n
...
\n ...\n
\n```\n\n```scss\n.vote-box {\n &.-highlight > .up {\n /* ... */\n }\n}\n```\n\n

4.2 Simplifique componentes internos

\n\nAs vezes, quando usando componentes aninhados, seu markup pode ficar um pouco sujo:\n\n```html\n
\n \n \n
\n```\n\nVocê pode simplificar isso, utilizando a propriedade de `@extend` de seu pre-processador:\n\n```html\n
\n \n \n
\n```\n\n```scss\n.search-form {\n > .submit {\n @extend .search-button;\n @extend .search-button.-red;\n @extend .search-button.-large;\n }\n}\n```\n\nAssim, seu elemento `.submit` irá receber todas as propriedades que precisa, de uma forma que não fique com um markup sujo.\n\n

5. Layouts

\n\n![Exemplo de cards em layouts](/assets/img/rscss/layouts.png)\n\n

5.1 Evite propriedades de posicionamento

\n\nComponentes devem ser criados de uma forma que possam ser reutilizados em diferentes contextos. Evite colocar essas propriedades nos componentes:\n\n- Posicionamento (position, top, left, right, bottom)\n- Floats (float, clear)\n- Margens (margin)\n- Dimensões fixas (width, height) \\* com exceção de elementos que precisam ter tamanhos fixos mesmo.\n\n

5.2 Defina posicionamento nos pais

\n\nSe você realmente precisa definir algum tipo de posicionamento no componente, faça isso no componente pai que irá contê-lo. No exemplo abaixo, note que a largura e float são aplicadas no contexto do componente `list`, não no componente em si.\n\n```scss\n.article-list {\n & {\n @include clearfix;\n }\n\n > .article-card {\n width: 33.3%;\n float: left;\n }\n}\n\n.article-card {\n & {\n /* ... */\n }\n > .image {\n /* ... */\n }\n > .title {\n /* ... */\n }\n > .category {\n /* ... */\n }\n}\n```\n\n

6. Helpers

\n\nEssas classes tem como uso principal, sobrescrever valores, coloque-as em arquivos separados e as nomeie com underscore. Essas classes, em geral, são marcadas com `!important`. Portanto, use com muita cautela e as evite o máximo possível.\n\n```scss\n._unmargin {\n margin: 0 !important;\n}\n._center {\n text-align: center !important;\n}\n._pull-left {\n float: left !important;\n}\n._pull-right {\n float: right !important;\n}\n```\n\n

7. Estrutura CSS

\n\nO RSCSS não tem uma premissa forte para estrutura não, tendo somente como único conselho, colocar um componente por arquivo.\n\n```scss\n/* css/components/search-form.scss */\n.search-form {\n > .button {\n /* ... */\n }\n > .field {\n /* ... */\n }\n > .label {\n /* ... */\n }\n\n // variants\n &.-small {\n /* ... */\n }\n &.-wide {\n /* ... */\n }\n}\n```\n\nE, então chamar esses componentes usando o glob matching:\n\n```scss\n@import 'components/*';\n```\n\n

Exemplo

\n\nPara quem gosta de aprender com exemplo, segue abaixo o exemplo de um card implementado seguindo a metodologia do RSCSS:\n\n

\n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

\n\n\nRepare que o nesting de só até dois elementos foi respeitado, que o componente principal tem duas palavras (`photo-card`) e que os elementos possuem somente um nome.\n\n

Conclusão

\n\nBom galera, sei que o post ficou grandinho, eu mesmo não esperava fazer tão grande, acabou que eu basicamente traduzi toda a documentação e falei um pouquinho mais até. Entenda que assim como toda metodologia, ela pode funcionar ou não para você, a ideia aqui é passar mais uma opção para que você escolha a que melhor se adaptar. Eu não gostei muito quando vi, hoje já estou achando bastante simples e eficiente.\nOutro ponto importante é, se você trabalha com uma equipe, não saia mudando tudo sem avisar, comunique a todos, mostre os pontos e, caso tenha um consenso, sigam todos o mesmo padrão.\n" }, { "path": "posts/fazendo-o-browser-falar-por-voce-web-speech-api.md", "content": "---\nlayout: post\ndate: 2021-02-21T08:18:25.000Z\ntitle: Fazendo o browser falar por você - Web Speech API\ndescription: Nesse post eu vou mostrar como utilizei a Web Speech API para meu\n projeto Japanese Words.\nmain-class: js\ntags:\n - Dica\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Apresentando o Japanese Words\n\nAtualmente eu estou estudando japonês e pensando nisso, eu resolvi fazer um projetinho para me ajudar no vocabulário e pronúncia. Tem um site chamado [mainichi](https://mainichi.me/) que tem uma extensão com várias palavras, então parti dali. Como pode notar, meu card é uma cópia descarada deles xD\n\nMas para o projeto ficar mais interessante e diferente, resolvi aplicar a Web Speech API para fazer o browser falar as palavras.\n\n## Web Speech API\n\nVocê pode ver o projeto inteiro no [repositório oficial](https://github.com/willianjusten/japanese-words), mas vou me ater somente as partes que utilizei da Web Speech, que é bastante simples.\n\nOs passos são:\n\n- Primeiro pegamos as vozes disponíveis no device/browser usando o método [SpeechSynthesis.getVoices()](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices)\n\n```javascript\nconst voices = window.speechSynthesis?.getVoices()\n```\n\n- Depois nós filtramos essa lista para encontrar a voz que tenha a pronúncia da língua desejada, no nosso caso, o japonês.\n\n```javascript\nconst jpVoice = voices?.find((voice) => /ja-JP/.test(voice.lang))\n```\n\n- Com as vozes, nós definimos o [Utterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance), que seriam as configurações da leitura.\n\n```javascript\nconst utterance = new SpeechSynthesisUtterance()\r\n\r\n\nutterance.text = word // word é a palavra que desejamos pronunciar\r\nutterance.lang = 'ja-JP' // língua a pronunciar\r\nutterance.voice = voice // voz defina acima\r\nutterance.rate = 0.8 // velocidade de fala\n```\n\n- Já com a voz determinada e as configurações de voz, agora é só usar o método para falar, que é o [speechSynthesis.speak](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/speak)\n\n```javascript\nwindow.speechSynthesis.speak(utterance)\n```\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/feito-e-melhor-que-perfeito.md", "content": "---\nlayout: post\ndate: 2023-07-11T15:27:13.000Z\ntitle: Feito é melhor que perfeito\ndescription: Já se sentiu tão travado que não conseguiu entregar algo? Talvez\n esse post seja útil.\nmain-class: misc\ntags:\n - dev\n - lifestyle\n---\n## Introdução\n\nNossa, como é bom voltar a escrever depois de tanto tempo! Eu havia escrito bem no início do ano sobre [valorizar suas conquistas](https://willianjusten.com.br/valorize-suas-conquistas), mas até então, nada novo por mais um longo período. Confesso que ainda estou com dificuldades para ter energia para criar conteúdo, tem momentos que me empolgo, mas logo me canso, mas vamos ver se agora vou voltando aos pouquinhos.\n\nContinuando a tradição, eu vou escrevendo enquanto ouço a trilha sonora do último [Spider-man](https://open.spotify.com/album/0rqRGFgE4o8kf6VM18jakx?si=1YXwXIMFQSWYmrVsIWFtAA), o filme além de ser maravilhoso, ainda possui uma trilha sonora de respeito.\n\n## Paralisia da perfeição\n\nSe você leu o título, com certeza já ouviu a frase:\n\n> Feito é melhor que perfeito.\n\nMas o porquê dessa frase e como isso assombra tanto os programadores, principalmente os iniciantes?\n\nAntes de começarmos um projeto, queremos fazer do melhor jeito, nas melhores técnicas de programação, na mais alta perfeição e acabamos esquecendo do mais importante, que é **lançar o projeto**. Você pode escrever milhares e milhares de linhas, mas se você não lançar, ninguém nunca vai saber sobre sua criação.\n\nO grande problema é que **nada é perfeito**, consequentemente o seu projeto também não será. Só que a paralisia da perfeição imobiliza, gera pânico e induz à certeza de que, não sendo capazes do perfeito, não somos então capazes. Consegue ver o problemão nisso? Além de você não lançar nunca, acaba desanimando e se sentindo incapaz, quando na realidade, você só definiu uma meta que era impossível desde o início.\n\nNão estou dizendo para você lançar as coisas de qualquer jeito porque o *\"Willian Justen falou que podia.\",* estou dizendo para você definir melhor suas metas e expectativas, tendo elas mais pautadas na realidade e não se desmotivar nos primeiros erros/problemas.\n\n## Vantagens e perigos de querer o perfeito\n\nNem só de coisas ruins tem nessa busca, querer o perfeito tem suas vantagens também. Te obriga a fazer o seu melhor, consequentemente você evolui bastante e acaba tendo resultados incríveis. Eu, como uma pessoa que se considera perfeccionista, não estaria na posição que estou hoje se eu não tivesse essa \"exigência além dos limites\". Ao mesmo tempo, posso dizer que esse comportamento me trouxe vários problemas/traumas que só bastante terapia para ajudar. \n\n### Equilíbrio é tudo\n\nTendo isso em mente, o mais importante é o equilíbrio, saber quando é importante \"dar aquele tapa no código\" ou quando é melhor lançar e ir iterando e melhorando com o tempo e feedback. Tem também algumas coisas muito importantes para toda pessoa que produz algo, seja conteúdo, código, design.\n\n### O ego é o mau de tudo\n\nTem um livro muito legal que está na minha cabeceira há alguns anos chamado [Psycho-Cybernetics](https://www.amazon.com.br/Psycho-Cybernetics-Updated-Expanded-Maxwell-Maltz/dp/0399176136), que fala de váaaarias coisas, mas uma delas que mais \"clareou\" minha mente foi exatamente sobre como o ego é o maior inimigo que possuímos.\n\nJá parou para pensar que você se preocupa demais em deixar sua criação (código, post, vídeo, etc) se preocupando no que os **outros vão achar**? Isso é o ego falando mais alto. Ah, mas você pode falar:\n\n> Ah não Will, nada a ver, nem me preocupo com os outros.\n\nTem certeza? Quando você posta algo que criou, fica olhando se teve comentários, likes e atualizando o twitter o tempo todo? Se sim, sinto em lhe dizer, você liga para os outros sim. O mesmo vale para quando você faz um código que você considera \"lindo\" mas recebe mil comentários no code review e fica \"puto\" com fulano.\n\nComo resolver isso? Tentando se preocupar menos com a opinião dos outros e/ou fazendo estratégias para que essas opiniões se transformem em aprendizado.\n\n## Aprenda em público\n\nEsse é um conceito que já tem um tempinho, mas lembro que começou a ser mais difundido e falado depois desse [excelente post](https://www.swyx.io/learn-in-public). E eu não poderia concordar mais com isso!\n\nPara quem não sabe, a existência desse blog é mais um exemplo de aprender em público. Eu estava começando na área de programação e resolvi criar um blog para falar sobre as coisas que eu andava estudando, a partir do meu blog eu consegui oportunidades, conheci muita gente legal e aprendi ainda mais.\n\nQuando você aprende em público, você aprende duas vezes. A primeira quando você realmente está conhecendo sobre o assunto e a segunda vez quando você está explicando para o outro, essa segunda vez eu diria que é até mais efetiva, pois ensinar algo nada mais é que solidificar seu conhecimento e sintetizar de uma forma que outra pessoa também possa entender o que você entendeu.\n\nE como fazer isso? Você pode escrever num blog, gravar um vídeo, fazer live, comentar em posts/vídeos de outras pessoas perguntando e/ou adicionando coisas.\n\n## Lance rápido, falhe rápido e aprenda\n\nPor mais que uma ideia seja super legal e genial para você, pode ser que ela não seja tão legal assim para os outros, melhor saber disso logo de início do que depois de 2 anos trabalhando. \n\nPortanto, pense no \"mínimo\" que você considera para o projeto e lance assim mesmo, o famoso MVP (Minimun Viable Product - Produto Mínimo Viável). Nesse momento é que você vai conseguir obter mais feedback e lembre-se: **se dispa do seu ego e aprenda com os outros**. \n\nUm exemplo atual ~~não tão bom assim~~, o lançamento do Threads pela Meta. Os caras lançaram o projeto sem busca, sem hashtag, sem feed direito, sem uma porrada de coisas, mas botaram o mínimo já para dar um start e falar \"hey, agora estamos nesse mercado também\". Claro que não podemos nos comparar a uma empresa bilionária já com uma base de usuários gigante, mas é só um exemplo de como até os grandes começam de algo \"porcaria\" e é isso. Se você demorar muito para lançar sua ideia, outra pessoa pode lançar primeiro.\n\n## Conclusão\n\nEspero que esse post tenha lhe trazido algumas ideias/reflexões, eu resolvi escrever depois de ter lançado meu [portfólio de fotografia](https://photos.willianjusten.com.br/) e que lancei [opensource](https://github.com/willianjusten/photos-portfolio), se você olhar o projeto, vai ver que tem um monte de coisas bagunçada e que poderia ser melhorada, mas eu já procrastinei tanto para simplesmente começar, que eu defini a regra de \"lanço e depois vou melhorando\" e bom, pensando dessa maneira, finalmente saiu.\n\nTambém tenho começado a estudar Game Development e no início estava muito travado pensando \"quais as melhores práticas de código?\", \"será que assim é ruim?\", \"o que será que vão falar do meu código?\". E decidi que vou simplesmente começar do básico, copiar joguinhos simples e ir aprendendo, bom ou não, o importante é eu ir pegando os conceitos, depois vou procurar gente boa na área e pegar dicas para melhorar.\n\nSe você faz os mesmos questionamentos que eu quando está estudando programação, dou a mesma dica, evita se preocupar demais, só segue o fluxo e vai aprendendo." }, { "path": "posts/filtros-css.md", "content": "---\nlayout: post\ndate: 2015-07-26T20:30:23.000Z\ntitle: Filtros CSS\ndescription: Transforme o seu browser no seu próprio photoshop e aplique filtros\n somente com css.\nmain-class: css\ntags:\n - css\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nAntes de mais nada, quero agradecer a todos que acessam meu blog, hoje eu alcancei a marca de **+200 mil acessos** em pouco mais de 6 meses que escrevo, isso pode não parecer nada, mas para mim é muito importante. Fico feliz de saber que tanta gente lê meu blog e que de vez em quando eu ajudo alguém =)\n\nJá que eu subi a serra ontem, hoje estou descendo e nada melhor que aproveitar esse tempo para escrever um post. Está fazendo um friozinho bacana e está super nublado aqui, para acompanhar esse tempo, continuo na vibe de jazz, ouvindo uma playlist chamada [Pure Mellow Jazz](https://open.spotify.com/playlist/37i9dQZF1DWSBRKlyNxSuy?si=bEQu8_38Twq39uoRtABu_Q), muito boa.\n\nO post não pode ser muito extenso, até porque só tenho cerca de 1:30 de viagem, para isso resolvi falar sobre uma paradinha bem bacana que são os filtros CSS.\n\n## Filtros\n\nCada vez eu me apaixono mais pelo CSS e o poder de se fazer várias coisas só com código. E uma das coisas que eu acho mais legais no css são os filtros, isso me evita um bom trabalho de ter que ficar editando imagens no photoshop, por mais que eu goste dele, não quero ficar abrindo sempre.\n\n## Compatibilidade\n\nOs filtros em CSS já são compatíveis com a maioria dos browsers e você pode ver no [can i use](http://caniuse.com/#feat=css-filters) sobre isso. Porém seu uso deve ser feito com o prefixo `-webkit` para Chrome, Safari, Android e Opera. Somente o Firefox aceita sem o uso de prefixos. E o IEca...bom, ele não aceita nada, mas eu também não aceito ele, então tudo bem =p\n\n## Como utilizar os filtros?\n\nPara usar é bastante fácil, basta escolher a imagem que deseja aplicar o filtro e definir a propriedade de filtro que deseja aplicar, segue um exemplo:\n\n```css\n.minha-imagem {\n -webkit-filter: grayscale(100%); // suporte Chrome, Safari, Android, Opera\n filter: grayscale(100%); // suporte para Firefox\n}\n```\n\nMais de um filtro pode ser aplicado numa mesma imagem também, ficando assim:\n\n```css\n.minha-imagem {\n -webkit-filter: grayscale(100%) blur(5px); \n filter: grayscale(100%) blur(5px); \n}\n```\n\n## Diferentes tipos de filtros\n\nNo momento já existe um número bem legal de filtros e com expectativa de criação de mais alguns, vamos ver a aplicação de cada um deles:\n\n---\n\n### Grayscale\n\nServe para aplicar um filtro preto e branco nas imagens e pode ir de `0` a `1` ou de `0%` a `100%`.\n\n```css\n.imagem-1 {\n -webkit-filter: grayscale(100%); \n filter: grayscale(100%); \n}\n\n.imagem-2 {\n -webkit-filter: grayscale(.7); \n filter: grayscale(.7); \n}\n```\n\n\n\n\"Imagem\n\"Imagem\n\n---\n\n### Sepia\n\nPara dar aquele aspecto de foto envelhecida, o funcionamento é o mesmo do `grayscale`.\n\n```css\n.imagem-1 {\n -webkit-filter: sepia(100%); \n filter: sepia(100%); \n}\n\n.imagem-2 {\n -webkit-filter: sepia(.7); \n filter: sepia(.7); \n}\n```\n\n\n\n\"Imagem\n\"Imagem\n\n---\n\n### Blur\n\nEu adoro esse efeito! Ele funciona similar ao filtro de gausiano do Photoshop e serve para deixar a foto desfocada. Ele funciona recebendo valores em `px` como parâmetro. Quanto maior o valor, mais desfocado fica.\n\n```css\n.imagem-1 {\n -webkit-filter: blur(3px); \n filter: blur(3px); \n}\n\n.imagem-2 {\n -webkit-filter: blur(30px); \n filter: blur(30px); \n}\n```\n\n\n\n\"Imagem\n\"Imagem\n\n---\n\n### Saturate\n\nA saturação define a intensidade de uma cor numa imagem. Quanto maior o valor de `saturate`, mais intensa será a cor da imagem. Ele recebe valores em porcentagem.\n\n```css\n.imagem-1 {\n -webkit-filter: saturate(50%); \n filter: saturate(50%); \n}\n\n.imagem-2 {\n -webkit-filter: saturate(500%); \n filter: saturate(500%); \n}\n```\n\n\n\n\"Imagem\n\"Imagem\n\n\n---\n\n### Contrast\n\nBem parecido com o `saturate`, ele também recebe valores em `%` e quanto maior o seu valor, mais intensas são as cores.\n\n```css\n.imagem-1 {\n -webkit-filter: contrast(50%); \n filter: contrast(50%); \n}\n\n.imagem-2 {\n -webkit-filter: contrast(500%); \n filter: contrast(500%); \n}\n```\n\n\n\n\"Imagem\n\"Imagem\n\n---\n\n### Brightness\n\nEssa propriedade como o nome já diz, aumenta ou diminui o brilho da imagem e recebe valores em `%`.\n\n```css\n.imagem-1 {\n -webkit-filter: brightness(50%); \n filter: brightness(50%); \n}\n\n.imagem-2 {\n -webkit-filter: brightness(500%); \n filter: brightness(500%); \n}\n```\n\n\n\n\"Imagem\n\"Imagem\n\n---\n\n### Hue-rotation\n\nComo sabemos, a distrubuição das cores pode ser feita numa escala dentro de um círculo, o que essa propriedade faz é \"rodar\" essa paleta e com isso obter cores diferentes. Essa propriedade, portanto, aceita valores em `deg`, podendo ir de `0deg` até `360deg`.\n\n```css\n.imagem-1 {\n -webkit-filter: hue-rotate(45deg); \n filter: hue-rotate(45deg); \n}\n\n.imagem-2 {\n -webkit-filter: hue-rotate(120deg); \n filter: hue-rotate(120deg); \n}\n```\n\n\n\n\"Imagem\n\"Imagem\n\n---\n\n### Invert \n\nAquele filtro engraçado que quem for das antigas vai lembrar imediatamente daqueles negativos que a gente levava para revelar as fotos. Essa propriedade inverte as cores, pegando sempre o inverso da cor real. Aceita valore de `0%` até `100%`.\n\n```css\n.imagem-1 {\n -webkit-filter: invert(100%); \n filter: invert(100%); \n}\n```\n\n\n\n\"Imagem\n\n---\n\n### Opacity\n\nServe para aplicar uma transparência na imagem, indo dos valores de `0` até `1`ou de `0%` até `100%`. Essa propriedade é similar a `opacity` do css, a diferença é que em alguns browsers, eles usam aceleração via hardware, o que deixa a performance melhor.\n\n```css\n.imagem-1 {\n -webkit-filter: opacity(50%); \n filter: opacity(50%); \n}\n```\n\n---\n\n\n\n\"Imagem\n\n\n### Drop-shadow\n\nTambém similar a propriedade `box-shadow` do css, ela tem a diferença de também receber aceleração via hardware e ser mais performática. Outra diferença é que ela se aplica ao entorno do elemento, ao invés de criar uma caixa, como o `box-shadow` faz. Os valores que recebe são `drop-shadow(eixoX eixoY dispersão cor)`.\n\n```css\n.imagem-1 {\n -webkit-filter: drop-shadow(10px 10px 5px #000); \n filter: drop-shadow(10px 10px 5px #000); \n}\n```\n\n\n\n\"Imagem\n\n---\n\n## Ah, mas eu prefiro Photoshop...\n\nEntão, o photoshop é legal e com certeza é uma mão na roda para esse tipo de coisa. Mas e se eu quiser tornar isso interativo ao invés de estático? Se eu quiser ter uma imagem com um filtro e quando der `:hover` esse filtro sumir? E se eu quiser aplicar filtros via Javascript? Enfim, existe uma gama de interações que podemos fazer com filtros css e que o photoshop não nos permitiria, segue abaixo um simples exemplo usando o `:hover`.\n\n\n\n\"Imagem\n\n## Conclusão\n\nEsse foi mais um post rapidinho, mas mostrando uma paradinha bem legal que você já pode começar a aplicar em seus projetos. Espero que tenha sido útil e se tiverem qualquer dúvida, só comentar aqui abaixo.\n\n\n\n\n\n\n\n\n" }, { "path": "posts/formatando-datas-com-js-puro.md", "content": "---\nlayout: post\ndate: 2021-02-18T15:49:00.000Z\ntitle: Formatando datas com JS puro\ndescription: Nem sempre precisamos de bibliotecas enormes para resolver um problema simples.\nmain-class: js\ntags:\n - dicas\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Utilizando o poder do Intl.DateTimeFormat()\n\nAntigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o [moment.js](https://momentjs.com/). Mas agora graças ao [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.\n\nVamos ver abaixo alguns exemplos na prática:\n\n```javascript\n// Digamos que a gente tenha a seguinte data\nconst today = new Date(); // Thu Feb 18 2021 12:55:04 GMT-0300 (Brasilia Standard Time)\n\n// Para converter no formato mais simples do Brasil => 18/02/2021\nconsole.log(new Intl.DateTimeFormat('pt-BR').format(date));\n\n// Para converter em => 18 de fev. de 2021\nconsole.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short', year: 'numeric'} ).format(today));\n\n// Para converter com mês completo => 18 de fevereiro de 2021\nconsole.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));\n\n// Para converter em inglês => February 18, 2021\nconsole.log(new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));\n\n// Convertendo horas com timeZone => 12:55 AM GMT+9\nconsole.log(new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', timeZone: 'Asia/Tokyo', timeZoneName: 'short'} ).format(today));\n```\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.\n" }, { "path": "posts/formatando-numero-em-dinheiro-com-js-puro.md", "content": "---\nlayout: post\ndate: 2021-02-18T15:35:11.000Z\ntitle: Formatando número em dinheiro com JS puro\ndescription: Evite usar bibliotecas externas para coisas simples como formatar\n números em dinheiro.\nmain-class: js\ntags:\n - dicas\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\n\r\n\r\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n\r\n\r\n## Vídeo\n\n\r\n\r\n\n\n\r\n\r\n## Utilizando o poder do Intl.NumberFormat()\n\n\r\n\r\nAntigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o [currency.js](https://currency.js.org/). Mas agora graças ao [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.\n\nVamos ver abaixo alguns exemplos na prática:\n\n```javascript\n// Digamos que a gente tenha o seguinte número\nconst money = 1234567.89;\n\n// Para converter em Real ( retorna => R$ 1.234.567,89 )\nconsole.log(new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(money));\n\n// Para converter em Euros ( retorna => 1.234.567,89 € )\nconsole.log(new Intl.NumberFormat('de-De', { style: 'currency', currency: 'EUR' }).format(money));\n\n// Para converter em Yenes ( retorna => ￥1,234,567 )\nconsole.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));\n```\n\n\r\n\r\n## Conclusão\n\n\r\n\r\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas." }, { "path": "posts/fundamentos-javascript-antes-de-aprender-react.md", "content": "---\nlayout: post\ndate: 2019-01-04T04:26:13.000Z\ntitle: Fundamentos JavaScript antes de aprender React\ndescription: Na necessidade você pode ir direto para o React sem saber alguns\n conceitos e se complicar ainda mais. Esse post pode te ajudar nisso.\nmain-class: js\ntags:\n - react\n - js\n - es6\n---\n\n## Introdução\n\nFala pessoal, lá em 2015 eu dei início ~~e nem fiz direito~~ uma [série de posts](https://willianjusten.com.br/series/#aprendendo-reactjs) sobre React. Os posts são super acessados até hoje, mas já são bem defasados. Com isso, gostaria de voltar a escrever sobre o assunto, até para dar uma atualizada nesse conteúdo e também ajudar as pessoas que estão começando a estudar por agora.\n\nNo [primeiro post](https://willianjusten.com.br/comecando-com-react/) da série eu falo sobre a biblioteca e seus conceitos, então se você quiser ler hoje, ainda vai funcionar e ser eficaz. Mas antes disso, acho que é necessários saber alguns pequenos conceitos para não se perder na hora de estudar o React em si.\n\nO que eu mais vejo são pessoas com dificuldades não no React, mas em coisas básicas como a sintaxe do ES6, high-order functions e até operadores ternários. Esse post vai ser baseado [num outro post em inglês](https://www.robinwieruch.de/javascript-fundamentals-react-requirements) que também fala bastante disso.\n\nSe você já trabalha com React ou já sabe bem as novas sintaxes de ES6 assim como conceitos básicos de JavaScript, esse post provavelmente vai ser bem chato e repetitivo para ti, então se não quiser ler, não tem problema. Se você ainda nem começou com React e sente que ainda faltam coisas básicas, dá uma lidinha nesse post.\n\nVários dos conceitos abordados e principalmente a parte de ES6, eu tenho um [curso sobre isso na YouTube](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPQ1BE8klOtheBC0mtL3hEi) que talvez possa te interessar.\n\nEnquanto escrevo, vou ouvindo [Solar Fields](https://open.spotify.com/artist/7GyhmlEy51sGUE09A5AWzc?si=P3-T0rYMQ7yyvOnDUDWTJg) que é um DJ Sueco criador da trilha sonora de Mirror's Edge Catalyst e várias outras coisas legais. Dessa vez, foi uma recomendação do meu amigo [Jonas Mendes](https://nipher.io/), que também é programador.\n\nBom, vamos lá, vou separar os tópicos aqui, para facilitar um pouquinho:\n\n- [Primeiro contato com React](#primeiro-contato-com-react)\n- [React e Classes no JavaScript](#react-e-classes-no-javascript)\n- [Template Literals](#template-literals)\n- [Arrow Functions](#arrow-functions)\n- [Funções como componentes no React](#funções-como-componentes-no-react)\n- [Sintaxe do React Class Component](#sintaxe-do-react-class-component)\n- [Map, Reduce e Filter no React](#map-reduce-e-filter-no-react)\n- [Operador Ternário no React](#operador-ternário-no-react)\n- [Importando e Exportando no React](#importando-e-exportando-no-react)\n- [Funções de Ordem Superior](#funções-de-ordem-superior)\n- [Funções de Ordem Superior no React](#funções-de-ordem-superior-no-react)\n- [Destructuring e Spread Operators](#destructuring-e-spread-operators)\n- [Conclusão](#conclusão)\n\n## Primeiro contato com React\n\nQuando você entra no mundo React, é bem provável que você inicie o projeto utilizando o [create-react-app](https://github.com/facebook/create-react-app), já que essa é uma das ferramentas mais conhecidas para quem quer iniciar um projeto React sem muitas dificuldades e já com toda uma estrutura pronta. Isso tudo com o suporte do próprio time do React e Facebook. Ou então você pode acabar indo para alguns tutoriais na internet também.\n\nMas quando você vai ver os arquivos, é bem possível que dê de cara com um código como:\n\n```jsx\nimport React, { Component } from 'react'\nimport logo from './logo.svg'\nimport './App.css'\n\nclass App extends Component {\n render() {\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.js and save to reload.\n

\n \n Learn React\n \n
\n
\n )\n }\n}\n\nexport default App\n```\n\nE logo de cara você já vai ver um `React class component`, ou seja, o uso de classes dentro do JavaScript. Hoje, isso já deve ser normal para uma grande parcela, mas ainda pode causar dificuldades para alguns iniciantes, já que o uso de classes veio somente com o ES6. E o uso de classes traz consigo conceitos como: definições de classe, métodos de classe e herança. Dentro do React não somos obrigados a usar somente classes, mas em algum momento você pode precisar/ver e vai ter que entender esses conceitos.\n\n## React e Classes no JavaScript\n\nAntes do ES6, já havia uma forma de trabalhar com heranças e objetos, utilizando os [prototypes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain), as Classes no ES6 nada mais são que um \"sugar syntax\" disso, ou seja, por debaixo dos panos também é usado o prototype.\n\nPara entender melhor as classes, vamos usar sem o React no seguinte código abaixo:\n\n```js\nclass Developer {\n constructor(firstname, lastname) {\n this.firstname = firstname\n this.lastname = lastname\n }\n\n getName() {\n return `${this.firstname} ${this.lastname}`\n }\n}\n\nconst me = new Developer('Willian', 'Justen')\n\nconsole.log(me.getName()) // \"Willian Justen\"\n```\n\nA classe `Developer` descreve uma entidade, que é usada como uma \"forma\" (pense naquelas formas de biscoito mesmo), para poder criar `instâncias` dessa entidade, comumente chamamos essas instâncias de `objetos`. Ou seja, a partir de uma classe, podemos criar vários objetos que `herdam` propriedades e métodos de sua classe.\n\nPara criar uma instância baseada na classe, nós utilizamos a seguinte sintaxe: `new Nome_Da_Classe(paramêtros_aqui)` e assinalamos esse valor a uma variável, que é o caso da nossa variável `me` acima.\n\nUma classe pode ou não conter um `constructor`, que é um método inicial usado para definir certas propriedades que esse objeto irá possuir. Dentro das classes, também podemos criar nossos próprios métodos, que são chamados diretamente, sem necessidade de usar `function`, que é o caso do método `getName`.\n\nA instância da classe é representada pelo objeto `this` dentro da classe e pela sua variável assinalada quando fora da classe, ou seja, para outros escopos, a nossa instância será a variável `me`, mas para métodos internos como o `getName`, nós utilizamos o `this`.\n\nAs classes normalmente são utilizadas para trabalhar com herança na programação orientada a objeto. E no JavaScript não poderia ser diferente, para criar essa herança entre classes, nós usamos a palavra `extends`. Abaixo segue um exemplo onde criamos uma outra classe `ReactDeveloper` que herda de `Developer`.\n\n```js\nclass Developer {\n constructor(firstname, lastname) {\n this.firstname = firstname\n this.lastname = lastname\n }\n\n getName() {\n return `${this.firstname} ${this.lastname}`\n }\n}\n\nclass ReactDeveloper extends Developer {\n getJob() {\n return 'React Developer'\n }\n}\n\nvar me = new ReactDeveloper('Robin', 'Wieruch')\n\nconsole.log(me.getName())\nconsole.log(me.getJob())\n```\n\nRepare que além do novo método `getJob`, também é possível usar o método `getName`, assim como suas propriedades de `firstname` e `lastname`.\n\nE bom, é basicamente isso que você precisa para entender como funcionam os `React Class Components`. Uma classe JavaScript é usada para definir um componente React, mas isso só é possível, pois nós estendemos/herdamos tudo de `Component` que faz parte do pacote `react`.\n\n```jsx\nimport React, { Component } from 'react'\n\nclass App extends Component {\n render() {\n return (\n
\n

Welcome to React

\n
\n )\n }\n}\n\nexport default App\n```\n\nE é por isso que o método `render()` é obrigatório nos `React Class Components`, pois esse método que vai instruir o browser de que algo é preciso ser mostrado na tela. Mais para frente você vai ver que os métodos de ciclo de vida do React ([lifecycle methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle)) também são só disponíveis em `React Class Components` ou no novíssimo `React Hooks`.\n\nBom, apesar de estar falando bastante de classes aqui e mostrando que é quase uma base para os componentes, o mais aconselhado é que você estenda somente o `React.Component` e trabalhe mais com composição ao invés de herança, existe inclusive uma parte na [documentação oficial falando sobre isso](https://reactjs.org/docs/composition-vs-inheritance.html).\n\n## Template Literals\n\nUma outra coisa super simples, mas que ainda confunde muita gente são os template literals, que ajudam bastante na hora da concatenação de strings. Agora não precisamos mais usar aqueles sinais de `+` em mil cantos para concatenar as coisas, mas sim utilizar essa aspa invertida e escrever as variáveis nessa notação `${variável}`. Veja abaixo o antes e depois:\n\n```js\ngetName() {\n return `${this.firstname} ${this.lastname}`;\n}\n\n// forma antiga\ngetName() {\n return this.firstname + ' ' + this.lastname;\n}\n```\n\n## Arrow Functions\n\nOutra coisa que veio com o ES6, mas ainda causa confusão para os iniciantes são as arrow functions. Isso muito acontece pois tem momentos que as chaves são necessárias, outros momentos que o `return` é necessário e vezes que ambos podem ser omitidos. Abaixo seguem os exemplos:\n\n```js\n// Função em ES5\nfunction getGreeting() {\n return 'Welcome to JavaScript'\n}\n\n// Função em ES6 com {} e por isso o return obrigatório\nconst getGreeting = () => {\n return 'Welcome to JavaScript'\n}\n\n// Função em ES6 sem {} e return implícito\nconst getGreeting = () => 'Welcome to JavaScript'\n```\n\nSe você tem um método de uma linha só, as chaves e o return não se fazem necessários, mas se os métodos são um pouco maiores, há essa necessidade, é bom não confundir. Já tive muito aluno travando por esquecer de colocar o `return` mas ter adicionado as chaves.\n\n## Funções como componentes no React\n\nO React usa o melhor dos diferentes paradigmas da programação. No lado da programação orientada a objeto, ele permite a criação dos `React class components`, que permitem herdar métodos da API do React, assim como propriedades, como o `this.state`.\n\nPor outro lado, o React também possui vários conceitos de programação funcional por trás. Permitindo a criação dos famosos `stateless components`, que são funções puras que definem componentes React.\n\nOs `stateless components` são bem mais simples, são basicamente funções que recebem parâmetros, que são os `props` e renderizam o elemento na tela. Eles não mexem em estados e nem possuem todo o conjunto da API do React. Mesmo assim, eles são a forma preferida e mais performática de se criar componentes em React. Abaixo seguem formas possíveis de se criar um `stateless component`.\n\n```jsx\n// Função normal\nfunction Greeting(props) {\n return

{props.greeting}

\n}\n\n// Arrow Function com {} e return\nconst Greeting = props => {\n return

{props.greeting}

\n}\n\n// Arrow Function sem {} e return implícito\nconst Greeting = props =>

{props.greeting}

\n```\n\n## Sintaxe do React Class Component\n\nAs formas de definir componentes no React estão sempre evoluindo. No início era possível ver o uso do método `React.createClass`, mas com a chegada do ES6, passamos a ver mais o uso como mostrado acima, estendendo `Component` do pacote do `react`.\n\nE exatamente por essa constante evolução, é possível que você veja diferentes formas de se fazer a mesma coisa. Uma das formas de trabalhar com estados (`states`) e métodos é assim:\n\n```jsx\nclass Counter extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n counter: 0\n }\n\n this.onIncrement = this.onIncrement.bind(this)\n this.onDecrement = this.onDecrement.bind(this)\n }\n\n onIncrement() {\n this.setState(state => ({ counter: state.counter + 1 }))\n }\n\n onDecrement() {\n this.setState(state => ({ counter: state.counter - 1 }))\n }\n\n render() {\n return (\n
\n

{this.state.counter}

\n\n \n \n
\n )\n }\n}\n```\n\nOnde fazíamos o bind do objeto nos métodos dentro do construtor, para assim poder utilizá-los com states e ações no nosso template. Mas com o passar do tempo, esse processo de fazer [bind](https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56) acabava sendo repetitivo e chato. Para evitar isso, podemos utilizar as Arrow Functions, que já fazem o autobind sem a necessidade de fazê-los no construtor. Aliás, caso não estejamos passando nenhum `props`, podemos inclusive omitir o uso do construtor. Ficando assim:\n\n```jsx\nclass Counter extends Component {\n state = {\n counter: 0\n }\n\n onIncrement = () => {\n this.setState(state => ({ counter: state.counter + 1 }))\n }\n\n onDecrement = () => {\n this.setState(state => ({ counter: state.counter - 1 }))\n }\n\n render() {\n return (\n
\n

{this.state.counter}

\n\n \n \n
\n )\n }\n}\n```\n\n## Map, Reduce e Filter no React\n\nNo React não existem métodos ou qualquer coisa que seja para trabalhar com arrays, objetos. Tudo que você usa e precisa, é o amado JavaScript. Com isso, alguns métodos como `map`, `reduce` e `filter` passam a ser os queridinhos para quem trabalha com React, mas por quê?\n\nSimples, eles são métodos puros, que recebem um valor e retornam outro da forma desejada, trabalhando da forma funcional que o React tanto gosta. Eles facilitam bastante para retornar items da forma desejada (`map`), filtrar informações baseadas em algum parâmetro desejado (`filter`) ou até mesmo realizar operações em cima de um conjunto de valores para retornar somente um já trabalhado (`reduce`).\n\nUm exemplo com o `map` para renderizar uma lista de items seria:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass App extends Component {\n render() {\n var users = [{ name: 'Robin' }, { name: 'Markus' }]\n\n return (\n
    \n {users.map(function (user) {\n return
  • {user.name}
    • \n })}\n
\n )\n }\n}\n\nexport default App\n```\n\nPara deixar ainda mais limpo, podemos fazer o uso da Arrow Function e criar a mesma coisa em somente uma linha:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass App extends Component {\n render() {\n var users = [{ name: 'Robin' }, { name: 'Markus' }]\n\n return (\n
    \n {users.map(user => (\n
  • {user.name}
    • \n ))}\n
\n )\n }\n}\n\nexport default App\n```\n\nE, como disse anteriormente, não só o `map` ajuda, mas funções como o `filter` também são geniais, como no exemplo abaixo:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass App extends Component {\n render() {\n var users = [\n { name: 'Robin', isDeveloper: true },\n { name: 'Markus', isDeveloper: false }\n ]\n\n return (\n
    \n {users\n .filter(user => user.isDeveloper)\n .map(user => (\n
  • {user.name}
    • \n ))}\n
\n )\n }\n}\n\nexport default App\n```\n\nSe você quiser ler mais sobre os métodos, segue aqui a documentação:\n\n- [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)\n- [Filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)\n- [Reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)\n\n## Operador Ternário no React\n\nNo JSX não é possível utilizar o famoso `if-else` diretamente, mas você pode criar uma condicional antes e parar a renderização usando um return vazio. Desta forma, o React não irá mostrar nada em tela.\n\n```jsx\nimport React, { Component } from 'react'\n\nclass App extends Component {\n render() {\n const users = [{ name: 'Robin' }, { name: 'Markus' }]\n\n const showUsers = false\n\n if (!showUsers) {\n return null\n }\n\n return (\n
    \n {users.map(user => (\n
  • {user.name}
    • \n ))}\n
\n )\n }\n}\n\nexport default App\n```\n\nEntretanto, se você quiser usar a lógica de if-else dentro do JSX, você pode utilizar os [operadores ternários](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator), da seguinte forma:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass App extends Component {\n render() {\n const users = [{ name: 'Robin' }, { name: 'Markus' }]\n\n const showUsers = false\n\n return (\n
\n {showUsers ? (\n
    \n {users.map(user => (\n
  • {user.name}
    • \n ))}\n
\n ) : null}\n
\n )\n }\n}\n\nexport default App\n```\n\nOutra forma de fazer, só retornando um dos lados da condicional, é usando o operador `&&`, da seguinte forma:\n\n```jsx\nimport React, { Component } from 'react'\n\nclass App extends Component {\n render() {\n const users = [{ name: 'Robin' }, { name: 'Markus' }]\n\n const showUsers = false\n\n return (\n
\n {showUsers && (\n
    \n {users.map(user => (\n
  • {user.name}
    • \n ))}\n
\n )}\n
\n )\n }\n}\n\nexport default App\n```\n\nRepare que caso o `showUsers` seja falso, nada irá aparecer, não precisando escrever o `: null` feito anteriormente.\n\n## Importando e Exportando no React\n\nTá aí uma coisa que confunde muita gente. Como devo importar/exportar as coisas? Tem horas que tem umas chaves, outras horas não tem, o que significam?\n\nComeçaremos a falar pelos `exports`, que já irão explicar os `imports` diretamente. Nós possuímos 2 tipos de `exports`, que são:\n\n- `named exports`: que são utilizados para exportar diversos métodos/valores de dentro de um mesmo arquivo.\n\n```js\nconst firstname = 'Robin'\nconst lastname = 'Wieruch'\n\nexport { firstname, lastname }\n```\n\nRepare que temos 2 variáveis e as duas variáveis estão sendo exportadas separadamente. Na hora de importar esses valores, nós só podemos utilizar o mesmo nome que fora exportado ou então utilizar um alias. Existem 3 formas de se importar `named exports`.\n\n```js\n// Importando diretamente valor a valor, para isso é necessário o uso de chaves\nimport { firstname, lastname } from './file1.js'\nconsole.log(firstname) // \"Robin\"\n\n// Importando todos os valores e atribuindo a um objeto\nimport * as person from './file1.js'\nconsole.log(person.firstname) // \"Robin\"\n\n// Importando somente um valor, mas atribuindo um alias para o valor\nimport { firstname as username } from './file1.js'\nconsole.log(username) // \"Robin\"\n```\n\nCada uma das formas de importar tem suas vantagens.\n\n- Importar um objeto inteiro facilita para identificar de forma rápida de onde está vindo.\n- O uso do alias permite importar um método com outro nome para evitar que algum conflito possa acontecer com outro método de mesmo nome.\n- Importar valor a valor permite que não importemos coisas que não iremos utilizar naquele momento.\n\nA outra forma de exportar métodos é o `default export`, onde exportamos somente um único valor por arquivo. É o caso do nosso `App` que mostramos em alguns exemplos com React acima. Nesse caso, na hora de importar, não precisa necessariamente possuir o mesmo nome, exemplo:\n\n```js\nconst robin = {\n firstname: 'Robin',\n lastname: 'Wieruch'\n}\n\nexport default robin\n```\n\nE na hora de importar, podemos utilizar um nome qualquer que não `robin`:\n\n```js\nimport developer from './file1.js'\n\nconsole.log(developer)\n// output: { firstname: 'Robin', lastname: 'Wieruch' }\n```\n\n## Funções de Ordem Superior\n\nAs Funções de Ordem Superior (High-order Functions) são um grande conceito na programação, principalmente quando se está indo para o lado funcional. No React, faz total sentido saber sobre esse tipo de funções, pois em algum momento você terá que trabalhar com `high-order component (hoc)` e será muito mais fácil de entender se você souber sobre as high-order functions primeiro.\n\nTalvez você não saiba, mas nós já falamos sobre HOF há pouco tempo ainda nesse post! Isso mesmo, o `map()` é um exemplo de uma HOF, que nada mais é que `uma função que aceita uma ou mais funções como argumento.`\n\nVamos dar uma olhada no map novamente:\n\n```js\nconst collection = ['Willian', 'Jonas', 'Marcio']\n\n// Usando Função ES5\ncollection.map(function (person) {\n return `${person} Developer`\n // Output: [\"Willian Developer\", \"Jonas Developer\", \"Marcio Developer\"]\n})\n\n// Usando Arrow Function com {} e return\ncollection.map(person => {\n return `${person} Developer`\n // Output: [\"Willian Developer\", \"Jonas Developer\", \"Marcio Developer\"]\n})\n\n// Usando Arrow Function e return implícito\ncollection.map(person => `${person} Developer`)\n// Output: [\"Willian Developer\", \"Jonas Developer\", \"Marcio Developer\"]\n```\n\nRepare que nós temos uma função que é o `map` e ela recebe como parâmetro uma outra função, é esta função usada de parâmetro que irá trabalhar em cima dos dados. Esse tipo de conceito nos permite abstrair melhor as ações, fazendo com que elas sejam de diversas formas, inclusive uma função pode servir para criar outra função maior ou até mesmo criar recursões.\n\nPara entender ainda melhor desse conceito, aconselho dar uma lida [nesse capítulo do Eloquente JavaScript](http://braziljs.github.io/eloquente-javascript/chapters/funcoes-de-ordem-superior/) que mostra vários exemplos bem interessantes.\n\n## Funções de Ordem Superior no React\n\nComo falado antes, no React nós podemos criar componentes com funções simples, os chamados `stateless components`. Então um `high-order component` nada mais é que um `componente` que aceita um outro `componente` como argumento e retorna um `componente`.\n\nUm exemplo, você pode criar um HOC que deixa tudo que é passado em maiúsculo.\n\n```jsx\nconst yell = (PassedComponent) =>\n ({ children, ...props }) =>\n \n {children.toUpperCase()}!\n \n\nconst Title = (props) =>

{props.children}

\nconst AngryTitle = yell(Title)\n\nWhatever\n// Output:

WHATEVER!

\n```\n\nAlguns detalhes como `children` e `props` ali são do React, então não vamos falar muito sobre eles. Mas entenda que o `children` será o conteúdo passado dentro de um componente, que no nosso caso é o texto `Whatever`. E o `props` é um objeto simples que são passados através de atributos para o componente.\n\nTemos ali um método chamado `yell` que recebe um componente e utiliza o mesmo para encapsular o conteúdo, somente alterando o valor passado do children para ficar em maiúsculo.\n\nTemos também o componente `Title` que recebe um atributo e o imprime na tela entre `

` de forma bem simples.\n\nE o componente que faz essa conexão toda, que é o `AngryTitle`, que é responsável por chamar o método `yell` e dentro dele passa o componente `Title`.\n\nDessa forma, a string `Whatever` é passada para a função acima que transforma essa string em maiúscula e encapsula no componente `Title`, que por sua vez imprime o `

WHATEVER!

` na tela.\n\nIsso pode parecer meio \"inútil\" e embolado, mas facilita e muito em abstrações maiores. Um grande exemplo que usa HOC é o Redux, que usa o `connect` para passar valores da `store` para os componentes.\n\nOutra coisa útil é que extraindo funções em high-order functions para fora do componente React pode auxiliar para testar estados em isolamento também. Um exemplo abaixo:\n\n```jsx\nexport const doIncrement = state => ({ counter: state.counter + 1 })\n\nexport const doDecrement = state => ({ counter: state.counter - 1 })\n\nclass Counter extends Component {\n state = {\n counter: 0\n }\n\n onIncrement = () => {\n this.setState(doIncrement)\n }\n\n onDecrement = () => {\n this.setState(doDecrement)\n }\n\n render() {\n return (\n
\n

{this.state.counter}

\n\n \n \n
\n )\n }\n}\n```\n\nRepare que temos os métodos `doIncrement` e `doDecrement` fora do componente e exportados. Assim nós conseguimos testar os métodos de forma isolada e organizada.\n\n## Destructuring e Spread Operators\n\nUm pouco acima tinha um tal de `...props`, que é usado para caramba no React, e isso é mais uma das maravilhas que vieram com o ES6. É muito comum se querer acessar várias propriedades de um `state` ou do `props` do componente, ao invés de assinalar variáveis um a um, podemos usar o destructuring para isso.\n\n```js\n// sem destructuring\nconst users = this.state.users\nconst counter = this.state.counter\n\n// com destructuring\nconst { users, counter } = this.state\n```\n\nAli já teremos as variáveis `users` e `counters` criadas, sem precisar fazer uma a uma. E isso é especialmente benéfico quando trabalhamos com `stateless components`, pois iremos sempre receber o objeto `props` em nossa função. Assim poderemos já chamar o conteúdo diretamente de `props` ao invés de o objeto todo.\n\n```jsx\n// sem destructuring\nfunction Greeting(props) {\n return

{props.greeting}

\n}\n\n// com destructuring\nfunction Greeting({ greeting }) {\n return

{greeting}

\n}\n```\n\nE quanto aos pontinhos? Bom, esse é o `spread operator`, ele permite separar partes de um objeto, tendo propriedades específicas separadas e o resto num objeto.\n\n```js\nconst { users, ...rest } = this.state\n```\n\nAli nós teremos a propriedade `users` separada e o resto ficará no objeto `rest`. No nosso exemplo acima, nós queríamos o valor de `children` separado e para não perder nenhuma outra propriedade, nós mantivemos o resto do objeto `props`, usando o spread operator.\n\n## Conclusão\n\nBom galera, sei que o post ficou grandinho, mas espero que tenha sido útil para vocês. Muitas pessoas dizem que React tem uma curva de aprendizado muito grande e é difícil, mas na maioria das vezes, não é o React em si, mas algumas coisas básicas da linguagem.\n\nSe você acha que faltou algum detalhe ou tem outras referências legais, bota aí nos comentários! =)\n" }, { "path": "posts/gatsby-e-nextjs-performance-e-developer-experience.md", "content": "---\nlayout: post\ndate: 2021-07-06T15:27:07.000Z\ntitle: \"Gatsby e NextJS: Performance e Developer Experience\"\ndescription: Uma breve comparação entre os frameworks e a experiência de desenvolvimento.\nmain-class: js\ntags:\n - nextjs\n - gatsby\n - blog\ncategories:\n - NextJS\n---\n\n## Introdução\n\nFala pessoal! No [post passado](https://willianjusten.com.br/migrei-meu-blog-do-gatsby-para-o-nextjs) eu falei da migração desse blog do Gatsby para o NextJS e disse a razão disso, que basicamente foi \"Porque eu quis\". Mas nessa migração, pude notar vários detalhes interessantes, estes relacionados a performance e uma coisa não muito falada ainda (mas que vai crescer muito), que é a Developer Experience ou Experiência para desenvolver falando em linguas tupiniquis.\n\nEntão chega de enrolar, bota para tocar a [banda Red](https://open.spotify.com/artist/01crEa9G3pNpXZ5m7wuHOk?si=UldtaNAuTe6MwLVKhBe1lg&dl_branch=1) e vem comigo!\n\n## Performance\n\nAo você entrar nesse post hoje, você deve ter notado como carregou super rápido ~~assim espero né, senão deu ruim~~. Mas antes do blog ser em NextJS, ele já era super rápido com o Gatsby também. Como meu blog é gerado inteiramente estático, a diferença entre um ou outro nesse ponto acaba sendo bem mínima mesmo. Conforme você vai ver nas imagens abaixo. Os valores foram calculados pela [Vercel Analytics](https://vercel.com/analytics) que é uma ferramenta mais confiável que analisa a performance baseada nos seus usuários..\n\nSegue aqui as notas do meu blog usando o **Gatsby**:\n\n![Indica Nota 99 - 1.64 FCP e 1.74 LCP](/assets/img/gatsby-perf.png)\n\nAgora segue a nota do blog atual com **NextJS:**\n\n![Nota 100: 1.48 FCP e 1.49 LCP](/assets/img/next-perf.png)\n\nComo dá para notar, eles praticamente tem a mesma performance, com o NextJS ganhando por muito pouquinho. Mas já me aconteceu o contrário em outros casos, onde o Gatsby era pouco melhor, ou seja, nesse ponto, os 2 são bons demais e você terá uma performance ótima de qualquer forma!\n\nEu ainda preciso e quero fazer algumas otimizações no blog com o NextJS, como por exemplo, usar o componente de `Image` diretamente nas imagens dos posts. É bem simples, meio que só editar no parser do Markdown, possivelmente farei isso essa semana. E outras coisinhas eu também vou analisando e melhorando, inclusive, se você achar algum bug/brecha para melhoria, me manda mensagem!\n\n## Processo de Build\n\nÉ aqui que o negócio já começa a mudar e **não é pouco não!** Uma coisa que sempre me chateou quando mudei do Jekyll para o Gatsby, é que meu build que antes tomava apenas alguns segundos, agora levava vários minutos. Mas pelo Gatsby ter tantas outras vantagens, eu acabava aceitando esse trade-off, mas quanto mais posts eu ia escrevendo, mais e mais pesado ele ia se tornando.\n\nPara efeitos comparativos, eu utilizei a mesma máquina para gerar os builds.\n\n```sh\n# Minha configuração\n\nRyzen 9 3950x - 16 cores - 4.7Ghz\n64Gb ram DDR5 3200mHZ\nssd m1 nvme 1Tb - 3500Mb/s leitura | 2300Mb/s escrita\nWindows 11 WSL2\n```\n\nE quanto as informações de conteúdo, eu tenho cerca 190 páginas somando posts e páginas normais. Vamos aos builds!\n\nIgnorem o formato do log do build e se atentem ao **tempo de build**. Segue primeiro o do Gatsby:\n\n![Tempo de build: 98.23s](/assets/img/gatsby-build.jpeg)\n\nE agora o build do NextJS com exatamente o mesmo conteúdo e mesmo layout.\n\n![Tempo de build 3.93s](/assets/img/next-build.jpeg)\n\nSim! É isso mesmo que você está vendo, enquanto no Gatsby demorou `98.23s`, no NextJS durou apenas `3.93s`. Enquanto num eu posso ir pegar um cafézinho, no outro eu mal consigo piscar e tá pronto! Já pensou quantos cafés estou deixando de tomar agora? Meu estômago agradece!\n\nMas talvez você venha e fale:\n\n> Ah Willian, mas seu PC é da Nasa, quero ver na Vercel/Netlify\n\nPois então, segue aqui o tempo de build, consegue adivinhar qual é qual?\n\n![Um dos builds teve 3min e outro teve 58s](/assets/img/build-vercel.png)\n\nPois é, o NextJS é muito mais rápido no build, tanto localmente numa boa máquina (até nas ruinzinhas) quanto no servidor final. E isso pode parecer bobeira, mas se somar o tempo que perde com builds, você já poderia estar programando outra coisa.\n\n## Developer Experience\n\nE confesso que eu fiz esse post todo só para poder falar dessa parte aqui, que é onde realmente me fez querer migrar do Gatsby para o NextJS. A equipe por trás do NextJS está sempre preocupada em evoluir o projeto de forma bastante constante, em pequeno período de tempo tivemos:\n\n- [NextJS 10](https://nextjs.org/blog/next-10) - primeira major version depois de um tempo, trouxe componente de Imagem, Analytics, rotas internacionalizadas. **Nenhuma breaking change**\n- [NextJS 10.1](https://nextjs.org/blog/next-10-1) - veio pouco depois da v10 e já trouxe muitas melhorias em performance, refresh 3x mais rápido em dev, instalação mais rápida e mais. **Nenhuma breaking change**\n- [NextJS 10.2](https://nextjs.org/blog/next-10-2) - builds ainda mais rápidos, otimização automática de fontes e mais. **Nenhuma breaking change**\n- [NextJS 11](https://nextjs.org/blog/next-11) - outra major version, incluindo mais melhorias na análise de código, com linter próprio, novo componente de script, melhorias em e imagem e mais. **Nenhuma breaking change**\n\nE agora vamos falar do Gatsby:\n\n- [Gatsby v2 para v3](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/) - demorou mais de 1 ano para fazer uma grande atualização. **Uma página gigante de breaking changes e mil mudancinhas para fazer**.\n\nAcho que só pelo que escrevi ali, já deu para entender minha grande reclamação né? Por mais que o Gatsby seja legal e que a v3 tenha trazido boas melhorias, demoraram demais para isso e consequentemente criaram várias breaking changes. Isso prejudica demais a experiência do desenvolvedor.\n\n### Modelo de Plugins x Genérico\n\nAqui tá um outro ponto que pode levar a uma boa discussão. O Gatsby funciona todo em cima dos seus **plugins** e por um outro lado, isso é muito bom, pois ele tem uma \"marketplace\" com plugin para tudo. Precisa de um plugin para trabalhar com GraphCMS? Ele tem. Gerar sitemap? Tem plugin também. Isso auxilia bastante se você precisa desenvolver algo super rápido. Mas você acaba ficando muito refém desses plugins/estruturas e o Gatsby fica considerado como `configuration over code`, onde você coda menos e configura mais.\n\nEu confesso que desde a época do Wordpress, nunca fui muito fã de estruturas inteiramente de plugins, porque você fica dependente que os plugins atualizem conforme a plataforma atualiza e nem sempre é assim e você acaba ficando prejudicado. Outro grande problema, é que você acaba sem saber o que está acontecendo direito, é muita \"mágica\", o que só dificulta ainda mais se precisar customizar algo.\n\nPor um outro lado, no NextJS, ele não tem quase nada muito \"pronto\", então muitos detalhes você precisa fazer a sua implementação. Então você fica mais no `code over configuration`, ou seja, você acaba codando mais ao invés de ficar configurando coisinhas.\n\nE se você parar pensar, tudo que é mais coisa de \"configurar\" do que codar, as pessoas tem dificuldades e problemas (alô Webpack?). O Gatsby tem uma boa documentação, o que ajuda bastante, mas se for comparar, eu ainda voto pelo NextJS, por ter uma API mais simples e fácil para começar. Mas, novamente, isso é algo **muito opinativo**.\n\n## Conclusão\n\nComo minha mãe sempre diz:\n\n> O que seria do azul se todo mundo só gostasse do verde?\n\nComo você pode ver pelo post, hoje eu sou \"team NextJS\", mas isso num impede de mudar no futuro também. Minha preocupação é que essa galera se dedique cada vez mais na experiência do desenvolvedor, para que a gente consiga entregar cada vez mais rápido e melhor.\n\nE você? O que acha dessas duas ferramentas? Compartilha esse post entre seus amigos e levante essa discussão sobre Developer Experience, é bem legal!\n" }, { "path": "posts/guia-como-contribuir-em-open-source.md", "content": "---\nlayout: post\ndate: 2018-02-08T21:01:03.000Z\ntitle: \"Guia: Como contribuir em Open Source\"\ndescription: Quer contribuir em open source e não sabe como e nem por onde\n começar? Esse pequeno guia pode te ajudar.\nmain-class: dev\ntags:\n - opensource\n - git\n - github\n---\n\n## Índice\n\n- [Introdução](#introducão)\n- [O que é Open Source?](#o-que-é-open-source)\n - [Livre redistribuição](#livre-redistribuição)\n - [Trabalhos derivados](#trabalhos-derivados)\n - [Sem discriminação contra pessoas ou grupos](#sem-discriminacao-contra-pessoas-ou-grupos)\n- [Por que contribuir?](#por-que-contribuir)\n - [Melhorar seus conhecimentos](#melhorar-seus-conhecimentos)\n - [Ensinar e aprender](#ensinar-e-aprender)\n - [Criar uma boa imagem e ajudar na carreira](#criar-uma-boa-imagem-e-ajudar-na-carreira)\n- [Como contribuir?](#como-contribuir)\n - [Você gosta de design?](#voce-gosta-de-design)\n - [Você gosta de planejar eventos?](#voce-gosta-de-planejar-eventos)\n - [Você gosta de escrever?](#voce-gosta-de-escrever)\n - [Você gosta de organização?](#voce-gosta-de-organização)\n - [Você gosta de codar?](#voce-gosta-de-codar)\n - [Você gosta de ajudar pessoas?](#voce-gosta-de-ajudar-pessoas)\n - [Você pode simplesmente ajudar em outras coisas que não sejam código!](#voce-pode-simplesmente-ajudar-em-outras-coisas-que-nao-sejam-código)\n- [Orientando-se para um novo projeto](#orientando-se-para-um-novo-projeto)\n - [Anatomia básica de um projeto open source](#anatomia-basica-de-um-projeto-open-source)\n- [Encontrando um projeto para contribuir](#encontrando-um-projeto-para-contribuir)\n - [Buscas diretas no Github](#buscas-diretas-no-github)\n - [Ferramentas para buscar projetos](#ferramentas-para-buscar-projetos)\n- [Uma checklist para antes de contribuir](#uma-checklist-para-antes-de-contribuir)\n- [Como submeter uma contribuição?](#como-submeter-uma-contribuicao)\n - [Comunique efetivamente](#comunique-efetivamente)\n - [Faça seu dever de casa antes](#faça-seu-dever-de-casa-antes)\n - [Faça seus pedidos de forma curta e direta](#faça-seus-pedidos-de-forma-curta-e-direta)\n - [Mantenha toda comunicação pública](#mantenha-toda-comunicação-pública)\n - [Respeite as decisões do projeto](#respeite-as-decisoes-do-projeto)\n - [Abrindo uma Issue](#abrindo-uma-issue)\n - [Abrindo um Pull Request](#abrindo-um-pull-request)\n- [O que acontece depois?](#o-que-acontece-depois)\n - [Você não recebe uma resposta](#voce-nao-recebe-uma-resposta)\n - [Respondem e pedem mudanças](#respondem-e-pedem-mudancas)\n - [Sua contribuição não foi aceita](#sua-contribuição-nao-foi-aceita)\n - [Sua contribuição foi aceita](#sua-contribuiçao-foi-aceita)\n- [Mais alguns artigos que podem lhe ajudar](#mais-alguns-artigos-que-podem-lhe-ajudar)\n- [Conclusão](#conclusão)\n\n## Introdução\n\nOlá pessoal, primeiro de tudo, quero agradecer ao apoio que muita gente tem dado ao meu mais novo [Curso de Git e Github na Vida Real](https://www.youtube.com/playlist?list=PLlAbYrWSYTiNqugqFFWWsgONJsmc3eMpg) e também falar que esse post é totalmente ligado ao curso, pois é uma dúvida que nesses últimos dias surgiu para caramba, muitos me perguntando como contribuir, o que fazer para achar algo, enfim, várias coisas, então resolvi escrever algumas coisinhas, espero que seja útil. Muita coisa eu estou pegando do [guia de open source do Github](https://opensource.guide/how-to-contribute/) e outras mais fontes, fica tranquilo que vou colocando link em tudo.\n\nEnquanto escrevo vou ouvindo uma banda que tem dominado minhas playlists nos últimos dias, a banda se chama [Naxatras](https://open.spotify.com/artist/6HN1s0JzLowapZ7nhOAJ71?si=HdwvHdUVQzqaLdrjvcOYLA) e tem um som absurdamente bom, vai por mim! Eles são da Grécia e tem um som muito muito legal, com misturas de Blues, psicodelia e até umas pitadas de música árabe em algumas músicas. A música [Space Tunnel](https://open.spotify.com/track/630AJdTUlZ7M9SlbfGpMaa?si=H4xmNgu3Qf2dkzNgTA3JWA) começa com um baixo de arrepiar! Enfim, vamos ao guia e curta esse som!\n\n## O que é Open Source?\n\n> Muita gente acha que open source significa só o acesso ao código fonte de um projeto.\n\nMas `Open Source` não é só o acesso ao código, para que algo seja realmente considerado open source, precisa-se seguir alguns critérios, que são definidos na [opensource.org](https://opensource.org/osd), seguem alguns abaixo:\n\n### Livre redistribuição\n\nA licença não deve restringir qualquer parte de vender ou distribuir o software e a licença não pode exigir taxas de royalties ou quaisquer outras taxas para vendas.\n\n### Trabalhos derivados\n\nA licença deve permitir modificações e trabalhos derivados, e deve permitir a distribuição sob os mesmos termos da licença do software original.\n\n### Sem discriminação contra pessoas ou grupos\n\nExatamente, algo que muita gente pode não saber. Mas a licença não pode discriminar nenhuma pessoa ou grupo de pessoas.\n\n---\n\nBom, apesar da maioria já ter uma ideia do que é Open Source, talvez algumas das coisas acima sejam novidade, aproveita e abra o link [opensource.org](https://opensource.org/osd) e dá uma lida nos outros pontos. E com isso vamos a segunda pergunta mais comum.\n\n## Por que contribuir?\n\nContribuir com o open source pode ser recompensador! Uma maneira de aprender, ensinar e ter uma experiência talvez nunca imaginada. E algumas razões:\n\n### Melhorar seus conhecimentos\n\nSe você é um programador, um designer, até mesmo um escritor, você sabe que a melhor forma de se aprender é na prática e quer melhor maneira de praticar em algo real?\n\n### Ensinar e aprender\n\nA comunidade open source exatamente por ser tão aberta e livre, permite que exista essa troca. Muitas coisas você pode aprender com outros projetos e também pode retornar com o que souber =)\n\n### Criar uma boa imagem e ajudar na carreira\n\nPense no open source como seu grande portfólio. E se você tem projetos interessantes e que pessoas se interessam, isso pode atrair headhunters e outros devs a se espelhar em você. Mas lembre-se, você não precisa criar o \"novo React\". Qualquer contribuição é válida e sempre pode ajudar alguém que está começando, não tenha medo de contribuir, por mais que ache que \"é algo bobo\".\n\n## Como contribuir?\n\nA primeira e mais importante regra é:\n\n> Existem várias formas de contribuir e fazer código é só UMA delas.\n\nÉ muito comum o pessoal pensar que para contribuir em um projeto open source é possível só para gênios com QI absurdamente alto e consomem café para sobreviver. E bom pessoal, essa não é a verdade. Existe lugar no open source para todo mundo! Seja um sênior que já programa há 20 anos, seja você que aprendeu Git semana passada e tá dando seus primeiros passos com programação. E por que não alguém que sequer é programador?\n\nSeguem abaixo formas de você contribuir com o Open Source e também com a comunidade ao redor:\n\n### Você gosta de design?\n\n- Crie sites para projetos open source! Deixe eles sexy! Muitos programadores não tem habilidade nenhuma com cores e formas e por mais que seus projetos sejam incríveis, as vezes ficam no limbo por não terem nada que crie atração ao primeiro momento.\n- Ajude a melhorar a usabilidade e/ou acessibilidade de algum projeto já existente.\n- Teste, futuque, procure por bugs e os reporte! Isso é extremamente importante para nós.\n\n### Você gosta de planejar eventos?\n\n> Ué? Pensei que estávamos falando de código.\n\nComo eu disse mais acima, open source não é somente código, hoje isso pode ser extrapolado e por que não considerar eventos como parte? Aliás, eles são importantes para fortalecer a comunidade, criar laços, compartilhar conhecimento e muitas coisas mais! E como ajudar nisso?\n\n- Ajude a organizar eventos e/ou meetups na sua cidade.\n- Ajude as pessoas a encontrarem eventos bons e interessantes para elas.\n\n### Você gosta de escrever?\n\n- Ajude na documentação de um projeto (isso é **muito** importante).\n- Escreva tutoriais sobre o projeto.\n- Faça traduções de documentações.\n\n### Você gosta de organização?\n\n- Mostre issues duplicadas, crie novas labels para issues, organize.\n- Vá atrás de issues antigas e veja se elas ainda fazem sentido, senão peça para fechá-las.\n- Crie discussões dentro dos projetos para que faça ele ir para frente.\n\n### Você gosta de codar?\n\n- Busque por issues para contribuir\n- Pergunte se pode ajudar na criação de algo para o projeto\n- Automatize o processo de instalação do projeto\n- Melhore os testes ou ferramentas\n\n### Você gosta de ajudar pessoas?\n\n- Responda perguntas sobre o projeto no Stack Overflow, Reddit, Quora, etc.\n- Responda as pessoas em issues abertas\n- Ajude a moderar quadros de discussão ou canais de conversação (Slack, Gitter)\n- Participe do [FrontendBr](http://github.com/frontendbr/forum) e do [BackendBr](http://github.com/backend-br/forum), ajude pessoas de todo o Brasil <3\n\n### Você pode simplesmente ajudar em outras coisas que não sejam código!\n\n- Você pode ajudar em listas ou até criando listas de links úteis para algum estudo. [Aqui](https://github.com/sindresorhus/awesome) tem uma lista imensa com várias listas que você pode começar a ajudar hoje mesmo. Eu tenho um carinho muito grande por esse tipo de coisa e inclusive tenho 2 listas, uma sobre [SVG](https://github.com/willianjusten/awesome-svg) e outra sobre [Audio Visualização](https://github.com/willianjusten/awesome-audio-visualization).\n- Existe também um projeto da h5bp sobre [Perguntas comuns em Entrevistas](https://github.com/h5bp/Front-end-Developer-Interview-Questions)\n\nE fique calmo, ainda vou falar como encontrar coisas para contribuir, isso acima foi só uma prévia xD\n\n## Orientando-se para um novo projeto\n\nQuando você está \"iniciando\" em algum projeto, é comum que os mantenedores do projeto não vejam com bons olhos se você já chegar reclamando e/ou apontando falhas sem lhes dar nenhuma solução ou até uma \"apresentação\". Então, antes que você pule no projeto as cegas, faça o seu dever de casa, leia sobre o projeto, veja as issues já reportadas e pull requests mergeados e negados.\n\n### Anatomia básica de um projeto open source\n\nTodo projeto open source é diferente, mas existem algumas coisas que ao passar dos tempos passaram a ganhar nomenclaturas e padrões. Tendo isso em mente, nós temos alguns papeís dentro do projeto:\n\n- **Author**: a pessoa/organização que criou o projeto.\n- **Owner**: pessoa que tem os direitos administrativos do repositório (nem sempre é o autor)\n- **Mantenedores**: os responsáveis por guiar a visão e organização do projeto. (podem ser ou não os autores do projeto)\n- **Contribuintes**: todo mundo que já contribuiu em alguma coisa no projeto.\n- **Membros da comunidade**: pessoas que usam o projeto e que podem ser ativos em grupos de discussão.\n\nTemos também a documentação, que tem seguido o seguinte padrão:\n\n- **LICENSE**: por definição, todo projeto open source precisa ter uma licença. Se ele não possui uma licença, ele não é open source. E essa licença que vai guiar as permissões diante daquele projeto.\n- **README**: é a documentação de \"boas-vindas\" do projeto, onde, em geral, explica um pouco sobre o projeto e como começar com ele.\n- **CONTRIBUTING**: enquanto o README ajuda as pessoas a _usarem_ o projeto, o contributing ajuda as pessoas a _contribuirem_ com o projeto. Ele explica o processo para contribuição e outros detalhes caso necessário. Enquanto nem todo projeto possui um arquivo de contributing, os projetos que o possuem já sinalizam que contribuições são bem vindas e aceitas.\n- **CODE_OF_CONDUCT**: o código de conduta serve para definir regras para o comportamento de todos os participantes, de forma a facilitar um ambiente amigável e acolhedor.\n\nE por último, nós temos as ferramentas que servem para organizar as dicussões:\n\n- **Issue tracker**: onde as pessoas discutem sobre bugs, dúvidas e/ou melhorias a serem feitas no projeto.\n- **Pull Requests**: onde as pessoas discutem e revisam as mudanças que estão sendo feitas dentro do projeto.\n- **Fóruns de discussão / Chats**: alguns projetos maiores tem chats como Slack/Gitter para que as discussões mais comuns possam ser feitas lá, como dúvidas de como usar o projeto ou erros na instalação.\n\n## Encontrando um projeto para contribuir\n\nOutra dúvida gigante é essa, tá legal, já sei o que é, já sei como funciona, como acho algo legal para contribuir? Antes de achar que você só pode contribuir naqueles projetos que você já usa ou conhece, lembre-se que o mundo open source é enorme e muita coisa legal você nunca nem viu e nem ouviu falar, mas pode contribuir!\n\nExistem algumas formas bem legais de achar projetos para ajudar, que são:\n\n### Buscas diretas no Github\n\nO Github possui algumas labels muito conhecidas e úteis que a galera usa, exatamente para buscar ajuda, alguns exemplos:\n\n- [is:issue is:open label:beginner](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Abeginner)\n- [is:issue is:open label:easy](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Aeasy)\n- [is:issue is:open label:first-timers-only](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Afirst-timers-only)\n- [is:issue is:open label:good-first-bug](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Agood-first-bug)\n- [is:issue is:open label:\"good first issue\"](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3A\"good+first+issue\")\n- [is:issue is:open label:starter](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Astarter)\n- [is:issue is:open label:up-for-grabs](https://github.com/search?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3Aup-for-grabs)\n\n### Ferramentas para buscar projetos\n\n- [Up For Grabs](http://up-for-grabs.net/#/) - uma lista de projetos com issues para iniciantes.\n- [Issuehub.io](http://issuehub.io/) - uma ferramenta para buscar issues no Github por label e linguagem.\n- [Code Triage](https://www.codetriage.com/) - outra ferramenta muito boa para procurar repositórios por issues e linguagem.\n- [First Timers Only](http://www.firsttimersonly.com/) - uma lista de bugs para pessoas que nunca contribuiram antes.\n- [YourFirstPR](https://twitter.com/yourfirstpr) - um twitter que reporta issues que podem ser resolvidos por iniciantes.\n- [Github Explore](https://github.com/explore/) - uma ferramenta dentro do próprio Github para lhe apresentar projetos novos e que podem ser interessantes.\n\n## Uma checklist para antes de contribuir\n\nQuando você estiver procurando por um projeto para contribuir, também é importante notar alguns aspectos, caso contrário, talvez seu trabalho nunca seja respondido ou receba uma resposta não tão calorosa. Aqui uma listinha:\n\n- O projeto possui uma licença? Ela é de acordo com o que você apoia?\n- Quando foi o último commit do projeto? Faz muito tempo?\n- Com que frequência esses commits são feitos?\n- O projeto tem muitas issues abertas sem resposta?\n- Os mantenedores respondem rapidamente as issues?\n- Existem discussões nas issues?\n- Tem alguma issue recente?\n- Existem issues fechadas para o projeto?\n- Verifique as mesmas coisas para os Pull Requests\n- Quando respondidas, essas issues/PR são tratadas de forma amigável?\n- As pessoas recebem reviews em suas contribuições?\n- Os mantenedores agradecem as pessoas por suas contribuições?\n\n## Como submeter uma contribuição?\n\nTão importante quanto contribuir, é a forma com que você comunica/contribui. Para que sua contribuição seja levada a sério, siga alguns passos como:\n\n### Comunique efetivamente\n\nA comunicação é, em muitas vezes, até mais importante que a sua contribuição. E é importante lembrar que estamos trabalhando com pessoas e não robôs, então tente ser claro e direto. Lembrando que \"direto\" não significa ser rude!\n\nAntes de abrir uma issue ou um Pull Request, tenha alguns pontos em mente.\n\n**Dê contexto**. Ajude os outros a entenderem rapidamente. Se você estiver com um erro, explique o que você está fazendo e como reproduzí-lo. Se você está sugerindo uma nova ideia, explique por que você acha que seria útil para o projeto (não apenas para você!).\n\n- **Bom**: \"X não acontece quando eu faço Y\"\n- **Ruim**: \"X está quebrado! Por favor corrija!\"\n\n#### Faça seu dever de casa antes\n\nÉ OK não saber todas as coisas, mas mostre que você pelo menos tentou. Antes de pedir por ajuda, esteja ciente de ter checado no README, documentação, issues (abertas e fechadas) e procure na internet pela resposta. As pessoas vão apreciar que você ao menos demonstrou estar tentando.\n\n- **Bom**: Eu não sei como implementar X. Eu chequei na documentação e não achei nenhuma menção, existe outro lugar?\n- **Ruim**: Como eu faço X?\n\n#### Faça seus pedidos de forma curta e direta\n\nAssim como um email, toda contribuição, não importa quão simples ou útil, ela vai precisar ser lida por alguém. E a maioria dos projetos tem mais pedidos do que pessoas disponíveis para ajudar. Então seja conciso:\n\n- **Bom**: Eu gostaria de escrever um tutorial sobre a API.\n- **Ruim**: Eu estava dirigindo na auto-estrada outro dia e então parei num posto de gasolina e tive uma grande ideia de algo que poderíamos fazer, mas antes de eu explicar o quê, deixe me mostrar...\n\n#### Mantenha toda comunicação pública\n\nAs vezes é tentador, mas não saia tentando falar diretamente com os mantenedores de forma privada (Facebook, Direct Messages, Email). Quando você fala publicamente, mais pessoas podem aprender e se beneficiar dessa conversa.\n\n- **Bom**: (as a comment on Github) \"Olá @mantenedor! Como eu devo proceder com esse PR?\"\n- **Ruim**: (como um email) \"Olá, desculpe te incomodar, mas teria como dar uma olhadinha no meu PR?\"\n\n#### É ok fazer perguntas (mas seja paciente!)\n\nTodo mundo precisa de um tempo para pensar sobre a pergunta, as vezes nem mesmo o mantenedor sabe a resposta e vai precisar pesquisar. Ao invés de continuar perguntando e perguntando, tente e estude junto, se tiver alguma informação interessante, passe adiante.\n\n- **Bom**: Obrigado por olhar esse erro. Eu segui suas instruções e esse aqui é o resultado.\n- **Ruim**: Por que você não corrige meu problema? Você não é o dono do projeto?\n\n#### Respeite as decisões do projeto\n\nSim, isso deveria ser básico, mas muita gente esquece... Já vi milhares de pessoas xingando porque o React Router fez isso, por que o Angular mudou completamente, bando de \\*\\*\\*\\*. Lembrem-se, por trás de todo projeto, existem pessoas assim como você. Você pode dar seu feedback, mas nunca seja agressivo.\n\n- **Bom**: Eu estou triste que você não tem como me ajudar no meu problema. Mas como você explicou, é um caso muito raro e eu entendo o porquê. Obrigado por me ouvir.\n- **Ruim**: Vocês destruiram o projeto inteiro, vou usar Y.\n\n### Abrindo uma Issue\n\nVocê deve abrir uma issue nas seguintes situações:\n\n- Reportar um erro que você não pode resolver\n- Propor uma nova feature ou outra ideia de projeto\n\nDicas para se comunicar nas issues:\n\n- _Se você viu uma issue que você quer fazer_, comente na issue, faça com que a pessoa saiba que você está de olho nisso. Dessa forma vai evitar trabalho duplicado.\n- _Se uma issue foi aberta há muito tempo_, é possível que ela já tenha sido até solucionada por alguém, então pergunte para confirmar antes que comece a trabalhar.\n- _Se você abriu uma issue e depois descobriu a resposta sozinho_, comente na issue para que as pessoas saibam, de preferência responda sua própria pergunta e então feche a issue.\n\n### Abrindo um Pull Request\n\nVocê deve abrir um Pull Request nas seguintes situações:\n\n- Submeter pequenas correções (um erro de digitação, um link quebrado ou um erro bem óbvio)\n- Começar a trabalhar numa contribuição que já foi pedida e você discutiu antes em alguma issue\n\nUm Pull Request não precisa representar um trabalho finalizado. É inclusive melhor abrir um PR cedo, assim outros podem olhar e dar feedbacks durante o progresso. Só não esqueça de marcar como **WIP** (Work in Progress).\n\nSe o projeto estiver no Github, aqui algumas dicas úteis de como criar o PR:\n\n- [Faça um fork do repositório](https://guides.github.com/activities/forking/) e o clone localmente. Conecte seu local com o repositório original (upstream) o adicionando como remoto. E frequentemente pegue as mudanças do \"upstream\", assim você garante estar sempre atualizado com o projeto original. [Saiba mais como manter o seu repositório atualizado com esse post do Daciuk](https://blog.da2k.com.br/2014/01/19/manter-repositorio-github-forkado-sincronizado-com-o-original/).\n- Crie um branch para o seu trabalho.\n- Referencie qualquer issue relevante ou qualquer documentação necessária no seu PR.\n- Inclua screenshots de antes e depois caso suas mudanças afetem algo visual do projeto.\n- Teste suas mudanças! Rode os testes do projeto se existirem, se não existirem pense em criar. E tendo testes ou não, se assegure que tudo está funcionando através de testes manuais.\n\n## O que acontece depois?\n\nDepois que você submete sua contribuição, algumas coisas podem acontecer, que são:\n\n### Você não recebe uma resposta\n\nFelizmente você fez a listinha antes de contribuir para o projeto e viu que o projeto tinha sinais de atividade. Mas, as vezes, mesmo em projetos ativos, é possível você não receber nenhuma resposta.\n\nSe você não recebeu nenhuma resposta mesmo depois de uma semana, é aceitável que dentro desse mesmo PR, você faça uma pergunta por alguém para revisar, lembrando de seguir as normas já faladas acima.\n\nSe mesmo depois de pedir, ninguém responder, é possível que você nem receba mais respostas. Isso é bastante chato, mas não deixe que isso desencorage você. Acontece com todo mundo. Existem vários motivos para que você não tenha recebido uma resposta, e bom, eles estão fora do seu alcance. A dica é, tente procurar outro projeto ou forma de contribuir.\n\n### Respondem e pedem mudanças\n\nÉ comum que você receba alguns pedidos de mudança, seja pelo código não ser feito da forma que gostariam ou algo que não esteja de acordo com o projeto/escopo.\n\nQuando alguém pedir por mudanças, responda. Eles tomaram seus tempos para revisar sua contribuição. Abrir um PR e simplesmente sumir não é algo legal. Se você não souber como fazer as mudanças, pesquise sobre, tente resolver e se não conseguir, peça por ajuda se precisar.\n\nSe você não tem mais tempo para trabalhar no problema mais (por exemplo, a discussão está acontecendo durante meses e agora as circunstâncias mudaram), faça com que o mantenedor saiba, assim outra pessoa pode ajudar.\n\n### Sua contribuição não foi aceita\n\nSua contribuição pode ou não ser aceita, isso vai depender muito dos mantenedores do projeto e o que eles acham que pode ser bom ou não para o projeto. E não se preocupe, isso acontece também. Você pode perguntar educadamente as razões para não ser aceito, porém, de forma alguma discuta ou seja hostil. Lembre-se, somos todos humanos e precisamos de educação.\n\n### Sua contribuição foi aceita\n\nYeyyyy! Uma sensação incrível né? Corre já para contribuir em outra coisa! o/\n\n## Mais alguns artigos que podem lhe ajudar\n\nWow! Eu sei, tem muita coisa para ser lida aqui, mas nunca é demais para ler mais coisas né? Seguem agora alguns links que podem ser interessantes para você:\n\n- [Como escolher (e contribuir) no seu primeiro projeto open source (en)](https://github.com/collections/choosing-projects)\n- [Como achar seu primeiro bug para corrigir (en)](https://medium.freecodecamp.org/finding-your-first-open-source-project-or-bug-to-work-on-1712f651e5ba#.slc8i2h1l)\n- [Traga bondade para o Open Source (en)](http://www.hanselman.com/blog/BringKindnessBackToOpenSource.aspx)\n- [Como contribuir com Open Source](https://opensource.guide/how-to-contribute/)\n- [Como achar um bug no seu código](https://8thlight.com/blog/doug-bradbury/2016/06/29/how-to-find-bug-in-your-code.html)\n- [Ficando mestre em Markdown](https://guides.github.com/features/mastering-markdown/)\n\n## Conclusão\n\nÉ isso aí galera, espero que esse guia ajude um pouco vocês e que saiam várias grandes contribuições daqui! A nossa área é uma das mais legais no mundo, nós podemos ajudar e ser ajudados por pessoas que nunca vimos no mundo real, isso num é incrível?! Eu deixo aqui em separado de novo, o [Fórum do FrontendBr](https://github.com/frontendbr/forum), que é todo feito dentro do Github, ou seja, cada pergunta que você faz ou que ajuda a responder, você já está contribuindo diretamente para o Open Source!\n\nE se você nunca usou o Git ou Github na vida, fica aqui o link do meu curso [Git e Github para Iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/) que é completamente gratuito e já vai te ajudar a iniciar nesse mundo! E se você já sabe Git, mas quer melhorar ainda mais (ou se quiser agradecer pelo guia), tem também meu curso [Git e Github na Vida Real](https://www.youtube.com/playlist?list=PLlAbYrWSYTiNqugqFFWWsgONJsmc3eMpg). E se você quiser colaborar com correções nesse guia (deve ter um monte de erro de português/digitação), é só ir no [repositório do blog](https://github.com/willianjusten/willianjusten.com.br/tree/master/posts), que é todo em Markdown e você pode colaborar hoje e agora!\n" }, { "path": "posts/habemus-react-hooks.md", "content": "---\nlayout: post\ndate: 2019-02-08T05:37:19.000Z\ntitle: Habemus React Hooks\ndescription: Uma das features mais interessantes do React foi finalmente\n lançada, o famoso Hooks! Por que é tão legal assim?\nmain-class: js\ntags:\n - react\n - js\n - hooks\n---\n\n- [Introdução](#introdução)\n- [O que é? Onde vive? O que come?](#o-que-é-onde-vive-o-que-come)\n - [O que são React Hooks?](#o-que-sao-react-hooks)\n - [Por que criaram isso?](#por-que-criaram-isso)\n - [Classes ainda confundem pessoas e máquinas](#classes-ainda-confundem-pessoas-e-máquinas)\n - [Preciso aprender tudo de novo?](#preciso-aprender-tudo-de-novo)\n- [Hooks e seus funcionamentos](#hooks-e-seus-funcionamentos)\n - [Usando o Hook de estados (useState)](#usando-o-hook-de-estados-usestate)\n - [Declarando a variável de estado](#declarando-a-variavel-de-estado)\n - [Lendo a variável de estado](#lendo-a-variável-de-estado)\n - [Atualizando a variável de estado](#atualizando-a-variável-de-estado)\n - [Usando o Hook de efeitos (useEffect)](#usando-o-hook-de-efeitos-useeffect)\n - [Efeitos com Cleanup](#efeitos-com-cleanup)\n - [Regras para os Hooks](#regras-para-os-hooks)\n - [Somente chame os Hooks no Top Level](#somente-chame-os-hooks-no-top-level)\n - [Somente chame os Hooks em funções React](#somente-chame-os-hooks-em-funções-react)\n - [Explicação](#explicação)\n - [Criando seus próprios Hooks](#criando-seus-próprios-hooks)\n - [Extraindo um Hook customizado](#extraindo-um-hook-customizado)\n - [Usando um hook customizado](#usando-um-hook-customizado)\n- [Links interessantes](#links-interessantes)\n- [Conclusão](#conclusão)\n\n## Introdução\n\nFaaaala pessoal! A ideia era ter escrito esse post bem no dia do [release dos hooks](https://github.com/facebook/react/blob/master/CHANGELOG.md#1680-february-6-2019), mas acabou que tive uns imprevistos, mas antes tarde do que nunca né?\n\nEsse post vai beber basicamente da fonte [da documentação do React](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html), vou tentar condensar alguns detalhes e fazer outros comentários, se você já leu tudo lá e já entendeu, talvez o post seja repetitivo, mas não vá embora ainda não, veja que belo gatinho.\n\n![Gatinho fofinho olhando com cara de pidão](/assets/img/cute-kitten.jpg)\n\nBom, enquanto escrevo esse post, vou ouvindo a trilha sonora de um jogo incrível chamado [Gris](https://www.youtube.com/watch?v=XxM1SX35-GU), é composta basicamente por pianos, ótima para concentrar e para quem curte jogos, aconselho demais a dar uma conferida.\n\n## O que é? Onde vive? O que come?\n\nAssim como quando algo novo lança, vários devem estar se perguntando para que servem os tais hooks? Qual o ganho nisso? Vou ter que aprender tudo de novo?\n\nEnfim, são váaarias dúvidas e aí eu separei essa parte inicial para responder algumas delas. Se você quiser ver ainda mais perguntas/respostas, o pessoal do React fez [um excelente FAQ](https://reactjs.org/docs/hooks-faq.html).\n\n### O que são React Hooks?\n\nNuma versão bem resumida:\n\n> Hooks permitem que você utilize `states` e outros métodos de `states` sem precisar criar uma classe. Você também pode criar seus próprios Hooks e compartilhar a lógica entre mais componentes.\n\nOu seja, aqueles métodos como `componentDidMount` e `componentDidUpdate` que as vezes se tornavam complexos em componentes maiores, agora poderão ser simplificados na nova lógica dos hooks, além de poderem ser compartilhados.\n\n### Por que criaram isso?\n\nO Dan Abramov fez uma palestra no ano passado explicando todos os conceitos e motivações para criar essa nova estrutura, eu acho que vale super a pena assistir:\n\n\n\nUma outra fonte que eu acho super legal é esse Tweet abaixo:\n\n

How migration of a class to hooks look like and how much code it saves & simplifies. #React pic.twitter.com/E72sNfi4ZX

— Andreas Kull (@akullpp) February 6, 2019
\n\nSe você perceber, o código não ficou muito menor, mas as responsabilidades ficaram mais organizadas em seus devidos blocos, o que já facilita DEMAIS na escrita e leitura do código.\n\nExistem outros vários motivos, mas vou pontuar os principais aqui:\n\n#### É difícil de reutilizar lógica de estados entre componentes\n\nA forma mais comum de compartilharmos comportamentos/funcionamentos entre componentes era através dos HOC's (Higher-order components) e das render props.\n\nO grande problema desses padrões é que você precisa modificar boa parte do código do componente para que o mesmo se adapte ao funcionamento compartilhado, aumentando sua verbosidade e perdendo boa parte do isolamento de responsabilidade, ou seja, você acaba perdendo qual parte do código faz o que.\n\n#### Classes ainda confundem pessoas e máquinas\n\nQuando eu escrevi o post [Fundamentos JavaScript antes de aprender React](https://willianjusten.com.br/fundamentos-javascript-antes-de-aprender-react/), um dos primeiros conceitos que abordei lá, foi exatamente o uso de classes.\n\nA equipe do React notou que o uso de classes ainda é uma grande barreira para aprender React. Você precisa entender como o Javascript funciona, que é bem diferente da maioria das linguagens orientadas a objeto. Você precisa lembrar de fazer o `bind` dos eventos e também entender qual é o `this` para cada contexto, o que pode ser simples para uns, mas ainda muito complicado para muitos.\n\nAdicionalmente, o React é uma biblioteca que já está no mercado há aproximadamente 5 anos, mas eles querem que ela continue relevante por mais e mais anos. Para isso, eles já estão se preocupando com outras otimizações e eles notaram que o uso de classes pode permitir o uso de certas patterns que prejudicariam essa otimização, como uma não tão boa minificação e outros detalhes de mais baixo nível.\n\nPara resolver esses problemas, os Hooks permitem que você utilize todas as features do React mas sem a necessidade de utilizar classes. Os componentes React sempre foram mais ligados a funções e os hooks vem para tornar isso ainda mais comum.\n\n### Preciso aprender tudo de novo?\n\nA resposta curta e grossa é **não**. Os Hooks são totalmente opcionais e você pode criar componentes novos utilizando essa nova estrutura e utilizar lado a lado com componentes antigos, tudo vai funcionar sem problemas. Mas se você não quiser ou não tiver tempo de ler sobre hooks, não há problema nenhum, você pode continuar a vida como está.\n\nHooks não adicionam nada novo nos conceitos de React. Eles somente adicionam uma forma mais direta de mexer na API do react, como: `props`, `state`, `context`, `refs`, e `lifecycle`.\n\nEles inclusive encorajam que você não saia reescrevendo tudo do zero, mas que vá [gradualmente adotando os hooks](https://reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy).\n\n## Hooks e seus funcionamentos\n\nExistem alguns hooks e inclusive você pode criar os seus próprios! Eu vou mostrar inicialmente os mais importantes, fazendo comparações de antes e depois, para ajudar a entender o funcionamento.\n\n### Usando o Hook de estados (useState)\n\nSeguindo a ideia de antes/depois, segue abaixo um Componente Class Based:\n\n```jsx\nclass Example extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n count: 0\n }\n }\n\n render() {\n return (\n
\n

You clicked {this.state.count} times

\n \n
\n )\n }\n}\n```\n\nUtilizando hooks, ficaria assim:\n\n```jsx\nimport React, { useState } from 'react'\n\nfunction Example() {\n // Declare a new state variable, which we'll call \"count\"\n // Declarando uma nova variável de estado, que chamamos de \"count\"\n const [count, setCount] = useState(0)\n\n return (\n
\n

You clicked {count} times

\n \n
\n )\n}\n```\n\nBasicamente, a grande mudança fica por conta desse `useState` que é importado diretamente do pacote do `react`. Temos também ali a criação do `count` e também um método `setCount` e por último, temos o método `setCount` sendo chamado no `onClick` assim como o `this.setState` era chamado antes. Bom, vamos quebrar isso em pedacinhos para entender.\n\n#### Declarando a variável de estado\n\nNuma classe, nós inicializamos o `count` como `0` definindo através do `this.state` lá no construtor.\n\n```jsx\n...\nconstructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n}\n...\n```\n\nNum `function component` ou antes chamado também de `stateless component` (antes não controlávamos estados em funções puras), nós não tínhamos o `this.state` para poder definir valores ou chamar valores. Mas agora, com o hooks, nós podemos chamar o `useState` diretamente do nosso componente:\n\n```jsx\nconst [count, setCount] = useState(0)\n```\n\n- E o que o `useState` faz?\n\nEle declara uma \"state variable\". Essa variável é chamada `count` para esse exemplo, mas poderia se chamar qualquer coisa, como `fruit`. Essa é a maneira de \"preservar\" os valores entre as funções. O `useState` tem as mesmas habilidades que o `this.state` tem para a classe. Normalmente variáveis desaparecem depois que a função é executada, mas os estados são preservados no React e isso é o que vai ocorrer com as variáveis criadas pelo `useState`.\n\n- O que nós passamos de argumento no `useState`?\n\nO `useState` aceita somente **um** argumento e ele é o estado inicial da variável. Diferente das classes, o estado não precisa ser um objeto nesse caso. Ele pode ser somente um número ou uma string, se é tudo que precisamos. No nosso exemplo, estamos alterando somente a quantidade de vezes que o usuário está clicando, então `0` é mais que suficiente.\n\n**Importante:** se precisarmos guardar dois diferentes valores no estado, iremos utilizar o `useState` duas vezes.\n\n- O que o `useState` retorna?\n\nEsse método retorna um par de valores: o estado atual e uma função que atualiza o mesmo. E é por isso que escrevemos `[count, setCount] = useState()`.\n\nEssa forma de assinalar 2 valores ao mesmo tempo é utilizando o [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring), que é uma feature que veio no ES6, não é exclusiva do React.\n\nAgora que sabemos como o `useState` funciona, as coisas vão fazer mais sentido.\n\n```jsx\nconst [count, setCount] = useState(0)\n```\n\nAli nós declaramos a variável `count`, que vai ter `0` como seu valor inicial e criamos o método `setCount` que vai ser responsável por fazer a atualização do `count`.\n\n#### Lendo a variável de estado\n\nPara ler o valor da variável, na classe nós utilizávamos assim:\n\n```jsx\n

You clicked {this.state.count} times

\n```\n\nOu seja, precisávamos buscar no nosso objeto `this.state` por cada variável. Nas funções com hooks podemos chamar a variável diretamente:\n\n```jsx\n

You clicked {count} times

\n```\n\n#### Atualizando a variável de estado\n\nNa classe, nós precisávamos do método `this.setState()` para atualizar os valores:\n\n```jsx\n\n```\n\nNa função com hooks, nós já definimos tanto o `setCount` quanto o `count`, então fica bem mais simples:\n\n```jsx\n\n```\n\nSe você ainda tem alguma dúvida nessa parte, recomendo ir [nessa parte da documentação](https://reactjs.org/docs/hooks-state.html), onde tem mais alguns detalhes.\n\n### Usando o Hook de efeitos (useEffect)\n\nVimos acima como trabalhar com o `useState` para definir nossos estados, mas e nos casos que precisamos encadear ações baseadas em outras mudanças, como fazíamos no `componentDidMount`, `componentDidUpdate` e `componentWillUnmount`?\n\nSeguindo a mesma ideia de antes/depois, segue um exemplo onde atualizamos o `title` da página baseada no nosso `count`. Primeiro class based:\n\n```jsx\nclass Example extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n count: 0\n }\n }\n\n componentDidMount() {\n document.title = `You clicked ${this.state.count} times`\n }\n\n componentDidUpdate() {\n document.title = `You clicked ${this.state.count} times`\n }\n\n render() {\n return (\n
\n

You clicked {this.state.count} times

\n \n
\n )\n }\n}\n```\n\nRepare que temos código duplicado ali! Isso acontece pois precisamos realizar a operação 2x, primeiro quando o componente é montado na página `componentDidMount` e depois quando ele é atualizado `componentDidUpdate`.\n\nAgora vejamos com o `useEffect` hook:\n\n```jsx\nimport React, { useState, useEffect } from 'react'\n\nfunction Example() {\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n document.title = `You clicked ${count} times`\n })\n\n return (\n
\n

You clicked {count} times

\n \n
\n )\n}\n```\n\n- O que o `useEffect` faz?\n\nUsando esse Hook, você diz ao React que o componente precisa fazer algo depois de renderizar. Desta forma, no momento que o componente renderizar, o React vai chamar o método e toda vez que atualizarmos, ele também irá chamar o método. Nós utilizamos para uma simples mudança de `document.title`, mas poderia ser utilizado para um fetch numa API, por exemplo.\n\n- Por que o `useEffect` é chamado dentro do componente?\n\nColocando o `useEffect` dentro do componente nos permite acessar a variável de `count` ou qualquer `props` que precisarmos. Tendo já dentro da função, não precisamos de nenhuma API para ler, já está dentro do escopo da função.\n\n- O `useEffect` roda toda vez que renderiza?\n\nSim, por padrão ele vai rodar logo após ser renderizado e toda vez que for atualizado. Mais para frente veremos que também podemos customizar isso.\n\n#### Efeitos com Cleanup\n\nNo exemplo acima, nós estamos alterando somente um ponto e não estamos \"vigiando\" nenhuma mudança em nenhum outro canto. Mas em algumas ocasiões nossos componentes precisam \"vigiar\" eventos enquanto estiverem na tela e depois precisamos limpar isso, para não correr o risco de ter memory leak e travar toda a aplicação. Usando classes, nós utilizamos o `componentWillUnmount` exatamente para fazer essa limpeza. Abaixo segue um exemplo onde trabalhamos com um módulo chamado `ChatAPI`:\n\n```jsx\nclass FriendStatus extends React.Component {\n constructor(props) {\n super(props)\n this.state = { isOnline: null }\n this.handleStatusChange = this.handleStatusChange.bind(this)\n }\n\n componentDidMount() {\n ChatAPI.subscribeToFriendStatus(\n this.props.friend.id,\n this.handleStatusChange\n )\n }\n\n componentWillUnmount() {\n ChatAPI.unsubscribeFromFriendStatus(\n this.props.friend.id,\n this.handleStatusChange\n )\n }\n\n handleStatusChange(status) {\n this.setState({\n isOnline: status.isOnline\n })\n }\n\n render() {\n if (this.state.isOnline === null) {\n return 'Loading...'\n }\n return this.state.isOnline ? 'Online' : 'Offline'\n }\n}\n```\n\nRepare que ao montar o componente nós fazemos um `subscribeToFriendStatus` e ao desmontar, fazemos exatamente o oposto com `unsubscribeFromFriendStatus`.\n\nJá utilizando o `useEffect` hook faremos assim:\n\n```jsx\nimport React, { useState, useEffect } from 'react'\n\nfunction FriendStatus(props) {\n const [isOnline, setIsOnline] = useState(null)\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline)\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)\n // Specify how to clean up after this effect:\n return function cleanup() {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)\n }\n })\n\n if (isOnline === null) {\n return 'Loading...'\n }\n return isOnline ? 'Online' : 'Offline'\n}\n```\n\nDentro do nosso método `useEffect`, nós faremos o **retorno de uma função**, nesse caso a função `cleanup` (não necessariamente precisa ter esse nome ou sequer ser uma named function).\n\nO React ao ver que o `useEffect` possui uma função como retorno, automaticamente irá rodar sempre que o componente for desmontado. Dessa forma, nós temos o funcionamento de `componentDidMount` e `componentDidUnmount` como na classe.\n\nDentro da documentação existe uma parte [com algumas dicas](https://reactjs.org/docs/hooks-effect.html#tips-for-using-effects) para o `useEffect`, devo fazer um post futuramente com essa parte em separado, mas vale dar uma olhada lá também.\n\n### Regras para os Hooks\n\nComo já vimos, os Hooks são funções JavaScript, mas é necessário seguir duas regras fundamentais para poder usá-los. Inclusive existe um [plugin para o eslint](https://www.npmjs.com/package/eslint-plugin-react-hooks) que ajuda a não esquecer dessas regras.\n\n#### Somente chame os Hooks no Top Level\n\nNão chame Hooks dentro de loops, condicionais ou funções aninhadas. Ao invés disso, sempre chame os Hooks na primeira camada da sua função React. Seguindo esta regra, você garante que os Hooks serão chamados na mesma ordem. Isso permite que o React preserve corretamente o estado dos Hooks quando usados múltiplos `useState` e `useEffect`.\n\n#### Somente chame os Hooks em funções React\n\nDessa forma você garante que toda a lógica de estados será visível por todo o componente.\n\n#### Explicação\n\nUm mesmo componente pode ter múltiplos `useState` e `useEffect`. Como o exemplo abaixo:\n\n```jsx\nfunction Form() {\n // 1. Use a variável \"name\" no state\n const [name, setName] = useState('Mary')\n\n // 2. Use um effect para persistir os dados do form\n useEffect(function persistForm() {\n localStorage.setItem('formData', name)\n })\n\n // 3. Use a variável \"surname\" no state\n const [surname, setSurname] = useState('Poppins')\n\n // 4. Use um effect para atualizar o título da página\n useEffect(function updateTitle() {\n document.title = name + ' ' + surname\n })\n\n // ...\n}\n```\n\nEntão, como o React sabe qual estado corresponde a qual chamada do `useState`? A resposta é **o React depende da ordem com que os Hooks são chamados**. O exemplo acima funciona, pois a ordem dos Hooks é sempre a mesma em todas as renderizações. Segue abaixo um fluxo:\n\n```jsx\n// ------------\n// Primeira renderização\n// ------------\nuseState('Mary') // 1. Inicializa a variável \"name\" como 'Mary'\nuseEffect(persistForm) // 2. Adiciona um effect para persistir o form\nuseState('Poppins') // 3. Inicializa a variável \"surname\" com 'Poppins'\nuseEffect(updateTitle) // 4. Adiciona um effect para atualizar o título\n\n// -------------\n// Segunda renderização\n// -------------\nuseState('Mary') // 1. Lê a variável \"name\" (o argumento é ignorado)\nuseEffect(persistForm) // 2. Recoloca o efeito para persistir o form\nuseState('Poppins') // 3. Lê a variável \"surname\" (o argumento é ignorado)\nuseEffect(updateTitle) // 4. Recoloca o efeito para atualizar o título\n// ...\n```\n\nEnquanto a ordem permanecer a mesma, não há problema nenhum, mas o que acontece se colocar uma condicional para um dos hooks?\n\n```jsx\n// 🔴 Estamos quebrando a primeira regra!\nif (name !== '') {\n useEffect(function persistForm() {\n localStorage.setItem('formData', name)\n })\n}\n```\n\nA condição `name !== ''` é verdadeira na primeira renderização, então chamamos o Hook. Entretanto, na próxima renderização o usuário pode querer limpar o form, fazendo a condição ser `false`. E com isso, a ordem de execução do hook muda:\n\n```jsx\nuseState('Mary') // 1. Lê a variável \"name\" (o argumento é ignorado)\n// useEffect(persistForm) // 🔴 Esse hook foi passado\nuseState('Poppins') // 🔴 2 (mas era 3). Falha para ler o \"surname\"\nuseEffect(updateTitle) // 🔴 3 (mas era 4). Falha para substituir o effect\n```\n\nO React não saberia o que devolver para a segunda chamada do `useState`. Ele esperava receber o `useEffect` para persistir o form, assim como feito na renderização anterior, com isso todas as chamadas iriam \"pular\" uma etapa e isso levaria a vários bugs de estado.\n\nSei que isso acima parece super complexo, para mim também soou, mas você não precisa se preocupar. Se você estiver usando o [plugin para o eslint](https://www.npmjs.com/package/eslint-plugin-react-hooks), ele nunca vai deixar você cometer esse erro e com isso você está salvo \\o/\n\n### Criando seus próprios Hooks\n\nAlém dos hooks `useState` e `useEffect` que vimos, nós podemos criar nossos próprios hooks e compartilhar entre vários componentes, que é a parte mais interessante dos hooks.\n\nMais acima, nós tínhamos o seguinte componente, que servia para indicar se um amigo estava online ou offline.\n\n```jsx\nimport React, { useState, useEffect } from 'react'\n\nfunction FriendStatus(props) {\n const [isOnline, setIsOnline] = useState(null)\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline)\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)\n }\n })\n\n if (isOnline === null) {\n return 'Loading...'\n }\n return isOnline ? 'Online' : 'Offline'\n}\n```\n\nAgora, vamos dizer que na nossa aplicação também possuímos um contact list que renderiza os nomes dos usuários online com uma cor verde. Nós poderíamos copiar a lógica feito no `FriendStatus` e passaríamos para o nosso novo `FriendListItem`, mas isso não seria o ideal, olhe abaixo:\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction FriendListItem(props) {\n const [isOnline, setIsOnline] = useState(null);\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n };\n });\n\n return (\n
  • \n {props.friend.name}\n
    • \n );\n}\n```\n\nRepare que é praticamente tudo igual, a única diferença é na parte da renderização, mas os hooks são os mesmos. Para corrigir esse problema de duplicação, nós poderíamos ter 2 formas de compartilhar essa lógica, através do [render props](https://reactjs.org/docs/render-props.html) ou usando [higher-order components](https://reactjs.org/docs/higher-order-components.html).\n\nAgora vamos ver como podemos solucionar esse problema utilizando hooks sem a necessidade de criar mais componentes.\n\n#### Extraindo um Hook customizado\n\nQuando queremos compartilhar lógica entre duas funções, nós extraímos em uma terceira função. Fazemos o mesmo com os hooks!\n\n**Um hook customizado é uma função JavaScript que começa com a palavra \"use\" e pode chamar outros hooks.** Por exemplo, o `useFriendStatus` abaixo será nosso primeiro hook customizado.\n\n```jsx\nimport React, { useState, useEffect } from 'react'\n\nfunction useFriendStatus(friendID) {\n const [isOnline, setIsOnline] = useState(null)\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline)\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange)\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange)\n }\n })\n\n return isOnline\n}\n```\n\nRepare que não há nada de novo nessa função, nós basicamente copiamos a lógica dos componentes acima.\n\nDiferente de um componente React, um hook customizado não precisa de assinatura específica. Nós decidimos o que ele irá receber como argumentos e também o que iremos retornar se precisarmos retornar algo. Em outras palavras, é basicamente uma função normal em JavaScript, só precisa ser iniciado com a palavra `use` para seguir as regras de hooks mencionadas anteriormente.\n\n#### Usando um hook customizado\n\nAgora que já extraímos a lógica para um hook separado, podemos simplesmente utilizar o mesmo nos nossos componentes:\n\n```jsx\nfunction FriendStatus(props) {\n const isOnline = useFriendStatus(props.friend.id)\n\n if (isOnline === null) {\n return 'Loading...'\n }\n return isOnline ? 'Online' : 'Offline'\n}\n```\n\n```jsx\nfunction FriendListItem(props) {\n const isOnline = useFriendStatus(props.friend.id);\n\n return (\n
  • \n {props.friend.name}\n
    • \n );\n}\n```\n\nRepare que ficou bem mais limpo, sem código duplicado e sem a necessidade de criar um outro componente externo! Na [documentação](https://reactjs.org/docs/hooks-custom.html) temos mais alguns detalhes também.\n\n## Links interessantes\n\nNossa, o post ficou bem grande, mas tem muitos outros detalhes legais que valem a pena ver, então vou botar alguns links aqui:\n\n- [Documentação da API](https://reactjs.org/docs/hooks-reference.html)\n- [FAQ](https://reactjs.org/docs/hooks-faq.html)\n- [Site com vários hooks customizados](https://usehooks.com/)\n- [Awesome-react-hooks](https://github.com/rehooks/awesome-react-hooks)\n\n## Conclusão\n\nBom pessoal, espero que esse post tenha sido útil e que pelo menos te faça querer dar uma olhada a mais sobre hooks, acredito que essa foi uma enorme adição ao ecossistema React e será o futuro dessa lib. Ainda pretendo escrever mais posts sobre esse assunto, então fique atento! =)\n" }, { "path": "posts/happy-halloween-caca-ao-tesouro.md", "content": "---\nlayout: post\ndate: 2020-10-31T02:47:09.000Z\ntitle: Happy Halloween! Caça ao tesouro!\ndescription: Tenha a chance de ganhar 1 curso de React Avançado de graça!\nmain-class: misc\ntags:\n - react\ncategories:\n - \"\"\n---\n## Introdução\n\nFala meu povo lindo!! Happy Halloween! Resolvi fazer uma surpresa bem legal para vocês hoje!\n\nVamos deixar de enrolação e vamos logo para o assunto. Hoje você pode ter a chance de ganhar 1 entre 10 cursos do [React Avançado](https://reactavancado.com.br/)! Isso mesmo, **nada de sorteio**, descobriu, ganhou!\n\nE você deve estar se perguntando:\n\n> Uai, mas como eu faço então?\n\nBom, aí que está, só de acessar essa página **você já está participando!** Agora cabe a você, descobrir o resto das etapas =D\n\nBoa sorte a todos!\n\n## E acabou!\n\nMeus parabéns para os alunos espertos que conseguiram! E para quem não conseguiu, agora vou explicar!\n\nPrimeiro de tudo, bastava abrir o console do navegador e teria o seguinte:\n\n```js\n//// Happy Halloween\nconsole.log('🎃🎃🎃 Happy Halloween 🎃🎃🎃')\nconsole.log('Quer ganhar um curso na faixa??')\nconsole.log(\n 'Qual foi minha fantasia de Halloween do ano passado? Acerte e vá para https://${fantasia}Halloween.willianjusten.com.br\"'\n)\n```\n\nMinha fantasia do ano passado, assim como está no meu avatar, foi do `Harry Potter` ou só `Harry` mesmo. Então você podia digitar as seguintes urls:\n\n- [harryhalloween.willianjusten.com.br](https://harryhalloween.willianjusten.com.br/)\n- [harrypotterhalloween.willianjusten.com.br](https://harrypotterhalloween.willianjusten.com.br/)\n\nOu se você quisesse ser ainda mais \"zoeiro\", podia responder um `seilá` e ficaria:\n\n- [seilahalloween.willianjusten.com.br](https://seilahalloween.willianjusten.com.br/)\n\nE também funcionava!\n\nE depois disso, tinha um joguinho bem divertido onde você precisava acertar `60` ou mais Frankensteins para poder ganhar e o cupom iria aparecer no terminal novamente.\n\n## Era difícil demais acertar 60, não vale!!!\n\nAí é que tá, a ideia era que vocês hackeassem o jogo, não importa como, o objetivo era ganhar. E bom, diante disso, posso dizer que tive alunos muito muito criativos! Alguns dos truques foram:\n\n- Diminuir a velocidade de animação do CSS\n- Aumentar o tamanho dos bonecos para não ter como errar\n- Mudar o valor do `score` direto no console\n- Criar função para clickar nos elementos do Frakenstein\n- E até o mais simples, digitar a variável do cupom cifrado no terminal\n\nVocê fez diferente? Manda lá [no meu twitter](https://twitter.com/Willian_justen) o que você fez!\n\n![Ilustração de um castelo e tumbas com um Happy Halloween escrito embaixo, em um fundo roxo.](/assets/img/halloween.jpg)\n" }, { "path": "posts/https-no-github-pages-com-custom-domain.md", "content": "---\nlayout: post\ndate: 2016-06-11T19:07:32.000Z\ntitle: HTTPS no Github Pages com Custom Domain\ndescription: Aprenda a colocar a sua página do Github Pages com Custom Domain e HTTPS\nmain-class: dev\ntags:\n - github pages\n - tutorial\n - https\ncategories: null\n---\n\n## Introdução\n\n**Update:** O Github agora já dá suporte a `https` em Custom Domain, você pode ler [nesse post do Github](https://blog.github.com/2018-05-01-github-pages-custom-domains-https/), ou seja, não é mais necessário utilizar os passos que digo abaixo.\n\nFala pessoal, o post de hoje será para falar sobre uma notícia boa, uma notícia triste e uma solução para isso. Alguns de vocês devem ter visto que o [Github liberou HTTPS para o Github Pages](https://github.com/blog/2186-https-for-github-pages), essa é a notícia boa! A notícia ruim é que não aceita para quem usa Custom Domain, ou seja, um domínio próprio, assim como o meu **willianjusten.com.br**.\n\nMas não fique triste, resolvi usar meu próprio blog de cobaia para tentar uma solução, funciona muito bem e é bem fácil de fazer. Só ter paciência (eu num tenho nenhuma) de esperar o DNS propagar direitinho e seguir os passos certinhos.\n\nVou ouvindo uma playlist que tem combinado um pouco com meus últimos dias, [Life Sucks](https://open.spotify.com/playlist/37i9dQZF1DX3YSRoSdA634?si=1g34PdUdTIa-NX6TCxi3cQ).\n\n## Por que usar HTTPS? Isso num era só para ecommerce?\n\nPrimeiro de tudo, precisamos entender o que é HTTPS. O **HTTPS** é uma implementação do protocolo HTTP já conhecido, sobre uma camada adicional de segurança que utiliza o protocolo **SSL/TLS**. Essa camada adicional permite que os dados sejam transmitidos por meio de uma conexão criptografada e também é feita uma verificação de autenticidade do servidor e do cliente por meio de certificados digitais.\n\nEsse protocolo ficou mais famoso inicialmente em ecommerces, pois esse tipo de serviço é o mais importante para se ter segurança e passou a ser obrigatório para quase todos gateways de pagamento.\n\nMas você pode ter esse protocolo em qualquer site, inclusive, a [Google fez um post](https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html) falando que irá utilizar o HTTPS como um elemento para pontuação nas buscas, então vale bastante a pena.\n\n## Como fazer?\n\nBom, o primeiro de tudo é, você sabe como fazer uma página no Github Pages? Caso não saiba, dá uma olhada nesse [meu curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/), lá eu ensino a criar um blog do zero e subir no Github Pages.\n\nA segunda pergunta é, você sabe como fazer um Custom Domain? Não? Então dá uma olhada [nesse post sobre como ter domínio próprio no Github Pages](https://willianjusten.com.br/dominio-proprio-no-github-pages/). Tendo isso feito, só partir para a real tarefa do dia =)\n\n### Cadastro na Cloudflare\n\nA Cloudflare é uma CDN que promete otimizar a entrega do seu site, garantindo segurança, proteção contra DDoS e outras várias coisas. Para se cadastrar é bem fácil, só [entrar no site deles](https://www.cloudflare.com/a/sign-up).\n\nAssim que você se cadastra, deve ver uma tela parecida com a de baixo, pedindo para inserir seu domínio para ele começar a escanear.\n\n![Tela para escanear novo site](/assets/img/https/add-site.png)\n\nColoque a sua url do github pages e deixe ele escaneando, após o processo, ele ira mostrar uma tela listando o DNS do seu domínio e os apontamentos, similar a tela abaixo:\n\n![Tela do DNS](/assets/img/https/dns.png)\n\nEle também vai te passar 2 nameservers que você precisará mudar onde comprou seu domínio.\n\n![Tela do nameserver](/assets/img/https/nameservers.png)\n\nEm posse desses dois nameservers, vamos lá para o [Registro.br](https://registro.br/), que é onde comprei meu domínio. Lá na parte de DNS tem uma opção para **Alterar Servidores DNS**, que ao clicar, vai te pedir um Master e um Slave, conforme a imagem:\n\n![Tela do registrobr](/assets/img/https/registrobr.png)\n\nFeito isso, vem a parada chatinha, **ter paciência** para o DNS propagar...\n\n### Adicionando SSL via Cloudflare\n\nBom, eu sei que certificados pagos são melhores que gratuitos, mas como tudo no Github Pages é estático, já sabemos o quanto ele é seguro não é mesmo? Então não tem problema utilizar o gratuito que a Cloudflare provê não.\n\nPara isso, você precisa ir na seção **Crypto** no Cloudflare assim que já tiver tudo propagado e então em SSL defina a opção **Flexible**, conforme imagem abaixo:\n\n![Tela do SSL](/assets/img/https/crypto.png)\n\nFeito isso, já temos o nosso certificado ativado, só esperar mais um pouquinho (sim, chatão isso)... E então você já poderá acessar seu site com **https** e ver o cadeadinho verde na frente. Mas só isso não adianta, pois as pessoas vão continuar podendo acessar sem o https na frente.\n\n### Redirecionando para HTTPS\n\nPara garantir que todo mundo que acesse o site, acesse como https, devemos fazer um redirecionamento **301**, onde queremos que todos os links acessados sem https sejam jogados para o link com o protocolo certo. Para isso, é só ir na parte de **Crypto** e definir essa regra, semelhante a imagem abaixo:\n\n![Tela de Redirect](/assets/img/https/redirect.png)\n\n### Links Canônicos\n\nTá faltando pouquinho, mas não podemos deixar passar uma coisa **muito importante**, que é dizer para os buscadores que os conteúdos com e sem https são iguais, para eles não caracterizarem isso como cópia. Para isso, basta utilizarmos a seguinte tag:\n\n```html\n\n```\n\nSe você estiverem utilizando um gerador estático como o Jekyll, vocês deixam a parte da `url_da_pagina` dinâmica.\n\n### Disqus\n\nSe for um blog que vocês estão mudando e utilizarem o disqus, vocês vão precisar só fazer uma migração do `http` para o `https`, para isso é só criar um arquivo csv, de um lado a url antiga e do outro a url nova, bem fácil, aqui [nesse link](https://help.disqus.com/customer/en/portal/articles/912757-url-mapper) tem o processo.\n\n## Conclusão\n\nBom pessoal, foi um post bem simples, fiz mais até para salvar o procedimento, vai que no futuro eu precise fazer de novo né? Eu tinha ficado feliz quando vi que teria https no Github Pages, mas quando vi que não funcionaria em Custom Domain, fiquei tristinho e por isso fui ver como resolver o problema. Se você passou pelo mesmo que eu, só seguir aí, que vai funcionar beleza =)\n" }, { "path": "posts/introducao-ao-strapi-headless-cms.md", "content": "---\nlayout: post\ndate: 2020-06-17T10:56:41.000Z\ntitle: Introdução ao Strapi - Headless CMS\ndescription: O que é um Headless CMS, quais as vantagens do Strapi e como ele funciona.\nmain-class: dev\ntags:\n - strapi\n - cms\n - videos\n---\n## Introdução\n\nFaaala pessoal, o post de hoje é também um vídeo, ultimamente tenho trabalhado mais com vídeos, tentando crescer o [humilde canal no YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1), inclusive, se puder ajudar, se inscreve lá xD\n\nO post de hoje é para falar sobre o [Strapi](https://strapi.io/), que é um Headless CMS bem legal que eu vou utilizar no meu futuro curso chamado [React Avançado](https://reactavancado.com.br/). Vieram muitas dúvidas sobre o que era o Strapi e como ele funcionava, então no vídeo eu explico um pouco de tudo.\n\n## Video\n\n\n\n## O que é um Headless CMS?\n\nPrimeiro precisamos saber o que é um CMS né? Um CMS (sigla para *Content Management System* — Sistema de Gerenciamento de conteúdo), é um software responsável por gerenciar o conteúdo, ou seja, permitir a criação, edição e organização de um determinado conteúdo.\n\nEles são fundamentais, por permitirem que pessoas não técnicas, consigam adicionar o conteúdo desejado, sem precisar mexer em nenhuma linha de código. O mais famoso de todos os CMS que existem por aí, é definitivamente o [Wordpress](https://br.wordpress.org/).\n\n![Um fluxograma mostrando o cms tradicional a esquerda e o headless cms a direita. Explicações sobre no texto abaixo.](/assets/img/traditional-vs-headless-cms.png)\n\nMas como você pode ver no fluxo ali acima, em um CMS tradicional, que é o caso do Wordpress e muitos outros, você tem basicamente tudo junto (conteúdo, banco de dados e também a parte do frontend), tendo já um compilado final de tudo, que é entregue para o cliente.\n\nEnquanto no Headless CMS (tradução literal de sem cabeça), a parte do frontend não é acoplada ao CMS, mas sim uma API, que poderá alimentar diferentes tipos de código e consequentemente dão bem mais liberdade para os desenvolvedores.\n\nEu vi em um tweet uma citação bem legal:\n\n> Um CMS Tradicional é como o livro que você compra em uma livraria. Quer acessar o conteúdo? Você pega o livro e lê ele, e esta é a única forma. Um Headless CMS é como comprar um eBook. Você lê ele no Amazon Kindle, ou você usa o aplicativo do Kindle no PC, Mac, smartphone ou Tablet.\n\nOu seja, apesar do modelo de CMS tradicional ser extremamente utilizado até nos dias de hoje, essa estrutura engessada dele acaba travando certos tipos de desenvolvimento e foi por isso que o modelo de Headless CMS foi criado e está crescendo tanto.\n\n## Strapi 3.0\n\nEu conheci o Strapi quando ele estava saindo da versão 2 para a versão alfa do 3, me parecia um CMS bem promissor, mas era cheio de problemas também. Com o tempo eles foram melhorando e as últimas versões beta já estavam bem legais.\n\nRecentemente eles receberam um [investimento de 10 milhões de dólares](https://strapi.io/blog/announcing-strapi-10m-series-a-funding) e aí finalmente lançaram a [versão estável 3.0 do projeto](https://strapi.io/blog/strapi-stable-community-edition), com direito a um belo redesign da logo e do site.\n\nCom todo esse investimento e essa versão lançada, a minha opinião é que o CMS agora tem tudo para crescer e ser cada vez mais utilizado, assim como o Gatsby e o NextJS também estão crescendo muito.\n\n## Vantagens do Strapi\n\nDiferentes de outros Headless CMS como o [Contentful](https://www.contentful.com/) e o [DatoCMS](https://www.datocms.com/), onde todos os dados ficam na nuvem deles e você paga uma mensalidade por isso. O Strapi é completamente **opensource** e **self hosted**, ou seja, você controla o código e também os dados.\n\nNa minha opinião, só essas duas coisas, já o tornam muito melhor e mais confiável. Afinal de contas, eu posso estender o código conforme eu quiser e eu quem decido onde quero que meus dados sejam hospedados, assim como controlar toda a sua estrutura de dados. Isso sem pagar por nenhum serviço externo (com exceção da hospedagem é claro).\n\nA outra grande vantagem para mim é que ele funciona tanto com Rest API quanto com o GraphQL, podendo mudar de uma para a outra com apenas alguns cliques!\n\n## Como instalar e usar\n\nPara iniciar um projeto com o Strapi, basta que você digite:\n\n```bash\nnpx create-strapi-app my-project\n```\n\nEle vai te fazer algumas perguntas, como, por exemplo, qual tipo de banco de dados você vai querer usar (SQLite, MySQL, PostgreSQL ou MongoDB), o que mostra ainda mais a flexibilidade do projeto.\n\nApós instalado, a estrutura dele é bem simples, além dele possuir uma [documentação](https://strapi.io/documentation/v3.x/getting-started/quick-start.html) bem completa para te auxiliar em cada detalhe.\n\nEle trabalha com 3 estruturas de dados bem importantes que são:\n\n- `Collection Types`: a estrutura de dados base, normalmente utilizado para criarmos tabelas de produtos, usuários, jogos, enfim, o que for necessário para seu projeto.\n- `Single Types`: são usados para partes específicas e singulares da sua aplicação, pense nos dados/estrutura da sua Home ou então no footer do projeto. Não faz sentido criarmos uma tabela para um footer, que sabemos que será um só não é mesmo? xD\n- `Components`: são feitos para estruturas reutilizáveis, similar ao single types, mas que podemos agregar as collections. Pense, por exemplo, na estrutura de uma galeria, ela é igual para todos os cantos, mas pode ser usada na Home, mas também em outras páginas.\n\nVocê pode criar todos esses dados seja pelo próprio CMS ou também através [dos comandos da CLI](https://strapi.io/documentation/v3.x/cli/CLI.html). E, é claro, você também pode fazer na mão, basta seguir a estrutura que eles utilizam ou então estender e customizar a API do Strapi.\n\n## Conclusão\n\nBom pessoal, espero que tenham gostado do post/vídeo e que algumas das principais perguntas tenham sido solucionadas. E se você quiser aprender muito mais, muito em breve estarei lançando meu novo curso de [React Avançado](https://reactavancado.com.br/) onde o módulo 2 será inteiramente focado no Strapi.\n\nSe vocês tiverem quaisquer dúvidas relacionadas ao Strapi só mandar aí nos comentários. E se tiverem dúvidas em relação ao curso, eu fiz uma [live no YouTube](https://www.youtube.com/watch?v=PNu4ifGq3mU) onde respondi muitas perguntas, muitas mesmo! " }, { "path": "posts/js-com-tdd-na-pratica-e-novidades.md", "content": "---\nlayout: post\ndate: 2016-09-10T15:53:11.000Z\ntitle: Curso JS com TDD na Prática e Novidades\ndescription: Aprenda uma das melhores culturas de desenvolvimento e tenha portas\n abertas no mercado.\nmain-class: js\ntags:\n - js\n - tdd\ncategories: null\n---\n\n## Índice\n\n- [Introdução](#intro)\n- [O que é TDD e por que usar?](#tdd)\n- [TDD nas grandes empresas](#tdd-empresas)\n- [Ementa do Curso](#ementa)\n- [Perguntas Frequentes](#faq)\n- [Módulo Extra: TDD no React](#tdd-react)\n- [Minha nova aventura](#aventura)\n\n

    Introdução

    \n\nFaaaala pessoal! Eu já deveria ter feito esse post há um bom tempinho atrás, mas estive bastante embolado, mas aos pouquinhos já estou conseguindo me organizar e também estou preparando coisinhas bem legais para vocês.\n\nNão pode faltar uma boa trilha sonora nos meus posts, a de hoje será [a trilha sonora do filme Once](https://open.spotify.com/user/12146291634/playlist/1fXsKBbGCPkDM5FpdfVuo7), é um filme maravilhoso que se passa em Dublin (atual cidade que estou morando, vou falar mais na frente sobre.)\n\nEu vou separar esse post em duas partes, uma será para falar um pouco sobre o curso e a outra parte será para dar novidades sobre minha vida e as coisas que estão me acontecendo =)\n\n

    O que é TDD e por que usar?

    \n\n**TDD** é o desenvolvimento de software orientado a testes, *Test Driven Development* em inglês. Porém mais do que simplesmente testar seu código, TDD é uma filosofia, uma cultura. E foi fortemente adotado e influenciado pelo movimento ágil.\n\nDe acordo com Kent Beck, um método ágil é comparável ao ato de dirigir um carro: você deve observar a estrada e fazer correções contínuas para se manter no caminho. Neste contexto onde a agilidade é fundamental, o testador seria aquele que ajuda o motorista a chegar com segurança ao seu destino, impedindo que sejam feitas conversões incorretas durante o percurso, evitando que o motorista se perca e fazendo com que ele pare e peça instruções quando necessário.\n\nNeste ambiente, destaca-se o TDD, como sendo uma abordagem evolutiva na qual o desenvolvedor escreve o teste antes de escrever o código funcional necessário para satisfazer aquele teste.\n\nSe você quiser ler mais sobre testes, eu escrevi um [post bem completo](https://willianjusten.com.br/entendendo-testes-de-software/) sobre o assunto.\n\n

    TDD nas grandes empresas

    \n\nComo eu disse acima, o TDD é uma prática que te permite escrever um código com mais qualidade e menos passível de erros/bugs, sendo assim, muitas das empresas já aplicam essas boas práticas na maioria de seus produtos e algumas já colocam como requisito saber testes, ou seja, você não vai ficar para trás né? Olha umas vagas legais aí pedindo testes:\n\n- [Vagas no FrontendBR Github](https://github.com/frontendbr/vagas/issues)\n\n

    Ementa do Curso

    \n\n### Módulo 1\n\nSerá mais sobre o start de um projeto, falarei sobre styleguides, eslint, editorconfig, hooks e outros arquivos importantes para iniciar um projeto.\n\n### Módulo 2\n\nIremos ver/revisar as novas e importantes features do ES6, com pequenos exemplos e uma explicação bem direta e dinâmica de como podemos usar essas novas features a nosso favor.\n\n### Módulo 3\n\nSerá focado totalmente na teoria de testes, entendendo todos os conceitos, necessidades e as escolhas para bons testes.\n\n### Módulo 4\n\nIremos criar uma biblioteca bem simples, onde iremos aprender a criar o resto da estrutura de testes, como definir as bibliotecas de testes e coverage, rodar os scripts e escrever a biblioteca toda a partir de testes desde o zero.\n\nNesse módulo também veremos como colocar essa biblioteca no TravisCI e como publicá-la no NPM para que outras pessoas possam utilizar.\n\n### Módulo 5\n\nIremos aprender a fazer uma CLI em Node usando testes desde o zero. Uma CLI é bastante importante se você deseja automatizar algum processo e criar mini programas dentro do seu próprio terminal.\n\nDentro desse módulo, teremos como exercício, aplicar todas as coisas aprendidas no módulo 4 como coverage, CI e publicar no npm.\n\n### Módulo 6\n\nSerá sobre testes em React, iremos utilizar um boilerplate idealizado por mim, chamado [Lyef](https://github.com/lyef/lyef-react-component), onde iremos aprender a criar componentes isolados e desenvolvidos em cima de testes.\n\nCom o curso, a pessoa estará apta a trabalhar em 3 áreas bem distintas no desenvolvimento Javascript (bibliotecas, CLI's e aplicações) e irá poder escrever seus próprios testes durante o desenvolvimento.\n\n

    Perguntas Frequentes

    \n\n### 1) Tem como parcelar o curso?\n\nTem sim gente, dependendo da bandeira do cartão, pode ser em até 12x. Para isso é só você preencher seus dados do cartão na [página de compra](https://www.sympla.com.br/javascript-com-tdd-na-pratica__146668).\n\n### 2) Já tem a ementa?\n\nA espera acabou e temos a ementa completa, que você pode ver logo acima em [ementa](#ementa).\n\n### 3) Quando o curso começa e como vai funcionar?\n\nA partir do dia **15/10 (15 de Outubro)** eu estarei começando a disponibilizar os módulos do curso e conforme os vídeos forem sendo criados, eu irei lançando, assim você vai ter tempo de ir estudando e praticando durante o curso, é claro, com todo o meu suporte para qualquer dúvida. Teremos um **slack exclusivo** para os alunos do curso, onde além de poderem tirar dúvidas comigo, também poderão conversar entre e si e fazer networking! Os módulos lançados estarão disponíveis para sempre e vocês poderão fazer no tempo que desejarem.\n\n### 4) Vai ter certificado para quem concluir o curso? Preciso para usar na minha faculdade.\n\nSim, todos os alunos que completarem 100% do curso irão receber um certificado de 40h que poderá ser utilizado para contar como horas dentro da faculdade.\n\n### 5) O que eu preciso saber para fazer o curso?\n\nVocê precisa de um conhecimento básico de Javascript, como conhecer variáveis, funções, controles de fluxo, etc. Tudo que será feito no curso, será do zero, então você não vai se perder com \"passes mágicos\".\n\n### 6) O que você vai utilizar no curso? E vai ser só sobre testes?\n\nEu irei utilizar as principais ferramentas de testes para JS do mercado. Como **Chai**, **Mocha**, **Sinon** e **Istanbul**. Mas não ficarei só com a parte de testes, irei também ensinar como se iniciar uma boa estrutura para um projeto Javascript, assim como as melhores práticas. Tudo isso de forma bem fácil e principalmente, prática. O objetivo é profissionalizar a galera para trabalhar em empresas como a **Globo.com**, **HUGE**, **Queremos**, entre tantas outras que tive a oportunidade de trabalhar e saber como funcionam.\n\n### 7) Quando o curso começa e quando termina?\n\nO curso começa agora e nunca termina! Você quem irá decidir quando começar e quando terminar. Aproveite seu tempo livre e aquele tempo que você usava para ficar navegando no facebook.\n\n### 9) Como funciona o curso?\n\nSão vários módulos divididos em pequenos vídeos, cada módulo tem o intuito de ensinar algum conceito básico e importante sobre Boas Práticas e Testes. Após todos os módulos, você estará apto a criar aplicações javascript modernas e com qualidade. Se quiser, dá uma olhada nos [cursos disponíveis](https://willianjusten.com.br/cursos/), tem cursos gratuitos lá para você poder ver o que acha.\n\n---\n\n

    Módulo 1: Boas Práticas

    \n\nNesse primeiro módulo, eu irei ensinar as melhores práticas para se iniciar um projeto em javascript, seja uma biblioteca, uma CLI ou até um sistema inteiro. Iremos aprender sobre ferramentas para padronizar nosso código como o [eslint](http://eslint.org/) e [Editorconfig](http://editorconfig.org/) e Styleguides que permitem ter essa padronização.\n\n

    Módulo Extra: TDD no React

    \n\nIsso mesmo galera, como eu sou apaixonado por React e essa é uma tecnologia que tá crescendo bastante, vamos ter um módulo onde iremos aprender a escrever componentes React com Testes, olha que lindo <3\n\nPara isso, irei usar uma estrutura já consolidada para componentes, que é a minha [lyef react component](https://github.com/lyef/lyef-react-component), dentro dessa estrutura, já temos as ferramentas que vamos utilizar durante todo o curso, então será bem fácil para se adaptar =D\n\n

    Minha nova aventura

    \n\nComo falei lá no início, eu me mudei para Dublin nessa semana! Para quem me conhece ou lê meus posts, sabe que eu fiz um post chamado [Mudando sua vida através de projetos paralelos](https://willianjusten.com.br/mudando-sua-vida-atraves-de-projetos-paralelos/) e nesse post eu falava sobre a minha vontade de fazer uma aventura, largar empresa e viajar por esse mundão. Eu me organizei durante um tempinho, lancei cursos, peguei dinheiro das empresas que trabalhei e vim para a Europa realizar meu sonho =D\n\n

    It's true, those beautiful places really exist outside of the movies!

    Uma foto publicada por Willian Justen de Vasconcellos (@will_justen) em

    \n\nCheguei aqui na Irlanda na quarta (07/09) e já fiz taaaanta coisa, que nossa, hoje tá sendo o único dia que estou conseguindo sentar e digitar, mas tá valendo muito a experiência e, em breve, pretendo escrever mais sobre isso, até mesmo para dar dicas do que as pessoas precisam fazer para poder fazer viagens assim. **Não confie em posts dizendo \"largue tudo para viajar\"**, as coisas não são assim.\n\nEntão né, como já disse no texto acima, eu estou aqui por minha conta, não vim por empresa nenhuma. Muita gente faz até cara estranha quando digo isso. E através da venda dos meus cursos que acabo conseguindo gerar uma renda para poder morar aqui.\n\nE se você se interessou, as vendas estão abertas no [link](https://www.udemy.com/js-com-tdd-na-pratica/?couponCode=LANCAMENTOTDD).\n" }, { "path": "posts/juntando-arrays-e-objetos-com-spread-syntax-no-javascript.md", "content": "---\nlayout: post\ndate: 2021-02-21T07:12:03.000Z\ntitle: Juntando arrays e objetos com Spread syntax no JavaScript\ndescription: Evite usar bibliotecas externas para coisas simples como fazer\n merge de objetos e arrays.\nmain-class: js\ntags:\n - dicas\ncategories:\n - Dicas rápidas\n---\n## Introdução\n\nFala pessoal, eu recentemente comecei uma [série de vídeos com dicas bem rápidas](https://www.youtube.com/watch?v=1dNNL95BsJE&list=PLlAbYrWSYTiOviR_zL01FMa-kWEMDIjeO) lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)\n\n## Vídeo\n\n\n\n## Utilizando o poder do ...Spread\n\nAntigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o [Lodash](https://lodash.com/docs/4.17.15#merge). Mas agora graças ao [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.\n\nVamos ver abaixo alguns exemplos na prática:\n\n```javascript\nconst arrayOne = [1, 2, 3, 4]\nconst arrayTwo = [5, 6, 7, 8]\n\n// juntando os arrays\nconst newArray = [...arrayOne, ...arrayTwo] // [1, 2, 3, 4, 5, 6, 7, 8]\n\n// funciona com objetos também!\nconst props = { id: '1', name: 'Willian' }\nconst moreProps = { age: 30, height: 178 }\n\nconst newObj = { ...props, ...moreProps } // { id: '1', name: 'Willian', age: 30, height: 178 }\n\n// E você também consegue sobrepôr valores\nconst defaultProps = { id: '1', name: 'Willian' }\nconst newProps = { id: '3', age: 30 }\n\n// Chaves iguais são sobreescritas pelo último objeto passado\nconst propsObj = { ...defaultProps, ...newProps } // { id: '3', name: 'Willian', age: 30 }\n\n```\n\n## Conclusão\n\nE aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no [canal do YouTube](https://www.youtube.com/WillianJustenCursos/) para essa e mais outras dicas.\n" }, { "path": "posts/lancamento-curso-de-git-e-github-na-vida-real.md", "content": "---\nlayout: post\ndate: 2018-02-05T01:23:11.000Z\ntitle: Lançamento Curso de Git e Github na Vida Real\ndescription: Um curso direto ao ponto, aprenda workflows e comandos realmente\n úteis do dia-a-dia no Git.\nmain-class: misc\ntags:\n - dev\n - cursos\n - git\n - github\ncategories: null\n---\n\n## Lançamento do Curso\n\nFala pessoal, estou aqui finalmente para anunciar o lançamento do meu mais novo curso! Que é o [Git e Github na Vida Real](https://www.youtube.com/playlist?list=PLlAbYrWSYTiNqugqFFWWsgONJsmc3eMpg). Que está **totalmente gratuito** no YouTube a partir de agora!\n\n## Por que de lançar esse curso?\n\nComo vocês sabem, eu tenho um [Curso de Git e Github para Iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/), onde eu ensino os comandos básicos e como funciona o Git. Muitas pessoas deram seus primeiros passos de Git com o meu curso e até hoje recebo milhares de agradecimentos por isso. Mas como o curso diz, ele é para iniciantes, então eu ensino poucos detalhes a fundo e muita gente acabou o curso e ficou com fome de mais detalhes. Pensando nisso, eu resolvi criar esse novo curso, onde eu falo sobre como usar uma ferramenta visual a seu favor para as coisas cotidianas, além de ensinar comandos realmente úteis no dia-a-dia e alguns fluxos de trabalho comuns em várias empresas do mundo.\n\n## Funcionamento do Curso\n\nSeguindo os padrões dos meus cursos. **Chega de vídeos longos, cansativos e cheios de blablabla! Aqui você vai aprender na prática e de forma rápida, sem enrolações!**\n\nEu fiz [um post](https://willianjusten.com.br/chamada-curso-git-e-github-na-vida-real/) explicando sobre como funciona o curso, mas não custa repetir né? xD\n\nO curso é composto de **4 módulos**, contendo **45 aulas** no total com mais de **4 horas** de conteúdo! Vamos lá:\n\n- **Módulo 1:** Utilizando o Visual Studio Code para os comandos comuns do Git, plugins úteis e mais.\n- **Módulo 2:** Soluções e comandos úteis para o cotidiano, esse módulo tem muita coisa legal e interessante de problemas que podem ocorrer com qualquer um. Quem nunca subiu merda no master e queria reverter?\n- **Módulo 3:** Trabalhando com o Github, veremos mais a fundo sobre Issues, Pull Requests, Code Review, etc.\n- **Módulo 4:** Workflows do Git, como funcionam diferentes fluxos de trabalho, como o Git Flow e o Feature Branch.\n\nTodo o curso nós estaremos editando um template e no final iremos colocar no ar! Veja [aqui](https://willianjusten.com.br/photo-portfolio/) o projeto no ar!\n\n> Poxa, mas só isso? E aquele \"assunto maneiro lá\", vai falar não?\n\nBoa pergunta! Nesse curso eu tenho intenção de fazer atualizações periódicas, seja adicionando um vídeo sobre um comando legal, seja um módulo de algum assunto muito pedido. Então se você quiser algo a mais, manda mensagem para mim! Quem sabe você não vê esse conteúdo antes do que imagina?\n" }, { "path": "posts/links-da-semana-1.md", "content": "---\nlayout: post\ndate: 2015-02-01T20:37:40.000Z\ntitle: \"Links da semana #1\"\ndescription: \"Links da semana #1 - Links sobre coisas interessantes que fui\n vendo pela semana.\"\nmain-class: misc\ntags:\n - linksdasemana\ncategories:\n - Links da Semana\n---\n\nEu planejava fazer esse post para sexta-feira, mas devido eu estar vomitando até minha alma, ficou um pouquinho complicado de fazer...\n\nEu tenho o hábito de ler muito durante a semana, tenho muitos blogs no meu feedly, sem contar meu feed do facebook e twitter que é praticamente composto só de programadores acho que preciso me tratar...\n\nE tudo que eu leio e que acho importante, eu separo nos meus favoritos no Chrome, evernote, keep e sei lá mais o quê, são tantos lugares O_O\n\nDesde quando criei a [awesome-svg](https://github.com/willianjusten/awesome-svg), notei que muitos programadores gostam de dicas de links para estudar e assim como eu, acham que conhecimento nunca é demais =)\n\nSendo assim e sem mais delongas, irei dedicar um dia para compartilhar os links mais interessantes que li durante a semana e utilizarei a hashtag **#linksdasemana**.\n\n### CSS\n\n* [Fun with line-height!](http://css-tricks.com/fun-line-height/) - fazendo coisas criativas utilizando o line-height\n* [Css you can get excited about in 2015](http://www.webdesignerdepot.com/2015/01/css-you-can-get-excited-about-in-2015/) - algumas features que O CSS está ganhando mais suporte e vem com tudo esse ano.\n* [Center and crop images with a single line of CSS](https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87) - quem não gostaria de cortar e centralizar imagens com 1 linha só.\n* [Atomic Design Book](http://atomicdesign.bradfrost.com/) - está para sair o livro sobre Atomic Design e aqui já podemos ver um pouco.\n* [Tour of a Performant and Responsive CSS Only Site](http://css-tricks.com/tour-performant-responsive-css-site/) - alguns detalhes utilizados para melhorar a performance em um site.\n* [Compositing And Blending In CSS](http://sarasoueidan.com/blog/compositing-and-blending-in-css/) - como utilizar a propriedade de blending no Css por Sara linda Soueidan.\n* [Menu to Cross Icon](http://lukyvj.github.io/menu-to-cross-icon/) - um experimento bem bacana do menu hambúrguer.\n* [Gooey Menu](http://codepen.io/lbebber/pen/LELBEo) - um experimento com filtros de SVG e CSS feito pelo Lucas Bebber, incrível e nada mais do que isso.\n\n\n### JS\n\n* [WallabyJS](http://wallabyjs.com/) - um test runner de JS bastante interessante, que tem como principal destaque rodar constantemente os testes e analisar code coverage e outras coisas.\n* [minBlock.JS](http://argunner.github.io/minBlock.js/) - uma implementação em JS/Canvas para criar os avatares randômicos como o github faz.\n* [Sane Stack](http://sanestack.com/) - um boilerplate para iniciar projetos rapidamente em Sails e Ember.\n* [React.js Conf 2015 - Data fetching for React applications at Facebook](https://www.youtube.com/watch?v=9sc8Pyc51uU) - um pouco sobre o tratamento de dados utilizando React.\n* [Replace coffeescript with ES6](http://robots.thoughtbot.com/replace-coffeescript-with-es6) - um artigo mostrando como substituir o Coffeescript pelo ES6.\n- [React in 7 Minutes](https://egghead.io/lessons/react-react-in-7-minutes) - egghead, mesmo criador de vários vídeos de Angular resolve falar um pouco de React.\n\n### Etc\n* [Formatting Academic Publications in HTML & CSS](http://thomaspark.me/2015/01/pubcss-formatting-academic-publications-in-html-css/) - para quem faz trabalhos acadêmicos é algo bem interessante.\n* [SVG OMG](https://jakearchibald.github.io/svgomg/) - uma GUI para o SVGO online <3\n* [Hipster Logo Generator](http://www.hipsterlogogenerator.com/) - um gerador de logos hipster, bem divertido para brincar.\n* [Pokemon Branding](http://pictogram.agency/pokemonbranding/) - uns conceitos de design interessantes utilizando pokemons <3\n* [Avocode](https://avocode.com/) - já fazia um tempinho que estava para sair, um possível substituto para o Photoshop.\n" }, { "path": "posts/links-da-semana-2.md", "content": "---\nlayout: post\ndate: 2015-02-08T15:49:52.000Z\ntitle: \"Links da semana #2\"\ndescription: \"Links da semana #2 - Links sobre coisas interessantes que fui\n vendo pela semana.\"\nmain-class: misc\ntags:\n - linksdasemana\ncategories:\n - Links da Semana\n---\n\nSem mais delongas, aqui vão os links mais legais que vi na semana.\n\n## CSS\n\n* [Progressive Enhancement and Data Visualizations](http://css-tricks.com/progressive-enhancement-data-visualizations/) - uma abordagem muito legal para construção de um gráfico pensando no conceito de Progressive Enhancement.\n* [CSS Reference by Codrops](http://tympanus.net/codrops/2015/02/03/introducing-codrops-css-reference/) - um compilado de todas as informações de CSS feito pela galera do Codrops, simplesmente lindo.\n* [MProgress](http://lightningtgc.github.io/MProgress.js/) - um barra de progresso feita nos moldes do Material Design.\n* [Playing around with CSS text-shadow](https://ashleynolan.co.uk/blog/playing-around-with-css-text-shadow) - um artigo brincando com as propriedades de text-shadow.\n* [Gooey Effect](http://css-tricks.com/gooey-effect/) - um tutorial do nosso amigo brasileiro Lucas Bebber falando sobre como fez o efeito com filtros de SVG.\n* [Style Guide Generator](http://alistapart.com/blog/post/style-guide-generator-roundup) - um artigo mostrando alguns geradores de Style Guide.\n* [Vector Graphics in Sass](http://www.sitepoint.com/vector-graphics-sass/) - como criar vetores utilizando só Sass, abordagem louca e legal.\n* [44 Responsive Web Design Resources: The Ultimate List](http://www.usertesting.com/blog/2015/02/03/responsive-web-design-resources/) - uma lista de informações e conteúdo sobre design responsivo\n\n\n## JS\n\n* [An opinionated guide to React.js best practices and conventions](http://web-design-weekly.com/2015/01/29/opinionated-guide-react-js-best-practices-conventions/) - um guia sobre algumas boas práticas e convenções no React.\n* [Hound](https://github.com/etsy/Hound) - um search muito interessante usando React no Front e Go no Backend.\n* [Destructuring and Recursion in ES-6](http://raganwald.com/2015/02/02/destructuring.html) - um pouquinho sobre os recursos de recursão no ES6.\n* [Cation](https://github.com/sergiolepore/Cation) - um Dependency Injection Container para NodeJS e IOJS muito interessante.\n* [Syphon](https://github.com/scttnlsn/syphon) - uma implementação da arquitetura do Flux em aplicações React inspirado no ClojureScript e OM.\n* [Redefining Lazy Loading With Lazy Load XT](http://www.smashingmagazine.com/2015/02/03/redefining-lazy-loading-with-lazy-load-xt/) - um artigo bem interessante falando sobre porque, quando e como implementar um lazy loading no sistema.\n* [First steps in setting up travis ci to your javascript project](http://orizens.com/wp/topics/first-steps-in-setting-up-travis-ci-to-your-javascript-project/) - um artigo ensinando como implementar o Travis CI em projetos JS, vale a leitura.\n* [Flux Comparison](https://github.com/voronianski/flux-comparison) - alguns comparativos utilizando o Flux.\n* [New Course: Essential Tools for JavaScript Developers](http://code.tutsplus.com/articles/new-course-essential-tools-for-javascript-developers--cms-23273) - um curso sobre sobre algumas ferramentas essenciais para desenvolvedores Javascript.\n* [Tagtree Courses](http://tagtree.io/library) - um curso de ES6 pela Tagtree.\n\n\n## Etc\n\n* [Google Ventures’ 6-step design process: How we revamped our entire product in less than a week](http://thenextweb.com/dd/2014/09/04/google-ventures-design-process/) - um post bastante legal falando sobre o redesign de um produto com agilidade e qualidade.\n* [A year of designing at Facebook](https://medium.com/@gem_ray/a-year-of-designing-at-facebook-74ba9c292888) - um relato de um designer falando sobre seu tempo no Facebook.\n* [Tumblr Analysis](https://github.com/FGRibreau/tumblr-analysis) - um analisador de informações de posts do Tumblr feito em NodeJS.\n* [Product Design Unification Case Study: Mobile Web Framework](http://www.smashingmagazine.com/2015/02/04/product-design-unification-case-study-mobile-web-framework/) - Um estudo de caso sobre desenvolvimento mobile.\n* [Gogs](http://gogs.io/) - um sistema de Git escrito em Go. **lindão**.\n" }, { "path": "posts/links-da-semana-3.md", "content": "---\nlayout: post\ndate: 2015-03-14T20:22:20.000Z\ntitle: \"Links da semana #3\"\ndescription: \"Links da semana #3 - Links sobre coisas interessantes que fui\n vendo pela semana.\"\nmain-class: misc\ntags:\n - linksdasemana\ncategories:\n - Links da Semana\n---\n\nFiquei um tempo sem fazer esse tipo de post, mas pretendo retorná-lo, porque links interessantes nunca são demais =)\n\nAntes de liberar os vários links, vou falar de um em especial que saiu essa semana que foi o [Infográfico de comemoração das 100 Weeklies enviadas pela BrazilJS Foundation](http://cyberglot.me/cem/) feito pela [Ju Goncalves](http://jugoncalv.es/) e com uma ajudinha minha =)\n\n## CSS\n\n* [Freebie: “Forkio” One Page Website Template - Codrops](http://tympanus.net/codrops/2015/03/12/freebie-forkio-one-page-website-template/)\n* [Codepen Challenge #1](http://webdesign.tutsplus.com/articles/codepen-challenge-1-results--cms-23585)\n* [Creative Gooey Effects](http://tympanus.net/codrops/2015/03/10/creative-gooey-effects) - Lucas Bebber não é desse mundo, manda muito =)\n* [Flickity - touch and responsible gallery](http://flickity.metafizzy.co/)\n* [Practice your skills by getting random suggestions or creative inspiration!](http://tevko.github.io/practice/index.html)\n* [How to get started with css shapes](https://webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/)\n* [Can css be too modular?](https://csswizardry.com/2015/03/can-css-be-too-modular/)\n* [Automating Style Guide-Driven Development](http://www.smashingmagazine.com/2015/03/05/automating-style-guide-driven-development/)\n\n## JS\n\n* [Arda: Meta-Flux framework for real world](https://github.com/mizchi/arda)\n* [A extremely (but powerful) simple logging system for NodeJS and browser](https://github.com/Kikobeats/acho)\n* [React D3 Components](https://github.com/codesuki/react-d3-components)\n* [React JS Tutorial and Guide to the Gotchas](https://zapier.com/engineering/react-js-tutorial-guide-gotchas/)\n* [Radium - set of tools to manage inline styles on React elements.](http://projects.formidablelabs.com/radium/)\n* [Build User Interfaces with React](http://www.crashlytics.com/blog/building-user-interfaces-with-react/)\n* [Measuring JavaScript Performance with console.time](http://adripofjavascript.com/blog/drips/measuring-javascript-performance-with-console-time.html)\n* [React Isomorphic Starterkit](https://github.com/RickWong/react-isomorphic-starterkit)\n\n## Design\n\n* [5 Golden Rules For Mobile Email Design](http://www.sitepoint.com/golden-rules-mobile-email-design/)\n* [How Cards Are Quietly Transforming The Web](http://techcrunch.com/2015/02/27/cards-transforming-web/)\n* [How to prototype websites on paper](http://www.creativebloq.com/ux/how-prototype-websites-paper-31514246)\n* [Defringe - a curated online gallery that filters creative content on the web](http://defringe.com/)\n* [Lumi - Build your Brand](http://www.lumi.com/)\n* [Arstropad - Mac & Ipad Draw Together](http://astropad.com/)\n\n\n## Etc\n\n* [What’s the difference between Unit Testing, TDD and BDD?](http://codeutopia.net/blog/2015/03/01/unit-testing-tdd-and-bdd/)\n* [9 Tips improving your time management](http://www.creativebloq.com/career/9-tips-improving-your-time-management-31514419)\n* [10 steps to freelance success](http://www.creativebloq.com/career/10-steps-freelance-success-31514415)\n* [Start.me - Personalize your start page](https://start.me)\n* [I built a chrome extension to control my online time wastage and it worked!](https://medium.com/@nashvail/i-built-a-chrome-extension-to-control-my-online-time-wastage-and-it-worked-bd1168e03b01) - Ideia genial poder medir o tempo gasto nas coisas!\n* [Tinychart - Create beautiful graphics with JSON or table](http://tinychart.co/)\n" }, { "path": "posts/links-da-semana-4.md", "content": "---\nlayout: post\ndate: 2015-10-11T22:19:17.000Z\ntitle: \"Links da semana #4\"\ndescription: \"Links da semana #4 - Links sobre coisas interessantes que fui\n vendo pela semana.\"\nmain-class: misc\ntags:\n - linksdasemana\n - dev\ncategories:\n - Links da Semana\n---\n\n## Introdução\n\nFala pessoal, resolvi voltar a postar os links que mais curti durante a semana. Vale lembrar que a ideia aqui, não é de mostrar as últimas novidades e sim, links que eu precisei ou li durante a semana. Assim eu compartilho um pouco do que tenho visto/estudado na semana. Sem mais delongas, aqui vão os links e se você achou algum muito legal na semana, comenta aí embaixo, vai ser bem legal saber.\n\n## JavaScript\n\n- [Lançamento no React 0.14](http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html)\n- [Relax - um CMS usando React e Node](https://github.com/relax/relax)\n- [TungstenJS - modular framework for creating web UIs with high-performance rendering on both server and client](https://github.com/wayfair/tungstenjs)\n- [Promises in JavaScript Unit Tests: the Definitive Guide](http://www.sitepoint.com/promises-in-javascript-unit-tests-the-definitive-guide/)\n- [Full-Stack Redux Tutorial](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html)\n- [10 Interview Questions Every JavaScript Developer Should Know](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95)\n- [Novo site para o Medium Editor](https://yabwe.github.io/medium-editor/)\n- [#NodeJS : A quick optimization advice](https://medium.com/@c2c/nodejs-a-quick-optimization-advice-7353b820c92e)\n- [Nanoflux is a very lightweight agnostic full Flux implementation.](https://www.npmjs.com/package/nanoflux)\n- [Lazy, composable, and modular JavaScript](https://codewords.recurse.com/issues/four/lazy-composable-and-modular-javascript)\n- [Lazyload](http://verlok.github.io/lazyload/)\n- [From Rest to GraphQL](https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b)\n- [Checklist for your new Open Source JavaScript Project](https://ericdouglas.github.io/2015/09/27/checklist-for-your-new-open-source-javascript-project/)\n\n## Python\n\n- [Python Pedia - Python Programming Resources.](https://pythonpedia.com/)\n- [Testing in Django](http://masteringdjango.com/testing-in-django/)\n- [Scaling Django to 8 Billion Page Views](http://blog.disqus.com/post/62187806135/scaling-django-to-8-billion-page-views)\n\n## CSS\n\n- [Why You Need to Refactor Your CSS](https://seesparkbox.com/foundry/why_you_need_to_refactor_your_css)\n- [CSS Modules](https://glenmaddern.com/articles/css-modules)\n\n## Workflow\n\n- [5 Questions Every Unit Test Must Answer](https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d)\n- [Como fazer listas ajudou na minha produtividade](https://medium.com/brasil/como-fazer-listas-ajudou-na-minha-produtividade-83ab9bbfc6d5)\n\n## Open Source\n\n- [Open Source Society University](https://github.com/open-source-society/computer-science)\n- [N1 - Extensible opensource Mail Client](https://nylas.com/)\n- [Clipboard JS](https://clipboardjs.com/)\n- [Accelerated Mobile Pages Project](https://www.ampproject.org/)\n\n## Variados\n\n- [Software needs to be better — FunFunFunction #1](https://medium.com/humans-create-software/software-needs-to-be-better-funfunfunction-1-411942de9768)\n- [Scale 2015](https://code.facebook.com/posts/496171527213781/inside-scale-2015/)\n- [Goodbye, Native Mobile Apps](https://atavistinsider.atavist.com/goodbye-native-mobile-apps/)\n- [Inside the Dev Team Death Spiral](https://medium.com/javascript-scene/inside-the-dev-team-death-spiral-6a7ea255467b)\n- [Introducing the New Motion UI by Zurb](http://zurb.com/article/1409/introducing-the-new-motion-ui)\n- [MorphSVGPlugin](http://greensock.com/morphSVG)\n" }, { "path": "posts/links-da-semana-5.md", "content": "---\nlayout: post\ndate: 2015-10-18T21:19:17.000Z\ntitle: \"Links da semana #5\"\ndescription: \"Links da semana #5 - Links sobre coisas interessantes que fui\n vendo pela semana.\"\nmain-class: misc\ntags:\n - dev\n - js\n - css\ncategories:\n - Links da Semana\n---\n\n## Introdução\n\nTentando seguir o padrão de lançar todo Domingo os links que li pela semana, aqui vão os links que eu li nessa semana. Eu ouvi várias coisas durante a semana enquanto mostrava essa lista que foram:\n\n- [Supercombo](https://open.spotify.com/artist/73HkjgziMO6I83vFOS8mo1) - banda brasileira de indie, calma e bem legal.\n- [Anavitória](https://open.spotify.com/artist/1sPg5EHuQXTMElpZ4iUgXe) - dupla brasileira com voz bem fofinha <3\n- [Anathema](https://open.spotify.com/artist/0ZXKT0FCsLWkSLCjoBJgBX) - banda natural de liverpool, tem duas músicas incríveis que adoro que são [Untouchable Pt.1](https://open.spotify.com/track/7uMlAgdCGMnxaRfRlZZWDs) e [Untouchable Pt.2](https://open.spotify.com/track/3w3hBA9IiyioNpvcxZSJQL).\n- [Amarante](https://open.spotify.com/artist/3yR3HP47svRNUefemTZAAc) - conheci essa banda nesse [vídeo](https://www.youtube.com/watch?v=eRvk5UQY1Js&spfreload=10) e desde então sou apaixonado.\n\nBom, a listinha de músicas dessa semana foi de bastante calmaria, mas não deixei de pegar vários links novos, que seguem:\n\n## Javascript\n\n- [ES6 Interactive Guide](http://projects.formidablelabs.com/es6-interactive-guide/#/)\n- [The Refactoring Tales](http://javascriptplayground.com/the-refactoring-tales/refactoring-tales.html)\n- [Sri (Scala React interface) - Build truly native cross platform](https://github.com/chandu0101/sri)\n- [The Future of Web Development - React, Falcor, and ES6](http://engineering.widen.com/blog/future-of-the-web-react-falcor/)\n- [How To Write a Pacman Game in JavaScript](http://www.masswerk.at/JavaPac/pacman-howto.html)\n- [Integrating React with gulp](https://jonsuh.com/blog/integrating-react-with-gulp/)\n- [A cartoon guide to Flux](https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207)\n- [ES6 in Depth](https://ponyfoo.com/articles/tagged/es6-in-depth)\n- [A Responsive Material Design App With Polymer Starter Kit](http://www.smashingmagazine.com/2015/10/responsive-material-design-app-with-polymer-starter-kit/)\n- [Screamer.JS - create customisable Web Notifications](https://github.com/willianjusten/screamer-js/)\n- [React+Flux can do in just 137 lines what jQuery can do in 10](http://swizec.com/blog/reactflux-can-do-in-just-137-lines-what-jquery-can-do-in-10/swizec/6740)\n\n## CSS / SVG\n\n- [Understanding and Using rem Units in CSS](http://www.sitepoint.com/understanding-and-using-rem-units-in-css/)\n- [Using Web Fonts the Best Way (in 2015).](https://helloanselm.com/2015/using-webfonts-in-2015/)\n- [CodePen's CSS](http://codepen.io/chriscoyier/post/codepens-css)\n- [Um lego feito em CSS puro - LOUCO](http://codepen.io/rachel_web/pen/rOLRvM/)\n- [CodePen Challenge #5: Spooky Halloween SVG Characters](http://codepen.io/collection/nJGmgJ/)\n- [Effect Ideas for Image Grids](http://tympanus.net/codrops/2015/10/15/effect-ideas-for-image-grids/)\n\n## Opensource\n\n- [Exposé - A simple static site generator for photoessays](https://github.com/Jack000/Expose)\n- [The official Javascript client for Cosmic JS](https://github.com/cosmicjs/cosmicjs-node)\n\n## Design\n\n- [25 Luxury Website Designs with Elegant Layouts](http://line25.com/inspiration/luxury-website-designs)\n- [What’s New for Designers, October 2015](https://webdesignerdepot.com/2015/10/whats-new-for-designers-october-2015/)\n- [A collection of free resources made by designers at Facebook.](https://facebook.design)\n- [Every website looks the same, and that’s ok](https://medium.com/@WebdesignerDepot/every-website-looks-the-same-and-that-s-ok-36c32bd8a1dd)\n- [Design to Code with Atomic Design Principles and Sketch](https://medium.com/re-write/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch-8b0fe7d05a37)\n- [Um site simplesmente foda](http://keepearthquakesweird.com/)\n\n## Variados\n\n- [What's the Fuss with Google's Accelerated Mobile Pages (AMP)?](https://auth0.com/blog/2015/10/12/whats-the-fuss-with-googles-accelerated-mobile-pages-amp/)\n- [Performance Budget - Calcule o que gastar em seu site](http://www.performancebudget.io/)\n- [Writing Developer Job Postings](http://www.tokyodev.com/2015/08/28/writing-developer-job-posting/)\n- [Teste seu site no Http2](http://http2.loadimpact.com/)\n- [Hybrid Mobile Apps With Couchbase And Ionic Framework](http://blog.couchbase.com/hybrid-mobile-apps-with-couchbase-and-ionic-framework)\n- [O lado ruim de trabalhar no Google em 23 frases](http://exame.abril.com.br/carreira/noticias/o-lado-ruim-de-trabalhar-no-google-em-23-frases/lista)\n- [Github Classroom](https://classroom.github.com/)\n- [A source control backed CMS for developers working with non-developers](http://cloudcannon.com/)\n- [Detox - Replace your Facebook feed with something positively distracting.](http://usedetox.com/)\n- [Front-end Developer Handbook](https://frontendmasters.gitbooks.io/front-end-handbook/content/index.html)\n" }, { "path": "posts/links-da-semana-6.md", "content": "---\nlayout: post\ndate: 2015-10-25T21:19:17.000Z\ntitle: \"Links da semana #6\"\ndescription: \"Links da semana #6 - Links sobre coisas interessantes que fui\n vendo pela semana.\"\nmain-class: misc\ntags:\n - dev\n - js\n - css\ncategories:\n - Links da Semana\n---\n\n## Introdução\n\nEssa semana foi um pouco apertada para mim e ainda fiquei doente o final de semana inteiro... Mas como eu já tinha começado a montar a lista, vou postar as coisas que eu vi. E para não ficar sem música, essa semana fiquei ouvindo uma banda brasileira bem legal chamada [Apanhador Só](https://open.spotify.com/artist/3DtHAw4MrjXhVFotN5n8fZ).\n\n## Javascript\n\n- [Choosing a JavaScript Build Tool – Babel, Browserify, Webpack, Grunt and Gulp](http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/)\n- [PlainJS - Vanilla JavaScript for building powerful web applications](https://plainjs.com/)\n- [Web.br 2015 - Evolução e futuro do uso de paradigmas no JavaScript](https://www.youtube.com/watch?v=uEglleenUFk)\n- [The struggles of publishing a JavaScript library](http://nolanlawson.com/2015/10/19/the-struggles-of-publishing-a-javascript-library/)\n- [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6)\n- [Tips on Setting up Karma Testing with Webpack](http://mike-ward.net/2015/09/07/tips-on-setting-up-karma-testing-with-webpack/)\n\n## Design / Inspiracional\n\n- [Landing Folio - Várias Landing Pages para inspiração](https://www.landingfolio.com/)\n- [Lightning Design System - Um design system feito pela Salesforce](http://www.lightningdesignsystem.com/)\n- [Object Oriented UX](http://alistapart.com/article/object-oriented-ux)\n\n## CSS / SVG\n\n- [Project Cards Template](https://codyhouse.co/gem/project-cards-template/)\n- [How To Work With SVG Text](http://vanseodesign.com/web-design/how-to-work-with-svg-text/)\n- [CSSgram - library for recreating Instagram filters with CSS filters and blend modes.](https://una.im/CSSgram/)\n\n## Variados\n\n- [Jekyll Date Formatting Examples](http://alanwsmith.com/jekyll-liquid-date-formatting-examples)\n- [Chrome Devtools Tips & Tricks](http://mo.github.io/2015/10/19/chrome-devtools.html)\n- [Node.js for the Real World](http://www.technology-ebay.de/the-teams/mobile-de/blog/nodejs-real-world)\n- [Get Started Building Your Blog With Parse.js: Delete, Logout, and Single Blog View](http://code.tutsplus.com/tutorials/get-started-building-your-blog-with-parsejs-delete-logout-and-single-blog-view--cms-24196)\n- [Awesome & Marvelous Amas (Ask me Anything)](https://github.com/sindresorhus/amas)\n- [Livro Designing for Performance - LEIAM](http://designingforperformance.com/)\n- [Web performance today](http://www.zeldman.com/2015/10/21/web-performance-today/)\n- [Resume Builder - create your resumes easily](http://resumator.qwilr.com/)\n" }, { "path": "posts/lista-de-dicas-de-seo-para-devs.md", "content": "---\nlayout: post\ndate: 2019-08-20T14:36:57.000Z\ntitle: Lista de dicas de SEO para Devs\ndescription: Algumas dicas que podem ajudar o seu site se destacar nas pesquisas do Google.\nmain-class: dev\ntags:\n - seo\n - frontend\n---\n## Introdução\n\nFala pessoal, o post de hoje, é na realidade uma [tradução/adaptação de um post](https://dev.to/pagely/seo-cheat-sheet-for-devs-5h1g). Eu já escrevi [um post sobre SEO](https://willianjusten.com.br/como-melhorar-meu-seo/) antes, mas como são informações diferentes, achei válido de compartilhar aqui.\n\nEnquanto escrevo, vou ouvindo um dos melhores lives que já ouvi na vida, que é o album [Guide me back home (Live)](https://open.spotify.com/album/4dfzMiWAbm39kNAbvgptDr?si=C14YEC2VS4-6pecYfOZb3g) do City and Colour. As músicas são lindas demais e a interação dele com o público deixa tudo ainda mais legal.\n\nMas bom, vamos logo ao post!\n\n## Preparando para lançar ou migração\n\n1. Coloque o seu domínio para renovar automaticamente. Pode parecer óbvio, mas muita gente já perdeu o domínio porque esqueceu de renovar.\n2. Instale o [Google Analytics](https://analytics.google.com/analytics/web/) ou outro [similar](https://www.searchenginejournal.com/9-google-analytics-alternatives/92071/).\n3. Certifique-se de seguir todas as [boas práticas com as meta tags](https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags). \n4. Configure o [Search Console da Google](https://search.google.com/search-console/about?hl=pt-br) no seu site. Ele permite você saber como as pessoas estão alcançando seu site, por quais palavras na busca e até mesmo sua posição na busca.\n5. Ajude o Google a entender o conteúdo do seu site usando [dados estruturados](https://developers.google.com/search/docs/guides/intro-structured-data?visit_id=1-636507697624367960-3670912478&rd=1). E teste esses dados na [própria ferramenta deles](https://search.google.com/structured-data/testing-tool/u/0/).\n6. Use ferramentas para testar o seu SEO, desde o [Lighthouse](https://willianjusten.com.br/medindo-performance-do-seu-site-com-lighthouse/), até ferramentas externas como [Screaming Frog](https://www.screamingfrog.co.uk/seo-spider/) ou [Neil Patel SEO](https://neilpatel.com/br/seo-analyzer/).\n7. Verifique se o seu site é amigável para mobiles, desde o visual até a performance. [53% das visitas são abandonadas se o site mobile demora mais de 3s para carregar](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/).\n8. [Revise os erros mais comuns que desenvolvedores cometem quando criam um site mobile](https://developers.google.com/search/mobile-sites/mobile-seo/common-mistakes).\n9. Diga para os mecanismos de pesquisa qual URL usar. A Moz descreve que isso (criar canonical links) é a [maneira de previnir problemas causados por conteúdos iguais ou \"duplicados\" de aparecerem em múltiplas URLs](https://moz.com/learn/seo/canonicalization).\n10. Use `https`: [desde 2015, Gary Illyes da Google diz que se as páginas forem identificadas como iguais, o sistema irá priorizar sempre o https, indicando um domínio seguro](https://www.bruceclay.com/blog/gary-illyes-interview/). \n11. Identifique suas images usando o `alt`. Os sistemas de busca não enxergam imagens sem um texto que consiga descrevê-las. Sem contar que isso é **extremamente importante para acessibilidade**.\n12. Crie URLs amigáveis. Nada de urls gigantescas, com números e letras desordenadas. Isso só vai prejudicar com que as pessoas tentem acessar.\n13. Se seu site possuir uma pesquisa [tente instalar o search box no seu site para que seja possível pesquisar através do Google](https://developers.google.com/search/docs/data-types/sitelinks-searchbox).\n![Uma imagem mostrando o search dentro do próprio Google](https://res.cloudinary.com/practicaldev/image/fetch/s--4yXlk8jE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pagely.com/wp-content/uploads/2018/01/search-engine-box.png)\n14. Numa migração, tome algum tempo para verificar todos os casos de páginas 404 e crie redirects para os seus devidos links.\n15. Tenha um olhar crítico para a usabilidade. Será que seus usuários querem que o vídeo toque automaticamente? Esse menu faz sentido?\n16. Use formulários de contato ao invés de só passar o seu email para evitar spams. \n\n## Após o site ser lançado\n\n1. Veja quantas páginas estão sendo indexadas no Google usando **site:yourwebsite.com** na busca do Google.\n2. Conforme o site for mudando e novas urls forem aparecendo, [peça ao Google para rastrear novamente seu site](https://support.google.com/webmasters/answer/6065812?hl=en).\n3. Veja os erros do Google no Search Console.\n![Uma imagem indicando os erros do site](https://res.cloudinary.com/practicaldev/image/fetch/s--7wV6EGFG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://pagely.com/wp-content/uploads/2018/01/crawl-errors.png)\n4. Atualize seu sitemap removendo URLs não canônicas e páginas 40x antes de submeter o sitemap.\n5. [Escreva um markup que ajude as buscas](https://support.google.com/webmasters/answer/99170)\n6. Fique sempre de olho na [velocidade do seu site](https://developers.google.com/speed/). No lançamento o site pode estar lindo e rápido, mas se não continuar checando frequentemente, a velocidade pode ser prejudicada por imagens grandes e outros conteúdos que talvez não fossem necessários.\n7. Verifique por links quebrados e sempre redirecione para os corretos.\n8. Verifique se os backlinks não foram perdidos com a migração do site ou o novo design. O [Ahrefs](https://ahrefs.com/) é uma boa ferramenta para descobrir isso.\n9. Use sites como [Signals](https://cognitiveseo.com/signals/), [Mozcast](http://mozcast.com/) ou [Barracuda](https://barracuda.digital/panguin-seo-tool/) para ficar atento a mudanças no algoritmo de busca do Google que podem impactar seu site.\n\n## Conclusão\n\nO design do site é uma grande parte do SEO e essa lista pode te ajudar no lançamento ou migração do seu site. A empresa que escreveu esse post tem [estudo de caso](https://pagely.com/case-studies/bmc/) onde eles duplicaram os acessos de um cliente, então é algo que realmente funciona.\n\nA Google atualizou recentemente o [Guia de SEO](https://support.google.com/webmasters/answer/7451184) deles, vale dar uma olhada também.\n\nE se você tiver alguma dica, bota aí nos comentários =)\n" }, { "path": "posts/lyef-criando-componentes-desacoplados-em-reactjs.md", "content": "---\nlayout: post\ndate: 2017-08-19T18:31:42.000Z\ntitle: Lyef - Criando componentes desacoplados em ReactJS\ndescription: Um boilerplate para criar componentes reutilizáveis e desacoplados em ReactJS\nmain-class: js\ntags:\n - react\n - js\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nFala pessoal, eu sou um cara que curte bastante dados e vejo bastante o meu analytics e uma coisa que sempre reparei foi como meus posts sobre React sempre possuem muitos acessos. Inclusive em muitas buscas, se você colocar `aprender React` no Google, alguns posts meus aparecem bem rankeados. Pensando nisso, resolvi que vou voltar a escrever mais sobre React, já que tem bastante procura e eu tenho uma coisa ou outra para poder compartilhar.\n\nNesse post, eu decidi falar um pouco sobre a [Lyef](https://github.com/lyef/) que é uma organização que eu acabei criando para abrigar uma ideizinha de um projeto de React que eu fiz ano passado. Depois meus amigos [Jonas Mendes](http://github.com/nipher) e [Guilherme Louro](https://github.com/guilouro) também participaram com várias coisinhas lá.\n\nLembrando que as escolhas para esse projeto são bastante pessoais e não necessariamente são as melhores/piores escolhas. Elas foram feitas baseadas num projeto que eu estava trabalhando e abaixo eu vou explicar o porquê de tudo.\n\nEnquanto escrevo o post, vou ouvindo uma banda indie bem legal chamada [Silversun Pickups](https://open.spotify.com/artist/6qyi8X6MdP1lu6B1K6yh3h).\n\n## Por que do nome Lyef?\n\nEssa é uma das perguntas que meus amigos sempre fazem quando eu falo da `Lyef` e bom, não tem bem uma resposta para isso. Eu estava com o [Jonas](http://github.com/nipher) falando sobre a ideia e mostrando o que eu tinha feito e aí pensamos que precisava ter um nome. Ficamos buscando uns nomes celtas, islandeses, nórdicos porque curtimos essas paradas, mas nada era legal ou então já estava sendo usado. Depois de algumas ideias, acabamos caindo na ideia de `Leaf`, folha em inglês. Mas aí para dar uma diferenciada, resolvemos colocar assim, `Lyef`, mas lê-se `Líf`.\n\n## Por que desse projeto?\n\nNa época eu estava iniciando um freela para uma empresa grande, e a empresa queria basicamente o seguinte:\n\n- Criar vários produtos que eram muito similares entre si.\n- Iniciar a estrutura do projeto e treinar as pessoas, para eles depois seguirem sozinhos.\n- Permitir que as pessoas trabalhassem de forma independente, tanto os freelas como os devs da empresa. Sem que um bloqueasse o outro.\n- Queriam utilizar React ou Meteor ou qualquer tecnologia nova para evitar ficarem desatualizados rápidos.\n\nPensando nisso, a primeira coisa que obviamente veio a cabeça foi usar `React` e trabalhar com vários componentes separados, assim poderíamos plugar nos diferentes produtos, já que muita coisa seria reutilizada. Outra coisa é que trabalhando com componentes, seriam pequenas partes e cada um poderia ficar encarregado de um componente, assim ninguém travava ninguém.\n\nMas aí entrava um detalhe, os componentes seriam completamente separados, ou seja, não seria uma App grande com os componentes separados lá dentro. Seriam vários componentes e cada um teria o seu repositório e seria instalado com um `npm install componente`. E como testar esses componentes se não teria um App agregando tudo? Como mostrar o funcionamento do componente sem precisar ficar instalando/desinstalando coisas?\n\nE se vão ser tão separados e cada pessoa vai fazer um componente, como garantir que tudo siga um mesmo padrão, não correndo o risco de cada um ficar de um jeito diferente e confundir na hora de dar manutenção?\n\nPensando em todos esses detalhes, eu resolvi criar a Lyef, que é um boilerplate (estrutura, organização, use seu nome favorito) bem simples, onde eu consigo definir várias coisas importantes e o mais importante, consigo testar e rodar os componentes em ambientes completamente isolados sem problema nenhum.\n\n## Definindo padrões\n\nComo dito acima, eu precisava primeiro de tudo, fazer algumas coisas para poder manter a qualidade e padrão em todos os componentes que seriam criados. Para isso, eu comecei com as coisas básicas, primeiro de tudo foi colocar o [.editorconfig](https://github.com/lyef/lyef-react-component/blob/master/.editorconfig), assim eu garantia que todos iriam usar o mesmo tipo de indentação, tamanho, assim como garantir que os arquivos teriam uma linha branca no final, que os whitespaces seriam removidos e etc.\n\nDepois vinha outra coisa bastante importante, que era garantir um Styleguide para o código, para que todos seguissem as mesmas regras para usar métodos, definir variáveis e várias outras boas práticas/padrões. Para isso, eu escolhi o [Styleguide da Airbnb](https://github.com/airbnb/javascript/tree/master/react), que é um ótimo Styleguide e é muito bem organizado. Assim eu não precisava reinventar a roda e todos teriam acesso as regras de forma fácil.\n\nPara implementar o Styleguide, eu utilizei o [Eslint](https://eslint.org/), que agora já é bem conhecido de todos e permite fazer essa verificação das regras, que são definidas no arquivo [.eslintrc](https://github.com/lyef/lyef-react-component/blob/master/.eslintrc).\n\nPara rodar o linter separadamente eu tinha os seguintes comandos:\n\n```bash\n$ npm run lint # verificar todos os arquivos por erros\n$ npm run lint:fix # verificar e corrigir os erros possíveis automaticamente\n```\n\nE o pulo do gato final foi o seguinte: \"Ok, os padrões vão estar todos lá escritos, mas o que me garante que vão seguir?\". Para ter certeza que todos iriam seguir os padrões definidos eu utilizei o [Husky](https://github.com/typicode/husky) que trabalha com [Git Hooks](https://willianjusten.com.br/trabalhando-com-git-hooks-de-forma-facil/), ou seja, antes de qualquer push, eu rodava o eslint e se algo estivesse errado, a pessoa não conseguia subir o código. De início isso causou um pouquinho de chateação, mas depois foi visto como isso ajudava a ter um código correto e foi bem recebido.\n\n## Testes são importantes!\n\nEu acredito que uma aplicação se começa pelos testes e que uma aplicação sem testes é fadada a dar enormes dores de cabeça no futuro. Pensando nisso, a segunda parte relacionada a padrões e boa qualidade foi criar um sistema de testes que fosse fácil de rodar e fácil de trabalhar. Porque também não adianta você querer que as pessoas escrevam testes se for um \"pé no saco\" toda vez. Para isso eu utilizei ferramentas já mais conhecidas, ao invés de usar o Jest, que na época estava melhorando, mas ainda era bem desconhecida e com coisas chatas.\n\nUsei a dobradinha [Mocha](https://github.com/mochajs/mocha) e [ChaiJS](https://github.com/chaijs/chai), que são bem conhecidos e funcionam super bem. O Mocha serviria para criar meu ambiente de testes e rodar. Enquanto com o ChaiJS, eu poderia ter o poder do `expect` para poder escrever meus testes.\n\nMas como estávamos trabalhando com React, outra incrível ferramenta veio para ajudar (e muito!), que é o [Enzyme](https://github.com/airbnb/enzyme) da galera do Airbnb. Com o Enzyme ficava fácil de simular eventos, montar componentes, buscar por elementos dentro desses componentes e muito mais.\n\nE também se unindo ao time, eu precisava de algo que pudesse simular o DOM para mim, assim eu poderia rodar meus testes, sem precisar levantar um PhantomJS, que seria extremamente pesado e chato para ficar testando. Com isso a escolha foi o levíssimo [JSDOM](https://github.com/tmpvar/jsdom), que é uma implementação super pequena do DOM para rodar em ambiente Node.\n\nE só para também fechar a parte de testes, eu adicionei o [Nyc/Istambul](https://github.com/istanbuljs/nyc), que fica responsável por fazer o teste de cobertura e caso os valores estivessem abaixo do determinado, a pessoa também não poderia subir o código, até que ela cobrisse corretamente os trechos de código não testados.\n\nPara rodar os testes, existiam os seguintes comandos:\n\n```bash\n$ npm test # rodava os testes em single-run mode, ou seja, só uma vez\n$ npm run test:tdd # rodava os testes e ficava assistindo atrás de mudanças\n$ npm run test:coverage # rodava os testes e gerava os relatórios de cobertura\n```\n\n![Imagem dos testes rodando](https://github.com/lyef/lyef-react-component/raw/master/images/tests.gif)\n\n## Criando um ambiente isolado\n\nE a parte mais importante do projeto em si estava aqui. Como fazer para ter um ambiente isolado para esses componentes? Na época já tinha visto um projeto da Scup que era o [Atellier](http://scup.github.io/atellier/), mas não era bem isso que eu queria. Foi então que eu encontrei o [Storybook](https://storybook.js.org/) e foi paixão a primeira vista! Ele me permitia não só ter meus componentes isolados, como me dava todo um ambiente para desenvolvimento com direito a live reloading e criação de histórias, que é uma metodologia ótima para criar componentes.\n\nNa época o Storybook tinha acabado de ganhar a versão 1.0 e eu precisava fazer algumas edições no `webpack` deles para funcionar como eu queria, mas isso não era nada em frente a todas as vantagens que a ferramenta me trazia.\n\nAtravés do Storybook, eu consigo fazer coisas como na imagem abaixo:\n\n![Imagem da Interface do Storybook](https://github.com/lyef/lyef-react-component/raw/master/images/storybook-example.gif)\n\nOu seja, não só criar meu componente, mas mostrá-lo em diferentes situações com diferentes tipos de dados. Isso respondia a tudo que eu precisava para responder as demandas da empresa. E foi assim que eu criei a primeira versão do boilerplate, que com tempo foi se atualizando e hoje já utiliza o Storybook 3 e você pode ver [o repositórido o lyef-react-component aqui](https://github.com/lyef/lyef-react-component).\n\n## Botando isso na prática\n\nDepois de ter então essa estrutura e todos os padrões definidos, bastava que nós criássemos nossos componentes. E o flow funcionava da seguinte forma.\n\n- Criar um repositório do Componente.\n- Criar as coisas necessárias daquele Componente.\n- Para cada atualização, utilizar o [Semver](https://willianjusten.com.br/semantic-version/) para versionar corretamente aquele componente.\n- Esse componente ficava disponível então no Github Privado com suas tags definidas\n\nRepare que o processo acima poderia ser feito por várias pessoas para diferentes componentes, sem que um atrapalhasse o outro, isso ajudava demais. Depois da criação dos componentes, também tinha obviamente os produtos, que trabalhavam com Redux, usando também um boilerplate criado pela Lyef, que é o [Lyef Redux Boilerplate](https://github.com/lyef/lyef-redux-boilerplate), que também será explicado num post futuro. O que era feito é ter esses produtos e neles, nós instalávemos só os componentes que desejávamos e nas versões desejados. Seguindo o exemplo da imagem abaixo:\n\n![Imagem mostrando 3 produtos independentes usando diferentes componentes](/assets/img/lyef-1/grafico.png)\n\n## Conclusão\n\nBom galera, esse é um dos primeiros posts que pretendo fazer sobre a Lyef e React. Nele eu preferi fazer uma introdução do que é o projeto e os motivos por trás dele, que basicamente foi um estudo de caso de um freela passado que eu fiz. Espero que tenham curtido e comentários são mais do que bem vindos! Nos próximos posts pretendo mostrar como criar componentes do zero utilizando o Boilerplate e depois falar um pouco Redux e o boilerplate da app.\n" }, { "path": "posts/mais-de-10-mil-alunos-na-udemy.md", "content": "---\nlayout: post\ndate: 2017-08-17T20:02:17.000Z\ntitle: Mais de 10 mil alunos na Udemy\ndescription: Um pouco sobre esse número, processo de criação de cursos e mais.\nmain-class: misc\ntags:\n - cursos\n - udemy\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, hoje venho trazer um notícia que me deixa extremamente feliz! Eu alcancei a marca de **+ de 10 mil alunos!!!** E também vou aproveitar para falar um pouquinho sobre os cursos, processos para criação de um cursos e tudo mais.\n\nEnquanto vou escrevendo esse post, eu vou ouvindo uma playlist chamada [PEACE](https://open.spotify.com/user/spotify/playlist/37i9dQZF1DXdCsscAsbRNz), que como o nome diz, são músicas calmas para te trazer paz. Muito boa para se concentrar e escrever.\n\nO post vai ficar meio grandinho, então vai lá, pega um cafézinho reforçado e volta para continuar lendo =D\n\n## Índice\n\n- [Começo de Tudo](#comeco-de-tudo)\n- [Primeiro Curso Pago](#primeiro-curso-pago)\n- [Saindo de empresa e focando em curso](#saindo-empresa)\n- [BrazilJS e lançamento de mais um novo curso](#brazil-js-lancamento)\n- [Como faço para criar Cursos?](#como-criar-cursos)\n- [Por que a Udemy?](#por-que-udemy)\n- [Saiba lidar com opiniões](#lidar-opinioes)\n- [Sobre Pirataria](#sobre-pirataria)\n- [Agradecimentos e Bônus](#agradecimentos)\n\n

    Começo de tudo

    \n\nNo dia **19 de Março de 2016** eu decidi lançar um curso bem simples sobre como [Criar Sites Estáticos com Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/), que é a ferramenta que eu utilizo até hoje no meu blog. Na época eu estava extremamente empolgado e fiz [um post](https://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) sobre o início desse projeto.\n\nEu já escrevia bastante no meu blog e tinha várias pessoas que pediam vídeos (muitos conseguem assimilar melhor por vídeos) e eu pensei, por que não? Pensei num tema que eu tivesse bastante conhecimento e que fosse legal passar e então escolhi o Jekyll, era uma ferramenta bastante desconhecida, mas que é super simples de usar e permite fazer muita coisa maneira.\n\nEu confesso que não imaginei que muita gente ia fazer o curso não, era uma parada meio desconhecida e fazer cursos, em geral, toma bastante tempo, a galera iria querer fazer aqueles cursos das mais modernas tecnologias e etc e iria deixar o meu para lá. Eu não poderia estar mais enganado! Só no primeiro mês eu já tinha ultrapassado **1000 alunos** na plataforma antiga!\n\nPassaram só **15 dias** e eu já estava lançando então outro curso e [falando dele no meu blog](https://willianjusten.com.br/novo-curso-de-git-e-github-para-iniciantes/), que é de longe o meu curso com maior número de alunos e feedbacks, o [Curso de Git e Github para Iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/). Até hoje fico extremamente feliz quando alguém fala que aprendeu Git por minha causa e agora tá usando, isso é uma coisa linda demais <3\n\n

    Primeiro Curso Pago

    \n\nDepois do grande sucesso dos cursos de Jekyll e Git, eu decidi que iria fazer meu primeiro curso pago. Desde o início eu já havia dito a galera que teriam cursos gratuitos, mas também haveria necessidade de criar cursos pagos. Um dos grandes motivos de eu querer fazer um curso pago, era que eu estava pretendendo morar um tempo fora e com isso eu precisava juntar uma grana e, ou eu fazia um curso pago ou fazia freelas. Preferi dar prioridade para um curso, pois achei que poderia ajudar muito mais a comunidade e ao mesmo tempo todos poderiam me ajudar também.\n\nPara definir o assunto do curso, não foi muito difícil. Eu já fazia muiiiitas coisas sobre SVG e o conteúdo de ensino, mesmo em inglês, era bem precário na época. Só que dessa vez, eu iria fazer diferente, decidi fazer uma pré-venda, assim eu já ia arrecadando dinheiro enquanto ia criando o material. Fiquei meio preocupado de fazer dessa forma, pois muita gente poderia achar que eu tava só pegando o dinheiro e no final não ia ter curso nenhum. Mas eu [escrevi um post](https://willianjusten.com.br/pre-venda-curso-de-svg/) bem explicadinho com tudo que ia ter no curso e também gravei um vídeo com as coisas que eu já tinha montado inicialmente e vislumbrado para o curso, só para mostrar que existia mesmo material e ninguém iria ficar na mão.\n\nA recepção foi super maneira e a galera apostou no curso, mesmo não tendo ele lançado ainda. Várias pessoas compraram na pré-venda, compartilharam e me apoiaram a fazer o projeto.\n\n

    Saindo de empresa e focando em curso

    \n\nMas na época que eu lancei essa pré-venda do SVG, eu estava trabalhando na HUGE e acabou que até mesmo o trabalho estava \"atrapalhando\" na criação do curso, pois eu queria gravar/editar e etc e bom, só quem faz curso/edição de vídeo sabe o quão trabalhoso é isso e a quantidade de tempo que isso toma.\n\nFoi então que eu tomei uma decissão, que já ia muito em conjunto com meus planos e eu saí da HUGE. Para contar isso, eu escrevi um post chamado [Mudando sua vida através de projetos paralelos](https://willianjusten.com.br/mudando-sua-vida-atraves-de-projetos-paralelos/). A ideia era focar totalmente no curso, pegar o dinheirinho que eu já tinha economizado das outras empresas que eu tinha e mais o dinheiro do curso, para poder começar a viajar por aí. Meu sonho sempre foi estar em contato com a natureza, viajar o mundo todo, conhecer pessoas de todos os cantos e eu não conseguiria isso trabalhando em nenhuma empresa (bom, agora sei que é possível, [temos vagas =p](https://www.toptal.com/careers)).\n\nCom essa saída, eu consegui dar um boost e lancei o curso rapidamente. Foi um sucesso! Muitos alunos até hoje me mandam coisinhas que fizeram graças ao curso e nossa, isso é um motivo de orgulho **imenso** para mim. Saber que meu conhecimento foi passado e está sendo utilizado com tanta criatividade é algo super emocionamente e gratificante!\n\n

    BrazilJS e lançamento de mais um novo curso

    \n\nAno passado foi um ano hiper mega cheio, eu palestrei em diversos lugares hiper importantes. E um dos mais importantes, sem dúvida foi a [BrazilJS](https://braziljs.org/conf/). Eu aproveitei a deixa de estar palestrando nesse evento imenso e resolvi lançar a pré-venda o meu maior curso até então, que é o JS com TDD na Prática.\n\nEu queria com esse curso, passar mais um outro assunto que não via tanto em cursos ou sendo falado, mas que é extremamente necessário para o mercado de trabalho. Para esse curso, eu ainda não tinha feito a ementa completa, basicamente tinha feito um [rascunho básico](https://business.facebook.com/willian.justen.cursos/photos/a.808763882559204.1073741828.787922347976691/841024392666486/?type=3&theater) do que estava em mente, mas mesmo assim resolvi lançar lá na BrazilJS.\n\nE o mais legal é que como as pessoas já tinham me conseguido pelos outros cursos e também pelas palestras, várias apoiaram mesmo sem uma ementa bem fechada. Esses se deram bem, pois pagaram mais barato e no final o conteúdo acabou sendo **bem** maior que o previsto.\n\nMas nem tudo são flores... Eu imaginei que o processo para criação desse novo curso seria tranquilo, porém tive milhares de problemas! Um que me irritou tremendamente é que a plataforma da qual eu estava subindo os vídeos, vivia me bloqueando, por eu estar mudando de país. Reclamei milhares de vezes com eles e eles não faziam nada!\n\nOutro problema que eu não tinha pensado na época, era o equipamento para gravar e uma coisa bem essencial, o local! Vários dias tinha barulho demais e eu não conseguia gravar, teve uma época que eu fui gravar no quintal da casa que eu estava. O detalhe é que era inverno irlandês, faziam alguns graus negativos, mas eu precisava gravar, senão meus alunos iriam se decepcionar comigo.\n\nMesmo com todos esses problemas, eu aprendi uma coisa, por mais que existam haters e brigões (falarei mais a frente disso), também existem pessoas muito boas e meus alunos foram extremamente pacientes com todos esses detalhes, o que me fez me sentir bem melhor e não perder o foco e ânimo para gravar. Lancei o [curso esse mês na Udemy](https://willianjusten.com.br/js-com-tdd-na-pratica-na-udemy/) e já tem sido bem maneira a recepção do curso pela Udemy também <3\n\n

    Como faço para criar Cursos?

    \n\nBom, esse processo é bem variável de acordo com o curso e também o foco que eu quero passar. Mas existem alguns pilares que eu vou passar aqui, que são a minha base para fazer o curso.\n\n### Definir um tema\n\nEssa parte pode parecer fácil, mas é super super complexa. Por quê? Bom, dependendo do tipo de curso, você tem diferentes tipos de alunos/alvo. Se for um curso muito iniciante, a maioria dos seus alunos serão iniciantes, consequentemente você precisa tomar cuidado para não inserir assuntos ou coisas que eles possam não estar acostumados. Se for um curso muito avançado, pode acabar assustando os alunos, que vão achar que não são aptos a fazer o curso.\n\nEntão ao definir o assunto do curso, é importante também ser claro ao passar os requisitos e estar disposto a tirar as dúvidas daqueles que não sabem se o curso é para eles ou não.\n\n### Criar ementa\n\nEssa é outra etapa importante, que vai fazer o aluno querer ou não adquirir o curso. Aqui, eu tendo a sempre fazer uma escala, indo do básico daquele assunto, até coisas mais elaboradas, que, em geral, se conectam com os assuntos anteriormente abordados. É bom também que o curso não seja somente teórico, pois isso cansa e teoria por teoria, é melhor ir num livro então.\n\nOutra coisa interessante para a ementa, é dividir em módulos não muito grandes e que tenham um objetivo principal. Isso vai fazer com que o aluno perceba e entenda melhor o que vai ser ensinado, se ficar aberto demais, ele pode se perder e simplesmente desistir do curso.\n\n### Gravação dos vídeos\n\nEu diria que uma das coisas mais importantes é a **duração** do vídeo. Vídeos muito grandes são extremamente cansativos, além de dificultarem o acesso a algum pedaço importante. Quando o vídeo é pequeno, o aluno faz quase uma maratona netflix com o curso e, além disso, os vídeos por serem pequenos, os assuntos também são melhor divididos. Com essa melhor divisão, os vídeos podem ser revisitados quando necessários, auxiliando no aprendizado do aluno. Eu tento não passar de 12minutos de vídeo, e caso eu veja que vai ficar maior, eu divido o assunto em partes.\n\nOutra coisa importante é a qualidade de imagem/audio, se a imagem tem uma letra fácil de ler sem nenhum zoom, fica perfeito para aqueles que gostam de anotar junto. E claro, o audio precisa ser bom para que todos possam ouvir. Lembre-se de testar o audio em diferentes níveis de volume e não só com o fone. Dependendo do aparelho, o som pode ser extremamente baixo e para outros muito alto. Eu sofri bastaaaaante com essa parte, costumo utilizar fone o tempo todo e os meus fones costumam ter uma qualidade bem boa, então alguns alunos reclamavam de som baixo, que para mim não era baixo... Uma outra dica é comprar um microfone externo bom, vai ajudar demais na captação.\n\n### Edição de vídeos\n\nAqui é algo que varia bastante, tem gente que gosta de criar vídeos perfeitos, então se elas erram algum detalhe, elas cortam. Eu prefiro deixar algo mais natural, se é um erro pequeno que eu logo vi e corrigi durante a gravação, eu prefiro até manter, assim o aluno fica ciente de um problema que pode ocorrer e já saber como corrige também.\n\nMas algumas coisas são interessantes, é importante remover qualquer ruído que possa causar atenção, transições de tela que não sejam necessárias é bom recortar, assim como tempo de espera para download de coisas (npm é lento que só...)\n\n

    Por que a Udemy?

    \n\nInicialmente eu utilizava a plataforma do [Teachable](https://teachable.com/), que é bastante bacana e flexível. Permitindo ter a plataforma só para você e editá-la deixando com a cara que você desejar. E sim, isso é super legal! Mas o problema é que o player deles não é muito bom, além dos problemas que tive sobre region block como eu falei. Outra coisa é que sendo pela Teachable toda a divulgação fica por sua conta e com isso, o alcance também é menor, visto que sendo pela Udemy já existem os milhares de alunos da plataforma. Para um breve comparativo, na Teachable eu alcancei 7800 mil alunos esse tempo, enquanto na Udemy eu já passei os **10000** em apenas 3 meses.\n\nO legal da Udemy para os alunos é que eles podem fazer anotações nos vídeos, além de fazer perguntas numa sessão que é mais fácil de ser encontrada. Eles também podem fazer download pela app e assistir offline, que ajuda muito aqueles que estudam durante o trajeto para trabalho/faculdade.\n\n

    Saiba lidar com opiniões

    \n\nEsse é um tópico muiiito importante e que eu não poderia deixar de colocar. Quando você faz algo para o público, precisa estar aberto a todo tipo de crítica. Existem várias críticas construtivas e muitos elogios quando você faz um curso. Mas também existem muitos comentários chatos e desnecessários, que você não precisaria ler. Tente enxergar todos esses comentários e tirar deles coisas boas para melhorar em seus próximos cursos.\n\nJá tiveram vários alunos vindo me agradecer que tinham arrumado emprego graças a alguns dos meus cursos, isso é bom demais. Também já teve aluno mostrando algum exemplo que criou ou site que fez por ter aprendido com o curso. Até alunos que contribuiram em repositórios meus depois de terem feito meu curso de Git. Também já teve aluno avisando que algum vídeo tava em ordem invertida ou que o som de algum vídeo estava ruim e pedia para melhorar, sempre explicando os motivos.\n\nPorém, em meio a isso, já teve gente me xingando de capitalista ladrão, já teve gente dando 1 estrela no curso e falando que foi um grande porcaria, mas sequer explicava o porquê disso. Já teve gente reclamando até do meu sotaque!\n\nEntão é importante que você escute os feedbacks e utilize eles da melhor forma possível. E aqueles que nada acrescentam, simplesmente ignore =)\n\n

    Sobre Pirataria

    \n\nNo mesmo dia que eu completei **10 mil alunos**, eu recebi um aviso de um aluno falando que meu curso estava sendo pirateado. Acabei vendo outros 3 links depois que ele falou, além de ter visto gente também pedindo acesso ao meu curso pelo Telegram em troca de alguma outra coisa.\n\nBom, é claro que isso me entristece demais, como disse acima, o processo para criar cursos é demorado e muito trabalhoso. E descobrir que todo aquele seu trabalho tá sendo roubado é algo extremamente chato. Infelizmente as pessoas ainda não conseguem entender que propriedade intelectual vale bastante. O mais estranho é ver gente da nossa área fazendo, afinal de contas, nosso trabalho é todo intelectual. Creio que ninguém aqui ficaria feliz se o patrão pegasse nosso código e desse um pé na gente sem pagar.\n\nUma desculpa que as pessoas acabam fazendo é _É tudo muito caro, então a gente pirateia._ Fazendo um paralelo a isso, eu não vejo ninguém entrar na loja da Apple e sair correndo com um Mac debaixo do braço só porque é _caro_. Se você acha o curso caro, vem conversar comigo, me explica seus motivos, me diz o quanto você poderia pagar. Eu sempre faço descontos hiper altos e mesmo assim, se a pessoa não consegue, eu dou um jeito. Eu confesso que preferia muito mais que a pessoa viesse conversar comigo sobre isso, do que ela simplesmente ir piratear o curso... Mas enfim, isso vai da cabeça de cada um. Só lembre de não reclamar da corrupção depois, pois isso é um tipo de corrupção também =)\n\n

    Agradecimentos e bônus

    \n\nNossa, como esse post ficou imenso! Enfim pessoal, eu queria mais que tudo agradecer a essa incrível marca! São mais de **10 mil alunos** e mais de **1400 comentários** no Udemy, sendo a maioria deles de 5 estrelas! Mesmo com coisinhas chatas, que falei acima, vocês sempre me inspiram e me animam a continuar fazendo o que eu faço. Aprendi demais com vocês durante todo esse tempo e espero continuar aprendendo mais e mais.\n\nPara agradecer todo esse apoio, tanto dos meus alunos como dos leitores desse blog. Eu coloquei um código de **100% de desconto** para o meu curso de JS com TDD na Prática em algum lugar desse blog, quem achar, corre para pegar o curso! E o cupom pode estar embaixo do seu nariz =p\n\n**Update:** tiveram já 5 máquinas absurdamente rápidas que conseguiram os cupons! Meus parabéns!! =D\n\nAbraços para vocês e que comece a caça ao cupom de **100%**!\n" }, { "path": "posts/making-of-blog-novo-gatsby-js.md", "content": "---\nlayout: post\ndate: 2019-07-13T13:43:12.000Z\ntitle: Making of - Criando meu Blog Novo com GatsbyJS\ndescription: Coisas que usei por trás desse blog, escolhas de visual,\n performance e muitas outras coisas.\nmain-class: js\ntags:\n - js\n - gatsby\n - netlify\n---\n\n## Introdução\n\nFala pessoal, faz muito tempo que não escrevo e já recebi até email de gente perguntando o que estava acontecendo e porque não tinha mais nenhum post novo! De fato, eu andei bem ocupado nos últimos tempos, principalmente pois eu estava trabalhando em certos projetos na [Toptal](https://www.toptal.com/) e também cuidando um pouco da minha saúde. E junto a isso, também tem aquela famosa preguiça né, se tivesse um título para a pessoa que mais procrastina, com toda certeza eu estaria no **top 10**.\n\nO blog é novo, mas algumas coisas não podem mudar né, então lá vai aqui a banda que estou ouvindo enquanto escrevo esse post, o nome dela é [While She Sleeps](https://open.spotify.com/artist/38LdIuxB548zgHoEY2AN7a?si=HlQ3kLIqQX-jG5xmpcAVAA), é um pouco mais agitada, assim vou tentar não enrolar para escrever e lançar logo esse post.\n\nBom, a ideia nesse post é falar as tecnologias novas que usei e o porquê delas, **não pretendo ensinar como fazer nada do zero aqui** (muito possível eu crie um curso sobre isso).\n\n## Visual e Mudanças\n\nBom, se você ainda se lembra do blog antigo, ele tinha um menu hamburguer que acabava escondendo alguns dos links e com isso perdiam alguns cliques. O blog iniciava claro e então você poderia escolher para mudar para o Dark Mode e a lâmpada ficava sempre no bottom, as vezes escondendo um pouco do conteúdo atrás. Eu coloquei um evento para identificar qual tema era mais utilizado (Dark ou Light) e com quase 80% o Dark mode ganhou, então, por isso eu decidi colocá-lo como padrão. Abaixo segue um screenshot do blog antigo:\n\n![Screenshot da home antiga, tela branca e cards brancos. ](/assets/img/blog-antigo.png)\n\nNo blog novo, meu objetivo era trazer alguns links meus já para o primeiro olhar da pessoa, por isso adicionei as minhas redes sociais, onde não pude deixar de incluir o [Unsplash](https://unsplash.com/@willianjusten), que é onde boto as minhas fotos de viagem, que são uma grande paixão que tenho atualmente. Além desses links, também já deixei aparente os links para [cursos](https://willianjusten.com.br/cursos/) e [séries](https://willianjusten.com.br/series/), que são partes bastante importantes no blog para mim. Se você entrou por esse post e num viu a home, fica abaixo um screenshot dela:\n\n![Screenshot do blog novo, com interface escura e os posts em lista.](/assets/img/blogo-novo.png)\n\nOutra grande mudança na estrutura, foi a adição dessa barra de ações na lateral, assim fica mais fácil de usar a busca, mudar o tema e uma feature que há muito me pediam também (de ir para o topo, já que meus posts são imensos).\n\nJá dentro dos posts, a mudança foi pouca, mais centralizada mesmo no header, antes possuía um header bem grande até chegar o post e agora eu resolvi remover isso, já que a ideia é que a pessoa já vá direto no texto. Também haviam uns bugs de altura nesse header que me incomodavam desde a primeira vez, então nada melhor que removê-los.\n\n## Sai Jekyll entra Gatsby\n\nDesde quando iniciei o meu blog, lá em [2015](https://willianjusten.com.br/making-of-parte-1/), eu utilizei um gerador estático, no caso o Jekyll. Ele sempre me serviu muito bem e ainda serve! Eu não mudei do Jekyll por achar ele ruim ou qualquer outra coisa, muito pelo contrário, adoro demais a simplicidade do Jekyll.\n\nA minha mudança para o [Gatsby](https://www.gatsbyjs.org/) foi motivada somente pelo fato de ser em React e usar GraphQL, que são duas tecnologias que venho usando faz tempo e queria brincar e treinar um pouco meus conhecimentos. E como eu sempre digo:\n\n> Não há nada melhor que usar o seu blog como cobaia para testes e aprendizados.\n\nPosso dizer que aprendi bastante com o Gatsby e to achando uma ferramenta incrível! Não há melhor/pior entre Gatsby e Jekyll, pois eles fazem praticamente a mesma coisa. Mas uma grande diferença que notei, é que apesar do Gatsby ser mais novo, ele tem uma documentação incrível e uma comunidade melhor ainda! Todos os problemas que eu tinha, achava a solução muito rapidamente. Além dos vários plugins embutidos que facilitam demais! Eu consigo fazer um site se tornar PWA com somente uma linha!\n\n## Styled Components\n\nNo blog anterior eu utilizava o [Stylus](http://stylus-lang.com/), numa estrutura bem simples, mas que ao mesmo tempo, era um pouco complicada de organizar e até de gerar um css inline de boa qualidade e de fácil customização.\n\nPara o blog de agora, nem foi difícil de pensar, já que estaria trabalhando com React, minha primeira escolha foi o [styled-components](https://www.styled-components.com/), é leve e super simples de usar. Posso criar os estilos diretamente para o componente e também os estilos globais para todas as páginas.\n\nJunto dele, eu utilizei o [styled-media-query](https://github.com/morajabi/styled-media-query) para poder criar os estilos de acordo com cada media query.\n\nA estrutura, ficou mais ou menos assim:\n\n```bash\n├── components\n│   ├── Avatar\n│   │   ├── index.js\n│   │   └── styled.js\n│   ├── Course\n│   │   ├── Image.js\n│   │   ├── index.js\n│   │   └── styled.js\n│   ├── Layout\n│   │   ├── index.js\n│   │   └── styled.js\n│   ├── MenuBar\n│   │   ├── index.js\n│   │   ├── styled.js\n│   │   └── trackers.js\n│   ├── MenuLinks\n│   │   ├── content.js\n│   │   ├── index.js\n│   │   └── styled.js\n...\n```\n\nRepare que tenho uma pasta específica para componentes e para cada componente eu tenho um `index.js` que é onde tem a lógica dele e tenho um `styled.js` que é onde ficam os meus estilos. Prefiro fazer assim, pois eu tenho o css separado, então sei onde editar e isso evita aqueles arquivos imensos, que unem lógica e visual.\n\nPegando um trecho de código para exemplificar como faço:\n\n```js\n// components/Layout/styled.js\n\nimport styled from 'styled-components'\nimport media from 'styled-media-query'\n\nexport const LayoutWrapper = styled.section`\n display: flex;\n\n ${media.lessThan('large')`\n flex-direction: column;\n padding-top: 4.125rem;\n `}\n`\n\nexport const LayoutMain = styled.main`\n background: var(--background);\n min-height: 100vh;\n padding: 0 3.75rem 0 20rem;\n transition: background 0.5s, color 0.5s;\n width: 100%;\n\n ${media.lessThan('large')`\n padding: 0 0 3rem 0;\n `}\n`\n```\n\nNesse arquivo, eu crio e exporto minhas classes e então para utilizar, faço assim:\n\n```jsx\n// components/Layout/index.js\n\nimport * as S from './styled'\n\nconst Layout = ({ children }) => (\n \n \n \n \n \n {children}\n \n \n \n \n)\n```\n\nEu retirei alguns trechos não referentes ao `styled-components` para facilitar a leitura. Mas perceba que eu faço um import de tudo que tem em `./styled` como `S`. Assim os componentes que iniciam por `\n Home\n\n```\n\nBasta você passar qual tipo de animação que deseja (`fade`, `swipe`, `cover`, `paintDrip`) e alguns outros parâmetros como `direction` e `duration`.\n\n### Highlight Code\n\nPara mostrar o código do jeito estiloso acima, eu utilizo o [PrismJS](https://prismjs.com/). E no Gatsby fica ainda mais fácil, pois existe o [gatsby-remark-prismjs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/), que faz o parser do código que tá no Markdown e já estiliza para mim. Super simples de configurar e funciona bem fácil.\n\n### Lazy loading e otimização de imagem\n\nSe você reparou nas imagens do post, elas são carregadas só quando você se aproxima e além disso, para num ficar um espaço vazio e criar aqueles pulos, eu também carrego um thumb bem pequeno e com o tamanho final definido, isso ainda dá aquele efeito de blur, comum no Medium e outros sites. Outra coisa que também é feito, é que eu carrego diferentes tamanhos de imagem de acordo com a tela, melhorando muito a performance.\n\nPara fazer todas essas otimizações, eu utilizo o **incrível** [Gatsby Image](https://using-gatsby-image.gatsbyjs.org/), que usa o Sharp por debaixo dos panos para gerar as imagens para nós.\n\n### PWA\n\nPara fazer meu blog virar um PWA foi muito muito fácil. Sério mesmo, não tive nem que me preocupar com o que salvar no Service Worker ou se estava cacheando certo. Para isso, eu usei 2 plugins, um para criar o manifest, que é o [gatsby-plugin-manifest](https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/) e o outro para fazer a criação do Service Worker e salvar minhas páginas, que é o [gatsby-plugin-offline](https://www.gatsbyjs.org/packages/gatsby-plugin-offline/). Esses dois pacotes são oficiais do Gatsby e já até vem inclusos em alguns starters.\n\n## Performance\n\nComo disse no início, o Gatsby faz várias otimizações no momento do build do site. Ele minifica tudo, separa o css para ter critical inline, faz renderização assíncrona, além de fazer preload dos links, para ter uma sensação de abertura instantânea quando clicamos. Com isso, se [medirmos a performance com o Lighthouse](https://willianjusten.com.br/medindo-performance-do-seu-site-com-lighthouse/), vamos ter notas super altas. Segue abaixo o meu:\n\n![Uma imagem mostrando notas 100 em todos os quesitos no lighthouse](/assets/img/ligthouse-perf-novo.png)\n\n## Conclusão\n\nBom galera, espero que tenham curtido o visual novo e as escolhas que eu fiz. Se você acha que algo poderia ser diferente ou melhor, por favor, não deixe de compartilhar ali nos comentários ou então nas minhas redes sociais. E se você gostaria de um curso sobre o assunto, deixa nos comentários também, para eu saber o interesse =)\n" }, { "path": "posts/making-of-parte-1.md", "content": "---\nlayout: post\ndate: 2015-01-03T07:54:23.000Z\ntitle: Making of - Parte 1\ndescription: Quais ferramentas foram utilizadas para montar esse blog e o porquê\n de ter escolhido cada uma delas.\nmain-class: jekyll\ntags:\n - jekyll\n - gulp\n - stylus\n - svg\n---\n\nExiste uma continuação desse post em [Making of - parte 2](https://willianjusten.com.br/making-of-parte-2/).\n\n## Antes de qualquer coisa...\n\nBom, antes de começar explicando como criei esse blog, algumas ideias e o que aconteceu durante o processo, é melhor eu me apresentar né?\n\nMeu nome é Willian Justen de Vasconcellos, tenho 24 anos (nada de piadinhas...) e sou Desenvolvedor Front End no [Queremos!](https://queremos.com.br)/[WeDemand](https://wedemand.com). Trabalho há cerca de 3 anos na área de web, tendo finalizado meu curso de Tecnologia da Informação na Faeterj-Petrópolis no ano de 2014. Mas curiosamente essa não foi minha primeira faculdade, eu também fiz **Química Industrial** na Uff, sim, você leu certo, eu realmente fiz Química...\nE por que eu trabalho com web agora? Ah...porque web é incrível e a facilidade em aprender cada dia mais, me deixa mais feliz com a escolha que fiz.\n\nEu pretendo escrever o máximo que der e sobre tudo, desde o avançado até dicas rápidas para iniciantes. O foco principal será em tecnologias Front End, mas isso não impede que um dia escreva sobre Python ou alguma técnica de estudo. Espero que gostem do blog e todo feedback é bem vindo =)\n\n## Tecnologias utilizadas\n\nEu sou um cara muito curioso e gosto sempre de coisas novas, então eu utilizei:\n\n- [Jekyll](http://jekyllrb.com/) - como a base de todo o blog, sendo meu gerador de páginas estáticas.\n- [GulpJS](http://gulpjs.com/) - meu automatizador favorito, que utilizo para basicamente todas as tarefas tediosas do frontend.\n- [SVG](http://pt.wikipedia.org/wiki/SVG) - ícones escaláveis, fáceis de utilizar e muito leves.\n- [Stylus](http://learnboost.github.io/stylus/) - tem pre-processador css mais bonito que stylus? Totalmente flexível, completo e o mais importante, totalmente em Javascript =)\n- [Jeet](http://jeet.gs) - sistema de grid feito em stylus.\n- [Kouto Swiss](http://kouto-swiss.io/) - um framework para stylus.\n- [Rupture](http://jescalan.github.io/rupture/) - uma ferramenta para facilitar o trabalho com media queries no stylus.\n- [Github Pages](https://pages.github.com/) - onde está hospedado esse lindo blog (se você não achou bonito, se retire! Brincadeira, pode continuar, só me manda um feedback do que não gostou).\n\n### Por que de cada uma dessas tecnologias?\n\nEu acho bastante interessante quando o desenvolvedor explica o porquê dele ter usado tal ferramenta/tecnologia ao invés de outra mais famosa ou mais leve, etc... Por isso, vou explicar rapidamente cada escolha minha. Talvez eu crie posts mais detalhados de algumas dessas tecnologias.\n\n#### Jekyll\n\nApesar de eu trabalhar atualmente com JS, eu acabei optando pelo Jekyll pela facilidade de iniciar um blog e fazer o deploy no github pages, que inclusive compila os arquivos lá mesmo se eu quiser. Outro fator de ter escolhido o Jekyll foi a sua comunidade, ele atualmente é o gerador estático com maior número de stars(dobro do segundo que é inspirado nele, o Octopress) e também o com maior número de forks, tudo isso você pode olhar nessa [listinha aqui](https://www.staticgen.com/).\n\nE para iniciar o blog, basta ter o ruby instalado na máquina, se você é usuário Mac já vem instalado por padrão (mas aconselho fortemente a atualizar), se você é usuário Linux, algumas distribuições já vem por padrão e outras é só instalar via gerenciador de pacotes. Agora, se você é usuário Windows, muda essa bosta (brincadeirinha xD), mas vai ter algumas dores de cabeça para fazer tudo funcionar... Eu não deveria, mas vou te ajudar usuário Windows, segue o link desse cara que vai resolver o seu problema [Jekyll Windows - Juthilo](http://jekyll-windows.juthilo.com/)\n\nDurante a criação desse blog, eu cheguei a falar sobre ele para alguns amigos, quando disse que estava utilizando Jekyll, alguns me pediram dicas de como usar e outras coisas mais. Então eu vou criar um post mais completo, explicando não só o passo a passo para instalar, mas como ele funciona, ferramentas para se trabalhar melhor com ele e outras coisinhas mais. Se você tem interesse em saber mais sobre o Jekyll, aguarda que logo logo tem post sobre ele.\n\n#### GulpJS\n\nDefinitivamente meu automatizador favorito, seja pela velocidade, seja pela facilidade com que é de se escrever para ele. Junto com ele utilizei os seguintes plugins:\n\n- [Browser Sync](https://browsersync.io/docs/gulp) - permite sincronizar todos os meus aparelhos e ainda fazer livereloading, depois que conheci essa ferramenta me apaixonei, se você não conhece, corre para olhar, é fantástica.\n- [Gulp-stylus](https://www.npmjs.com/package/gulp-stylus) - para compilar meu lindo Stylus\n- [Gulp-uglify](https://www.npmjs.com/package/gulp-uglify) - minificar o js\n- [Gulp-concat](https://www.npmjs.com/package/gulp-concat) - concatenar os arquivos\n- [Gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) - minificar todas as minhas imagens\n\nSe quiser entender melhor como eu fiz toda essa bagunça funcionar, só abrir o meu [Gulpfile.js](https://github.com/willianjusten/will-jekyll-template/blob/gh-pages/gulpfile.js)\n\n#### SVG\n\nPara os que me conhecem, sabem que sou apaixonado por SVG e por isso criei a [awesome-svg](https://github.com/willianjusten/awesome-svg), que é um conjunto de informações relacionadas a SVG, desde seu uso básico até opções mais avançadas, se você quer aprender SVG, te aconselho fortemente a ler.\n\nPara esse blog, eu não poderia deixar de usar SVG, sendo assim, todos os ícones utilizados no blog são feitos em svg. Para tal, eu criei uma partial do Jekyll contendo as `defs` de todos os ícones e então chamei cada ícone que eu desejava usando o `use`, conforme exemplo abaixo:\n\n```html\n\n```\n\nEu poderia ficar um post inteiro explicando os motivos de se utilizar SVG, mas os motivos para utilizar SVG no blog foram:\n\n1- Mais leve, segue o arquivo SVG minificado utilizado, tendo somente 6.52kb, [svg-icons.html](https://github.com/willianjusten/will-jekyll-template/blob/gh-pages/_includes/svg-icons.html)\n\n2- [Funciona bem na maioria dos navegadores](http://caniuse.com/#search=svg) (ao menos os que desejo alcançar) e não tem erros bizarros quando demora para carregar, como os font-icons. Segue uma imagem com um bug bem comum dos font-icons.\n\n![Imagem mostrando o Bug que o font-icon tem quando demora a carregar ou não é compatível](https://i.stack.imgur.com/vZhku.png)\n\n#### Stylus\n\nPraticamente o pre-processador mais desconhecido entre os grandes e na minha opinião o melhor deles também. Versátil, com centenas de opções e ainda fácil para quem já escreve seguindo indentação, como feito em Python, Ruby, Jade. Fui conhecer essa belezura ano passado através de um post da Ju Gonçalves, ela se não me engano foi uma primeiras pessoas que eu vi falando sobre Stylus no Brasil, aqui fica meu obrigado por ter me mostrado <3\n\nJunto ao Stylus eu utilizo o Jeet, Rupture e Kouto Swiss, como eu disse lá em cima. O Jeet por ser um grid semântico (lê-se nada de col-md-xs-lg-motherfucker). O Rupture, para evitar de escrever @media direto e o Kouto Swiss, que possui várias e várias funções bem legais para trabalhar. Segue abaixo um exemplo de um trecho utilizando o poder desses 3 em conjunto:\n\n```css\n.datetime\n col(1/6)\n text-align\n center\n + below(cut)\n stack()\n .day\n mainFont(800)\n color\n main\n font-size\n rem(80px)\n line-height\n 1.6\n + below(cut)\n stack()\n .month-year\n color\n black\n font-size\n rem(18px)\n .content\n col(5/6)\n + below\n + below(cut)\n stack();\n```\n\nA linha `2` mostra um dos poderes do Jeet, onde eu defino que o elemento `.datetime` irá ocupar cerca `1/6` de todo o `container`. Se estivéssemos trabalhando com o bootstrap seria similar a classe `.col-md-2`, que representa `2` colunas num total de `12`. As linhas `5`, `12` e `20` também são do Jeet e esse `stack`, quer dizer que os elementos devem ser empilhados e o elemento que recebe essa função passa a receber um `width: 100%`.\n\nAs linhas `4`, `11` e `19` mostram a utilização do Rupture, onde o `+below(cut)` é compilado para `@media only screen and (max-width:37.5rem)`, onde `37.5rem` é o valor da variável `cut`. O Rupture permite utilizar palavras como `below`, `above`, `between`, `at`, o que é muito mais fácil de se escrever e entender do que ficar colocando várias medias queries.\n\nAs linhas `9` e `15` mostram uma das funções do Kouto Swiss, que é a conversão de `px` para `rem`, que é uma unidade de medida mais adaptável, se você nunca ouviu falar, dá uma lidinha nesse artigo do Tableless [Qual unidade utilizar – Pixel, EM ou REM ](https://tableless.com.br/unidade-pixels-em-rem/).\n\n#### Github Pages\n\nEu não queria ter problemas com servidor, seja para configurá-lo, seja por problemas dos provedores. Então, a primeira coisa que me veio a cabeça foi o Github Pages, ele é simples, fácil, serve perfeitamente para os meus propósitos e o e melhor, ainda é de graça! O Pages hospeda sites estáticos, ou seja, só arquivos html, se você estava pensando em passar todos os seus clientes com site php para lá, vai tirando o cavalinho da chuva.\n\nO Pages te dá duas opções, criar páginas pessoais, a partir de um repositório com o seu nome, exemplo: `willianjusten.github.io` ou através de um branch `gh-pages` num repositório de um projeto qualquer. Além disso, ele também permite configurar um domínio próprio a partir do CNAME.\n\n## Concluindo essa primeira parte\n\nBom, essa foi uma explicação básica de cada uma das tecnologias empregadas e os motivos de ter escolhido, é importante lembrar que foram escolhas minhas e dentro de um projeto específico. Não vá pensando que essa é a combinação perfeita para tudo, porque não é. Se tiverem alguma dúvida quanto a algo que eu falei, só mandar um comentário aqui embaixo ou se estiver muito tímido, pode mandar uma DM no meu twitter [@willian_justen](https://twitter.com/willian_justen) ou um email para [willianjustenqui@gmail.com](mailto:willianjustenqui@gmail.com). Na segunda parte eu irei falar um pouco das técnicas que utilizei e até algumas descobertas que fiz pelo caminho. Se não quiser perder nenhum post, só assinar o [RSS](https://willianjusten.com.br/sitemap.xml).\n" }, { "path": "posts/making-of-parte-2.md", "content": "---\nlayout: post\ndate: 2015-01-05T00:21:31.000Z\ntitle: Making of Parte 2\ndescription: Aqui vou mostrar o passo a passo de como criei o blog em Jekyll,\n usando Gulp e Stylus e coloquei para funcionar no Github Pages.\nmain-class: jekyll\ntags:\n - jekyll\n - gulp\n - stylus\n - github pages\n---\n\n## Introdução\n\nNa primeira parte eu passei as tecnologias que eu utilizei e o porquê delas, nessa segunda parte eu vou mostrar o passo a passo para montar o ambiente e criar o seu projeto a partir do zero.\n\nSe você quiser pular todo o blá blá blá e ver só o [código fonte](https://github.com/willianjusten/will-jekyll-template/)\n\n**Aviso! Este post é bastante extenso, vai lá pegar seu café esperto e volta!**\n\n![Uma xícara de café com a espuma fazendo um desenho de um gato fofinho](/assets/img/making-of-parte-2/cafe-de-gato.jpg)\n\n### Instalando o Jekyll\n\nPrimeiro de tudo foi necessário criar a base, como disse preferi usar o `Jekyll`, mesmo ele sendo em `Ruby`. Como utilizo Mac OS, ele já possuía o ruby instalado por padrão no meu Yosemite, mas como era uma versão mais velha e lenta, preferi atualizar. Vou dar aqui o passo considerando um Mac novo, se algumas dessas etapas você já tiver feito, só passar para a próxima. Caso utilize Linux segue esses passo [aqui](http://michaelchelen.net/81fa/install-jekyll-2-ubuntu-14-04/) e caso use Windows tem [aquele guia que passei](http://jekyll-windows.juthilo.com/)\n\n**Passo 1:** Instalar o [Homebrew](http://brew.sh/)\n```bash\nruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"\n```\n\n**Passo 2:** Instalando o [Ruby 2.2](https://www.ruby-lang.org/)\n\nIremos utilizar o [rbenv](https://github.com/sstephenson/rbenv) que permite trabalhar com diferentes ambientes de Ruby.\n\n```bash\nbrew install rbenv ruby-build\n\n# Adicionando o rbenv ao bash para que seja carregado toda vez que abrir o terminal\necho 'if which rbenv > /dev/null; then eval \"$(rbenv init -)\"; fi' >> ~/.bash_profile\nsource ~/.bash_profile\n\n# Instalando o Ruby 2.2.0 e definindo como versão padrão\nrbenv install 2.2.0\nrbenv global 2.2.0\n\nruby -v\n# ruby 2.2.0\n```\n\n**Passo 3:** Após instalado o ruby, é chegada a vez do Jekyll de fato, o processo é fácil e rápido. Se demorar um pouco e nada acontecer na tela, espere mais um pouco, o ruby infelizmente não dá um feedback durante as instalações e aí acaba dando impressão de travado mesmo...\n\n```bash\n# Instalando o Jekyll\ngem install jekyll\n\n# Iniciando um projeto com ele\njekyll new meu-blog-lindo\n```\n\nCom esses comandos já temos toda a estrutura de pastas do jekyll, de acordo com a imagem abaixo.\n\n![Estrutura de pastas do Jekyll](/assets/img/making-of-parte-2/pastas-jekyll.png)\n\n### Organizando as pastas\n\nComo podemos notar, o Jekyll já cria uma estrutura bem legal e organizada. Vou explicar resumidamente o que é cada uma e como funciona, mas se quiser algo ainda mais detalhado, só ver a [Documentação](http://jekyllrb.com/docs/home/).\n\n* `_includes`: são trechos que se repetem ao longo do site e podem ser incluídos sem ter que digitar tudo.\n* `_layouts`: como o nome já diz, é a estrutura básica das páginas, em geral são 3 tipos: `default` para a página de inicial ou listagem de posts. A `page` que serve para criação de páginas diferenciadas com qualquer conteúdo e `post`, que é a página de posts.\n* `_posts`: onde iremos escrever nossos posts, o padrão para escrever é em [Markdown](http://daringfireball.net/projects/markdown/syntax)\n* `_sass`: os arquivos que geram o css, se você preferir trabalhar em [sass](http://sass-lang.com/), o próprio jekyll compila para você.\n* `css`: pasta para onde vão os arquivos gerados pelo sass.\n* `_config.yml`: o arquivo de configurações do seu blog, qualquer dado universal ao blog, deve ser colocado lá. Assim como outras definições, como qual tipo de markdown usar, excludes e etc.\n* `about.md`: um arquivo do tipo `page` que irá gerenciar uma página /about\n* `feed.xml`: arquivo para gerar o feed para o seu blog, essencial para que as pessoas possam seguir seu blog com mais facilidade.\n* `index.html`: A página inicial do seu blog\n\nQuando você compila estes arquivos com o Jekyll, ele gerá uma nova pasta `_site`, que irá conter todos os arquivos do site já gerados e estáticos. Pastas iniciadas pelo *underline* não são compiladas e passadas para a pasta `_site`. Outra forma de excluir arquivos é adicionando no `_config.xml`. É muito importante adicionar a pasta `node_modules` nesse exclude, senão o jekyll irá pensar que precisa copiar todo o conteúdo, o que estragaria muito com o desempenho.\n\n```ruby\nexclude: ['package.json', 'src', 'node_modules']\n```\n\nComo eu também precisei trabalhar com javascript, stylus e também adicionar imagens. Criei uma pasta `src` contendo as pastas `js`, `styl` e `img`. Durante a compilação esses arquivos e pastas são jogados para uma pasta `assets`.\n\n### Usando o GulpJS\n\nPara fazer a compilação do meu Stylus, concatenar meu javascript, minificar imagens, fazer livereloading, enfim, todas as tarefas básicas, resolvi utilizar o [GulpJS](http://gulpjs.com/). Ele funciona com o [NodeJS](http://nodejs.org/), se você não tem na sua máquina se mata, só baixar e instalar.\n\nTendo o NodeJS já instalado, basta ir no terminal e iniciar o projeto:\n\n```bash\nnpm init\n```\n\nEle vai te fazer umas perguntas, vai seguindo os passos e no final é só confirmar e isso irá gerar um arquivo `package.json` com os dados preenchidos. Depois basta instalar os plugins necessários, que eu já falei no [post anterior](https://willianjusten.com.br/making-of-parte-1/).\n\n```bash\nnpm install --save-dev gulp gulp-uglify gulp-concat gulp-stylus autoprefixer-stylus browser-sync gulp-imagemin gulp-plumber jeet kouto-swiss rupture\n```\n\nDepois de tudo instalado precisamos fazer nosso `Gulpfile.js`, que irá ter todas as tasks para automatizar o nosso sistema.\n\nPara ser expert em Gulp, basta saber suas funções principais e que ele trabalha com pipes. Sabendo isso, você consegue criar qualquer tarefa.\n\n* `gulp.task(nome, fn)`: registra uma tarefa com um nome.\n* `gulp.run(tarefas)`: executa todas as tarefas sequenciamente\n* `gulp.watch(tipo de arquivo, fn)`: fica vigiando o arquivo e roda a função caso ele se modifique\n* `gulp.src(pasta ou arquivo)`: indica qual pasta ou arquivo será lido para a tarefa\n* `gulp.dest(pasta)`: diz para onde o arquivo final precisa ir\n\n#### Parabéns! Você é um expert em Gulp!\n\n![Cara de Gato espantado com a frase Como Assim?](/assets/img/making-of-parte-2/como-assim.jpg)\n\nIsso mesmo! É só isso que você precisa saber, sabendo disso, mão na massa!\n\n#### Primeiro definir as variáveis e chamar as dependências\n\n```js\nvar gulp = require('gulp'),\n plumber = require('gulp-plumber'),\n browserSync = require('browser-sync'),\n stylus = require('gulp-stylus'),\n uglify = require('gulp-uglify'),\n concat = require('gulp-concat'),\n jeet = require('jeet'),\n rupture = require('rupture'),\n koutoSwiss = require('kouto-swiss'),\n prefixer = require('autoprefixer-stylus'),\n imagemin = require('gulp-imagemin'),\n cp = require('child_process');\n\nvar messages = {\n jekyllBuild: 'Running: $ jekyll build'\n};\n```\n\n#### Definir as tasks do jekyll para dar build e rebuild a cada arquivo atualizado\n\n```js\n/**\n * Monta o site do Jekyll\n */\ngulp.task('jekyll-build', function (done) {\n browserSync.notify(messages.jekyllBuild);\n return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})\n .on('close', done);\n});\n\n/**\n * Refaz o site e atualiza a página\n */\ngulp.task('jekyll-rebuild', ['jekyll-build'], function () {\n browserSync.reload();\n});\n\n/**\n * Espera até que o jekyll-build seja executado e então levanta o\n * servidor utilizando o _site como pasta raiz\n */\ngulp.task('browser-sync', ['jekyll-build'], function() {\n browserSync({\n server: {\n baseDir: '_site'\n }\n });\n});\n```\n\n#### Compilar o Stylus\n\nAqui ficam dois detalhes **muito importantes**, na linha `3`, eu utilizo o `.pipe(plumber())`, essa função serve para receber os erros, mas não matar o processo do Gulp. O Gulp infelizmente fecha caso alguma tarefa dê erro e isso pode ser frustrante quando você ainda está digitando e ele acusa erro. Para evitar isso, utilizamos o `gulp-plumber`, que é uma mão na roda.\n\nE na linha `5`, eu faço as chamadas dos componentes do stylus, assim fica mais fácil de chamar no arquivo stylus, ao invés de colocar chamada para `node_modules` eu simplesmente coloco `@import \"jeet\"`.\n\n```js\ngulp.task('stylus', function(){\n gulp.src('src/styl/main.styl')\n .pipe(plumber())\n .pipe(stylus({\n use:[koutoSwiss(), prefixer(), jeet(),rupture()],\n compress: true\n }))\n .pipe(gulp.dest('_site/assets/css/'))\n .pipe(browserSync.reload({stream:true}))\n .pipe(gulp.dest('assets/css'))\n});\n```\n\n#### Minificar e concatenar o JS\n\nNão podemos confundir a ordem aqui, primeiro devemos concatenar todos os arquivos e só depois minificar. O processo de `uglify` além de deixar tudo em uma linha só, muda também o nome de varíaveis e funções para diminuir ainda mais o arquivo. Se você minificar tudo primeiro e depois concatenar, as vezes pode correr o risco de haver conflito. Outro detalhe importante, a concatenação é feita em ordem alfabética, se você tiver um arquivo `a` que depende de `z`, melhor modificar seus arquivos para nomes numerados para que o Gulp concatene na ordem que você deseja. Caso contrário, pode dar erro de dependência. Um erro comum é um plugin que precisa de Jquery estar acima dele e acusar que a variável `$` não foi definida.\n\n```js\ngulp.task('js', function(){\n return gulp.src('src/js/**/*.js')\n .pipe(plumber())\n .pipe(concat('main.js'))\n .pipe(uglify())\n .pipe(gulp.dest('assets/js/'))\n});\n```\n\n#### Otimizar imagens\n\n```js\ngulp.task('imagemin', function() {\n return gulp.src('src/img/**/*')\n .pipe(plumber())\n .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))\n .pipe(gulp.dest('assets/img/'));\n});\n```\n\n#### Vigiar todos os arquivos e Tarefa default\n\nA tarefa `default` é determinada para que quando se digite somente `gulp` no terminal, rode a sequência de funções desejadas, neste caso fazemos a compilação de nossos assets primeiro, depois disparamos o server e por último ficamos assintindo para possíveis mudanças.\n\n```js\ngulp.task('watch', function () {\n gulp.watch('src/styl/**/*.styl', ['stylus']);\n gulp.watch('src/js/**/*.js', ['js']);\n gulp.watch('src/img/**/*.{jpg,png,gif}', ['imagemin']);\n gulp.watch(['index.html', '_includes/*.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);\n});\n\ngulp.task('default', ['js', 'stylus', 'imagemin', 'browser-sync', 'watch']);\n```\n\nProntinho, agora basta digitar `gulp` no seu terminal e ele irá rodar todas as tarefas e levantar o servidor em `localhost:3000`, conforme a imagem abaixo.\n\n![Imagem mostrando o processo do Gulp no terminal](/assets/img/making-of-parte-2/terminal-gulp.png)\n\nDepois disso, basta ter criatividade e montar seu blog com o layout mais legal possível e vai ficar faltando somente a última etapa.\n\n### Subindo para o Github Pages\n\nPara subir os arquivos para o Github é bastante simples, mas para isso você precisa ter o [Git](http://git-scm.com/) instalado na sua máquina. Teste o comando `git` na sua máquina, se ele disser que o comando não existe, faça o download e instale, se ele mostrar a possibilidade de comandos, quer dizer que está instalado =)\n\nOutra dependência é que você cadastre uma conta no [Github](https://github.com/). Tendo isso pronto, é só seguir os seguintes passos:\n\n#### Passo 1: Crie um repositório\n\n![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/criar-repo.png)\n\nPara que funcione no branch `master`, você precisa criar utilizando o `seunomedeusuario.github.io`, no meu caso ficou `willianjusten.github.io`.\n\n![Imagem mostrando como se cria um repositório](/assets/img/making-of-parte-2/nome-repo.png)\n\n#### Passo Final:\n\n```bash\n# Iniciar um repositório git na pasta do projeto\ngit init\n\n# Adicionar todos os arquivos\ngit add -A\n\n# Commitar os arquivos\ngit commit -m \"Commit Inicial\"\n\n# Adicionar o repositório remoto\ngit remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git\n\n# Subir seu lindo blog\ngit push -u origin master\n```\n\nCom esses passos o seu Blog já está no Github Pages e se tudo estiver certinho em 20-30 minutos você já pode acessar através da url `seunomedeusuario.github.io`.\n\n## Conclusão\n\nUffa, esse foi um post gigante, mas até o mais leigo se seguir esses passos direitinhos irá conseguir construir seu próprio blog em Jekyll. Se estiver faltando algum detalhe ou algum erro no texto ou código, por favor digam nos comentários, para que eu possa corrigir o mais rápido possível. Se quiserem saber sobre algum determinado assunto, só mandar sugestões =)\n" }, { "path": "posts/manipulando-svg-com-js.md", "content": "---\nlayout: post\ndate: 2015-09-12T00:14:39.000Z\ntitle: \"#14 - Manipulando SVG com JS\"\ndescription: Veja como manipular SVG com JS e algumas libs para brincar.\nmain-class: svg\ntags:\n - svg\n - js\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Introdução\n\nCaramba! Fazia tempo que eu não escrevia hein! Como estou subindo a serrinha para Petrópolis, resolvi aproveitar esse tempo e escrever um pouco. E advinha sobre o quê? Sim, sobre SVG!\n\nComo de costume, estou ouvindo meu lindo Spotify e apaixonado com a lista de músicas dessa semana que prepararam para mim naquela playlist \"Descobertas da Semana\", dentre as bandas estão: Mumford & Sons, RAC, Warpaint, The Kooks, etc.\n\nEsse post será bem simples e introdutório, até mesmo porque se fosse sobre tudo, esse seria o maior post da história, visto que existem dezenas de bibliotecas JS para manipular SVG. O objetivo é mostrar como funciona, o que existe por aí e te fazer querer brincar além disso.\n\n## Em que momentos devo usar JS?\n\nComo já dito em [posts anteriores](https://willianjusten.com.br/series/), tem como animar SVG com CSS e também com SMIL, então precisamos saber uns motivos para ter mais essa opção né? E elas são:\n\n- Se você estiver trabalhando com dados via JSON (em geral gráficos).\n- Quando precisa de alguma lógica mais complexa por trás de acordo com certas condições do contexto.\n- Quando precisa de uma grande compatibilidade, inclusive com IE velho.\n- Para animações mais complexas, com muitos passos e manipulação em diversos elementos.\n\n## O que eu posso fazer com JS?\n\nBom...**TUDO!!** Sim, isso mesmo que você leu. Com JS nós podemos criar um SVG sem auxílio de uma ferramenta de edição chupa Illustrator. Podemos estilizar e também animar.\n\n## SVG e o DOM\n\n### Seleção e Manipulação de estilos\n\nComo já sabemos, o SVG quando incorporado numa página de html5, se comporta como se fossem tags novas e, com isso, ele como um todo passa a ser reconhecido no DOM, permitindo sua manipulação.\n\nVamos considerar o seguinte SVG:\n\n```html\n\n \n \n\n```\n\nAtravés do javascript podemos fazer o seguinte:\n\n```js\nvar icone = document.getElementById('icone-lindao')\nvar curva = document.getElementById('curva')\nvar outraCurva = document.getElementById('outra-curva')\n```\n\nCom isso, já teríamos todos os elementos selecionados, para ter certeza que selecionou mesmo o elemento, basta imprimir no console.\n\n```js\nconsole.log(icone)\nconsole.log(curva)\nconsole.log(outraCurva)\n```\n\nSabendo disso, podemos aproveitar do nosso lindo javascript e manipular esse elemento como se ele fosse um outro qualquer do meu documento. Para estilizar, podemos usar o `elemento.style` e brincar com suas propriedades. Um exemplo seria mudar a cor do preenchimento (fill) do componente.\n\n```js\ncurva.style.fill = '#FAFAFA'\n```\n\nAlém de adicionar estilos diretos, podemos adicionar uma classe/id ao elemento e deixar os estilos a cargo do próprio CSS. Para adicionar classes via JS, você pode usar de várias formas, aqui estou usando o `classList`, que acho bem fácil.\n\n```html\n\n\n\n```\n\nSegue um exemplo fazendo algumas interações com um SVG:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\n### Criação e Manipulação de propriedades do SVG\n\nSim, nós podemos criar SVG direto com JS e manipular essas propriedades! Para criar um elemento SVG, precisamos entender alguns métodos importantes e suas informações.\n\nComo dito no [post de estrutura](https://willianjusten.com.br/a-estrutura-do-svg/), o SVG possui um Namespace que o define como um XML do tipo SVG, este é:\n`http://www.w3.org/2000/svg`.\n\nE para criar elementos SVG, utilizamos o [createElementNS](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElementNS). A sintaxe é bastante simples:\n\n```js\nvar element = document.createElementNS(namespaceURI, qualifiedName)\n```\n\nOnde `namespaceURI` é o namespace do nosso SVG e o `qualifiedName` é o nome do elemento, por exemplo, se queremos criar um elemento `SVG` iremos usar esse nome, caso queiramos um círculo, vamos usar `circle`.\n\nApós criado o elemento, precisamos definir atributos para o mesmo e para isso usamos o [setAtributeNS](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/setAttributeNS). Que tem a seguinte sintaxe:\n\n```js\nelement.setAttributeNS(namespace, name, value)\n```\n\nO `namespace` aqui permanece o mesmo padrão para SVG. O `name` é o atributo que você quer definir, o raio de um círculo seria o `r`, por exemplo. E `value` é claro, é o valor dessa propriedade.\n\nAbaixo segue um exemplo de como criar um círculo usando esses simples métodos:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nVocê consegue deixar algo mais interativo, editando alguma propriedade usando slides, eventos de botões, etc. Segue um exemplo movimentando um elemento num grid:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\n## Bibliotecas de Manipulação\n\nApesar de ser bem simples de fazer as manipulações com JS puro, pode se tornar muito trabalhoso quando precisamos trabalhar com muitos elementos e animações mais trabalhosas. Para facilitar isso, é claro que nasceram várias bibliotecas. Algumas bem específicas para SVG e outras bem genéricas.\n\nVou listar aqui algumas bibliotecas bem bacanas e suas principais vantagens:\n\n### Snap.svg\n\nTalvez uma das mais famosas bibliotecas de SVG que tem, criada pelo [Dmitry Baranovski](https://twitter.com/DmitryBaranovsk) e mantida pela Adobe, é uma biblioteca que permite manipulação completa do SVG, desde a criação, estilização e animações complexas. Perfeita para quem quer trabalhar com ilustrações e não tem preocupação com suporte a I8 e abaixo.\n\n[Link do Snap.svg](http://snapsvg.io/)\n\n### RaphaelJS\n\nUma das mais antigas libs de SVG que tem, também criada pelo Dmistry, tem como premissa funcionar em navegadores muito velhos, inclusive o IE6. Possui uma API bastante simples de trabalhar e permite também criar, animar e estilizar o SVG.\n\n[Link do RaphaelJS](https://github.com/DmitryBaranovskiy/raphael)\n\n### D3\n\nÉ uma biblioteca para manipular documentos baseados em data. Perfeito para criação de gráficos, desde os simples até os mais trabalhados. Possui uma enorme gama de plugins, exemplos e uma ótima documentação. Para quem deseja trabalhar mais a sério com dados e SVG, essa é a lib mais indicada.\n\n[Link do D3](http://d3js.org/)\n\n### SVG.JS\n\nUma biblioteca bastante leve que permite também bastante coisa com SVG, como criação de novos elementos, estilizações e animações. Indicada para quem não quer carregar uma lib muito grande para fazer coisas um pouco mais simples.\n\n[Link da SVG.JS](http://svgjs.com/)\n\n### Bonsai JS\n\nOutra biblioteca bem leve, mas que permite bastante coisa. Tem uma API bem simples e interativa, podendo criar até joguinhos simples com ela.\n\n[Link da BonsaiJS](http://bonsaijs.org/)\n\n### Greensock GSAP\n\nEssa não é uma biblioteca específica de SVG, mas ela é incrível com qualquer coisa e merecia estar aqui em destaque. Essa lib tem uma das melhores APIs para animação na web. Possuindo ótima documentação e bons exemplos, aconselho muito.\n\n[Link do GSAP](http://greensock.com/gsap)\n\n## Conclusão\n\nBom galera, eu mostrei aqui o básico de como brincar com o SVG e JS e algumas bibliotecas, agora é você partir para começar a brincadeira. Quem fizer exemplos legais, manda aí nos comentários, adoro ver coisinhas feitas com SVG <3\n" }, { "path": "posts/mantendo-seu-projeto-atualizado-com-dependabot-e-github-actions.md", "content": "---\nlayout: post\ndate: 2020-08-08T08:46:44.000Z\ntitle: Mantendo seu projeto atualizado com Dependabot e Github Actions\ndescription: Atualizar dependências é algo bem chato e demorado, mas não precisa ser.\nmain-class: dev\ntags:\n - github\n - boas praticas\n - \"\"\n---\n## Introdução\n\nFala pessoal, mantendo a ideia de ter vídeo, mas também ter post escrito, hoje eu vou falar sobre um vídeo que fiz recentemente que é o [Mantendo projeto atualizado com Dependabot e Github Actions](https://youtu.be/zV9yZZzZGpU).\n\nA ideia desse vídeo/post veio de um pedido de um aluno lá [no Slack dos cursos](https://willianjusten-cursos.slack.com/archives/C016MQE9CAD/p1596728688141600). Ele estava perguntando como fazer para manter o [boilerplate criado no curso React Avançado](https://github.com/React-Avancado/boilerplate) todo atualizado.\n\nMas vamos lá, enquanto eu escrevo esse post, eu vou ouvindo uma playlist chamada [Alone Again](https://open.spotify.com/playlist/37i9dQZF1DWX83CujKHHOn?si=GqJt0lTZSGywtV0G6VCt6A), que tem umas músicas calmas, eu confesso que estou de péssimo humor hoje, então talvez isso me acalme.\n\n## Versão em vídeo\n\nPara quem quiser assistir a versão em vídeo desse post, segue aí:\n\n\n\n## Sobre o Dependabot\n\nO primeiro carinha que vamos mexer é o [Dependabot](https://dependabot.com/). Para quem não conhece, esse bot nasceu fora do Github como uma forma de indicar pacotes que poderiam apresentar falhas de segurança e o mesmo enviava um Pull Request com as devidas correções para que pudessem ser revisadas.\n\nO bot começou a ser tão utilizado e funcionar tão bem, que a Microsoft/Github decidiu comprar para que o bot passasse a ser totalmente free e mais fácilmente integrado ao sistema, o que foi um grande ganho para nós desenvolvedores =)\n\n## Configurando o Dependabot\n\nNós vamos utilizar o [Dependabot](https://dependabot.com/) então para que ele não somente busque os patches de segurança, mas também busque por atualizações das nossas dependências. E esse processo é bem simples e pode ser feito de duas maneiras:\n\n### Utilizando via UI\n\nPara usar via UI, você precisa se [cadastrar](https://app.dependabot.com/auth/sign-up) no site e logo após se cadastrar, você vai ver uma tela similar a essa:\n\n![Uma tela branca com um texto ao centro dizendo que ainda não adicionou nenhum repositório e um botão azul abaixo pedindo para adicionar.](/assets/img/dependabot-ui-1.png)\n\nBasta então clicar para adicionar os repositórios e você irá ver uma lista com todos os repositórios que você tiver, similar a imagem:\n\n![Uma lista com vários repositórios a serem adicionados.](/assets/img/dependabot-ui-2.png)\n\nBasta selecionar os repositórios que desejar. Aconselho a escolher somente os que você realmente irá manter, caso contrário, você irá receber milhares de mensagens e pode acabar deixando de lado, o que não é o objetivo, não é mesmo?\n\nLogo depois de adicionado, o seu projeto estará numa lista e você pode clicar na engrenagem para definir as informações desejadas, como na imagem abaixo:\n\n![Uma tela de configuração permitindo definir quando atualizar, diretório a buscar e outras informações.](/assets/img/dependabot-ui-4.png)\n\nVocê ali pode definir quando atualizar (diariamente, semanalmente, mensalmente e até live). Eu recomendo o diariamente, que já é mais do que suficiente.\n\n### Via dependabot.yml\n\nComo o Github agora já funciona com o Dependabot nativamente, você pode criar um arquivo de configuração e salvá-lo dentro da pasta `.github` dentro do seu repositório.\n\nVocê pode ver [a documentação](https://docs.github.com/en/github/administering-a-repository/configuration-options-for-dependency-updates) sobre como criar o arquivo e abaixo segue o exemplo para a mesma configuração que eu fiz na UI:\n\n```yml\nversion: 2\r\nupdates:\r\n- package-ecosystem: npm\r\n directory: \"/\"\r\n schedule:\r\n interval: daily\r\n open-pull-requests-limit: 10\n```\n\n## Sobre o Github Actions\n\nVimos agora que o Dependabot irá enviar Pull Requests sempre com as atualizações, mas isso não garante que a atualização vai funcionar com o nosso código. Para isso, nós vamos utilizar o [Github Actions](https://docs.github.com/en/actions), que nos permite criar um fluxo de ações que devem ocorrer a partir de determinada ação.\n\nNo nosso caso, nós queremos rodar nosso `lint`, `tests` e `build` para garantir que tudo continua funcionando, mesmo com a nova atualização.\n\n### Configurando o Github Actions\n\nPara configurar, o processo é bem similar ao `dependabot.yml`, nós também teremos um arquivo `yml` com algumas configurações bem definidas.\n\nA [documentação do Github Actions](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions) é super completa e bem detalhada, então recomendo vocês darem uma olhadinha com carinho.\n\nNo caso do boilerplate, eu criei um arquivo em [.github/worflows/ci.yml](https://github.com/React-Avancado/boilerplate/blob/master/.github/workflows/ci.yml) com a seguinte configuração:\n\n```yml\nname: ci\r\non: [pull_request]\r\n\r\njobs:\r\n build:\r\n runs-on: ubuntu-latest\r\n steps:\r\n - name: Checkout Repository\r\n uses: actions/checkout@v2\r\n\r\n - name: Setup Node\r\n uses: actions/setup-node@v1\r\n with:\r\n node-version: 14.x\r\n\r\n - name: Install dependencies\r\n run: yarn install\r\n\r\n - name: Linting\r\n run: yarn lint\r\n\r\n - name: Test\r\n run: yarn test\r\n\r\n - name: Build\r\n run: yarn build\n```\n\nNele eu defino que vai rodar sempre que um `pull request` for aberto, a máquina usada será uma simples do Ubuntu e a versão do Node será `14.x`.\n\nOs comandos abaixo **são específicos** para o meu boilerplate e eles vem do meu [package.json](https://github.com/React-Avancado/boilerplate/blob/master/package.json), então você pode escolher os comandos e ordem que você desejar para o seu projeto.\n\n## Conclusão\n\nApós essas duas configurações, sempre que alguma atualização aparecer para aquela sua dependência, você irá receber um PR com a atualização e automaticamente o Github também vai rodar o conjunto de comandos para você, caso algo esteja errado, ele vai te indicar, assim, você vai ter segurança em atualizar ou não alguma coisa.\n\nEspero que você tenha curtido essa dica, e se você puder se [inscrever lá no canal do YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1), ajuda demais também!" }, { "path": "posts/mask-e-clip-com-css-e-svg.md", "content": "---\nlayout: post\ndate: 2018-01-24T21:31:00.000Z\ntitle: Mask e Clip com CSS e SVG\ndescription: Dois efeitos simples que podem transformar seu site com estilo.\nmain-class: svg\ntags:\n - svg\n - css\n - mask\n - clip\ncategories:\n - O mundo mágico do SVG\n---\n\n## Introdução\n\nFala pessoal, faz tanto tempo que não escrevo um post mais técnico, então por que não escrever um post sobre `SVG` já que eu amo tanto. Enquanto escrevo esse post, vou ouvindo uma banda que já falei em outra oportunidade, mas que é sempre bom ouvir de novo, trata-se de [Ghost](https://www.youtube.com/watch?v=neRhGoW3Kbc&list=RDneRhGoW3Kbc&start_radio=1&t=7) e o link leva para um acústico muito bom.\n\n## Ideia do Post\n\nEu resolvi fazer esse post, pois recebi um email do [Unsplash](https://unsplash.com/@willianjusten) falando que eu tinha acabado de completar **10 milhões** de views em minhas fotos! E não só a notícia me deixou feliz, como o detalhe que fizeram em colocar uma das minhas fotos como fundo para os números.\n\n![Um screenshot do email com 10M escrito sobre uma foto de uma cachoeira](/assets/img/mask-svg/screenshot.png)\n\nÉ um efeito extremamente simples de se fazer, mas que ficou super bonito e único. Então vamos lá aprender a fazer isso e brincar em nossos novos sites e aplicações!\n\n**Importante:** por se tratar de propriedades experimentais, é possível que não funcione em todos os dispositivos e browsers. Por preferência veja no Chrome Desktop =)\n\n## Clipping\n\nPara quem já usou Photoshop deve conhecer o `Clipping Mask` e o que faremos não é nada diferente disso. O Clipping envolve usar uma camada com uma forma (um círculo, triângulo, texto) sobre uma imagem ou um elemento. Qualquer coisa atrás dessa forma fica aparente e o resto ao redor some. Segue um exemplo abaixo:\n\n![Uma forma sobre uma imagem criando o Clipping](https://getflywheel.com/wp-content/uploads/2016/08/css-svg-clipping-masking-clipping-graphic.jpg)\n\n### Clip em ação\n\nJá entendendo a teoria, vamos logo para prática, porque é o que importa. É possível se criar o Clipping de duas formas.\n\n#### Clip-path com CSS\n\nUma das formas disponíveis é o [Clip-path do CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path), mas que a [compatibilidade](https://caniuse.com/#feat=css-clip-path) ainda é um pouco baixa. Segue abaixo um exemplo:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nComo você pode ver, eu utilizei duas classes com a propriedade `clip-path`:\n\n```css\n.polygon {\n clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n}\n\n.circle {\n clip-path: circle(100px at 150px 100px);\n}\n```\n\nSobre o `.polygon`, você basicamente define os pontos com as coodenadas do eixo (x,y), ou seja, a primeira coordenada (primeiro ponto) possui um deslocamento de `50%` no eixo `x` e `0%` no eixo y.\n\nPara o `.circle`, o primeiro valor é o tamanho do Raio e o segundo é a coordenada do centro do círculo. Ou seja, um raio de `100px`, que tem como centro `150px` no eixo `x` e `100px` no eixo `y`.\n\n#### Clip-path com SVG\n\nEnquanto o `clip-path` do CSS não é compatível em tudo, usando SVG você alcança a compatibilidade em tudo, visto que ele usa SVG por natureza, que segue a seguinte [compatibilidade](https://caniuse.com/#feat=svg).\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nPara fazer funcionar, é extremamente similar ao feito com o CSS, mas a diferença é que a forma é criada no SVG, segue abaixo o código:\n\n```html\n\n \n \n \n \n \n\n```\n\nRepare em duas coisas importantes, primeiro uma classe no externo do SVG, que é o `clip-svg`, todo SVG por padrão vem com um tamanho no Browser e ocupa um espaço, então para remover isso, adicionamos essa classe e zeramos `height` e `width` no css. E depois temos o id `#triangle-mask`, que vai ser referenciado no nosso css, de forma a criar o clip que desejamos. E para determinar isso, é só uma linha:\n\n```css\nclip-path: url('#triangle-mask');\n```\n\nGostou disso, mas achou extremamente difícil/chato criar as formas? Não se preocupe! Existe uma ferramenta chamada [Clippy](http://bennettfeely.com/clippy/). Através dela você tem formas pré-determinadas e também pode criar as suas.\n\n![Screenshot do site Clippy](/assets/img/mask-svg/clippy.png)\n\n## Masks\n\nDiferente do `clip-path` que definimos as \"bordas\" de onde queremos ter a imagem e eliminamos o resto. Na máscara nós queremos fazer uma composição, que as vezes pode conter toda a imagem ou não.\n\n### Mask no SVG e no CSS\n\nPara criar as máscaras, nós utilizamos o `` do SVG e a propriedade `mask` do css. Segue abaixo um exemplo:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nComo podemos ver no exemplo, possuímos `3 componentes`, o primeiro elemento é a imagem `.background`, depois temos o retângulo `.base` que é o cara que fica por cima da imagem e onde iremos aplicar a `#mask`, que é o que faz a mágica acontecer. Dentro da `#mask` nós temos o `.alpha` que é responsável por criar a transparência da máscara, quanto mais próximo de `#000` (preto) fica mais transparente e quanto mais próximo de `#fff` (branco), mais opaco fica e o nosso texto, que convenientemente usamos o `` do SVG. E para tudo funcionar, é só usar `mask: url(#mask);`.\n\nO legal é que as máscaras funcionam não só com imagens estáticas, mas podem ter animações e até vídeos! Segue abaixo um exemplo onde o fundo é um gradiente sendo animado:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nRepare que no exemplo acima, a base é a mesma, possuímos um `` no SVG que contém o texto e essa máscara é aplicada em outro elemento usando `mask: url('#mask');`.\n\nOu seja, a base sempre será a mesma, tenha um svg com `` e assinale essa máscara para o elemento do qual você quer compôr.\n\n### Mask-image\n\nE por último, você pode ter também o `mask-image`, onde você determina no css a forma base que vai compôr com a imagem, lembra bastante o `clip-path`. Abaixo segue um exemplo:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nComo você pode ver, nós temos a `img` que vai conter a imagem que nós queremos mostrar e no css nós definimos o `mask-image` que é a forma/ícone onde vamos inserir a imagem. Temos as seguintes linhas de código:\n\n```css\n.object-mask {\n mask-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Logo_of_Unsplash.svg);\n mask-repeat: no-repeat;\n mask-size: 350px;\n mask-position: center;\n}\n```\n\nComo podemos ver acima, esse `mask-image` lembra muito com as propriedades de um `background-image`, onde determinamos se vai repetir ou não, seu tamanho e sua posição.\n\n## Momento Jabá\n\nBrincadeiras a parte, se você se embolou um pouquinho com SVG ou se interessou em saber mais sobre, meu [curso de SVG do início ao avançado](https://www.youtube.com/watch?v=VNTmT1qMgp0&list=PLlAbYrWSYTiOufRJOeP73o4GR9N1afQdP2) está de graça no YouTube!\n\n## Conclusão\n\nBom galera, espero que tenham curtido o post e agora possam utilizar esse efeito em seus sites com bastante criatividade! Para ajudá-los, vou deixar aqui abaixo mais alguns posts/exemplos, assim vocês podem pegar mais ideias e se você fizer algo, deixa nos comentários!\n\n- [Masking vs. Clipping: When to Use Each](https://css-tricks.com/masking-vs-clipping-use/)\n- [Pen utilizando vídeo](https://codepen.io/daviddarnes/pen/vEjMLr)\n- [Pen com Vídeo no Hero](https://codepen.io/estevanmaito/pen/RamBKE)\n- [Pen com clip-path e fundo interativo](https://codepen.io/mhotovec/pen/WZWxKg)\n- [Pen com animações na mask](https://codepen.io/celli/pen/bExxQy)\n- [Página 404 com canvas + svg](https://codepen.io/tmrDevelops/pen/aNGKzN)\n" }, { "path": "posts/medindo-performance-do-seu-site-com-lighthouse.md", "content": "---\nlayout: post\ndate: 2018-03-16T14:42:05.000Z\ntitle: Medindo a performance do seu site com Lighthouse\ndescription: Uma ferramenta perfeita para dizer tudo que está bom e ruim no seu site.\nmain-class: dev\ntags:\n - performance\n - pwa\n - seo\ncategories:\n - Performance Web\n---\n## Introdução\n\nFala pessoal, para quem me segue no [Twitter](https://twitter.com/Willian_justen) deve ter visto que eu ando falando bastante sobre performance e talvez vocês tenham percebido também que o nosso blog lindinho tem estado bem mais rápido e \"diferente\". Fazia um tempo que eu num estudava um pouquinho e aí usei meu blog como cobaia, porque ele foi criado para isso né.\n\nEu sou extremamente aficcionado por performance e por mais que o blog já fosse rápido, muitas coisas me deixavam agoniado e quando rodei o [Lighthouse](https://developers.google.com/web/tools/lighthouse/) no blog e vi várias notas baixas, foi a gota d'água, eu precisava fazer alguma coisa!\n\nEu fiz muiiiitas mudanças no blog, desde o servidor, até fontes e funcionamento offline. E bom, como eu aprendi vários detalhes, por que não compartilhar com vocês? A partir de hoje, vou começar vários posts sobre tudo que fiz e dicas sobre isso, se você não quiser perder nada, adiciona o [feed do blog](https://willianjusten.com.br/feed.xml) no seu [Feedly](https://feedly.com/) ou me segue no Twitter/Facebook/Slack, acessa o blog todo dia ok, não precisa, mas se quiser...\n\nEnquanto eu vou escrevendo esse post, vou ouvindo uma [Playlist](https://open.spotify.com/user/willianjusten/playlist/31qxv1gv7rMf9S3BFcHBob?si=zDTUBl4PQX-RFvFCMvlOfg) que acabei de criar com várias músicas acústicas calminhas e de bandas desconhecidas.\n\n## Por que performance importa?\n\nAntes mesmo de começar a falar mais sobre a ferramenta do Lighthouse, a gente precisa entender porque performance é tão importante.\n\nÉ basicamente sobre **reter usuários!** Nós queremos que os usuários usem nosso site e que eles gostem disso. Se for um blog, nós queremos que as pessoas leiam os posts, se é uma loja, nós queremos que eles comprem o que oferecemos. Se é site institucional, nós queremos que a pessoa veja sobre a nossa empresa e que tenham confiança naquilo que estão vendo. E a performance é um fator muito significa nessa interação! Seguem alguns dados:\n\n* [O Pinterest refez suas páginas ganhando 40% de performance e com isso aumentou o número de buscas e criação de contas em 15%](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7)\n* [Para a Mobify, a cada 100ms removidos do load aumentava em 1.11% o tempo de acesso do usuário e um aumento de $380.000 em ganho anual](http://resources.mobify.com/2016-Q2-mobile-insights-benchmark-report.html)\n\nE da mesma forma que uma boa performance traz dados bons, uma performance com problemas pode trazer sérios problemas.\n\n* [BBC descobriu que eles perdem 10% de usuários a cada segundo adicional ao load do site](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale)\n* [DoubleClick da Google descobriu que 53% das visitas a sites via mobile são abandonadas se a página dura mais de 3s para carregar](https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/)\n\nÉ meus amigos, vocês não querem que o usuário abra o seu site e ele demore tanto que o usuário decida sair né? Então performance importa e muito! Não é só para os robôs do Google, é para algo maior, os seus usuários.\n\n## O que é o Lighthouse?\n\nPegando a descrição que a própria Google dá para o [Lighthouse](https://developers.google.com/web/tools/lighthouse/):\n\n> O Lighthouse é uma ferramenta automatizada de código aberto que aprimora a qualidade de apps da Web.\n\nAbaixo você consegue ver como é a arquitetura do projeto e o processo que ela faz para analisar o seu site, é bem genial a parada!\n\n![Arquitetura](https://raw.githubusercontent.com/GoogleChrome/lighthouse/master/assets/architecture.jpg)\n\nNa imagem acima só mostra 4 categorias mas a ferramenta analisa o site através de 5 categorias específicas que são:\n\n* Progressive Web App\n* Performance\n* Accessibility\n* Best Practices\n* SEO\n\nE para cada uma dessas categorias a nota pode ser de 0 a 100. Tipicamente sites que tem valor acima de 90 representam o top 5% dos sites com melhor performance. Aqui tem [uma lista com todos os detalhes](https://docs.google.com/spreadsheets/d/1dXH-bXX3gxqqpD1f7rp6ImSOhobsT1gn_GQ2fGZp8UU/edit?ts=59fb61d2#gid=0) de pontuação, com todos os seus pesos.\n\nEles tem as referências para todas as regras no [site deles](https://developers.google.com/web/tools/lighthouse/scoring), lá você consegue ver separadinho cada ponto em cada categoria, vale a pena olhar também, muitas dicas de boas práticas.\n\n## Como usar?\n\nExistem algumas formas possíveis de utilizar o Lighthouse hoje, que são:\n\n* [Via extensão no Google Chrome](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) - é atualizada constantemente e abre uma aba nova com o resultado, muito simples de usar.\n* Via aba Audit no Google Chrome DevTools - funciona bem, mas não abre aba nova e tive impressão de uns valores estarem meio errados.\n* Via terminal instalando com `npm install -g lighthouse` - funciona muito bem e gera o relatório em vários formatos.\n* [Via Lighthouse-CI](https://github.com/ebidel/lighthouse-ci) - é um projeto que roda o lighthouse no terminal mas dentro do seu CI, nunca utilizei, mas parece promissor.\n\n## Analisando o relatório\n\n![Relatório do Lighthouse](/assets/img/relatorio-lighthouse.png)\n\nDentro do relatório ele mostra separadamente cada uma das categorias e mostra também uma separação em 3 partes:\n\n* **Failed Audits**: que são as partes que estão erradas ou pelo menos não estão de acordo com as métricas do Lighthouse.\n* **Opportunities**: que são coisas que já estão boas, mas você pode melhorar ainda mais.\n* **Passed Audits**: os pontos onde você completou com excelência.\n\nCada um desses pontos sempre vem com boas explicações do que fazer para melhorar e o porque de serem dessa forma. Acho os relatórios do Lighthouse um prato cheio para se aprender boas práticas na Web. Leia tudo com calma e tente seguir os conselhos, mas uma dica:\n\n> Seu site não precisa ter os absolutos 100 em tudo! Existem pontos que você pode ou não mudar. Então analise com calma e veja os prós e contras daquilo que o Google recomenda.\n\nSe o seu site já estiver com **90+**, é um ótimo sinal! E se ele não estiver, também não tem problema, veja os problemas e vá melhorando conforme você achar necessário.\n\n## Conclusão\n\nBom, esse é o primeiro post dessa parte sobre performance que eu vou falar. Nos próximos posts eu vou mostrar as coisas que eu fui melhorando no blog e também trazendo alguns resultados que eu já obtive, sim, tem menos de uma semana das mudanças, mas já notei crescimentos bem relevantes!\n\nSe você tem alguma dúvida ou pedido, faz aí nos comentários. Você também pode postar as notas do seu site e até pedir ajuda de outros leitores, vamos ser participativos! =D\n" }, { "path": "posts/menu-sticky-e-smooth-scroll-com-css-puro.md", "content": "---\nlayout: post\ndate: 2018-05-30T04:37:00.000Z\ntitle: \"Menu Sticky e Smooth Scroll com CSS puro \"\ndescription: Aprenda algumas propriedades bem interessantes do CSS e já saia\n brincando por aí.\nmain-class: css\ntags:\n - frontend\n - css\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, como eu acho que fiquei parado muito tempo e o número de posts caiu muito, quero voltar a escrever mais. E por isso decidi que vou fazer vários posts bem simples, mas não menos importantes, sobre algumas propriedades do CSS que podemos usar a nosso favor, assim como alguns experimentos legais, que podem ser usados nos seus próximos trabalhos.\n\nEu já tinha pensando em fazer esse post, mas o [@felipefialho\\_](https://twitter.com/felipefialho_) acabou dando uma forcinha quando criou o seguinte Tweet:\n\n

    👉 position: sticky;

    - Mistura \\\\`fixed\\\\` e \\\\`absolute\\\\`
    - Só com CSS conseguimos um efeito que necessitava de JavaScript
    - Suporte em todos os browsers modernos (bugs contornáveis)
    - É legal pra caraleo

    Vejam esse exemplo simplezão 😁https://t.co/fM22xYUMBV

    — Felipe Fialho (@felipefialho_) May 29, 2018
    \n\nBom vamos lá, a trilha sonora que me acompanha hoje é um post-rock dos bons, a banda se chama [Tides from nebula](https://open.spotify.com/artist/1CzKORB9IN0EjPEyeKBIkf?si=A6YHiIyCSre7opSSu6a5Yw) e para mim é um som perfeito para se concentrar e programar.\n\n## O experimento\n\n![Gif mostrando uma tela sendo scrollada, mostrando uma imagem do Samuel L Jackson indo junto com a tela fixa.](/assets/img/samuel-sticky.gif)\n\nSe quiser pular tudo e já ver funcionando, só abrir [esse link aqui](https://labs.willianjusten.com.br/sticky-scroll/). Mas se quiser seguir comigo a explicação é super super fácil!\n\n## Position: sticky\n\nEssa é uma propriedade que já foi introduzida há um boooooom tempo, lá [nos idos de 2012](https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit) e então logo foi removida, pois na época a sua implementação era \"bugada\" e não funcional como alguns dos desenvolvedores falavam.\n\nMas agora em 2016 o [sticky voltou](https://developers.google.com/web/updates/2016/12/position-sticky)! E como ele funciona?\n\n> O `position: sticky;` é um híbrido entre o `fixed` e o `relative`. O elemento é tratado como `relative` até alcançar um limite especificado, que é através do `top, bottom, left, right`. Alcançando esse ponto, ele vai ser tratado como fixo. E assim que chegar a sua posição \"original\", ele voltará a funcionar como `relative`.\n\nParece meio complicado né? Vamos tentar ver melhor na prática.\n\n### Menu fixo\n\nVamos lá, como foi feito o exemplo acima? Primeiro vendo o menu, temos o seguinte html:\n\n```html\n\n
    \n

    Scroll & Sticky!

    \n
    \n\n \n\n```\n\nReparem que eu tenho 2 elementos filhos do `body`, que são o `header` e o `nav`. Eu fiz algumas pequenas edições no css, dando uma altura ao header e também estilo ao nav, mas vamos focar nas seguintes propriedades css:\n\n```css\nheader {\n height: 90vh;\n}\n\nnav {\n position: sticky;\n top: 0;\n}\n```\n\nSe você não reconhece aquele valor `vh` ali, saiba que é uma viewport unit, eu escrevi sobre isso, [neste post](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/). Mas tenha em mente que a única coisa que isso faz é dar uma altura de 90% do espaço da tela visível.\n\nCom isso, o meu `nav` vai aparecer logo no finalzinho da tela certo? Já que o header vai ocupar 90% de altura. E é aí que entra o pulo do gato. Ao definir o `position: sticky` no meu `nav` junto com o `top: 0`, eu digo para ele que no momento que o `nav` alcançar o topo do `body`, que ele comece a se comportar como `fixed` e é isso que faz o nosso menu ficar preso ali no topo.\n\n> E porque ele não some da tela por mais que faça scroll?\n\nSimples, como o `nav` é filho do `body`, o pai vai sempre estar na tela e o position do `top` é em relação a visão do elemento pai na tela.\n\n### Samuel fixo\n\nEu resolvi colocar um outro elemento com `position: sticky` para mostrar a diferença e também porque é divertido ver o Samuel L. Jackson pulando no meio da tela e não saindo, vai dizer que não é legal?\n\nBom, vamos entender como esse funciona, primeiro, vamos ao markup:\n\n```html\n\n```\n\nReparem agora que eu tenho a imagem com a classe `.sticky` e ela está dentro do pai, que é o `.container`. Isso significa que o posicionamento da minha imagem vai funcionar em relação ao `.container`.\n\nAgora então definindo o seguinte css:\n\n```css\n.sticky {\n position: sticky;\n bottom: 50px;\n}\n```\n\nEu digo para o meu elemento o seguinte, no momento que o meu elemento `pai` aparecer, comporte-se como `fixed` com espaçamento de `50px` da parte inferior da tela, quando chegar na posição original dentro do pai, volte a ser `relative`.\n\n### Compatibilidade\n\nEssa propriedade apesar de já ser velha conhecida, como falei lá no início do post, ela ainda está sendo aplicada aos poucos pelos browsers, mas já está funcionando nos browsers mais atuais. E você pode olhar no [Can I use](https://caniuse.com/#feat=css-sticky).\n\n## Smooth Scroll\n\nPor final, se você clicar em cada uma das âncoras, vai ver o efeito de `scroll to`, onde eu deslizo a tela até o elemento indicado pela âncora. Mas repare que é um deslizar bonitinho, que a maioria dos clientes pedem naquelas landing pages. E o mais incrível de tudo isso, é que esse efeito é feito com apenas 1 propriedade do css:\n\n```css\nhtml {\n scroll-behavior: smooth;\n}\n```\n\n### Compatibilidade\n\nEssa propriedade é bem legal, mas infelizmente ainda está bem no início, só funcionando no Chrome e Firefox, mas vamos ter fé que já já melhora o suporte, vamos vendo no [Can I use](https://caniuse.com/#feat=css-scroll-behavior).\n\n## Conclusão\n\nBom galera, espero que tenham curtido o post, é algo bem simples, mas talvez seja útil em algum projeto de vocês, nem que seja só para um protótipo para validar uma ideia =)\n\nEu prometo continuar com posts mais frequentes e outras dicas assim. E vamos que vamos! Se você não tem acessado o blog recentemente, eu lancei 2 posts nos últimos 2 dias, uhul! Dá uma lida também, [Criando um Codepen simples em poucas linhas](https://willianjusten.com.br/criando-um-codepen-simples-em-poucas-linhas/) e [Performance Web: Evite escrever HTML demais](https://willianjusten.com.br/performance-web-evite-escrever-html-demais/).\n" }, { "path": "posts/meu-ano-de-2015.md", "content": "---\nlayout: post\ndate: 2015-12-29T20:35:04.000Z\ntitle: Meu ano de 2015\ndescription: Foi um ano ruim? Definitivamente NÃO, pelo menos para mim. Aqui vou\n falar sobre algumas das experiências e coisas que aprendi no ano.\nmain-class: misc\ntags:\n - dev\n - review\ncategories: null\n---\n\n## Introdução\n\nComo já é de praxe, depois de tantos posts, estou escrevendo mais um post, ouvindo música! =D\n\nE para não deixar de ser diferente, é de uma banda desconhecida pelo menos para mim chamada [Metric](https://open.spotify.com/album/3Oj8FdHcV6kAiOVWfkqRaA). Eles tocam uma mistura de synth pop com new wave e rock, pode parecer uma mistureba danada, mas é muito boa.\n\nResolvi fazer esse post depois de ver alguns reviews pela Net como o do [Ponyfoo](https://ponyfoo.com/articles/third-year-in-review) e da [Una Kravets](https://una.im/2015-review), as vezes alguém está interessado em saber como foi meu ano -sqn, enfim, é também para guardar de recordação.\n\n## Nascimento do Blog\n\nSim, para alguns pode parecer que esse blog é mais velho, mas não é. Ele nasceu no dia [03 de janeiro](https://willianjusten.com.br/making-of-parte-1/) depois de milhares e milhares e milhares de enrolações. Eu sentei em frente ao computador e me decidi que só ia sair quando estivesse pronto e assim foi. Dia 2 de Janeiro estava virando a noite para ter o blog pronto e lançá-lo no dia 3 a tarde.\n\nA ideia da criação do Blog era só para ter um lugar onde colocar coisas que eu ia estudando e ajudar quem quisesse ou seja, ninguém. Meu amigo, [Guilherme Louro](https://github.com/guilouro), ficava falando todo dia para eu colocar algo meu no ar, nem que fosse uma página só com meu nome e contatos. Ele já fazia vários freelas e eu era curioso para fazer, mas nunca conseguia nada, o Blog foi minha última cartada e funcionou até melhor do que eu esperava =D\n\nQuando eu lancei o blog, falei em alguns grupos do Facebook que eu participava (uma pena que a maioria está bastante parada =/) e o feedback foi praticamente instantâneo! Uma galera estava curtindo e compartilhando e nas primeiras 24h eu já tinha tido pouco mais de 2k visualizações, que para mim já era absurdo xD\n\nEu fiquei super feliz com a repercursão e no mesmo tempo o [Fernando Daciuk](https://github.com/fdaciuk) estava na onda de escrever [1post por dia](http://blog.da2k.com.br/2014/12/31/um-post-por-dia/), resolvi ir na [onda também](https://willianjusten.com.br/um-post-por-dia/). E caramba, como é DIFÍCIL, acho que eu não devo ter conseguido nem 4 dias seguidos, mas não deixei de escrever não, escrevi no meu tempo e estava feliz.\n\n### Reconhecimento\n\nE com o Blog, eu posso dizer, sim, meus amigos o Acre existe! E tem gente que acessa de lá. Engraçado que eu acabei conhecendo um dos caras de lá que acessa. E também pude conhecer pessoalmente um camarada lá do Amazonas que a primeira coisa que falou quando me viu foi:\n\n> Tu é o cara do Blog Azul não é?\n\nAliás, uma coisa que eu não posso reclamar é do carinho e reconhecimento da galera, já foram várias mensagens privadas e abertas. Tem uma em especial que eu fiquei bastante feliz de ter recebido:\n\n> \"Cara, direto vejo e revejo seus posts, eles tratam de uma maneira diferente, parece que vc entende o que a galera q tá iniciando tá passando... Não conheço nenhum post que tem esse tipo de abordagem tão perfeito igual ao teu. Vc tá me inspirando a querer estudar mais e ter mais foco. Vlw ae e continue com o trabalho! Abraço!\" - Vinicius Faria\n\n### Estatísticas\n\nForam **54 posts** neste quase 1 ano, falei sobre várias coisas, desde assuntos não tão técnicos como [técnicas de aprendizado](https://willianjusten.com.br/tecnicas-de-aprendizado/) até [muitos e muitos assuntos de svg](https://willianjusten.com.br/series/#o-mundo-m-gico-do-svg), que é minha paixão.\n\nAgora no final do ano, posso dizer que meu blog teve muito mais acessos que eu jamais imaginava! Foram mais de **250 mil** acessos do Brasil e fora dele. Não sei se esse é um número bom ou ruim, mas quem se importa?! To feliz para caramba!\n\n![Gráfico de acessos do meu blog em 2015](/assets/img/meu-2015/acessos.png)\n\nE os 10 posts mais acessados foram:\n\n- [Como se tornar um Desenvolvedor Front End](https://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/)\n- [Como criar seções Fullscreen com CSS](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/)\n- [Começando com ReactJS](https://willianjusten.com.br/comecando-com-react/)\n- [3 Meses de Globo.com](https://willianjusten.com.br/3-meses-de-globocom/)\n- [Alguns seletores CSS importantes para Aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/)\n- [Devo fazer faculdade?](https://willianjusten.com.br/devo-fazer-faculdade/)\n- [Técnicas de Aprendizado](https://willianjusten.com.br/tecnicas-de-aprendizado/)\n- [Como ter Domínio Próprio no Github Pages](https://willianjusten.com.br/dominio-proprio-no-github-pages/)\n- [Usando SVG Sprites](https://willianjusten.com.br/usando-svg-sprites/)\n- [Animações em SVG com CSS](https://willianjusten.com.br/animacoes-em-svg-com-css/)\n\n## Eventos\n\nEsse foi O ano dos eventos para mim, eu fui em tantos que nem sei quantos foram, pior que acabei perdendo várias das credenciais =/\n\nQueria ter ido até em mais, mas a falta de $ e tempo, impediram de ir em alguns.\n\nNunca vou esquecer dos meus momentos de tristeza/desespero quando eu achei que iria perder meu voo para Porto Alegre, meus amigos devem rir de mim até hoje =x\n\n![Foto de credenciais de eventos](/assets/img/meu-2015/eventos.jpg)\n\nE dessa vez eu não fui só para assistir, eu também fui para palestrar! Passei por alguns lugares aí (Rio, BH e Bahia) contando algumas mentiras, e o pior, uma galera curtiu!\n\n

    @Willian_justen mandou pra caralho na palestra sobre SVG, Topíssiomo! #FrontEndCarioca #fec2015 @frontendcarioca

    — Emerson Thompson (@thompsonweb) September 26, 2015
    \n\n

    Criando experiências com SVG com @Willian_justen ! Já li várias postagens do blog, e agora ao vivo #fec2015 pic.twitter.com/nURy7XvTyp

    — Igor (@igorsfa) September 26, 2015
    \n\nFoi uma oportunidade bem legal, eu assistia caras muito bons palestrando e imaginava se algum dia poderia fazer o mesmo e bom, consegui e nem foi tão difícil molhei a mão de alguns organizadores...\n\nEu palestrei no mesmo evento que o [Fernando Masanori](https://www.twitter.com/fmasanori)! Esse cara é uma lenda do Python para mim <3\n\n### Networking\n\n![Evento na BrazilJS](/assets/img/meu-2015/amigos.jpg)\n\nNesses eventos, a gente sempre acaba conhecendo várias pessoas, que acabam virando amigos e eu não poderia deixar de agradecer a alguns desses aqui:\n\n- [Jonas Mendes](https://github.com/nipher) - acabei conhecendo na BrazilJS, cara gente boa para caramba, que me ajudou a encontrar um teto em Porto Alegre de madrugada! E que, em breve, vamos trabalhar juntos o/\n- [Yan Magalhães](https://twitter.com/yaanmagale) - mineirinho de bom coração, fui para BH palestrar lá e ele também veio para o Rio me ver palestrar, cara que mais vai a eventos que eu conheço.\n- [Gabriel Barbier](https://twitter.com/_Barbier) - um dos que presenciou meu desespero para chegar ao aeroporto na viagem de Porto Alegre e também ajudou pacas.\n- Jader Gomes - mais um baiano que veio para o evento me prestigiar e pegar carioquinhas...\n- Thales Marchetti - cara gente boa pacas que conheci no evento do imasters e graças a ele, arrumei meu novo teto no Rio.\n\nEnfim, teve muiiiita gente que eu conheci (peço até desculpas por não colocar todos), que eu revi, e é por isso que eu digo que [vale a pena ir a eventos!](https://willianjusten.com.br/por-que-ir-em-eventos-vale-a-pena/)\n\n## Opensource\n\nEsse ano eu decidi me dedicar um pouco a mais nesssa área, seja para divulgar algo, seja para estudar ou até mesmo para guardar alguma coisa que eu usava e outros poderiam usar também.\n\n![Gráfico do Github](/assets/img/meu-2015/opensource.png)\n\nOs projetos que eu destaco desse ano para mim foram:\n\n- [Screamer.JS](https://github.com/willianjusten/screamer-js) - foi um projeto de Hackday que eu fiz com um ex estagiario da Globo e hoje contratado, [Paulo Oliveira](https://github.com/paulopotter). Tínhamos uma reclamação comum por lá sobre a falta de notificações desktop, demos uma olhadinha em como funcionava a API e resolvemos criar um plugin bem simples que pudesse ser usado lá e em qualquer lugar. Há pouco tempo descobri que ele está sendo usado na prefeitura de Manaus!!\n\n![Imagem de um cara falando que estão usando o Screamer na Prefeitura de Manaus](/assets/img/meu-2015/screamer.png)\n\n- [Template do Blog](https://github.com/willianjusten/will-jekyll-template) - uma galera curtiu tanto o visual do blog, que eu acabei separando o tema num projeto separado e uma galera tem usado! Também descobri que um grupo de [Devs do Paraná](http://blog.devparana.org/) usou o template para criar o deles, que ficou super lindão com as modificações.\n- [FreeTime](https://github.com/free-time/free-time.github.io) - projeto que eu tive o orgulho de participar e ajudar.\n- [Reveal Boilerplate](https://github.com/willianjusten/reveal-boilerplate) - um boilerplate simples que eu criei para as minhas apresentações e que resolvi abrir a todos. Inclusive criei um [post sobre ele](https://willianjusten.com.br/criando-apresentacoes-e-hospedando-no-github/) e acabei descobrindo váaarias apresentações por aí usando ele <3\n\nEnfim, não commitei todos os dias do ano, não tive milhões de stars em todos os meus projetos, mas tive uma coisa melhor ainda, que foi ver os projetos sendo utilizados, isso vale mais que 1000 dias seguidos de commit! =D\n\nPretendo continuar criando coisinhas para que todos possam usar e que venha 2016!\n\n## Ano novo, vida nova, blog novo...\n\nBom, além dos eventos e dos commits, eu tive o prazer de trabalhar esse ano na [Globo.com](http://www.globo.com/), mais especificamente no time `Esportes1` do [Globoesporte](http://globoesporte.globo.com/). Participei no projeto dos Jogos Pan Americanos de Toronto e também numa das frentes para construção do novo Feed da Globo.com. Falei até um pouco sobre isso no post de [3 meses de globo.com](https://willianjusten.com.br/3-meses-de-globocom/).\n\nAprendi muita coisa, tanto em desenvolvimento, quanto comunicação, organização e pessoas. A empresa é gigante, tem muitas pessoas, muitos projetos, milhões e milhões de acessos em todos os produtos. Foi uma oportunidade incrível e que com certeza adicionou bastante ao meu currículo.\n\nMas...devido a certos objetivos pessoais, eu estou saindo da globo.com e indo para [Huge](http://www.hugeinc.com/about), uma agência premiada e com base em vários lugares do mundo. Eles possuem trabalhos bem bacanas e estou indo para lá, para somar a equipe de FrontEnd, que é minha grande paixão =D\n\nE não pára por aí, tem mais uma novidade, passei o dia de ontem redesenhando meu blog e em breve estarei lançando o Blog 2.0, espero que curtam =)\n\n## Mas pera aí...e as metas?\n\n\n\nExatamente isso, não tem meta! Quando a gente atingir a meta, nós dobramos a meta!\n\nO negócio é ser feliz, estar num lugar legal e fazer um trabalho bem feito, o resto se conquista. Um abraço a todos, muito obrigado por ler o blog desse maluco aqui e um **Feliz 2016!**\n" }, { "path": "posts/meu-ano-de-2016.md", "content": "---\nlayout: post\ndate: 2016-12-23T01:21:04.000Z\ntitle: Meu ano de 2016\ndescription: Um ano super cheio, com vários eventos, projetos, mudanças e muito mais.\nmain-class: misc\ntags:\n - dev\n - review\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, faz muiiito tempo que não escrevo hein! Já são três meses sem escrever, o maior tempo inativo do blog desde que eu comecei, mas isso tem uma justificativa e vou falar hoje, meu ano foi cheio! Não foi pouco cheio não, foi MUITO cheio! Então toma seu cafézinho, pois o post vai ser um pouquinho grande...\n\nEnquanto vou escrevendo esse post, vou ouvindo uma das bandas que eu comecei o ano e que lançou um álbum novo esse ano e está bom demais! A banda é [Tycho](https://open.spotify.com/album/0GXI4iAc5FshqWgIlaNAXO) e o nome do album é Epoch, vai ouvindo junto, garanto que não vai se arrepender.\n\nEu escrevi [sobre meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) e vou tentar seguir numa linha parecida. Também vi a ideia do [post do Felipe Fialho](https://medium.com/@lfeh/retrospectiva-2016-df06dfdf0c2e#.lxp2fcn2z), mas o cara tem memória de elefante, eu mal consigo lembrar o que comi de almoço, então separar por mês seria muito difícil, mas vamos por tópicos importantes então.\n\n## Meu Blog\n\nExatamente no dia 1 de janeiro eu lancei esse novo tema do blog e falei sobre a criação dele [bem aqui](https://willianjusten.com.br/ano-novo-blog-novo/). A recepção foi bem maneira, conseguia aumentar a permanência dos usuários no blog e o número de páginas antigas acessadas com isso. Esse ano acabei escrevendo um pouquinho e fiz **25 posts**.\n\nAbaixo segue o gráfico de acessos do meu blog nesse ano de 2016:\n\n![Gráfico de Acessos do Blog em 2016](/assets/img/meu-ano-2016/acessos.png)\n\nForam mais de **330 mil** pageviews no blog, por mais de **98 mil** usuários, batendo meu primeiro ano, que tinham sido pouco mais de **250 mil**.\n\nE a lista de posts/páginas mais acessadas no ano foram:\n\n- [Começando com ReactJS](https://willianjusten.com.br/comecando-com-react/)\n- [O que ninguém diz para os iniciantes](https://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/)\n- [Página de Séries](https://willianjusten.com.br/series/)\n- [Como se tornar um Desenvolvedor Frontend](https://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/)\n- [Página de Cursos](https://willianjusten.com.br/cursos/)\n- [Meus plugins favoritos do Sublime](https://willianjusten.com.br/meus-plugins-favoritos-do-sublime-text/)\n- [Novo curso de Git e Github para Iniciantes](https://willianjusten.com.br/novo-curso-de-git-e-github-para-iniciantes/)\n- [Como usar o ReactJS](https://willianjusten.com.br/como-usar-o-reactjs/)\n- [Falando sobre RSCSS](https://willianjusten.com.br/falando-sobre-rscss/)\n- [Organizando seu css com ITCSS](https://willianjusten.com.br/organizando-seu-css-com-itcss/)\n\n## Cursos\n\nDepois de ter criado o blog e ele ter feito tanto sucesso, muitos haviam comentado que seria legal se eu fizesse cursos e eu me perguntei \"Por que não?\". Eu sempre gostei de ajudar meus amigos e explicar o que eu aprendia/sabia, só resolvi deixar isso mais aberto para todos.\n\nE foi em Março desse ano que eu [lancei meu primeiro curso](https://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) e falei sobre esse desafio que seria de criar cursos. O primeiro curso que eu fiz e não poderia deixar de fazer foi sobre [Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/), que é basicamente o gerador usado nesse meu blog desde o início.\n\nDepois dessa ótima experiência do Jekyll, me aventurei de novo a criar um [Curso de Git e Github para Iniciantes](https://willianjusten.com.br/novo-curso-de-git-e-github-para-iniciantes/), em Abril lá estava eu lançando. Foi mais um curso bem bacana, onde pude aprimorar mais a minha didática e técnicas de gravação também.\n\nNo final de Abril eu resolvi fazer um novo teste e lançar um curso bem grande e completo, que foi meu [Curso de SVG do início ao avançado](http://www.eventick.com.br/curso-de-svg). Como seria um curso bem grande e como eu precisaria me dedicar bastante a ele e consequentemente cancelar meus freelas, resolvi fazê-lo de forma paga. Confesso que fiquei um pouco receoso se o pessoal iria curtir ou não, visto que os outros haviam sido gratuitos. Mas o curso foi super bem recebido e vários compraram e apoiaram a causa antes mesmo do lançamento. Vários já terminaram o curso e fiquei super feliz com os comentários deles sobre o curso, alguns que inclusive utilizaram várias das técnicas em seus trabalhos e até mesmo para arrumar um emprego novo!\n\nE minha última empreitada está sendo meu [Curso de JS com TDD na Prática](https://willianjusten.com.br/js-com-tdd-na-pratica-e-novidades/), do qual eu ainda estou construindo e acabou tendo coisas extras como um Módulo completo de ES6 do início ao fim. Ainda faltam 4 módulos a serem lançados e tenho já a certeza que será o meu maior e mais completo curso já feito.\n\n## Eventos\n\nSe ano passado eu já achava que tinha ido em muitos eventos, esse ano foi INSANO, tudo bem que em Setembro eu me mudei e aí com isso diminuí minha ida a eventos, mas meu primeiro semestre foi insano! E não só isso, mas eu tive o prazer de palestrar em vários lugares que eram o meu sonho!\n\nEu palestrei no Front in Rio 2016 falando sobre [Ícones SVG da Teoria a Prática](https://speakerdeck.com/willianjusten/icones-svg-da-teoria-a-pratica) e no mesmo evento falaram o [Grande Maujor](https://www.facebook.com/maujor?fref=ts) e meu parceiro [Afonso](https://www.facebook.com/afonso.pacifer?fref=ts), que para mim já foi um achievement e tanto! Segue uma foto da galera no evento:\n\n![Foto do Front in Rio](/assets/img/meu-ano-2016/frontinrio.jpg)\n\nDepois eu palestrei no Meetup CSS SP sobre [CSS <3 Math](https://willianjusten.com.br/meetup-css-sp/#/), sim, eu fiz uma palestra para falar só de uma propriedade do CSS e o pior, eu curti para caramba! Foi uma grande oportunidade que o [Felipe Fialho](https://twitter.com/felipefialho_) e o [Raphael Fabeni](https://twitter.com/raphaelfabeni) me deram. Eu palestrei no escritório da Google cara!\n\nNessa mesma semana eu ainda fui no Code in the Dark, que foi o evento de programação mais louco que eu já fui, muitas luzes, música, bebida e galera torcendo! Falando nisso, fica aqui a minha cobrança ao [Gabriel Gripp](https://twitter.com/grippado) pela camisa absurda de maneira que eu ainda não ganhei! Segue uma foto de alguns amigos que estavam no Code in the Dark:\n\n![Foto do Code in The Dark](/assets/img/meu-ano-2016/code-in-the-dark.jpg)\n\nE para fechar toda a semana, eu ainda palestrei no Front in Sampa! Sim, Meetup+Code in the Dark+Front in Sampa tudo na mesma semana! Infelizmente eu tive uma crise nos rins no evento e palestrei um pouco no esforço, mas consegui falar sobre uma das coisas que eu vim falando e brincando esse ano, que foi [JS <3 Music](https://willianjusten.com.br/frontinsampa-16/#/). Segue uma foto minha no evento:\n\n![Foto do Front in Sampa](/assets/img/meu-ano-2016/frontinsampa.jpg)\n\nUm pouco depois, eu palestrei no Front in BH, que foi um dos primeiros eventos que fui na minha vida de programador, então foi muito importante para mim. Eu falei sobre uma lib de animação que eu curto bastante que é o [Greensock](https://willianjusten.com.br/front-in-bh-16/#/), ainda bati um papo com o [Bernard de Luna](https://twitter.com/bernarddeluna) no palco e foi super legal! Também consegui uma das fotos que mais curto minha de evento:\n\n![Foto do Front in BH](/assets/img/meu-ano-2016/frontinbh.jpg)\n\nE não bastassem todos esses eventos, eu ainda fui palestrar no maior evento de Javascript do Universo, sim eu palestrei na BrazilJS e até hoje não acredito. Eu escrevi um [post a parte](https://willianjusten.com.br/achievement-concluido-braziljs/) só para esse evento, pois foi algo inimaginável para mim, eu estava palestrando para mais de 1200 pessoas em arquibancadas, formando quase um coliseu! =o\nE ter muiiito barulho no final da apresentação foi demais!\n\n

    final da palestra do @Willian_justen foi excelente 😁 #braziljs pic.twitter.com/aDLggwbhUd

    — yuri (@ybrntt) August 26, 2016
    \n\nE aqui na Irlanda (se não sabia, já dei um spoiler =x) eu fui em alguns Meetups bem legais também, onde pude conhecer a galera local e algumas grandes empresas daqui, como a Google, Zendesk e Intercom.\n\nO bom dos eventos é que pude conhecer mais gente nova e pessoas com quem eu já falava por um tempão online mas nunca tinha visto pessoalmente (não vou botar nomes, porque é complicado se esquecer alguém e eu sempre esqueço).\n\n## Opensource\n\nComo todo ano e enquanto eu for programador, eu vou estar querendo escrever código e o opensource é uma das melhores formas de escrever e ainda contribuir. Então esse ano eu tive esse gráfico de contribuição no github:\n\n![1332 Contribuições no Github](/assets/img/meu-ano-2016/contribs.png)\n\nSim, eu sei que depois de Setembro eu dei uma caída, mas prometo voltar a toda! E os projetos que destaco desse ano foram:\n\n- [Lyef](https://github.com/lyef) - organização que [Jonas Mendes](https://github.com/orgs/lyef/people/Nipher) e eu criamos, onde desenvolvemos uma estrutura opinativa para desenvolver componentes React reutilizáveis e isolados.\n- [Awesome Audio Visualization](https://github.com/willianjusten/awesome-audio-visualization) - uma lista contendo bastante informação sobre Audio Visualization que eu criei com meus amigos [Luiz Henrique Bizarro](https://lhbzr.com/) e [Márcio Ribeiro](http://shiz.co/).\n- [Qualy Front](https://github.com/Qualy-org/qualy-front) - lembro até hoje quando lancei esse boilerplate, o nome era para ser qualidade, mas me liguei na marca da margarina, acabou que zoaram que tanto que adotei no mesmo dia a marca (e já se foram muitos dias sem processo xD)\n- [Cards Jekyll Template](https://github.com/willianjusten/cards-jekyll-template) - como todo tema que eu crio, também liberei esse tema para opensource.\n\nSei que nem são os projetos mais importantes do mundo, mas eles nem foram para ser, eles só foram para que eu pudesse relaxar e compartilhar um pouquinho do que sei. Por que você não faz o mesmo também? Tente criar projetos sem medo de ser o melhor, vai que ele é o melhor para outros? =D\n\nAlém desses projetos, ainda tive uma participação em uma iniciativa muito maneira, que foi:\n\n- [Organização do Frontend BR no Github](https://github.com/frontendbr) - uma organização que tem como objetivo agregar várias coisas importantes para a nossa comunidade de Front através da melhor plataforma possível para desenvolvedores, o Github.\n\n## Saída de empresa e mais mudanças\n\nEsse ano eu estava trabalhando na [HUGE](http://www.hugeinc.com/), mas decidi sair para me dedicar aos meus projetos pessoais, um deles envolvia a criação dos meus cursos e escrevi um [post explicando sobre tudo isso](https://willianjusten.com.br/mudando-sua-vida-atraves-de-projetos-paralelos).\n\nAlém disso, outros dos planos eram mudar de país, conhecer devs pelo mundo e melhorar meu inglês. E foi assim que eu vim parar aqui na Irlanda! Me mudei para cá no dia 7 de Setembro e estou aqui desde então, inclusive pretendo escrever alguns posts relacionados a isso, seja sobre minha viagem para cá, experiências da Irlanda, inglês, mercado e outras coisas. Podem me cobrar para escrever\n\nNesse tempo que estou na Irlanda, já me mudei de casa duas vezes e já fiz milhares de amigos, de várias nacionalidades, como: brasileiros, italianos, franceses, coreanos, tchecos, canadenses, americanos, tunisianos e até irlandeses! Sim, Dublin é uma cidade cosmopolita demais, então você acaba conhecendo o mundo.\n\nAlém disso eu fui na Irlanda praticamente toda, incluindo uma viagem de carro de 3 dias percorrendo todo o sul dela, uma das melhores viagens da minha vida. E além da Irlanda também fui para:\n\n- Holyhead (País de Gales)\n- Edinburgo, Highlands, Loch Ness (Escócia)\n- Bruxelas, Bruges (Bélgica)\n- Lisboa, Sintra (Portugal)\n- Paris (França)\n\nE pretendo aumentar ainda mais a lista, incluindo alguns eventos por aqui e ali!\n\n## Conclusão\n\nÉ isso aí pessoal, meu ano foi muito cheio, várias realizações profissionais e cada vez mais a certeza de que apesar dos meus momentos de bad, a área de desenvolvimento é a minha área. Que venha o ano de 2017 e eu consiga tanta coisa como nesse ano e quem sabe mais!\n\n## E quanto as metas para 2017?\n\n\n\nExatamente isso, não tem meta! Quando a gente atingir a meta, nós dobramos a meta!\n" }, { "path": "posts/meu-ano-de-2017.md", "content": "---\nlayout: post\ndate: 2017-12-22T17:02:58.000Z\ntitle: Meu ano de 2017\ndescription: Muitos países e cidades visitadas, nova plataforma de cursos e\n recordes de alunos!\nmain-class: misc\ntags:\n - dev\n - review\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, como faço todos os anos desde quando comecei meu blog, lá vai o meu sobre meu ano de 2017! =D\nSe você quiser dar uma lida, tem o [Meu Ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/) e aqui o [Meu Ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/). É legal para fazer uma comparação e a evolução dos meus anos, eu sempre me surpreendo a cada ano. E tenho ficado muito feliz que a cada ano eu tenho mais novas conquistas para compartilhar. E o mais legal, eu sinto que muitas dessas conquistas eu só alcancei graças ao apoio de todos vocês!\n\nO post dessa vez será bem misto, pois esse ano eu também me dediquei a outras coisas fora da área de programação. Então aproveita que talvez tenha algo que você se interesse. Vai ter bastante coisa de viagem e fotografia =p\n\nEnquanto eu vou escrevendo esse post (ao menos uma parte dele, porque estou correndo contra o tempo aqui), eu vou ouvindo uma banda chamada [Nothing More](https://open.spotify.com/artist/39VNwvlQTqE9SvgPjjnMpc), eles são uma mistura de vários gêneros do Rock e tem várias músicas extremamente diferentes umas das outras, então caso você não goste de uma música, tente outra, a chance de ser totalmente diferente e você gostar é bem grande.\n\nBom, vamos parar de enrolação e começar a falar e, claro, a primeira coisa que irei falar é do resultado do blog, como sempre faço.\n\n## Meu blog\n\nEsse ano eu não lancei nenhuma tema novo como fiz em 2016, só fiz pequenas modificações que dificilmente alguém percebeu, pois foi mais fundo com o objetivo de melhorar o SEO e facilitar algumas buscas, o que funcionou muito bem e alguns posts cresceram bem nas buscas orgânicas, que foi o mais forte do ano, visto que eu escrevi menos.\n\nEsse ano eu escrevi **19 posts**, e a taxa de acessos foi um pouco maior que no ano passado, sempre mostrando que o blog tem um crescimento constante todos os anos! Como pode ver no gráfico do Analytics abaixo, tiveram alguns momentos de picos, que são exatamente quando eu lançava algum conteúdo novo e os outros altos e baixos são porque a galera não gosta de acessar meu blog aos Sábados e Domingos xD\n\n![Gráfico do Analytics de 2017](/assets/img/meu-ano-2017/analytics.png)\n\nEu tive até o momento **387.685 pageviews** e **149.615 usuários**, o que eu considero um valor super maneiro para um blog pessoal de programação. E as páginas mais acessadas foram:\n\n- [Minha Home](https://willianjusten.com.br/) - curioso como é o maior canal de entrada\n- [Começando com React](https://willianjusten.com.br/comecando-com-react/) - Esse post de 2015 continua a bombar com o hype do React.\n- [Página de Séries](https://willianjusten.com.br/series/) - Muita gente ainda acessa as séries de SVG e React (lembrar de criar mais séries ano que vem)\n- [Página de Cursos](https://willianjusten.com.br/cursos/) - Com o lançamento dos cursos na Udemy essa página subiu muito.\n- [Como se tornar um desenvolvedor Frontend](https://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/) - outro post bem antigo, mas muito acessado, ano que vem teremos atualização para ele!\n- [Vindo morar e estudar na Irlanda](https://willianjusten.com.br/vindo-morar-e-estudar-na-irlanda/) - esse tem busca até de quem não é de TI xD\n- [65 dicas para ser um programador melhor](https://willianjusten.com.br/65-dicas-para-ser-um-programador-melhor/) - adoro esse post e fico feliz que ele tenha tido tanta repercursão.\n- [Migrei para o Visual Studio Code e estou feliz!](https://willianjusten.com.br/migrei-para-o-vscode-e-estou-feliz/) - lembrando que eu continuo feliz tá =p\n- [Devs Brasileiros, Gringos e Trabalhar no Exterior](https://willianjusten.com.br/devs-brasileiros-gringos-trabalhar-exterior/) - um dos últimos posts que eu escrevi teve bastante acesso já e foi legal ver que muita gente compartilha dos mesmos pensamentos.\n- [O que preciso saber para trabalhar no exterior?](https://willianjusten.com.br/o-que-preciso-saber-para-trabalhar-no-exterior/) - outro post da leva nova e uma dúvida super comum da galera.\n\nBom, é isso, na parte do blog eu to muito feliz que continuei tendo posts com bastante acesso, muitos shares e várias discussões interessantes. O objetivo do ano que vem é escrever bem mais posts, tanto na parte não técnica, como posts sobre pequenas coisinhas para se fazer no dia-a-dia, como experimentos css e etc.\n\n## Cursos\n\nEm Março de 2016 eu tinha lançado meu primeiro curso de todos e usava uma plataforma chamada Teachable, que era uma plataforma muito legal, mas possuía alguns defeitos bem chatinhos que os alunos sempre reclamavam. Então, eu fui atrás de alguma plataforma que pudesse melhorar a experiência deles e não podia dar mais certo que a escolha da [Udemy](https://www.udemy.com/user/willian-justen-de-vasconcellos/). Lá eu consegui agradar os alunos existentes, mas também consegui expandir meus cursos para pessoas que sequer me conheciam, o que foi incrível! Outra coisa interessante da plataforma da Udemy é que ela costuma utilizar preços mais baixos, com o objetivo de espalhar o conhecimento para pessoas que não tem condições de pagar muito caro pelos cursos. E pensando nisso, eu criei durante o ano várias promoções para que os cursos ficassem mais acessíveis para todo mundo e isso foi um sucesso!\n\nLembro de uma brincadeira que eu fiz, que foi chamada [Caçada do Justen](https://willianjusten.com.br/cacada-do-justen/), o nome genial foi pelo [Gabriel Gripp](https://twitter.com/grippado), que ainda deu umas dicas para deixar o joguinho mais demorado e divertido. Só que não deu tãaaao certo, a galera terminou o jogo **absurdamente rápido!** Mas foi muito muito muito divertido, tenho certeza que vou fazer isso de novo!\n\nSobre números, eu hoje tenho um total de **29 mil alunos**! Isso é muito surpreendente para mim e dois cursos meus (que são pagos) entraram na lista de best-sellers, o que é ainda um orgulho maior. Pois significa que a galera comprou e avaliou como bons os meus cursos! São milhares de notas 5 estrelas e cada comentário carinhoso me deixa mais feliz Os comentários haters eu só ignoro.\n\nE através dos feedbacks desse ano, já tenho alguns objetivos para o ano que vem. Que será a criação de vários cursos menores, indo desde coisas avançadas até coisas básicas e sempre tentando deixar num preço baixo, assim mais acessível para todo mundo. E claro, vai ter curso gratuito também! Porque sempre temos que agradecer aqueles que nos apoiam! =)\n\n## Trabalho, Viagens e Fotografia\n\nDiferente do [ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/), que eu terminei palestrando em um monte de eventos e tendo feito vários projetos. Esse ano eu acabei me dedicando mais ao meu novo trabalho, que é a [Toptal](https://www.toptal.com/) e até escrevi um post sobre [meu processo para a Toptal](https://willianjusten.com.br/meu-processo-para-a-toptal/). E junto a Toptal, eu também viajei absurdamente, acho que nunca viajei tanto como esse ano! Foram muitas cidades e países que eu realmente perdi a conta!\n\nNo ano passado eu estava morando na Irlanda e tinha feito uma lista dos países que havia visitado, só clicar no link ali que você vai ver, mas basicamente foram 6 países, incluindo a Irlanda praticamente toda. Esse ano eu já estava decidido que iria no meu país mais amado e favorito da vida, que é a Islândia (Iceland) e organizei tudo para ir para lá e ficar um tempo para que pudesse aproveitar. E como eu ia para lá, também fiz a **melhor aquisição** do ano para mim, eu comprei um [Drone DJI Mavic Pro](https://www.dji.com/mavic-pro-platinum) para tirar fotos daquele paraíso e obviamente dos outros lugares também. Mais abaixo eu vou colocando algumas fotinhas.\n\nDe Janeiro até início Março eu fiquei na Irlanda, viajando dentro do país e fazendo algumas viagens menores para o Reino Unido, para visitar lugares como Liverpool, Londres e cidades menores.\n\nE na minha última semana na Irlanda eu me despedi dos meus amigos e fui para um lugar chamado Wicklow, que é super bonito na Irlanda e eu aconselho para quem está passando por lá. Abaixo segue um vídeo porquinho de lá:\n\n\n\nApós esse passeio eu fui para Amsterdam, onde fiquei uns 4 dias para pegar meu vôo para Iceland. Pensa na ansiedade da pessoa! E para me acalmar, eu comecei a testar o drone e a foto abaixo é uma das minhas primeiras fotos com o drone, e foi quando eu comecei a me apaixonar, pois era uma visão completamente diferente de um lugar bem conhecido.\n\n

    #amsterdam #iamsterdam #drone #mavicpro #nofilter #trip

    Uma publicação compartilhada por Willian Justen de Vasconcellos (@will_justen) em

    \n\n### Chegada em Iceland\n\nEu não tenho palavras para aquele país maravilhoso, alguns dias antes de ir, teve uma das maiores tempestades de neve e então, a minha visão ao chegar no país, foi a seguinte:\n\n![Vista de Iceland através da Janela do avião, o país todo branco de neve](/assets/img/meu-ano-2017/chegada.jpg)\n\nComo eu estava lá no inverno, os dias eram muito curtos e as noite muito demoradas. Então, o meu esquema de trabalho era o seguinte, eu acordava super cedo para aproveitar o máximo que dava e a noite eu trabalhava. Durante o dia eu sempre fazia a daily do time sem problemas. Na Europa a gente sempre tem 4G funcionando em tudo que é buraco. Eu tinha comprado um chip da Nova (operadora de Iceland) e usei ele a viagem inteira. Hoje, em dia, não é mais necessário se você tiver um chip europeu, pois o chip funciona em toda a Europa, mas na época não era assim.\n\nEu fiquei em Iceland por 2 semanas e meia (gostaria de ficar mais), só que estava sem carro e com isso, eu acabei ficando um pouco limitado depois de um tempo no deslocamento. Mas mesmo assim, eu consegui ir para lugares maravilhosos, que tenho saudades enormes até hoje. Abaixo ficam algumas fotos dos lugares e se você quiser, todas as fotos estão disponíveis para download free, na minha conta no [Unsplash](https://unsplash.com/@willianjusten) e tem algumas outras lá no meu [Instagram](https://www.instagram.com/will_justen/) também.\n\n![Cachoeira Skógafoss](https://source.unsplash.com/JuhxRDzAHok/1200x900)\n\nCachoeira Skógafoss, para quem viu Vikings nessa última temporada, vai reconhecer. Além de vários outros filmes é claro. [Download em alta qualidade](https://unsplash.com/photos/JuhxRDzAHok).\n\n![Glacier em Höfn](https://source.unsplash.com/WMOwLypr_2I/1200x900)\n\nSou apaixonado pelo filme Interstellar e poder ver essa paisagem na minha frente foi uma das melhores sensações do mundo! [Download em alta qualidade](https://unsplash.com/photos/WMOwLypr_2I).\n\n![Jokulrsalron](https://source.unsplash.com/LzwNq8DVQzs/1200x900)\n\nEsse dia nevava demais! Eu hesitei várias vezes em subir meu drone, mas no final eu não aguentei e valeu a pena! [Download em alta qualidade](https://unsplash.com/photos/LzwNq8DVQzs).\n\nE claro, eu não iria embora de Iceland sem ver uma Aurora Boreal e eu não vi um dia só, eu vi três dias! <3\nAbaixo segue uma das fotos =)\n\n
    \n\n## Outros países depois de Iceland\n\nApós Iceland, eu ainda tinha 2 meses para voltar ao Brasil, então resolvi continuar passeando pelos cantos da Europa. Eu fui em Berlin, Varsóvia, Cracóvia, Vienna, Bratislava, Praga, infelizmente odiei essa cidade e tive um pequeno burnout atrelado a muito tempo viajando e só vendo cidades e sem tanta natureza. E para me salvar disso, resolvi procurar lugares na Europa com muita montanha e floresta (sou de uma cidade nas montanhas, então me sinto melhor assim), com isso descobri uma região da Austria super linda e resolvi ir para lá! Abaixo seguem umas fotos das cidades que fui no meio do caminho.\n\n![Memorial aos Judeus em Berlin](https://source.unsplash.com/D4iryoQJFk4/1200x900)\n\nUma visão diferente do Memorial aos Judes de Berlin. [Download em alta qualidade](https://unsplash.com/photos/D4iryoQJFk4).\n\n![Estádio de Futebol na Varsóvia](https://source.unsplash.com/KqpDuf1i83w/1200x900)\n\nUm estádio de Futebol na Varsóvia [Download em alta qualidade](https://unsplash.com/photos/KqpDuf1i83w).\n\n![Uma ponte no Rio Danúbio em Vienna](https://source.unsplash.com/wTYMbdQqyIk/1200x900)\n\nUma ponte no Rio Danúbio em Vienna, estava ventando tanto que o drone não conseguia voltar, eu tive que ir andando para frente até um lugar que alcançasse o drone. [Download em alta qualidade](https://unsplash.com/photos/wTYMbdQqyIk).\n\n### Uma descoberta muito feliz, Austria!\n\nEu já sabia que a Austria era muito bonita, mas não sabia que ela seria tanto! Definitivamente foi um dos lugares que mais amei dessa minha viagem. Eu fiquei baseado numa cidadezinha chamada Bad Aussee, que era super pequena, mas tinha a melhor host do mundo! A vantagem dessa cidade é que ela super bem ligada ao sistema de trens e com isso eu conseguia ir para todas as cidades de trem e até mesmo andando (eu sou meio maluco). Abaixo vai um vídeo das minhas pequenas aventuras lá na Austria.\n\n\n\nE claro, lá eu tirei várias fotos que são minhas favoritas, como, por exemplo essa foto da floresta em Schladming.\n\n![Floresta de Schladming](https://source.unsplash.com/2UJDfClMpiA/1200x900)\n\nComo dá para notar, lá foi onde eu peguei tanta neve quanto em Iceland, mas a vegetação era bem diferente, então foi bem legal. [Download em alta qualidade](https://unsplash.com/photos/2UJDfClMpiA).\n\n![Casa do 007 Spectre](https://source.unsplash.com/5tUmubhG6uI/1200x900)\n\nEu também fui numa casa que aparece no filme do 007 Spectre, foi difícil para caramba de achar, ainda mais pela quantidade de neve que tinha no caminho, mas valeu super a pena! [Download em alta qualidade](https://unsplash.com/photos/5tUmubhG6uI).\n\nEnfim, tem muitas fotos de lá, é melhor ir no [Unsplash](https://unsplash.com/@willianjusten) ou [Instagram](https://www.instagram.com/will_justen/).\n\n## Volta para casa, descanso e BrazilJS\n\nDepois de todas essas viagens, eu voltei para o Brasil em Maio e tirei um tempo para poder descansar, aproveitar um tempo com minha mãe e namorada. E para não dizer que não fiz nada da área nesse meio tempo, eu fui na BrazilJS as pressas, porque eu não tinha planejado ir, mas com alguns alunos falando tanto, eu acabei indo xD\n\nLá na BrazilJS como sempre eu conheci muita gente e foi muito legal, eu não vou listar todo mundo, pois posso esquecer alguém e ficariam bolados. Mas foi muito divertido, pois ainda teve jantar e almoço da Toptal, onde a galera conheceu um pouquinho mais da empresa e ainda bebeu/comer 0800 =p\n\n## Volta a Europa e encontro do Time Toptal\n\nFinal de Outubro eu voltei para a Europa, mais especificamente a Espanha. Dessa vez para encontrar a galera do meu time da Toptal! É tão estranho, pois todos já estávamos trabalhando há praticamente 1 ano juntos, mas ninguém se conhecia praticamente. Nos encontramos numa cidade chamada Niebla bem ao Sul da Espanha, cerca de 1h de Sevilla. E foi muito incrível conhecer a galera, além de ver claramente a diferença das culturas. Nesse encontro foi o meu time atual e também algumas pessoas do time antigo e do time que foi criado com a divisão do time maior. Então éramos cerca de 25 pessoas. Tinha brasileiros, russos, ucranianos, espanhol, americano, etc.\n\nE para aproveitar que estávamos todos juntos, fizemos um hackaton interno para limpar algumas tarefas pequenas de um board específico. Eu diria que foi genial a ideia. Mas nem só de trabalho a gente viveu. Nós visitamos um castelo que tava tendo uma feira medieval. Fomos para Sevilla 2 dias e visitamos praticamente todos os pontos turísticos de lá. Fomos também para uma cidade chamada Huelva, onde tivemos um jantar incrível.\n\nEnfim, foi uma experiência incrível poder ver as pessoas com quem trabalho e ver como a gente se dá tão bem tanto online como offline. É normal a gente se sentir meio solitário trabalhando remoto, mas esse encontro foi uma injeção de ânimo incrível!\n\n### Peregrinando na Espanha\n\nDepois do encontro, eu resolvi que iria ficar mais 40 dias na Espanha e iria viajar de Sul a Norte. Eu fui para muitas cidades, todas elas sempre usando BlaBlaCar, que é um sistema para compartilhar caronas. Nas estadias eu fiquei em Airbnb, Hostel e até fiz amizade com uma das hosts do Airbnb e descolei uns dias grátis =p\n\n![Vista do Metropol Parasol por cima](https://source.unsplash.com/v4t6eg2VMWE/1200x900)\n\nEu primeiro voltei a Sevilla por um dia, só porque eu queria voar de drone sobre o Metropol Parasol. [Download em alta qualidade](https://unsplash.com/photos/v4t6eg2VMWE).\n\n![Puente Nuevo em Ronda](https://source.unsplash.com/vgfT4xaRs_c/1200x900)\n\nEssa foi uma das primeiras cidades que fui no Sul, ela se chama Ronda e vai estrelar na nova novela das 7 da Globo! Brincadeiras a parte, esse lugar é a Puente Nuevo e é enorme e linda [Download em alta qualidade](https://unsplash.com/photos/vgfT4xaRs_c).\n\n![Vista do Castilo de Gibralfaro em Málaga](https://source.unsplash.com/7vKP5BAm8wg/1200x900)\n\nEssa é a vista do Castillo de Gibralfaro em Málaga, fiquei lá esperando o pôr-do-sol durante quase 2h e valeu muito a pena! [Download em alta qualidade](https://unsplash.com/photos/7vKP5BAm8wg).\n\nEu fui para mais de 10 cidades grandes e outras várias pequenas na Espanha e ainda estou postando as fotos, então se tiver curioso, só seguir lá no Instagram/Unsplash.\n\n## Conclusão\n\nÉ isso aí pessoal, meu ano foi muito cheio, dessa vez mais pelas viagens e aventuras que tive. Como deu para perceber, comecei a me aventurar em fotografia também e tenho aprendido e me divertido bastante com isso, espero ano que vem melhorar ainda mais nesse ponto.\n\nE quanto a parte que vocês já conhecem, a ideia é escrever mais posts, criar mais cursos e voltar a ativa com palestras e eventos!\n" }, { "path": "posts/meu-ano-de-2018.md", "content": "---\nlayout: post\ndate: 2018-12-27T04:46:00.000Z\ntitle: Meu ano de 2018\ndescription: Cursos novos, canal no Youtube, foco em saúde e um pouco mais. Um\n pouquinho desse meu ano e algumas metas para o ano que vem.\nmain-class: misc\ntags:\n - dev\n - remoto\n - cursos\n---\n\n## Introdução\n\nComo todo ano eu faço, esse post aqui serve para eu revisitar um pouco de como foi meu ano e até mesmo para analisar minha evolução de acordo com os anos anteriores. Se você quiser comparar também, seguem aqui os posts dos outros anos:\n\n- [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)\n- [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)\n- [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)\n\nComo sempre, vou ouvindo música enquanto escrevo esse post. E dessa vez, escuto [Little People](https://open.spotify.com/artist/3cbU0WxlZJTFLTfXEUB433?si=CL0M20aaRF-WjQ66cRldKA), é um DJ suíço que combina umas batidas bem interessantes e lentas, criando uma atmosfera bem legal, ótimo para programar/escrever, vale ouvir! =)\n\n## Meu Blog\n\nApesar de não ter nenhum layout novo, eu fiz várias mudanças no blog com foco em performance, que acabou até gerando uma [série de posts](https://willianjusten.com.br/series/#performance-web).\n\nDentre as mudanças feitas, foram:\n\n- [Adição do muiiito pedido Night Mode](https://willianjusten.com.br/adicionando-night-mode-no-seu-site/)\n- [Mudança para usar fontes do sistema](https://willianjusten.com.br/performance-web-usando-fontes-do-sistema/)\n- [Uso de critical css inline no Jekyll](https://willianjusten.com.br/perfomance-web-critical-css-e-jekyll/)\n- [Uso de script para varrer links quebrados](https://willianjusten.com.br/varrendo-seu-site-atras-de-links-quebrados/)\n- [Adaptando o blog para PWA com artigos offline e até joguinho!](https://willianjusten.com.br/como-fazer-seu-site-funcionar-offline-com-pwa/)\n- [Migração para a Netlify](https://willianjusten.com.br/como-colocar-seu-site-no-ar-de-graca/)\n\nCom essas mudanças e posts, eu escrevi um total de **24 posts**. Não é número muito grande, mas fiquei feliz de saber que escrevi 5 posts a mais que [o ano passado](https://willianjusten.com.br/meu-ano-de-2017/). Com isso, os meus acessos foram:\n\n![Acessos no blog, um gráfico do Analytics](/assets/img/acessos-2018.png)\n\nAté o dia que verifiquei (22 de Dezembro), foram **478 mil views** e **189 mil usuários**. Não sei dizer se esse é um número bom ou ruim, mas foi maior que do ano passado e para um blog pessoal, onde eu infelizmente não consigo dar toda a atenção do mundo, me parece bastante.\n\nOs posts mais acessadas do ano foram:\n\n- [Como fazer seu site funcionar offline com PWA](https://willianjusten.com.br/como-fazer-seu-site-funcionar-offline-com-pwa/) - um assunto falando em exaustão no ano de 2017 e que continuou em 2018, teve um grande acesso orgânico via Google.\n- [Começando com React](https://willianjusten.com.br/comecando-com-react/) - eu confesso que tenho até vergonha de ter esse post, ele é de 2015, mas ele é super bem rankeado no Google e a galera acessa até hoje. Isso me lembra que preciso fazer uma série mais completa e atualizada.\n- [Como colocar seu site no ar de graca](https://willianjusten.com.br/como-colocar-seu-site-no-ar-de-graca/) - com um título click-bait desses, não tinha como não rankear bem. Mas foi por um bom motivo, nele eu apresento o Netlify, que é a melhor coisa que vi em 2017.\n- [Nem React, nem VueJs. Saúde deve ser uma prioridade](https://willianjusten.com.br/saude-deve-ser-a-prioridade/) - é muito possível que ele tenha caído em muitas buscas do Google, mas fico feliz que as pessoas se preocuparam em abrir para ler. Esse ano foi um dos que mais precisei mudar essa chave e focar em saúde, falarei mais disso a frente.\n- [Minhas experiências com Trabalho Remoto em TI](https://willianjusten.com.br/minhas-experiencias-com-trabalho-remoto-em-ti/) - foi o último post que escrevi, mas já teve view para caramba. É um assunto bem legal e tentei escrever bastante sobre.\n- [Guia: como contribuir com Open Source](https://willianjusten.com.br/guia-como-contribuir-em-open-source/) - esse é um post imeeeenso que teve um grande número de acessos via rede sociais, alguém famoso deve ter retweetado, muito obrigado, aposto que deve ter sido o [@felipefialho\\_](https://twitter.com/felipefialho_).\n\n## Cursos\n\nEu nem lembrava, mas eu lancei o meu curso de [Git e Github na Vida Real](https://www.youtube.com/playlist?list=PLlAbYrWSYTiNqugqFFWWsgONJsmc3eMpg) no início desse ano. Fiz esse curso depois de vários pedidos por alguma coisa mais real e com workflows de empresas que eu já tivesse trabalhado, visto que o meu curso de [Git e Github para iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/) era muito simples.\n\nDepois disso, eu resolvi lançar um mini-curso gratuito e como eu achava muito simples para passar por todo o processo da Udemy, resolvi me aventurar pelo Youtube e criei um [canal](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1).\n\nLá eu criei um [curso simples sobre Netlify](https://www.youtube.com/watch?v=a1cIjP1bueM&list=PLlAbYrWSYTiMGMxQf9JSoZUU1rgVpGPth), onde eu falo sobre a ferramenta e como usá-la do início ao fim. Achei bem legal pois quase ninguém conhecia e váaaaarios vieram me agradecer depois por ter apresentado. O mais legal foi quando um dos designers do Netlify que é português veio conversar comigo e agradecer pelo conteúdo xD\n\nE por último, eu lancei em parceria com meu amigo [Guilherme Louro](https://github.com/guilouro), o curso `Aprenda a criar sites animados com Greensock`, onde falamos sobre essa biblioteca fantástica que poucas pessoas conhecem.\n\nEsse ano eu alcancei a incrível marca de **mais de 60 mil alunos!** O que só me motiva ainda mais =)\n\nPara o ano que vem, eu tenho algumas coisas em mente, vamos ver o que vai rolar. ~~Vai ter coisa de React sim, pode deixar.~~\n\n## Trabalho\n\nAssim como ano passado, eu continuo trabalhando remoto no Core Team da [Toptal](https://www.toptal.com/), escrevi sobre esse tempo trabalhando lá e respondi várias perguntas [aqui nesse post](https://willianjusten.com.br/minhas-experiencias-com-trabalho-remoto-em-ti/).\n\nApesar de terem várias mudanças de pessoas, eu permaneço no mesmo time desde quando entrei, onde basicamente a gente trabalha com as páginas públicas da empresa (toda e qualquer página que você como usuário normal pode acessar). Nós refizemos alguns layouts, mas nada de muito diferente/inovador, agora estamos fazendo umas outras coisas mais legais e espero que no ano que vem já possamos mostrar =D\n\n## Viagens\n\nDiferente do ano passado, esse ano eu fiz menos viagens e somente pela América do Sul.\n\nEu passei [20 dias no Peru](https://willianjusten.com.br/meus-20-dias-no-peru/) com a minha namorada, onde a gente foi desde Cusco/Machu Picchu até as águas mais azuis da minha vida lá no norte. Se tiver interessado no roteiro, só ler o post, tem várias coisinhas legais. Se quiser só ver/baixar as fotos em qualidade alta, só acessar [meu Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru).\n\n![4 fotos do Peru, Superior Esquerda: Machu Picchu, Superior Direita: dunas de um deserto, Inferior Esquerda: um lago bem verde com montanhas atrás, Inferior Direita: uma visão de drone de um grande lago e várias montanhas ao redor](/assets/img/peru-cover.png)\n\nE agora no final do ano, eu passei 15 dias no Chile com minha melhor amiga/irmã. Vi vários vulcões legais na região dos lagos que fica no centro sul e também uns passeios por Valparaíso/Viña del Mar/Santiago. Vou ficar devendo o post sobre essa viagem por enquanto, mas prometo que assim que eu escrever, volto aqui para atualizar.\n\n![Um vulcão num fim de tarde](/assets/img/chile-2018.jpeg)\n\nNão tive tempo nem de ver/editar as fotos ainda, vai uma que editei pelo celular, a qualidade está ruinzinha, mas depois posto fotos legais no Unsplash.\n\n## Saúde\n\nEssa foi a parte mais complicada e importante do ano para mim. Eu passei por alguns problemas chatos de saúde e por isso, viajei menos, praticamente desisti de palestrar e também trabalhei menos.\n\nPara quem é mais próximo de mim, sabe que eu nunca liguei muito para saúde, sempre quis estudar e estudar, trabalhar por horas sem sequer me levantar da cadeira. E bom, uma hora o corpo cansa e foi isso que me aconteceu.\n\nFoi até por isso que fiz o post [Nem React, nem VueJs. Saúde deve ser uma prioridade](https://willianjusten.com.br/saude-deve-ser-a-prioridade/), como um alerta não só para mim, mas para todos de que se você não se cuidar, não adianta saber mil coisas, seu desempenho vai cair se a sua saúde estiver ruim.\n\nNessa minha viagem ao Chile, eu estava com o objetivo de escalar um vulcão, sabia que estava com limitações, mas queria tentar mesmo assim. E bom, serviu mais ainda para ver que a minha vida sedentária me prejudicou pacas. Eu não consegui chegar até o topo e foi um baque bem grande.\n\nUma das minhas principais metas para o ano que vem não é aprender Vue ou criar mil projetos Open Source, mas sim deixar a vida sedentária e ter uma vida mais saudável, onde eu consiga fazer as atividades que eu sempre amei, seja viajar, escalar montanhas ou até mesmo trabalhar melhor.\n\nAhhh, como poderia me esquecer, eu arrumei uma gatinha para me fazer companhia já que trabalho em casa, o nome dela é Arya =)\n\n![Foto de uma gata olhando para o seu brinquedo](https://source.unsplash.com/1hBWrLIDSCc/500x800)\n\n## Conclusão\n\nEsse foi meu ano, não foi um ano tão agitado como ano passado mas tiveram várias coisinhas legais. Minhas metas para o ano que vem são basicamente continuar escrevendo nesse blog, criar outros novos cursos, viajar, mas principalmente, focar na minha saúde.\n\nE você? Como foi seu ano? Quais suas metas para o ano que vem? Escreve aí nos comentários ou se tiver um blog/medium, escreve lá e posta o link aqui =D\n\nUm bom final de ano para todos vocês e um ano novo melhor ainda!\n" }, { "path": "posts/meu-ano-de-2019.md", "content": "---\nlayout: post\ndate: 2019-12-27T15:30:11.000Z\ntitle: Meu ano de 2019\ndescription: Um ano movimentado na Toptal, blog novo, curso novo e viagens como sempre.\nmain-class: misc\ntags:\n - cursos\n - blog\n---\n\n## Introdução\n\nComo todo ano eu faço, esse post aqui serve para eu revisitar um pouco de como foi meu ano e até mesmo para analisar minha evolução de acordo com os anos anteriores. Se você quiser comparar também, seguem aqui os posts dos outros anos:\n\n- [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)\n- [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)\n- [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)\n- [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)\n\nEsse ano eu ouvi muiiita coisa, como sempre né? A banda mais ouvida foi [City and Colour](https://open.spotify.com/artist/74gcBzlQza1bSfob90yRhR?si=6BaUHAm2TIuE62OaG9Rtyg), também ouvi bastante o album do While she sleeps que foi o [So What?](https://open.spotify.com/album/2jd0syXer1txxASx3W2oy0?si=qkEwSe8qT_KSjIx5y66LdA). Tenho uma música favorita com minha namorada que também ouço demais, que é [Home - Edward Sharpe and The Magnetic Zeros](https://open.spotify.com/track/7w5cxTEzp1rfV3KCy0Bd5N?si=ooFjOcaSSAags5zBEg2HvA).\n\nEnfim, se quiser ouvir tudo que eu mais ouvi, só ver [minha playlist do Spotify desse ano](https://open.spotify.com/playlist/37i9dQZF1EtkiMqKxAIioe?si=vYua-vbnTOGHH1vGVY3lqw), já vou avisando, tem **muito** City and Colour xD\n\nVamos ao que interessa e falar sobre as coisas que me aconteceram esse ano.\n\n## Blog\n\nDepois de alguns anos usando o mesmo layout, eu resolvi mudar drasticamente o blog. Apesar de eu amar o [Jekyll](https://jekyllrb.com/) e ele funcionar muito bem para mim, eu queria me aventurar em alguma coisa nova. E para isso, eu escolhi o [GatsbyJS](https://www.gatsbyjs.org/). Tiveram vários motivos para eu escolher ele, mas os principais foram:\n\n- Usa React/GraphQL, que são tecnologias que uso no meu dia-a-dia\n- Focado em performance (me preocupo demais com isso)\n- Funciona bem no Netlify (que já usava no Jekyll)\n- Vira um PWA com uma linha\n\nComo tudo meu, o código está [lá no Github](https://github.com/willianjusten/willianjusten.com.br/) e você está mais do que livre para enviar correções/mudanças ou somente olhar o código xD\n\nAs grandes mudanças com o visual foram:\n\n- Ter o dark theme por padrão, no blog passado eu passei um tempo catando dados [através do analytics events tracker](https://willianjusten.com.br/como-usar-o-google-analytics-events-tracker/) e vi que uma parcela gigante de pessoas usava o dark theme, então melhor ter como padrão\n- Eu mudei também o visual padrão para ser em lista, mas depois de uns pedidos, eu implementei o modo em Grid também, assim o blog acabou sendo bastante customizável\n- As páginas todas tem transições suaves e com uma barra lateral/inferior que dão até um aspecto de app para o site\n\nSe quiser ler ainda mais sobre todas as mudanças, escolhas de stack e etc, recomendo o [post de making of](https://willianjusten.com.br/making-of-blog-novo/).\n\n### Algumas métricas\n\nComo eu sou o maluco das métricas, vão aqui algumas:\n\n### Usuários no Ano\n\n![Gráfico do analytics mostrando que tive 200.743 usuarios no ano](/assets/img/acessos-2019.png)\n\nTive um aumento bem pequeno (5.72%) em relação ao ano passado, mas creio que isso se deve ao número pequeno de novos posts, foi um ano bem cheio para mim, então não pude escrever com tanta frequência.\n\n### Preferência Visual\n\n![Uma tabela indicando que o Dark Theme e a List View são a preferência no blog, com porcentagens acima de 40%](/assets/img/tema-view-2019.png)\n\nAqui podemos ver que a preferência dos usuários é o Dark Theme e o List View, que é basicamente a visão padrão do blog. Para metrificar isso, eu removo a first view de um first user, visto que se ele entrar pela primeira vez, acabaria vendo o visual padrão e isso atrapalharia nas métricas, mas mesmo assim, a preferência pelo tema padrão é clara.\n\n### Cidades que mais acessam\n\n![Tabela de cidades que mais acessam: São Paulo, Rio de Janeiro, BH, não definido, Curitiba](/assets/img/cidades-2019.png)\n\nNão é muita surpresa que as cidades que mais acessam meu blog sejam essas, afinal de contas, são as maiores do Brasil e com isso tem mais gente, além disso, são os grandes centros, mas nossa, São Paulo tá ganhando por muito =o\n\n### Sistemas Operacionais e Browsers mais utilizados\n\n![Lista dos SO mais utilizados: Windows, Linux, Android, Mac, iOS](/assets/img/so-2019.png)\n\nNa lista de Sistemas Operacionais, o primeiro lugar e segundo lugar eu já imaginava que seria o Windows e o Linux. O interessante foi ver o Android na frente do Mac e por último o iOS.\n\nÉ muito legal ver essas métricas, pois assim eu consigo ver \"além da minha bolha\". Por que digo isso? Bom, a maioria dos meus amigos e pessoas próximas utilizam o Mac e iOS, mas claramente dá para ver que não são a maioria.\n\n![Lista dos Browsers mais utilizados: Chrome, Firefox, Safari, Opera, Android](/assets/img/browsers-2019.png)\n\nNa lista dos browsers, nada muito diferente do que imaginava, com exceção do **Opera**! WTF? Pensei que esse browser tinha morrido hahaha\n\n## Troca de time na Toptal\n\nDesde quando entrei na Toptal, eu trabalhei principalmente nas páginas públicas da Toptal, isso basicamente envolviam as páginas normais do site e também o blog. No início desse ano nós lançamos o [novo blog da Toptal](https://www.toptal.com/blog), que eu tive o prazer de liderar o desenvolvimento. Tínhamos algumas limitações que vinham desde o backend até mesmo a grande quantidade de posts já existentes. Então precisávamos mudar tudo, porém com muita calma e análise, para não quebrar nada que já existia. Foi um trabalho bem legal, porém muito estressante, então após finalizar essa grande etapa, eu resolvi respirar novos ares e me mudei para um outro time.\n\nNo meu time atual, eu trabalho mais na parte de captação de novas clientes/empresas e o seu onboarding no portal onde elas vão criar seus jobs, entrevistar freelancers, definir pagamentos e tudo mais que envolva essa parte do freela.\n\nDentro dessa parte, eu trabalho bastante com React, Redux, Apollo, GraphQL, mas tem coisinhas do backend que são feitas em Ruby on Rails.\n\nEspero que o ano que vem tenham ainda mais desafios e que eu possa aprender bastante com eles.\n\n## Lançamento do curso de Gatsby\n\nLogo após eu lançar meu blog usando o Gatsby, eu tive um pedido massivo para fazer um curso sobre e bom, eu já estava planejando fazer mesmo. Então, não muito depois de lançar o blog eu já comecei com a criação dos vídeos.\n\nEu decidi ensinar a fazer um blog igualzinho ao meu, pois assim era um projeto real e que já estava no ar, ao invés de só ensinar \"foo/bar\" que acho meio vazio e que não ensina tanto na real.\n\nO curso se mostrou um sucesso e tem uma das mais altas classificações lá na Udemy, com vários reviews muito legais!\n\n![Alguns reviews do curso de Gatsby tendo 5 estrelas e com ótimos elogios.](/assets/img/reviews-gatsby.png)\n\n## Encontros da Toptal\n\nOutra coisa bastante legal desse ano é que não tive só um encontro grande da Toptal, mas **dois** encontros!\n\n### Brazil Gathering\n\nO primeiro encontro foi de todos os brasileiros do Core Team da Toptal, e ele foi num paraíso, que é Porto de Galinhas. Passamos 1 semana trabalhando literalmente de frente para o mar, numa mansão gigante e linda! Foi muito legal pois eu pude rever algumas caras conhecidas, mas também várias pessoas novas que eu nem fazia ideia de que eram brasileiros e trabalhavam na Toptal. Pois é, a empresa é bem grande e são muitos times, é normal não conhecer a maioria das pessoas xD\n\n![Uma foto com 5 pessoas sentadas em frente a uma casa com 2 andares e uma piscina, com uma vegetação a frente deles.](/assets/img/toptal-porto.png)\n\nNessa foto temos em ordem: [Bruno Facca](https://github.com/brunofacca), [Gustavo Saiani](https://twitter.com/gusaiani), [Marco Andrade](https://github.com/Marco-Andrade), eu e [Jônatas Paganini](https://github.com/jonatas)\n\nE bom, o que falar desse paraíso?\n\n![Uma foto de drone mostrando a orla e o mar azul de Porto de Galinhas](/assets/img/willian-justen-de-vasconcellos-a8c8_h-qthy-unsplash.jpg)\n\nE teve dia que eu fiz questão de acordar as 4h da manhã, só para ver o Sol nascendo, apesar de estar morto de cansaço, valeu super a pena!\n\n![Nascer do Sol ao fundo, um trecho de mar e um trecho de areia. E na frente uma vegetação e um pequeno portãozinho de madeira.](/assets/img/willian-justen-de-vasconcellos-lwnu5llnrs8-unsplash.jpg)\n\nSe você quiser ver/baixar as fotos dessa viagem, só ir lá [nessa do collection do Unsplash](https://unsplash.com/collections/8678577/my-adventures-in-porto-de-galinhas-brazil)\n\n### Encontro do time em Barcelona\n\nApenas 3 semanas depois desse encontro no Brasil, eu estava pegando um vôo para Barcelona para encontrar o meu time (e mais um time que é agregado), o que foi muito bom, já que eu só conhecia um deles pessoalmente. Foi ótimo conhecer todos e trabalhar juntos, engraçado que nós planejamos o sprint com menos coisas, pensando que seria mais \"bagunça\" do que trabalho, mas se mostrou o contrário, nós produzimos para caramba! Mas é claro que aproveitamos bastante também, e nossa, como pessoas do leste europeu bebem, nem tente competir, é bem possível que você teria um coma alcóolico!\n\n![Foto com 18 pessoas em frente a um restaurante](/assets/img/encontro-barcelona.jpg)\n\nNessa foto num vou marcar todo mundo, porque é muita gente, mas temos pessoas da Espanha, Rep. Tcheca, Canadá, EUA, Ucrânia, Alemanha, Lituânia, Argentina, Itália e mais xD\n\n## Viagem para Itália e Suiça\n\nAproveitando que eu estava na Europa, não podia deixar de ir em alguns lugarzinhos né? Pretendo escrever mais detalhadamente sobre essas viagens, até porque eu fiquei cerca de 40 dias e visitei diversos lugares, então vale um post separado com várias dicas de coisas que aprendi.\n\n### Workshop de Fotografia nas Dolomitas\n\nMas foi uma viagem muito legal e especial, pois eu fiz um [workshop de fotografia](https://photography-tours.com/tours/dolomites-october-6-11-2020/) com 2 ídolos meus, que são o [Tobias Hägg / Airpixels](https://www.instagram.com/airpixels/) e a [Emma Svensson](https://www.instagram.com/emmasvenssonphoto/). Sempre fui apaixonado pelas Dolomitas e foi incrível poder fotografar ao lado deles e de outros fotógrafos fantásticos, aprendi demais!\n\nAqui vão algumas fotos dessa viagem:\n\n![Foto do Tre Cime di Lavaredo, que é uma montanha com 3 picos, estava amanhecendo, porém ainda escuro e com névoa na parte inferior.](/assets/img/willian-justen-de-vasconcellos-gzly-0kpg3m-unsplash.jpg)\n\nEsse é o Tre Cime di Lavaredo, que foi um dos pontos mais altos do workshop. Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/GZLY-0kPG3M).\n\n![Uma foto nas Dolomitas de uma cadeia de montanhas envolta em névoa, num visual bem misterioso.](/assets/img/willian-justen-de-vasconcellos-kzit2oyws-s-unsplash.jpg)\n\nEssa foto para mim é bem especial, pois ela foi tirada no meu celular, sim, isso é foto de celular! No caso eu tenho um [Huawei P30 Pro](https://consumer.huawei.com/br/phones/p30-pro/) e essa foto ainda virou foto do dia no Unsplash! Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/KZIT2OYws-s).\n\n![Foto de drone de um lago bem azul com vários pinheiros ao redor e uma cadeia de montanhas ao fundo.](/assets/img/willian-justen-de-vasconcellos-5zzaapsfu6y-unsplash.jpg)\n\nNa viagem eu vi diversos lagos maravilhosos, esse aí é o Lago di Misurina, para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/5zZAaPsfu6Y).\n\nSe quiser ver mais fotos (ainda estou subindo outras), é só acessar [essa collection no Unsplash](https://unsplash.com/collections/8919833/my-adventures-in-dolomites).\n\n### Um passeio pela maravilhosa e CARA Suiça\n\nSempre fui apaixonado pela Suiça e é tudo isso mesmo, o país é lindo demais, extremamente organizado, limpo e com as mais belas paisagens que já vi. O problema é que eu deixei quase um rim por lá, de tão absurdo de caro que é o país. Mas bom, uma vez a gente precisa se aventurar né? Seguem abaixo algumas fotos:\n\n![Foto de montanhas nevadas ao fundo, um pequeno trecho de lago super azul e uma pessoa de costas em pé numa pedra.](/assets/img/willian-justen-de-vasconcellos-q1tvymwgwpw-unsplash.jpg)\n\nEsse é o Oeschinensee, um maravilhoso lago de água super azul, é uma caminhada bem tranquila para ver essa maravilha e vale a pena demais! Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/q1tvymWgwPw).\n\n![Foto de um trem passando num viaduto bem alto entre montanhas.](/assets/img/willian-justen-de-vasconcellos-ubwnghh-jie-unsplash.jpg)\n\nImagina uma pessoa ficar esperando horas para um trem passar num viaduto famoso só para tirar uma foto. Bom, esse fui eu! Mas fotografia é isso, paciência e preparo. No final eu amei essa foto e me teletransporto para o mundo de Harry Potter sempre que vejo. Para ver e baixar em alta resolução, [acesse no Unsplash](https://unsplash.com/photos/UBWnGHh-JIE).\n\n## Conclusão\n\nQuando pensei em escrever esse post, eu fiquei até pensativo sobre o que escrever, pois achava que nem tinha feito muitas coisas, mas de pouquinho em pouquinho, eu vi que na realidade fiz coisa para caramba!\n\nE você? Como foi seu ano? Tente pensar em todas as coisas que fez, não precisam ser grandes como \"comprei uma casa\", tenho certeza que você vai encontrar várias coisas que foram bem significativas, se quiser, compartilha aí embaixo! =D\n" }, { "path": "posts/meu-ano-de-2020.md", "content": "---\nlayout: post\ndate: 2020-12-28T02:53:47.000Z\ntitle: Meu ano de 2020\ndescription: Um ano complicado, mas com boas vitórias também.\nmain-class: misc\ntags:\n - retrospectiva\n---\n## Introdução\n\nComo todo ano eu faço, esse post aqui serve para eu revisitar um pouco de como foi meu ano e até mesmo para analisar minha evolução de acordo com os anos anteriores. Se você quiser comparar também, seguem aqui os posts dos outros anos:\n\n* [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)\n* [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)\n* [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)\n* [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)\n* [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/)\n\nEsse ano eu ouvi bastante coisa como sempre, mas foram bem diferentes, então vão aqui algumas coisas:\n\n* [Billie Eilish](https://open.spotify.com/artist/6qqNVTkY8uBg9cP3Jd7DAH?si=IJBr0T1AQeKmC3gcWbao-g) - pois é, também fui pego por essa onda, mas te falar, ela manda bem.\n* [Trilha sonora de Doom](https://open.spotify.com/album/0KQyC28P9808r0oKKNgHvp?si=T_hkqZt3SDKWwKznjTFKVw) - esse ano teve lançamento do Doom Eternal e como um bom fã, ouvi a trilha sem parar!\n* [Perturbator](https://open.spotify.com/artist/244uLu9lkdw39BJwlul3k8?si=2XLjGzzqSLey24opxGy_gA) - perfeito para trabalhar focadão com synthwave pesadão a la Cyberpunk\n\nMas, vamos ao que interessa e falar sobre as coisas que me aconteceram esse ano. Eu não vou falar por ordem de importância nem nada, então recomendo que leia tudo se estiver realmente intereressado xD\n\n## Blog\n\nAno passado eu tive um movimento maior no meu blog principalmente pois criei um visual novo e também fiz uma conversão do Jekyll para o Gatsby. Já esse ano, apesar de ter escrito alguns posts, eu percebi que a demanda tem crescido mais na parte de vídeos, por isso eu foquei um pouco mais no YouTube também.\n\n### Algumas métricas do blog\n\nComo faço todo ano e gosto de comparar e analisar os dados, seguem alguns dados desse ano de 2020.\n\n## Usuários do ano\n\n![Lista indicando que tive uma queda de 10% de usuários no ano de 2020 em relação a 2019](/assets/img/acessos-2020.png)\n\nComo pode ver, é a primeira vez que eu tenho uma queda de acessos no blog e foi uma queda bastante expressiva, mais de 10%! Mas isso é tudo pelo fato de eu ter postado menos e também as pessoas estarem mais focadas em conteúdos de vídeo como falei mais acima.\n\nApesar dessa queda, ainda tenho uma conversão muito legal de vendas em cursos, então meu blog é ainda essencial para mim, o SEO dele me ajuda bastante.\n\n## O ano do vídeo! Canal no YouTube\n\nAs pessoas tem consumido muito mais vídeo, é impressionante a diferença! É curioso para mim, pois eu confesso que ainda prefiro texto, mas precisamos seguir o mercado né? xD\n\nE, nesse exato momento, tomei um enorme susto com a diferença de vídeos que eu publiquei entre o ano passado e esse ano. Ano passado eu postei **8 vídeos** e esse ano eu postei **120 vídeos**, como você pode ver no gráfico abaixo! \n\n![Gráfico mostrando comparação entre videos de 2019 para 2020.](/assets/img/videos-publicados.png)\n\nMas esses números tem uma razão para serem tão maiores também. Eu criei séries maiores diretamente para o YouTube. Como:\n\n* [Criando um ambiente de Desenvolvimento no Windows](https://www.youtube.com/playlist?list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd) - essa série eu fiz especificamente para mim, para não esquecer os passos para ter o WSL configurado no meu PC novo e nossa, muita gente usa hoje em dia!\n* [Mini-curso de TypeScript](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_) - outra série que foi um enorme sucesso, muita gente passou a ver o TS com melhores olhos depois desses vídeos, então fico feliz.\n* [Curso Git e Github para iniciantes](https://www.youtube.com/playlist?list=PLlAbYrWSYTiPA2iEiQ2PF_A9j__C4hi0A) - esse foi o único conteúdo não inédito, mas que eu resolvi subir no YouTube para que mais pessoas tivessem acesso rápido (fora da Udemy)\n\n### Mais interação e diferentes formatos\n\nEu não entendo nada nada de vídeo, nem editar eu sei, então eu vou aprendendo e testando as coisas. Eu ganhei uma [Elgato Key Light](https://www.elgato.com/en/gaming/key-light) do GitHub e com isso, resolvi gravar vídeos num formato onde eu apareço mais, não sou muito de aparecer, mas notei que as pessoas gostam e simpatizam mais, isso fez crescer bastante o número de inscritos.\n\nMeus últimos vídeos tiveram um bom número de views (para o meu humilde canal), então devo continuar com essa linha:\n\n* [Monitores, produtividade e minha preferência](https://www.youtube.com/watch?v=3yBOg0Hhmtw)\n* [Comunicação Assertiva](https://www.youtube.com/watch?v=wRoE7MFvTAU)\n* [Será que sou bom o suficiente?](https://www.youtube.com/watch?v=2g181ibXzEM)\n\n### Lives\n\nOutra coisa que eu fiz mais esse ano foram **lives** e nossa, que retorno legal! Todos os dias que eu fiz live, eu fiquei muito mais tempo que o proposto, pelo simples fato de que estava gostoso e eu nem via o tempo passar!\n\nSe eu não sei gravar vídeos, para lives eu sou ainda pior! Me perco no chat o tempo todo, sem contar que não sei usar os programas legais que o pessoal usa, então acabo usando o [Streamyard](https://streamyard.com/) que pelo menos simplifica um pouco as coisas. Aliás, aceito ajudas nesse tópico!\n\nMinha [última live](https://www.youtube.com/watch?v=wEK5X7TpK1E) ainda teve a participação do grande [Felipe Fialho](https://www.felipefialho.com/) e durou **mais de 2 horas** e foi demais! Espero fazer mais coisas assim no ano que vem.\n\n## Saída da Toptal, depressão e saúde...\n\nEu saí da Toptal no dia 1 de Abril e quando avisei ao pessoal, a maioria pensou que era brincadeira de Primeiro de Abril, mas nem era, foi só uma engraçada coincidência. Mas por que vários pensaram que era zoeira? Tirando a questão do dia, eu já estava na empresa há quase 4 anos e sempre elogiei a empresa, não parecia que eu iria sair tão cedo, mas tudo muda né.\n\nAno passado eu havia mudado para um outro time, saindo das páginas públicas para trabalhar mais na plataforma em si e outro projeto. Foi bastante legal essa transição, mas depois de um tempo eu confesso que estava ficando um pouco desanimado. Junto a isso, veio a pandemia e vários dos meus planos foram por água abaixo.\n\nPara quem me conhece, eu nunca tive vergonha de admitir que tenho depressão e uma das formas que eu trabalho com ela, são através das viagens, onde são meus momentos de descompressão. O problema é que nessa pandemia, ninguém pôde viajar e isso me deixou bem triste, além de alguns outros problemas de saúde que apareceram. \n\nEu também estava com casamento marcado, mas minha namorada foi demitida da Latam (ela é comissária de voo), o que nos obrigou a adiar também, enfim, todas essas coisas foram bem pesadas.\n\nPor causa disso tudo, eu resolvi sair da Toptal e focar em coisas que me fizessem mais feliz, mas que eu também pudesse \"controlar\" um pouco melhor. \n\n## Curso de React Avançado\n\nEu fiz um post falando da [história por trás do curso](https://willianjusten.com.br/a-historia-por-tras-do-meu-curso-de-react-avancado/), ele é o meu maior projeto de todos até hoje. Criar um curso de ponta a ponta, ensinando com detalhes um projeto real.\n\nNesse exato momento, ele já tem mais de **46 horas** e mais de **1900 alunos**! O curso já era grande quando eu imaginei ele, mas se tornou ainda mais gigantesco. Tudo pois eu estou tentando fazer nos mínimos detalhes, ensinando não só React, mas tem muita coisa de CSS, testes, Next, teorias, enfim, acho que os próprios alunos podem falar melhor do que eu.\n\nEspero ter terminado tudo no primeiro trimestre do ano que vem, mas já posso dizer que essa foi definitivamente uma das minhas maiores conquistas do ano e da vida até hoje. Estou praticamente um ano inteiro vivendo só desse curso e ainda pretendo continuar ano que vem dessa maneira. \n\nTive muito medo de largar a Toptal com um salário em dólar, ainda mais nessa última enorme alta. Mas posso dizer agora que foi a decisão mais acertada que eu tive do ano.\n\n## GitHub Stars\n\nUma coisa que me pegou de surpresa (MUITA SURPRESA) foi eu ter sido escolhido como um [GitHub Star](https://stars.github.com/profiles/willianjusten/). Para quem não sabe, esse é um programa do GitHub para reconhecer pessoas que inspiram e educam nas comunidades de desenvolvimento.\n\nEu falo sobre o [programa nesse vídeo](https://www.youtube.com/watch?v=3qlmKllROI8), mas num resumo, o programa permite um contato direto com os times do GitHub, tanto para ver as coisas novas que estão por vir, como para discutir as features, necessidades e divulgar conhecimento. Na minha opinião, o programa está muito a frente de outros programas do gênero. O cuidado que eles andam tendo com os detalhes tem sido incrível!\n\nEles também me mandaram duas caixas **enormes**! [Uma cheia de Swags](https://www.youtube.com/watch?v=QjjWI51dPKc) (camisas, adesivos, bottoms) e [uma com vários equipamentos](https://www.youtube.com/watch?v=vVp8atME0n8) para melhorar nas gravações, com direito a Webcam 4k e uma Key Light! \n\n## Mudança e qualidade de vida\n\nAgora no final do ano eu resolvi me mudar de apartamento, eu nunca me incomodei de ter meu computador no quarto e nem que ele era pouco iluminado, mas nessa pandemia, eu senti o quanto isso me afetava!\n\nNão ver muito da luz do Sol durante o trabalho me deixava extremamente cansado e de péssimo humor. A outra coisa é que eu quase não sentia que estava mudando entre trabalho e descanso, afinal de contas, era tudo no mesmo quarto. Pensando nisso, eu resolvi mudar de apartamento e aos pouquinhos eu vou organizando as coisas. \n\nAgora tenho um quarto separado para ser só meu escritório e ele é bastante iluminado, assim como o meu quarto, então espero que isso me ajude no humor e qualidade de vida. Abaixo segue foto de como está o escritório hoje, ainda falta o apoio de pé (que no momento é uma caixa qualquer) e também o apoio para o PC (calma, não fique desesperado que ele está no chão!).\n\n![Uma mesa de escritório com 2 monitores, um microfone, alguns bonequinhos, mouse e teclado sem fioe um computador no chão abaixo da mesa.](/assets/img/office.jpeg)\n\n## Descanso e PS5\n\nComo falei um pouco acima, poder viver dos meus cursos me permite cuidar um pouco mais da minha saúde e controlar meu trabalho. Pensando nisso, eu resolvi me dar umas férias e desde o dia 15/12 eu parei de codar/gravar e só vou voltar no dia 05/01. \n\nNesse meio tempo, eu estou descansando bastante, jogando meu PS5, PC e várias vezes simplesmente não fazendo nada, ainda tenho dificuldades de \"ficar parado\", mas é importante dar esse descanso para o corpo, senão ele num aguenta e depois cobra...\n\n## E o ano que vem?\n\nBom, acho que a primeira coisa que todo mundo deseja é que venha logo essa vacina e as mortes diminuam. Eu confesso que desisti de ver notícias, pois me deixava ainda mais ansioso e triste com a situação. Então tomara que isso acabe o mais breve possível!\n\nE o resto dos planos é: acabar o curso de React Avançado, atualizar o conteúdo do curso de JS com TDD, continuar lançando mais conteúdos no YouTube que não sejam só técnicos e por fim, **viajar**! \n\nE você? Já pensou sobre o seu ano? Conseguiu achar coisas boas dentro de tantas confusões nesse ano calamitoso? E os planos para o ano que vem?\n\nEspero que tenha gostado do post e qualquer coisa, comenta lá no [meu Twitter](https://twitter.com/Willian_justen)." }, { "path": "posts/meu-ano-de-2021.md", "content": "---\nlayout: post\ndate: 2021-12-21T08:00:40.000Z\ntitle: Meu ano de 2021\ndescription: Ano passado já foi complicado para mim, mas esse ano foi ainda mais.\nmain-class: misc\ntags:\n - retrospectiva\n - ano\n---\n## Introdução\n\nComo eu faço todo ano, este post aqui serve para revisitar um pouco de como foi meu ano e até mesmo para analisar minha evolução, de acordo com os anos anteriores. Esses posts de retrospectiva tem sempre um teor muito pessoal porém, o desse ano tem mais do que nunca. Então, se você só se interessa por partes mais \"técnicas\", veja só a primeira parte dos números do blog/youtube e depois, pode sair. Se você quiser comparar também, seguem aqui os posts dos outros anos:\n\n* [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)\n* [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)\n* [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)\n* [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)\n* [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/)\n* [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/)\n\nSobre músicas, é curioso que eu não consigo lembrar de quase nada muito marcante que ouvi. Como disse logo no subtítulo, esse ano foi bem tumultuado para mim. Então, ficam aqui algumas coisas que me lembro:\n\n* [The Weeknd](https://open.spotify.com/artist/1Xyo4u8uXC1ZmMpatF05PJ?si=oNpWDQaWRWCpbq08t7T85A): ouvi bastante, ainda mais a partir de Outubro quando decidi ir para NY\n* [Post Malone](https://open.spotify.com/artist/246dkjvS1zLTtiykXe5h60?si=Zc9SDVX_QfuVPPaiilqIVg): outro que ouvi muito, principalmente no Canadá com meu amigo Marcus\n* [Low Hum](https://open.spotify.com/artist/7AfmYGPRYiNkwKfV8LrqLd?si=tel88LurTiCBWRLtUywqxg): um som meio depressivo e experimental, que foi a vibe do meu ano.\n\nBom, sem mais delongas, vamos ao meu ano. Eu confesso que precisei até que me forçar a lembrar das coisas, porque, sério, esse foi um ano esquecível e, o que lembro, preferia esquecer também.\n\n## Blog\n\nEsse ano eu não fiz muitas coisas aqui pelo blog, mas eu [migrei do Gatsby para o NextJS](https://willianjusten.com.br/migrei-meu-blog-do-gatsby-para-o-nextjs), o que deixou o site com uma performance tão boa quanto mas principalmente, melhorou minha [developer experience](https://willianjusten.com.br/gatsby-e-nextjs-performance-e-developer-experience), já que o tempo do build diminuiu muito e até mesmo converter certas coisas.\n\nApesar dessa migração, eu escrevi pouco e, novamente, as métricas do blog caíram. Notei que a tendência de consumo tem sido muito mais para vídeos mesmo, o que é uma pena, já que eu gosto muito de escrever, além de achar mais prático. Mas não importa, eu continuarei escrevendo nesse blog, mesmo que só eu leia!\n\nSegue abaixo o gráfico do Google Analytics desse ano:\n\n![Grafico do Google indicando uma queda de quase 30% de usuarios](/assets/img/users-blog-2021.png)\n\nComo podemos ver, a queda foi brutal! Talvez também seja a hora de mudar um pouco o formato do meu blog e dos meus conteúdos. Estou usando esse final do ano para pensar os próximos passos, tenho que confessar que não ando lá muito animado, mas vamos que vamos, né.\n\n## Canal do YouTube\n\nEu tinha uma meta humilde de alcançar os 15k inscritos e agora estou com pouco mais de 19k, [ajude a pegar os 20k aí](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1). Portanto, posso dizer que a meta foi cumprida, mas num geral, também não foi um ano tão bom em relação ao anterior já que o crescimento foi menor, como podemos ver pelo gráfico abaixo, onde a linha azul representa os números desse ano e a linha roxa, o ano passado.\n\n![Grafico indicando que 2020 o crescimento foi maior que 2021](/assets/img/youtube-2021.png)\n\nDiria que o grande problema que impactou o crescimento foi a falta de consistência nas postagens. Para crescer no YouTube, é muito importante que você movimente a rede pelo menos 1x por semana e, bom... meu [último vídeo](https://youtu.be/FaVz3ULk1N8) foi em Setembro. Antes, também não tinha nenhuma consistência, tendo posts seguidos numa semana e depois, semanas sem nada.\n\n## Finalização do curso React Avançado\n\nEm 2020 eu comecei a empreitada do [curso de React Avançado](https://reactavancado.com.br/), que foi definitivamente o maior curso que já fiz na vida. E o curso foi tão ambicioso e grande que, além de metade de 2020, eu ainda fiquei os 5 primeiros meses de 2021 trabalhando nele sem parar.\n\nTenho muito orgulho do que eu consegui nesse curso. Além de ter trabalhado muito com o [Guilherme Louro](https://github.com/guilouro) na criação do curso e ter o [Marcos Oliveira](https://twitter.com/vmaarcosp) no design do projeto, ainda tiveram participações em alguns espaços, como ajuda do [Gabriel Ramos](https://gabrieluizramos.com.br/) e também do [Adeonir Kohl](https://twitter.com/adeonir), que é um aluno dos meus cursos.\n\nMesmo antes de ter finalizado o curso, vários alunos já vinham relatando que haviam conseguido boas posições no mercado de trabalho, seja indo para uma nova empresa ou até mesmo, recebendo promoção. E para mim, esse é o maior objetivo que um educador deve ter: ver o sucesso dos seus alunos.\n\nMas, é aquilo, com grandes poderes vem grandes responsabilidades. Para fazer um curso tão grande e completo, foram incontáveis noites gravando/editando/codando. Os últimos dois meses eu já estava tão exausto que eu simplesmente queria acabar tudo. Assim que eu finalizei o curso, precisei ficar uns 20 dias fora, porque o corpo já não estava aguentando.\n\n## Volta rápida ao trabalho\n\nComo disse ali, eu estava exausto demais com o curso, me dei alguns dias de descanso, mas pouco depois, fui chamado para trabalhar numa empresa com um desafio bastante grande. De início eu não queria ir, exatamente porque eu estava muito cansado e a depressão também estava batendo muito. Mas fui convencido que seria uma boa, até mesmo para me ajudar na depressão e resolvi entrar.\n\nUma das minhas primeiras atribuições foi buscar profissionais para poder trabalhar no projeto. E para isso, eu sozinho desenvolvi todo o processo seletivo, desde a divulgação, triagem dos currículos, entrevistas iniciais, revisões de código e futura integração ao time. Cheguei até a [gravar um vídeo com algumas dicas sobre processo seletivo](https://youtu.be/njwAbZrO-LQ). \n\nSó por esse processo, você já deve imaginar o quão cansativo foi, mas não teve somente isso. Ao mesmo tempo, eu estava ajudando em toda a nova arquitetura do projeto, estudando sobre as próprias regras de negócio e trabalhando nas decisões estratégicas também. E, é claro que, por estar fazendo tantas coisas e já estando cansado de antes, o corpo simplesmente não aguentou e com isso veio o burnout. Eu preferi me desligar da empresa então, já que continuar ali só iria prejudicar meu quadro, que já estava realmente muito ruim.\n\n## Mini viagem e prêmio\n\nJá faço terapia há alguns anos e, durante as sessões, no momento que eu estava muito ruim pelo burnout do trabalho e pela falta de liberdade devido a pandemia, meu psicólogo me recomendou fazer uma viagem curta, nem que fosse para qualquer lugar aqui perto, só para eu poder não tocar em computador e tentar relembrar minhas viagens.\n\nPensando nisso,resolvi ir para Arraial do Cabo e arredores por 3 semanas. Acabou que passei uma semana e meia em Arraial, 3 dias em Cabo Frio e voltei para casa mais cedo, muito porque a previsão deu que iria só chover (e choveu mesmo) e por problemas pessoais. Eu nunca tinha ido em Arraial e posso dizer que tudo que falam de lá é verdade. É um lugar absurdamente bonito, com uma das águas mais bonitas que já vi no mundo todo. Abaixo vão duas fotos que gostei bastante de lá, mas se quiser, tem [várias outras fotos no meu Unsplash](https://unsplash.com/collections/b03DqownXhY/regi%C3%A3o-dos-lagos---rj).\n\n![Foto de drone das ondas da praia, uma agua bem azul e areia clara](/assets/img/willian-justen-de-vasconcellos-fm0czakepsq-unsplash.jpg)\n\n![Foto de uma ilha num tempo bem sombrio de chuva](/assets/img/willian-justen-de-vasconcellos-gnkzxu7kp6u-unsplash.jpg)\n\nAinda lá mesmo em Cabo Frio, teve um evento do GitHub chamado Nova, que é feito somente para os [GitHub Stars](https://stars.github.com/). Nesse evento, mostraram tudo que estão fazendo de novo e que pretendem apresentar no evento grande e aberto, o [GitHub Universe](https://githubuniverse.com/). Funciona muito como uma preparação para esse evento e, no final, eles também fazem umas premiações.\n\nNuma dessas premiações eu acabei sendo escolhido como **Top Teacher 2021**! Foi algo bem inesperado para mim, já que tem gente absurdamente boa nesse grupo e, só por fazer parte dele, eu já me sentia premiado. \n\n![Foto de um trofeu de gato dourado escrito Top Teacher 2021](/assets/img/github-award.jpeg)\n\nGostaria inclusive de agradecer a todos os meus alunos que estejam lendo esse post, pois esse prêmio é de vocês também.\n\n## Término de noivado e decisão de viajar\n\nLogo que voltei da minha mini-viagem tive um outro baque, que foi o término do meu noivado. Ele já vinha sendo muito prejudicado desde o início da pandemia e acabou não funcionando mais. Algumas semanas antes desse ocorrido, meu amigo [Marcus Silva](https://www.instagram.com/mvfsilva/) estava para se mudar para Vancouver e tinha me convidado para ir lá. Eu disse que num daria, já que minha ex não queria ir para o Canadá de jeito nenhum (não me pergunte,eu não sei o motivo até hoje). Então, pouco depois do término, mandei a seguinte mensagem para o meu amigo:\n\n![Eu perguntando se o convite para Vancouver ainda estava de pe e ele dizendo que sim](/assets/img/mensagem-marcus.png)\n\nE foi assim que, em algumas semanas, eu estava preparando mala e indo viajar para NY e Vancouver. Como o Marcus ainda estava para se mudar, arrumar as coisas e ainda iria ter que fazer 14 dias de quarentena porque tomou CoronaVac, eu resolvi dar uma parada em NY, que também era uma cidade que eu sempre fui interessado de visitar.\n\n## Viagem para NY\n\nEu devo escrever um post separado com várias das dicas e coisas que eu aprendi da cidade e que acho que poderão ser super úteis. Mas aqui é só para dar um resuminho de como foi a viagem e o que eu achei dela.\n\nPrimeiro eu tenho que falar do meu host do Airbnb. Ele é um Egípcio muito legal, mas parecia que estava sempre ligado no 220v. No primeiro dia que eu cheguei, ele já foi super receptivo comigo e inclusive, perguntou se eu queria jantar com ele porque já era bem tarde. E foi assim até o final da minha viagem. Ele chegou a passear comigo para alguns cantos e tivemos várias noites conversando sobre os significados da vida, propósitos e tudo mais. Apesar de no finalzinho eu já estar ficando um pouco ansioso por ele ser tão agitado, num geral ele foi uma pessoa incrível, que posso dizer que apareceu no meu caminho num momento extremamente oportuno.\n\nSobre a cidade de NY, eu acho que não teria muitas palavras para descrever. É uma cidade rica em tudo que é tipo de coisas, seja na culinária, na diversidade cultural, na riqueza mesmo, uns prédios absurdos e gente gastando dinheiro como se num houvesse o amanhã! E o transporte em NY? É a coisa mais fácil e ao mesmo tempo mais completa que já vi! Na Europa o sistema de transporte é muito bom, em NY eles conseguiram deixar no mesmo nível ou até melhor!\n\nEu fiquei 16 dias em NY, andei cerca de **16km por dia**, vi praticamente tudo que estava na minha lista principal de coisas (+150 lugares/atividades) e posso dizer seguramente que num vi/fiz nem 5% do que a cidade tem para oferecer. Foi muito bom que a cidade tinha tanto para ver e fazer, pois ela manteve minha cabeça ocupada quase que 100% do tempo, para num ficar pensando no que não deveria. Então, se você tá precisando desligar sua cabeça e só aproveitar o agora, vá para NY.\n\nLá eu comprei uma câmera nova e também comecei a treinar um tipo de fotografia que eu nem sabia que iria gostar tanto, que é Street Photography. Eu tirei mais de **10 mil fotos** de tudo que é tipo de coisa e de muitas pessoas! Pessoas andando na rua, comendo, lendo, bebendo café, pensando na vida, usando celular, rindo, chorando, enfrentando vento, chuva, vento e chuva ao mesmo tempo, enfim, foi uma ótima experiência também. Se quiser ver algumas das fotos, [tem nos highlights do meu IG](https://www.instagram.com/will_justen/) e também pretendo colocar no meu [Unsplash](https://unsplash.com/@willianjusten) assim que eu parar para editar.\n\n## Assistir a NBA de perto\n\nPara quem me conhece e até quem não me conhece, mas me segue no twitter e afins, eu sou vidrado em basquete! Eu gosto muito mesmo, de assistir os jogos do meu time e dos outros times, pelo simples fato de amar o esporte. Então, como todo fã, antes mesmo de ir para NY, a primeira coisa que eu fiz foi ver quais jogos que teriam quando eu estivesse lá. E para minha super felicidade, o meu time do coração, que é o Golden State Warriors, iria jogar contra o Brooklyn Nets! Antes que me chame de modinha, torço desde quando o time não ganhava nem de peso morto, então ver meu time de anos atrás ganhando tudo foi demais! Aí tiveram os 2 anos passados bem ruins e esse ano tá com tudo de novo, eu precisava ver de perto.\n\nEm resumo, eu fiz meu amigo [Davidson](https://twitter.com/davidsonfellipe) e sua esposa [Juliana](https://www.instagram.com/julianamaltablog/) comparem ingresso para ir assistir comigo. E ainda de forma super aleatória, o [Fernando](https://twitter.com/FernandoCruz_21) disse que estaria em NY na mesma época e ele, como ex-jogador de basquete, nem precisei insistir muito para aceitar e ir também. O jogo foi um sonho do início ao fim, meu time ganhou bonito, mas mesmo que tivesse perdido de lavada, teria sido incrível igual.\n\n## Vancouver e um irmão \"mais novo\"\n\nComo falei, a ideia toda da viagem, na real, era visitar o Marcus. Portanto, logo após sair de NY eu fui para Vancouver. A primeira coisa que eu quero dizer é que eu até sou bom com mapas e sabia sim que ficava na outra costa e talz, mas orra, num sabia que eram fucking 8h de voo!\n\nCheguei em Vancouver já tinha passado de meia-noite e quero parabenizar o aeroporto/translado de lá. Tem um trem super simples e mega limpo que funciona até 1-2h da manhã que tu pega e te deixa no centro de Vancouver em menos de 30min. Isso deixou hiper mega fácil de chegar na casa do Marcus. Mas meus elogios ao sistema de transporte de Vancouver param por aí infelizmente. Talvez por eu estar tão acostumado com o sujo porém excelente sistema de metrô de NY, eu esperava um pouco mais de Vancouver. Lá existem 3 linhas de metrô, mas que não são necessariamente conectadas e consequentemente, não são muito fáceis de entender e muito menos do Google Maps escolher a melhor rota. Em resumo, se você quiser ir no eixo aeroporto/downtown vai ser super fácil/rápido, mas se você quiser/precisar desviar mesmo que de leve, vai ter que andar ou pegar ônibus, mas okay.\n\nE por que eu disse ali irmão mais novo? Bom, o Marcus tem praticamente a mesma idade que eu, mas eu estava honestamente tratando ele quase como um irmão mais novo, talvez por eu ter tido um pouco mais de experiência em morar fora e em país frio. Tentei ajudá-lo com coisas básicas, como comprar roupas confortáveis para o frio, até da importancia ter um umidificador de ar para quando se liga o aquecedor em casa. Já peço até desculpas publicamente ao Marcus por ter sido chato nessas coisas, mas sei que além do que agradeceu, ainda vai me agradecer mais depois por isso hahaha\n\nEnfim, nós passamos 15 dias em Vancouver nos divertindo para caramba, seja instalando o sistema de aquecedor no apartamento, ou o Marcus me acordando aos gritos de manhã falando que estava nevando, depois de ficarmos até 3h da manhã acordados, esperando a fucking neve e nada. Eu ainda tive a oportunidade de conhecer pessoalmente dois alunos na viagem, que foram o [Zizo Ribeiro](https://www.instagram.com/zizoribeiro/) e o [Gustavo Cardoso](https://twitter.com/gustavocardoso). \n\nNão vou me estender muito aqui, até porque também farei um post específico de Vancouver. O que tenho a dizer é que também é uma cidade incrível, mas que definitivamente se tornou ainda melhor pela presença do meu amigo, irmão, Marcus, que foi o motivador da viagem, inclusive. Obrigado por escutar minhas lamentações e me animar na viagem.\n\n## Volta e Covid\n\nBom, a última coisinha do ano, para brindar com chave de ouro esse ano que definitivamente não foi dos melhores, eu acabei contraindo Covid e estou desde então isolado dentro de casa, devo passar meu Natal assim, mas espero que o Ano Novo eu já esteja recuperado.\n\n## E o ano que vem?\n\nBom, se tem uma coisa que esse ano me ensinou é não criar muitos planos, porque senão eu posso me frustrar para caralho. Além disso, viajar mais um pouco e vamos ver, as vezes um emprego novo ou morar num lugar novo? Espero que no final do ano que vem, eu esteja aqui escrevendo como foi um ano de renovação e maravilhoso para mim. Um abraço e vejo vocês ano que vem.\n" }, { "path": "posts/meu-ano-de-2023.md", "content": "---\nlayout: post\ndate: 2023-12-26T08:00:40.000Z\ntitle: Meu ano de 2023\ndescription: Retornando os posts de retrospectiva\nmain-class: misc\ntags:\n - retrospectiva\n - ano\n---\n\n## Introdução\n\nUma tradição que eu perdurei por muitos anos, mas acabei não fazendo em 2022, é falar um pouco sobre como foi meu ano. Eu sempre gostei de fazer isso, pois me ajuda a refletir sobre o que aconteceu e também a planejar o que eu quero para o próximo ano.\n\nSe quiser ver minha evolução ao longo de tantos anos, ficam aqui os posts anteriores:\n\n- [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)\n- [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)\n- [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)\n- [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)\n- [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/)\n- [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/)\n- [Meu ano de 2021](https://willianjusten.com.br/meu-ano-de-2021/)\n\nE outra tradição que sempre faço, é falar sobre música em todos os posts, então seguem algumas bandas que ouvi bastante no ano:\n\n- [Post Malone - Austin](https://open.spotify.com/album/1F9LY06gadScF4g3g3BrDC?si=t0tBCVupSfi49SH3CSKWMg), não é surpresa que eu escuto bastante, mas como ele lançou album novo, eu escutei ainda mais.\n- [Trilha sonora do Spider-Man - Across the Spider-Verse](https://open.spotify.com/album/4ocB97o3gdrIYyIwYSSwVy?si=hqDjBTkkQY6vjoKC1MQw8Q)\n- [Stromae](https://open.spotify.com/artist/5j4HeCoUlzhfWtjAfM1acR?si=CDQclAX9Qu64SSmLOoxW0Q) - como vai ver, eu estive na França, então escutei bastante Stromae, que é um cantor belga, mas que canta em francês.\n\n## Blog\n\nEsse ano eu escrevi um pouquinho mais, absolutamente nada técnico, mas bom, a galera hoje em dia nem lê mais nada técnico mesmo né? Então, eu escrevi sobre:\n\n- [Valorize suas conquistas](https://willianjusten.com.br/valorize-suas-conquistas)\n- [Feito é melhor que perfeito](https://willianjusten.com.br/feito-e-melhor-que-perfeito)\n- [Está tudo bem não fazer nada](https://willianjusten.com.br/esta-tudo-bem-nao-fazer-nada)\n- [Mude!](https://willianjusten.com.br/mude)\n- [Burnout dura mais que você imagina!](https://willianjusten.com.br/burnout-e-o-tempo)\n\nForam posts bem pessoais e mais introspectivos, mas fiquei feliz que as pessoas chegaram a ler e gostaram. Até liberei novamente para ter comentários e tiveram alguns =)\n\n## Canal do YouTube\n\nEu não postei absolutamente **nenhum vídeo** em 2023, meu ano foi cheio e eu também não tive muita vontade de gravar nada. Confesso que eu sempre gostei mais de escrever do que gravar, além de ter que ficar postando com frequência sempre foi um desafio para mim. Parabéns para galera que consegue, porque não é nada fácil.\n\nEntão minhas estátiscas do YouTube ficaram assim:\n\n![Seu canal teve 423.560 visualizações nos últimos 365 dias](/assets/img/youtube-2023.png)\n\nAí uma métrica para quem tem interesse em ganhos, um canal sem absolutamente nenhum vídeo publicado no ano, mas com cerca de 423k views faz em torno de 586 dólares. Não é muito, mas também não é nada mal para um canal que não tem nada novo.\n\n## Trabalho\n\nEu continuei trabalhando na [Appcues](https://appcues.com/mobile) e fui promovido para Staff Engineer, o que foi bem legal. Também cheguei a ganhar um prêmio um pouco antes sobre \"Take pride in your work\".\n\n![Prêmio de Take pride in your work](/assets/img/premio.jpeg)\n\nApesar de ter sido inesperado ganhar o prêmio, fiquei bem feliz em ser reconhecido, pois eu realmente amo bastante o produto em que trabalho (Mobile) e me orgulho bastante do que construimos. Quando eu entrei, não existia esse produto e eu ajudei a criar do zero, posso falar \"quando eu cheguei era tudo mato\" =P\n\n## Ida para França e acidente!\n\nEu sempre fui apaixonado por Francês, não sei explicar o porquê, mas sempre gostei muito e queria melhorar meus aprendizados na língua. Para isso eu resolvi pesquisar onde poderia fazer um intercâmbio e daí que defini Lyon como destino.\n\nO objetivo era ficar 3 meses, mas acabei ficando 2 meses e meio, acabei sofrendo um acidente no segundo dia que estava lá. Eu fui morar num studio que tinha um mezanino e durante a noite, eu meio que esqueci as escadas e também escorreguei nos degraus e caí de uma altura de quase 3 metros. Nessa queda, eu acabei deslocando meu ombro, pensei que daria para colocar no lugar de forma fácil, mas não deu. Lá fui eu às 5h da manhã no hospital, sem blusa porque não conseguia colocar e num frio de 3 graus.\n\nNo hospital eu descobri que iria precisar fazer uma cirurgia para fazer a redução, que é o processo de colocar no lugar, pois estava bastante grave. Tomei anestesia e horas depois acordei assim.\n\n![Eu no hospital](/assets/img/ombro.jpeg)\n\nÉ engraçado que apesar dessa queda e de ter que ficar imobilizado por 3 semanas, eu consegui me virar sozinho e foram dias ótimos. Era só engraçado que eu tinha que explicar sempre o que havia acontecido. Acho que nunca decorei o verbo \"tomber\" (cair) tão bem.\n\n## Chamonix\n\nApesar do acidente, eu consegui fazer algumas coisas bem legais, como ir para Chamonix, que é uma cidade que fica no pé do Mont Blanc, a montanha mais alta da Europa. Eu sou **apaixonado** por montanhas, então foi um sonho realizado.\n\n![Chamonix](/assets/img/chamonix.jpg)\n\nTirei algumas fotinhas por lá, se quiser ver mais, estão no meu [Unsplash](https://unsplash.com/collections/lXqD_F-DDVw/my-adventures-in-chamonix).\n\n## Retorno ao Brasil\n\nComo falei, eu ia ficar um tempo a mais, porém resolvi retornar antes para fazer uma surpresa a minha mãe no dia do aniversário dela. Ela quase teve um infarto quando eu cheguei, mas foi bem bonitinho e divertido. Eu até postaria o vídeo que fiz dela, mas ela me mataria, então não vou postar.\n\n## Frontinsampa, SP e apartamento\n\nNo meio do ano eu fui para SP para o Frontinsampa, deu para me divertir bastante e ver uma galera que eu não via há muito tempo. Dei uns rolês com o [Mario Soutinho](https://www.youtube.com/@DevSoutinho) também.\n\nMas minha ida a SP tinha um objetivo maior, que era ver apartamentos para comprar. Eu sou de uma cidade no interior do RJ chamada Petrópolis, é uma cidade bem bonitinha e calma, só que calma até demais. Eu queria um pouco mais de coisas para fazer e também estar próximo de mais gente que eu conheço.\n\nFoi um processo bem cansativo, mas no final deu tudo certo. Eu comprei um apartamento que gostei bastante e que fica próximo de tudo que eu preciso. Ainda não me mudei, mas estou bem ansioso para isso. Inventei de contratar arquiteta para fazer uma reforma para deixar com minha cara e aí está no processo. Dica, reforma custa muito mais do que você imagina, então se for fazer, se prepare para gastar mais do que você imagina....\n\n## Seattle e LA\n\n![Panorâmica de Seattle](/assets/img/seattle.jpg)\n\nEssa viagem foi uma loucura, mas que deu muito certo. Um dia estava conversando com meu amigo Ramon Medeiros, que é tão fã de The Last of Us quanto eu, que seria maneiro ir para Seattle ver as locações do segundo jogo, que ficaram muito perfeitas. Ele super topou a ideia e nisso eu comecei a pesquisar os preços. Voo para Seattle era absurdamente caro, então resolvi ver para LA, que era bem mais barato e de lá ir para Seattle.\n\nFoi assim que aproveitamos tanto Seattle quanto LA. Em Seattle eu ainda pude ver um dos meus melhores amigos, que é o Marcus Silva que mora em Vancouver e foi de carro para me encontrar.\n\nSeattle é uma cidade incrível, gostei de cada detalhezinho e foi ainda mais incrível que fizemos várias montagens entre fotos do jogo e os lugares de verdade. Sempre achei esses vídeos comparativos mó legais e dessa vez era eu fazendo! Ainda tive oportunidade de assistir um jogo de futebol americano do Seattle Seahawks e nossa, que experiência incrível, o estádio é gigantesco! Até mesmo quem não conhece as regras, consegue se divertir bastante.\n\nVocê pode ver mais das minhas fotos de Seattle no meu [Unsplash](https://unsplash.com/collections/-TIivX5Mug8/my-adventures-in-seattle).\n\nDepois de Seattle, ainda aproveitamos 3 dias em LA, eu gostei da cidade e claro que o ponto mais alto para mim foi a ida em Venice Beach. Mas também teve a ida na Universal Studios para o Parque do Mario! Quem me conhece sabe que eu não sou grande fã de parques, mas esse foi diferente e bem divertido. Te falar que queria ter passado até mais tempo lá para ver todas as coisas com mais detalhes.\n\nAlém disso, pude assistir uma premiere no Teatro Chinês, meu Deus, que cinema meus amigos, que cinema! Eu nunca tinha visto um cinema tão grande e tão bonito, foi uma experiência incrível.\n\nVocê pode ver mais das minhas fotos de LA no meu [Unsplash](https://unsplash.com/collections/50RZQWP5DSo/my-adventures-in-la).\n\n## Desafios e exaustão\n\nAgora no último trimestre do ano, tive desafios bem grandes na Appcues, que me drenaram bastante energia. No final tudo deu certo e conseguimos entregar tudo que precisávamos, mas foi bem cansativo. Acabou que agora resolvi tirar umas férias e retorno só dia 8 de Janeiro, espero que esse tempo ajude a recarregar as energias.\n\n## E o ano que vem?\n\nTodo ano eu traço alguns objetivos, esses ficam só para mim, mas espero que eu consiga realizar boa parte deles.\n\nE vocês? Tiveram um bom 2023? O que aconteceu de mais legal para vocês? Me contem nos comentários!\n" }, { "path": "posts/meu-ano-de-2024.md", "content": "---\nlayout: post\ndate: 2024-12-26T08:00:40.000Z\ntitle: Meu ano de 2024\ndescription: Mudança para São Paulo, viagens, trabalho e um pouco mais.\nmain-class: misc\ntags:\n - retrospectiva\n - ano\n---\n\n## Introdução\n\nSei que esse blog está as moscas e passei mais um ano sem escrever absolutamente nada, mas tradição é tradição, então partiu escrever. Será que alguém ainda lê meu blog? Se sim, manda um alô aí nos comentários, ele funciona como envio para dentro das issues no meu GitHub, então conta até como uma contribuição sua!\n\nEscrever uma retrospectiva me ajuda a refletir sobre o que aconteceu no meu ano e também a planejar o que eu quero para o próximo.\n\nSe quiser ver minha evolução ao longo de tantos anos, ficam aqui os posts anteriores:\n\n- [Meu ano de 2015](https://willianjusten.com.br/meu-ano-de-2015/)\n- [Meu ano de 2016](https://willianjusten.com.br/meu-ano-de-2016/)\n- [Meu ano de 2017](https://willianjusten.com.br/meu-ano-de-2017/)\n- [Meu ano de 2018](https://willianjusten.com.br/meu-ano-de-2018/)\n- [Meu ano de 2019](https://willianjusten.com.br/meu-ano-de-2019/)\n- [Meu ano de 2020](https://willianjusten.com.br/meu-ano-de-2020/)\n- [Meu ano de 2021](https://willianjusten.com.br/meu-ano-de-2021/)\n- [Meu ano de 2023](https://willianjusten.com.br/meu-ano-de-2023/)\n\nE outra tradição que sempre faço, é falar sobre música em todos os posts, então seguem algumas bandas que ouvi bastante no ano:\n\n- Bring Me The Horizon - eles lançaram o album POST HUMAN: NeX GEn ([YouTube](https://music.youtube.com/playlist?list=OLAK5uy_k4UQPx_0wGQL0p0cL-weTcUM1yUlEH2zc) | [Spotify](https://open.spotify.com/album/1k7OXnGQPV4zF3seDwRroD?si=9UMthyiyTryYlB_ubms0Dg)) que ficou incrível e também por ter ido no show, ouvi bastante.\n- Jamie XX - outro que lançou um album super legal chamada In Waves ([YouTube](https://music.youtube.com/playlist?list=OLAK5uy_ktTkHxpCf-Ic338L7nyEMW2DcIoC8dlTY&si=fvveBf5PCV6Ft-Zk) | [Spotify](https://open.spotify.com/album/57MSBg5pBQZH5bfLVDmeuP?si=5rBvbDrdSIyZG0cHW3DkjA))\n\n## Blog\n\nEu não escrevi absolutamente nada esse ano, apesar de terem coisas interessantes que vi/fiz/aprendi durante o ano, infelizmente não me senti bem para escrever, o processo de criação de conteúdo é um pouco complexo e sem uma \"sensação de recompensa\" nos últimos tempos, isso complicava bastante, mas falarei um pouco mais sobre isso mais a frente.\n\n## Canal do YouTube\n\nEu não postei absolutamente **nenhum vídeo** em 2023 e continuei sem postar nada em 2024, meu ano foi cheio e eu também não tive muita vontade de gravar nada. Confesso que eu sempre gostei mais de escrever do que gravar, além de ter que ficar postando com frequência sempre foi um desafio para mim. Parabéns para galera que consegue, porque não é nada fácil.\n\nEntão minhas estátiscas do YouTube ficaram assim:\n\n![Seu canal teve 258.649 visualizações nos últimos 365 dias](/assets/img/youtube-2024.png)\n\nAí uma métrica para quem tem interesse em ganhos, um canal sem absolutamente nenhum vídeo publicado no ano, mas com cerca de 258k views faz em torno de 300 dólares. Não é muito, mas também não é nada mal para um canal que não tem nada novo em **2 anos**!\n\n## Trabalho\n\nEu continuo trabalhando na [Appcues](https://appcues.com/mobile), meu time passou por uma reestruturação, onde agora além de trabalharmos com a parte de in-app messaging para Mobile, nós ainda passamos a trabalhar com [Behavioral Emails](https://www.appcues.com/product/email) e também [Mobile Push Notifications](https://www.appcues.com/product/push-notifications).\n\nTem sido um trabalho bem desafiador, pois precisamos alinhar muito mais detalhes com diferentes times, além de termos que trabalhar em mais outro codebase, esse já mais estabelecido, com certos legados que precisamos conviver e melhorar conforme podemos.\n\nAlém disso, também participei dos hackathons semestrais da empresa e ganhamos tanto em Junho quanto em Dezembro em diferentes categorias! 🎉🎉🎉\n\n## Mudança para SP e realizar sonho da minha mãe\n\nAno passado eu falei que havia comprado um apartamento em SP e que estava fazendo uma reforma antes de ir para morar. Essa reforma que eu pensei que iria durar 2-3 meses no máximo durou de Setembro/23 até Maio/24, foi uma dor de cabeça enorme, onde minha sanidade foi colocada a prova! As arquitetas tinham zero pro-atividade, só mandavam orçamentos superfaturados, enfim, minha dica, escolham muito bem seus arquitetos e pensem bastante se desejam fazer reforma, porque é algo que vai trazer dores de cabeça.\n\nApesar de todos os problemas, deu tudo certo no final e hoje estou bastante feliz e realizado com meu cantinho. Cheguei até a postar no [twitter](https://x.com/Willian_justen/status/1826671266709078132) quando completou 1 ano da compra.\n\nComo muitos sabem, eu sou de Petrópolis e minha mãe havia ficado lá, como somos muito próximos e ela é minha melhor amiga, acabava que sentíamos bastante a falta um do outro. Após conversar bastante com ela, pude realizar o sonho dela que era de ter uma casa própria e comprei um apartamento para ela aqui em SP também, no mesmo bairro em que eu moro, assim estamos sempre próximos e podemos ajudar um ao outro.\n\n## Experimentando São Paulo\n\nMuitos amam e mais ainda odeiam São Paulo, sei que pode ser uma cidade um pouco intimidadora, ainda mais se você vier de uma cidade tão pequena quanto eu. Mas se você der uma chance, vai ver que São Paulo tem literalmente de tudo! Tem museus e casarões antigos super legais para apreciar arte e história, várias exposições e eventos diferentes.\n\nEu tive oportunidade de fazer os clássicos como ir no Masp, Jardim Botânico, Pinacoteca, Farol Santander, CCBB, etc. Mas também fui em um jantar secreto onde só descobrimos o lugar no dia e o cardápio também, vi a Raissa Leal ganhando o SLS mais uma vez, fui num bar que só podia entrar se tivesse uma palavra secreta, joguei pinball e fliperama num bar descolado e apreciei vários dias de pôr-do-Sol da minha varanda, ah, esse eu vi demais!\n\n![Sol](/assets/img/sol-casa-24.jpg)\n\n## Viagens\n\nEu comecei o ano literalmente viajando, onde pude passar a virada em Santiago/Chile com a minha namorada. Foi nossa primeira viagem juntos e apesar de já conhecer Santiago, foi muito legal poder conhecer novos lugares ao lado dela, sem contar que ajudou demais na nossa conexão, afinal foram 9 dias sem se separar.\n\n![Santiago/Chile -24](/assets/img/santiago-chile-24.jpg)\n\nPouco depois eu fui para Porto Rico para um encontro da empresa, foi uma viagem super rápida de apenas 3 dias, mas foi bacana rever pessoas que trabalho diariamente mas nunca vejo pessoalmente.\n\nE então veio **a viagem**! Eu fui para Chicago e passei 10 dias por lá, foram 10 dias incríveis. Essa viagem foi meio que \"aleatória\", já que foi escolhida inicialmente porque era o que as milhas podiam pagar, mas logo foi se transformando em um super destino que eu queria ir. Muito por ser uma cidade incrível para fotografia de arquitetura e também por uma série chamada [The Bear](https://www.imdb.com/title/tt14452776/), que é uma das minhas séries favoritas de todas.\n\nLá eu fiz de um absolutamente tudo! Eu fui nos dois maiores arranha-céus da cidade, fiz passeio de barco aprendendo sobre toda a história e arquitetura da cidade, conheci cafeteria com estrela Michelin que apareceu na série e claro, fui na lanchonete que originou tudo.\n\nAinda tive tempo de ir num show de uma banda da minha adolescência (Keane) no teatro icônico de Chicago e também assisti a orquestra do [Hans Zimmer](https://www.youtube.com/watch?v=va1oiojnGrA) dentro da United Center, a famosa arena do Chicago Bulls! E claro, ainda assisti um jogo do Chicago Sky, time da brasileira Kamila Cardoso!\n\nForam tantas e tantas fotos, que é mais fácil eu falar para você ir olhar no meu [site de fotografia](https://photos.willianjusten.com.br/), para não perder nenhuma, tiveram algumas que eu gostei bastante. Tem uns vídeos no meu [Instagram](https://www.instagram.com/will_justen/) também.\n\n## Shows\n\nTeve uma época em que trabalhei na [Queremos](https://www.queremos.com.br/) e com isso eu ia em diversos shows quase toda semana, mas tirando isso, eu nunca fui uma pessoa de tantos shows. Mas esse ano (talvez por forte influência da minha namorada), eu acabei indo em alguns e foi muito legal!\n\nEu comecei o ano indo no festival I wanna be lá no Rio de Janeiro, onde pude finalmente assistir [The Used](https://www.youtube.com/watch?v=tgB_JwcuPg0) e peguei uma chuva que era mais um dilúvio para assistir [Simple Plan](https://www.youtube.com/watch?v=r0U0AlLVqpk), sem contar A Day To Remember e The All-American Rejects (com o vocalista trincado na cocaína que nem piscava os olhos). Voltamos para o hotel completamente encharcados e minha namorada fez uma bela gambiarra para secarmos nossos tênis, colocando eles dentro da pia, cobrindo com toalha e ligando um secador dentro, deu tudo certo, mas não recomendo por razões óbvias de que vocês podem botar fogo em tudo!\n\nDepois eu tive oportunidade de assistir mais uma vez uma das minhas bandas favoritas da vida, que se chama [City and Colour](https://www.youtube.com/watch?v=73jCMHgz_Zo), foi um show bastante intimista e gostoso.\n\nComo falei, também acabei tendo uma experiência incrível de ir no mais famoso teatro de Chicago para assistir Keane, uma banda que eu ouvia demais na minha adolescência, mas fazia muito tempo que não ouvia, a nostalgia pegou forte.\n\nE por último, foi no show [Bring Me The Horizon](https://www.youtube.com/watch?v=QJJYpsA5tv8). Quando saiu que eles fariam show no Allianz eu fiquei um pouco chateado, pois prefiro shows menores, no momento que falaram que ia ter um show em casa menor, eu corri para conseguir comprar, não poderia ter sido uma escolha melhor! O show foi absurdo de bom, saí de lá com uma dor fudida nas costas de tanto pular e faria de novo.\n\n![Shows 24](/assets/img/shows-24.jpg)\n\n## React Avançado de graça\n\nNo meio do ano após conversar com meu amigo Guilherme Louro, que criou o curso de React Avançado comigo, nós resolvemos liberar o curso **de graça** para todo mundo. E todo mês eu crio um [cupom](https://www.udemy.com/course/react-avancado/?couponCode=DEZEMBROFREEBLOG) para quem quiser fazer. Esse foi definitivamente o meu curso de maior sucesso e também o maior que já fiz, com mais de 650 vídeos. Muitas coisas mudaram desde a criação do curso e já não fazia mais sentido tentar dar suporte/atualizar e por isso resolvemos disponibilizar, pois apesar disso, muito conteúdo ali ainda é interessante e pode ajudar bastante gente.\n\n## Volta a criação de conteúdo\n\nDepois desses 2 anos de praticamente hiato, diria que começo a me sentir mais estável quanto a minha depressão e também posso dizer que estou recuperado do burnout que tive na época que trabalhei em startup e no React Avançado, sim [burnout dura mais que você imagina](https://willianjusten.com.br/burnout-e-o-tempo).\n\nCom isso, comecei a pensar em voltar a criar, sinto que já ajudei muita gente e também já fui bastante ajudado por esses conteúdos. Cheguei até a postar no [LinkedIn](https://www.linkedin.com/posts/willianjusten_postei-esses-dias-no-twitter-mas-por-que-activity-7274925725529374721-lvE4?utm_source=share&utm_medium=member_desktop) perguntando se ainda teriam interesse em conteúdos e tive uma recepção bastante legal, então por que não né?\n\n## Spoilers\n\nNão quero falar muito ainda, mas agora no finalzinho do ano comecei a montar um novo curso, com o intuito de ser algo leve e ao mesmo tempo divertido, afinal, programação e estudar não precisam ser chatos!\n\nE também penso em voltar a escrever aqui e gravar vídeos lá para o meu [canal do YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1). Falar tanto de assuntos um pouco mais avançados e/ou experiências com meu trabalho, assim como também falar de assuntos diversos mesmo, sempre nesse formato mais de conversa intimista, que já faço há quase 10 anos! Aliás, o blog vai completar 10 anos exatos no dia [03 de Janeiro](https://willianjusten.com.br/making-of-parte-1), quem aí lembra da primeira versão do blog feito em Jekyll e azulão?!\n\nUm grande abraço a todos, espero que tenham tido um ano bem legal e que o ano que vem venha ainda melhor!\n" }, { "path": "posts/meu-dia-a-dia-como-dev-frontend.md", "content": "---\nlayout: post\ndate: 2015-01-15T20:17:11.000Z\ntitle: Meu dia a dia como dev frontend\ndescription: Um pouco do meu dia a dia como dev frontend. Minha máquina, meus\n programas, arquivos, configurações.\nmain-class: misc\ntags:\n - frontend\ncategories: null\n---\n\nComo alguns devem saber o [Luiz Felipe Tartarotti Fialho](https://github.com/felipefialho) criou um [repositório](https://github.com/felipefialho/1-post-por-dia) no github bastante legal, para que pessoas possam pedir alguns temas.\n\nE teve esse pedido do [Matheus Moraes](https://github.com/matheusmmo):\n\n> Galera, sempre tive muita curiosidade e imagino que outros também tenham, de saber como é o dia a dia de cada dev. Ou seja, como é o seu workflow, qual a estrutura de pastas que o cara usa quando vai fazer uma aplicação x. Qual as ferramentas que usa todos os dias, qual frameworks que gostam de usar esporadicamente. E até saber como funciona os workflows das suas empresas.\nUm papo um pouco mais descontraído, sobre experiências.\nEu que sou do interior de SP e não tenho muito contato direto com a galera que não trabalhe em agência sempre tenho curiosidade de saber essas coisas.\nQuem já trabalhou em agência sabe que o negócio é correria e na maioria das vezes não fazemos o que precisamos pra deixar um projeto legal.\nEnfim, é isso. Fica a dica ai pra quem quiser fazer ^^\n\nO [Fernando Daciuk](https://github.com/fdaciuk) já fez o [post dele](http://blog.da2k.com.br/2015/01/15/como-ser-um-dev-frontend-usando-linux/) e agora farei o meu =)\n\n## Meu cantinho\n\n![Mesa de trabalho](/assets/img/workflow/mesa.jpg)\n\nEu uso um Macbook Air 13\", tanto em casa, quanto no [Queremos!](https://www.queremos.com.br/), não ligo muito para guerrinha Apple x PC, mas dei preferência ao Air por ser bastante leve e fino, como eu ando bastante, é bem melhor carregar uma coisa levinha do que um trambolho gigante e pesado.\n\nUtilizei durante muito tempo notebooks da Dell e meu último foi da Samsung (acho que ele me traumatizou)... Neles eu sempre utilizei Linux, comecei com o [Ubuntu](http://www.ubuntu.com/) e depois fui parar no lindo [Elementary](https://elementaryos.org/) (que inclusive é bastante similar ao Mac OS e facilitou a transição).\n\nPraticamente não consigo trabalhar em uma tela só, então no trabalho eu uso um monitor de 23\" FullHD da LG e em casa utilizo um de 25\" da Samsung. Não sou altamente crítico com monitor não, contanto que tenha uma resolução e tela grandes, está ótimo.\n\n![Quadro Kanban](/assets/img/workflow/quadro.jpg)\n\nTenho um quadro em que faço algumas anotações e trabalho com meu [Personal Kanban](http://en.wikipedia.org/wiki/Kanban_board), que nada mais é que uma listinha de tarefas a fazer, sendo feitas e já feitas. Para quem não pode ter um quadro, existem vários apps que permitem fazer essa organização, o que eu mais aconselho é o [Trello](http://trello.com), eu só tenho um quadro mesmo, porque eu acordo e já olho para ele, se fosse aplicativo, acabaria me esquecendo de olhar, sério, eu só não esqueço a cabeça porque está presa no corpo.\n\n## Aplicativos\n\nComo terminal padrão eu uso o [iterm 2](http://iterm2.com/) com umas [configurações](https://github.com/willianjusten/dotfiles) diferentes, para mudar um pouco as cores e também a forma de mostrar as informações.\n\nPara codar, utilizo o [Sublime Text 3](http://www.sublimetext.com/3) com alguns [plugins fundamentais](https://github.com/willianjusten/sublime-preferences) para minha vida.\n\nMeu browser principal é Google Chrome, mas também tenho utilizado bastante do Firefox Developer Edition, até que ele é bem interessante e tem algumas ferramentas bastante úteis.\n\n#### Outras coisinhas que uso\n\n* [Mou](http://25.io/mou/) - para escrever Markdown e ter um preview bonitinho.\n* [Vagrant](https://www.vagrantup.com/) - para criar ambientes de desenvolvimento separados.\n* [Dropbox](https://www.dropbox.com/) - meu salvador da pátria para guardar todas as minhas coisas.\n* [Hipchat](https://www.hipchat.com/) - programa de chat que utilizo no trabalho, ele é integrado ao new relic e a cada deploy ou commit, ele envia uma mensagem para todo o grupo.\n* [Spotify](https://www.spotify.com/br/) - sério, ele é muito importante para mim, sem ele, não trabalho direito.\n\n## Workflow\n\nEu mudo bastante as ferramentas e tecnologias de acordo com os projetos, mas o que não falta nunca:\n\n* [Gulp](http://gulpjs.com/) - meu automatizador de tarefas padrão\n* [Stylus](http://learnboost.github.io/stylus/) - meu pre-processador css favorito\n\nEu tenho um boilerplate que uso bastante e adapto bastante também, que é o [Fast](https://github.com/willianjusten/Fast)\n\nEm alguns projetos gosto de utilizar o MEAN (MongoDB, Express, AngularJS, NodeJS), também curto Python, então já me aventurei um pouco com o [Flask](http://flask.pocoo.org/), [Bottle](http://bottlepy.org/) e o [Django](https://www.djangoproject.com/). No Queremos! tem uma parte rodando o [Symfony](http://symfony.com/), que é um Framework PHP. Enfim, não tenho medo de aprender coisas novas, seja no Frontend, seja no Backend, o importante é se aventurar! \\o/\n" }, { "path": "posts/meu-processo-para-a-toptal.md", "content": "---\nlayout: post\ndate: 2017-07-21T20:20:15.000Z\ntitle: Meu processo para a Toptal\ndescription: Algumas coisas que aconteceram até eu entrar na Toptal e algumas\n das dúvidas comuns.\nmain-class: misc\ntags:\n - remoto\n - toptal\ncategories: null\n---\n\n## Introdução\n\nFaala pessoal, venho trazer um post que já me foi pedido *12382178931* vezes, falei que ia fazer e depois de mais de 7 meses na Toptal, resolvi fazer. A ideia do post é falar um pouquinho de como foi o meu processo para entrar na Toptal e uma das coisas que acho que vai ser importante, como a Toptal funciona de verdade. Digo isso pois muiiiiita gente confunde como ela funciona e é engraçado que sempre precisamos explicar um pouquinho xD\n\nEnquanto escrevo, vou ouvindo uma banda que eu não poderia deixar de estar escutando depois do acontecido ontem... A banda em questão é [Linkin Park](https://open.spotify.com/user/spotify/playlist/37i9dQZF1DX6GJVEkXUD2r), que fez parte da minha adolescência e vou sempre me lembrar como uma das bandas que me fizeram gostar de Rock.\n\n## Como a Toptal funciona?\n\nAntes de tudo, precisamos falar como a [Toptal](https://www.toptal.com/) funciona, pois isso causa um número gigante de dúvidas. A Toptal é uma plataforma que liga Freelancers (Designers, Desenvolvedores e Experts em Finanças) a grandes empresas como: Airbnb, HP, J.P.Morgan, Emirates, entre outras mais.\n\nE como isso funciona? Os freelancers aplicam na plataforma e passam por um processo conhecido como [Top 3%](https://www.toptal.com/top-3-percent), onde eles passam por várias etapas, como entrevista para análise da língua e perfil, entrevistas técnicas, projetos e outras coisas mais. Caso o freelancer passe nessas etapas, eles passam a ter acesso do painel de jobs, onde várias empresas do mundo todo colocam suas vagas. As empresas para poderem cadastrar suas vagas, também passam por um processo.\n\nE por que de tudo isso? Para garantir qualidade e confiança, as empresas se sentem mais seguras podendo contratar profissionais que de fato são especialistas naquela área. E os freelancers podem ter confiança que irão receber corretamente e irão trabalhar com empresas boas e confiáveis.\n\n## Confusão\n\nEm geral, é nessa parte que a galera sempre se confunde. Acabam pensando que quem trabalha na Toptal é **sempre** Freelancer e bom, não é bem assim, como a plataforma funcionaria sem ninguém? xD\n\nExistem os freelancers que **usam** a plataforma da Toptal e existem os funcionários normais que trabalham **para** a Toptal. Eu entro nesse segundo caso, eu sou Frontend Developer no Core Team da Toptal, ajudando a criar novas features, participando de iniciativas e mantendo a plataforma como um todo. E tendo isso em vista, eu vou falar de como foi o meu processo para entrar como desenvolvedor no Core Team.\n\n## Processo\n\nBom, para começo de tudo, um amigo que trabalhou comigo na HUGE tinha recebido um email com uma proposta para trabalhar na Toptal enquanto jogava videogame lá em casa e você pode [ler o relato dele aqui](https://nipher.io/mudancas). Ele acabou fazendo o processo todo e passou, indo trabalhar lá em Maio. No mesmo mês eu saía da HUGE para me dedicar aos meus cursos e começar a viajar pelo mundo, que já era um desejo muito grande meu, você também pode [ler aqui](https://willianjusten.com.br/mudando-sua-vida-atraves-de-projetos-paralelos/).\n\nO Jonas começou a trabalhar lá e em Setembro eu estava indo morar na Europa. Ele, como estava trabalhando remoto nessa empresa maravilhosa que permitia viajar e trabalhar ao mesmo tempo, aproveitou e foi para Europa no mesmo vôo que o meu!\n\nE pouco depois do Jonas entrar, pediriam para ele recomendações de bons desenvolvedores, ele me perguntou se podia recomendar e a primeiro momento, eu nem quis. Eu tinha acabado de sair de uma empresa porque não queria me prender e poder fazer minhas viagens e projetos, não fazia sentido eu entrar para uma empresa. Mas no meio de Novembro ele acabou me indicando e foi então que entraram em contato comigo (curiosamente já tinham entrado em contato comigo antes, eu devo ter achado que era spam e nem li).\n\n### Primeiro Contato\n\nMeu primeiro contato foi muito maneiro, eu conversei com uma recruiter da República Tcheca, o que já achei super legal, mostrando o como a empresa é diversificada. Ela estava ainda em Portugal para um evento que ia acontecer lá, da qual a Toptal estava patrocinando e tudo.\n\nFoi bem padrão, ela fez perguntas sobre projetos passados, empresas que já tinha trabalhado, o que estava fazendo no momento. O que achava da Toptal, se estaria animado de poder trabalhar com um amigo de novo. Toda essa conversa foi em inglês obviamente, mas ela tinha uma pronúncia bem aberta e fácil de entender (bem diferente de uns irlandeses que eu conversava em pubs barulhentos), então foi super tranquilo para mim.\n\nLogo após essa conversa, ela já falou que tinha gostado bastante do meu perfil e parecia bastante com o que precisavam, então falou que iria me mandar um email marcando a próxima etapa, onde iria conversar com algum desenvolvedor.\n\nPouco tempo depois eu recebi o email e nele já tinha o Github do desenvolvedor que eu iria conversar e outras coisas mais. Ela falou que assim eu podia ver o que ele também fazia em seu tempo livre e poderíamos ter mais papos para discutir, achei isso demais! Até porque eu amo trabalho opensource.\n\n### Etapa 2\n\nEssa etapa foi com um Russo e foi muito muito maneira. Primeiramente a gente bateu um papo, que já foi bem mais técnico, indo desde escolhas em projetos passados, até uma análise do meu Github. Ele já tinha dado uma olhada em praticamente tudo que eu tinha feito e fez vários comentários relacionados aos meus códigos, inclusive reclamou que meu blog era em Português, porque ele tinha se interessado em ler, mas quando traduzia ficava muito estranho.\n\nDepois dessa conversa, teve uma pequena etapa de live coding, divido em 2 pequenos testes. O primeiro tinha umas coisas quebradas na tela e eu tinha que corrigir, mas sem mudar o tamanho dos elementos. Era uma coisa muito simples, mas ele falou que esse teste servia para ver se a pessoa não iria querer criar coisas malucas só para corrigir, pois o simples é sempre o melhor.\n\nO segundo teste eram alguns ícones em SVG na tela (nem amo SVG né?) e ele pediu para que eu deixasse aqueles ícones organizados legais, com uma UX interessante. Eu fiz algumas edições para ficarem lado a lado, adicionei cores e animações. Inclusive usei um filtro em SVG que deixou ele boquiaberto, acho que só passei por causa disso ahuaua\n\nNo final dessa conversa e testes, ele falou que iria passar todas as anotações dele e eu iria receber um email dizendo se havia passado ou não. No dia seguinte eu recebi um email falando que eu tinha passado para a próxima etapa.\n\n### Etapa 3\n\nEssa etapa nem teve conversa praticamente, quem me entrevistou foi um Russo (que hoje é o líder do meu time), ele já chegou me passando o problema para resolver e eu precisava resolver live coding ali. Confesso que eu fiquei extremamente nervoso, ele parecia muito sério (hoje sei que ele é o mais zoeiro do time) e o teste tinham vários detalhes que precisava prestar atenção.\n\nEu então comecei a ler e me concentrar para fazer o teste, era basicamente uma integração que tinha que fazer de uma API, preenchendo uns dados na tela, depois salvando os mesmos dados, no meio do caminho existiam também alguns estados e validações que eu precisava me preocupar.\n\nEu estava fazendo a implementação em JS, mas ele me parou no meio e falou para eu estilizar o que já tinha, pois a parte de JS já estava suficiente para ele. Eu peguei e deixei o formulário bem bonito no tempo que deu. Ele tava apressando pacas e o engraçado é que ele deixou o microfone dele ativo o tempo todo e um gato estava do lado do Notebook, então ficava o barulho de ronronar do gato o tempo todo!\n\nEu saí dessa etapa já sabendo que não tinha passado, tinha achado minha implementação em JS uma grande merda, confesso que não sou nada bom com coisas feitas as pressas e com pressão. Aí o Jonas tava em Dublin na época, encontrei com ele e um outro cara da Toptal (que aliás estava assistindo minha entrevista em ghost mode) e fomos beber, para eu não ficar mais bolado.\n\nE conversando com esse cara, ele falou que de fato viu que eu estava bastante nervoso, mas que é assim com qualquer um, que quando ele tinha feito a entrevista, tinha ficado nervoso também. E falou para eu deixar de me preocupar, que depois eu veria o resultado.\n\nNão deu outra, no dia seguinte eu recebi um email avisando que eu havia passado para a quarta e última etapa. Que seria ter uma conversa bem técnica com o Vice Presidente de Engenharia da Toptal, que nada mais é que o [Bozhidar Batsov](https://github.com/bbatsov), o cara que criou o Styleguide de Ruby, de Clojure e que criou um editor próprio!\n\n### Etapa 4\n\nDiferente de todas as outras etapas que tinha sido com diferença só de 2 dias, essa foi marcada um pouco mais para frente, pois o Bohzidar estava cheio de eventos para participar e não tinha tempo. Então a call foi marcada para o final de Novembro (eu tinha iniciado o processo no início do mês). Acabou que eu esqueci o dia exato da call e estava numa road trip pela Irlanda com 3 amigos (Jonas incluso). Nessa viagem a gente ainda decidiu ficar mais um dia, exatamente o dia que era minha call. A gente já acordou de manhã planejando como iríamos fazer para não correr o risco de ficar sem internet ou bateria.\n\nEstávamos já no caminho de volta para Dublin, passando por cidadezinhas muito pequenas e decidimos parar numa cidade qualquer no meio do caminho, pois tinha um restaurante e eu poderia conversar melhor. Ficamos lá até dar a hora da call, acho que a mulher do restaurante deve ter achado até estranho, pois ficamos muiiiiito tempo.\n\nNa hora da call eu fui para o segundo andar (que não tinha ninguém) e conversei com o Bohzidar pelo telefone mesmo. Foram diversas perguntas bem interessantes, coisas como \"O que você acha de linguagens compiladas em outras linguagens?\", \"Do ponto de vista de Frontend, o que você considera o maior gargalo da aplicação?\" e várias outras que nem lembro mais. Nós conversamos durante muito tempo, até que eu precisei cortar e falar que minha bateria estava acabando! (E o medo de perder a vaga nessa parte)\n\nE aí nesse momento que eu comentei da bateria, ele mesmo já me deu os parabéns falando que eu tinha passado e que tinha gostado demais conversar comigo, que poderia conversar até mais. Explicou só os próximos detalhes e então nos despedimos.\n\n### Início na Toptal\n\nLogo após o Bohzidar ter me aprovado, a mesma recruiter da primeira fase já me mandou um email perguntando quando eu poderia começar. Eu respondi que não estava trabalhando no momento então estava disponível, ela falou \"Ótimo, hoje é sexta, então você começa na segunda tá?\". E foi assim que eu comecei =D\n\nNo primeiro mês todo iniciante fica num Bootcamp onde aprende como a empresa funciona, faz tickets mais fáceis e com supervisão/auxílio da galera do time, até notarem que você já está preparado para entrar em algum time. Eu fiquei exatas 3 semanas e fui para um dos vários times que temos. Os times são compostos por Backend, Frontend, QA, Team Lead e, em alguns tem PM também.\n\n## Como funciona o Core Team da Toptal?\n\nBom, como disse, somos vários times e cada um é responsável por um pequeno pedaço da plataforma e/ou produtos internos. Nos comunicamos pelo Slack o dia todo, fazemos bastante pair programming usando o Screenhero ou qualquer outro app que compartilhe tela, temos daily como qualquer equipe, retrospectivas e updates semanais da empresa como um todo. Utilizamos o Gìthub para versionar nosso código e possuímos um processo de code review muito legal, onde todos tentam ajudar para ter o melhor código entregue no final.\n\nPor mais que estejamos em todos os lugares do mundo, a gente tá sempre perto devido aos canais de comunicação e é bastante divertido saber onde cada um está, a Toptal influencia bastante a galera viajar, ir a eventos e etc.\n\nSe você se interessou e quer saber mais e também quais vagas temos abertas, acessa o site [toptal.com/careers](https://www.toptal.com/careers), lá tem fotos, vídeos, mapinhas, vagas, tudo bem legal =D\n\n## Conclusão\n\nBom galera, espero que tenham gostado do post, pretendo escrever outros posts sobre trabalho remoto, viagens, entrevistas, mercado de trabalho lá fora e etc. Então fiquem ligados =D\n" }, { "path": "posts/meu-setup.md", "content": "---\nlayout: post\ndate: 2018-10-19T07:03:08.000Z\ntitle: Meu Setup\ndescription: Quais ferramentas eu tenho, que programas eu uso e outras coisinhas mais.\nmain-class: misc\ntags:\n - setup\n - code\n---\n## Introdução\n\nFaaaaala pessoal, faz muito tempo que eu não escrevo nada e isso já estava me dando uma agonia danada! Eu estive cheio de trabalho, depois algumas coisas pessoais e nas últimas duas semanas eu simplesmente fiquei sem meu Mac, pois ele teve um problema na tela. Mas agora que eu já estou com meu filhinho de volta, quero voltar a escrever!\n\nA ideia é simplesmente escrever com mais frequência e sobre tudo, então resolvi fazer um post sobre as minhas coisas, pois muita gente pergunta e acho que acaba ficando mais fácil mandar o link ao invés de sempre responder um a um xD\n\nComo padrão de todo post, eu vou escrevendo ouvindo uma banda incrível chamada [The War on Drugs](https://open.spotify.com/album/4TkmrrpjlPoCPpGyDN3rkF?si=RYrjLDiVQl-WGoSLZJJ9MQ), eles tem um som bem legal, que me remete um pouco os anos 80/90, vale bastante a pena ouvir. O último album ficou bem legal e a música que mais ficou na minha cabeça é [Pain](https://open.spotify.com/track/59P1nrdEImkAKa1nyW9X2e?si=gvUwLG86QCKka13p4x5C1A), um solo de guitarra muito bom!\n\n## Quais tranqueiras eu tenho?\n\n### Computador\n\nEu tenho um **Macbook Pro 15\" com Touchbar**, é uma máquina realmente muito boa e a tela é a coisa mais bonita que tem.\n\n**Os prós:**\n\n- Tela muito boa com resolução fantástica\n- Sistema operacional do OSX, usei Linux durante muito tempo e sentia falta de algumas compatibilidades, com o Mac eu tenho o lado bom do terminal e a compatibilidade com todos os programas que uso. Também acho o sistema super fácil de usar, mas tanto Windows quanto Linux tem avançado muito, no futuro vai ser questão de preferência só mesmo.\n- O material é ainda muito bem cuidado e o Mac apesar de grande (15\") ainda é bem leve.\n\n**Contras:**\n\n- A touchbar só serve para gastar sua bateria e custar mais caro, achei completamente inútil\n- O teclado é a pior porcaria que inventaram (pelo menos agora são obrigados a trocar as teclas defeituosas de graça)\n\n### Monitor\n\nMeu monitor é o [Dell U2717DA](https://www.dell.com/pt-br/shop/monitor-dell-ultrasharp-de-27-com-tela-infinita-u2717d/apd/210-ahgv/monitores-e-acess%C3%B3rios), que é um de tela infinita com suporte articulado.\n\nComo eu gosto bastante de fotografia, sou extremamente exigente com a qualidade de imagem do monitor e aqui foi paixão a primeira vista. Ele é enorme, consigo separar todas as coisas muito bem na tela com essa resolução alta e as cores/contraste são perfeitos, fazendo com que eu consiga ver exatamente como é para ser.\n\nO braço articulado é bem legal, pois eu consigo deixar o monitor na vertical ou até mover para os lados e usar como uma TV. Mas, sinceramente, depois de ter comprado, acho que não justificou tanto o preço, no final era melhor ter comprado o com suporte normal mesmo.\n\n### Fone de Ouvido\n\nPasso 99% do tempo ouvindo música, então o fone de ouvido é muito importante! Mas eu tenho um problema, eu uso óculos, nem todo headphone funciona bem comigo, pois eles acabam apertando a haste do óculos na cabeça e depois de algumas horas usando, dói bastante. Usar fone intraauricular também não é uma opção, pois prejudica muito a audição e o uso prolongado também não é confortável.\n\nDepois de muita procura, acabei comprando um fone num aeroporto em Amsterdam e nunca achei algo tão confortável. Engraçado que ele nem é dos melhores do mundo e nem foi uma fortuna, eu paguei 60 dólares nele. Mas olhei no site e agora ele tá 199 dólares! Acho que dei muita sorte xD\n\nO fone em questão é um [Sony MDR 100A](https://www.sony.com/electronics/headband-headphones/mdr-100aap), ele tem uma cor muito legal de verde escuro metalizado, lembro que a mulher do aeroporto tinha comentado que até ia comprar um para ela também.\n\n### Câmera e Drone\n\nPara quem não sabe, eu sou tremendamente apaixonado por fotografia, principalmente aérea, se quiser ver minhas fotos tem lá no meu [Unsplash](https://unsplash.com/@willianjusten) ou só me seguir no [Instagram](https://www.instagram.com/will_justen/).\n\nTudo começou quando eu vi fotografias aéreas por um cara de codinome [Airpixels](https://www.airpixelsmedia.com/), eu me apaixonei muito rapidamente pelo que ele fazia e resolvi correr atrás de um Drone que ele usava, na época era um Phantom Pro 4, que é um bicho tremendamente gigantesco. Eu não queria algo tão grande e nem tão caro, então acabei achando o [DJI Mavic Pro](https://www.dji.com/mavic), que já era um pouco mais barato e muito menor. Eu morava na Irlanda quando o comprei, então ficou muito mais barato do que comprado no Brasil e eu tenho utilizado ele para todo o canto que eu vou desde então. Na minha opinião, ele é um drone bem caro, mas vale bastante a pena.\n\nAno passado no encontro da Toptal na Espanha, eu decidi comprar uma câmera também, depois da insistência de alguns amigos. Eu adquiri a [Sony a6500](https://www.sony.com/electronics/interchangeable-lens-cameras/ilce-6500-body-kit). Ela é uma puta câmera, com mil e uma utilidades e que eu espero que dure uns 10 anos aí, para valer o quanto paguei (sim, me custou um rim...mas para isso que a gente trabalha né? xD)\n\n### Cadeira\n\nSim, parece bobeira, mas a cadeira é extremamente importante para quem trabalha de casa. Eu tinha uma cadeira horrível, comprada nessas lojas \"quer pagar quanto?\" e bom, depois de anos nela, piorei ainda mais a minha coluna, que já nem era das boas.\n\nDecidi que iria comprar uma cadeira melhor e depois de perguntar mil pessoas e ler mil reviews na internet, eu acabei comprando a [DX Racer R Series](https://www.dxracer.com.br/cadeira-dxracer-racing-r131no-178-p986088). Fiquem atentos que eles fazem umas promoções doidas, eu consegui 35% de desconto e frete grátis, então no final valeu a pena.\n\nA cadeira é super confortável e o principal, ela tem vários ajustes! Posso mudar a altura/inclinação/distância dos braços, também dá mudar a inclinação da cadeira e praticamente deitar, o que ajuda bastante a deixar ela de acordo com a altura da sua mesa.\n\nNo início eu tenho que confessar que sofri absurdamente na cadeira, minha coluna não estava acostumada a ficar reta e essa cadeira é muito mais firme, então foi um terror para mim. Hoje é raro eu sentir dores nas costas por causa da cadeira e minha postura melhorou consideravelmente (apesar de ainda ser uma merda, mas a cadeira nem tem culpa).\n\n### Softwares\n\nComo editor de texto eu uso o [Visual Studio Code](https://code.visualstudio.com/) e inclusive escrevi um [post sobre ele](https://willianjusten.com.br/migrei-para-o-vscode-e-estou-feliz/), onde digo meus plugins e etc.\n\nPara o terminal, eu uso o [iTerm 2](https://www.iterm2.com/) com alterações de cores e alias próprio, através dos meus [dotfiles](https://github.com/willianjusten/dotfiles).\n\nMeu browser favorito é o Chrome e diferente de muita gente que reclama que ele come mil recursos, na minha máquina é o Firefox quem destrói a performance...\n\nComo player de música, eu uso o [Spotify](https://www.spotify.com/br/) sem pensar duas vezes.\n\nPara edição de fotos eu uso o [Adobe Lightroom](https://www.adobe.com/br/products/photoshop-lightroom.html), que é sem dúvidas a melhor ferramenta que tem para essa tarefa, ele permite uso de presets para trabalhar com múltiplas fotos, o ajuste fino de detalhes é perfeito e é a melhor ferramenta para editar RAW, que é o meu caso.\n\nOutro app que não pode faltar na minha máquina é o [Franz](https://meetfranz.com/), ele basicamente agrega Whatsapp/Messenger/Slack, tudo num só, então é uma janela para tudo, o que me facilita bastante.\n\nUso também o [irvue](https://itunes.apple.com/us/app/irvue/id1039633667?mt=12), que troca meu papel de parede para fotos do Unsplash, então de tempos em tempos eu sempre tenho fotos lindas e novas como meu papel de parede.\n\nNo meu Chrome eu tenho a extensão do [Panda](https://usepanda.com/app/), assim minha nova guia sempre mostra novidades e coisas de frontend para mim e por ali me atualizo.\n\nAs vezes eu tento me organizar o usando o [Wunderlist](http://wunderlist.com/) que serve para criar meus ToDo's, mas eu confesso que as vezes eu acabo me perdendo e não me organizando como deveria =/\n\nPara reuniões na Toptal, nós utilizamos o [Zoom](https://zoom.us/), que é basicamente um hangout ou outro do gênero, ele funciona bem e tem opções de compartilhar tela/teclado/mouse, gravar tela, então é bem okay.\n\nPara gravar meus cursos eu uso o [Screenflow](https://www.telestream.net/screenflow/overview.htm), mas também já cheguei a usar um pouco do [Camtasia](https://www.techsmith.com/video-editor.html), só que acho o Screenflow mais fácil e simples.\n\nNa etapa de edição de audio eu uso o bom e velho [Audacity](https://www.audacityteam.org/), que para mim é perfeito e simples desde o Windows 95 hahahaha\n\nPara comprimir os vídeos (porque nem sempre podemos fazer upload gigantesco e nem guardar arquivos imensos) eu uso o [Handbrake](https://handbrake.fr/), eu nunca vi algo parecido. Esse app consegue comprimir quase que 80% do tamanho sem prejudicar em nada a qualidade, é incrível!\n\nEnfim, acho que de apps diários são esses, mas se vocês tiverem dúvidas mais específicas é só falar também =D\n\n### Conclusão\n\nBom pessoal, espero que esse post tenha sido útil para vocês e também comentar uma coisa. A ideia de compartilhar meu equipamento não é para dizer que vocês só serão bons se tiverem as mesmas coisas, muito pelo contrário, não é o equipamento quem faz o profissional. A ideia é só mesmo para compartilhar, as vezes vocês estão em dúvida de alguma coisa e talvez meu post apresente algo a vocês.\n\nSe vocês tiverem mais perguntas sobre apps/equipamentos, é só deixar aí nos comentários que eu respondo. Quero realmente voltar bem a ativa e esse foi um post simples, para dar aquela aquecida =p\n" }, { "path": "posts/meus-15-dias-no-chile.md", "content": "---\nlayout: post\ndate: 2019-07-25T10:17:49.000Z\ntitle: Meus 15 dias no Chile\ndescription: Meu roteiro, lugares que me hospedei, passeios que fiz e outras curiosidades.\nmain-class: misc\ntags:\n - viagem\n - remoto\n - exterior\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Introdução\n\nEu fiz essa viagem tem um tempinho, foi no período de **19 de Novembro** a **15 de Dezembro**, mas vira e mexe eu recebo perguntas sobre, principalmente no meu [Instagram](https://www.instagram.com/will_justen/), por este motivo, compartilharei com vocês como fora minha experiência.\n\nEu já escrevi sobre algumas outras viagens minhas e outras coisas do exterior também, então se você tiver curiosidade de ler, acesse a série: [Trabalhar no exterior, remoto, viagens, etc](https://willianjusten.com.br/series/#trabalhar-no-exterior-remoto-viagens-etc).\n\nEnquanto escrevo esse post, vou ouvindo uma banda chamada [Four Stroke Baron](https://open.spotify.com/artist/091cSUyhQCRgJreqXy17m5?si=EnNG4pMETIKN8ZmVvoT7Hg), são uma mistura de New Wave com Heavy Metal, é bem legal.\n\n## Por que da viagem?\n\nEu uso um app chamado [Melhores Destinos](https://www.melhoresdestinos.com.br/) que vai avisando sobre passagens baratas para diferentes destinos, deixando claro que não é propaganda, eu realmente uso. Num dos dias eu recebi uma mensagem avisando de uma viagem por **750 reais** para o Chile com **ida e volta**! Na hora que eu li, fiquei bolado, eu não tinha noção de quanto eram as passagens normalmente, mas parecia barato para caramba.\n\nComo minha namorada estava fazendo processo seletivo para Latam, ela não teria como viajar comigo. Como eu já estava conversando com minha amiga, eu só cortei o assunto e mandei a seguinte mensagem:\n\n![Mensagem no Whatsapp: Eu: Chile 29/11 a 14/12 por 750 conto, vamos?](/assets/img/convite-julia.png)\n\nE bom, claro que eu convenci e ela viajou comigo. Ela é minha amiga de muitos anos, que considero minha irmã, você pode seguí-la no Instagram, basta buscar por [Julia Goralski](https://www.instagram.com/juliagoralski/).\n\nE não poderia ter sido uma companhia melhor, nós rimos e zoamos desde o primeiro segundo da viagem até o último hahaha\n\n## Roteiro\n\nNo início nós pensávamos em fazer o extremo sul da Patagônia, indo para as Torres del Paine e Ushuaia, mas percebemos que para a maioria desses lugares, seria melhor fazer de carro, e como nenhum de nós dois tinha habilitação ~~shame~~, acabamos deixando isso para depois. Foi bom, porque agora nós dois tiramos habilitação e aí vai facilitar em futuras viagens.\n\nSabendo que não rolava a Patagônia, não desistimos de procurar lugares com mais natureza e que nos permitisse fazer trilhas, quem me conhece sabe que sou apaixonado por isso. Nessas pesquisas, encontramos lugares muito bonitos e nem tão distantes, numa área chamada de **Região dos Lagos** e a partir desse ponto, nós começamos a definir as outras partes.\n\nEntão, em resumo, os pontos foram:\n\n- **29 de Novembro**: Voo Rio de Janeiro - Santiago e Santiago - Puerto Montt\n- **30 de Novembro até 3 de Dezembro**: Frutillar e arredores\n- **3 de Dezembro até 9 de Dezembro**: Púcon e arredores\n- **10 de Dezembro até 12 de Dezembro**: Valparaíso / Viña del Mar\n- **12 de Dezembro até 15 de Dezembro**: Santiago\n\nFizemos alguns passeios bate e volta que eu irei falar nos dias/tópicos abaixo.\n\nOutra coisa importante a pontuar sobre a viagem, ela não foi uma viagem fancy de gente rica gastando em todos os cantos, mas também não foi uma viagem extremamente apertada, que só podíamos comer miojo. Foi uma viagem tranquila, onde comemos alguns dias fora, outros dias só fizemos sanduíches e nos hospedamos em lugares baratos, mas também sem precisar dividir o quarto com 20 cabeças (btw, eu já to velho para isso).\n\n## Curiosidades e Informações pertinentes\n\n- A comida no Chile é realmente muito cara!\n- Fique atento se a casa tem água filtrada, muitos lugares são extremamente secos e a água é fundamental.\n- Assim como no Peru, sempre tente negociar as coisas e passeios, todos dão desconto.\n- Chilenos só tomam Nescafé ou outro café horrível! Não tome café em lugar nenhum, você irá se decepcionar.\n- Vinhos são realmente muito baratos, antes de voltar para o Brasil, vá no Supermercado Jumbo no Shopping Costanera Center em Santiago e compre lá, tem os melhores preços e vários tipos.\n- Fica ciente que os hotéis famosos de Huilo Huilo estão bem descuidados e você não pode sequer entrar. Se for fazer o passeio só por isso, eu não recomendo.\n- A trilha para o vulcão villarica não é extremamente difícil, mas se você não tiver um bom condicionamento físico, é possível que você sofra bastante.\n- Existem vulcões em tudo que é canto e você sempre se surpreende com a beleza deles.\n- O 4G pega bem em quase todos os lugares, só não compre chip da Virgin (dizem que tu ganha 2Gb, mas são 2Gb por ano!). Nós compramos um chip da Claro e funcionou muito bem.\n- As viagens de ônibus funcionam muito bem, mesmo as mais demoradas.\n\n## Companhia aérea - Sky Airlines\n\n![Foto da asa do avião com um arco íris](/assets/img/sky-airlines.jpg)\n\nEssa é a explicação da viagem ter sido barata, nós fomos num dos primeiros voos da [Sky Airlines](https://www.skyairline.com/brasil) fazendo Brasil-Chile. Ela é uma companhia low cost, que funciona muito parecido com a [Ryanair](https://www.ryanair.com/pt/pt/), para quem está acostumado com a Europa.\n\nOu seja, os bancos são pequenos, não inclinam e qualquer coisa que você queira, precisa pagar. Eu não me incomodo com esse tipo de coisa, então para mim tá show, quanto mais barato melhor!\n\n## Hospedagem\n\nNessa viagem, eu estava de férias, então não tinha tanta preocupação com a internet. Mas sempre me preocupo com lugares centrais, que facilitem translados de rodoviárias/aeroportos, além de no final das contas ficar mais barato, também é mais cômodo.\n\nEm praticamente toda a viagem eu utilizo o [Airbnb](https://www.airbnb.com.br/c/willianj60?currency=USD), que tem preços bons e casas muito boas, onde as vezes temos cozinha também e com isso podemos fazer nossa própria comida e economizar ainda mais. Eu vou postar os lugares que ficamos.\n\nAliás, se quiser ajudar o amigo aqui, se inscrevam no [Airbnb com meu link](https://www.airbnb.com.br/c/willianj60?currency=USD), assim vocês ganham desconto na próxima viagem e eu também <3\n\nE o único lugar que não utilizamos Airbnb foi em Púcon, que acabamos achando uma hospedagem via Booking que estava bastante barata e valeu super a pena!\n\n## Santiago - Puerto Montt (30/11)\n\nComo dito acima, o objetivo era aproveitar bem a região dos lagos, e o aeroporto mais próximo de lá, era o de Puerto Montt. Então, o que nós fizemos foi pegar um voo para Santiago e de lá para Puerto Montt. Nós nem saímos do aeroporto e ficamos lá por umas 5-6h até finalmente pegar o voo para nosso destino final.\n\nTudo no aeroporto de Santiago é caro, o que nos salvou foram uns sanduíches e biscoitos que a Julia havia levado, aconselho a fazer o mesmo se for pegar uma escala tão longa.\n\nDepois de todo esse tempo, chegamos bem a noite em Puerto Montt e resolvemos pegar um Uber, uma vez que já não havia mais ônibus e teríamos que embarcar em dois para conseguir chegar ao nosso destino, neste caso, fora mais barato/acessível pegar um Uber.\n\nChegando lá, o quarto era **enorme**! Tinham 2 camas de solteiro, um sofá cama grande e uma cama de casal! Nós ficamos somente por essa noite e na época o custo foi **R\\$ 78,00**, o que foi ótimo, já que o Airbnb ficava há apenas 5min da estação de ônibus, que era o nosso objetivo, visto que a cidade que iríamos era Frutillar.\n\n![Foto de um quarto espaçoso com 3 camas](/assets/img/puerto-montt-airbnb.png)\n\nAssim que acordamos no dia seguinte, nos arrumamos e fomos caminhando em direção a rodoviária, embarcar em onibus com destino a Frutillar, o custo com este foi aproximadamente R\\$ 5,00 e a viagem durou em torno de 1h.\n\n## Frutillar (30/11 a 03/12)\n\nAhh que cidade maravilhosa! Quando comecei a pesquisar sobre a região dos lagos, muitas pessoas faziam um bate e volta nessa cidade, as vezes gastando apenas metade de uma tarde. Mas é uma cidade tão linda e tão fotogênica, que eu queria muito ficar mais dias lá. E sendo sincero? Não me arrependo nadinha, pude ir nos lugares com bastante calma e descansar bem (que era um grande objetivo da viagem).\n\nFrutillar foi fortemente influenciada pela colonização alemã, tanto é que tem placas em alemão e até escolas alemães por lá! E a comida típica mais famosa de lá, também é da Alemanha e se chama [Kuchen](https://www.portaldorancho.com.br/portal/kuche-cuca-um-bolo-alemao), que é tipo uma cuca, só que mais molhada e muito muito gostosa! Aconselho demais a [cafeteria Duesdes del Lago](https://goo.gl/maps/taju3hwUarRiBubu5), lá o preço é okay e tem a melhor Kuchen de toda a cidade!\n\nAlém das casinhas alemãs lindas, outra coisa que atrai bastante é o lindo lago Lhanquihue, que tem vista para (um/o) enorme e maravilhoso vulcão de Osorno, esse que é tão fotogênico que qualquer coisa servia de moldura perfeita para ele.\n\n![Vulcão com um pico nevado ao fundo, um lago no meio e uma arvore florida organizada de forma a parecer uma moldura para o vulcão.](/assets/img/osorno-frutillar.jpg)\n\nO [nosso Airbnb](https://www.airbnb.com.br/rooms/17367212), para continuar no clima, foi um chalé bem legal e também bastante barato! Ele tinha uma vista legal do vulcão, um jardim agradável e ainda tinha um cachorro super fofo que nos apegamos. Dividindo por 2, nós pagamos aproximadamente **R\\$ 62,00/dia**\n\n![4 fotos: superior esquerda é um chalé. superior direita um cachorro pequeno e uma bola. Inferior esquerda é a vista do vulcão pela sacada do chalé, inferior direita é uma casa tipicamente alemã.](/assets/img/frutillar-collage.jpg)\n\nLá em Frutillar, nós visitamos o [Museo Colonial Alemán](https://www.ruta-patagonia.com/Destino-Detalle-Descripcion.php?N=Museo-colonial-frutillar.php), fomos no belíssimo Teatro del Lago e tentamos visitar uma fazenda de lavanda. Quando chegamos lá, havia um aviso de fechado, porém com o portão aberto. Nós pensamos:\n\n> Se o portão está aberto, deve poder entrar né?\n\nNós \"invadimos\" a fazenda e acabamos descobrindo que estava acontecendo um casamento, tiramos algumas fotos na encolha e fomos embora xD\n\n![4 fotos: Superior Esquerda: uma foto de lavanda. Superior Direita: o museu colonial alemão. Inferior esquerda: um quadro falando sobre o casamento. Inferior direta: uma foto do Teatro Del Lago por cima.](/assets/img/frutillar-collage-2.jpg)\n\nOutra viagem de bate e volta que fizemos, foi o passeio ao Parque Saltos de Petrohue, embarcamos num ônibus em Frutillar e fomos até lá sozinhos, a passagem custava **R\\$ 5,00** para cada um e pode pegar em qualquer ponto de Frutillar que esteja indo em direção a Puerto Varas, fale com os motoristas, eles sempre ajudam.\n\nPara entrar nesse parque foram **\\$ 6 (seis dólares)**, mas no dia era comemoração de alguma coisa e nós não pagamos! O parque é muito bonito e as águas extremamente verdes azuladas, além de ter uma vista incrível para o vulcão de Osorno.\n\n![Um rio muito bonito com a imagem de um vulcão enorme atrás.](/assets/img/petrohue.jpg)\n\nDepois desses dias em Frutillar, nós pegamos um ônibus para Puerto Varas por **R\\$ 5,00** e de lá pegamos outro ônibus para Púcon, numa viagem um pouco maior, e com isso a passagem custou **R\\$ 48,00**. Vocês podem entrar neste ônibus na rodoviária de Puerto Varas, se estiver vindo de Frutillar, basta pedir para o motorista e ele te deixa do lado.\n\nComo nós perdemos o primeiro ônibus, acabamos chegando tarde demais em Puerto Varas e com isso tivemos que esperar horas até que tivesse um novo ônibus. O que fizemos? Dormimos no banco da praça, num calor horrível, mas é a vida. Pelo menos a vista era bonita xD\n\n![Duas fotos: Superior: dois vulcões e um lago azul. Inferior: minha amiga julia dormindo num banco de praça.](/assets/img/puerto-varas.jpg)\n\n## Púcon (03/12 a 09/12)\n\nEssa era a cidade com o maior número de atrações e por isso a cidade escolhida para passar a maior parte do tempo. [Púcon](https://pt.wikipedia.org/wiki/Puc%C3%B3n) é outra cidade fortemente influenciada pela colonização alemã. Pela grande proximidade com o Vulcão Villarica e alguns outros menores, a cidade também é cheia de termas, tendo as Termas Geométricas, como a mais famosa.\n\nO local que ficamos foi uma pensão chamada [Hostal Carmen](https://www.booking.com/hotel/cl/hostal-carmen.pt-br.html?aid=304142;label=postbooking_confemail;sid=eb2862ff82345c900bda06316c84df23;dist=0&keep_landing=1&sb_price_type=total&type=total&), a Dona Carmen inclusive vai ficar no coração, que senhora amorosa e simpática! Ela chegou até a beber cerveja com a gente a noite. Lá na casa também existia um gato gordo **gigantesco**, sério, nunca tinha visto tão grande!\n\n![Um gato negro próximo a umas flores rosas](/assets/img/chacho.jpg)\n\nNo dia seguinte a chegada em Púcon, nós começamos a saga para arrumar o preço dos passeios que gostaríamos de fazer. E depois de ter ido em mais de 40 lugares, acabamos gostando de um lugar onde fomos muito bem atendidos e os preços eram bem legais, o nome da agência é [Amulenko](https://www.facebook.com/people/Amulenko-Pucon/100008235699316).\n\n### Huilo Huilo\n\nNosso primeiro passeio foi o de Huilo Huilo, que era um lugar que parecia super bonito nas fotos, com 2 hotéis feitos quase que nas árvores e com um visual incrível! Além disso, ainda ia numa cachoeira e num lugar para ver veados.\n\nSobre o passeio, ele é extremamente cansativo, foram quase que 9-10h, onde muitos trechos são dentro da van, para poder chegar nos locais e sair deles. Outra coisa é que os hotéis estavam super descuidados e mal dava para ver a forma que víamos em fotos antigas, sem contar que não podia entrar sequer no saguão deles, o que nos deixou bem frustrados.\n\nO que salvou demais na minha opinião, foi a cachoeira, que é extremamente bonita e deu uma foto que gosto bastante, que está abaixo:\n\n![Uma linda cachoeira em volta de bastante verde.](/assets/img/salto-huilo-huilo.jpg)\n\n### Vulcão Villarica e Indômito\n\nChegamos ao maior objetivo dessa minha viagem, era escalar o Vulcão Villarica, que é um dos vulcões mais ativos do mundo, podendo ser possível ver lava! Essa é uma trilha de aproximadamente 6h, saindo bem cedinho de van até a base e de lá, uma grande caminhada até o topo.\n\n![Foto do vulcão villarica](/assets/img/viagem-chile.jpg)\n\nInfelizmente eu não consegui chegar até o final e isso me frustrou bastante... Eu estava já bastante cansado dos outros dias (não façam Huilo Huilo antes desse dia!), além de ter passado mal por alguma coisa que comi, também havia sido um ano difícil em relação a minha saúde. Enfim, foram várias as razões para eu não ter conseguido, mas ainda pretendo retornar a ele e alcançar o topo!\n\nNesse mesmo dia do vulcão, a minha amiga Julia passou o dia passeando pelo centro da cidade e quando eu retornei, ela me convenceu a ir numa das termas que ela já havia planejado, que era a Indômito. Essa é uma terma mais fancy (não pelo preço, mas pelo visual) e foi até bem revigorante.\n\n![Foto de uma mão segurando uma cerveja em frente a uma piscina coberta e cadeiras para descansar.](/assets/img/indomito.jpg)\n\n### Termas Geométricas\n\nUm outro passeio muito esperado era o das termas geométricas, que são um conjunto de piscinas termais em meio à natureza. É linda demaaaaaais e vale muito a pena ir!\n\nO passeio dessas termas são sempre de metade do dia, então escolhemos ir a tarde, para aproveitar um pouquinho do Sol e valeu bem a pena, apesar de ter bastante gente, são muitas piscinas e eu não me senti incomodado em nenhum momento. Para acessar as piscinas, você anda em umas pequenas pontes/caminhos de madeira vermelho, deixa o lugar super fotogênico e ao final de tudo, ainda é agraciado por uma cachoeira!\n\n![Duas fotos: lado esquerdo: uma cachoeira, lado direito: uma ponte de madeira vermelha com bastante vegetação ao redor.](/assets/img/geometricas.jpg)\n\n### Playa Negra\n\nEm Púcon mesmo, tem um lago de areia preta, devido aos restos vulcânicos. Os chilenos acabam chamando de playa negra e também é um lugar bonito para dar uma caminhada, nós aproveitamos que tínhamos vários dias na cidade e resolvemos visitá-la e seus arredores. Tem uns hotéis bonitos na orla e bastante gente se diverte com kayak por ali.\n\nApós dar uma passada lá, também fomos em algumas lojinhas de artesanato numas feirinhas que tem por ali.\n\n![Duas fotos. A esquerda, foto aérea de metade o lago e metade a areia negra. A direita, foto de uma pessoa de kayak no lago, vista por um drone.](/assets/img/playa-negra.jpg)\n\n## Valparaíso - Viña del Mar (10/12 - 12/12)\n\nDepois de todos os dias na região dos Lagos e consequentemente em cidades bem frias, nós fomos em direção a Valparaíso, que fica na costa e é bastante quente! Para isso, nós pegamos um ônibus de Púcon, indo diretamente para Valparaíso, uma viagem de 12h! Pois é, essas viagens de ônibus são tensas, se você não é daqueles que desmaia logo ao entrar no ônibus, leve algum joguinho ou algo para se distrair, pois é um loooongo percurso. Esse ônibus por ter um percurso bem maior, custava **R\\$ 98,00** e fomos pela JAC.\n\nEm Valparaíso ficamos num [Airbnb incrível](https://www.airbnb.com.br/rooms/16815053), que tinha 2 quartos enormes e o mesmo preço dos outros lugares que ficamos, onde nós dividíamos o quarto.\n\nValparaíso é famosa por ser uma cidade super colorida e é completamente verdade, existem milhares de grafites aonde quer que você vá, além das próprias casas já serem coloridas. Outra coisa que Valparaíso é famosa são os seus morros e olha, bota morro nisso! Tem uns que tu até se inclina para subir de tão tensos que são. Existem uns funiculares, mas a graça é ir andando e conhecendo.\n\n![4 Fotos. Destaque na esquerda: um grafite da famosa pintura de girasois de Van Gogh. Superior Direita: uma casa toda colorida e florida. Centro Direita: uma escada com grafite formando teclas de piano. Inferior direita: uma janela azul numa parede amarela.](/assets/img/valparaiso.jpg)\n\nE num dos dias que estávamos em Valparaíso, nós fomos até Viña del Mar, que é famosa pelos leões marinhos e o relógio das flores (a quem estou querendo enganar, estava lá só pelos leões marinhos!).\n\n![3 fotos: Esquerda em destaque: uma foca olhando para a câmera do drone. Superior direita: várias focas juntas numa pedra. Inferior direita: relógio formado por flores.](/assets/img/vina-del-mar.jpg)\n\n## Santiago (13/12 - 15/12)\n\nEssa era a cidade que menos ficamos, até porque é uma capital e eu sou mais o cara das cidades pequenas e charmosas. Mas foi uma pena, já que Santiago se mostrou uma cidade bem legal e com bastante coisa para fazer, até mesmo nos arredores.\n\nUma vez lá, basicamente focamos em fazer uma visitação na mais antiga vinícula do Chile, que é a [Cousiño Macul](https://www.cousinomacul.com/). Muita gente costuma ir na Concha y Toro, mas lá além de mais caro, é mais lotada e tem menos história. A Cousiño foi construída em 1856 e até hoje é controlada pela mesma família! Para visitar, basta fazer a reserva no site que coloquei ali acima e ir. Nós fizemos a visitação e degustação, saí de lá bêbado e conhecendo um pouco mais de vinhos e queijos.\n\nOutro passeio que fomos +ou-, foi ir na maior torre da américa latina, que é o Costanera Center. O motivo de ter usado o +/-, é que nós chegamos muito tarde lá e já estava fechado para subir no mais alto andar, que tem um panorama de 360 graus da cidade. Minha dica é que se você for de metrô, vá cedo, demora para o metrô passar e também dependendo de onde você está, demora para chegar até lá.\n\nPor fim nós compramos vinho e outras coisinhas no mercado Jumbo dentro do Costanera mesmo e nos despedimos de Santiago no dia seguinte, bem cedinho.\n\n## Resumo, mais fotos, vídeos, etc...\n\nNum resumo, a viagem foi incrivelmente boa! Essa parte do Chile é bem menos falada que a Patagônia ou as pistas de ski perto de Santiago, e sendo sincero, não poderia ter escolhido lugares melhores.\n\nSe você gosta de natureza, caminhar bastante e estar sempre com vistas incríveis de lagos e vulcões, então essa parte é perfeita para você!\n\nEu tenho fotos melhores e em alta resolução no meu [Unsplash](https://unsplash.com/collections/3812967/my-adventures-in-chile), sinta-se livre para usar alguma para/como wallpaper ou qualquer outra coisa, lá está disponível para download.\n\nEu também separei muitas das fotos, vídeos e stories que fiz, no meu [Google Photos](https://photos.app.goo.gl/QNxJs3WSZyvZwZS76), lá as fotos são zoadas e os vídeos também, mas dá para ter mais noção do dia a dia que tivemos.\n\nO post ficou enorme, nem é relacionado a TI, mas como tem gente que perguntou e como adoro viajar, achei que valia a pena esse post, até para eu ter salvo para o futuro.\n\n## Agradecimento\n\nGostaria de agradecer ao [Ademílson F. Tonato](https://twitter.com/ftonato), ele sempre me ajuda nas revisões e para esse post fez uma [issue gigantesca](https://github.com/willianjusten/willianjusten.com.br/issues/114) corrigindo cada detalhe, agradeçam muito a ele, senão esse post sairia cheio de erros.\n" }, { "path": "posts/meus-20-dias-no-peru.md", "content": "---\nlayout: post\ndate: 2018-05-14T08:11:28.000Z\ntitle: Meus 20 dias no Peru\ndescription: Um pouco do roteiro que fiz, lugares que me hospedei, trilhas que\n fiz, meus equipamentos e mais.\nmain-class: misc\ntags:\n - travel\n - ferias\n - airbnb\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Introdução\n\nComo eu fiz um post sobre [Meus 50 dias na Espanha](https://willianjusten.com.br/meus-50-dias-na-espanha/) e muita gente curtiu, resolvi fazer agora da minha última viagem, que foi ao Peru.\nAlgumas coisas foram bem diferentes nesse viagem, a primeira de todas é que dessa vez eu fui de férias, ou seja, sem me preocupar com reuniões ou internet (aliás, já falo sobre essa parte). E também viajei com minha namorada, para uma pessoa que está sempre viajando sozinho, isso é um pouquinho diferente, mas deu super certo, porque ela apoiou minhas loucuras (bom, quase todas xD).\n\n## Por que de ir para o Peru?\n\nQuem me acompanha tem um tempo, sabe que cheguei a morar [um tempo na Irlanda](https://willianjusten.com.br/vindo-morar-e-estudar-na-irlanda/), então já visitei bastante coisa lá no continente europeu, mas em compensação, aqui nas américas, quase não fui a lugar algum.\n\nComecei a pesquisar vários lugares e alguns deles me chamam atenção há anos, como, por exemplo, a Patagônia. Só que esses lugares eu tenho vontade de fazer de carro, ficando um bom tempo nos lugares, sem prazo para voltar. Então deixei esse lugar para meus planos de volta ao mundo em uma Kombi, sim, eu e minha namorada temos essa ideia maluca...\n\nNas pesquisas, eu vi que o Peru tinha muitas montanhas legais e trilhas para fazer, que é o que mais busco nas minhas viagens. Então, pensando nisso, decidi fazer o Peru!\n\n## Roteiro que eu fiz\n\nComo falei lá no post da [Espanha](https://willianjusten.com.br/meus-50-dias-na-espanha/), eu costumo usar muito o [500px](https://500px.com/), [Unsplash](https://unsplash.com/), [Instagram](https://www.instagram.com/) e [YouTube](https://www.youtube.com/) para ir procurando os lugares.\n\nNessas pesquisas, vi os lugares mais badaladinhos e famosos como o Machu Picchu, e Laguna 69. Mas também alguns lugares interessantes que apesar de bastante gente ir, são menos conhecidos/falados, como o Oasis de Huacachina e a Laguna Paron.\n\nEu vou separar a viagem pelos lugares que fui, pois acho que vai ficar mais fácil de ir se localizando.\n\n## Curiosidades e informações pertinentes\n\n- Não troque Soles no Brasil, deixe para trocar tudo em Cusco, é o lugar de melhor cotação. Não troque em Lima ou Huaraz, lá é péssimo!\n- A internet no Peru é bem ruim, seja 4G ou até mesmo nos lugares. Se você for trabalhando, tome cuidado para não ficar muito tempo offline.\n- Tenha em mente que a hospedagem e comida são baratos, mas os passeios relativamente caros, então vai guardando os centavinhos.\n- A altitude é muito fdp sim, então tome sempre chá de coca, mastigue folha e beba muita água.\n- Sempre tente negociar, os peruanos sempre abaixam o preço. Mas cuidado para não ofendê-los oferecendo 5 soles num negócio de 100 soles.\n- Só compre os passeios para o dia seguinte, você nunca sabe se nos dias mais para frente vai passar mal ou qualquer coisa do gênero.\n- Ande bastante! Sempre tem coisinhas para ver, principalmente na cidade de Cusco.\n- Sempre pergunte o percurso para os guias, as vezes pode ter algo que você não queira fazer ou queira mudar.\n- Não é permitido voar drone na cidade de Cusco e nos arredores. Isso inclui Machu Picchu, onde já ouvi relatos de gente perdendo o drone.\n- Inca Cola, que é o refrigerante típico do Peru, é bastante doce e tem gosto de tuti-fruti, eu acho horrível, mas vale a pena tomar uma vez. A Maria amou...\n- Fique atento nos tipos de ingresso que você vai comprar. E pergunte sempre na agência se o passeio inclui o ingresso e almoço ou é por fora. Depois disso faça as contas para ver qual vale mais a pena.\n- Use protetor solar! Sério mesmo! Na altitude os raios solares são mais fortes e em alguns lugares você não sente e depois estará todo queimado.\n- Se for fazer trilhas, é **obrigatório** o uso de bota. Sério, se você for de tênis, esteja preparado para cair mais e sofrer nas subidas.\n- Leve casaco impermeável, dependendo da época, vai sempre chover um pouco.\n\n## Cusco (04/04 - 08/04)\n\n![4 Fotos de Cusco - Uma feira de artesanato, mulheres de branco vendendo frutas, um portão verde bem grande com uma garota na frente, uma garota de costas perto de várias coisas coloridas](/assets/img/cusco-fotos.jpg)\n\nVocê pode ver mais fotos no meu [Album de Cusco do Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214340759025447.1073741861.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nFoi a primeira cidade que fomos, pois é conhecida como a cidade base de muitos passeios, incluindo o famoso Machu Picchu, que na realidade, tem como cidade base Aguas Calientes, que vou falar mais para frente.\n\nNo primeiro dia que chegamos, é indicado fazer uma pequena caminhada pela cidade, nada muito grande, pois como a cidade fica em 2800m de altitude, o soroche (mal de altitude) pode acabar pegando. Com isso, nós demos uma caminhada por volta do nosso Airbnb, fomos no mercado, compramos macarrão instantâneo, água e voltamos para casa.\n\nLá no Airbnb, mal chegamos e já fomos recebidos pela nossa host com o famoso chá de coca, que sim, funciona bastante contra o soroche.\n\nNo dia seguinte, nós passeamos por todo o centro de Cusco a procura das agências para fazer os passeios pela cidade e arredores. Uma dica, vá em muitos lugares e sempre vá tentando pedir desconto, os peruanos gostam bastante de negociar e no final você pode conseguir salvar bastante dinheiro.\n\nNesse mesmo dia, nós fomos ao Mercado São Pedro, que é super legal, cheio de coisas de artesanato, comidas típicas, panos e outros vários cacarecos que você vai encontrar em todos os cantos do Peru.\n\nNos outros dias que ficamos em Cusco, na realidade a gente acordava bem cedinho para ir fazer os tours e chegávamos no finzinho do dia, só mesmo para comer algo e dormir para o dia seguinte. Mas no último dia que ficamos lá, acabamos vendo uma espécie de \"Carnaval\" do Peru, super bonito!\n\n### Impressões e Informações\n\nNós ficamos no [Airbnb da Rosa](https://www.airbnb.com.br/rooms/18484940?s=51), onde pagamos cerca de **R\\$33/dia**, o que foi bem impressionante para gente, pois é um valor bastante barato. O lugar era uma kitnet separada da casa da host, super limpo e muito bem localizado, o que nos facilitava bastante na locomoção. Super aconselho lá, se for de casal ou até mesmo se quiser um espaço sozinho. Lembrando que se cadastrar [no meu link do Airbnb](https://www.airbnb.com.br/c/willianj60), você ainda ganha um descontão na primeira viagem e também me ajuda =D\n\n- Uma cidade bastante rica culturamente.\n- Bastante acolhedora.\n- Bem turística, cheia de vendinhas em todos os lugares. Preste atenção em todas as vielas.\n- Tem restaurantes muito baratos (5 reais/refeição), mas aconselho a verificar o lugar e a comida antes. Demos azar num dos lugares, onde a comida era bem ruim e super feia.\n- Eles tem McDonalds, Starbucks e KFC! Coisa rara no Peru!\n- Dá para se locomover para todos os lugares a pé e eu recomendo fazer isso!\n- Lembre de guardar vários dias nessa cidade, pois todos os passeios saem dela.\n\n## Maras/Moray (06/04)\n\n![4 Fotos: Duas com construções circulares com grama ao redor e em diferentes alturas. Na esquerda inferior, uma salina com vários tanques de sal. Na direita inferior, uma mulher tecendo com a lã.](/assets/img/maras-moray.jpg)\n\nVocê pode ver mais fotos no meu [Album de Maras/Moray no Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214348106209122.1073741862.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nFoi o primeiro passeio escolhido pois é bem leve, perto de Cusco e muito interessante! Saímos por volta de 8h da manhã e voltamos as 14h, o que permitiu que passeássemos mais um pouco lá por Cusco, onde procuramos alguns restaurantes.\n\nMoray é uma construção inca, cheia de vários círculos com diferentes alturas, uma coisa de outro mundo! Esse lugar foi um laboratório para agricultura, onde eles simulavam diferentes climas, na moral, que povo inteligente!\n\nJá Maras é uma salineira, que é sustentada por várias famílias, o sal vai sendo levado por um rio e fica acumulando em diferentes tanques, até que a família verifica o nível certo, bloqueia a entrada de água e deixa o sal secar, depois disso eles retiram. O visual de lá é bastante diferente e valeu a visita.\n\nAqui fica um comentário sobre o nosso guia, ele era extremamente engraçado e a gente chegou a contar quantos `Mis amigos` ele falou, olha, passava dos mil!\n\n### Impressões e Informações\n\n- Moray é super legal e o guia fala muita coisa informativa (recomendo ir de guia para muitos lugares do Peru, pois é um prato cheio de cultura e informação).\n- Maras tem um visual bem bonito, mas não tem muita coisa de história nem nada.\n- O tour para esse passeio foi **R\\$25** e eles buscam de Cusco e levam até lá.\n\n## Vale Sagrado (07/04)\n\n![3 Fotos: superior esquerda, um vale bastante verde com pequenas casas de telhado de barro. Esquerda inferior: duas montanhas sobrepostas, uma com neve e outra verde. Em destaque na direita: uma janela feia em rocha com a vista para um vale com várias arvores.](/assets/img/vale-sagrado.jpg)\n\nVocê pode ver mais fotos no meu [Album de Vale Sagrado no Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214369601866500.1073741863.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nO Vale Sagrado na realidade é um nome turístico, pois ele compreende algumas cidades pequenas que ficam no entorno do Rio Urubamba. Os lugares que fomos foram: Pisac, Ollantaytambo e Chinchero. Esse dia nós nos encontramos as 8h na Plaza de Armas e fomos caminhando com o guia até o local onde o ônibus estava parado. Durante os finais de semana, é proibido o trânsito de ônibus dentro da cidade e por isso tivemos que andar. Foi super legal, pois o guia foi fazendo uma espécie de mini city tour, explicando os lugares em que íamos passando.\n\nNossa primeira parada, depois de aproximadamente 2h no ônibus (vai se acostumando, você vai andar muiiiito de ônibus e van por lá) foi Pisac, que é um lugar imenso! O guia passou um tempo explicando sobre as razões daquele lugar e depois nos deu um tempo para podermos ir passeando pelo lugar. Foi nessa hora, que eu confesso que dei umas corridas e minha namorada deu umas reclamadas.\n\nDepois de Pisac fomos para Ollantaytambo que é uma puta escadaria! Lá o guia fez mais algumas explicações e é isso.\n\nEm Chinchero nós aprendemos como as peruanas usam a lã de alpaca, lhama e ovelha. E como elas tingem cada uma dessas lãs e fazem os tecidos. É uma explicação rápida, mas engraçada e interessante. Depois, é claro, te deixam livre para gastar seu dinheirinho (caso você tenha e queira).\n\n### Impressões e Informações\n\n- O tour foi de **R\\$25** incluindo o almoço\n- O passeio durou o dia inteiro, saindo de 8h e chegando as 19h aprox.\n- Pisac é um lugar que daria para ficar o dia inteiro, muitas ruínas e com uma vista muito bonita.\n- Chinchero tem umas ruínas, mas não conseguimos visitar por causa da hora.\n\n## Machu Picchu (08/04 - 09/04)\n\n![3 fotos: na esquerda superior, a famosa vista da rocha de Machu Picchu com as ruinas logo abaixo. Esquerda inferior: vista das ruinas. Em destaque na direita: uma lhama olhando para a câmera.](/assets/img/machu-picchu.jpg)\n\nVocê pode ver mais fotos no meu [Album de Machu Picchu no Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214383955745338.1073741864.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nSaímos de Cusco por volta das 9h da manhã pegando uma van até Ollantaytambo, chegando lá aproximadamente 11h para poder pegar o trem para Águas Calientes, que é a cidade base de Machu Picchu, também conhecida como Machu Picchu Pueblo.\n\nExistem várias formas de se chegar a Machu Picchu, que são:\n\n- `Salkantay Trek`: é uma trilha de 5 dias onde você faz um pedaço do famoso caminho Inca. É uma opção bem legal para quem curte aventura e também tem bastante tempo disponível.\n- `Machu Picchu by Car`: onde você pega uma van que te leva até a hidrelétrica e depois você faz mais uma caminhada até águas calientes.\n- `Machu Picchu by Train`: onde você pode pegar um trem em Cusco ou Ollantaytambo (dependendo da época) e que te deixa lá em águas calientes. É uma opção mais cara, porém bem mais rápida e confortável. Como no dia seguinte era aniversário da Maria, decidimos pegar essa opção.\n\nFicamos então na cidade de Aguas Calientes, que é super pequena, basicamente tendo 4 ruas. No final da subida da cidade, tem águas termais, mas não tivemos interesse em ir. O objetivo nessa cidade é basicamente descansar, pois no dia seguinte é necessário acordar bem cedinho.\n\nAcordamos as 4h da manhã para poder encontrar o guia e o nosso grupo as 5h da manhã já próximo ao ponto do ônibus que leva até Machu Picchu. De manhã estava bastante frio e úmido, então o chapéuzinho peruano foi super útil! =D\n\nJá lá em cima no Machu Picchu, o nosso guia foi fantástico e explicou sobre tudo bem devagar. A neblina foi e voltou algumas vezes, deixando a gente preocupados se iríamos ter uma visão legal para as fotos, mas no final deu tudo certo e ficou até bastante quente.\n\n### Impressões e Informações\n\n- Machu Picchu pode ser bastante caro! Se você fizer a mesma opção que a gente (trem + bus subir + hotel + ingresso), nós pagamos, mesmo chorando, o valor de **240 dolares/pessoa**, sim, **DÓLARES!** Mas, se você escolher a opção com van ida e volta, o preço pode abaixar para em torno de **140 dólares**.\n- Machu Picchu é grande para caramba, muito maior do que nós imaginávamos pelas fotos.\n- Se quiser atrair lhamas, leve bananas, só o cheiro atrai. Ps.: não abra a banana, elas não podem comer, pois faz mal a pele.\n- Dá para subir e descer sem usar o ônibus, mas a subida eu não recomendo, pois você vai chegar muito cansado. Lembre-se, estamos na altitude.\n- Não esqueça de carimbar seu passaporte no final do passeio. É de graça e bem legal!\n\n## Laguna Humantay (10/04)\n\n![4 fotos: em destaque a esquerda: a foto de um lago verde e azul turquesa com bastante reflexo e montanhas nevadas atras. Superior direita: um cachorro aproveitando o lago. Meio direita: uma garota em pé perto do lago observando ele. Inferior direita: vista do lago atraves de um drone.](/assets/img/humantay-lake.jpg)\n\nVocê pode ver mais fotos no meu [Album da Laguna Humantay no Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214396990391196.1073741865.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nEu adorei o passeio, já a Maria não tanto. Nós buscaram no hotel por volta de 4:30 da manhã, pois o lugar para começar a caminhada era bem distante e ainda tínhamos que tomar café da manhã no caminho.\n\nDemos azar pois no dia anterior choveu bastante e com isso, todo o percurso praticamente foi de muita lama, nossos pés afundavam e isso cansava muito. O caminho é bem bonito e as montanhas ao redor são incríveis. Mas conforme íamos subindo, já podíamos notar que tinha muiiiiita gente, o que ia desanimando um pouco.\n\nDemoramos cerca de 1:30 para subir e alcançar o lago. Tiveram pessoas que fizeram mais rápido e outras que desistiram e pegaram o cavalo. Não é uma subida tão fácil e acho que por ter muita lama, ficou ainda mais complicado. É importante lembrar de levar folhas de coca, bala de coca e muita água.\n\nChegando no lago, aconteceu o que imaginávamos, o lago estava completamente lotado, o que chateou bastante a nós dois (talvez mais a Maria Alice, que já tava puta pela caminhada). Diferente de outros lugares que fomos e que também tinha bastante gente, lá, as pessoas estavam bagunçando muito, então não foi um momento de paz e tranquilidade que nós queríamos. Tirando isso, o lago é extremamente bonito e a cor dele é bem diferente dos outros lugares que fomos.\n\nUma dica é talvez ir depois do almoço, assim, o número de pessoas vai diminuir consideravelmente e você vai poder ter mais paz por lá.\n\n### Impressões e Informações\n\n- O passeio custou **R\\$65/pessoa**, pois falavam que era um passeio mais exclusivo (exclusivo uma ova!)\n- Falam que a subida é leve e de 45min, **não acredite**! A subida é médio-difícil e dura em torno de 1:20h.\n- Não esqueça de levar coca de todas as formas e água. Um lanchinho também é bom para dentro da van.\n- Aproveite para tirar fotos no caminho enquanto descansa, mas não pare só para tirar fotos e por um tempo muito longo.\n- Para descer todo o santo ajuda e foi fácil. Mas preste atenção para não cair. Um cara caiu no final da descida e machucou o tornozelo.\n\n## Rainbow Mountain (11/04)\n\n**FAIL!** Esse era um dos lugares mais esperados na viagem, que mesmo bastante gente falando que era pesado, eu queria muito ir. Infelizmente depois da Humantay, a Maria não se sentiu bem e eu decidi não forçar a barra. Com isso, temos um lugar para ir na volta! =D\n\n## Cusco - Lima - Ica (12/04)\n\nDecidimos pegar um avião de Cusco para Lima, pois era mais rápido e mais barato que de ônibus. De Cusco para Lima demorou aproximadamente 1h. Lá, nós iríamos pegar um taxi ou um ônibus para a Cruz del Sur, que é a empresa de ônibus que leva para Ica. Porém, um taxista nos abordou no caminho (e, eu, como todo bom morador do rio já desconfiei), mas ele nos falou de um lugar que era mais perto e mais fácil de pegar ônibus, depois de uma pesquisada marota na internet, vi que era verdade e aceitei.\n\nFomos tranquilamente para esse terminal, que também é um shopping, mas quando estávamos quaaase chegando lá, os policiais pararam o carro, entraram nele e simplesmente tiraram a chave do carro! Nos ignoraram completamente, mesmo com o cara falando que só queria nos deixar no terminal. Enfim, não sabemos se o carro era roubado ou outra coisa, mas é fato que o taxista não tinha os documentos do carro e ele devia estar sendo procurado, afinal de contas, os policiais pararam especificamente o nosso carro.\n\nDepois desse momento de tensão, compramos nossa passagem no terminal, que de fato foi mais barata e tinham mais opções ~~valeu taxista ladrão, mas honesto!~~\n\nLá passamos 5 maravilhosas horas dentro do ônibus, onde assistimos 2 filmes e meio. E pasmem, tinha até um jantarzinho, melhor que muito avião! Chegando em Ica, tivemos nossa primeira experiência com um TukTuk\n\n## Ica - Huacachina (12/04 - 15/04)\n\n![4 fotos: Superior esquerda: um bugre nas dunas. Superior direita: uma garota de costas nas dunas segurando uma prancha de sandboard. Inferior esquerda: um por-do-sol com uma silhueta de uma garota nas dunas. Inferior direita: imagem de um Oasis visto por cima.](/assets/img/huacachina.jpg)\n\nVocê pode ver mais fotos no meu [Album de Ica/Huacachina no Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214489964635494.1073741866.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nConfesso, que esse era um dos lugares que eu mais esperava ir. É um deserto e um pequeno \"Oásis\". Não me desapontei, o lugar é muito legal e as dunas são incríveis! O centrinho de Ica em si não tem nada e por ser uma cidade no deserto, é quente para caramba e durante o dia é bem complicado de ficar andando na rua. Devido a isso, teve um dia que ficamos a tarde inteira jogando um fliperama de basquete (sim, eu sou fã de basquete desde pequeno).\n\nNum dos dias, fizemos um passeio de bugre, que é como uma montanha russa, só que muito mais legal! A Maria também brincou de sandboard, eu decidi não arriscar ficar todo ralado e só tirar fotos mesmo. Em Ica foi o primeiro lugar que consegui subir o meu drone! Pensa na alegria da criança!\n\nEm Ica, também ficamos num Airbnb, que foi absurdamente barato, deu **10reais/dia**, mas, infelizmente não era tão bom assim. Novamente era uma casa separada, o que já deixa mais confortável. Porém não era tão limpo e só tinha agua fria! Véi, pode estar fazendo 60 graus lá fora, eu vou querer tomar meu banho quente!\n\n### Impressões e Informações\n\n- Se locomova de Tuktuk, uns carrinhos/moto indianos que custam muito barato. Certas viagens pagamos **3 reais!**\n- Não deixe de fazer o passeio de bugre, é muito divertido!\n- Huacachina fede, então não fique hospedado por lá, que não deve ser muito legal. Além de ter festa, podendo ser muito barulhento.\n\n## Huaraz (15/04 - 20/04)\n\nAntes de chegar lá, tivemos que pegar um ônibus de Ica para Lima (5h) e ao chegar em Lima (13:30) descobrimos que só tinha ônibus as 20:30, ou seja, tivemos que ficar **fucking 7 horas** enrolando dentro do terminal/shopping. Depois disso, o ônibus levou **8 horas** para chegar lá em Huaraz! Sim, é chão para caramba!\n\nChegando lá, nós fomos direto para o nosso \"hotel\" que pegamos pelo Booking. O hotel na realidade era uma grande porcaria ainda em construção. Mas como eram 5h da manhã, a gente decidiu dormir nele, já que estávamos mortos e assim que acordamos, fomos procurar outro lugar para ficar. Dica: escolha hoteis no Booking que você pode cancelar de graça, essa foi nossa salvação.\n\nPor que escolhemos ir para Huaraz? Com toda certeza, não foi pela cidade, que não tem nada. Parece uma cidade em construção, com nada bonito para se ver. Porém, é dali que saem os passeios para os lugares legais que tem por ali. E por isso escolhemos ficar em Huaraz.\n\n### Impressões e Informações\n\n- Nosso primeiro e horrível custo **R\\$30/dia**, mas não aconselho a ninguém. O segundo hotel, foi escolhido sem pensar/procurar muito, mas foi muito bom, consequentemente mais caro, **R\\$110/dia**. O hotel foi o [Grand Hotel Cesar's](http://www.grandcesarshotel.com.pe/).\n- Huaraz é feia, suja e não tem nada.\n- Incrivelmente foi o lugar onde todos os restaurantes tinham comida boa. Mas não era assim tão barato.\n- Faça seus passeios pela Golden, pois ela basicamente é a principal e as outras se juntam a ela.\n\n## Laguna Paron (16/04)\n\n![3 fotos: Em destaque na esquerda: foto de um lago bastante azul com uma montanha nevada ao fundo. Superior direita: outra visão do lago e montanha um pouco mais de cima. Inferior direita: um destaque no pico nevado.](/assets/img/paron.jpg)\n\nVocê pode ver mais fotos no meu [Album da Laguna Paron no Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214572745064953.1073741867.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nÉ um passeio tranquilo, eles disseram. Vai ser bom para aclimatizar, eles disseram...\n\nNa realidade mesmo, a gente pegou um guia louco, que saiu correndo na frente de todo mundo porque queria tirar foto e literalmente, largou geral subindo por um penhasco de pedras. Nota: geral faz o passeio por baixo, mas ele queria subir pq o visual para as fotos é mais bonito.\n\nO lugar é maravilhoso, foi meu primeiro contato com águas tão azuis e foi lindo! A aventura para mim também foi legal, mas já para Maria Alice, teve momentos de pânico, onde ela teve que sentar e relaxar um pouco, senão não dava. No final ela conseguiu! =D\n\n### Impressões e Informações\n\n- O passeio custou **R\\$50/pessoa** e fizemos pela Golden Tour que é a única que faz esse lugar.\n- Se você tem medo de altura e é atrapalhado, pergunte primeiro se você vai subir o mirante. Se disserem sim, só fique em baixo que vale tão a pena quanto.\n- Se você gostar de aventura, vai ser legal.\n- A água é impressionantemente azul!\n- Demora muiiiiito para chegar de van, mas a vista é bem bonita, vários penhascos.\n\n## Glaciar Pastoruri (17/04)\n\n![4 fotos: Superior esquerda: o reflexo num lago com montanhas e geleira ao fundo. Superior direita: um homem caminhando numa calçada com as montanhas nevadas ao fundo. Inferior esquerda: vista por cima da geleira, lago e montanha. Inferior direita: uma visão do drone bem do alto com todo o terreno de montanhas e lagos.](/assets/img/pastoruri.jpg)\n\nVocê pode ver mais fotos no meu [Album do Glaciar Pastoruri no Facebook](https://www.facebook.com/willjusten/media_set?set=a.10214611524874424.1073741868.1611244354&type=3). Eu também estou postando fotos em alta qualidade para download lá no meu [Unsplash](https://unsplash.com/collections/2048586/my-adventures-in-peru)\n\nFoi um dos meus passeios favoritos e também da Maria, no caminho até chegar lá tivemos algumas paradas para ver a vegetação local, uma água colorida muito doida e também uma água com gás natural.\n\nChegando perto do glaciar, nós precisamos fazer uma caminhada de uns 30-40min bem tranquila, numa calçada de cimento, o que fez ainda ser mais fácil do que ficar pisando em pedras ou lama, como nos outros passeios.\n\nLá no topo já podemos ver o glaciar e junto dele um lago formado pelo seu degelo. É uma coisa maravilhosa e a vista é linda de todos os pontos. Eu que sou apaixonado por montanhas e gelo, me senti no paraíso.\n\n### Impressões e Informações\n\n- O passeio custo **R\\$50/pessoa** e fizemos pela Golden Tour, já que no final tudo sai dela mesmo.\n- Se você vai para Huaraz, esse passeio é obrigatório.\n- Se tiver um drone, leve! É permitido voar lá, mas minha dica é voar um pouquinho distante, só para o barulho não incomodar ninguém.\n- Vá agasalhado, estamos a 4800m de altitude, venta bastante e é frio.\n\n## Laguna 69 (19/04)\n\n**FAIL de novo...** Nós deixamos um dia para descansar depois do Glaciar, pois sabíamos que a Laguna 69 era uma trilha super pesada. Só que mesmo com esse dia de descanso, a Maria tava passando mal com a altitude e sinusite e acabou que nem fomos. Confesso que fiquei bem chateado, porque eu gosto de trilhas pesadas, mas como ela não está acostumada, vou deixar para uma próxima que eu talvez vá sozinho. Ou até lá eu consigo treiná-la para aguentar essas coisas ahuahuahu\n\n## Lima (20/04 - 24/04)\n\n![3 fotos: superior esquerda: uma garota de costas em frente a um farol e duas palmeiras. Superior direita: uma vista aerea da praia e predios de Miraflores. Destaque inferior: panaroma da cidade de Lima no Bairro de Miraflores](/assets/img/lima.jpg)\n\nVocê pode ver e baixar minhas fotos lá no [Unsplash](https://willianjusten.com.br/meus-20-dias-no-peru/).\n\nEngraçado que quando você pensa no Peru, você tem uma imagem mais das pessoas de origem indígena, artesanatos e ruínas, mas Lima é bem diferente disso. Lá é uma cidade bem rica, com prédios super altos e bonitos. E o artesanato você quase não vê.\n\nApesar disso, eu confesso que gostei bastante de Lima, ela tem uma costa super linda, onde você fica olhando o mar o tempo todo. E por seu relevo ser diferente, você está no alto das rochas e o oceano mais abaixo, fica uma visão super legal.\n\nLá eu também pude voar meu drone e tirar fotos bem legais <3\n\n### Impressões e Informações\n\n- Definitivamente a cidade mais cara de todo o Peru\n- Ficamos no [Munay Bed and Breakfast](https://www.booking.com/s/17_6/465d2d0b) que é um hostel bem direitinho em frente a praia em Miraflores, quarto privado com banheiro. Conseguimos uma promoção pelo Booking, mas mesmo assim foi **R\\$100/dia**.\n- Prefira ficar no bairro de Miraflores, apesar de mais caro, é o mais bonito e com mais coisas para se fazer.\n- Não precisa ficar muitos dias lá, em 2 dias já viu o suficiente.\n\n## Conclusão\n\nMalz pelo post gigantesco, eu sempre começo pensando que vai ficar pequeno e no final fica enorme... Mas espero que tenham curtido o post e se interessado em ir para lá. Eu realmente recomendo o Peru para todo mundo, foi uma viagem super legal apesar de um ou outro perrengue e eu devo voltar para completar outros lugares que não fui. Se tiver alguma pergunta, manda aí nos comentários, que eu vou ajudando.\n" }, { "path": "posts/meus-50-dias-na-espanha.md", "content": "---\nlayout: post\ndate: 2018-03-13T21:01:03.000Z\ntitle: Meus 50 dias na Espanha\ndescription: \"Um pouco sobre como me locomovi, hospedagem, gastos e meu trabalho remoto. \"\nmain-class: misc\ntags:\n - travel\n - remoto\n - experiencia\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Introdução\n\nEu sei, você já deve estar pensando, qual é, isso é um blog de tecnologia ou um blog de viagens? Bom, na realidade, esse blog nunca foi **só** de tecnologia, é um espacinho que eu uso para escrever de tudo e como eu sou da área de TI, acabo escrevendo muito sobre isso. Mas, como eu agora tenho focado em outras coisas como viagens e fotografia, achei que talvez fosse interessante falar sobre isso também. E bom, seguindo a filosofia da minha mãe:\n\n> O blog é meu, eu escrevo o que eu quiser.\n\nBrincadeiras a parte, eu fiz uma enquete no twitter, antes de criar esse post, para ver como seria a recepção e bom, como pode ver na imagem abaixo, parece que muita gente acha legal.\n\n![Enquete no twitter: 97% apoia o post 3% não](/assets/img/enquete.png)\n\nMas fique tranquilo, nesse post eu vou falar sobre um assunto que muita gente me pergunta, como eu faço para trabalhar e viajar ao mesmo tempo? Como é minha rotina? E claro, também vou falar como a tecnologia me ajuda a viajar de uma forma bem melhor!\n\nEnquanto vou escrevendo esse post, vou ouvindo um monte de músicas aleatórias (maior parte de stone rock) e criei uma playlist no Spotify chamada [50 days in Spain](https://open.spotify.com/user/willianjusten/playlist/5YPPHlGWrv346o3jSaWkf7?si=Q-Liax8QRRauizVg2fIGyw), ouve lá e pode dizer se eu tenho um gosto ruim demais.\n\n## Por que de ir para Espanha?\n\nTodo ano a Toptal faz um encontro do time e ano passado eles decidiram fazer o encontro na Espanha, numa cidade chamada Niebla, que é bem próxima de Sevilla. Eles costumam escolher cidades menores, assim o time pode ficar bem unido e como éramos muitos (acabou que foi bem mais gente que meu time atual), precisamos ficar numa casa bem grande.\n\nA gente ia ficar reunidos lá do dia 26 de Outubro até 02 de Novembro, então eu comecei a fazer uns cálculos e depois de conversar com a patroa, decidi que iria ficar lá pela Espanha por 50 dias, indo dia 23 de Outubro e voltando dia 13 de Dezembro. Como muitos sabem, eu amo viajar, mas eu também gosto de aproveitar bem os lugares e eu não queria ir somente para Madrid e Barcelona, mas sim cidades pequenas e fazer trilhas (minha graaande paixão!).\n\n## Roteiro que eu fiz\n\nSempre antes de viajar, eu começo a pesquisar bastante pelos lugares mais legais que eu posso ir. E minha pesquisa é um pouco diferente, como eu disse no início, eu amo fotografia, então eu começo pesquisando por bons spots para fotografia. Então vou direto para o [500px](https://500px.com/), [Unsplash](https://unsplash.com/) e [Instagram](https://www.instagram.com/) (esse eu confesso que olho menos porque tem muita foto clichê e pouca coisa \"única\").\n\nNas pesquisas descobri algumas coisas muito maneiras, como um lago rosa irado! Também uma ponte, que é super famosa e aparece até em novela da Globo, mas que eu num tinha nem ideia que existia. Enfim, fui misturando lugares famosos e outros não tanto. Maaaas, cadê que durante a viagem eu fui em tudo certinho como planejado? Como sempre eu acabei ficando mais tempo em um lugar ou outro, até mesmo porque, diferente de um turista viajando fulltime, eu também precisava trabalhar!\n\nNo final, segue o mapa do percurso que fiz de cidade para cidade, depois eu vou separar a quantidade de dias e outros pequenos detalhes de cada cidade.\n\n![Percurso no mapa da Espanha](/assets/img/spain-50-days.png)\n\nSe quiser ver o mapa interativo no Google, [segue esse link aqui](https://drive.google.com/open?id=1B66Pq0RDQYag0duSzyvOrvFIccZKZ83F&usp=sharing).\n\n> Ahhhh, por que você não foi a Barcelona? E cidade X, Y, Z?\n\nSobre Barcelona, eu já tinha ido numa outra viagem e a cidade é muito lotada, também estava rolando aquela parada sobre a separação da Cataluña, como eu nem gosto da cidade mesmo, nem fez falta. Sobre outras cidades, bom gente, eu tinha 50 dias, não 1 ano!\n\n## Como vou separar esse post?\n\nPara ficar melhor organizado, eu vou fazer o seguinte, primeiro eu vou falar sobre os apps/tecnologias que me ajudaram na viagem, tanto na parte de locomoção como hospedagem e busca de lugares para visitar. Aí vou falar sobre a parte do trabalho remoto, como eu separava minha rotina e etc. E no final eu vou escrever mais sobre meu roteiro e experiências. Assim, você pode ler só que o quiser (espero que queira ler tudo xD).\n\n## A tecnologia ajudando minha vida\n\nEu sou um cara de tecnologia e sempre estou disposto a usá-la para o meu favor e para as viagens não poderia deixar de usar né?\n\nPara acomodação eu costumo usar muito o [Airbnb](https://www.airbnb.com.br/c/willianj60) porque permite que eu tenha um espaço mais calmo (muitas vezes com mesa para trabalhar) e eu também consigo conversar com nativos, o que é sempre bom para pegar dicas e até mesmo ter experiências super legais. Além de ser mais barato né? Já achei muito Airbnb mais barato até que hostel! Hostels são legais sim, mas nunca se sabe se no seu quarto vai ter aquele cara bêbado que chega as 4h da manhã e vai ficar roncando a noite inteira. Como eu disse, eu passei esses dias viajando e **trabalhando**, não poderia ter uma noite ruim de sono, pois iria complicar todo o meu dia. Então vale gastar uns euros a mais e ter dias tranquilos.\n\nE para locomoção, nada de avião, eu usei basicamente trem, ônibus e caronas! Isso mesmo, eu viajei a Espanha praticamente toda usando caronas! Como assim? Existe um aplicativo chamado [BlaBlaCar](https://www.blablacar.com.br) que super funciona na Espanha, na realidade, parece que o BlaBlaCar lá é mais famoso que Uber praticamente! Foi uma economia do caramba, além de ter conversas suuuuper legais, por exemplo, conheci um designer Belga que me deu carona para Valência, discutimos altas paradas de tecnologia, super maneiro!\n\nEm algumas cidades pequenas que fui ou trechos bem longos, eu acabei usando trem ou ônibus. Para pesquisar sobre trens e ônibus disponíveis e preços, eu usei a [GoEuro](https://www.goeuro.com), que é tipo uma Trivago disso, tem a [Rail Europe](http://www.raileurope.com.br/) também. E bom, a maioria dos trens é da [Renfe](http://www.renfe.com/) mesmo, então as vezes é só olhar no site deles direto.\n\nComo eu sou apaixonado por trilhas e montanhas, é claro que eu iria fazer trilhas por lá e um aplicativo que me salvou **demais** foi o [Wikiloc](https://www.wikiloc.com/), ele tem trilhas de pessoas reais com várias descrições e dá para salvar o mapa offline, então é uma mão na roda!\n\nPara ajudar com lugares dentro da cidade e coisas mais turísticas, eu uso o [Google Trips](https://get.google.com/trips/), que sempre tem bastante coisa bacaninha e eu posso construir meu planejamento (não que eu faça muito isso).\n\nE uma coisa **muiiiiito importante**, para usar esse montão de app e internet, a primeira coisa que eu faço ao chegar num país novo é comprar um chip com bastante internet! Agora a Europa tem uma regra que o chip de qualquer país Europeu precisa funcionar em outro país Europeu, então fica mais fácil. Mas nenhum chip meu tinha crédito, então eu comprei um da [Republica Movil](https://www.republicamovil.es/) que tava numa promoção muito boa, eu tinha **60Gb** para navegar o mês todo por apenas **15 euros**, para mim valeu super a pena, porque essa operadora pegava em tudo que é canto, até nas montanhas e era super rápida!\n\n## Rotina de trabalhar e viajar\n\nPara quem não sabe, eu trabalho remotamente no Core Team da [Toptal](https://www.toptal.com/). Não sou freelancer, eu trabalho num dos times que faz a plataforma existir (isso ainda causa bastante confusão na galera). E como sou um contratado normal, eu tenho que trabalhar normalmente como qualquer um, bom, talvez não tãaaao igual, por ser bem flexível.\n\nTodo dia eu tinha uma daily (reunião rápida de 15min no max) para falarmos sobre o que estávamos fazendo, se tivemos algum impedimento, o que vamos fazer e para atualizações (se iria ficar off em certo período, ida ao médico, folga, etc). Essa daily acontecia sempre as 15:30 no horário da Espanha, então era bem tranquilo, pois eu podia ir para um café ou fazer a reunião do Airbnb mesmo.\n\nA cada 15 dias a gente tem também uma retrospectiva, onde é uma reunião um pouquinho maior (1 hora) para discutir sobre o que tem funcionado, o que não tem sido tão bom e action points para melhorar no futuro. Essa retro costuma vir sempre 15 minutos depois da daily e as vezes dura mais de 1h, então nesses dias eu preferia ficar em casa direto, para garantir que poderia participar com calma e também para não ter muitos ruídos externos para atrapalhar.\n\nTirando essas duas reuniões, a gente precisa sempre estar disponível para parear com alguém caso necessário e também para trabalhar obviamente. Então como eu fazia minha organização?\n\nAcordava cedo (por volta de 7-8h da manhã), eu sei, isso nem é tão cedo, mas fala isso para o meu corpo... Toda a manhã eu pegava para passear pela cidade até umas 14h e então ia almoçar. Caso o restaurante fosse silencioso, eu fazia a daily dali mesmo com meu celular. Depois da daily, eu dava mais uma volta até +ou- 16:30, que era quando estava escurecendo (winter is coming) e então eu fazia uma escolha:\n\n- Ia para um café (se eu quisesse ver gente e estivesse me sentindo muito solitário)\n- Trabalhava do Airbnb (quando precisava me concentrar bastante e/ou precisasse de um internet estável)\n\nSobre as locomoções de cidade para outra, eu sempre avisava meu time e aí nesses dias eu não passeava, assim que chegava na cidade destino, eu ia logo para o Airbnb e trabalhava. Se tivesse um espaço, eu passeava a noite, até mesmo para poder jantar.\n\nNa Toptal a gente não tem um esquema de precisar trabalhar 8 horas exatamente ou coisas mais rígidas, então isso é ótimo para mim! Outra coisa é que temos muita flexibilidade, não é difícil conseguir um diazinho de folga para, por exemplo, fazer uma trilha mais demorada ou algo do gênero. E bom, como deu para notar, minha rotina era bem fácil, só lembrar de ter responsabilidade e saber separar os horários e trabalhar, sei que podem haver mil tentações em cidades novas, mas só ter disciplina e dá tudo certo.\n\nQuanto a quantidade de dias nas cidades, muitas cidades eu lia relatos de pessoas ficando 1-2 dias no máximo, mas quando eu via, eram aqueles turistas-maratonistas que corriam de uma ponta a outra da cidade para dizer que conheceram tudo. Ao meu ver, isso faz perder muito a experiência do lugar e por eu estar trabalhando, eu sempre fiquei mais dias do que o \"recomendado\" nos lugares. E logo abaixo eu começo a falar mais dessas informações sobre as cidades e algumas coisinhas a mais. Se isso não te interessa, aí pode partir, mas pensa com carinho...\n\n## Sobre as Cidades e mais\n\nEu sei, já escrevi para caramba que você está até cansado, então vou tentar escrever menos nessa parte tá, vou tentar só botar as cidades que fui, tempo em cada, algo mais especial e um pouco dos gastos. Além da impressão que tive da cidade.\n\nSobre fotos, você pode ver [algumas das minhas fotos favoritas no Unsplash](https://unsplash.com/collections/1589714/my-adventures-in-spain).\n\n### Criando o Volta Mozão\n\nChegou o dia 23 de Outubro e minha mãe e namorada me levaram no Aeroporto do Galeão, só que eu acabei entrando na área de embarque muito cedo e com isso fiquei meio ocioso (esse dia eu pedi folga na Toptal para pegar meu vôo). Aí pensei, por que não fazer alguma brincadeira para minha namorada? E aí tive a ideia de criar o [Volta Mozão](https://willianjusten.com.br/volta-mozao/), que era um site com um countdown dos 50 dias e onde eu ia botar uma foto por dia para ela.\n\nFoi ali no aeroporto mesmo que comecei a montar e eu queria ser rápido para montar antes de pegar o avião, porque senão já ia ter passado o dia. Brinquei no [Slack dos meus alunos](https://bit.ly/slack-will) mostrando um print e ganhei até feedbacks durante a construção! E foi assim que em 50 minutos nasceu o projeto. No link ali você consegue acessar e ver todas as fotos, mas já não tem o countdown, abaixo fica a tela de como era durante a brincadeira.\n\n![Imagem da tela do Volta Mozão faltando 50 dias](/assets/img/volta-mozao.png)\n\nEu lancei o [projetinho open source](http://github.com/willianjusten/volta-mozao) e foi engraçado que teve gente ajudando na ideia, o [Gripp](https://github.com/grippado) e o [Sergio](https://github.com/sergiohpreis) super ajudaram a deixar o negócio mais bonito, valeu seus lindos <3\n\n## Madrid (23/10 - 26/10)\n\n![Templo de Debod](/assets/img/willian-justen-de-vasconcellos-594081-unsplash.jpg)\n\nEu peguei um vôo do Rio para Madrid e lá eu fiquei num [Airbnb](https://www.airbnb.com.br/rooms/14055712?s=51) bastante bacana. Nesse Airbnb eu peguei duas noites, que deram o valor de **32,90 euros**. Chegando ao Airbnb o que eu descubro? A minha host era uma brasileira que já vivia na Espanha há mais de 30 anos! Foi muiiito bom, pois ela deu excelentes dicas, ficamos tão amigos que quando eu falei que no final da viagem eu voltava a Madrid, ela ofereceu a casa dela de graça! YEY! Já cheguei economizando! Bom, mais ou menos, pois foi em Madrid que comprei a minha linda câmera, uma [Sony Alpha 6500 + Zeis 16-70mm](https://www.bhphotovideo.com/c/product/1326408-REG/sony_alpha_a6500_mirrorless_digital.html).\n\n### Impressões\n\n- Tem turista para caramba, mas não chega nem perto do caos de Barcelona, então ponto positivo!\n- A cidade é bem barata para os padrões de Europa e ainda mais por ser uma capital. Eu conseguia achar o famoso Menu (entrada, prato principal, vinho, sobremesa ou café) por cerca de **8-14 euros**.\n- Fui bem atendido em todos os lugares, mas te falar que era difícil achar lugar vazio (espanhol come fora demais!)\n- O metrô é super fácil, mas não muito barato, ainda mais que precisa comprar o cartão primeiro.\n\nDe Madrid eu fui para Sevilla de trem, esse foi carinho (**53 euros**), mas como a Toptal tava pagando né xD\n\n## Sevilla - Niebla - Huelva (26/10 - 02/11)\n\nLá em Sevilla já estava com toda a galera da Toptal e pegamos um bus particular para Niebla, onde era a casa. Durante esse tempo todo eu não gastei um centavo, uma coisa maravilhosa! Abaixo uma foto nossa em Sevilla, num sábado que fomos passear lá.\n\n![Foto da Equipe da Toptal](/assets/img/toptal-team.jpg)\n\n### Impressões\n\n- Niebla é um ovo e meh, não tem muita coisa não. Mas a casa que ficamos era demais.\n- Huelva é bem mais bonita que Niebla, mas também não é tãaao grandiosa assim.\n- Demos sorte que um dia estava tendo um festival no Castelo de Niebla, isso foi bem legal!\n- Sevilla é quente para caraaaaaamba e tem uma horda imensa de turistas! Muitas cenas de GoT foram filmadas ali, então já viu né...\n\n## Sevilla (02/11 - 03/11)\n\nComo eu já tinha passeado por Sevilla no final de semana com o pessoal da Toptal, fui lá para um último dia, pois queria voar meu drone sobre o Metropol Parasol, e [super valeu a pena](https://unsplash.com/photos/v4t6eg2VMWE). Fiquei num [Airbnb simples](https://www.airbnb.com.br/rooms/19778915) lá, que na realidade não era uma casa de uma pessoa normal e sim uma pensão, mas não tive nenhum problema, era um quarto só para mim, só que foi bem caro, pois eu queria do lado da estação de trem. Foi a facada de **29,58 euros** para um dia só.\n\nAqui peguei meu primeiro BlaBlaCar, que paguei a bagatela de 6 euros para ir até Ronda. Fui com duas garotas espanholas bem novas que também iam turistar por Ronda.\n\n## Ronda (03/11 - 04/11)\n\n![Puente Nuevo](https://source.unsplash.com/vgfT4xaRs_c/1600x900)\n\nUma cidade super pequinina, mas que tem uma ponte muito legal que liga uma parte da cidade a outra. Tem uma trilha muiito maneira lá que dá até uma cachoeira e um pequeno lago. Fiquei num [Airbnb](https://www.airbnb.com.br/rooms/17443906) de um senhor muito simpático que já me ajudou no meu péssimo espanhol, a casa era ótima e muito bem localizada, o preço foi ok do meu ponto de vista, **21,26 euros** por 1 dia (que na realidade eu deixei minhas coisas na casa até as 22h do outro dia).\n\n### Impressões\n\n- Cidade muito bonita, com uma vista linda e que mistura natureza/trilha e belas construções\n- Pessoas muito atenciosas e comida excelente! Paguei pelo menu coisa de 5 euros e vinha comida demais!\n- Um número considerável de turistas na ponte e só. Nas trilhas era bem vazio e bom.\n\nDe Ronda eu segui para Málaga novamente de BlaBlaCar, dessa vez fui com um casal meio estranho, mas foi baratinho, só **5 euros**. Eu dormi a viagem toda, mas no final a mulher viu que eu tava sem cinto e me avisou para não esquecer de botar, porque é obrigatório colocar o cinto senão eu quem pago a multa (não o motorista), mais para frente eu conto isso...\n\n### Málaga (04/11 - 07/11)\n\nEssa cidade é fantástica, extremamente fotogênica e eu diria que consegui uma das minhas fotos favoritas da viagem lá, que é a foto abaixo da vista do Castillo de Gibralfaro, fiquei lá duas horas esperando o Sol se pôr e valeu muito a pena. Fiquei num [Airbnb](https://www.airbnb.com.br/rooms/19083021) super bonito e o mais legal, tinha um gatinho! A cidade é meio cara, então eu paguei **84,96 euros** para ficar esses 3 dias, ou seja, **28 euros/dia**.\n\n![Vista do Castillo de Gibralfaro](/assets/img/malaga.jpg)\n\n### Impressões\n\n- Já disse que a cidade é linda?\n- Primeira cidade com praias bonitas pelo caminho\n- Tem um castelo legal e ruínas!\n- As pessoas não são tão legais quanto nas cidades anteriores\n- Todo mundo fala inglês (a maioria é britânico mesmo)\n- O menu era relativamente mais caro, sempre por volta de **10-15 euros**\n\nDe Málaga eu fui para Granada de BlaBlaCar e custou **8,50 euros**.\n\n### Granada (7/11 - 11/11)\n\n![Alhambra](https://source.unsplash.com/Cdb3-cWZBeo/1600x900)\n\nUma cidade histórica e com influência árabe extremamente forte, devido ao domínio dos Mouros. A cidade é super bonita e tem uma vista linda para a Sierra Nevada. A cidade tem várias ruas bem estreitas e muitas subidas, você facilmente pode se perder lá, mas no final vai cair em alguma rua com marroquinos te oferecendo qualquer coisa. Fiquei num [Airbnb](https://www.airbnb.com.br/rooms/17070774) bem simples lá, mas com uma internet maravilhosa e bem no centro de tudo! O preço foi bem bacana também, paguei **74,00 euros** pelos 4 dias.\n\n### Impressões\n\n- Nem parece que você está na Europa aqui de tão forte a influência árabe (isso foi super legal)\n- O Alhambra é enorme e você vai perder um dia inteiro lá\n- Comida barata de novo! Menu por **4-5 euros** e as famosas tapas (um petisco + cerveja) por **1-2 euros**.\n\nDe Granada eu peguei um BlaBlaCar para Torrevieja, esse já foi mais carinho por duas razões, era o único que tinha e bom, é longe para caramba né. Fui com um casal de Russos que moram na Espanha e custou **22 euros**. Eu de novo esqueci de colocar cinto de segurança e imagina o que aconteceu? Isso mesmo! A polícia parou a gente logo no início da viagem e eu tive que pagar **100 euros** em multa! Depois desse dia eu já entrava no carro botando o cinto no primeiro segundo!\n\n### Torrevieja (11/11 - 15/11)\n\n![Foto do Pink Lake](/assets/img/pink-lake.jpg)\n\nA cidade do lago rosa, do lago verde e do oceano super azul! Sim, essa é a melhor descrição de lá. Quase ninguém conhece, mas deveria. Fiquei no [Airbnb](https://www.airbnb.com.br/rooms/15357233) de uma família britânica (sim, tem muitos britânicos nessa região) e a senhora da casa era um amor! Paguei **68,74 euros** pelos 4 dias!\n\n### Impressões\n\n- É uma cidade incrível e super limpa\n- Tem um lago rosa cara!\n- Eu não falei uma palavra em Espanhol nessa cidade\n- O menu era mais carinho **10-15 euros**\n\nDe Torrevieja fui para Valência de BlaBlaCar por **13 euros**.\n\n### Valencia (15/11 - 18/11)\n\n![Cidade das Artes e Ciências](https://source.unsplash.com/SKsf4V9qujM/1600x900)\n\nTem a Cidade das Artes e Ciências, já justifica você ir! É um conjunto com várias construções enormes, onde tem museu de ciências, aquário, cinema num dome imenso e mais. Tirando isso, a cidade é super limpa, organizada, fácil de se locomover, incrível. Lá eu fiquei num [Airbnb](https://www.airbnb.com.br/rooms/19393756) tão simpático de um Sírio, um Espanhol e 2 lindos cachorrinhos! Eu olhava pela janela e via a Cidade das Artes na minha frente literalmente, melhor localização impossível e eu paguei **64,14 euros** pelos 3 dias.\n\n### Impressões\n\n- A Cidade das Artes e Ciências é mais linda ainda de perto\n- Que cidade limpa! =o\n- Que comida deliciosa! Era cara **15-20 euros**, mas comi igual rei!\n- Falam espanhol rápido para caramba, mas todos tem paciência.\n\nDe Valencia eu fui para Bilbao de BlaBlaCar, sim, é longe para caraaaaamba! Saí as 6h da manhã e fiquei a manhã toda no carro para a Espanha até o norte. Foi carinho, só que mais barato que qualquer trem e mais rápido. Custou **35 euros**.\n\n### Bilbao (18/11 - 23/11)\n\n![Guggenhein](https://source.unsplash.com/ZB3mkIOycjE/1600x900)\n\nComo eles dizem, você está no País Basco e não na Espanha. Sim, é muito diferente, a arquitetura, a comida (aqui são pintxos ao invés de tapas) e até a língua, que aliás é uma das mais antigas do mundo e que não se parece com absolutamente nada! Fiquei num [Airbnb](https://www.airbnb.com.br/rooms/19572302) super porcaria que na real era uma pensão e tinha um casal em outro quarto que parecia que estava em Amsterdam de tanto que fumavam maconha... E foi caro, não recomendo a ninguém, paguei **143,38 euros** pelas 5 noites.\n\nA vantagem é que ficava do lado de um CoWorking incrível e de graça, então passei todos os dias lá para trabalhar. Essa semana foi mais pesada na Toptal para mim, então eu fui nos lugares principais, mas de resto só trabalhei.\n\n### Impressões\n\n- Um lugar bem diferente da Espanha\n- Pessoas frias (mais \"europeias\" e menos \"latinas\" como o resto da Espanha)\n- O Guggenhein vale a pena por fora, por dentro é um museu bem chato\n\nEm Bilbao teve um dia que eu fui para um lugar próximo de nome bem difícil **Gaztelugatxe**, e por que eu fui lá? Porque é a Pedra do Dragão de Game of Thrones!! Foi um passeio super demais! Altas trilhas, aproveitei demais esse dia!\n\n![Pedra do Dragão - GoT](/assets/img/gaztelugatxe.jpg)\n\nDe Bilbao fui para Santander de BlaBlaCar e me custou **7 euros**.\n\n### Santander (23/11 - 27/11)\n\n![Cabo de Faro Mayor](https://source.unsplash.com/HCvTsYtqOpc/1600x900)\n\nSantander é bem famosa no verão pelas suas praias, eu nem sabia muiito da cidade, mas eu resolvi parar nela porque se aproximava dos Picos de Europa que era onde eu realmente queria ir. Que felicidade que eu parei em Santander! Cidade linda demais, com umas paisagens épicas, tirei tantas fotos de drone nessa cidade que tenho fotos para postar até o ano que vem! Vai lá no meu [Unsplash](https://unsplash.com/collections/1589714/my-adventures-in-spain) e veja algumas fotos.\n\n### Impressões\n\n- Pessoas muito simpáticas e que adoram conversar\n- Muitos lugares para comer e baratos, **5-8 euros** para um menu\n- Eles deixam a garrafa inteira de vinho na mesa e você não paga mais por isso! Eu me assustei pensando que ia morrer numa grana xD\n- Lindas paisagens no Faro de Cabo Mayor\n\nDe Santander eu fui para uma cidade chamada Canga de Onís, que é uma cidade próxima a Covadonga e os Picos de Europa. Tive que ir de bus que era a única alternativa e paguei **13 euros**.\n\n### Canga de Onís (27/11 - 30/11)\n\n![Lagos de Covadonga](https://source.unsplash.com/uewFv0SEIEM/1600x900)\n\nFiquei num [Airbnb](https://www.airbnb.com.br/rooms/18388865) de um casal super simpático, mas ele ficava fora da cidade, mesmo assim, foi um dos lugares mais caros da viagem, paguei **104,97 euros** por 3 dias. Mas foi lá que eu tive uma das aventuras mais legais de todas, eu fiz **48km** subindo e descendo montanha para ir no Santuário de Covadonga e os famosos lagos Enol e Ercina. Eu [fiz um post no Facebook sobre](https://www.facebook.com/willjusten/posts/10213253161676193) se quiser rir sobre as coisas que aconteceram, foi bem maneiro e eu fiquei todo quebrado, mas valeu super a pena!\n\nDe Canga eu fui para Oviedo, com objetivo de já ir alcançando a costa e Santiago de Compostela. Peguei um bus também e custou **11 euros**.\n\n### Oviedo (29/11 - 01/12)\n\nFiquei num [Airbnb](https://www.airbnb.com.br/rooms/8024320) doido de um um hippie vegano que desenhava na casa toda, mas que não tinha nenhuma calefação e tava tão frio que eu quase morri lá... Paguei **38,98 euros** pelas 2 noites. Não tive impressão nenhuma da cidade, pois não fiz praticamente nada, estava exausto, precisava trabalhar e estava chovendo muito e frio.\n\nDe Oviedo fui para Santiago de Compostela, inicialmente eu tentei ir de BlaBlaCar, mas a pessoa simplesmente cancelou em cima da hora (isso pode acontecer) e aí eu peguei um bus que custou **24 euros**.\n\n### Santiago de Compostela (02/12 - 06/12)\n\nLá eu fiquei no [Airbnb mais bonito e organizado](https://www.airbnb.com.br/rooms/10647084) de toda a viagem, pelas fotos parecia normal, mas chegando me surpreendi! E foi barato, paguei **54,61 euros** por 4 noites!\n\n### Impressões\n\n- A cidade é movimentada pela galera que faz o El Camino de Santiago\n- Mochileiros em todos os cantos\n- Comida barata e boa! Achei menu por **3 euros** e bom!\n\nDe Santiago fui para Vigo, última cidade da viagem, peguei um BlaBlaCar que deu **9 euros**.\n\n### Vigo (06/12 - 11/12)\n\nEu já estava bem cansado de pular de cidade em cidade e já tinha visto tudo que eu me interessava, então usei Vigo para descansar bastante, trabalhar e começar comprar coisinhas para mãe e namorada. Eu fiquei num [Airbnb](https://www.airbnb.com.br/rooms/12582164) muito bem localizado, mas onde a proprietária alugava os dois quartos, então teve um casal super barulhento comigo lá. Por isso passei boa parte dos dias num Starbucks que ficava exatamente abaixo do prédio.\n\n### Impressões\n\n- É uma cidade sem muitos atrativos turisticos\n- Fuja dessa cidade em Dezembro, chove todos os dias\n- Comida por um preço razoável, **6-10 euros**\n\n## Conclusão\n\nUffa, finalmente acabei, peço perdão pelo vacilo, nem eu imaginava que ia ser um post tãaao grande. Mas espero que tenham tido algumas informações úteis e claro, qualquer dúvida, podem perguntar aí nos comentários! Mês que vem estou indo ao Peru para ficar 20 dias, quem quiser dar dicas, aceeeeeeito!\n" }, { "path": "posts/meus-plugins-favoritos-do-sublime-text.md", "content": "---\nlayout: post\ndate: 2016-03-21T21:48:36.000Z\ntitle: Meus plugins favoritos do Sublime Text\ndescription: Confesso que o Sublime é meu amorzinho, nele eu consigo ser\n produtivo e fazer muitas coisas. Veja o que eu uso no meu workflow.\nmain-class: dev\ntags:\n - workflow\n - dev\ncategories: null\n---\n\n## Introdução\n\nFaaaala galera! (roubando aqui a clássica fala do [Daniel Filho](https://twitter.com/danielfilho)). Esses dias eu liberei meu curso sobre como desenvolver sites estáticos utilizando Jekyll bem [aqui](https://www.udemy.com/criando-sites-estaticos-com-jekyll/) e uma coisa que muitos vieram perguntar foram quais plugins e temas eu utilizo no meu Sublime. Como eu também sou um cara super curioso no que os outros usam e vivo caçando plugins, resolvi escrever o que uso.\n\nVai ser um post bem rapidinho e a ideia é que todo mundo compartilhe aqui os plugins que utiliza e que eu não listei, sempre bom saber de algo que pode acelerar meu desenvolvimento.\n\n## Por que eu uso o Sublime?\n\nOlha, já mexi em váaaarios editores e no Sublime eu encontrei todas as facilidades de comandos e personalização, num editor extremamente leve. Com os plugins certos, eu consigo fazer tudo que preciso, consigo ter linter (beijos Webstorm), consigo fazer tudo pelo teclado (beijos Vim) e minha máquina não esquenta o suficiente para fritar um ovo (beijos Atom).\n\nBrincadeiras a parte, o Sublime é um excelente editor de texto para mim, mas não significa que você precisa desistir de usar o seu e começar a usar o Sublime só porque eu falei que gosto. A melhor ferramenta é aquela que você sabe trabalhar melhor. Esse post é só mesmo para passar o que uso para quem já usa e talvez para os curiosos que não se decidiram ainda qual ferramenta utilizar.\n\n## Instalando as coisas\n\nSe você ainda não tem o Sublime, é só baixar no [site oficial](https://www.sublimetext.com/), eu uso o 3, que é muito bom e tem recebido várias atualizações por agora.\n\nPara instalar os temas e plugins, você precisa do [Sublime Package Control](https://packagecontrol.io/), é só seguir as instruções no site, que não tem erro, já vai estar funcionando em segundos.\n\n## Tema e Highlight\n\n![Tela do meu Sublime](/assets/img/sublime-plugins/sublime-tema.png)\n\nPara o tema eu utilizo o maravilhoso [Material Theme](http://equinusocio.github.io/material-theme/) na opção Darker Oceanic. Esse tema é maravilhoso, além de deixar o sublime muito mais bonito, ele é super funcional, mudando todos os ícones dos arquivos por seus tipos, então eu consigo descobrir do que se trata cada arquivo sem nem mesmo abrir.\n\nO highlight dele é espetacular, as cores são pastéis, e o fundo, eu preferi deixar num cinza bem escuro, então fica bem suave de ler, consigo ficar horas trabalhando sem dor de cabeça ou precisar forçar a vista.\n\n## Language Syntax\n\nBom, o Sublime já vem com a maioria dos Highlights para as principais linguagens, mas algumas de template e pre-processador ele ainda não tem, para isso eu instalei. Os pacotes que uso são:\n\n- [Jade Syntax](https://packagecontrol.io/packages/Jade)\n- [Sass Syntax](https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20Sass)\n- [Stylus Syntax](https://github.com/billymoon/Stylus)\n- [Liquid Syntax](https://github.com/siteleaf/liquid-syntax-mode)\n\n## Git\n\nTodo mundo aqui usa Git né (quem não usa, deveria =p), e uma das coisas que eu fazia muito era ficar digitando `git status` para saber quais linhas eu alterei antes de dar o push, foi aí que descobri o maravilhoso [Sublime Git Gutter](https://github.com/jisaacks/GitGutter), ele coloca do lado um aviso das coisas que mudei, não é incrível?\n\n![Tela mostrando o Git Gutter em ação](/assets/img/sublime-plugins/sublime-gutter.png)\n\nMas poxa, só ver as mudanças não adianta, eu quero poder adicionar, quero dar `git blame` direto no arquivo para ver quem foi o safado que escreveu aquele código ruim no freela, então nada melhor que o [Sublime Text Git](https://github.com/kemayo/sublime-text-git), ele integra ao Git e te permite fazer TUDO que você faria no terminal.\n\n![Tela mostrando o Git Blame em ação](/assets/img/sublime-plugins/sublime-git.png)\n\nE aqui embaixo usando o comando `git blame` em um arquivo, olha o [Fernando Daciuk](http://blog.da2k.com.br/) commitando ali =p\n\n![Tela mostrando o Git Blame em ação](/assets/img/sublime-plugins/sublime-blame.png)\n\n## Trabalhar com Arquivos e Pastas\n\nUma coisa que eu achava ruim no sublime eram as opções para mexer com arquivos, criar, importar e etc. Era uma coisa bastaaaante chata, precisar escrever todo o endereço do arquivo para mim era um parto, por isso eu achei essas ferramentas incríveis:\n\n- [Advanced New File](https://github.com/skuroda/Sublime-AdvancedNewFile) - posso criar pastas e arquivos direto do teclado, usando os atalhos dele\n- [AutoFileName](https://github.com/BoundInCode/AutoFileName) - completa os paths dos arquivos, coisa linda demais\n- [Sidebar Enhancements](https://github.com/titoBouzout/SideBarEnhancements) - mais opções na barra lateral! YEY!\n- [Sublime All Autocomplete](https://github.com/alienhard/SublimeAllAutocomplete) - ele acha palavras, métodos, enfim, tudo que tiver nos outros arquivos, super bom.\n\n## Linters e organização de código\n\nEu sou bastante preocupado com código, gosto de tudo seguindo o mesmo padrão do projeto, sem espaços errados/etc. Para isso, tenho meus plugins salvadores:\n\n- [Sublime CssComb](https://github.com/csscomb/sublime-csscomb) - padroniza meu CSS de acordo com o padrão passado no arquivo do .csscomb\n- [EditorConfig Sublime](https://github.com/sindresorhus/editorconfig-sublime) - segue padrão definido no .editorconfig (USE AGORA MESMO!)\n- [Sublime Linter](https://github.com/SublimeLinter/SublimeLinter3) - o responsável por fazer o Linter dentro do Sublime, ferramenta magnífica.\n- [Sublime Linter JSCS](https://packagecontrol.io/packages/SublimeLinter-jscs) - junto com o Sublime Linter, ele verifica o padrão do código JS de acordo com o definido no arquivo do jscs\n\n## Snippets\n\nSou um cara preguiçoso, que adora atalhos, então a primeira coisa que procurei, foram bons snippets, para facilitar a minha vida.\n\n- [Emmet](http://emmet.io/) - esse é só o plugin mais importante nesse quesito para quem trabalha com web, ele é uma mão na roda fenomenal, se você não conhece, veja imediatamente.\n- [Stylus Snippets](https://github.com/billymoon/Stylus-Snippets) - meu pre-processador favorito, não poderia ficar sem snippet para eles =)\n- [Java​Script & Node​JS Snippets](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets) - muitos snippets úteis, me agiliza bastante ao escrever JS\n- [DocBlockr](https://github.com/spadgos/sublime-jsdocs) - ninguém gosta de documentar as coisas, então é melhor que tenha algo que agilize e facilite isso, para não se tornar algo ainda mais chato. O DocBlockr ajuda bastante, só escrever `/**` e apertar tab e ele já gera um bloquinho com todas as infos daquele método, muito bom.\n\n## Jekyll\n\nMeu blog é escrito em Jekyll e depois do curso que lancei esses dias, vocês já devem imaginar que eu gosto bastante dele certo, então porque não ter coisas para facilitar minha vida?\n\n- [Sublime Jekyll](http://23maverick23.github.io/sublime-jekyll/) - agiliza criação dos posts, drafts e etc.\n- [Markdown Extended](https://github.com/jonschlinkert/sublime-markdown-extended) - melhora o jeito de escrever Markdown, que é a linguagem que utilizo nos posts.\n\n\n## Métrica\n\nEsse tópico na real é para falar só de um mesmo, mas que é tão bom que merece um tópico próprio, o [wakatime](https://wakatime.com/) é uma ferramenta que metrifica tudo que você faz no seu editor, como projetos que trabalhou, linguagens que usou, horas gastas, etc.\n\nVocê pode usar para metrificar seus freelas, mas também pode usar só de curioso (como eu), para saber o que anda programando e talz. Acho muito muito legal <3\n\n## Conclusão\n\nBom pessoal, tema light e rapidinho, mas com coisinhas bem interessantes, espero que vocês gostem e não esqueçam de falar o que utilizam nos comentários abaixo, adoro descobrir plugins novos!!\n" }, { "path": "posts/migrei-meu-blog-do-gatsby-para-o-nextjs.md", "content": "---\nlayout: post\ndate: 2021-07-04T04:46:26.000Z\ntitle: Migrei meu blog do Gatsby para o NextJS\ndescription: Um pouco da razão da mudança, coisas que fiz e minhas impressões.\nmain-class: js\ntags:\n - nextjs\n - gatsby\n - blog\ncategories:\n - NextJS\n---\n\n## Introdução\n\nFala pessoal! Alguns dias atrás eu resolvi migrar meu blog do [GatsbyJS](https://www.gatsbyjs.com/) para o [NextJS](https://nextjs.org/) e postei até no meu Twitter, alguns posts [sobre isso](https://twitter.com/Willian_justen/status/1411029194566418433), [aqui](https://twitter.com/Willian_justen/status/1411091307884421123) e [aqui também](https://twitter.com/Willian_justen/status/1411097667434856449).\n\nNo [post passado](https://willianjusten.com.br/como-ter-um-blog-ajuda-a-conseguir-oportunidades) muita gente gostou da minha recomendação do Sleeping Pandora, então hoje a recomendação é da banda [Novo Amor](https://open.spotify.com/artist/0rZp7G3gIH6WkyeXbrZnGi?si=ZZOUd6ovThOUZ1iCuwSOOw&dl_branch=1), que apesar de ter um nome bem brasileiro, é de um cara do País de Gales, a voz dele é incrível e as melodias são ótimas.\n\nNesse post eu vou falar um pouquinho desse processo, algumas das razões e pequenos detalhes. Minha ideia é fazer uma série inteira com vários pequenos detalhes separados em posts pequenos, até para facilitar nas buscas quando alguém estiver precisando. Então nesse post daqui, eu vou só dar uma \"pincelada\" em algumas das coisas, pois entrarei mais a fundo realmente em posts individuais. Se você tem interesse no assunto, num deixa me [seguir no Twitter](https://twitter.com/Willian_justen) ou assinar o [feed do blog](https://willianjusten.com.br/feed.xml) no seu [agregador de conteúdo favorito](https://willianjusten.com.br/usando-um-agregador-de-conteudo).\n\n## A pergunta que não quer calar\n\nLá no Twitter algumas pessoas responderam o Tweet, outros chegaram até a mandar a DM fazendo sempre a mesma pergunta:\n\n> Mas por que você vai trocar? Não gosta mais do Gatsby? O Next é bem melhor?\n\nE bom, a primeira resposta que eu dou para essa é bem simples:\n\n> Mudei porque deu vontade!\n\nIsso mesmo, não tinha uma enorme razão para mudar, o blog já tinha uma boa performance, tudo estava funcionando direitinho, num tinha nada me agoniando nem nada.\n\n## Mudança é oportunidade para aprendizado\n\nEu gosto de inventar essas mudanças, pois é sempre uma boa oportunidade para estudar algo diferente e testar. Eu já trabalho há anos com Next e Gatsby, mas nunca precisei migrar de um para o outro e queria ver como era. Nesse processo posso garantir que aprendi vários detalhezinhos.\n\nAliás, foi a primeira vez que eu codei com a ajuda do [GitHub Copilot](https://copilot.github.com/) que inclusive [gravei esse vídeo sobre](https://www.youtube.com/watch?v=EGiXsfyBST8) e posso dizer, estou surpreso! Tiveram vários momentos que ele sugeriu coisas super úteis!\n\n## Meu processo\n\nEu demorei em torno de 2-3 dias e foi bastante divertido! Eu usei bastante a [técnica do Pomodoro](https://willianjusten.com.br/tecnicas-de-aprendizado) junto com o site/app [Pomofocus.io](https://pomofocus.io/).\n\nLá eu meio que fui definindo as tarefas que precisava fazer e ia iniciando os ciclos de 25min, fluiu super bem!\n\n## Sobre Gatsby e Next\n\nComo todos sabemos, tanto o Gatsby quanto o Next são feitos com React. A grande diferença é que o Gatsby é orientado a plugins, enquanto o Next é mais livre e agnóstico, deixando você criar as soluções como você quiser.\n\nA vantagem do Gatsby é que ele tem um [ecossistema enorme de plugins](https://www.gatsbyjs.com/plugins/), então, tudo que você precisa, tem um plugin que alguém já fez, o que acelera bastante o processo de desenvolvimento. Mas isso também pode se tornar um vilão, pois a estrutura é bem própria do Gatsby, então você precisa conhecer como as coisas funcionam para começar a usar.\n\nO Next, por outro lado, tenta ser o mais próximo possível do Javascript/React puro, então, todas as pequenas diferenças que ele tem, são em formas de funções e não arquivos de configuração. Outra grande vantagem do Next ao meu ver, é que ele permite diferentes tipos de desenvolvimento, seja um estático (SSG), um estático incremental (ISR) ou até mesmo server side rendering (SSR), o que te deixa bastante livre na hora de desenvolver.\n\nSe você não sabe nada sobre essas siglas, recomendo fortemente [esse vídeo](https://www.youtube.com/watch?v=X3W-YFe2_io).\n\n## Minhas impressões da migração\n\nO meu objetivo dessa primeira mudança, foi permanecer com o mesmo visual e mudar só \"a parte debaixo do capô\". Dessa forma, por ambos serem React, eu consegui quase que exportar os componentes diretamente sem problemas, não posso dizer o mesmo das outras coisas, mas num geral, foi até que tranquilo, as \"dificuldades\" foram mais pelo meu blog ter muito conteúdo e já ter aí seus 6 aninhos de idade.\n\nEu pretendo escrever em posts separados alguns dos detalhes mais interessantes/importantes, mas aqui eu vou passar por alto algumas das coisas que você deve se preocupar/atentar.\n\n### Arquivos estáticos e build\n\nAs mudanças são:\n\n- Do `static` (Gatstby) para `public` (Next)\n- O Gatsby faz o build para `public` (então lembre-se de remover do `.gitignore`)\n- O Next cria uma pasta `.next` (esse você adiciona)\n\n### Os componentes \"cascas\"\n\nNo Gatsby você tem um arquivo [html.js](https://github.com/willianjusten/gatsby-course/blob/master/src/html.js) que é a casca mais interna das páginas, onde você pode colocar algumas informações que você quer que persista em todas as páginas, coisas como tema (light/dark), algumas tags de verificação/etc.\n\nJá no Next você possui 2 arquivos, que são:\n\n- `pages/_document` - esse é o arquivo mais externo de todos e roda **somente** no build e/ou server side, ele serve mais para extendermos o html em si, adicionando tags de verificação, meta tags comuns a todas as páginas e mais. Você pode ler [mais aqui](https://nextjs.org/docs/advanced-features/custom-document).\n- `pages/_app` - esse arquivo encapsula todas as páginas, mas ele roda no server e no client. É mais escolhido para persistirmos layouts, temas, estilos, etc.\n\n### Links\n\nNa hora da conversão dos componentes, esse foi um passo fundamental, apesar de bobo, se você não trocar, vai quebrar tudo xD\n\n```js\n// Gatsby\n\nimport { Link } from 'gatsby'\n\nexport default function Page() {\n return meu link\n}\n\n// Next\n\nimport Link from 'next/link'\n\nexport default function Page() {\n return (\n \n meu link\n \n )\n}\n```\n\nComo você pode ver, no Gatsby, o próprio `Link` já se comporta como um `a` e recebe a url através do `to`. No Next, você precisa criar um `Link` e passar um `a` dentro dele (isso é muito importante!) e o `href` ao invés de ficar no `a`, ele fica no `Link`.\n\n### Styled Components\n\nNo Gatsby para trabalhar com `styled-components` você tem advinha o quê? Isso mesmo, um plugin! Já no Next, para fazer funcionar, você precisa de 2 detalhes:\n\n#### Configurar o Babel\n\nVocê precisa instalar o `babel-styled-components` e também configurar o `.babelrc` com:\n\n```json\n{\n \"presets\": [\"next/babel\"],\n \"plugins\": [\n [\n \"babel-plugin-styled-components\",\n {\n \"ssr\": true,\n \"displayName\": true\n }\n ]\n ],\n \"env\": {\n \"test\": {\n \"plugins\": [\n [\n \"babel-plugin-styled-components\",\n {\n \"ssr\": false,\n \"displayName\": false\n }\n ]\n ]\n }\n }\n}\n```\n\nE depois disso, você precisa também alterar o `_document` para gerar os estilos no server.\n\n```jsx\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\nimport { ServerStyleSheet } from 'styled-components'\n\nexport default class MyDocument extends Document {\n static async getInitialProps(ctx) {\n const sheet = new ServerStyleSheet()\n const originalRenderPage = ctx.renderPage\n\n try {\n ctx.renderPage = () =>\n originalRenderPage({\n enhanceApp: App => props => sheet.collectStyles()\n })\n\n const initialProps = await Document.getInitialProps(ctx)\n return {\n ...initialProps,\n styles: (\n <>\n {initialProps.styles}\n {sheet.getStyleElement()}\n \n )\n }\n } finally {\n sheet.seal()\n }\n }\n\n render() {\n return (\n \n \n \n
    \n \n \n \n )\n }\n}\n```\n\nSe você não fizer essas duas etapas, o blog pode \"piscar\" começando sem estilo e ganhando os estilos, o que não é legal.\n\n### Criação de páginas/posts\n\nNo Gatsby, toda a criação é gerenciada através do arquivo [gatsby-node](https://github.com/willianjusten/gatsby-course/blob/master/gatsby-node.js#L39-L110), onde você vai trabalhar com uma source de dados, que pode ser desde um conjunto de markdown, até uma API de algum CMS. Mas é importante se atentar que aqui a interface de conexão vai ser sempre em GraphQL no final.\n\nJá no Next, a criação das páginas é feita diretamente na pasta `pages` e vai caber a você definir a estrutura dessas páginas/slugs. Exemplo, para os posts do blog, eu criei um arquivo `[slug].js` que entende que terão várias páginas dinâmicas, onde a url será aquele `slug`. Isso para mim é bem mais fácil de achar e claro de como funciona. Outra questão é que você pode usar diferentes coisas para diferentes páginas sem problemas. Quer gerar as páginas de posts através de markdown? Vai lá. Quer criar páginas de outros assuntos usando GraphQL no mesmo projeto? Pode também. Enfim, você é livre para trabalhar como desejar.\n\nEm um outro post vou mostrar detalhadamente como se faz tanto com markdown quanto com uma API.\n\n### Componente de Imagem\n\nO grande trunfo que o Gatsby tinha para mim, era o componente de `gatsby-image` que fazia tratamentos, lazy-loadings, blur, etc. O NextJS na época que eu criei o blog sequer tinha um componente para trabalhar com imagens, mas desde a v10 eles criaram um componente e evoluíram super rápido!\n\nVocê pode ver a [documentação do componente](https://nextjs.org/docs/api-reference/next/image), mas um exemplo simples de uso:\n\n```jsx\nimport Image from 'next/image'\n\nexport default function Home() {\n return (\n \n )\n}\n```\n\nComo pode ver, é bem simples e direto. Tendo algumas propriedades legais para passar como `placeholder=\"blur\"`, `layout=\"responsive\"` e outras coisas mais.\n\n### Componente de SEO\n\nEnquanto o Gatsby utiliza o `react-helmet`, dentro do Next você pode simplesmente criar suas tags diretamente ou então utilizar o `next-seo`. Um exemplo bem simples é:\n\n```jsx\n// src/components/seo.js\n\nimport Head from 'next/head'\nimport config from '../config'\n\nexport default function SEO({ description, title }) {\n const siteTitle = config.title\n\n return (\n \n {`${title} | ${siteTitle}`}\n \n \n \n \n \n \n \n \n \n \n )\n}\n```\n\n## Conclusão\n\nEnfim, esses foram alguns dos detalhes que eu fui mexendo para migrar e vou fazer uns posts in-depth sobre o assunto, mas se você já se interessou em conhecer o Next. Eu tenho 2 cursos que você pode dar uma olhada:\n\n- [React Avançado](https://reactavancado.com.br) - esse é um curso bem extenso, onde eu crio um Ecommerce de jogos do zero usando tudo que o NextJS tem a oferecer, além de testes, GraphQL, backend com Strapi e mais uma pá de coisas.\n- [NextJS na Prática](https://nextjs.willianjusten.com.br/) - esse é um curso mais rápido e direto nas funcionalidades do NextJS para criar uma espécie de blog, só que para viagens.\n\nE se você quiser mais sobre as diferenças de performance, benchmarks e etc. Fica atento para o próximo post, onde falarei mais desse assunto!\n" }, { "path": "posts/migrei-para-o-vscode-e-estou-feliz.md", "content": "---\nlayout: post\ndate: 2017-07-27T22:08:41.000Z\ntitle: Migrei para o Visual Studio Code e estou feliz!\ndescription: Um pouco da minha experiência com esse editor que me fez aposentar\n o Sublime e plugins que uso.\nmain-class: dev\ntags:\n - workflow\n - dev\ncategories: null\n---\n\n## Introdução\n\nFaaala pessoal, tentando manter um ritmo de pelo menos um post por semana, vamos lá para mais um post. Enquanto eu escrevo esse post, vou ouvindo uma banda absurdamente boa, formada por uns adolescentes, mas não se deixe enganar, as influências dos anos 70 vão te fazer pensar estar ouvindo Led Zeppelin. A banda em questão é a [Greta Van Fleet](https://open.spotify.com/artist/4NpFxQe2UvRCAjto3JqlSl), pode parar o que está ouvindo e curtir o som deles, vale a pena.\n\nE para o post de hoje, vou falar sobre um editor de texto que me fez largar o Sublime Text e não sentir saudades, isso mesmo, ele fez um milagre, porque sou amante e defensor do Sublime há anos! O editor em questão é o [Visual Studio Code](https://code.visualstudio.com/), sim, a Micro$oft anda acertando!\n\nObs.: não recebi nada para fazer esse post, mas se alguém for da M$ e quiser oferecer algo, meus contatos estão na página do about!\n\n## Características\n\nSegue um passeio pelas principais features desse editor.\n\n### Intellisense\nA primeira coisa que eles já tem orgulho de falar que tem é o [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense), que traz um sistema inteligente de autocomplete para variáveis e métodos, além de mostrar várias informações daquele método/variável. Abaixo segue um Gif dessa maravilha rodando.\n\n![Intellisense em ação](https://code.visualstudio.com/assets/docs_carousel/intellisense_b.png)\n\n### Debugging\n\nIsso mesmo, você pode depurar sua aplicação, adicionar breakpoints, identificar valores dentro da call stack e outras várias coisas, diretamente do editor. E ele roda leve leve, não adianta mais dar desculpa que usa aquela sua IDE pesada. E ele funciona não só para uma linguagem, mas para várias, bastando instalar a extensão que desejar. Dá uma olhada na [página da documentação deles](https://code.visualstudio.com/docs/editor/debugging), vários exemplos legais.\n\n![Exemplo do Debugging funcionando](https://code.visualstudio.com/assets/docs_carousel/debug_b.png)\n\n### Multi-cursor, linter e mais\n\nIsso mesmo, aquelas coisas maravilhosas que você usava no Sublime e não trocava de jeito nenhum, todas estão no VScode e de forma bem melhorada. Dá uma olhadinha na página de [Basic Editing](https://code.visualstudio.com/docs/editor/codebasics) deles, que tem bastante coisa legal mostrando lá.\n\n![Exemplo mostrando o multicursor](https://code.visualstudio.com/assets/docs_carousel/multi-cursor-edit.png)\n\n### Code Navigation e Refactor\n\nUma das coisas que eu ficava muito chateado de não ter no Sublime (até tinham uns plugins, mas nada muito bom) era o Go to definition. As vezes eu queria saber o que um método fazia e eu tinha que caçar na mão a definição do método, pois não tinha um link. E isso tem no VSCode funcionando muito bem! Isso não é lindo? E unido a isso, ele tem algumas ferramentas que auxiliam o refactor, como, por exemplo, mudar uma variável/método em todas as referências de todos os arquivos a um clique, lindo demais! Dá uma olhada [aqui](https://code.visualstudio.com/docs/editor/editingevolved), vai curtir bastante!\n\n### Integração com o Git\n\nE uma das coisas mais bonitas e funcionais que tem no VSCode é essa integração. Eu confesso que me falavam e eu pensava: \"Pow, mas eu sempre tenho terminal aberto, uso muito bem o Git por lá, num preciso disso.\" e bom, mereço ficar quieto da próxima. É claro que consigo fazer tudo no terminal, mas a forma simples e fácil que o VSCode faz essa integração, agiliza demais no meu workflow. Eu consigo ver difs mais claros entre os arquivos, para resolver conflitos ele ainda me mostra opções como \"Ignorar mudanças vindas do remoto, mesclar com as mudanças atuais, ignorar mudanças atuais\", cara, isso é uma mão na roda! Olha essa [página](https://code.visualstudio.com/docs/editor/versioncontrol) e tenha ideia de quanta coisa boa essa integração tem!\n\n![Tela mostrando o diff](https://code.visualstudio.com/assets/docs_carousel/git_b.png)\n\nE se depois de tudo isso você não está convencido, acessa lá o [site deles](https://code.visualstudio.com/docs) e leia por si só. Maaaaas, ainda não acabou, agora vem a cereja no topo do bolo, os **plugins**!\n\n## Meus Plugins favoritos\n\nOs plugins do Sublime eram incríveis, eu conseguia transformar um editor simples numa ferramenta de trabalho extremamente poderosa. E no VSCode existem diversos plugins incríveis para continuar com isso! Eu vou listar aqui alguns dos plugins que eu uso e salvam minha vida diariamente.\n\n- [Advanced New File](https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file) - o mesmo que tinha no Sublime, permite criar pastas dentro de pastas, arquivos dentro de pastas inexistentes, tudo através do teclado, passando o endereço desejado.\n- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - basta você mudar o nome de um lado ou do outro da tag e ele já ajusta o outro lado para ti.\n- [AutoFileName](https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename) - completa o nome dos arquivos para mim, perfeito para adicionar imagens.\n- [Chai Snippets](https://marketplace.visualstudio.com/items?itemName=nwhatt.chai-snippets) - para quem usa Chai, ajuda bastante para escrever os testes.\n- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) - para rodar seu código diretamente do terminal do VSCode.\n- [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize) - ele coloca um background nas cores no css, facilitando assim saber qual cor é.\n- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - o nome já diz, permite fazer debug no Chrome, lindo.\n- [Document this](https://marketplace.visualstudio.com/items?itemName=joelday.docthis) - para criar cabeçalhos em métodos e variáveis.\n- [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - para o editor seguir as regras do arquivo do `.editorconfig`.\n- [ES6 Mocha Snippets](https://marketplace.visualstudio.com/items?itemName=spoonscen.es6-mocha-snippets) - para quem escreve testes com o Mocha.\n- [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - acho que vem até por padrão, para rodar o linter no seu código JS.\n- [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame) - mostra quem foi o carinha que fez a merda naquele código e isso bem na palma da sua mão, ou melhor, na barrinha inferior.\n- [Git History (git log)](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) - para mostrar logs bonitinhos do Git.\n- [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore) - ajuda a criar o `.gitignore`.\n- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - snippets lindinhos para o seu código em ES6.\n- [jsx](https://marketplace.visualstudio.com/items?itemName=TwentyChung.jsx) - suporte para escrever `jsx`.\n- [language-stylus](https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus) - suporte para escrever `stylus`.\n- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) - o plugin maravilhoso que tá me ajudando a escrever esse Markdown bonito para o blog.\n- [Prettify JSON](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json) - para indentar `JSON`, bastante útil.\n- [Reactjs code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets) - snippets para quem usa React.\n- [Sublime Text Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings) - o cara que fez a minha transição praticamente imperceptível, ele transforma todos os comandos do Sublime!\n- [SVG Viewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer) - para poder visualizar SVG diretamente do editor.\n- [vscode-spotify](https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify) - integra com o Spotify e tem a opção de ver a letra da música! Você pode ver a letra da música cara, isso é demais!\n- [Wakatime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) - porque eu sou fissurado com métricas.\n\n## Conclusão\n\nÉ isso aí galera, espero que vocês tenham gostado do Post e passem a dar uma olhada no VSCode com carinho, ele é da Micro$oft, mas é bom, eu prometo =D\n\nE se você usa alguma parada que não está no post, **pelamordedeus** coloca aí nos comentários, porque eu sou o rei de testar plugins!\n" }, { "path": "posts/minha-trajetoria-ate-ser-desenvolvedor.md", "content": "---\nlayout: post\ndate: 2017-06-21T22:49:40.000Z\ntitle: Minha trajetoria até me tornar Desenvolvedor\ndescription: Uma pequena entrevista onde falo sobre meus primeiros trabalhos,\n desafios e meu futuro.\nmain-class: dev\ntags:\n - dev\n - remoto\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, o [William Oliveira](https://twitter.com/w_oliveiras) me pediu para participar de uma entrevista para o [Training Center](https://github.com/training-center/sobre), demorei demaaaais para fazer, mas acabei enviando para ele esses dias. Você pode ler no [Medium](https://medium.com/trainingcenter/como-%C3%A9-trabalhar-como-desenvolvedor-front-end-remoto-por-willian-justen-e7cdf7fe2e64) ou só seguir o post aqui, que a entrevista está na íntegra também.\n\nEnquanto escrevi a entrevista e até agora, estou ouvindo a mesma banda, que é [Mt. Wolf](https://open.spotify.com/album/4WBiO5swd0JJnrDyo34CPg), eles tem um som muito legal e ótimo para relaxar, se curte um som mais calmo e atmosférico, vai sem medo =D\n\nBom, vamos ao post que interessa, mais um pouquinho da minha história em palavras curtas.\n\n## Apresentação\n\n![Profile Photo](https://willianjusten.com.br/assets/img/external/willian-profile.jpg)\n\nOlá, meu nome é [Willian Justen](https://twitter.com/Willian_justen) e sou de uma cidade na serra do Rio de Janeiro chamada Petrópolis (carinhosamente apelidada de Silent Hill brasileira). Tenho 27 anos e atualmente sou Desenvolvedor Front-End no Core Team da [Toptal](http://toptal.com/), onde trabalho remotamente com pessoas do mundo todo, mas antes de trabalhar nela, trabalhei também em algumas empresas bem interessantes como [HUGE](http://www.hugeinc.com/), [Globo.com](http://www.globo.com/) e [Queremos/WeDemand](https://queremos.com.br).\n\nEscrevo num [blog pessoal](https://willianjusten.com.br/) e também crio [cursos](https://willianjusten.com.br/cursos/), que hoje estão sendo transferidos\npara a plataforma da [Udemy](https://www.udemy.com/user/willian-justen-de-vasconcellos/).\n\n### Como você conheceu a área de Desenvolvimento?\n\nNo meu blog eu fiz um [post](https://willianjusten.com.br/mudando-sua-vida-atraves-de-projetos-paralelos/#historia) falando um pouquinho da minha história e como passei a me interessar por Desenvolvimento. Mas basicamente foram vários pequenos encontros, que foram me deixando cada vez mais e mais interessado pela área.\n\nQuando mais novo eu amava brincar com o [RPG Maker](http://www.rpgmakerweb.com/) e sonhava em trabalhar numa Nintendo ou Blizzard da vida, criando jogos. Mas acabou que foi chegando a época de vestibular e como eu era muito bom em Química, eu decidi ir para Química. Sim meus amigos, eu fiz 4 anos de Química Industrial e pasmem ainda mais, eu desisti no último período =D\n\nDentro da Química, eu acabei descobrindo uma área que era de Modelagem Molecular, onde basicamente utilizávamos grandes computadores (clusters) para fazer cálculos e predizer estruturas moleculares para então criar esses elementos em 3D. Foi paixão a primeira vista e eu comecei a aprender ainda mais de programação, como Fortran (que vida...), OpenGL, C/C++, Python, além de aprender mais sobre Linux e grandes servidores.\n\nE como você pode notar, eu fui deixando a Química totalmente de lado. Quando surgiu a oportunidade de administrar um servidor privado de World of Warcraft (não só instalar e rodar, mas mexer no código mesmo), foi o momento que eu repensei e falei para mim, ok, é isso que eu quero. Quero ser desenvolvedor! Voltei a morar na minha cidade natal, iniciei um curso de TI e estamos aí até hoje.\n\n### Por que você escolheu ser Desenvolvedor Remoto?\n\nÉ engraçado dizer isso, mas eu resolvi ser Desenvolvedor por causa das frustrações/felicidades que eu tinha cada vez que eu tentava fazer algo. Como eu comecei na área como um curioso, eu passava horas e horas fazendo um monte de merda e tentando entender por que não funcionavam e, as vezes, para entender por que funcionavam também. E sempre depois dessas frustrações, quando eu entendia, vinha uma felicidade tão grande, que me fez ver que era isso que eu queria para mim!\n\n![I hate programming, I hate programming, it works!!! I love programming](https://images-na.ssl-images-amazon.com/images/I/61Tsx5j7pPL._UL1500_.jpg)\n\nOutro grande motivo de eu me interessar pela área de Desenvolvimento foi a comunidade, apesar de sempre ter um ou outro idiota, tem muita gente querendo se ajudar. Isso é algo que eu não vejo tanto em nenhuma outra área!\n\nE o desejo de trabalhar remoto começou quando eu decidi sair da empresa que estava, para iniciar meus projetos paralelos e viajar um pouco pelo mundo. Minha primeira forma de trabalhar remoto, foi criando meus cursos, que uniam o útil ao agradável, eu gosto muito de ensinar e poderia usar disso, para tentar juntar uma graninha para viajar. Fiz até o post [Mudando sua vida através de projetos paralelos](https://willianjusten.com.br/mudando-sua-vida-atraves-de-projetos-paralelos/) explicando esse desejo de mudança.\n\nMuita gente da área vislumbra poder trabalhar remoto, alguns porque preferem ter mais tempo em casa, outros porque acham que assim não vão se chatear com chefes, outros para tentar receber um salário melhor, enfim, são vários os motivos para se querer trabalhar remoto e são outros vários para não se querer também.\n\n### Como foi o seu primeiro trampo (alocado)?\n\nEu costumo dizer que tive 2 primeiros trampos na área. O primeiro de todos foi exatamente quando eu saí da Química, eu tinha voltado para minha cidade natal, mas eu não queria ficar parado, já estava \"velho\" e tinha acabado de desistir de uma faculdade no final, se eu ficasse parado, a família iria encher o saco.\n\nEu fui virar então, um professor de cursinho de informática, ensinando Windows, Office, Linux e Redes/Hardware. Pode parecer um emprego bem ruim (na real era mesmo), mas aprendi muitas coisas com ele. Se hoje dou cursos e tenho didática, é porque observei demais como os meus alunos, desde crianças de 7-8 anos até idosos de 70 anos, iam aprendendo e absorvendo as coisas.\n\nO problema desse emprego é que eu não estava necessariamente aprendendo nada novo da área e isso me chateava um pouco. Então na primeira oportunidade eu fui tentar uma vaga de estágio numa agência web em Petrópolis mesmo. E bom, foi lá que tudo começou.\n\nA vaga era para desenvolvedor web, mas eu não sabia praticamente nada de web! O que eu fiz? Bom, uma semana antes de fazer a entrevista, eu resolvi montar um CV diferente, para tentar chamar a atenção, já que eu não tinha tanto conhecimento em web, mas eu já tinha um pouco de conhecimento de Photoshop e outras linguagens. Eu criei então um CV, basicamente uma imagem, utilizando o formato do Windows 8, aquela interface Metro, com ícones e cores flat.\n\nViram meu CV e resolveram me chamar para uma entrevista, como a agência era pequena, o próprio dono da agência me entrevistou. Ele me perguntou se eu já tinha criado alguns sites, o que eu já sabia. E eu basicamente falei que nunca tinha feito nenhum site na vida, mas que eu já tinha mexido com programação e que poderia aprender qualquer coisa muito rápido, contanto que ele me desse uma chance. Ele era meio carrasco e cético, mas falou que iria me dar uma chance num contrato de estagiário por 1 mês e se ele gostasse, poderia continuar mais tempo.\n\nNa semana seguinte a entrevista, eu comecei nessa agência no mesmo dia que meu mentor e grande amigo, [Guilherme Louro](https://github.com/guilouro). Ele, apesar de já ser bastante experiente, também estava em seu primeiro dia e então sentou do meu lado e fomos batendo papo e organizando as coisas para poder começar a trabalhar. Acho que a cada 5min eu chamava ele para me explicar alguma coisa, me impressiono como ele não me mandou a merda xD\n\nE foi ali que eu comecei a dar meus primeiros passos na web. Eu aprendi muita coisa e muito rápido. Mas a coisa mais importante que aprendi foi:\n\n> Um bom mentor pode te fazer se apaixonar pelo que faz e pode fazer você querer crescer e fazer ainda mais.\n\nEu fiquei nessa empresa por 1 ano e meio, quando decidi que queria tentar alguma coisa na capital (RJ), pois lá tinham mais coisas, melhores salários e trabalhos mais interessantes e foi assim que fui parar na Queremos. O detalhe é que eu descobri essa vaga num tweet do Bernard De Luna.\n\n### Como foi o seu primeiro trampo (remoto)?\n\nBom, essa é uma área relativamente nova para mim. Minha primeira experiência remota foi para uma empresa americana, que eu trabalhei como freela contratado por 3 meses para ajudar a construir um site para um evento. Foi muito legal e muito frustrante ao mesmo tempo. Foi a primeira vez que eu trabalhei tendo que falar numa outra língua que não o Português e bom, eu ficava extremamente nervoso para me comunicar, mas foi aí que eu descobri um primeiro truque.\n\n> Se você não conseguir se comunicar bem falando. Escreva! Você vai pensar 2x no que quer falar e aí vai ser mais fácil de ser entendido.\n\nSempre que tinha alguma coisa que eu não tinha entendido claramente, eu pedia para me mandarem um email e com isso, tudo ficava mais claro e a comunicação fluía. E outra coisa importante também é:\n\n> As pessoas não esperam que você fale como Shakespeare, eles querem saber se você entendeu, suas opiniões e o que você vai fazer.\n\nE bom, o meu primeiro trabalho remoto de forma oficial tem sido o meu atual trabalho na Toptal. Muita gente confunde a [Toptal](http://toptal.com/), achando que ela é só uma rede de freelancers que prestam serviço para outras empresas. Mas não é bem assim não, existem váaarias pessoas que trabalham para manter a plataforma, como desenvolvedores, designers, diretores e outras váaaarias áreas.\n\nFarei depois um post falando do processo da Toptal em si, mas ele é basicamente dividido em: entrevista de inglês/perfil, entrevista+live coding com um desenvolvedor, outro projeto live coding com 2 desenvolvedores, conversa com o VP da empresa. Essa última etapa eu fiz na estrada, enquanto estava viajando pela Irlanda, foi bastante engraçado que parei na primeira cidadezinha que tinha, não devia ter nem 200 habitantes ali.\n\nNa Toptal são vários times, cada um é responsável por algum pedaço da plataforma e/ou produtos internos. Nos comunicamos pelo Slack o dia todo, fazemos bastante pair programming usando o Screenhero ou qualquer outro app que compartilhe tela, temos daily como qualquer equipe, retrospectivas e updates semanais da empresa como um todo. Utilizamos o Gìthub para versionar nosso código e possuímos um processo de code review muito legal, onde todos tentam ajudar para ter o melhor código entregue no final.\n\nPor mais que estejamos em todos os lugares do mundo, a gente tá sempre perto devido aos canais de comunicação e é bastante divertido saber onde cada um está, a Toptal influencia bastante a galera viajar, ir a eventos e etc. Abaixo segue uma foto de uma Daily do time:\n\n![Foto da Equipe com 14 pessoas numa videoconferência](https://willianjusten.com.br/assets/img/external/team-toptal.jpeg)\n\nE segue aqui um belo print que um amigo do time resolveu fazer, quando eu estava trabalhando sentado numa cadeirinha com as montanhas da Austria no fundo...\n\n![Uma foto minha com um amigo dizendo \"That's what I call I participate on daily calls from anywhere\"](https://willianjusten.com.br/assets/img/external/anywhere.png)\n\n### Quais são as skills de quem trabalha nesta área?\n\nEu poderia falar uma lista imensa de tecnologias e coisas que saem a cada segundo, mas não é bem isso que se é preciso. O importante está nas *soft skills*, é ter vontade de aprender, não ter medo de errar ou não saber algo, ter paciência e disciplina.\n\nPara ser um desenvolvedor você precisa se acostumar a se frustrar bastante até conseguir algo, mas a consquista final vale por toda a frustração. Mas calma, não precisa achar que ser desenvolvedor é um sofrimento sem fim, muito pelo contrário, essa busca por entender as coisas e por fazer funcionar, te molda e te melhora a cada segundo, por isso é bom ter paciência e dedicação.\n\nPara quem deseja trabalhar remoto, o mais importante de tudo é **disciplina** e **comunicação**. Trabalhar de casa ou onde for não é uma tarefa fácil, você possui muito mais coisas que podem te atrapalhar e te tirar o foco. E claro, sua mentalidade não pode mudar, trabalhar remoto não significa que você vai poder dormir até tarde, ficar só viajando e jogando videogame. Você precisa criar seus horários, precisa de um espaço que consiga trabalhar adequadamente e comunicar qualquer coisa aos seus parceiros. Se você tiver algum problema/dificuldade, seja rápido e avise, assim o time pode te ajudar com isso. Se você não falar, ninguém terá como descobrir e isso é altamente prejudicial.\n\n### Quais são os principais desafios da área?\n\nO primeiro grande desafio é saber gerenciar seu tempo! E digo isso não só para quem trabalha remoto, mas para quem trabalha alocado também. Nossa área está em constante evolução e precisamos estar sempre estudando e nos atualizando (não, não estou falando para seguir a modinha do momento). A procrastinação é um problema grave e para isso existem várias formas que você pode fazer para tentar diminuir isso, escrevi um [post bem antigo](https://willianjusten.com.br/tecnicas-de-aprendizado/) sobre isso aliás.\n\nE aliado a um bom gerenciamento do tempo, vem a disciplina, um desenvolvedor remoto precisa manter essa disciplina, por mais que tenham distrações, focar no que é importante e necessário, para então poder fazer as outras coisas que desejar.\n\n### Quais são as principais recompensas da área?\n\nA primeira coisa que eu destaco como uma recompensa é a **comunidade**, temos uma área muito legal, que tá sempre se ajudando e criando coisas novas todos os dias.\n\nA outra são as oportunidades de trabalho, existem em todos os cantos e com salários muito bons, seja para trabalhar no Brasil como fora dele.\n\nE focando no trabalho remoto, as pessoas costumam dizer que só isso já é uma recompensa. E bem, é uma recompensa e tanto. Você consegue ter uma melhor qualidade de vida, economizar tempo não fazendo deslocamento (pense que uma pessoa pode perder 4h indo e vindo do trabalho), estar mais perto da família, viajar com mais frequência e trabalhar de onde quiser, enfim, são várias vantagens.\n\n### Você pensa em mudar de área?\n\nNossa área é tão ampla e tão legal, que não posso dizer que não posso estar fazendo uma outra coisa no futuro. Eu confesso que o sonho de criança/adolescente de ser um Desenvolvedor de Games ainda é bem grande, então, quem sabe um dia? Mas hoje, eu diria que estou bem feliz com o que eu faço.\n\n### Por que alguém deveria se tornar um(a) desenvolvedor(a) remoto?\n\nSe você é uma pessoa disciplinada, que tem um lado auto-didata forte e tem desejo de estar um pouco mais livre de escritórios e montar seu próprio tempo, o trabalho remoto é perfeito para você.\n\nMas uma dica que acho muito importante é, o trabalho remoto não foi feito para quem está começando e não é para qualquer um, pode frustrar e prejudicar mais do que ajudar. Eu digo isso porque é muito importante que no início você tenha contato com pessoas da área que poderão te orientar e ajudar, além de entender como são as dinâmicas de trabalho. Só assim você estará apto para adquirir mais disciplina e enfrentar o trabalho remoto, que como dito antes, tem muitas vantagens porém desafios bem grandes também.\n" }, { "path": "posts/minhas-experiencias-com-trabalho-remoto-em-ti.md", "content": "---\nlayout: post\ndate: 2018-11-19T06:13:33.000Z\ntitle: Minhas experiências com Trabalho Remoto em TI\ndescription: Após mais de 2 anos trabalhando remoto, venho compartilhar algumas\n das minhas experiências e também responder muitas perguntas\nmain-class: dev\ntags:\n - experiencia\n - dicas\n - lifestyle\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Índice\n\n- [Introdução](#introducão)\n- [Do alocado ao remoto, minha breve história](#do-alocado-ao-remoto-minha-breve-história)\n- [Minha rotina de trabalho remoto](#minha-rotina-de-trabalho-remoto)\n- [Você está preparado para a vida de Remoto?](#voce-esta-preparado-para-a-vida-de-remoto)\n - [Experiência](#experiência)\n - [Disciplina](#disciplina)\n - [Comunicação](#comunicacão)\n - [Local de trabalho e equipamentos](#local-de-trabalho-e-equipamentos)\n - [Personalidade](#personalidade)\n- [Perguntas e Respostas](#perguntas-e-respostas)\n - [Perguntas sobre trabalho remoto](#perguntas-sobre-trabalho-remoto)\n - [Qual a vantagem e desvantagem de se trabalhar remotamente? Qual a maior dificuldade que você encontrou nesse tipo de trabalho?](#qual-a-vantagem-e-desvantagem-de-se-trabalhar-remotamente-qual-a-maior-dificuldade-que-voce-encontrou-nesse-tipo-de-trabalho)\n - [Como são os projetos que você pega sendo do core team da Toptal e qual a diferença dos projetos de quem é freelancer?](#como-são-os-projetos-que-voce-pega-sendo-do-core-team-da-toptal-e-qual-a-diferenca-dos-projetos-de-quem-é-freelancer)\n - [Quais ferramentas utiliza para medir a sua produtividade?](#quais-ferramentas-utiliza-para-medir-a-sua-produtividade)\n - [Quais ferramentas utiliza para se organizar? E no trabalho?](#quais-ferramentas-utiliza-para-se-organizar-e-no-trabalho)\n - [Até hoje só ouvi falar sobre ferramentas de pareamento remoto mas nunca vi na prática. Quais são?](#ate-hoje-so-ouvi-falar-sobre-ferramentas-de-pareamento-remoto-mas-nunca-vi-na-pratica-quais-sao)\n - [Qual stack você usa na Toptal?](#qual-stack-voce-usa-na-toptal)\n - [Como você recebe seu pagamento? Existe CLT ou só PJ?](#como-voce-recebe-seu-pagamento-existe-clt-ou-so-pj)\n - [Como manter-se animado a programar em um trabalho remoto?](#como-manter-se-animado-a-programar-em-um-trabalho-remoto)\n - [Iniciei ontem a trabalhar remotamente, fico receoso de não estar 100% do tempo à disposição. Como dizer não?](#iniciei-ontem-a-trabalhar-remotamente-fico-receoso-de-nao-estar-100-do-tempo-a-disposicão-como-dizer-nao)\n - [Como um iniciante em programação pode se organizar para adquirir conhecimento e conseguir trabalhar remoto?](#como-um-iniciante-em-programacão-pode-se-organizar-para-adquirir-conhecimento-e-conseguir-trabalhar-remoto)\n - [Qual a média de idade dos desenvolvedores fora do Brasil? Desenvolvedores mais velhos tem espaço na Europa?](#qual-a-media-de-idade-dos-desenvolvedores-fora-do-brasil-desenvolvedores-mais-velhos-tem-espaco-na-europa)\n - [No seu primeiro trabalho em inglês, como você julga seu nível de inglês pra falar com os colegas de trabalho? E para o exterior, como é?](#no-seu-primeiro-trabalho-em-ingles-como-voce-julga-seu-nivel-de-ingles-pra-falar-com-os-colegas-de-trabalho-e-para-o-exterior-como-e)\n - [Perguntas sobre viagens e trabalho](#perguntas-sobre-viagens-e-trabalho)\n - [Você gasta bastante dinheiro para viajar? Como faz com hospedagem?](#voce-gasta-bastante-dinheiro-para-viajar-como-faz-com-hospedagem)\n - [Como você consegue trabalhar quando viaja?](#como-voce-consegue-trabalhar-quando-viaja)\n - [Como você tem achado os locais para trampar? Existe algum app que o ajuda nesta tarefa?](#como-voce-tem-achado-os-locais-para-trampar-existe-algum-app-que-o-ajuda-nesta-tarefa)\n - [Gostaria de saber como a mudança de lugares afeta sua rotina de produtividade e concentração.](#gostaria-de-saber-como-a-mudanca-de-lugares-afeta-sua-rotina-de-produtividade-e-concentracão)\n - [Como você cria seu roteiro para viagens? Utiliza algum app?](#como-voce-cria-seu-roteiro-para-viagens-utiliza-algum-app)\n- [Conclusão](#conclusao)\n\n## Introdução\n\nFala pessoal! Primeiro de tudo, mil desculpas, mas o post é imenso! Foram várias perguntas e detalhes, então não teve jeito. Poderia ter separado, mas acho que fica melhor deixar tudo junto mesmo.\n\nEu já escrevi uns posts na série [Trabalhar no exterior, remoto, viagens, etc](https://willianjusten.com.br/series/#trabalhar-no-exterior-remoto-viagens-etc), mas nenhum falando especificamente sobre trabalho remoto ainda, pois eu estava querendo pegar o maior número de perguntas e também me sentir confortável para ter experiência para falar. Hoje já tenho mais de 2 anos trabalhando remoto, então acho que já dá né? xD\n\nO post vai ser composto por partes onde falarei sobre minhas experiências e também para responder as diversas perguntas que a galera me fez, seja no meu [Twitter](https://twitter.com/Willian_justen), no [Slack dos meus cursos](https://bit.ly/slack-will) e também tinha liberado um [Typeform](https://willianjusten.typeform.com/to/MtDdfi) para fazerem perguntas.\n\nEnquanto vou escrevendo, vou ouvindo uma banda chamada [Zola Blood](https://open.spotify.com/artist/3oxkIoEAyXXQlLTZXlffLJ?si=edMwa_3oQV2r-geAzntcdw), não saberia dizer o gênero deles, mas é um som que mistura um pouco de eletrônico, ambiente e é uma maravilha para concentrar e escrever =D\n\n## Do alocado ao remoto, minha breve história\n\nEu tenho [um post](https://willianjusten.com.br/minha-trajetoria-ate-ser-desenvolvedor/) onde falo toda minha trajetória, então se quiser algo mais completo, aconselho a dar uma lidinha lá. Aqui eu vou só me atentar para a parte da transição alocado/remoto, mesmo assim vai ser grandinho, desculpa =x\n\nComo tudo deve ser, eu comecei trabalhando alocado (falarei porque acho esse o certo depois), trabalhei em empresas da minha cidade Petrópolis, mas logo se fez necessário ir para empresas na capital (Rio de Janeiro). Para quem não sabe, a distância é de cerca de 1:30h de ônibus, mas que dependendo do trânsito pode demorar 4h!\n\nA primeira empresa que eu trabalhei no Rio foi a [Queremos](https://www.queremos.com.br/) e lá mesmo eu já tive **meu primeiro contato com trabalho remoto**. Eu precisava descer todos os dias para o RJ e eu precisava entrar e sair mais cedo, pois eu fazia faculdade. Pense como era desgastante sair de casa as 5:30 da manhã e só retornar 23:30 depois da faculdade. Foi então que eu conversei com eles e consegui a permissão para trabalhar alguns dias de casa, isso era um alívio, pois não precisava acordar mais as 4:30 da manhã.\n\nDepois eu fui trabalhar na [Globo.com](https://www.globo.com/) e lá não havia possibilidade de trabalhar remoto, então era muito complicado morar longe e trabalhar lá, foi aí que resolvi me mudar para o Rio, mesmo assim, o local onde fica a Globo possui um **trânsito insuportável**!\n\nAcho que a maioria tem **desejo de trabalhar para empresas de fora** e comigo não era diferente, e por isso eu resolvi mudar para a [HUGE](http://hugeinc.com/), que é uma agência que já trabalhou com empresas como Google, Apple e outras gigantes. Outra vantagem de ir para lá é que eu iria **morar muito perto do trabalho**. Porém naquela época eu tive uma crise de pânico e uma depressão muito forte, onde eu simplesmente não conseguia sair de casa e ver tanta gente. Eles me permitiram **trabalhar de casa** por um tempo e isso me ajudava bastante.\n\nDurante o meu tempo na Huge eu acabei trabalhando em um projeto que precisava mais de inglês e eu me sentia um burro completo, os americanos falavam super rápido, as vezes as vozes eram super abafadas e eu não entendia absolutamente nada. Isso estava afetando demais minha auto-estima e foi então que eu resolvi juntar todo meu dinheiro e [ir morar e estudar na Irlanda](https://willianjusten.com.br/vindo-morar-e-estudar-na-irlanda/).\n\nJunto com essa minha ida para a Europa, eu também decidi que era isso que eu queria da minha vida.\n\n- Poder morar onde quiser e viajar mais\n- Não me preocupar com trânsito\n- Ter horários mais flexíveis\n- Me isolar em dias ruins de depressão\n- Estar em contato com pessoas de todo o mundo.\n\nE para isso, só tinha uma opção, **trabalhar remoto**.\n\nLá na Irlanda mesmo, um amigo me indicou para a [Toptal](https://www.toptal.com/), eu fiz [o processo](https://willianjusten.com.br/meu-processo-para-a-toptal/), passei e estou na empresa já há 2 anos =)\n\n## Minha rotina de trabalho remoto\n\nComo disse, eu trabalho no core team da [Toptal](https://www.toptal.com/), que é uma empresa que faz a ligação entre empresas e freelancers, o que causa muita confusão quando falo que trabalho na Toptal xD\n\nEu não sou freelancer, sou contratado pela empresa e possuo salário fixo (falarei sobre essa parte um pouquinho mais a frente na parte das perguntas).\n\nDentro da empresa existem vários times para cada parte, eu atualmente trabalho no time responsável pelas páginas públicas da Toptal, ou seja, todas as páginas que as pessoas podem acessar, como home, blog, campanhas, entre outras.\n\nNós trabalhamos com a metodologia [Scrum](https://www.scrum.org/resources/what-is-scrum) e o time é composto por:\n\n- 4 Brasileiros (GMT-3)\n- 2 Ucranianos (GMT+2)\n- 1 Russo (GMT+3)\n- 1 Croata (GMT+1)\n- 1 Britânico (GMT)\n- 1 Espanhol (GMT+1)\n\nEntão, como você pode ver pelos fuso horários, minha diferença máxima é de 5/6h de diferença para o leste europeu. Pensando nisso, nós definimos que a daily é as 10:30am (GMT-3) para os Brasileiros, o que dá 4:30pm para o Russo, ou seja, ninguém precisa acordar extremamente cedo ou dormir tarde, é um horário que acomoda a todos. Mas já teve um momento que tínhamos um americano de Chicago (GMT-6) no time e ele acabava precisando acordar bem cedo se quisesse conversar com o povo do leste europeu.\n\nAlém da daily, também possuímos algumas reuniões pré-definidas que são:\n\n- `Sprint Grooming`: essa reunião é somente para alguns, em geral, escolhemos randomicamente 2 devs para participar mais o Scrum Master e o Project Manager. Ela serve para irmos definindo próximas tarefas a serem feitas.\n- `Sprint Planning`: acontece no início de cada Sprint, ou seja, a cada 15 dias. E é onde definimos quais serão as tarefas escolhidas para aquela Sprint em questão.\n- `Sprint Review`: sempre ao final do Sprint para vermos como foi nossa produtividade e outras métricas.\n- `Retrospective`: para discutir coisas que foram boas no Sprint, coisas que não tanto e a partir disso, ver o que pode ser feito para melhorar esses problemas.\n- `All-Hands`: é uma reunião da empresa inteira, onde o dono da Toptal (Taso Du Val) ou alguém de cargo mais alto fala sobre como a empresa está indo, decisões e outras informações em geral.\n\nE além de todas essas reuniões, ainda existem pequenas reuniões para sincronizar informações entre os times que estivermos trabalhando mais próximos, seções de pair programming com pessoas do time para ajudar em algo ou ser ajudado, enfim, são muitos compromissos! Como falei, a comunicação é uma grande parte do trabalho!\n\nBaseado então nesses horários/dias, eu organizo meu dia, que não é lá tão agitado/diferente de uma pessoa que trabalhasse num escritório. Eu odeio acordar cedo, então acordo lá pelas 10:15 e as vezes faço a reunião do celular mesmo e na cama, não precisamos deixar a câmera ativa sempre, então é bem okay isso. Logo depois da daily, eu levanto e pego algo para comer ou minha mãe/namorada me dão algo (tá vendo, tem suas vantagens de não morar sozinho também =p). Pela manhã eu costumo revisar todos os Pull Requests abertos, pois assim não preciso pensar tanto (não funciono de manhã, já falei) e ajudo bastante, reviews são mais essenciais que seu código! Depois disso eu almoço (sempre aviso quando vou ficar ausente) e aí na volta trabalho até umas 18-19h.\n\n## Você está preparado para a vida de Remoto?\n\nAntes de começar a responder as perguntas de todos, resolvi separar esse assunto logo no topo, pois ainda mais importante que saber detalhes sobre o trabalho remoto é saber se você de fato se adequa a ele. Muita gente vê o trabalho remoto com a melhor coisa do mundo e realmente tem vários benefícios, mas além de não ser perfeito, não é para todo mundo, existem muitas coisas no meio disso e eu vou tentar passar um pouco do que vejo.\n\n### Experiência\n\nAntes de tudo, eu vou bater nesse ponto, muitas pessoas que ainda estão iniciando na carreira já querem partir direto para o trabalho remoto e eu acho isso **totalmente contraprodutivo**.\n\nPara trabalhar remoto, você precisa de umas características que acaba ganhando trabalhando por um tempo alocado, então pular essa etapa é bastante prejudicial.\n\nQuando você trabalha remoto, por mais que você trabalhe em equipe e tenha sempre uma boa comunicação, vai ser importante que você \"se vire sozinho\" em alguns momentos, afinal de contas, podem haver grandes diferenças de horário e bom, não podemos parar alguém o tempo todo e parear.\n\nAproveite o máximo enquanto trabalhar alocado, fique perto dos melhores e aprenda com eles, isso vai ser de extrema importância no seu futuro como remoto.\n\n### Disciplina\n\nEsse seria o segundo ponto mais importante no trabalho remoto, você pode chegar e falar:\n\n> Ah, mas eu sou muito responsável, isso aí eu tiro de letra.\n\nMas é complicado dizer isso quando não se está realmente dentro de casa. Se você é uma pessoa que tem dificuldade de focar sua atenção e acaba fazendo outras coisas, isso vai ser bem complicado.\n\nSe você morar com mãe/parceiro(a), um diálogo assim é super comum:\n\n> **Parceiro(a)/Mãe** - Vai ali no mercado para mim rapidinho?
    > **Você** - Não posso, estou trabalhando.
    > **Parceiro(a)/Mãe** - É rapidinho pow, preciso de massa de tomate para fazer o almoço.
    > **Você** - Já disse, estou trabalhando, não posso.
    > **Parceiro(a)/Mãe** - Você fica sentado aí o dia inteiro, tinha que ajudar mais.\n\nÉ claro que com um parceiro(a)/mãe mais pacientes e com conversa, tudo se resolve, mas esteja preparado para essas distrações do dia a dia.\n\nA outra parte da disciplina é fazer seus horários, pensou que só por ser remoto você iria acordar meio-dia e trabalhar só até as 16h? Nem todo trabalho remoto é super flexível, isso vai de empresa para empresa, algumas inclusive te obrigam a estar online a partir das 9h e sair somente as 18h, fique ciente disso. Mas se a empresa for flexível, crie seus horários, assim você vai saber que naquele período você precisa focar e trabalhar. Depois você joga videogame.\n\n### Comunicação\n\nCostumo dizer que quando você é programador, 10% do tempo é você codando, todo o resto é se comunicando. E isso se torna ainda mais expressivo quando se está trabalhando remoto.\n\nAs pessoas precisam saber o que você está fazendo e você também precisa saber o que os outros fazendo. Se alguém precisar de ajuda e também as direções que a empresa e seu time está tomando diante das situações.\n\nEssa é outra característica que você aprende muito trabalhando alocado, você aprende a explicar melhor seus pensamentos e também a entender o que os outros querem passar. Quando você estiver remoto, vai ser fundamental que sua [comunicação seja assertiva](https://www.jrmcoaching.com.br/blog/o-que-e-comunicacao-assertiva-e-como-ela-funciona/). Inclusive, preciso agradecer a Globo.com, pois fiz um curso incrível sobre comunicação assertiva lá dentro que me ajudou demais!\n\n### Local de trabalho e equipamentos\n\n> Ué? Como assim? Por que se preocupar com local de trabalho se vai ser remoto?\n\nÉ de extrema importância que você defina um local onde irá trabalhar, mesmo que seja em seu quarto, tente criar uma separação entre um e outro, e evite deixar coisas que possam roubar sua atenção enquanto trabalha.\n\nOutra coisa importante é que você tenha um bom equipamento para trabalhar, isso inclui uma boa mesa, cadeira, monitor/computador. Pense que esse canto será a sua empresa e por isso, você precisa estar confortável e com equipamentos que permitam ter uma boa performance. Não estou falando que você precisa gastar milhões, mas trabalhar numa cadeira de plástico vai te trazer sérias consequências depois. Eu escrevi um [post sobre meu setup](https://willianjusten.com.br/meu-setup/), eu fui adquirindo as coisas aos pouquinhos e me sinto muito hoje.\n\nE ah, já ia me esquecendo, mas você obviamente precisa ter uma internet rápida o suficiente para fazer reuniões com várias pessoas ao mesmo tempo e para parear sem que fique travando o tempo todo.\n\n### Personalidade\n\nPor mais que você ache trabalho remoto o seu sonho, você realmente se encaixa nisso? Tem pessoas que conseguem trabalhar em casa tranquilamente, mas existem outras que precisam ter contato com outros profissionais, precisam conversar, trocar ideias, até mesmo para o trabalho fluir bem. Se você precisa desse contato, talvez o remoto não seja para você.\n\n## Perguntas e Respostas\n\nAgora vem a parte interessante, são váaaaarias perguntas! Como eu também viajo bastante, vou separar em:\n\n- Perguntas sobre trabalho remoto\n- Perguntas sobre viagens e trabalho\n\nMas, se você tiver outras dúvidas, não deixe de postar nos comentários!\n\n### Perguntas sobre trabalho remoto\n\n#### Qual a vantagem e desvantagem de se trabalhar remotamente? Qual a maior dificuldade que você encontrou nesse tipo de trabalho?\n\nBom, falei um pouco disso antes, mas eu diria que a flexibilidade de poder escolher onde morar e trabalhar enquanto viaja são as que mais me atraem. Uma grande desvantagem é ter um contato menor com outros devs, por mais que você faça pair programming, ter alguém do lado para trocar ideias é algo que sinto muita falta.\n\n#### Como são os projetos que você pega sendo do core team da Toptal e qual a diferença dos projetos de quem é freelancer?\n\nComo eu trabalho no time de páginas públicas, eu basicamente ajudo na criação do CMS para os editores poderem criar as páginas e posts do blog. Já quem trabalha como freelancer pode trabalhar com qualquer coisa, isso vai depender de para qual cliente ele vai trabalhar.\n\n#### Quais ferramentas utiliza para medir a sua produtividade?\n\nNa Toptal nós não utilizamos nenhuma ferramenta para medir produtividade para saber \"Fulano trabalhou 5h no dia tal...\", nós achamos que esses valores não condizem com a realidade. Uma pessoa pode trabalhar 2h e fazer muitas coisas, enquanto uma outra pode ficar 12h na frente do computador só enrolando.\n\nComo trabalhamos com Scrum, na hora de fazer a estimativa das tasks, nós definimos Story Points usando o [hatjitsu](https://tools.wmflabs.org/hatjitsu/), onde cada um vota num peso que cada task vai ter. O Scrum Master por sua vez analisa quantos pontos o time está entregando e define quantas tarefas serão feitas no Sprint. E ao final do Sprint ele analisa se produzimos bem ou se fomos abaixo da média.\n\nEu gosto de métricas, então pessoalmente eu utilizo o [Wakatime](https://wakatime.com/), assim consigo ter uma ideia do tempo que estou gastando e até qual linguagem fico mais tempo, é bem legal xD\n\n#### Quais ferramentas utiliza para se organizar? E no trabalho?\n\nNa Toptal nós usamos o [Youtrack](https://www.jetbrains.com/youtrack/) que é um quadro para organizar as tarefas no nosso Scrum e aí temos as colunas (ToDo, Research, Doing, To Review, Done).\n\nTodas as nossas reuniões são criadas no Google Calendar, assim como apresentações/assets ficam no Google Drive.\n\nPara os layouts, nós recebemos versões no [InVision](https://www.invisionapp.com/) e no [Sketch](https://www.sketchapp.com/).\n\nUtilizamos o [Github](https://github.com/toptal) para todo o nosso código e o [Jenkins](https://jenkins.io/) para rodar nossos testes.\n\nNossa comunicação via texto é toda usando o [Slack](https://slack.com/) ou o Gmail (mas esse é utilizado mais para reports semanais e coisas mais alto nível).\n\nPessoalmente eu utilizo o [Wunderlist](https://wunderlist.com/) para criar listas de coisas a serem feitas e uso bastante papel e caneta, sempre tenho folhas ao meu lado.\n\n#### Até hoje só ouvi falar sobre ferramentas de pareamento remoto mas nunca vi na prática. Quais são?\n\nNa Toptal acabamos utilizando o [Zoom](https://zoom.us/) que nem é bem uma ferramenta para parear, mas como permite acesso a mouse/teclado, acabamos fazendo para isso.\n\nNo VS Code existe um plugin genial que permite isso e funciona muito bem, se chama [Visual Studio Live Share](https://visualstudio.microsoft.com/services/live-share), o único porém é que ambos precisam usar o VS Code e bom, no meu time só tem outra pessoa que usa. O resto usa Vim, RubyMine, Atom...\n\n#### Qual stack você usa na Toptal?\n\nPara cada time podem existir diferentes stacks, tem gente trabalhando com Python, Elixir, Javascript, Ruby e mais outras mil coisas.\n\nEu no caso trabalho com Ruby/Rails no Backend e Javascript/Sass/Slim no Frontend. Sendo que da parte do Javascript, já cheguei a trabalhar com Backbone e um framework próprio, Javascript puro e agora estamos migrando para Typescript puro (nada de Angular, React ou Vue, só Typescript mesmo).\n\n#### Como você recebe seu pagamento? Existe CLT ou só PJ?\n\nEssa é uma das perguntas que mais me fazem! No início da Toptal, eu recebia através de um sistema chamado [Payoneer](https://www.payoneer.com/), que consiste basicamente numa conta no Bank of America e eu tenho um cartão de débito, onde conforme vou usando, vai debitando dessa minha conta. E eu também posso retirar dinheiro no caixa eletrônico, mas preciso pagar várias taxas quanto a isso.\n\nHoje a Toptal tem um sistema interno em parceria com a [Hyperwallet](https://www.hyperwallet.com/), e funciona exatamente como a Payoneer, eu tenho um cartão de débito e conforme vou usando, vai debitando da minha conta.\n\nNão existe CLT no meu caso, já que a empresa não tem base no Brasil e sequer é registrada aqui. Então só existem duas maneiras para receber, sendo pessoa física (com impostos super altos) ou como pessoa jurídica (PJ) onde dependendo do quanto você recebe, existem diversas modalidades para pagar impostos um pouco menores.\n\nEu tenho de confessar, não posso explicar muito dessas coisas, eu sou péssimo com essa parte financeira e por isso tenho um contador para resolver isso para mim. Costumo dizer, é melhor você pagar um pouco e se salvar de problemas do que economizar e no final pagar uma multa horrorosa.\n\n#### Como manter-se animado a programar em um trabalho remoto?\n\nEssa é uma pergunta muito legal! As pessoas acham que trabalhar remoto é a melhor coisa do mundo, mas exatamente por você ter menos contato com as pessoas e trabalhar de casa, o desânimo/depressão bate com bastante frequência.\n\nO melhor jeito para aliviar isso, é sair de casa um pouco, mesmo que não seja necessário. Vá trabalhar de um café ou na casa de algum amigo, tente ter mais interações humanas no seu dia e evite rotinas extremamente pesadas, pois depois de um tempo isso pode voltar contra você.\n\nE bom, a grande vantagem de trabalhar remoto é que pode ser de qualquer lugar, aproveite isso, faça viagens, é a melhor atividade para sua mente e corpo possível.\n\n#### Iniciei ontem a trabalhar remotamente, fico receoso de não estar 100% do tempo à disposição. Como dizer não?\n\nTrabalho remoto não significa trabalho escravo, precisa tomar muito cuidado quanto a isso! Muita gente se preocupa em acabar não trabalhando se estiver em casa, mas as vezes acontece o efeito inverso também, onde a pessoa trabalha muito mais que deveria.\n\nDeixe claro os horários que você pode trabalhar e caso alguém te chame fora desse horário, seja direto e avise que fará no seu horário de expediente. Faça exceções somente se for algo extremamente crítico, como um problema em produção que só você é capaz de resolver. Caso contrário, não permita ser explorado.\n\n#### Como um iniciante em programação pode se organizar para adquirir conhecimento e conseguir trabalhar remoto?\n\nComo falei antes, não recomendo nenhum iniciante para trabalhar remoto, haverão mil barreiras de conhecimento e pode ser algo muito frustrante para quem está começando. Trabalhe alocado, se junte aos melhores, aprenda muito com eles e só tente algo quando estiver de fato bem confiante nisso.\n\n#### É possível conseguir um trabalho remoto apenas com certificações e cursos online, isto é, sem curso superior?\n\nTotalmente possível! Do meu time, acho que só 3 ou 4 possuem ensino superior. Hoje já não é mais obrigatório ter diploma para muitas coisas em nossa área, mas é claro que se você desejar se mudar para algum país, aí o diploma pode ajudar (mas também não é obrigatório em vários lugares).\n\n#### Qual a média de idade dos desenvolvedores fora do Brasil? Desenvolvedores mais velhos tem espaço na Europa?\n\nOlha, essa é uma pergunta bem variável, mas por tudo que vi na Europa, a idade não é um critério para contratar ou não alguém. Eles procuram quem tenha conhecimento no que é pedido, seja você um dev de 20 anos ou um cara de 45. Eu nunca tinha analisado isso, mas então fui olhar e meu time na Toptal tem média de **31 anos** e eu tenho 28 anos =)\n\n#### No seu primeiro trabalho em inglês, como você julga seu nível de inglês pra falar com os colegas de trabalho? E para o exterior, como é?\n\nSendo sincero, até hoje eu acho o meu inglês bem pobre. Eu consigo me comunicar corretamente e entender o que falam. Mas se eu precisar escrever algo bastante técnico e com um vocabulário rico, vou demorar horas e horas e ainda assim vai sair mais ou menos.\n\nE sabe qual o problema disso? Nenhum! O mais importante é que você entenda e seja entendido, nem em português você fala numa língua extremamente culta. Ninguém vai te julgar se você errar alguma concordância. É claro que você precisa ter um inglês razoável, até para não ficar chato ou difícil de te entenderem. Mas é isso, com a prática e tempo, as coisas vão melhorando.\n\nEu escrevi um post [o que é preciso saber para trabalhar no exterior](https://willianjusten.com.br/o-que-preciso-saber-para-trabalhar-no-exterior/), vale uma leitura.\n\n### Perguntas sobre viagens e trabalho\n\n#### Você gasta bastante dinheiro para viajar? Como faz com hospedagem?\n\nEu sou uma pessoa bastante econômica, minha namorada diria pão duro, mas eu não consigo evitar, acho que é até um desafio legal a se fazer.\n\nEu fiz uma [viagem de 50 dias na Espanha](https://willianjusten.com.br/meus-50-dias-na-espanha/) onde eu utilizei caronas através do [BlaBlaCar](https://www.blablacar.com.br/) para me locomover por praticamente todo o país!\n\nPara me hospedar, eu costumo usar o [Airbnb](https://www.airbnb.com.br/c/willianj60?currency=USD), sempre acho lugares bem baratos e um pouco mais confortáveis que Hostels com 20 cabeças no quarto. Como eu preciso trabalhar, é necessário que seja um lugar calmo e com boa internet, por isso o Airbnb é sempre minha principal escolha.\n\nInclusive, se quiser me ajudar, se cadastre com o [meu link](https://www.airbnb.com.br/c/willianj60?currency=USD) e além de ganhar um descontão no seu primeiro uso, você ajuda o amigo aqui <3\n\n#### Como você consegue trabalhar quando viaja?\n\nEu costumo mudar um pouco os meus horários. Normalmente eu acordo tarde, mas quando estou viajando, eu acordo bem cedo e já saio logo para aproveitar a cidade. E aí costumo trabalhar mais pela tarde/noite e claro, se eu tiver reuniões no dia, eu me organizo para já estar num local quieto e com internet para poder fazer a reunião sem problemas. Por isso eu costumo ficar em algum Airbnb central, assim eu posso voltar para casa, fazer minha reunião rapidinho e sair novamente depois.\n\n#### Como você tem achado os locais para trampar? Existe algum app que o ajuda nesta tarefa?\n\nOlha, existe um app chamado [Workfrom](https://workfrom.co/) que ajuda a encontrar alguns coworkings e cafés com boa internet e bom ambiente para trabalhar. Mas sendo muito sincero, ele nem funciona tão bem... Eu costumo andar pela cidade e olhar os lugares, se achar um café maneiro, já paro e fico ali, caso contrário eu volto para o meu Airbnb.\n\n#### É tranquilo encontrar internet boa para trabalhar remoto viajando?\n\nNa Europa tem internet em praticamente qualquer canto e você pode comprar um chip em qualquer lugar e vai ter um 4g perfeito onde quer que esteja e por um preço super honesto. Eu costumo usar a operadora Three (que é Irlandesa) e a Vodafone.\n\nJá na América do Sul, isso é realmente bem tenso. Lembro de no Peru ficar váaarios momentos sem internet e isso é o terror. No Peru eu havia pedido férias, então estava mais tranquilo. Diria que o jeito é analisar para onde vai e se achar que vai ficar sem acesso a internet, tente pedir alguns dias de férias.\n\n#### Gostaria de saber como a mudança de lugares afeta sua rotina de produtividade e concentração.\n\nÉ um ponto bem importante, eu costumo não me mudar com uma frequência muito grande. Se as pessoas falarem que 3 dias são suficientes para cidade X, eu acabo ficando o dobro ou mais, isso me permite olhar tudo com calma e também trabalhar. Afinal de contas, as pessoas passam esses 3 dias fulltime passeando e eu não posso isso, lembrem-se, **disciplina é importante!** Saiba a hora de passear e a hora de trabalhar.\n\n#### Como você cria seu roteiro para viagens? Utiliza algum app?\n\nEu amo ler sobre países e suas culturas, faço isso desde quando me conheço por gente. Sempre tive uma situação financeira super difícil, então eu só ficava na imaginação e com isso, eu acabava \"criando roteiros\" para um futuro. Minha primeira viagem de avião foi com 20 anos e isso para dentro do Brasil, para fora nem tem tanto tempo xD\n\nEntão diria que muitas coisas já foram imaginadas desde novo. O que eu costumo fazer agora é ver ofertas no app do [Melhores Destinos](http://www.melhoresdestinos.com.br/) e aí tendo alguma viagem barata, eu começo a pesquisar mais sobre aquele país/lugar.\n\nCostumo usar o [Google Trips](https://get.google.com/trips/), [Trip Advisor](https://www.tripadvisor.com.br/) e sites de fotografia como o [500px](https://500px.com/) e o [Unsplash](https://unsplash.com/).\n\n## Conclusão\n\nBom galera, essas foram as perguntas que achei mais interessantes e pertinentes, espero que tenha ajudado com alguns detalhes e dicas. E como falei antes, se tiverem mais dúvidas, deixa aí nos comentários, prometo que vou responder todas.\n" }, { "path": "posts/mini-curso-gratuito-de-typescript.md", "content": "---\nlayout: post\ndate: 2020-05-18T13:31:55.000Z\ntitle: Mini Curso gratuito de TypeScript\ndescription: Aprenda o que é TypeScript, como funciona, por que usar e muito mais!\nmain-class: js\ntags:\n - typescript\n - ts\n - curso\n---\n\n## Introdução\n\nFala pessoal! Tive uma conversa com meus alunos no [Slack dos alunos](https://bit.ly/slack-will), onde fiz a seguinte pergunta:\n\n![Fala pessoal, para o próximo curso, o que vocês preferem? TypeScript ou só JS mesmo? Typescript ganhou com 63 votos contra 13.](/assets/img/slack-question.png)\n\nE como podem ver, a maioria votou pelo TypeScript, apesar de ter alguns que votaram para ser somente em JS, alguns desses, falando nos comentários sobre desconhecerem o TypeScript ou alguns certos preconceitos.\n\nPensando nisso, resolvi criar esse mini-curso para poder falar mais um pouco do TS e até tentar desmistificar certas coisas. Só que dessa vez, eu resolvi fazer diferente, ao invés de postar logo tudo de uma vez, eu vou postar **vídeos diários**, as vezes até mais de um, para ir ensinando alguns desses conceitos.\n\nO mini-curso será postado no [meu canal do YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1), e se você não está inscrito lá, aproveita e se inscreve logo, para receber as notificações de quando os vídeos forem lançados, como eu disse, serão vários, então não perde =)\n\n## Playlist dos vídeos\n\nConforme eu for lançando os vídeos, eu vou atualizando esse post, para facilitar que vocês encontrem no blog depois.\n\nEntão, lá vai o primeiro vídeo!\n\n### 01. Introdução ao TypeScript\n\n\n\n### 02. Mitos e Verdades\n\n\n\n### 03. Instalando o compilador e escrevendo primeiro código\n\n\n\n### 04. Criando e configurando o TSConfig\n\n\n\n### 05. Types\n\n\n\n### 06. Type Inference\n\n\n\n### 07. Type Aliases e Union\n\n\n\n### 08. Type Aliases e Intersection\n\n\n\n### 09. Classes\n\n\n\n### 10. Interfaces\n\n\n\n### 11. Type Alias vs. Interfaces\n\n\n\n### 12. Generics\n\n\n\n### 13. Type Utilities\n\n\n\n### 14. Decorators\n\n\n\n## Conclusão\n\nEspero que curtam os vídeos, nosso momento agora é de ficar em casa e estudar o máximo que pudermos =)\n" }, { "path": "posts/mostrando-ultimos-posts-e-videos-no-github-profile.md", "content": "---\nlayout: post\ndate: 2020-08-10T11:44:05.000Z\ntitle: Mostrando últimos posts e vídeos no Github Profile\ndescription: Como utilizar o Github Actions para manter seu profile atualizado e bonito.\nmain-class: misc\ntags:\n - git\n - github\n---\n## Introdução\n\nFala pessoal, mantendo a ideia de ter vídeo, mas também ter post escrito, hoje eu vou falar sobre um vídeo que fiz recentemente que é o [Mostrando últimos posts e vídeos no Github Profile](https://youtu.be/tGYyamj4gTA).\n\nO Github lançou essa atualização deve ter aí, por volta de 1 mês, mas ainda tem muita gente que não sabe como fazer e outros que gostariam de fazer um \"algo a mais\", como, por exemplo, mostrar os últimos posts escritos e coisas do gênero, então vamos aprender como faz isso.\n\n## Versão em vídeo\n\nPara quem quiser assistir a versão em vídeo desse post, segue aí:\n\n\n\n## Sobre o Github Profile\n\nO Github Profile, é aquela caixa de informações que aparece no perfil de algum usuário no Github, abaixo segue um print de como é o meu [perfil no Github](https://github.com/willianjusten).\n\n![Foto da interface do Github com minha foto a esquerda e uma lista de informações a direita.](/assets/img/github-profile.png)\n\nExistem de diferentes formas, algumas super criativas, outras mais simples, segue abaixo uma lista de alguns:\n\n* [@sindresorhus](https://github.com/sindresorhus)\n* [@ABSphreak](https://github.com/ABSphreak)\n* [@AVS1508](https://github.com/AVS1508)\n* [@afc163](https://github.com/afc163)\n\nE se você quiser mais ideias, tem essa [lista cheia de inspirações](https://github.com/coderjojo/creative-profile-readme).\n\n## Criando o repositório e configurando\n\nPara poder criar esse perfil especial, basta que você crie um repositório com o mesmo nome do seu usuário, o meu por exemplo é [willianjusten/willianjusten](https://github.com/willianjusten/willianjusten), e no momento que você estiver criando o repositório, irá aparecer parecido com a imagem abaixo:\n\n![Uma mensagem dizendo que você encontrou um segredo, que o repositório é um perfil especial.](/assets/img/github-profile-2.png)\n\nAgora com o repositório criado, basta montar um arquivo `README.md` com as informações que você desejar, no meu caso, de início ficou:\n\n```md\n### Hello, I'm Willian!\r\n\r\n💻 Software Engineer and Instructor at [Willian Justen Cursos](https://willianjusten.com.br/cursos)
    \r\n🏡 Brazilian, Based in Petrópolis, RJ - but most of the time traveling around the world 🌎\r\n\r\n### You can find me on\r\n\r\n📺 [Youtube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1)
    \r\n🐦 [Twitter](https://twitter.com/Willian_justen)
    \r\n📷 [Unsplash](https://unsplash.com/@willianjusten)
    \r\n⚛️ [My site](https://willianjusten.com.br)
    \r\n\n```\n\n## Criando a Github Action\n\nCom o `README.md` feito acima, nós já teríamos algumas informações para o nosso profile, mas eu queria ir um pouco além e colocar uma lista com meus últimos posts aqui do blog e também os últimos vídeos lá do [meu YouTube](https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1).\n\nPara fazer isso, eu utilizei essa [Github Action](https://github.com/gautamkrishnar/blog-post-workflow), que busca dados baseados em feed RSS. Na documentação ele explica o passo-a-passo e mais alguns detalhes, e no meu ficou assim:\n\n```yml\nname: Latest blog post workflow\r\non:\r\n push:\r\n schedule:\r\n # Runs every hour\r\n - cron: \"0 * * * *\"\r\n\r\njobs:\r\n update-readme-with-blog:\r\n name: Update this repo's README with latest blog posts\r\n runs-on: ubuntu-latest\r\n steps:\r\n - uses: actions/checkout@v2\r\n - uses: gautamkrishnar/blog-post-workflow@master\r\n with:\r\n comment_tag_name: BLOG\r\n feed_list: \"https://willianjusten.com.br/feed.xml\"\r\n\r\n - uses: gautamkrishnar/blog-post-workflow@master\r\n with:\r\n comment_tag_name: YOUTUBE\r\n feed_list: \"https://www.youtube.com/feeds/videos.xml?channel_id=UCa12brLWzCqnxN0KOyjfmJQ\"\n```\n\nAli no `on` eu digo que quero que a action rode em todo `push` e também programo para rodar de hora em hora.\n\nDepois eu defino as 2 `steps` do meu `job` principal, cada uma irá pegar as informações de um local. É importante notar, que eu utilizei o `comment_tag_name`, pois eu vou precisar desses nomes para a próxima etapa.\n\nAli na parte de blog, basta que você passe um link de feed válido, o meu no caso é o [feed.xml](https://willianjusten.com.br/feed.xml). E para o Youtube, é só passar modificando para o id do seu canal.\n\nCom essa configuração feita, nós só precisamos editar o `README.md` para que a action saiba onde inserir os links:\n\n```md\n### 📕 Latest Blog Posts\r\n\r\n\r\n\r\n\r\n### 📺 Latest Videos on YouTube\r\n\r\n\r\n\n```\n\nRepare que eu utilizo a regra de passar `COMMENT_TAG:START` e `COMMENT_TAG:END`, essa `comment_tag` é exatamente a que definimos lá na nossa action.\n\nDepois disso, basta subir no Github e a action irá rodar para você e buscar as informações! =D\n\n## Conclusão\n\nEspero que tenham gostado dessa dica, é bem simples, mas vai permitir que você \"sobressaia\" com seu Github, sem contar que vai ajudar a divulgar alguns dos seus links de uma forma bem simples! =D" }, { "path": "posts/mudando-sua-vida-atraves-de-projetos-paralelos.md", "content": "---\nlayout: post\ndate: 2016-05-19T17:39:52.000Z\ntitle: Mudando sua vida através de projetos paralelos\ndescription: Fica aqui um relato de alguém que mudou sua vida e quer mudar ainda mais.\nmain-class: misc\ntags:\n - dev\n - life\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, quando eu escrevi o post [O que ninguém diz para os iniciantes](https://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/), eu dizia que aquele talvez fosse o post que mais me emocionava. Mas eu acho que estou ficando muito molenga, porque esse post vai ser mais um que vou me emocionar enquanto escrevo.\n\nPara não perder o costume, a playlist que estou escutando hoje é uma de minha autoria e especial para esse post, que é [Side Projects](https://open.spotify.com/user/willianjusten/playlist/031nQBF66JwosHhCH9Degg). Na playlist você vai encontrar, em sua maioria, bandas indies e desconhecidas (sim, ouço muita coisa desconhecida), mas que você talvez curta =)\n\nEsse post deve acabar ficando um pouquinho grande e por isso, vou separá-lo em alguns tópicos principais. Que serão:\n\n- [Um mergulho na minha história](#historia)\n- [Meus cursos](#meus-cursos)\n- [Novos rumos](#novos-rumos)\n- [Novos projetos](#novos-projetos)\n- [Conclusão](#conclusao)\n\nBom, sem mais delongas, vamos ao post! Prepara um cafézinho que o post vai ser um pouquinho grande, mas lê até o final please, não sou eu quem está pedindo, é esse lindo gatinho.\n\n![Um gatinho com olhinhos de pedindo alguma coisa](/assets/img/side-projects/cat.jpg)\n\n

    Um mergulho na minha história

    \n\nQuando eu lancei o meu blog, há mais ou menos 1 ano e meio atrás, eu fiz uma [pequena apresentação sobre mim](https://willianjusten.com.br/making-of-parte-1/), falando que passei por outra área antes de chegar de fato a programação. Mas vou completar essa história com mais alguns pedacinhos. Eu sempre gosto de saber a experiência de vida das pessoas, o que fizeram antes, quais suas escolhas para tal, então por que eu mesmo não fazer né?\n\nBom, eu como todo nerd/geek sempre fui apaixonado por jogos, como eles funcionavam, a lógica e a física me impressionavam. E por causa disso, lá pelos idos de 2000, acabei conhecendo uma parada chamada [Rpg Maker](http://www.rpgmakerweb.com/), era uma engine beeeem tosca, mas que te permitia criar joguinhos de RPG com interface gráfica e alguns pequenos detalhes de lógica todo fundamentado em condicionais, ali deve ter sido meu \"primeiro contato\" com \"programação\". Criei vários joguinhos com meus primos, me divertia muito.\n\nAquele foi meu primeiro contato, mas depois passei a ser só um player normal. Comecei a me apaixonar por Química, porque ela me permitia entender como as coisas funcionavam, sim, eu sempre fui aquele que futucava tudo para entender. E então eu fiz um curso técnico em Química e logo após, entrei para uma faculdade de Química muito boa.\n\nNaquela época eu jogava um MMORPG chamado [World of Warcraft](http://us.battle.net/wow/pt/), mas jogava no servidor oficial da Blizzard mesmo. Mal entrei na faculdade e conheci uns amigos que jogavam em um servidor pirata chamado [Mod World](https://www.youtube.com/watch?v=RHNkvHmh8Ac). Fiquei impressionado com aquilo, para as pessoas que conhecem o jogo, sabem que ele é gigantesco, fiquei curioso como as pessoas conseguiram fazer o jogo funcionar num servidor não oficial e ainda chamar tantas outras pessoas para jogar. Resolvi jogar nesse servidor pirata para conhecer e também porque era mais divertido jogar com meus amigos de faculdade.\n\nAo mesmo tempo, na Química eu estava começando a conhecer o pessoal do Laboratório de Química Computacional, eles precisavam de alguém que sabia mexer com Linux, que gostasse de Química e quisesse aprender mais sobre modelagem 3d. Na hora eu me ofereci e acabei ganhando uma bolsa de iniciação científica. Comecei a trabalhar bastante com computação desde então, eu aprendi a mexer em clusters (mas antes eu quase ferrei um =x), aprendi Fortran, Matriz Z, OpenGL e um pouquinho de C/C++.\n\nE eis que o inesperado aconteceu, infelizmente o fundador do servidor de WoW havia falecido de um infarto fulminante e pediram então se alguém se voluntariava a tentar tocar o barco no lugar dele, só enquanto as coisas se ajustavam. Como eu sou maluco, me ofereci. A questão é que eu num tinha a mínima ideia de como era gerenciar um servidor de um jogo, ainda mais um tão grande e com tantas coisas.\n\nA primeira merda que deu, foi que a máquina atual que ficava o jogo era muito cara e sem o fundador, não teríamos como pagar. Então me foi encubida a tarefa de escolher um novo lugar para hospedar o jogo. E vocês acham que eu sabia como escolher? Eu não tinha a mínima ideia! Mas nosso amigo Google é realmente um companheiro, bastou algumas pesquisas, falar com as pessoas certas e nos fóruns corretos e descobri qual seria a melhor configuração. Depois disso, ainda precisei aprender como fazer tudo rodar, conectar o banco de dados, nossa, foram alguns dias intensos. Faltei aula a semana toda só para me dedicar a isso e no final deu tudo certo! Ver a galera gritando nos canais meu nome e agradecendo, foi demais, uma das melhores sensações que eu já tinha tido, eu finalmente tinha sido útil! Foi nesse mesmo servidor que eu fiz meu melhor amigo até hoje, um gaúcho chamado Leonardo Silva, conheci uma guria que namorei por 5 anos e fiz outros grandes amigos até da nossa área como o Yuri Piratello, que sempre me ajuda em umas dúvidas idiotas.\n\nSó que fazer faculdade, iniciação científica e manter o servidor estava ficando muito difícil e eu tive que desistir desse que foi meu **primeiro projeto paralelo**... Passei mais um ano arrastado na faculdade e decidi que não era mais isso que eu queria, eu gostava mesmo era de computação, esse negócio de fórmulas de Físico Química estava chato demais. Larguei a faculdade prestes a terminar e fiz minha **primeira grande mudança**, voltar para minha cidade natal e começar um curso de TI!\n\nQuando eu voltei para minha cidade, eu precisava arrumar um emprego, porque não tinha como minha mãe ficar me sustentando. E o meu primeiro serviço na área foi como professor num cursinho de informática, isso mesmo, eu ensinava Office, Linux e Hardware... Na faculdade, como eu já sabia um pouquinho mais dos assuntos, passei quase o curso todo auxiliando meus amigos, cheguei até dar aula de programação para um grupinho. Um amigo, Felipe Borde, sempre falava que eu deveria dar aula, que eu explicava muito bem. Eu não sabia o que isso iria virar né...\n\nDentro da faculdade de TI, eu resolvi criar esse blog, meu **segundo projeto paralelo** de grande importância. Meu amigo [Guilherme Louro](http://guilhermelouro.com.br/) ficava me sacaneando para eu criar logo um site e foi assim que eu criei. Nesse blog, eu me dediquei a sempre passar conteúdo que eu achava importante e também para eu fixar melhor algum assunto. Foi através desse blog que eu comecei a ficar mais ativo na comunidade, acabei conhecendo várias e várias pessoas da área, comecei a palestrar, fui trabalhar na [globo.com](http://www.globo.com/) e depois na [HUGE](http://www.hugeinc.com/).\n\nE agora, eu diria que comecei meu grande **terceiro projeto paralelo**, que é a criação dos meus cursos. Hoje completam 2 meses que lancei meu curso sobre criação de sites estáticos com Jekyll, logo depois criei um [curso sobre Git e Github](https://www.udemy.com/git-e-github-para-iniciantes/) e agora estou fazendo a [pré-venda do meu curso de SVG - update: já lançado no YouTube](https://www.youtube.com/playlist?list=PLlAbYrWSYTiOufRJOeP73o4GR9N1afQdP).\n\nIsso é um pouquinho da minha história, sempre fui meio maluco de meter as caras, mudei bastante através dos meus projetos paralelos e continuo mudando. E reparei que a cada projeto paralelo, uma grande mudança veio junto.\n\n

    Meus cursos

    \n\nContinuando a falar dos cursos que já lancei, queria agradecer imensamente a todos que já se inscreveram, que compartilharam e principalmente, a todos aqueles que já assistiram e finalizaram o curso, vocês são demais!\n\nVou passar algumas estátisticas para vocês entenderem o quanto estou feliz e também porque quero sempre deixar tudo transparente para vocês, nessa nova etapa.\n\nJá foram **1957 alunos inscritos!** (Editado)\n\nSegue o gráfico referente ao [curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/)\n\n![Gráfico de estatística para o Jekyll](/assets/img/side-projects/jekyll-stats.png)\n\nComo podemos ver, foram **mais de 350 horas assistidas**, aproximadamente **7500 vídeos tocados** e cerca de 40% das pessoas que iniciaram o curso, finalizaram ele. Isso é incrível!! <3\n\nE para o [curso de Git e Github](https://www.udemy.com/git-e-github-para-iniciantes/) os números são ainda mais surpreendentes para mim.\n\n![Gráfico de estatística para o git](/assets/img/side-projects/github-stats.png)\n\nForam **mais de 600 horas assistidas**, com mais de **14 mil vídeos tocados**, sendo que mais de 50% alunos finalizaram o curso! Ou seja, mais de **800 pessoas** melhoraram seu conhecimento em Git, uma ferramenta que é fundamental para o nosso dia a dia como programador.\n\n

    Novos Rumos

    \n\nE assim como no meu primeiro projeto paralelo teve uma grande mudança, que foi sair da Química para TI. No meu segundo projeto paralelo também tiveram as mudanças de empresas e conhecimento. Para fechar meu terceiro projeto paralelo, eu tinha que ter uma grande mudança também!\n\nAnuncio aqui, que saí da HUGE para me dedicar totalmente aos meus projetos paralelos durante um tempo e também um sonho que tenho há muito tempo, que é viajar pelo mundo, conhecendo novas culturas, novas pessoas e claro, vendo como são os programadores em cada lugarzinho. Sempre me imaginei como na cena abaixo:\n\n![Um homem sentado a beira de um lago com várias montanhas com picos congelados a frente](/assets/img/side-projects/digital-nomad.jpg)\n\nE para conseguir essa grande mudança, eu venho me planejando já há algum tempinho. Juntei um dinheiro enquanto estive nas empresas grandes que passei e agora comecei com essa iniciativa dos cursos online. Fiz cursos gratuitos para mostrar as pessoas como seria meu conteúdo/didática e então depois lancei cursos pagos, que também tiveram ótima recepção.\n\n

    Novos Projetos

    \n\nAlém desse novo rumo que estarei tomando para minha vida, também pretendo criar novos projetos, tudo sempre em prol de ajudar a comunidade e retornar a ajuda que vocês me derem para esse meu sonho. Pretendo sim criar novos cursos de diversos assuntos que vocês tem me pedido e algumas coisas bastante novas que nunca vi sendo feito por aqui. Espero que gostem das surpresas que tem por vir =D\n\n

    Conclusão

    \n\nBom galera, é isso aí, a ideia de criar esse post era passar um pouquinho da minha vida, como ela foi mudando de acordo com meus projetos paralelos. Mostrar para vocês que suas vidas podem mudar e muito fora do seu trabalho principal. Se você faz administração, se você faz química, seja lá o que for, busque o que você ama, mesmo que possa parecer a pior escolha naquele momento, tudo que você faz por amor acaba sendo mais reconfortante e mais valoroso no final.\n\nVocê não tem como saber onde os seus projetos paralelos vão te levar. Quando você começa a trabalhar neles, você ainda não consegue ver claramente os benefícios que ele está te trazendo. Mas esses projetos podem trazer várias coisas. Seja um novo portfólio que vai trazer um próximo trabalho ou cliente. Pode ser algo que você se apaixone tanto que te revigore e faça voltar a ter amor pelas coisas e pela sua vida. Enfim, um projeto paralelo pode significar várias coisas e tudo que você precisa é começar!\n" }, { "path": "posts/mude.md", "content": "---\nlayout: post\ndate: 2023-08-14T08:00:40.000Z\ntitle: Mude!\ndescription: Mude, mas comece devagar, porque a direção é mais importante que a velocidade.\nmain-class: misc\ntags:\n - vida\n - reflexão\n---\n\n## Introdução\n\nContinuando a sequência de posts para se pensar, vamos com mais um. Fiquei muito feliz com a repercurssão do meu post anterior sobre [Está tudo bem não fazer nada](https://willianjusten.com.br/esta-tudo-bem-nao-fazer-nada), então acho que alguns de vocês também gosta desse tipo de conteúdo.\n\nEu tenho consumido bastante poesia e conteúdos filosóficos ultimamente, então acho que isso tem me ajudado a refletir mais sobre a vida e sobre o que eu quero dela. E acho que isso é muito importante, pois muitas vezes estamos tão focados em fazer as coisas que esquecemos de pensar sobre elas.\n\nEnquanto vou escrevendo esse post, vou ouvindo [esse album da Novo Amor](https://open.spotify.com/album/4s3XMtTEkRyaKTMR8HVGLz?si=h6D4Xw9-SHu9vN43WQgFHA) que nossa, é uma delícia de ouvir, é um album totalmente instrumental, apesar de eu amar a voz dele também, esse album é super relaxante.\n\n## Poema de inspiração\n\nToda a ideia desse post veio depois dessa **maravilhosa** interpretação do Abujamra de um poema do Edson Marques, vale demais assitir.\n\n\n\n## Rotina\n\nSempre que a gente fala sobre mudança, a primeira coisa que vem na cabeça é mudar de emprego, de cidade, de país, de relacionamento, etc. Mas acho que a mudança mais importante que podemos fazer é a mudança de rotina.\n\nVocê pode vir e falar:\n\n> Ah, Willian, mas eu só funciono com rotina, sem rotina eu não sou ninguém.\n\nTer uma rotina nos ajuda a não gastar tanta energia para saber o que fazer, mas a rotina também nos deixa preso em um ciclo vicioso, que nos faz fazer as coisas sem pensar. E isso é muito perigoso, pois quando você faz as coisas sem pensar, você não sabe o porquê está fazendo aquilo, e quando você não sabe o porquê, você não sabe se aquilo é bom ou ruim para você.\n\n**Atenção**, não estou dizendo para ligar o modo \"foda-se\" e sair fazendo tudo que der na telha. Estou dizendo para você pensar sobre o que você faz, sobre o que você quer fazer, sobre o que você quer ser. É super útil ter sim algumas tarefas mais delimitadas no seu dia-a-dia, mas ainda mais importante é estar **adaptável** a mudanças, isso evita frustrações se algo for diferente do seu plano tão bem arquitetado.\n\nPor favor não confunda mudar rotina com \"ser desorganizado\", pois são coisas totalmente diferentes. Você pode ter uma rotina, mas estar aberto a mudanças, a novas experiências, a novos aprendizados. E isso é muito importante, pois é isso que vai te fazer crescer como pessoa.\n\nTem uma música da Fresno chamada [Essa coisa (Acorda - Trabalha - Repete - Mantém)](https://open.spotify.com/track/2IlMh7ELuEi4ptCB2dtwHb?si=3fcbb8a538a34320) que fala o seguinte:\n\n> Acorda, trabalha, repete, mantém\n>\n> Deixa para viver depois\n>\n> Até o que eu amo, não mais me entretém\n\nE é esse tipo de rotina que eu estou dizendo para você fugir. Não deixe para viver depois, viva agora, faça as coisas agora, não deixe para depois, pois depois pode ser tarde demais.\n\n## Comece devagar\n\nUsando esse pedaço do poema:\n\n> Mude\n>\n> Mas comece devagar,\n>\n> porque a direção é mais importante\n>\n> que a velocidade.\n\nAcho que a maior dificuldade que temos quando queremos mudar algo é achar que temos que mudar tudo de uma vez. E isso é um erro, pois quando você tenta mudar tudo de uma vez, você acaba não mudando nada.\n\nA mudança é um processo, é algo que vai acontecendo aos poucos, e você tem que estar aberto a isso. Não adianta você querer mudar tudo de uma vez, pois você vai acabar se frustrando e voltando para o seu estado anterior. Então comece devagar, mude uma coisa de cada vez, e vá se adaptando a isso. E quando você menos perceber, você já mudou bastante coisa.\n\n## Um paralelo com a programação\n\n> Achou que não ia ter nada de programação no post? Achou errado, otário! haha\n\nEsse post também é um convite para você aprender uma nova linguagem, um novo framework, um novo paradigma, por que não uma outra área (front fazendo back, back fazendo front)? Isso vai te ajudar a expandir a sua visão, a pensar maior nos projetos, a entender melhor como processos funcionam e entender mais do produto que você trabalha.\n\nOs melhores devs que já trabalhei eram aqueles que tinham uma visão mais ampla, que entendiam mais do negócio, que entendiam mais do produto, que entendiam mais de outras áreas. E isso é muito importante, pois quando você entende mais do negócio, você consegue propor soluções melhores, você consegue propor soluções que vão ajudar o negócio a crescer.\n\n## Saia da casinha de \"Dev\"\n\nMude também nos hobbies, nas conversas, nas interações, como programadores, costumamos ficar focados e centrados somente em programação.\n\n> Nosso hobby? Programar.\n>\n> Nossas conversas? Algo de programação.\n>\n> Amigos? Quase sempre só da área.\n\nMudar um pouco isso vai tornar a própria programação mais prazerosa, pois quando só fazemos a mesma coisa 24h por dia, uma hora cansa também, por mais que se ame.\n\n## Conclusão\n\nEspero que esse post tenha te ajudado a refletir um pouco sobre a sua vida, sobre o que você quer dela, sobre o que você quer ser. E se você quiser conversar sobre isso, fala aí nos comentários, um tempo atrás eu havia removido a seção pois a galera quase não participava, mas resolvi voltar e tenho visto vários relatos super legais, aliás, minha mãe adora ler!\n" }, { "path": "posts/mulheres-na-tecnologia.md", "content": "---\nlayout: post\ndate: 2020-05-27T15:47:47.000Z\ntitle: Mulheres na tecnologia\ndescription: Nossa área é predominante masculina, mas não precisa ser assim.\n Como um pequeno gesto pode ajudar.\nmain-class: misc\ntags:\n - women\n - mulheres\n---\n\n## Introdução\n\nFala pessoal, uffa, consegui um tempo para escrever esse post, até para explicar algumas coisas e acho que vai ser mais fácil também.\n\nEu estou organizando certas coisas para um curso novo que estou fazendo e olhando os reviews, eu notei a grande disparidade entre homens/mulheres nos meus cursos. Todos nós sabemos dessa questão na área, mas confesso que fiquei bem impactado ao notar nos números.\n\nNos últimos meses eu tive contato com várias alunas, algumas delas inclusive já lançaram até seus blogs:\n\n- [Ilda Neta](https://ildaneta.netlify.app/)\n- [Luisa Bezerra](https://www.luisabezerra.com.br/)\n- [Ana Beatriz](https://anabneri.com.br/)\n\nE ontem teve um [tweet da Mikaeri Ohana](https://twitter.com/mikaeriohana/status/1265438450997702656) que sei lá, me deixou muito feliz e eu resolvi fazer uma coisa maluca xD\n\nEu resolvi [doar meus cursos para todas as mulheres](https://twitter.com/Willian_justen/status/1265444818743853057). Sim, eu pedi para que se fosse mulher e quisesse fazer qualquer curso meu, era só me mandar uma mensagem pedindo.\n\n## Chuva de mensagens e histórias\n\nEu não imaginei que teriam **tantas** mensagens, já era quase 11h da noite quando eu falei! Mas eu me enganei, em questão de minutos foram aparecendo mulheres de todos os cantos, algumas carinhas conhecidas, outras que nunca tinha visto, pessoas que estão começando na área ou que até mesmo nem são da área mas que almejam trocar num futuro.\n\nAlgumas eram bem diretas e já mandavam só um \"vi seu tweet, como faz?\", outras até se abriram e contaram suas histórias de vida, achei fantástico! Eu fiz questão de conversar uma a uma, e claro que com isso, eu fui dormir quase as 3h da manhã de tantas mensagens!\n\n## Acordei e mais mensagens!\n\nComo fui dormir tarde, acordei ainda tarde e quando fui ver meu twitter, já tinham mais de **600 mensagens**! Eu não tinha planejado isso, não fiz bot para responder, além do mais eu queria sim responder uma a uma.\n\nSem zoeira, até eu começar a escrever esse post, eu respondi mais de **500 mensagens** e o número de mensagens novas não parava!\n\n## Mais de R$ 25.000 doados em cursos!\n\nIsso mesmo que você leu, no momento que eu comecei a escrever esse post, foram mais de **1000 cursos resgatados** e se botar na ponta do lápis, dá por aí.\n\nE sendo sincero, não me arrependo nem um pouquinho, para mim, foi uma das ações mais legais que eu já fiz, desde quando comecei com meus cursos há 4 anos ou mais.\n\n## Mas infelizmente, tem espertinhos...\n\nCom as novas políticas da Udemy, eu só consigo criar 3 cupons por mês, então eu criei um cupom genérico para que todas as mulheres pudessem usar e estava indo extremamente bem, mas infelizmente, alguns homens começaram a aparecer pegando os cursos...\n\nDe início, eu fiquei extremamente puto, confesso que a vontade era sair explanando o nome de todos. Mas isso poderia causar ainda mais confusão e até problemas futuros para mim.\n\nEntão, devido a isso, tive que desligar o cupom. Peço desculpa as mulheres que não conseguiram pegar os cursos, infelizmente a ação de alguns, acabam estragando as coisas. Mas de qualquer forma, eu estou extremamente feliz pela movimentação e pelo alcance, foram muitas mulheres!\n\n## Ajude você também!\n\nMinha ideia foi de coração, mas confesso que desorganizada e mal estruturada, mas se num fosse assim, também nem aconteceria hahaha\n\nEu fiz minha parte, mas você que está lendo, pode fazer sua parte também! Doe um curso (seja curso meu ou não!), um livro, ajude as mulheres a sua volta! Seja sua amiga da faculdade, colega de trabalho, uma mulher que você conhece e quer entrar na área, enfim, só ajude! Te garanto que você vai ficar muito feliz, assim como eu estou hoje!\n" }, { "path": "posts/nextjs-gatsby-ou-create-react-app-entendendo-os-conceitos-de-ssr-ssg-e-spa.md", "content": "---\nlayout: post\ndate: 2020-08-05T02:59:30.000Z\ntitle: NextJS, Gatsby ou Create React App? Entendendo os conceitos de SSR, SSG e SPA.\ndescription: Antes de escolher um deles, é importante saber as diferenças e suas\n necessidades.\nmain-class: js\ntags:\n - js\n - next\n - gatsby\n---\n## Introdução\n\nFala pessoal, o post de hoje é para falar de um assunto bem importante e que causa muitas dúvidas como: \"Quando será que eu devo usar Gatsby ou Next ou Create React App?\". Mas antes mesmo dessa dúvida, é importante saber as diferenças e também entender as suas necessidades, só assim a gente consegue realmente escolher o que for melhor para nossa aplicação.\n\nEsse post será baseado em um dos vídeos que eu fiz para o meu curso [React Avançado](https://reactavancado.com.br/), no curso nós utilizamos o NextJS e por isso eu resolvi falar sobre os funcionamentos lá.\n\n## Vídeo \n\nSe quiser optar por assistir a versão em vídeo, segue o vídeo abaixo:\n\n\n\n## O que é um framework web?\n\nO framework web é um sistema opinativo onde já são definidas as estruturas e ferramentas do projeto. Essas definições podem ir desde somente a estrutura de pastas, até mesmo a ferramenta que irá compilar o projeto.\n\n## Por que usar um framework web?\n\nAcho que já sabendo o que é, fica fácil saber o porquê de usar né? É muito mais fácil de seguir padrões já pré-determinados do que criar um completamente do zero. Sem contar que você já sai programando de fato a sua solução, ao invés de ter que pensar na parte ferramental de tudo.\n\n## Mas, cuidado!\n\nÉ uma maravilha já ter tudo prontinho para já botar a mão na massa, mas isso pode causar uma enorme dor de cabeça a longo prazo se você não souber exatamente o que usar e ir só pelo **hype** de ferramenta X ou Y.\n\nVou dar um exemplo que vi esses dias de um aluno perguntando:\n\n> Galera que manja do next, eu consigo pegar um projeto já pronto em html, css e js, e passar ele para o nextjs?\n\nE obviamente, eu perguntei, mas por que de usar o Next? E a resposta foi:\n\n> A empresa quer umas mudanças e vai passar os projetos para o react e next para o SEO kkk\n\nUm dos maiores erros de muitas pessoas/empresas é achar que se botar o Gatsby/Next vai ter um SEO melhor. Mas isso não é verdade e sabe por quê? Bem simples, tanto o Gatsby quanto o Next (usando SSG) vão gerar estáticos, que é exatamente \"html/css/js\" lá do início!\n\n> Ou seja, você vai reescrever tudo e, no fim, trocar o famoso 6 por meia duzia.\n\nÉ por isso que antes mesmo de escolher uma tecnologia/framework, é importante saber o que você precisa e o que você já tem. \n\nPense assim, se você já tem uma equipe inteira proficiente em Angular, não tem razão nenhuma para trocar por React, só porque React tem \"mais hype\".\n\n## Sobre o NextJS\n\nO [NextJS](https://nextjs.org/) é um framework já \"velho de guerra\", mas que tem ganhado cada vez mais tração graças aos maravilhosos últimos updates deles, que aliás, não param de acontecer.\n\nNo momento que escrevo esse post, eles lançaram a [versão 9.5](https://nextjs.org/blog/next-9-5), que está absurdamente interessante, trazendo conceitos cada mais interessantes na parte do que eles chamam de \"next-gen static\".\n\nE para quem não sabe, o NextJS fica embaixo do guarda-chuva da [Vercel](https://vercel.com/), antiga Zeit, que tem como fundador o [Guillermo Rauch](https://twitter.com/rauchg), que é o criador do [Socket.io](https://socket.io/) e bom, mais outras mil coisas que você usa ou já deve ter ouvido falar.\n\nE quais seriam as características do NextJS? Bom, vou listar apenas algumas delas:\n\n- Renderização no servidor (Server Side Rendering - SSR)\r\n- Geração de estáticos (Static Site Generation - SSG)\r\n- CSS-in-JS (Styled-jsx, Styled Components, Emotion, etc)\r\n- Zero Configuration (rotas, hot reloading, code splitting…)\r\n- Completamente extensível (controle completo do Babel/Webpack, plugins, etc)\r\n- Otimizado para produção\r\n\nE isso aí, é só a pontinha do iceberg, existem muito mais coisas e eu aconselho fortemente você dar uma olhada no site do [nextjs.org](https://nextjs.org/)\n\n### E quais as diferenças entre Next, Gatsby e Create React App?\n\nPara poder comparar, antes mesmo nós precisamos falar sobre os **diferentes tipos de aplicações**, que são:\n\n- Sites estáticos (HTML/CSS/JS - SSG)\n- Client Side Rendering (Single Page Application - SPA)\n- Server Side Rendering (SSR)\n\nAbaixo eu vou mostrar com umas animações fantásticas um pouco do processo de cada um.\n\n## Como funciona um site estático (SSG - Static Site Generation)\n\n\n\nEm um site estático (ou gerado estaticamente), o fluxo é bem simples:\n\nCaso seja um site gerado estáticamente (seja usando Gatsby/Next), nós iremos fazer as requisições para uma API (ou até um conjunto de Markdown), vamos pegar esses dados e \"colar\" com os arquivos de template/componentes e iremos gerar a partir dali os arquivos de HTML, CSS e JS.\n\nA partir daí, nós subimos esses arquivos em um servidor (que pode inclusive ser uma CDN) e não haverá nenhum processo mais ocorrendo no lado do servidor mais. Toda vez que um usuário requisitar uma página, nós vamos pegar o conteúdo daquela página e vamos entregar, como os arquivos foram gerados estaticamente, nenhuma chamada extra será feita e a página já vai ter incluso o HTML total da página, isso inclui as meta-tags e tudo mais.\n\n### Vantagens\n\n- Uso quase nulo do servidor\r\n- Pode ser servido numa CDN (melhor cache)\r\n- Melhor performance entre todos\r\n- Flexibilidade para usar qualquer servidor\r\n- Ótimo SEO\n\n### Desvantagens\n\n- Tempo de build pode ser muito alto\r\n- Dificuldade para escalar em aplicações grandes\r\n- Dificuldade para realizar atualizações constantes\r\n\n### Quando usar um site estático?\n\n- Site simples sem muita interação do usuário\r\n- Se você é a única pessoa que publica conteúdo\r\n- Se o conteúdo muda pouco\r\n- Se o site é simples, sem tantas páginas\r\n- Quando a performance é extremamente importante\r\n\r\n**Exemplos**: Landing Page, Blogs, Portfólios\r\n\n### Ferramentas que criam estáticos:\n\n- Gatsby\n- Next SSG\n- Jekyll\n- Hugo\n- Hexo\n- Procure por Jamstack / Static Generator e se surpreenda!\n\n## Como funciona o Client Side Rendering (SPA)\n\n\n\nQuando o Angular/React/Ember e outros estouraram, foi exatamente por causa dessa nova forma de trabalhar com a renderização. Antes nós estávamos acostumados em chamar estáticos ou realizar as ações todas sempre no lado do servidor, mas vieram esses frameworks e mostraram que a gente poderia fazer tudo (ou quase tudo) do lado do cliente, permitindo assim interações mais bonitas, transições de páginas elegantes e tudo mais, que naquela época não era tão simples.\n\nO custo dessa forma, é que como tudo é gerado no lado do cliente, o markup inicial que recebemos do servidor é limitado, não tendo o conteúdo ali de fato, mas tags que serão preenchidas pelo framework depois. Então, o grande problema é que bots/scrappers acabam tendo dificuldades de pegar o conteúdo e por isso, essa forma não tem um SEO tão bom.\n\nComo é o fluxo nessa forma?\n\nVocê primeiro cria todo o seu site seja utilizando o [Create React App](https://github.com/facebook/create-react-app) ou qualquer outra estrutura parecida. E na etapa de build, é gerado normalmente um arquivo como `app.js`, que vai ser o coração da sua aplicação.\n\nNo momento que o usuário abre o seu site, ele irá baixar o esqueleto da aplicação (HTML sem conteúdo), o mesmo terá as chamadas para o seu `app.js` e outras coisas necessárias. Assim que esses arquivos carregarem, o `app.js` fará as chamadas para API e com o retorno dos dados, irá preencher o site com as informações.\n\nDepois disso, as próximas mudanças de rotas serão mais rápidas, já que o JS principal já foi baixado na primeira interação. Esse roteamento também será feito no lado do cliente e não no lado do servidor, o que vai permitir transições mais suaves.\n\n### Vantagens\n\n- Permite páginas ricas em interações sem recarregar \r\n- Site rápido após o load inicial\r\n- Ótimo para aplicações web\r\n- Possui diversas bibliotecas\r\n\n### Desvantagens\n\n- Load inicial pode ser muito grande\r\n- Performance imprevisível\r\n- Dificuldades no SEO\r\n- A maioria do conteúdo não é indexado\r\n\n### Quando usar o SPA?\n\n- Quando não tem tanta necessidade de indexar informações no Google\r\n- Quando o usuário faz muitas interações na página e não quero refreshes\r\n- Quando as informações vão ser diferentes para cada usuário (autenticação, por exemplo)\r\n\r\n**Exemplos**: Twitter Web, Facebook Web, Spotify Web\n\n### Ferramentas que criam SPA:\n\n- Create React App e similares\n- Angular\n- Vue\n- Next/Gatsby (ambos permitem ter um funcionamento interno como SPA, mas não é o foco)\n\n## Como funciona o Server Side Rendering (SSR)\n\n\n\nO *Server Side Rendering* apesar de parecer ser o \"termo mais novo\" por aqui, ele é na realidade, o mais comum e mais usado, afinal, tudo que é feito em PHP, Ruby, Python é feito no lado do servidor.\n\nO fluxo aqui é bem simples, o usuário entra no seu site, isso faz uma requisição no seu servidor, ele faz as chamadas necessárias, cria os arquivos e então entrega para o usuário. Com isso, o usuário já recebe o HTML todo já renderizado, com todo o conteúdo, meta-tags e etc, já não precisando fazer mais nenhuma chamada no lado do cliente. \n\n### Vantagens\n\n- Ótimo em SEO\r\n- Meta tags com previews mais adequados \r\n- Melhor performance para o usuário (o conteúdo vai ser visto mais rápido)\r\n- Código compartilhado com o backend em Node\r\n- Menor processamento no lado do usuário\r\n\n### Desvantagens\n\n- TTFB (Time to first byte) maior, o servidor vai preparar todo o conteúdo para entregar\r\n- HTML maior\r\n- Reload completo nas mudanças de rota\n\n### Quando utilizar Server Side Rendering?\n\n- Quando tem necessidades de um SPA, mas precisa de um loading mais rápido\r\n- Quando o conteúdo muda frequentemente\r\n- Quando trabalha com um número muito grande de páginas\r\n- Quando precisa de uma boa indexação no Google\r\n\n**Exemplos**: Ecommerce, Sites de Notícias\n\n### Ferramentas que criam SSR:\n\n- NextJS\n- NuxtJS (Next mas em Vue xD)\n- Razzle\n- Svelte com Sapper\n- Angular Universal\n\n## Okay, mas qual eu uso então?\n\nComo vocês viram, o Next tem a vantagem de ter o SSR, que é algo que nem o Create React App e nem o Gatsby tem, mas além disso, ele também pode gerar estáticos. E aí como escolher entre eles, já que o Next faz de tudo?\n\nAqui vai mais uma opinião pessoal, eu costumo utilizar o Next para projetos bem simples e rápidos e/ou que serão tão grandes que o tempo de build de um estático poderia me atrapalhar/incomodar.\n\nE eu costumo utilizar o Gatsby para soluções como Blogs ou sites com um número não tão grande de páginas, mas que trabalhe com muitas imagens, já que para mim, o `gatsby-image` é imbatível, ele otimiza tudo de um jeito bem fácil.\n\nE para áreas autenticadas, administrações ou aplicações web, já utilizo o SPA, já que não precisarei me preocupar com o SEO e a fluidez e o número de interações feitas nessas páginas costumam ser muito grandes, onde um tratamento de estados entre rotas é feito muito melhor com um SPA.\n\n## Conclusão\n\nEspero que tenham gostado desse post, apesar de eu ter feito um vídeo sobre o assunto, eu confesso que prefiro textos para ler/estudar e sei que tem muitas pessoas que são assim como eu xD\n\nE ~~momento jabá~~, se você gostou do assunto e tem interesse em saber ainda mais coisas sobre, recomendo fazer meu [curso de React Avançado](https://reactavancado.com.br/), onde vamos trabalhar bastante com o Next e os conceitos de SSG e SSR." }, { "path": "posts/novidades-do-react-16.md", "content": "---\nlayout: post\ndate: 2017-09-28T20:59:22.000Z\ntitle: Novidades do React 16\ndescription: Veja o que tem de novo com o novo lançamento do React.\nmain-class: js\ntags:\n - react\n - js\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, o post de hoje vai ser bem rapidinho para atualizar a galera sobre as coisas novas do React 16 e mais umas coisinhas que aconteceram no ecosistema React. Como vocês já devem saber, eu gosto bastante de React e já faz um bom tempo que escrevo uma [coisa ou outra](https://willianjusten.com.br/tags/#react). Mas seguramente essa versão foi a que teve mais impacto de todas e vou separar esses detalhes logo mais.\n\nEnquanto escrevo esse post, vou ouvindo o novo album do Foo Fighters chamado [Concrete and Gold](https://open.spotify.com/album/6KMkuqIwKkwUhUYRPL6dUc) que ficou demais!\n\n## Confusão, reclamações e mais sobre a licença do React\n\nSe você esteve um pouco desligado nos últimos tempos, estava rolando uma **treta** sobre a licença que o Facebook usava no React e com isso vieram vários posts falando para as pessoas pararem de usar o React em suas aplicações. Um dos mais famosos era o [If you’re a startup, you should not use React](https://medium.com/@raulk/if-youre-a-startup-you-should-not-use-react-reflecting-on-the-bsd-patents-license-b049d4a67dd2), que só com esse título causou uma confusão generalizada...\n\nSendo sincero, eu devo ter recebido um monte de emails e mensagens perguntando se então não valia mais a pena estudar React, já que o Facebook ia \"roubar\" tudo e afins. Muito disso por causa desses posts de títulos bem clickbaits e complicados. O Facebook escreveu até um [post](https://code.facebook.com/posts/112130496157735/explaining-react-s-license/) sobre a escolha da licença e como funciona. Mas isso não colou e muiiiita gente continuou a reclamar sobre a licença.\n\nE bom, o Facebook ouviu a comunidade e resolveu [mudar a licença](https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/) do React e outras bibliotecas para a licença do MIT.\n\nEntão, resumindo, o React continua sendo uma ótima biblioteca para trabalhar e vale muito a pena estudar sim tá! =D\n\n## A completa reescrita do React\n\n> O React vai ser todo reescrito? Ferrou, vou ter que aprender tudo de novo? Tá parecendo Angular isso aí!\n\nSim, um monte de gente estava com esse discurso quando soube da reescrita. Só que o que eles não imaginavam que essa reescrita seria interna e não iria afetar a API publica do React, ou seja, melhor performance, menor tamanho, mas com os métodos e coisas que usávamos antes!\n\nEssa reescrita recebeu o nome de Fiber e você pode saber mais sobre ela [nesse documento do github](https://github.com/acdlite/react-fiber-architecture) ou então nessa [palestra da Lin Clark](https://www.youtube.com/watch?v=ZCuYPiUIONs). E também esse [post hiper atualizado](https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/) falando um pouco de como foi o processo de desenvolvimento dessa reescrita, sempre objetivando não quebrar o que já existia.\n\nO Fiber é responsável pela maioria das novas features do React 16 como `error boundaries` e `fragments`. Eles também já estão trabalhando com `async rendering`, que você pode ter um preview de como funciona, logo abaixo:\n\n

    Ever wonder what "async rendering" means? Here's a demo of how to coordinate an async React tree with non-React work https://t.co/3snoahB3uV pic.twitter.com/egQ988gBjR

    — Andrew Clark (@acdlite) September 18, 2017
    \n\n### Novas features / Mudanças\n\nSeguem então alguns dos detalhes legais dessa nova versão:\n\n### Tamanho reduzido\n\nApesar de várias adições legais, o React ficou menor! Claro que não se compara com outras bibliotecas extremamente pequenas como o [Preact](https://github.com/developit/preact), mas já é um grande avanço. Os tamanhos ficam então:\n\n- `react` agora 5.3 kb (2.2 kb gzipped), antes 20.7 kb (6.9 kb gzipped).\n- `react-dom` agora 103.7 kb (32.6 kb gzipped), antes 141 kb (42.9 kb gzipped).\n- `react + react-dom` agora 109 kb (34.8 kb gzipped), antes 161.7 kb (49.8 kb gzipped).\n\nOu seja, a diminuição foi de cerca de **30%**, isso é muito importante para evitar criar apps gigantescas que demoram muito para carregar. Essa diminuição de tamanho muito ocorreu por causa do uso do [Rollup](https://rollupjs.org/), que melhorou o empacotamento da biblioteca.\n\n### Fragments e Strings\n\nAgora você pode retornar um array de elementos diretamente para o render. Antes precisávamos encapsular os elementos em alguma `
    ` ou outro elemento. Agora não é mais necessário isso =)\n\n```jsx\n// antes encapsulando com uma div\nrender() {\n return (\n
    \n

    Meu Título

    \n

    Meu texto lindo aqui.

    \n
    \n )\n}\n\n// agora usando como array\nrender() {\n return [\n

    Meu Título

    ,\n

    Meu texto lindo aqui.

    \n ]\n}\n```\n\nLembrando de não esquecer de usar o `key` para não receber nenhum warning. No futuro eles planejam fazer uma forma para também não precisar de adicionar o `key` para esses casos. E o mesmo ocorre para strings, que agora são suportadas diretamente:\n\n```jsx\n// antes encapsulando com um span\nrender() {\n return Usando o Span!;\n}\n\n// agora usando como string direta\nrender() {\n return 'Sem Spans!';\n}\n```\n\n### Melhor error handling\n\nAntes, quando tínhamos algum erro no React, podia acabar prejudicando tanto a renderização da tela atual, como o funcionamento das outras coisas a serem feitas depois. Para evitar esse tipo de erro tão grave, a galera do React pensou que \"Uma parte da UI não precisa quebrar o aplicativo todo\".\n\nCom o `Error boundaries` nós podemos capturar esses errors em qualquer parte do componente, jogar no console o erro e mostrar um fallback na UI, com uma mensagem mais informativa, por exemplo.\n\nE como isso funciona? É bastante simples! Temos um novo método chamado `componentDidCatch`, que vai ser responsável por fazer o report desse erro para nós e então facilitar para tratarmos. Segue um exemplo básico abaixo:\n\n```jsx\ncomponentDidCatch(error, info) {\n // Adicionamos uma variável no nosso state\n // para tratarmos na nossa UI\n this.setState({ ...state, hasError: true });\n // E você também tem 2 paramêtros para reportar\n console.log(error); // o erro em si\n console.log(info); // contém o Component Stack\n}\n```\n\nDepois de definido o nosso `componentDidCatch` podemos ir no método `render` do nosso componente e só colocar a validação necessária, para imprimir o componente que queremos ou caso tenha um erro, imprimir nossa mensagem, por exemplo:\n\n```jsx\n render() {\n if (this.state.hasError) {\n // Imprimindo uma mensagem de erro\n return

    Ixi, alguma coisa deu errado =(

    ;\n }\n else {\n // retornando o componente de fato\n ...\n }\n }\n```\n\n### Portals\n\nEssa feature permite renderizar um elemento filho num DOM node que existe fora da hierarquia do pai do componente. Como assim? Em geral, quando retornamos um elemento de método `render` de um componente, ele é montado no DOM com filho do nó pai mais próximo. Exemplo:\n\n```jsx\nrender() {\n // React monta uma nova div e renderiza o filho dentro\n return (\n
    \n {this.props.children}\n
    \n );\n}\n```\n\nMas, as vezes é interessante inserirmos o filho numa posição diferente do DOM:\n\n```jsx\nrender() {\n // O React não vai criar uma nova div. Ele vai renderizar o filho dentro do `domNode`.\n // `domNode` é qualquer nó válido, independente de sua localização no DOM.\n return ReactDOM.createPortal(\n this.props.children,\n domNode,\n );\n}\n```\n\nUm caso típico do uso de `portals` é quando um componente pai tem `overflow: hidden` ou `z-index`, mas você precisa que o filho \"vaze\" do container. Como, por exemplo, `tooltips`, `hovercards` e `dialogs`.\n\nVocê pode ler mais sobre nesse [post do Facebook](https://facebook.github.io/react/docs/portals.html).\n\n### Melhor server-side rendering\n\nGraças ao Fiber novamente, toda a forma de server-side rendering foi reescrita e agora está extremamente rápida! Suporta **streaming** e com isso você pode enviar os dados para o client de forma melhor e mais ágil. E graças a [nova forma de empacotamento](https://facebook.github.io/react/blog/#reduced-file-size), que não necessita mais do `process.env`, o processo ficou bem mais rápido.\n\nTem um [post bem bacana falando bastante sobre isso](https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67), indicando que o React 16 acaba sendo **3x mais rápido** que o React 15.\n\nVocê pode ler mais sobre o `ReactDomServer` está funcionando, [nesse post](https://facebook.github.io/react/docs/react-dom-server.html).\n\n### Suporte a DOM Attributes\n\nAntes não era possível criar atributos customizados na nossa tag. Ou seja, se não fosse `camelCase` ou tivesse `data-` ou `aria-`, o React acabava não imprimindo o que queríamos.\n\n```jsx\n
    \n\n// React 15 iria imprimir\n
    \n\n// React 16 imprime o que desejo\n
    \n```\n\nEssa é uma mudança pequena, mas que pode ser útil para aqueles casos onde necessitamos de atributo para um browser específico ou alguma coisa de API externa. Você pode ler mais sobre essa feature [aqui](https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html).\n\n## Sobre atualização, breaking changes, deprecations...\n\nO primeiro aviso é: **Se você já tem sua aplicação rodando no React 15.6 sem nenhum warning, irá funcionar no React 16.**\n\n### Deprecations\n\nPara hidratar um container server-side agora tem uma API explicita nova. Agora você pode usar `ReactDOM.hydrate` ao invés de `ReactDOM.render`. Continue usando `ReactDOM.render` se estiver fazendo só client-side rendering.\n\nO suporte ao `React Addons` foi descontinuado e com exceção do `react-addons-perf` que terá uma versão nova, os outros addons não terão atualizações.\n\nNo momento o `react-addons-perf` não funciona no React 16 e enquanto isso, é encorajado usar [as ferramentas do Browser para medir performance](https://facebook.github.io/react/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab).\n\n### Breaking Changes\n\nComo o objetivo foi não impactar fortemente o ecosistema já existente, as breaking changes são bem pequenas e que só afetam casos bem incomuns.\n\n- React 15 tinha um suporte (sem documentação e bem limitado) para Error Boundaries que era o `unstable_handleError`. Esse método foi renomeado para `componentDidCatch`.\n- `ReactDOM.render` e `ReactDOM.unstable_renderIntoCotnainer` agoram retornam `null` se chamados dentro de um método de lifecycle. Para trabalhar com isso, você pode usar [portals](https://github.com/facebook/react/issues/10309#issuecomment-318433235) ou [refs](https://github.com/facebook/react/issues/10309#issuecomment-318434635).\n- `setState`:\n - Chamar `setState` com `null` não ativa uma atualização dos estados. Isso permite que você defina uma função para atualizar caso queira renderizar novamente.\n - Chamar `setState` diretamente num `render` vai causar uma atualização dos estados. Lembrando que você não deveria chamar `setState` dentro de um `render`.\n - Os callbacks de `setState` agora ativam imediatamente depois do `componentDidMount`/`componentDidUpdate` ao invés de após todos os componentes serem renderizados.\n- Ao trocar `` por ``, `B.componentWillMount` agora vai sempre acontecer antes de `A.componentWillUnmount`. Antes, `A.componentWillUnmount` podia inicializar primeiro em certos casos.\n- Antes, mudar o `ref` de um component sempre iria desmontar a `ref` antes que o `render` do componente fosse chamado. Agora, o `ref` é mudado depois, quando aplicadas as mudanças no DOM.\n- `componentDidUpdate` lifecycle não recebe mais o parâmetro `prevContex`.\n- Shallow Renderer não chama mais o `componentDidUpdate` porque as `refs` do DOM não estão disponíveis. Isso faz ser consistente com o `componentDidMount` que não era chamado nas versões anteriores também.\n\n## Empacotamento\n\nComo dito antes, a forma de empacotamento do React mudou. E não existe mais `react/lib/*` e `react-dom/lib/*`. E os nomes/caminhos mudaram para enfatizar a diferença entre os builds de produção e desenvolvimento:\n\n- `react/dist/react.js` → `react/umd/react.development.js`\n- `react/dist/react.min.js` → `react/umd/react.production.min.js`\n- `react-dom/dist/react-dom.js` → `react-dom/umd/react-dom.development.js`\n- `react-dom/dist/react-dom.min.js` → `react-dom/umd/react-dom.production.min.js`\n\n## Requisitos\n\nO React 16 depende dos collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) e [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). Se você precisa dar suporte para browsers antigos que não suportam nativamente, será necessário incluir um polyfill na aplicação. Você pode ver mais sobre [aqui](https://facebook.github.io/react/blog/#javascript-environment-requirements).\n\n## Site atualizado da Documentação\n\nÉ isso mesmo, refizeram o site da documentação, ficou mais limpo, mais fácil de acessar os menus e numa linguagem de bem fácil entendimento, dá uma [checada lá](https://reactjs.org/).\n\n## Conclusão\n\nBom galera, é basicamente isso. O React continua firme e forte e cada vez melhorando mais! Não precisa ter medo de começar a estudar não, porque a biblioteca vai longe ainda. E essas mudanças novas foram mais do que bem vindas!\n" }, { "path": "posts/novo-curso-criando-um-ambiente-de-desenvolvimento-no-windows.md", "content": "---\nlayout: post\ndate: 2020-02-10T14:05:15.000Z\ntitle: \"Novo Curso: Criando um ambiente de Desenvolvimento no Windows\"\ndescription: Aprenda a ter um terminal bom, node e muito mais dentro do Windows\nmain-class: dev\ntags:\n - windows\n - terminal\n---\n\n## Introdução\n\nFala pessoal! Para começar bem o ano, nada melhor que um curso novo né? E sabe o que é melhor? É de graça!\n\nEsse ano eu quero fazer mais conteúdos em vídeos, até para alimentar [meu canal do YouTube](https://www.youtube.com/WillianJustenCursos?sub_confirmation=1), então resolvi postar o curso nos 2 lugares:\n\n- [Udemy](https://www.udemy.com/course/criando-um-ambiente-de-desenvolvimento-no-windows)\n- [Playlist do Youtube](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd)\n\nEspero que gostem =)\n\n## Computador novo\n\nRecentemente eu adquiri um computador novo, que é Windows, e como eu sou usuário Mac OS por muitos e muitos anos, confesso que estava preocupado em como iria fazer para deixar tudo funcionando nessa máquina nova.\n\nMas apesar do medo, eu resolvi me aventurar e nossa, tá muito mais fácil do que parece. Eu consegui deixar todo o sistema funcionando perfeito para as minhas necessidades, e resolvi fazer um **curso gratuito** para que os outros também consigam.\n\n## Mil dificuldades com terminal e windows\n\nEu tenho muitos alunos iniciantes e vários dos erros são problemas de paths, comandos que não existem no Windows, falta de configuração, etc.\n\nAlguns vão se virando e acabam conseguindo fazer funcionar, mas vários outros travam e alguns acabam até desistindo de aprender.\n\nEsse curso tem o intuito de ajudar essas pessoas a não travarem mais e estudarem o que realmente importa.\n\n## Ementa\n\nEnfim, vamos ao que interessa, segue abaixo a ementa:\n\n- Atualizações e Insiders Program\n- Instalando um Package Manager\n- Habilitando WSL e instalando Ubuntu\n- Convertendo para WSL 2\n- Instalando um terminal\n- Criando um usuário no Linux\n- Definindo usuário padrão no WSL\n- Movendo entre diretórios no terminal\n- Configurando diretório padrão para o terminal\n- Configurando terminal padrão no Windows\n- Configurando tema para o terminal\n- Criando teclas de atalho no terminal\n- Instalando o Zsh e Oh My Zsh\n- Listando e criando diretórios no terminal\n- Editores de texto no terminal\n- Editando o tema do Zsh\n- Configurando plugin de auto-suggestions\n- Criando chaves ssh\n- Criando um Alias para comandos do terminal\n- Configurando o WSL no VS Code\n- Configurando o NVM e instalando o NodeJS\n- Instalando o Yarn\n- Rodando um projeto NodeJS\n\nComo podem ver, são passos bem simples, todos em vídeo bem pequenos para que vocês possam usar até mesmo como vídeos de apoio para no futuro.\n\n## Links para o curso\n\nOs links estão ali em cima, mas caso você não tenha visto, seguem os links aqui:\n\n- [Udemy](https://www.udemy.com/course/criando-um-ambiente-de-desenvolvimento-no-windows)\n- [Playlist do Youtube](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd)\n\n## Conclusão\n\nEspero que aproveitem bastante o curso, espalhem ele para os seus amigos que tem interesse em começar a aprender programação e ainda não utilizam Linux/MacOS. E mesmo que você já seja programador, dê uma chance, as vezes tem uma dica ou outra legal que você não sabia =)\n" }, { "path": "posts/novo-curso-de-git-e-github-para-iniciantes.md", "content": "---\nlayout: post\ndate: 2016-04-03T14:21:20.000Z\ntitle: Novo curso de Git e Github para iniciantes\ndescription: Aprenda como funciona o git e o github em vídeos curtos e práticos.\nmain-class: misc\ntags:\n - dev\n - cursos\n - git\n - github\n---\n\n## Introdução\n\nVou escrevendo essa post enquanto escuto uma [playlist especial do Batman](https://open.spotify.com/user/spotifybrazilian/playlist/5jcu1LG141GiVpKuZVOTzn), até nisso é muito melhor que o super homem =p\n\nFazem 15 dias que eu lancei um [curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/) em cima de uma plataforma bastante legal. Fiz um [post](https://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) falando da minha vontade de fazer vídeo aulas, o porquê de começar com Jekyll e coisinhas mais. Dessa vez, resolvi fazer mais um curso gratuito =)\n\n## Por que Git e Github?\n\nPara quem já está na área de desenvolvimento há um tempinho, deve se lembrar de outros versionadores como o SVN, Mercurial, que eram ruins demaaais. E quando nasceu o Git, foi tipo, um alívio gigantesco, tanto pela simplicidade, como pela velocidade. Mas para quem nunca utilizou um controle de versão antes, o Git pode parecer um pouco assustador e complicado.\n\nComo o Git hoje é uma ferramenta indispensável para o desenvolvimento e requisito básico de qualquer empresa. Resolvi fazer um curso cobrindo todas as partes básicas e importantes para que as pessoas já saiam do curso podendo trabalhar sem problemas com a ferramenta.\n\nFiz uma divisão simples do conteúdo, para que ele pudesse ser absorvido no seu tempo e de forma linear, as divisões são:\n\n- `Entendendo o que é o Git e Github`: para saber um pouco sobre a necessidade de um controle de versão e a história de como nasceu a ferramenta.\n- `Configurando o Git`: passos de instalação e configuração do usuário.\n- `Essencial do Git`: os principais comandos para se começar a trabalhar.\n- `Repositórios remotos`: um pequeno passeio pelo Git e como colocar seu projeto lá.\n- `Ramificação (Branch)`: entender a necessidade de ter branches separados, como funcionam e os conceitos de Merge e Rebase.\n- `Extras`: coisas simples, mas que podem ajudar bastante ao utilizar o Git.\n\nO curso tem aproximadamente 2h de aula, com vídeos bem pequenos, para não cansar. E esse conteúdo pode ser atualizado conforme necessidade também.\n\n## Funcionamento dos cursos\n\nTodos os cursos são feitos em cima de uma plataforma, que facilita bastante para estudar, saber o que já assistiu, ler textos, fazer perguntas através de comentários, tudo isso de uma forma bastante simples, que eu espero que vocês gostem.\n\nTerão cursos gratuitos como o [Criando sites estáticos com Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/) e agora esse de [Git e Github para iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/). Sendo que a periodicidade de lançamento desses cursos gratuitos vai depender das doações de quem puder colaborar, dos compartilhamentos e claro, do uso da plataforma.\n\nMas também irão ter cursos premium, onde a qualidade de vídeo e gravação será outra, assim como maior conteúdo e material para estudo. Os cursos pagos serão seus para sempre e você poderá fazer quando quiser, sem esse negócio de mensalidade, anuidade e etc. Comprou comprou, agora é seu! O pagamento dos cursos poderá ser feito via Paypal, cartão de crédito direto na plataforma e se você quiser um desconto, pode me mandar uma mensagem e fazer uma transferência ou depósito. O negócio é todo mundo conseguir fazer os cursos e ser feliz =D\n\n## Como ajudar a ter mais cursos?\n\nExistem várias formas que você pode me ajudar. [Momento de Will mendigando]\n\n### Compartilhe!\n\nSe você gostar do curso, de mim, de desenvolvimento ou sejá lá o que for. Ajuda o amigo aqui, compartilhe no Facebook, no Twitter, no Google Plus, para os seus grupos do Whatsapp, cara, fala até para sua mãe e cachorro!! Passe a palavra a todas as pessoas que você puder, essa já é uma ajuda **gigantesca**!\n\n### Faça os cursos e comente\n\nNão adianta eu criar e não ter ninguém para assistir ou nenhum feedback. Assista, faça algum projetinho sobre, meta o pau se estiver uma merda, só não seja apático. Cada vídeo dos cursos vai ter uma seção de comentários logo abaixo, onde todos podem tirar dúvidas tanto comigo, quanto entre si. Imagine conversar com outros alunos por ali e compartilhar conhecimento, nada vai me deixar mais feliz.\n\n### Dê sugestões\n\nFale sobre o que você quer assistir, quais assuntos acha interessante, os cursos serão criados baseados nisso, não importa se você é iniciante ou avançado, só fale do que se interessa. E se for algo sinistrão, que eu também não sei, vou ter o maior prazer de aprender para poder ensinar =D\n\n## Um abraço e que comecem os estudos!!\n\nVamos lá galera, todo mundo acessando, compartilhando, curtindo, comentando e sendo feliz!!!\n[Link do curso Git e Github para iniciantes](https://www.udemy.com/git-e-github-para-iniciantes/)\n" }, { "path": "posts/novo-projeto-awesome-audioviz.md", "content": "---\nlayout: post\ndate: 2016-03-27T03:24:29.000Z\ntitle: Novo projeto Awesome Audio Viz\ndescription: Quem já acessou esse blog uma vez na vida já viu como eu amo\n música, por que não um projeto usando música?\nmain-class: dev\ntags:\n - dev\n - audio\n - creative\ncategories: null\n---\n\n## Introdução\n\nPrimeiro de tudo, gostaria muito de agradecer a receptividade do [post de ontem](https://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/), foram muitos compartilhamentos, likes, comentários tanto no blog, como nos posts dos grupos, bate papos privados e até doações! Fico bastante feliz que eu ajude e inspire outras pessoas, eu escrevo no blog muito por amor ao que faço e pela vontade de ajudar a todos.\n\nBom, sem mais delongas, senão vou chorar. Vou escrevendo enquanto escuto uma [Playlist de ChillStep](https://open.spotify.com/user/kent1337/playlist/6IjDl5eRczFdgZkKYXhuHZ) muito boa.\n\n## Paixão por Música\n\nAcho que nem preciso dizer que amo Música né? Praticamente todos os meus posts possuem uma playlist do que estou ouvindo. Trabalhei numa empresa de crowdfunding de shows chamada [Queremos](https://www.queremos.com.br/) / [WeDemand](https://www.wedemand.com/) e já perdi a conta de quantos shows já fui.\n\nSempre fui apaixonado por música, qualquer tipo, mas uma em si, sempre me chamava muito a atenção, que eram as dos jogos. Eu cresci com nintendinho, super nintendo, por aí vai. E aquelas músicas clássicas de 8 bits eram incríveis para mim. Eu queria muito aprender a criar aquelas músicas e fazer as minhas próprias. Foi aí que eu conheci o [Guitar Pro](https://www.guitar-pro.com/en/index.php) e comecei a criar músicas MIDI, que ficavam bem parecidas com as dos jogos, para mim era mágico.\n\nDepois começaram as ondas dos jogos musicais, nossa, como eu era viciado! Joguei de todos os tipos, desde os famosos Guitar Hero's da vida, até jogos pouco falados como [Rez](https://www.youtube.com/watch?v=5riv2plc_NM).\n\nJunto aos jogos, eu também utilizava um player de música, que os mais antigos vão lembrar com muita carinho, o bom e velho [Winamp](http://www.winamp.com/). E como não lembrar os visualizadores de música que ele tinha, era incrível. Você ainda podia baixar, futucar e customizar do seu jeito! Dali, rolaram várias e várias madrugadas editando para fazer desenhos maneiros e psicodélicos.\n\nEntão... muito tempo se passou, hoje eu já sei alguma coisa de Javascript e por que não brincar com essas coisas que eu tanto amava quando jovem?\n\n\n## Nascimento de outra Awesome\n\nPara quem já vem seguindo meu trabalho faz tempo, sabem que eu criei uma lista com vários conteúdos sobre SVG, que dei o nome de [Awesome SVG](https://github.com/willianjusten/awesome-svg). Essa lista, nada mais era que links que eu já tinha nos bookmarks e queria organizar de alguma forma para passar para os outros que quisessem aprender também.\n\nDessa vez, não foi diferente, eu tinha vários links de coisas que já havia estudado e como eu estava pensando em focar mais nesse assunto esse ano, resolvi juntar tudo. Só que dessa vez, resolvi não fazer sozinho. Eu havia visto um trabalho super legal (super legal nada, ficou do caralho, [olha lá](https://lhbzr.com/)) do [Luis Henrique Bizarro](https://lhbzr.com/) e resolvi bater um papo com ele para ver se ele se interessava. Ele não só se interessou, como já até me conhecia e curtia meu trabalho <3\n\nOutra pessoa que eu também resolvi chamar foi o [Márcio Ribeiro](http://cargocollective.com/marcioribeiro) um designer com os dois pés em Dev e que também ama Audio Visualização. O cara manda bem para caramba e eu sabia que precisava chamá-lo para algum projeto comigo. Não deu outra, a logo está absurdamente linda <3\n\nTendo o trio formado e com o [repositório criado](https://github.com/willianjusten/awesome-audio-visualization), começamos a adicionar vários links em diferentes categorias. Hoje já são mais de 130 links para vocês acessarem, desde experimentos até tutoriais e vídeos.\n\nEntão tá aí galera, quem puder dar [Star no projeto](https://github.com/willianjusten/awesome-audio-visualization), compartilhar e principalmente usar, vai ajudar muito! Quanto mais stars o projeto ganha, mais visibilidade ele tem e com isso mais pessoas conseguem ter acesso ao conteúdo e aprender. Conto com a ajuda de vocês! =)\n\n## Criação da Logo\n\nQuem já foi apressadinho e abriu o repositório, já deve ter visto a logo maravilhosa lá. Ela foi criação do [Márcio Ribeiro](http://cargocollective.com/marcioribeiro), que fez a logo super rápido e para mim ficou espetacular. Mas ela é claro, é muito mais bonita com música e interação, então dá uma olhada nesse vídeo e fique babando, porque eu estou babando até agora <3\n\n\n\n## Call for Papers\n\nE por último, mas não menos importante. Nesses dias passando por alguns links, eu vi Call for Papers para 2 eventos que acho fodas, que são o [FrontinSampa](http://frontinsampa.com.br/) e a [BrazilJS](https://braziljs.org/conf) e pensei comigo, pow, pq não propor algo sobre Audio Visualization? Ano passado a BrazilJS teve maior showzinho no final, com direito a Rage Against e tudo, vai que cola xD\n\nEu peguei e gravei um vídeo beeeeeem porquinho, propondo a minha talk, se quiser rir um pouco, segue o vídeo abaixo:\n\n\n\nO pessoal do FrontinSampa já viu e já aprovou! Então, para quem quiser me ver em Sampa, estarei lá no [FrontinSampa](http://frontinsampa.com.br/) dia 2 de Julho. Quem for no FrontinSampa e falar comigo pessoalmente, vai ganhar um curso premium meu! E vamos torcer para eu passar na BrazilJS também, se eu não passar, bom, vou estar lá de qualquer maneira em Agosto! \\o/\n\n## Conclusão\n\nÉ isso aí galera, espero que curtam o projetinho e utilizem bastante ele, em breve eu estarei fazendo posts ensinando como se trabalhar com Audio Visualization para ter mais links feitos por vocês lá no projeto.\n\nNão esqueçam de dar star lá (sim, estou mendigando, mas de coração tá <3). [Link da Awesome Audio Visualization](https://github.com/willianjusten/awesome-audio-visualization)\n" }, { "path": "posts/o-basico-da-api-do-reactjs.md", "content": "---\nlayout: post\ndate: 2015-07-17T03:18:37.000Z\ntitle: \"#3 - O básico da API do ReactJS\"\ndescription: Aprenda um pouco mais sobre a API do React e como começar a brincar.\nmain-class: js\ntags:\n - react\n - js\n - tutorial\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nPara animar um pouco, a trilha sonora escolhida é o [novo cd do Tame Impala - Currents](https://open.spotify.com/album/0rxKf57PZvWEoU8v3m5W2q), aproveitando que lançou essa semana.\n\nComo prometido, vou dar continuidade a série de posts sobre ReactJS e para acompanhar tanto essa série, como outras, é só ir no link [series](https://willianjusten.com.br/series/).\n\nNos posts anteriores eu falei um pouco do que é o React e as formas de utilizá-lo em um projeto, agora eu irei mostrar e explicar um pouco da API do React para podermos começar a brincadeira.\n\nTentarei não fazer um post grande e cansativo, portanto, irei separar os conceitos básicos e no decorrer dos outros posts, onde iremos criar mini aplicações, a gente vai pegando mais coisas.\n\n## Criando e Renderizando componentes\n\nO primeiro de tudo é saber como podemos criar os componentes e como renderizá-los. Para isso, irei demonstrar com um simples `Hello World`, mas lembre-se que isso poderiam ser componentes de qualquer forma.\n\n### ReactDOM.render\n\n```js\nrender(\n ReactElement element,\n DOMElement container,\n [function callback]\n)\n```\n\n**update: (02/06/2016)** - O método anteriormente ficava dentro da API do React, mas agora passou para a API específica do ReactDOM.\n\nO método `render` é um dos métodos mais importantes do React e que será responsável por renderizar elementos. Ele recebe 3 parâmetros, que são o elemento a ser criado, o local onde será inserido no DOM e uma função de callback, que é chamada logo após a renderização.\n\nUm detalhe importante aqui é que, caso o elemento já exista no DOM, o render somente irá atualizar as partes novas no DOM, seguindo o algoritmo de diff, comentado no [primeiro post](https://willianjusten.com.br/comecando-com-react/).\n\nSegue um [vídeo em inglês](http://learnreact.com/lessons/1-render-getting-started), explicando este método.\n\n### Render sem JSX - React.createElement\n\n```jsx\nReactDOM.render(\n React.createElement('h1', null, 'Hello World!'),\n document.getElementById('content')\n)\n```\n\nSem o JSX, não temos como adicionar tags html dentro do nosso render, portanto, precisamos criar esses elementos na mão. Para criar, utilizamos o método `createElement`, que recebe 3 parâmetros também. O primeiro parâmetro é a tag html, o segundo é um objeto, que fica responsável pelo conjunto de informações, que podem ser classes, ids, data, estilos, etc.\n\nSegue um [vídeo em inglês](http://learnreact.com/lessons/2-createelement), falando sobre este método.\n\n### Render com JSX\n\n```jsx\nReactDOM.render(

    Hello World!

    , document.getElementById('content'))\n```\n\nPara o render com o JSX, basta criamos o elemento com as tags do próprio html e ligarmos a um container.\n\n## createReactClass\n\n```js\ncreateReactClass(object specification)\n```\n\nServe para criar um componente dada uma especificação. Um componente implementa um método render que retorna um filho único. Esse filho pode ter uma estrutura arbitrária. A vantagem deste método é que nos permite já criar componentes para serem reaproveitados.\n\n```jsx\nvar Hello = createReactClass({\n render: function () {\n return

    Hello World!

    \n }\n})\n\nReactDOM.render(, document.getElementById('content'))\n```\n\nComo podemos notar, com a utilização do `createReactClass`, habilitamos um componente com o nome da variável determinada, no nosso caso `Hello` e então podemos chamá-lo em diversos lugares como ``, conforme indicado na linha `10`.\n\nSegue um [vídeo em inglês](http://learnreact.com/lessons/4-createclass), explicando como funciona.\n\n### React.component (ES6)\n\nNo ES6, nós ganhamos classes para o nosso lindo javascript e, com isso, conseguimos extender métodos para essa classe, permitindo também a criação de componentes reutilizáveis, conforme o exemplo a seguir:\n\n```jsx\nclass Hello extends React.Component {\n render() {\n return

    Hello World!

    \n }\n}\n\nReactDOM.render(, document.getElementById('content'))\n```\n\n### Exemplos\n\nSeguem os exemplos rodando no Codepen:\n\n    \n\n\nRepare que eu criei diferentes containers para que cada elemento fosse renderizado em um desses espaços.\n\n### Usando JS dentro do render\n\nJá que é tudo JS, podemos usar o próprio JS para brincar dentro do render, como, por exemplo, receber um array e iterar nele para poder renderizar uma lista.\n\n```jsx\nvar frutas = ['Banana', 'Maçã', 'Uva']\n\nReactDOM.render(\n
    \n {frutas.map(function (fruta) {\n return
  • {fruta}
    • \n })}\n
    ,\n document.getElementById('compras')\n)\n```\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nNo exemplo, eu tenho um array `frutas` e através do comando `map`, eu itero e mando retornar fruta por fruta dentro de uma lista com o id `compras`.\n\n## Props\n\nQuando utilizamos nossos componentes no React, nós podemos adicionar atributos a eles, dos quais chamamos de `props`. Esses atributos ficam disponíveis para nosso componente através do `this.props` e podem ser usados no método de `render` para renderizar dados dinâmicos, de acordo com o quisermos passar.\n\n```jsx\nvar Hello = createReactClass({\n render: function () {\n return

    Hello {this.props.name}!

    \n }\n})\n\nReactDOM.render(, document.getElementById('hello'))\n```\n\nOlhando no exemplo, notamos que ele recebe o nome da variável `name` e consegue renderizar o nome corretamente.\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\n## Especificações, Ciclos de Vida e Estado\n\n### Especificações (Specs)\n\nQuando criamos um elemento e utilizamos o `render`, ele irá procurar pelas propriedades (this.props) e estado (this.state) daquele elemento. Se você precisar interagir com essas informações, existem alguns métodos para isso.\n\n#### getInitialState\n\nEsse método é chamado uma só vez antes de renderizar e ele servirá para definir um valor para o `this.state` do elemento, para que ele possa ser utilizado depois.\n\n#### getInitialProps\n\nEsse método é chamado uma só vez antes de renderizar e ele servirá para definir um valor para o `this.props` do elemento, para que ele possa ser utilizado depois.\n\n### propTypes\n\nO objeto de `propTypes` permite validar as propriedades que estão sendo passadas para os componentes.\n\n### Ciclos de Vida (Lifetime Cycles)\n\nO método de `render` é responsável por pegar as informações e renderizar na tela, mas existem outros ciclos que podem existir dentro dessa renderização, que são:\n\n- `componentWillMount`: chamado uma vez só, tanto do lado client quando do server antes da renderização acontecer.\n- `componentDidMount`: chamado uma vez só, só na parte do cliente, depois da renderização.\n- `shouldComponentUpdate`: chamado depois da renderização quando as propriedades e o estado está sendo definido. Ele retorna `true` ou `false` para dizer se o elemento deve atualizar.\n- `componentWillUnmount`: chamado quando desejamos desmontar o componente.\n\nExistem mais métodos na API, basta dar uma [olhada aqui](https://facebook.github.io/react/docs/component-specs.html).\n\n## Criando um timer\n\nJá tendo os conceitos acima, conseguimos criar um simples timer. Segue o código e vamos destrinchá-lo:\n\n```jsx\nvar Timer = createReactClass({\n getInitialState: function () {\n return { elapsed: 0 }\n },\n\n componentDidMount: function () {\n this.timer = setInterval(this.tick, 50)\n },\n\n componentWillUnmount: function () {\n clearInterval(this.timer)\n },\n\n tick: function () {\n this.setState({ elapsed: new Date() - this.props.start })\n },\n\n render: function () {\n var elapsed = Math.round(this.state.elapsed / 100)\n var seconds = (elapsed / 10).toFixed(1)\n\n return (\n

    \n Já se passaram {seconds} segundos.\n

    \n )\n }\n})\n\nReactDOM.render(, document.getElementById('timer'))\n```\n\nNa linha `3`, usamos o método `getInitialState` para poder definir que o estado inicial é quando `elapsed` vale 0, ou seja, não passou o tempo ainda.\n\nNa linha `7`, estamos usando o `componentDidMount` que será chamado assim que o elemento for renderizado na página, setamos aqui o `setInterval` para que ele fique chamando o método `tick` para ficar atualizando o tempo durante esse intervalo.\n\nNa linha `11`, colocamos o `componentWillUnmount` para dizer que se por algum motivo o componente for removido da tela, ele ativar aquele evento, que nada mais é que limpar o interval, já que não iremos mais atualizar nada na tela.\n\nA linha `15` é onde criamos uma função de auxílio, que servirá para ir definindo o estado do meu componente, que nada mais é que o tempo que já passou. Para isso, utilizamos o método `setState`. Repare que utilizamos o seguinte trecho `this.props.start`, isso significa que estamos passando para o nosso componente uma propriedade com o nome `start` (guarde isso, por enquanto).\n\nNa linha `25` estamos basicamente fazendo a etapa de renderização com o `render`, onde usamos a variável `seconds` que é definida na linha `21` usando como parte do cálculo o estado do componente, que é setado por `this.state.elapsed`.\n\nPor fim, na linha `31` estamos chamando o nosso componente `Timer` e passando a tal propriedade `start`, que seria o tempo de agora, para que ele possa iniciar a contagem do tempo.\n\nSegue um exemplo live no Codepen:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nO legal é que o React irá modificar somente o elemento que está com estado sendo modificado, ou seja, somente o que está dentro de `{seconds}`, o resto da frase permanecerá intacta, com isso, impacta menos o DOM.\n\n## Conclusão\n\nBom, esses são os principais métodos do React e com eles já conseguimos fazer bastante coisa, se quiser se aprofundar, vale dar uma olhada na [documentação](https://facebook.github.io/react/docs/top-level-api.html). Durante a elaboração dos códigos, eu foquei somente nas possibilidades do React e não no JS em si, caso você ainda não se sinta confortável com algumas das coisas feitas acima, aconselho que volte um pouco e estude mais de JS, para que possa desenvolver melhor. Lembrando que é sempre mais importante saber a linguagem do que uma biblioteca.\n\n#### Ahhh, mas como eu aprendo mais de Javascript?\n\nTem um curso do [Fernando Daciuk](https://twitter.com/fdaciuk) que é foda para caramba e vai te ensinar a realmente virar um Ninja no JS, se quiser saber mais do curso, basta ir [nesse link](http://blog.da2k.com.br/curso-javascript-ninja/). Pode parecer propaganda, mas não é, o curso é realmente bom e é realmente importante entender a linguagem antes de partir mais para frente. Mas qualquer dúvida, é claro que você pode falar nos comentários abaixo!!\n\n## Veja mais posts\n\n[Série sobre React](https://willianjusten.com.br/series/#aprendendo-reactjs)\n" }, { "path": "posts/o-que-ninguem-diz-para-iniciantes.md", "content": "---\nlayout: post\ndate: 2016-03-26T13:38:25.000Z\ntitle: O que ninguém diz para os iniciantes\ndescription: Análise de uma famosa entrevista com Ira Glass sobre iniciantes e o\n processo criativo.\nmain-class: misc\ntags:\n - dev\n - creative\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, o post de hoje é totalmente inspirado em um vídeo bastante legal, que eu acho motivacional para caramba e que eu gostaria de ter assistido há mais tempo. O vídeo em questão se chama Nobody Tells This To Beginners e se trata de uma montagem em cima da entrevista de Ira Glass sobre esse assunto.\n\n## Vídeo Inspirado\n\n\n\nSe você estiver tendo problemas de visualizar o vídeo acima completo, tente [esse aqui](https://www.youtube.com/watch?v=D_gSFWt6ito)\n\n## Transcrição Livre\n\n
    \n

    \n Ninguém diz isso para os iniciantes. Eu desejava que alguém tivesse me dito.

    \n Todos nós que fazemos trabalhos criativos, entramos nisso porque temos bom gosto.

    \n Mas existe uma lacuna.

    \n Nos nossos primeiros anos que fazemos coisas, elas não são tão boas. Elas tentam ser boas, tem potencial, mas elas não.

    \n Mas o seu bom gosto, a coisa que fez você entrar nesse jogo, ainda é matador.

    \n E o seu bom gosto é o que faz o seu trabalho te desapontar.

    \n Várias pessoas nunca passam dessa fase, elas desistem. Várias pessoas que eu sei que fazem trabalhos criativos e interessantes passaram por anos disto.

    \n Nós sabemos que nosso trabalho não tem aquela coisa especial que gostaríamos que tivesse.

    \n Todos nós passamos por isso.

    \n E se você está apenas começando ou ainda está nessa fase, você precisa saber que isso é normal e a coisa mais importante que você precisa fazer é um monte de trabalhos.

    \n Coloque uma meta para você e toda semana você vai terminar um projeto. Só passando por um grande volume de trabalho que você irá diminuir essa lacuna e o seu trabalho vai ser tão bom quanto suas ambições.

    \n E eu levei mais tempo para descobrir como fazer isso do que qualquer um que eu já conheci.

    \n Vai demorar. É normal que demore. Você só tem que lutar contra seu caminho.\n

    \n
    \n\n## Análise e Introspecção\n\nEnquanto fui escrevendo essa análise, fui ouvindo uma [puta playlist do Spotify](https://open.spotify.com/user/nickfearless/playlist/6EF56fuiUgN2GOMVZIiXpq), que aconselho a você ir escutando junto, talvez ela te inspire e te anime também.\n\nVocê já teve a sensação de que tudo que faz não é tão bom como você gostaria que fosse? Que pessoas de 20 anos fazem coisas incríveis, que você jamais se imaginou tendo capacidade de fazer? Que por mais que você estude, vire horas e horas, nunca é o suficiente para alcançar aquilo que você acha que é o bom? E aí você começou a se desgastar, se sentir péssimo, com vontade de desistir de tudo e tentar outra coisa?\n\nComo o Ira Glass diz, isso é normal, você tem bom gosto, você sabe olhar bons trabalhos e dizer o quanto eles são bons.\n\nO que você não pode fazer é comparar o seu trabalho com o dos outros e se diminuir, cada um teve o seu tempo de estudo, seu tempo de aprimoramento, melhoria e principalmente, todos passaram pela mesma fase que você está passando. O que você deve fazer é identificar e entender essa fase que você está passando, pois quando ela passar, você terá superado tudo e seus trabalhos terão alcançado o nível que você tanto almejava.\n\nVocê pode pensar que eu já passei por essa fase e me sinto ótimo, que eu tenho trabalhos legais, escrevo num blog que um monte de gente já conhece, que faço palestras. Mas é aí que você se engana, todo dia eu acordo com a sensação de que tenho muito a fazer ainda, que tudo que eu já fiz e faço, ainda não valeu a pena.\n\nMas eu finalmente estou começando a identificar isso e ver que é só uma fase. E o que estou fazendo para me sentir melhor e para melhorar isso? Começo projetos e projetos. Tenho colocado deadlines para eles e com isso vou aprendendo coisas que eu sempre quis e que se eu não tivesse criado esses desafios, talvez nunca teria começado.\n\nEsses projetos podem ser qualquer coisa. Sempre teve vontade de escrever um blog? **COMECE!** Sempre quis contribuir no github? **COMECE!** Sempre teve vontade de palestrar e passar o seu conhecimento para a comunidade? **COMECE!**\n\nVocê pode passar o resto da vida achando que não tem o \"conhecimento suficiente\", que não tem a \"experiência necessária\", que as pessoas vão rir de você. Ou você pode começar a se mostrar, começar a fazer aquilo que sempre quis fazer, mas tinha medo. Se suas primeiras críticas não forem boas, **CONTINUE**, ninguém disse que seria fácil, mas ninguém disse que seria impossível também.\n\nExistia um post do Daniel Filho chamado **Queime seus ídolos**. O que eu prefiro entender do post dele é que não é para você deixar de ter pessoas que você se espelha, mas elas são pessoas como você, elas também erraram bastante, elas passaram pelas mesmas fases que você. Não pense que elas estão lá por serem muito melhores que você, ninguém sabe pouco o suficiente. Aquele seu ídolo pode ser um gênio no JS e mal saber CSS, isso não faz dela ruim. Digo o mesmo para você, você está começando ou já está há um bom tempo na área, não se diminua, tente passar o pouco que você sabe para os outros e você verá que o pouco que você sabe já é muito para outros.\n\nHá alguns dias eu postei na timeline do meu Facebook um vídeo bem interessante, mostrando o criador do Node.JS na sua primeira apresentação.\n\n\n\nUm cara franzino, tímido, embolado com as palavras, que nem sabia se iria funcionar seu side project. E que hoje é só conhecido por ter ajudado na criação da ferramenta de desenvolvimento que mais cresce no mundo.\n\nOu seja, se você é tímido, tem vergonha de se apresentar, tem vergonha do que faz e nunca mostra nada para os outros. Perca esse medo! Contribua no Github, faça um blog, grave vídeos, se mostre! Você pode ser o mais novo grande desenvolvedor da década.\n\n## Conclusão\n\nPosso ter escrito um monte de baboseiras que você deve ter lido e falado super mal, mas eu coloquei aqui, eu não tive medo. Eu poderia ter guardado esses sentimentos e pensamentos só para mim. Mas uma das coisas que eu mais amo da comunidade Dev e que não vejo em nenhuma outra área é a disposição que todos nós temos de ajudar uns aos outros. Eu poderia citar aqui diversos programadores que me ensinaram muito e que me fizeram ser o que sou hoje. E você que está lendo, pode ser mais um a me ajudar, a ajudar os outros e ajudar a si mesmo.\n" }, { "path": "posts/o-que-preciso-saber-para-trabalhar-no-exterior.md", "content": "---\nlayout: post\ndate: 2017-12-03T17:55:35.000Z\ntitle: O que preciso saber para trabalhar no exterior?\ndescription: Algumas coisinhas que você precisa saber para poder conseguir um\n trabalho no exterior e/ou remoto.\nmain-class: dev\ntags:\n - experiencia\n - dicas\n - lifestyle\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Introdução\n\n¡Hola! Diretamente de Santiago de Compostela, estou aqui para escrever mais um post para vocês, espero que gostem. O post vai ficar separado na série [Trabalhar no exterior, remoto, viagens e etc.](https://willianjusten.com.br/series/#trabalhar-no-exterior-remoto-viagens-etc), tem outros dois posts já criados se você ainda não viu e agora tem mais um!\n\nO post de hoje também foi extraído das milhares (sim, foram mais de 6500 perguntas! Várias repetidas, mas mesmo assim! O_O) deste [formulário](https://willianjusten.typeform.com/to/MtDdfi).\n\nEnquanto vou escrevendo esse post, vou ouvindo uma banda muito maneira que o [Wellington Mitrut](https://twitter.com/Wmitrut) me recomendou e que eu curiosamente já até tinha numa das minhas playlists favoritas. A banda em questão é a [Rival Sons](https://open.spotify.com/artist/356c8AN5YWKvz86B4Sb1yf), vai lá e ouve um pouco =)\n\nA ideia aqui será escrever alguns pontos importantes que você precisa saber para conseguir um trabalho no exterior ou então trabalhar remoto para uma empresa do exterior. Não estou dizendo que se você tiver tudo isso você vai conseguir um emprego logo de cara, mas as chances de você conseguir algo serão bem maiores. E se você está achando que eu vou falar que você precisa saber aquele framework da moda e etc, está enganado. Eu vou falar mais sobre coisas que não necessariamente tem só a ver com seu conhecimento técnico. E vamos aos pontos!\n\n

    Perca o medo!

    \n\nIsso mesmo! A primeira coisa que eu digo para você é, perca o medo! Se você está aqui nesse post é porque você provavelmente quer muito trabalhar fora, mas sempre fica com aquilo na cabeça \"Ainda não estou no nível certo. Quando eu aprender X, aí sim eu vou arriscar...\". Deixa isso para lá, se você nunca tentar, você nunca vai saber qual nível de fato que eles querem lá fora. E sabe o que vai acontecer se você não passar? Isso mesmo, **nada!**\n\nNão pense que você está desperdiçando chances se tentar para uma empresa e não conseguir. Pelo contrário, você está se testando e analisando mercado. E muitas das empresas dão uma segunda chance depois de um tempo. Então quer algo melhor do que tentar uma vaga para algum lugar, não passar, mas pelo menos ter uma ideia do que se é pedido?\n\nE quando eu digo perder o medo eu digo de tudo, isso conta aquele seu inglês que é bom e você nem sabe, porque tem medo de falar com qualquer pessoa. Eu vou falar mais disso num próximo ponto, continue lendo =D\n\n## Tenha foco e não tente abraçar o mundo\n\nOutra coisa que acontece demais com todo mundo (to me incluindo aqui) é querermos abraçar o mundo. O que digo com isso? É querer aprender tudo, querer saber Javascript (todos os frameworks lançados a cada segundo, enquanto você está lendo já lançaram 5!), Python, Ruby, Scala, Haskell e até aquela linguagem que você nem sabia que existia, mas te falaram que tem muita procura no mercado lá da Lituânia!\n\nNão importa que todo dia nasce um Framework JS novo, não importa que te falaram que linguagem X dá muito dinheiro nos EUA. Tenha um foco em mente e se especialize naquilo. Existe mercado para todo mundo e ainda mais para aqueles que conhecem bem determinada coisa. Se você está se dedicando a aprender Angular (insira qualquer outra coisa aqui) e está entendendo e evoluindo, não pare só porque disseram que React é mais procurado. Quando você para e começa outra coisa muito frequentemente, você acaba não ficando realmente bom em nenhuma coisa e isso vai te prejudicar se no teste fizerem perguntas mais específicas. Entenda que não estou falando para não testar coisas novas, muito pelo contrário, isso é muito legal e super ajuda! Estou só dizendo para fazer uma coisa de cada vez =)\n\n## Não tenha medo de teoria\n\nMuitos desenvolvedores acabam aprendendo boa parte das coisas na prática e isso é fantástico! Só que dentro disso, está uma pequena armadilha também. Muita gente aprende na prática que se usar X funciona, mas se usar Y não funciona. Só que o mais importante \"Por que isso funciona assim?\", as vezes é deixado de lado. Se você conseguir aliar a teoria à prática, de forma que você realmente entenda os processos, isso além de te salvar horas debugando, vai te permitir ter discussões melhores e ideias melhores sobre determinado assunto. É por isso que muitos testes para fora são mais focados em algoritmos e estrutura de dados, pois eles entendem que se você sabe sobre os processos, aprender o ecossistema da empresa será muito mais rápido e fácil. Então toma um tempinho para dar uma olhada em Algoritmos e Estrutura de Dados, tente fazer alguns desafios do [HackerRank](https://www.hackerrank.com/) ou outros similares, garanto que vai te abrir o mundo.\n\nO [Jean Carlo Emer](https://twitter.com/jcemer) fez uma palestra bem foda falando um pouco disso, [olha os slides aqui](https://www.slideshare.net/jeancarloemer/what-i-learned-interviewing-for-frontend-developer-roles) e o [vídeo aqui](https://www.youtube.com/watch?v=nfk3G3VB0OY).\n\n## Pesquise, pergunte, não tenha dúvidas\n\nSe você tem vontade de trabalhar fora, primeiro você precisa fazer várias perguntinhas e colocar elas numa balanca.\n\n- Quais empresas eu gostaria de trabalhar?\n- Quero trabalhar e viajar ao mesmo tempo?\n- Quero só me mudar do Brasil?\n- Quais países eu gostaria de morar? Esse país é quente, é frio? Será que vou me adaptar?\n- Quais os requisitos que esse país pede?\n\nNão adianta muito você simplesmente dizer que quer trabalhar fora e não se orientar sobre nada, porque bom... Existem centenas de países por aí e se você sequer sabe uma empresa que quer ou um país, como que você vai começar?\n\nTendo algumas ideias, saia perguntando para quem você conhece que já trabalhou no lugar ou que mora próximo, essas coisas. Crie uma rede! As vezes essa pessoa pode te ajudar mais do que você pensa =)\n\n## Inglês, ahh o temido Inglês...\n\nNão poderia deixar de aparecer esse assunto quando falamos em exterior né? O Inglês é uma língua global e fundamental para quem está na área de desenvolvimento, mesmo que você sequer queira trabalhar fora ou se mudar de país. Um tempo atrás eu postei o seguinte no Twitter:\n\n

    A primeira linguagem que você precisa aprender para ser um bom programador é o Inglês =D (Abre portas para o um conhecimento ainda maior)

    — Willian Justen (@Willian_justen) July 26, 2017
    \n\nMuita gente concordou, mas tiveram alguns poucos que não concordaram com a afirmação. Lembrando que eu não estava generalizando e dizendo que se você não sabe inglês, você não é um bom programador. Eu conheço programadores fantásticos, mas que não são tão bons no inglês, mas já estão correndo atrás pelo menos =p\n\nEu falei no [post passado](https://willianjusten.com.br/devs-brasileiros-gringos-trabalhar-exterior/) que temos devs brasileiros tão bons ou até melhores que os programadores lá de fora. Mas o que acontece é que o número de programadores que fala/escreve em inglês é muito superior aos que o fazem em português. Com isso, o material em inglês acaba sendo mais rico e mais vasto. E se você sabe inglês, olha quanto conteúdo maneiro se abre para você? Isso te permite evoluir e aprender muito mais rápido, o que, consequentemente, vai te permitir melhores oportunidades tanto dentro como fora do Brasil.\n\nOk, você já entendeu que o inglês é de extrema importância para nossa área. Mas e aí fica a dúvida, qual nível que eles pedem lá fora? Pessoal, relaxem, ninguém vai te pedir para escrever um livro utilizando a melhor gramática de Oxford ou te fazer dar um discurso para presidente dos EUA.\n\n> O mais importante numa comunicação é entender e se fazer entendido. Nada mais.\n\nClaro que não rola fazer entrevistas se você só sabe o verbo `to be` e `the book is on the table`. Mas se você é capaz de se comunicar (mesmo que lhe falte um pouco de vocabulário e alguns errinhos de concordância) e principalmente de entender o que falam contigo, isso é mais do que meio caminho andado. Você vai ver que depois de um tempo imerso na língua, as dificuldades vão começar a desaparecer.\n\nLembre-se também que, com exceção de EUA, Canadá, UK, a maioria dos outros países também não tem inglês como língua nativa. Isso significa que a mesma dificuldade que você tem as vezes, as pessoas também terão! Eu até hoje não conheci um Francês/Belga que tivesse uma pronúncia 100% correta, é difícil para caramba para eles! O mesmo eu diria dos espanhóis, eu estou passando uma temporada na Espanha e já trabalhei em alguns coworkings aqui onde tinha bastante gente que sabia beeeem pouquinho de Inglês, mas ficavam super felizes de conversar e treinar comigo.\n\nEntão minha dica para vocês é, se dedique em inglês tanto quanto a linguagem de programação, pois o inglês vai te abrir portas muito mais facilmente que só a linguagem.\n\nAí vem aquela outra pergunta bem comum \"Tem como aprender rápido e fácil? Preciso para ontem!\". A resposta para essa pergunta é \"depende\", eu diria que rápido e fácil não tem como. Não espere sair do `Nível Joel Santana` para um palestrante do TEDX da noite para o dia. O inglês como qualquer outra língua requer tempo para que você se acostume e se adapte a ela. Mas existem algumas maneiras que podem ajudar no processo.\n\nEu diria que as melhores formas que eu conheço seriam: Intercâmbio em algum país que tenha inglês como língua nativa ou ter aulas com algum professor de língua nativa. E claro, o mais importante de tudo, é praticar e praticar e praticar. Mudar todas os eletrônicos e contas para o inglês. Assistir séries em inglês, ouvir as músicas e ler as letras. Enfim, tentar ficar o mais imerso possível!\n\nSobre ter aulas com professor de língua nativa, eu conheço o [iTalki](https://www.italki.com/), alguns amigos fazem ou já fizeram e dizem que ajuda bastante. Lá você pode marcar aulas com um professor nativo e ele vai te guiar da melhor forma possível. É muito mais efetivo que uma turma de 20 cabeças no Brasil, por exemplo...\n\nE sobre intercâmbio, eu fiz o meu na Irlanda e você pode ler [nesse post aqui](https://willianjusten.com.br/vindo-morar-e-estudar-na-irlanda/). Eu era uma das pessoas que já tinha um inglês razoável, mas achava que era um bosta completo e tinha muito muito nervoso de falar em inglês até para o espelho! E bom, quando eu cheguei na Irlanda, eu tive que me virar. Claro que na Irlanda tem muitos brasileiros, mas eu sempre me forçava a falar em inglês e também fazia muita coisa sozinho, só para ter que falar.\n\nLembro até hoje que no meu segundo dia em Dublin, eu parei para ver um artista de rua fazendo uma pintura e ele começou a conversar comigo, eu suava da cabeça aos pés, mas fui falando e tentando entender na medida do possível. No final da conversa eu pedi desculpas pelo meu inglês ruim e o cara simplesmente falou \"Eu notei que você não é daqui, mas eu entendi tudo que você falou e você me entendeu também, não é isso que importa?\", me deu um tapinha nas costas e sorriu. Eu saí tão feliz dali que depois disso eu tentava falar sobre qualquer coisa com qualquer um.\n\nTem um outro relato sobre intercâmbio bem legal de um programador também, que você pode [ler aqui](http://www.igorapa.com/fui-aprender-ingles.html). Ele foi para os EUA e também se virou para aprender.\n\nE como sempre, o fórum do FrontendBR sempre tem uma issue bacana para ajudar em qualquer coisa, [você pode ler essa daqui](https://github.com/frontendbr/forum/issues/109).\n\n## Crie um portfólio\n\nNão, eu não estou falando que você precisa criar aqueles sites mirabolantes com os seus 189723871 trabalhos que você na real nem tem e vai ficar desesperado lendo isso. Um portfólio para um dev pode ser uma simples conta no Github com alguns códigos, que podem ser até de estudos mesmo! Você pode ajudar em issues de tradução, criação de documentação, pesquisar por tags como [starter](https://github.com/search?l=&q=label%3Astarter&ref=advsearch&state=open&type=Issues&utf8=%E2%9C%93),[beginner](https://github.com/search?l=&q=label%3Abeginner&ref=advsearch&state=open&type=Issues&utf8=%E2%9C%93) e começar a ajudar as pessoas com as coisas fáceis. Eu escrevi um [post](https://willianjusten.com.br/a-importancia-do-github-para-desenvolvedores/) falando exatamente da importância do Github para o Desenvolvedor.\n\nVocê também pode ajudar mais na comunidade, escrever num blog, participar de eventos, palestrar, etc, isso também ajuda bastante. Mas lembre-se, o objetivo não é começar a fazer essas coisas só porque você quer ganhar visibilidade. Essas coisas vem naturalmente, faça um trabalho bem feito e as pessoas vão começar a te seguir e os convites vão rolar =)\n\nOutra coisa bastante importante para o RH lá fora é ter um [Linkedin](https://www.linkedin.com/in/willianjusten) bem completo, pois muitos headhunters procuram por ali e se você tiver algumas coisas por lá, fica mais fácil de entrarem em contato contigo.\n\n## Mire nas empresas e vai na fé!\n\nSe você acha que já tem tudo acima e só tava com medo [perde esse medo](#perde-esse-medo)! Aplique para as empresas e vê no que vai dar. Talvez você seja reprovado na primeira, na segunda, na décima! Mas o importante é não abaixar a cabeça, não desistir e continuar tentando que uma hora vai!\n\nSobre onde procurar vagas, vou fazer aqui um jabá, a [Toptal tá sempre contratando](https://www.toptal.com/careers), mas tem também o [board do Stackoverflow](https://stackoverflow.com/jobs), o [Linkedin Jobs](https://www.linkedin.com/jobs/) e se algum de vocês conhece outros maneiros, manda que eu coloco aqui!\n\n## Conclusão\n\nBom gente, espero que com esse post vocês entendam que não é um bicho de sete cabeças trabalhar para uma empresa do exterior e que o mais importante está nas Soft Skills. O negócio é não ter medo de tentar, como já diziam \"Quem não arrisca, não petisca!\". E lembrando, isso é uma série de posts, se ficou faltando algo, provavelmente virá em um outro post, então fica ligado nas redes para não perder o próximo post!\n" }, { "path": "posts/onde-baixar-svg.md", "content": "---\nlayout: post\ndate: 2015-01-16T16:51:33.000Z\ntitle: \"#3 - Onde baixar SVG?\"\ndescription: Eu sou programador e não designer, como é que vou fazer essas\n coisas aí? Aqui vou mostrar que não precisa ser designer para poder usar SVG.\nmain-class: svg\ntags:\n - svg\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\n* [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/)\n* [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/)\n\n## Não sei desenhar, não posso usar SVG.\n\nVejo demais essa frase e é pura desculpa. Eu sou um péssimo desenhista e mesmo assim sou um evangelista do SVG. E por quê? Simples, existem milhares de lugares com SVG para baixar de graça ou a preços muito baixos. No [post anterior](https://willianjusten.com.br/como-usar-svg/), eu já expliquei como usar SVG, agora vou apresentar alguns lugares para pegarmos material para podermos começar a brincadeira.\n\n## Bancos de imagens\n\n![Uma tela do shutterstock para baixar](/assets/img/baixar-svg/imagens.png)\n\nAs vezes você quer um background mais legal para a sua aplicação ou um desenho mais elaborado. Nesses bancos de imagens existem muitas imagens em `.png` e `.jpeg`, mas também existem as imagens vetoriais em `.ai`, que são imagens geradas no [Illustrator](http://www.adobe.com/br/products/illustrator.html). Essas imagens podem ser convertidas para SVG facilmente utilizando o próprio Illustrator.\n\n#### Links\n\n* [Shutterstock](http://www.shutterstock.com/pt/cat-29-Vectors.html) - Pago\n* [Vecteezy](http://www.vecteezy.com/) - Free e Pago\n* [SVGCuts](http://svgcuts.com/blog/category/fsvgotw/) - Free\n\n## Ícones\n\n![Vários ícons coloridos](/assets/img/baixar-svg/icons.png)\n\nOs ícones dão um charme a mais em qualquer site, podem ser pequenos, grandes, simples ou cheios de detalhes e cor. E para ajudar a trabalhar com esses ícones, existem vários lugares para baixar esses ícones já em SVG.\n\nParticularmente sou muiiiiito fã do [icomoon](https://icomoon.io/), tanto que farei um post separado, especial só para ele.\n\n#### Links\n\n* [Icomoon](https://icomoon.io/) - Free e Pago\n* [Iconmonstr](http://iconmonstr.com/) - Free\n* [Material Design Icons](https://github.com/google/material-design-icons) - Free\n* [Iconic](https://useiconic.com/) - Pago\n* [Flaticon](http://www.flaticon.com/) - Free e Pago\n* [The Noun Project](http://thenounproject.com/)\n* [Awesome Svg - Icons](https://github.com/willianjusten/awesome-svg/blob/master/topics/Icons.md) - tem mais links aqui\n\n## Patterns\n\n![Uma imagem feita em polígonos](/assets/img/baixar-svg/patterns.jpeg)\n\nParticularmente adoro patterns, acho mega fofinho quando usam alguns fundos com patterns, inclusive eu pensei em utilizar no Blog, só acabei não usando porque eu não decidia o que usar xD\n\nNo ano em que passou, as patterns bombaram e a famosa [técnica de polyart](https://www.google.com.br/search?q=low+poly+art&source=lnms&tbm=isch&sa=X&ei=zFy5VJ-jBoGyggScrYHIBw&ved=0CAgQ_AUoAQ&biw=1438&bih=778) estava em tudo que é lugar. Graças ao SVG a gente consegue fazer essas coisas super legais também.\n\n#### Links\n\n* [Plain Pattern](http://www.kennethcachia.com/plain-pattern/) - Permite criar patterns com ícones em SVG (uso bastante)\n* [Trianglify](http://qrohlf.com/trianglify/) - Famosas texturas de low poly\n* [SVGeneration](http://www.svgeneration.com/) - permite criar diferentes tipos de patterns\n* [Patternbold](http://buseca.github.io/patternbolt/) - alguns tipos simples de patterns\n* [Gerstnerizer](http://eskimoblood.github.io/gerstnerizer/) - gerador minimalista de patterns\n\n## Agora não tem mais desculpa!\n\nJá sabemos [por que usar SVG](https://willianjusten.com.br/por-que-usar-svg/), [como usar](https://willianjusten.com.br/como-usar-svg/) e agora onde baixar SVG. Se você ainda der desculpa para não usar... some daqui. Nos próximos posts iremos começar a colocar a \"mão na massa\" e trabalhar =)\n" }, { "path": "posts/organizando-seu-css-com-itcss.md", "content": "---\nlayout: post\ndate: 2016-02-09T16:08:54.000Z\ntitle: Organizando seu CSS com ITCSS\ndescription: Organizar CSS em larga escala é difícil, mas não precisa ser tão\n assim. Aprenda uma arquitetura para te auxiliar nisso.\nmain-class: css\ntags:\n - css\n - metodologia\n - frontend\ncategories: null\n---\n\n## Introdução\n\nFala aí pessoal, no [último post](https://willianjusten.com.br/falando-sobre-rscss/) falei um pouco de uma metodologia para nomear componentes e como escrever suas propriedades. Mas só isso não serve para manter um projeto em larga escala. Precisamos de uma arquitetura para organizar melhor todos os outros arquivos, que não são necessariamente componentes.\n\nPara escrever esse post, estou ouvindo uma playlist bem calminha chamada [Tarde Acústica](https://open.spotify.com/playlist/6w7C5ACMfEW4nudQuVfKPC?si=zmq5uL4iRJmijlsnNVV06Q), acho que o Spotify me recomenda essa lista há milênios, já ouvi umas vezes, mas tá com umas músicas novas legais. No meio do post eu cansei, tava me deixando mais lento, então resolvi trocar para [Eminem](https://open.spotify.com/artist/7dGJo4pcD2V6oG8kP0tJRR), que fazia um tempo que não ouvia, olha, te falar que rendeu mais xD\n\nPrometo que o post de hoje será menor que o passado, mas não menos importante. A intenção de escrever esse post é unir as duas metodologias aqui no meu blog, assim fica fácil até para eu buscar mais informações depois. Ele será fortemente baseado na [apresentação do criador do itcss](https://speakerdeck.com/dafed/managing-css-projects-with-itcss).\n\n**Obs.:** devido a muitos pedidos e insistências, fiz uma atualização no blog, adicionando um `target=\"_blank\"` em todos os links externos, agora você não vai correr o risco de sair do blog enquanto estiver lendo.\n\n## Problemas comuns do CSS\n\nO CSS é uma linguagem declarativa, que trabalha num escopo global e não possui muitas lógicas e controles de fluxo. Isso significa que podem haver vários e vários conflitos de acordo com a forma que você escreve. Na maioria das vezes, alguma propriedade já foi atribuída numa outra regra e o que você faz é aumentar a especificidade para poder mandar naquela regra. Isso não é legal, pois pode acabar engessando muito o projeto, tendo que aumentar mais e mais as especificidades das regras, cada vez que bater num conflito.\n\n![Gráfico mostrando os problemas do css como especificidade](/assets/img/itcss/css-problemas.png)\n\nVocê pode chegar e falar \"Ah, mas ontem você mostrou o RSCSS, resolve tudo isso!\". Então meu jovem, de fato ele vai te ajudar com os componentes, mas e as propriedades mais globais e distribuídas? E como você vai organizar as variáveis? Onde vai colocar os mixins e placeholders? Isso mesmo, para resolver essas coisas, é necessário algo um pouco mais abstrato para organizar a arquitetura de fato.\n\n## Nasce o ITCSS\n\nA ideia do ITCSS é você montar uma arquitetura que consiga mitigar esses pequenos problemas do CSS. Seu nome por extenso é **I**nverted **T**riangle **CSS**. Que envolve basicamente visualizar todo o CSS em camadas, que montadas formam um triângulo de cabeça para baixo. Essa organização hierárquica ajuda a organizar o CSS da forma mais efetiva, diminuindo conflitos e sobrescritas.\n\nPensando inicialmente no gráfico acima, a ideia é que as mudanças de especificidade sejam mais suaves e com menor número de picos, ficando assim:\n\n![Gráfico mostrando a especificidade usando ITCSS](/assets/img/itcss/itcss.png)\n\nConforme você pode ver no gráfico acima, já temos as divisões, que são a base do ITCSS. Transportando isso para o triângulo invertido, vamos colocar os elementos de mais baixa especificidade na parte superior e quanto maior a especificidade, na parte inferior.\n\n![Triângulo do ITCSS](/assets/img/itcss/triangle.png)\n\n## Mas o que são essas divisões?\n\nEssas camadas são organizadas da mais genérica até a mais específica. E estas são:\n\n### Settings\n\nEssas são as configurações básicas da sua arquitetura. Em geral, são as variáveis globais que vão definir cores, espaçamentos e outras configurações desejadas para o funcionamento do seu framework em si. Perceba que nada aqui será gerado como CSS final, sendo somente utilizado na criação.\n\n```scss\n$color-ui: #BADA55;\n$spacing-unit: 10px;\n```\n\n### Tools\n\nÉ o lugar onde você vai guardar seus mixins e funções necessárias para a construção de seus layouts. Pode ser qualquer coisa, desde mixins de font-face, até mixins de animações, etc. Repare que aqui, nada é gerado diretamente como CSS final também.\n\n```scss\n@mixin font-brand() {\n fotn-family: \"UI font\", sans-serif;\n font-weigth: 400;\n}\n```\n\n### Generic\n\nEssa é a primeira camada que vai de fato aplicar CSS final e ela é destinada para as propriedades mais genéricas e com a menor especificidade possível. Em geral, é onde colocamos resets, `box-sizing`, etc.\n\n```scss\n* {\n box-sizing: border-box;\n}\n```\n\n### Base\n\nAqui ficarão as estilizações básicas, a última camada que veremos seletores em tags diretamente. Portanto aqui ficarão estilos para os headings `h1-h6`, `blockquotes`, `a`, `buttons`, etc. **Mas lembre-se são estilizações BÁSICAS**, nada de estilizar tudo aqui!\n\n```css\nul {\n list-style: square outside;\n}\n```\n\n### Objects\n\nSeguindo os princípios de OOCSS (CSS Orientado a Objetos), aqui é onde iremos ter nossos pequenos \"objetos\", que nada mais são que pequenos pedaços da interface, em geral, padrões que se repetem por todo o site e que podem ter ou não uma camada visual por cima.\n\nAqui é onde fazemos os padrões de botões, listas, paineis, etc. Nesse momento, só é permitido também o uso de classes. Seguindo o padrão do RSCSS, teríamos algo assim:\n\n```scss\n.base-list {\n margin: 0;\n padding: 0;\n list-style: none;\n\n > .item {\n padding: $spacing-unit;\n }\n}\n```\n\n### Components\n\nAqui como o nome já diz, teremos nossos componentes já mais específicos. De acordo com o RSCSS, aqui que vamos jogar todos aqueles componentes/elementos criados. Enquanto nos objetos nós tentamos abstrair o máximo possível, para ter muitos objetos reutilizáveis e genéricos, aqui nós vamos ser específicos ao criar os componentes, mas respeitando as regras do RSCSS de especificidade e também não colocando positions ou outras propriedades que engessem muito o componente a ponto dele não ser reutilizável.\n\nNormalmente, aqui ficarão listas específicas como de produtos, cards específicos como aqueles incluindo imagens, etc. Seguindo o RSCSS, teríamos algo como:\n\n```scss\n.products-list {\n @extend font-brand();\n border-top: 1px solid $color-ui;\n\n > .item {\n border-bottom: 1px solid $color-ui;\n }\n}\n```\n\n### Trumps\n\nPor final temos Trumps, que no RSCSS também são chamados de Helpers. Essa camada é a responsável pela maior especificidade de todas, tendo seus componentes até com `!important`. Mas não se engane e já comece a me xingar falando \"ahhhh, ele usa important, que nojo.\", calma. A ideia dos trumps é que eles sejam usados para classes reativas, comumente aquelas que queremos que aconteça não importa o que aconteça, o clássico `.hidden`. Faz todo sentido que para esses casos, o `!important` seja utilizado.\n\nÉ importante que você não confunda a existência dessa camada e saia colocando tudo aqui, essa camada somente deverá ser utilizada em casos que não vá afetar a estrutura da página.\n\n```css\n.hidden {\n display: none !important;\n}\n```\n\n## Coisas para se prestar atenção\n\nDepois de tudo isso, tem algumas coisas que você deve prestar atenção na arquitetura, como:\n\n- A especificidade vai crescendo linearmente e lentamente de camada a camada.\n- Progressivamente adicionamos estilos, **nunca removemos**.\n- Cada camada é mais detalhada e explícita que a anterior.\n- Se você cria um objeto genérico, ele pode ser extendido/reutilizado, aproveite isso.\n- Tudo que você cria tem um lugar específico para ficar.\n- Trabalhando assim, diga adeus aos problemas de especificidade.\n\n## Extra\n\nSe você quer fazer um teste rápido de alguma coisa, seja uma nova cor para os elementos ou etc, você pode criar uma camada entre `components` e `trumps`.\n\n![Triângulo do ITCSS](/assets/img/itcss/theme.png)\n\nColocando ali, você garante que ele será lido por último no CSS e consequentemente será o mandatório nas modificações. Essa técnica é bastante utilizada na [Booking.com](http://www.booking.com/), que é famosa por fazer muitos testes A/B.\n\n## Conclusão\n\nBom galera, com isso eu fecho o básico para termos um bom padrão de escrita e arquitetura de nosso CSS. Espero que tenha sido útil para vocês, assim como foi para mim (sim, eu estudei bastante junto). Qualquer dúvida ou comentário, não deixem de fazer aqui ou nas redes sociais.\n" }, { "path": "posts/perfomance-web-critical-css-e-jekyll.md", "content": "---\nlayout: post\ndate: 2018-03-21T07:55:37.000Z\ntitle: \"Perfomance Web: Critical CSS e Jekyll\"\ndescription: A web é lenta, mas sempre podemos deixar mais rápido, mais uma dica\n simples para melhorar seus sites.\nmain-class: dev\ntags:\n - performance\n - css\n - jekyll\ncategories:\n - Performance Web\n---\n## Introdução\n\nOlá galera, continuando com os [posts sobre performance](https://willianjusten.com.br/series/#performance-web), hoje vamos falar sobre uma técnica bem interessante e importante para que possamos entregar nosso site de forma mais eficiente.\n\nEnquanto vou escrevendo esse post, vou ouvindo [Kishi Bashi](https://open.spotify.com/artist/3LVPGE5jPPwtbGslx07YR0?si=6_TVym1hRf60MBJaNh-3tg), um multi-instrumentista fantástico!\n\n## Render Blocking\n\nSe você usou o Lighthouse que falamos [post sobre a ferramenta](https://willianjusten.com.br/medindo-performance-do-seu-site-com-lighthouse/), talvez tenha visto algo como mostrado na imagem abaixo:\n\n![Imagem mostrando sobre o render blocking](/assets/img/screen shot 2018-03-20 at 20.42.21.png)\n\nEle diz que estilos carregados externamente bloqueiam a renderização da página e diz para considerar usar o CSS crítico via `\n```\n\nVocê pode ver o [exemplo do meu blog aqui](https://github.com/willianjusten/willianjusten.com.br/blob/ecde3bd2481c24889932e1abaa5900a68cdc7769/_layouts/default.html#L10-L12). Com isso, a página irá ter somente o css de forma `inline`, além de evitar um block rendering, você vai evitar uma requisição extra, yey!\n\n## Conclusão\n\nEspero que tenham entendido a importância do CSS crítico e que eu tenha gerado boas ideias para vocês. Para quem estiver usando Jekyll ou outro gerador estático, deu para ver que é bem fácil de fazer. Rumo a uma web mais rápida! \\o/\n" }, { "path": "posts/performance-web-evite-escrever-html-demais.md", "content": "---\nlayout: post\ndate: 2018-05-29T11:10:42.000Z\ntitle: \"Performance Web: Evite escrever HTML demais\"\ndescription: Calma, HTML ainda é importante, mas é legal ficarmos atentos a\n quantidade de nós criados.\nmain-class: dev\ntags:\n - performance\n - seo\ncategories:\n - Performance Web\n---\n## Introdução\n\nDando continuidade aos [posts sobre performance](https://willianjusten.com.br/series/#performance-web), hoje vou falar sobre um coisa que muita gente nem se liga, mas que é bastante importante para a performance de uma página. Sim, estou falando do HTML!\n\nEnquanto escrevo esse post, vou ouvindo [God Is An Astronaut](https://open.spotify.com/artist/079svMEXkbT5nGU2kfoqO2?si=XwF693duRLat7Dk5v3G_nw), uma banda de Post-Rock fantástica, que eu gosto demais. Inclusive, tem uma [issue no FrontendBR](https://github.com/frontendbr/forum/issues/1103) com algumas recomendações de músicas, dá uma olhada lá também =)\n\n### Otimizar CSS, melhorar JS, mas e o HTML?\n\nQuando a gente começa a falar de performance, todo mundo vai logo pensando em remover aquelas classes do CSS que não está usando. Ou então melhorar o código JS, mover para o final da página, evitar fazer repainting e outras mil coisas mais.\n\nSó que, e o HTML? Será que ele não é importante também? Cada pedaço de HTML que você escreve, é uma parte do DOM, ou seja, a cada `
    ` nós temos um nó no DOM. E um DOM muito grande pode prejudicar a performance de muitas maneiras. Por exemplo:\n\n* `Performance no carregamento`: se você está criando um DOM muito grande, você pode estar enviando muitos bytes desnecessários. Em resumo, um HTML maior, significa um arquivo maior sendo baixado.\n* `Demora para o browser entender o conteúdo`: se o conteúdo for muito grande, o browser precisa primeiro ler tudo, para só então montar a página. O problema é que muitas vezes esse \"DOM extra\" nem sequer vai ser mostrado na primeira dobra da página. Isso faz com que o usuário demore mais tempo para poder interagir com o conteúdo da página.\n* `Gasto de memória`: toda página que o browser está acessando gasta uma certa quantia de memória, seja para poder \"pintar\" na tela o conteúdo, seja para informar ao JS os seletores que você possa estar trabalhando. Se o conteúdo for muito grande, mais pesado o processo fica e com isso mais memória é pedida.\n\nBom, espero que com os pontos acima você já esteja no mínimo assim:\n\n> Ai meu Deus! Sou eu quem faço o Chrome gastar 98% da minha memória!\n\nPara melhorar isso, vou colocar aqui algumas dicas que podem ajudar a melhorar seu HTML e evitar esse monte de problemas.\n\n## Dicas e recomendações para melhorar o HTML\n\n* Tenha menos que 1500 nós no total\n* Tenha no máximo uma profundidade de 32 nós no documento\n* Evite que o elemento pai tenha mais que 60 filhos\n\nSó com essas primeiras dicas, certeza que alguém pensou:\n\n> E como eu vou saber o número dessa caralha toda?\n\nFique tranquilo, lembra daquele [post sobre o Lighthouse](https://willianjusten.com.br/medindo-performance-do-seu-site-com-lighthouse/)? Então, o Lighthouse vai lhe informar direitinho esses números e se já estiver bom, meus parabéns!\n\nContinuando com as dicas:\n\n* Evite entregar muito HTML que não vá ser visível na página. As vezes é melhor entregar conforme a necessidade do usuário, seja durante seu scroll ou o click de um botão.\n* Faça paginação caso haja a necessidade (irei mostrar esse ponto mais a frente)\n* Caso não tenha jeito e você precise mesmo entregar todo o html, tente [melhorar e simplificar seus seletores css](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations)\n\n## Estudo de caso\n\nBom, como eu escrevo já faz um tempinho, acaba que eu tenho um número considerável de posts. Na minha home eu estava carregando todos os posts de uma só vez, sem nenhum tipo de paginação e é claro, o Lighthouse acusou que eu estava usando um número excessivo de nós e com isso minha performance estava sendo prejudicada. Segue abaixo um screenshot de como estava antes:\n\n![Um screenshot indicando que a performance da pagina era de 96. Tendo como indicador vermelho, um numero de 2824 nós.](/assets/img/antes-paginacao.png)\n\nRepare que apesar da performance já estar boa, com a nota 96, muito disso devido a outras mudanças que fui fazendo junto com a [série de Performance Web](https://willianjusten.com.br/series/#performance-web), eu estava com um número excessivo de nós, no valor de **2824 nós!**\n\nApós ver isso, eu resolvi que estava na hora de melhorar isso e apliquei uma paginação no meu blog, usando a [documentação do Jekyll](https://jekyllrb.com/docs/pagination/), que fez o processo ser muito fácil.\n\nEu botei que cada página iria ter 21 posts, divisível por 3 já que tenho 3 colunas de cards. Continua sendo um número super grande de posts por página, porém a diminuição de nós foi considerável e isso me deu melhorias, como você poderá ver abaixo:\n\n![Um screenshot indicando que a performance da pagina era de 98. E o antes indicador vermelho, agora é verde e com o valor de 618.](/assets/img/depois-paginacao.png)\n\nComo podem perceber, minha nota passou para 98, mas não é isso que importa, mas outros marcadores também foram melhorados, como:\n\n- First Contentful Paint: **-310ms** (melhoria de **~22%**)\n- Estimated Input Latency: **-33ms** (melhoria de **~39%**)\n- Speed Index: **-1060ms** (melhoria de **~49%**)\n\nE o que esses dados significam? Significa que eu já mostro o conteúdo na tela de forma mais rápida (First Contentful Paint), o usuário também já consegue interagir mais rápido (Estimated Input Latency) e a velocidade num geral do site aumentou (Speed Index).\n\n## Conclusão\n\nA ideia desse post é mostrar que as vezes de onde menos esperamos, podemos melhorar. A gente sempre se preocupa com outras coisas no nosso site, mas nos esquecemos que o HTML também é importante. Como podem notar, pelo simples fato de criar uma paginação no meu blog, eu já dei uma melhorada em vários índices de velocidade. Meu próximo passo é reescrever todo o CSS e os seletores para seguir alguma metodologia, é bem possível que eu siga para a [Metodologia BEM](http://getbem.com/), que tem sido a mais indicada pela [Google](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations).\n" }, { "path": "posts/performance-web-usando-fontes-do-sistema.md", "content": "---\nlayout: post\ndate: 2018-03-19T10:41:16.000Z\ntitle: \"Performance Web: Usando fontes do sistema \"\ndescription: Como algo tão simples como as fontes podem ajudar na performance do seu site.\nmain-class: dev\ntags:\n - performance\n - fontes\ncategories:\n - Performance Web\n---\n## Introdução\n\nDando continuidade aos [posts sobre performance](https://willianjusten.com.br/series/#performance-web), hoje vai ser um post bem simples e rápido. As vezes é bom ler algo rapidinho, mas que seja útil.\n\nEnquanto escrevo, vou ouvindo a minha Playlist [Top Songs 2017](https://open.spotify.com/user/spotify/playlist/37i9dQZF1E9YL5rXG87YIz?si=WnC4pxyAQD-RFTnV-xPABA), ou seja, as músicas que mais ouvi ano passado. Pois é, hoje to saudosista.\n\n## Uso de fontes\n\nBem lá no início da web, nós não podíamos ter escolha para fontes, era o que o sistema tinha basicamente (que era bem mal suportado e feio). Depois então vieram as fontes customizáveis, bastava baixar a fonte e colocar na sua pasta de assets, depois usar o `@font-face` e você podia ter aquele conjunto lindo de fontes que seu site tanto queria!\n\nCom o tempo foram vendo que muitas fontes eram repetidas e até mesmo que alguns usavam essas fontes customizáveis de forma correta e outros não. Foi aí que nasceram projetos como o [Google Fonts](https://fonts.google.com/) e o [Typekit](https://typekit.com/), que são catálogos com diversas fontes que basta você escolher e eles já servem a fonte para você. O Google gera para você algo como:\n\n```html\n\n```\n\nNote que você pode inclusive escolher o peso da fonte como `400,600,700,800`. Mas conforme vamos escolhendo as fontes, o próprio Google vai avisando se é leve ou pesado.\n\n![Imagem do Google Fonts, mostrando um Load Time: Slow](/assets/img/fonts.png)\n\nSerá que vale a pena então carregar fontes pesadas no seu site? Em alguns sites realmente não é possível largar a mão de alguma fonte, já que tem marcas que são feitas todas em cima de alguma tipografia. Mas se você puder fazer essa escolha, por que não?\n\n## Use fontes que o usuário já está acostumado\n\nNos últimos tempos os sistemas trabalharam e evoluíram muito nas suas fontes. A Google tem feito um trabalho legal com a [Roboto](http://www.google.com/design/spec/style/typography.html), a Apple tem trabalhado na [San Francisco](https://developer.apple.com/fonts/) e a Mozilla também tem sua [Fira Sans](http://mozilla.github.io/Fira/). E a Microsoft? Ela também! Desde a interface Metro a Microsoft trabalhou muito na fonte deles, fortemente inspirada na [Segoe](https://en.wikipedia.org/wiki/Segoe).\n\nE pense comigo, o usuário já passa o dia inteiro usando interfaces com essas fontes, por que mudar isso? Minha preocupação no blog é exatamente com a leitura, então não quero ficar mudando o comportamento do leitor. \n\nE como o nome já diz, as fontes são do sistema e com isso, não é necessário carregar nem **1Kb** a mais por isso, quer algo melhor que isso?\n\n## Como usar as fontes do sistema?\n\nApesar de parecer ser super simples, não é tãaao assim também. Você precisar tomar cuidado na ordem das fontes, até para não receber resultados indesejados. O Github utiliza o seguinte approach:\n\n```css\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \n Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n```\n\nE o Medium/Wordpress fazem umas pequenas mudanças e usam:\n\n```css\nbody {\n font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\n Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;\n}\n```\n\n**Nota:** esse método só pode ser usado com `font-family`, não utilize como `font`, pois poderá resultar em estilos inesperados.\n\n## Conclusão\n\nComo venho me preocupando com performance, posso dizer que a remoção de fontes customizáveis já resultou num ganho muito grande de velocidade, então, se você tiver essa oportunidade de usar fontes do sistema, se joga!\n\nÉ isso, um post leve e simples hoje, mas não menos importante. Continue ligado que muitos posts sobre performance ainda vem por vir! Vem coisas sobre PWA, acessibilidade e mais!\n" }, { "path": "posts/perguntas-e-respostas-jekyll.md", "content": "---\nlayout: post\ndate: 2015-01-21T08:15:41.000Z\ntitle: Perguntas e Respostas - Jekyll\ndescription: Algumas dúvidas comuns sobre o Jekyll. Entenda melhor como funciona\n esse gerador estático.\nmain-class: jekyll\ntags:\n - jekyll\ncategories: null\n---\n\n## Introdução\n\nDesde a criação do meu blog e dos posts [making of - parte 1](https://willianjusten.com.br/making-of-parte-1/) e [making of - parte 2](https://willianjusten.com.br/making-of-parte-2/), apareceu um grande número de pessoas mais interessadas em Jekyll e o modelo de gerador estático.\n\nÉ claro que com esse interesse, surgiram várias dúvidas, que não puderam ser explicadas somente com os dois posts. Tiveram várias pessoas que vieram me perguntar alguns detalhes em particular e o [William Goulart](https://github.com/wgoulart) colocou [essa issue](https://github.com/felipefialho/1-post-por-dia/issues/20) no nosso [repositório destinado a dúvidas e pedidos de posts](https://github.com/felipefialho/1-post-por-dia/), que o grande [Luiz Felipe](https://github.com/felipefialho) criou.\n\nResolvi pegar todas essas perguntas e respondê-las aqui, assim todo mundo terá acesso a essas dúvidas comuns. Esse post deu um trabalho do caramba, faça o favor de ler! =)\n\n## Índice\n\n* [Jekyll serve só para Blog?](#soblog)\n* [Como funciona exatamente?](#comofunciona)\n* [Quais comandos que o Jekyll tem?](#rodar)\n* [O que é esse tal de Front Matter?](#frontmatter)\n* [O que são variáveis globais?](#globais)\n* [Existem mais variáveis?](#outras)\n* [Como usar as variáveis?](#variaveis)\n* [Quais funções/comandos temos no Jekyll?](#funcoes)\n* [Como crio um post?](#post)\n* [Como crio uma página?](#pagina)\n* [Meu css e imagens não estão pegando! O que faço?](#arquivos)\n* [O que eu tenho que subir para o servidor?](#servidor)\n* [Como compilar o Sass?](#sass)\n* [Como faço para mostrar código colorido?](#highlight)\n* [Como usar esse sistema de comentários?](#disqus)\n* [Como crio as urls amigáveis? (permalink)](#permalink)\n\n

    Jekyll serve só para blog?

    \n\nNão, ele pode ser utilizado para gerar qualquer tipo de site estático, seja ele um blog, um site institucional ou o que você quiser criar. Se quiser, tem essa \"pequena\" [lista de sites usando jekyll](https://github.com/jekyll/jekyll/wiki/Sites).\n\n

    Como funciona exatamente?

    \n\nOutra dúvida bastante comum é como funciona o Jekyll, o que ele faz, etc. Quando iniciamos um novo projeto, com o comando `jekyll new novo-projeto`.\n\nEle cria um conjunto de pastas básicas:\n\n* `_includes`: são trechos que se repetem ao longo do site e podem ser incluídos sem ter que digitar tudo.\n* `_layouts`: como o nome já diz, é a estrutura básica das páginas, em geral são 3 tipos: `default` para a página de inicial ou listagem de posts. A `page` que serve para criação de páginas diferenciadas com qualquer conteúdo e `post`, que é a página de posts.\n* `_posts`: onde iremos escrever nossos posts, o padrão para escrever é em [Markdown](http://daringfireball.net/projects/markdown/syntax)\n* `_sass`: os arquivos que geram o css, se você preferir trabalhar em [sass](http://sass-lang.com/), o próprio jekyll compila para você.\n* `css`: pasta para onde vão os arquivos gerados pelo sass.\n* `_config.xml`: o arquivo de configurações do seu blog, qualquer dado universal ao blog, deve ser colocado lá. Assim como outras definições, como qual tipo de markdown usar, excludes e etc.\n* `about.md`: um arquivo do tipo `page` que irá gerenciar uma página /about\n* `feed.xml`: arquivo para gerar o feed para o seu blog, essencial para que as pessoas possam seguir seu blog com mais facilidade.\n* `index.html`: A página inicial do seu blog\n\nE quando mandamos compilar os arquivos usando o comando `jekyll build` ou `jekyll serve` ele irá criar uma pasta chamada `_site`, que irá conter toda a parte estática do seu site. Essa parte estática é criada com base em todos os arquivos e pastas do projeto, pastas e arquivos que iniciam com `_` não serão recriados dentro da pasta `site`, todo o resto será jogado lá de forma já compilada.\n\n

    Quais comandos que o Jekyll tem?

    \n\nO Jekyll é bastante simples, então possui basicamente 3 comandos:\n\n* `jekyll new nome-do-projeto` : comando utilizado para criar um novo projeto.\n* `jekyll serve` : serve para iniciar um servidor (na porta 4000 por padrão) e ficar assistindo os arquivos.\n* `jekyll build` : para gerar os arquivos estáticos\n\n

    O que é esse tal de Front Matter?

    \n\nO Jekyll utiliza o [YAML](http://yaml.org/) e para guardar e organizar informações, ele utiliza o Front Matter, que deve ser a primeira coisa a ser escrita no arquivo e as informações devem ser escritas entre o par de três traços, conforme a sintaxe do YAML, segue abaixo um exemplo:\n\n```yaml\n---\nlayout: default\ntitle: Um nome legal para o meu Blog\n---\n```\n\nDe acordo com a sintaxe, colocamos o nome da variável seguido de 2 pontos e o valor para a variável, que pode ser qualquer valor ou conjunto de valores. Segue alguns exemplos abaixo:\n\n```yaml\n---\nlayout: post\ntitle: \"Perguntas e Respostas - Jekyll\"\ndate: 2015-01-21 06:15:41\nimage: '/assets/img/perguntas-jekyll/img-share.png'\ndescription: \"Algumas dúvidas comuns sobre o Jekyll. Entenda melhor como funciona esse gerador estático.\"\ntags:\n- jekyll\n- frontend\n---\n```\n\n

    O que são variáveis globais?

    \n\nExiste um arquivo YAML que será lido inteiramente pelo projeto, que é o `_config.yml`. Portanto, qualquer variável colocada naquele arquivo, poderá ser chamada em qualquer parte do projeto. Existem umas variáveis pré-definidas:\n\n* `layout` : serve para definir qual arquivo dentro da pasta `_layouts` irá utilizar.\n* `permalink` : serve para definir como será criado o link - [veja mais sobre](#permalink).\n* `published` : para definir se o arquivo poderá ser gerado ou não, o padrão é `true`.\n* `category ou categories` : como o nome já diz, define uma categoria ou conjunto delas para o post.\n* `tags` : serve para definir um conjunto de tags para o post, acima temos um exemplo.\n\n

    Existem mais variáveis?

    \n\nAlém das variáveis globais, as páginas e o site também possuem um conjunto de variáveis. Vou listar aqui as mais importantes de cada, caso queira saber alguma bem específica, tem sempre a [documentação](http://jekyllrb.com/docs/variables/).\n\n#### Variáveis do site\n\n* `site.pages` : uma lista de todas as páginas do site.\n* `site.posts` : uma lista de todos os posts do site.\n* `site.categories.CATEGORIA` : uma lista de todos os posts daquela categoria.\n* `site.tags.TAG` : uma lista de todas os posts daquela tag.\n\n#### Variáveis da página\n\n* `page.content` : o conteúdo da página.\n* `page.title` : o título da página.\n* `page.url` : a url da página em questão.\n* `page.date` : a data da página, tendo a estrutura `YYYY-MM-DD HH:MM:SS +/-TTTT`\n* `page.tags` : mostra quais tags que a página pertence.\n\n

    Como usar as variáveis?

    \n\nDepois de a variável criada, basta chamá-la utilizando a sintaxe de moustache, `{ {` variável `} }`. Se a variável for específica de um front matter, devemos especificar, abaixo seguem exemplos. **Aviso: não existem espaços entre as chaves, tive de colocar senão não daria para mostrar xD**\n\n```html\n\n\n{ { page.title } }\n\n\n

    { { post.title } }

    \n\n\n{ { title } }\n```\n\n\n

    Quais funções/comandos temos no Jekyll?

    \n\nComo o Jekyll é feito em Ruby, temos a nossa disposição uma base de comandos de ruby e seu modelo de templates. **Lembrando que não devem existir espaços entre as chaves**\n\nPodemos incluir arquivos utilizando o comando `{ % include % }`, segue abaixo o código do meu layout `default`.\n\n```html\n\n\n { % include head.html % }\n \n { % include svg-icons.html % }\n { % include header-default.html % }\n
    \n { { content } }\n
    \n { % include footer.html % }\n \n\n```\n\nPodemos iterar uma lista de posts utilizando o comando `{ % for variavel in conteudo % }`, segue abaixo o loop que utilizo para mostrar as tags de um post:\n\n```html\n
    \n { % for tag in post.tags % }\n { { tag } }\n { % endfor % }\n
    \n```\n\nTemos também a possibilidade de utilizar as condicionais `if`, `else if`, `else`. Segue um exemplo abaixo, que utilizo para setar uma imagem default para a og:image. Aproveitando, já mostro uma outra função no Jekyll, que é a possibilidade de usar pipes `|` para encadear comandos ou criar filtros, no caso abaixo, utilizo para adicionar a url base do site na frente do caminho para a imagem.\n\n```html\n{ % if page.image % }\n \n{ % else % }\n \n{ % endif % }\n```\n\n

    Como crio um post?

    \n\nPara criar um post, basta um arquivo dentro da pasta `_posts` na seguinte formatação `ANO-MES-DIA-titulo.MARKUP`. Onde o markup padrão é `.markdown` ou `.md`, podendo utilizar outros, caso desejar.\n\n

    Como crio uma página?

    \n\nBasta criar um arquivo `html` na raiz do sistema e ela será gerada na pasta `_site` como `nomedoarquivo/index.html`. E com isso a url será `nomedosite.com.br/blog/nomedoarquivo/`.\n\n

    Meu css e imagens não estão pegando! O que faço?

    \n\nUma das perguntas que mais me fizeram, mas é uma coisa bastante simples, só precisa de um cuidado na hora de fazer as chamadas. Existem as urls relativas e as absolutas, exemplo:\n\n* `/assets/img/imagem.png` : url relativa\n* `http://meusite.com.br/blog/assets/img/imagem.png` : url absoluta\n\nQuando for fazer as chamadas, dê preferência por apendar a url base do seu site, assim evita que ele busque de um diretório não existente.\n\n

    O que eu tenho que subir para o servidor?

    \n\nDepende. Se você estiver utilizando o github pages, suba somente as pastas base, sem a pasta `_site`, pois ele irá gerar o conteúdo para você diretamente do servidor deles. Se você estiver utilizando um servidor próprio, suba somente o conteúdo dentro da pasta `_site`, que são os arquivos estáticos.\n\n

    Como compilar o Sass?

    \n\nO próprio Jekyll já compila o Sass, o único passo importante é adicionar o front matter no arquivo principal do sass. Pode adicionar só os traços, que são o suficiente. Exemplo:\n\n```css\n---\n---\n\n@import \"base\"\n@import \"functions\"\n```\n\n

    Como faço para mostrar código colorido?

    \n\nO próprio jekyll usa por padrão o [pygments](http://pygments.org/) para poder marcar os códigos. Basta definir no `_config.yml`:\n\n```yaml\nhighlighter: pygments\n```\n\nE então adicionar o seu código dessa forma:\n\n```html\n\n{ % highlight linguagem % }\ncódigo a ser mostrado\n{ % endhightlight % }\n```\n\n

    Como usar esse sistema de comentários?

    \n\nO sistema que eu utilizo para comentários é o [Disqus](https://disqus.com/) e é bastante fácil fazê-lo funcionar. Basta [criar uma conta](https://disqus.com/profile/signup/) no Disqus, solicitar um token para o seu site e então adicionar ao seu site no footer. O script do meu site ficou assim:\n\n```js\nvar disqus_loaded = false;\n\nfunction load_disqus()\n{\n disqus_loaded = true;\n var disqus_shortname = 'willianjusten';\n var disqus_title = '{{page.title}}';\n var disqus_url = '{{page.url}}';\n var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;\n dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';\n (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);\n var ldr = document.getElementById('disqus_loader');\n};\nwindow.onscroll = function(e) {\n if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 800)) {\n //hit bottom of page\n if (disqus_loaded==false)\n load_disqus()\n }\n};\n```\n\nUm detalhe que acho interessante, é não carregar o Disqus logo que o blog é aberto, afinal de contas, a pessoa não vai direto para os comentários. Assim a gente melhora a performance e carregamento de nosso blog. Um esquema que eu faço é analisar o tamanho da página e um pouco antes da página finalizar, eu disparo uma trigger que carrega o disqus.\n\nEnquanto a pessoa vai lendo e descendo, eu faço o carregamento, quando o usuário chega nos comentários, já está carregado e ela não sofreu nenhum problema com isso, **usabilidade sempre!**\n\n

    Como crio as urls amigáveis? (permalink)

    \n\nCriar permalinks é a coisa mais fácil do mundo no Jekyll e isso é lindo demais =)\nBasta definir no `_config.yml` como você quer que seja o link, seguem exemplos abaixo:\n\n```yaml\n# comportamento default\npermalink: /:categories/:year/:month/:day/:title.html\n\n# mostrando a categoria/titulo\npermalink: /:category/:title\n\n# mostrando somente o título\npermalink: /:title/\n```\n\nSe quiser saber de mais alguns tipos, só olhar [aqui](http://jekyllrb.com/docs/permalinks/).\n\n## Conclusão\n\nBoooom, foi um post meio grandinho, mas com bastante coisa interessante para quem está querendo se aprofundar melhor em Jekyll. Sua dúvida foi solucionada com o post? Agradeça nos comentários =)\nNão foi solucionada? Pergunta nos comentários e eu atualizarei constantemente com a resposta.\n" }, { "path": "posts/por-que-ir-em-eventos-vale-a-pena.md", "content": "---\nlayout: post\ndate: 2015-03-29T14:35:14.000Z\ntitle: Por que ir em eventos vale a pena?\ndescription: Alguns dos motivos que fazem os eventos serem tão sensacionais e\n que todos deveríamos ir.\nmain-class: misc\ntags:\n - eventos\n - frontend\ncategories: null\n---\n\n## Introdução\n\nOlá galera, nesse exato momento estou escrevendo do avião, voltando para o Rio de Janeiro, depois de palestrar em Belo Horizonte. Estou tão feliz com tudo, que resolvi falar aqui, o porquê de ser tão bom ir a eventos.\n\nIrei falar um pouco da minha experiência nessa viagem/evento e o que adquiri com isso. Prometo não fazer um post gigante, até porque a viagem é pequenina também.\n\n## Viagem\n\nEu sempre falo para os meus amigos, que uma das melhores coisa da vida é viajar. Porque conhecemos coisas novas, pessoas diferentes, culturas diferentes e isso agrega bastante para nós como pessoas. Quer uma oportunidade melhor de crescer pessoalmente e ainda aprender tecnologias do que num evento?\n\n## Amigos antigos\n\nDessa vez eu tive a oportunidade de viajar com o [Pedro Polisenso](http://pedropolisenso.com/) e o [Diego Ramos](https://github.com/rdiego26), dois caras fantásticos e que fizeram a viagem ainda mais divertida. Nunca tínhamos viajado juntos e foi uma oportunidade e tanto, para trocar conhecimentos, tanto na área de dev, como sobre coisas da vida também.\n\nLá, eu também já conhecia uma galera ([Yan Magalhães](https://twitter.com/yaanmagale), [Lucas Maia](http://twitter.com/lucasmaiaesilva), [Fernanda Feliciano](https://www.facebook.com/fernandafeliciano), [Felipe Siqueira](https://www.twitter.com/flipggs) e mais...) e com isso, já ganhei hospedagem de graça e ainda guias turísticos!! =)\n\n## Amigos novos\n\nUma das melhores coisas num evento é poder conversar com gente nova e aprender com elas. Me diverti demais nos 3 dias em que fiquei em BH e conheci muiiiita gente! Pessoas que já me conheciam, até pelo blog e outras que nunca tinham ouvido falar no meu nome também. Ganhei contatos de trabalho, mais novos amigos dispostos a oferecer hospedagem free e, é claro, dispostos a sair, se divertir e estudar juntos.\n\nAgradecimentos para [Tiago Porto](http://twitter.com/_tiagoporto), [Dayman Novaes](http://twitter.com/daymannovaes) e todos os outros, que foram mega atenciosos comigo e me mostraram vários lugares legais =)\n\n## Conhecimento\n\nÉ claro que num evento sobre programação, teremos muitos assuntos legais, coisas novas, coisas antigas e sempre em diferentes pontos de vista. E o mais importante é não deixar aquilo morrer ali, é marcar os links, pedir os slides e estudar depois!\n\n## Injeção de ânimo\n\nComo, em geral, o evento começa de manhã, termina no início da noite e sempre fazemos um happy hour depois, acaba sendo muito cansativo. Mas a sensação de dever cumprido, de conhecimento adquirido e de ter feitos novas amizades é sempre uma ótima injeção de ânimo. Te dizer que estou morto desses dias, mas ao mesmo tempo estou bem melhor e mais confiante de quando eu fui para BH.\n\n## Conclusão\n\nAcho que depois de tudo que falei, provavelmente você já deve ter se animado para ir em algum evento e esse já é um bom começo, agora procure pelos eventos que vão acontecer, tanto na sua cidade quanto em outras. Se planeje e vá! As vezes você pode ficar na dúvida e achar que está caro, mas todo esse dinheiro será bem recompensado. Costumo dizer que ir a eventos é um investimento que vale muito!\n" }, { "path": "posts/por-que-usar-jekyll.md", "content": "---\nlayout: post\ndate: 2015-01-05T23:18:29.000Z\ntitle: \"Flame War: Por que usar Jekyll?\"\ndescription: \"Depois de várias dúvidas, aqui vai uma lista de razões para se\n utilizar o Jekyll para criação de Blogs de desenvolvimento. \"\nmain-class: jekyll\ntags:\n - jekyll\n---\n\nOlá pessoal, hoje terá um post extra! Não vai se acostumando! E brincadeirinha, não vai rolar flame war aqui, assim espero =o\n\nBom, como disse no [primeiro post](https://willianjusten.com.br/making-of-parte-1/) e expliquei um pouco melhor no [segundo post](https://willianjusten.com.br/making-of-parte-2/), eu utilizei o [Jekyll](http://jekyllrb.com/), que é um gerador estático, para criar o meu Blog. Algumas pessoas acharam muito legal a ideia, disseram até que já haviam pensado em criar utilizando o Jekyll ou outros geradores estáticos. Mas tiveram algumas pessoas que ficaram ainda com dúvidas de porque utilizar o Jekyll e não fazer na mão ou em um Wordpress. E teve um amigo de um grupo do qual eu participo que fez a seguinte postagem.\n\n> Quero abrir aqui uma discussão sobre o furor gerado em cima do Jekyll.\nGostaria que fosse deixado de lado a paixão e orgulho de ser desenvolvedor e fosse debatido o exato motivo de uso da ferramente e que me dissessem porque vocês a usam, se usam.\nBom, o Jekyll é usado para sites estáticos. Sites estáticos para mim são aqueles que não precisam muito de atualizações de conteúdo nem de inserção de conteúdo em tempo real. Pois bem, então porque eu ao fazer um site estático em html eu usaria o Jekyll, tendo de configurar várias coisas programaticamente e ainda ter de diagramar os conteúdos em Markdown? Tudo sem um respaldo visual.\nSe o problema é o reuso de trechos do site e utilização de templates, bom, eu não uso dreamweaver mas sei que lá é possível usar templates. No bracktes também tem uma extensão para isso.\nPor outro lado, tenho visto muita gente batendo no peito pra dizer que tem um blog feito em Jekyll. Mas um blog, pra mim, não se enquadra como um site estático. Um blog em Jekyll pra mim só funcionaria para um entusiasta, pois um cliente não ficaria muito confortável em alimentar seu blog via bloco de notas usando Markdown. Não é prático pra mim.\nEu olho o Jekyll e só consigo pensar, \"nossa, que legal, esse Ruby compila um site todo escrito em Markdown e YAML para html estático! mas, e ai?\" cadê a real praticidade?\nBom, vamos ver as opiniões, quero entender melhor isso de idolatrar Jekyll pra saber se fiz um julgamento errado.\n\nAntes de mais nada, quero deixar claro, que achei a dúvida bastante pertinente e imagino que várias outras pessoas tenham essas mesmas dúvidas. Por isso, eu vou listar aqui, algumas das razões de se utilizar o Jekyll para se criar um blog para desenvolvedores.\n\n`1)` Simplicidade: o jekyll, diferente de outros sistemas, irá te dar somente o mínimo possível para você iniciar um blog, não terão milhares de arquivos em .php, trabalhando em cima de um framework ou um código complicado de se entender inicialmente.\n\n`2)` O Jekyll diferente da maioria dos CMS's não possui banco de dados e com isso elimina a dependência de ter um servidor que suporte o banco necessário. Outro motivo é o loading da página que diminui consideravelmente, visto que não existirá nenhuma requisição do banco.\n\n`3)` O Jekyll é extremamente leve, por ser estático, poucas requisições são feitas e não existe nada processado no servidor, como outras linguagens comuns para blogs.\n\n`4)` Controle no Design, diferente de outros sistemas de blogs, que vem com muita bagunça de temas e plugins, dos quais você precisa até estudar para saber como fazer o layout melhor, o jekyll te dá a liberdade de montar seu próprio html e separá-lo da melhor forma possível.\n\n`5)` Segurança, o jekyll é estático, ou seja, não possui um banco de dados ou administração a ser invadido e as chances de ocorreram hacks são praticamente mínimas.\n\n`6)` Facilidade na hospedagem, por ser estático, ele pode inclusive ser hospedado no Github Pages (o que a maioria dos desenvolvedores fazem)\n\n`7)` Facilidade em se escrever um post, em qualquer lugar você pode digitar Markdown, no celular, no tablet, no pc, basta ter o editor mais porco do mundo e saber a sintaxe (convenhamos que um programador que aprende milhares de tags, aprender a usar coisas tão intuitivas como #(h1), ##(h2), não é nada difícil).\n\n`8)` Possibilidade de aprender uma ferramenta nova, o foco do Jekyll não são os clientes, somos nós programadores, então, quer coisa melhor do que aprender algo novo e legal?\n\n`9)` Possibilidade de utilizar condicionais como if, elseif, else, loops, variáveis e mais um conjunto poderoso de funções. Coisas que não poderia conseguir escrever com html estático ou usando extensões de IDEs. E nada disso sendo processado no servidor.\n\n`10)` Facilidade na transferência de servidor, como você pode definir urls bases no _config.yml, diferente de arquivos estáticos comuns, em que você teria que mudar url em tudo, no jekyll basta mudar a variável.\n\n`11)` Criação de urls amigáveis de modo prático, fácil e automático.\n\nSe você tem mais alguma dúvida ou comentário legal a fazer a respeito disso, só mandar um comentário, discussões são sempre importantes na nossa área, para que possamos abrir mentes e obter mais conhecimento.\n" }, { "path": "posts/por-que-usar-svg.md", "content": "---\nlayout: post\ndate: 2015-01-08T10:39:47.000Z\ntitle: \"#1 - Por que usar SVG?\"\ndescription: O SVG finalmente começa dar o ar das graças e você vai saber aqui o\n porquê disso.\nmain-class: svg\ntags:\n - svg\n - frontend\n - trend\n - dicarapida\ncategories:\n - O mundo mágico do SVG\n---\n\n## Meu histórico\n\nMuita gente sabe que eu ❤ SVG e que venho tentado evangelizar de todas as formas essa tecnologia em todo lugar que eu passo. Meu primeiro trabalho foi a [Awesome-SVG](https://github.com/willianjusten/awesome-svg), que pode não parecer, mas deu um trabalho do caramba juntar todo conteúdo possível desse assunto, organizar, separar e ainda manter atualizado.\n\nEssa semana eu e meu amigo [Lucas Maia](https://github.com/lucasmaiaesilva) lançamos a tradução do [SVG Pocket Guide](http://svgpocketguide.com/) e que inclusive está [open source](https://github.com/jonitrythall/svgpocketguide/blob/master/svgpocketguide-ptbr.md) (Viu algum erro? Manda um Pull Request! É difícil fazer tudo sem nenhum errinho xD).\n\nTambém palestrei no Front in Bahia 2014 para substituir nosso amigo [Wilson Mendes](https://twitter.com/willmendesneto) que infelizmente não pôde participar. E foi lá que eu resolvi que iria contribuir mais com a comunidade, foi uma experiência tão boa e os feedbacks tão incríveis, que agora não quero mais parar =)\n\nDepois de ter feito essas coisas, algumas pessoas já ligam SVG a minha pessoa, como o Suissa diz: \"o piá do SVG\". E aí com isso, sempre recebo muitas perguntas e a principal delas é:\n\n## Por que usar SVG?\n\nBom, pretendo fazer desse post, uma série sobre SVG, então serei bastante breve nesse post e só mostrar alguns dos motivos, se depois de todos eles, você não se interessar...Posso fazer nada\n\n### Rico em Detalhes e Cores\n\n![Coração feito de ícones coloridos](/assets/img/por-que-usar-svg/coloridos.jpg)\n\nFonte: [Designmodo](http://designmodo.com/flat/)\n\n### Interativo e Estilizável via CSS\n\n![Ícone de uma lâmpada](/assets/img/por-que-usar-svg/animacao.gif)\n\nFonte: [tutsplus](http://tutsplus.github.io/Styling-Iconic/styling/index.html)\n\n### Responsivo\n\n![Imagem de uma logo em vários tamanhos](/assets/img/por-que-usar-svg/responsivo.png)\n\nFonte: [Codrops](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)\n\n### Animações de alto nível\n\n![Animação desenhando uns frascos](/assets/img/por-que-usar-svg/animacao-2.gif)\n\nFonte: [Panizzon](http://panizzon.ind.br/)\n\n### Perfeito para representação Gráfica\n\n![Gráfico](/assets/img/por-que-usar-svg/grafico.png)\n\nFonte: [D3 example](http://bl.ocks.org/Caged/6476579)\n\n### Efeitos e Filtros\n\n![Uma imagem com diferentes efeitos](/assets/img/por-que-usar-svg/filtros.png)\n\nFonte: [Web Platform](https://webplatform.github.io/docs/svg/tutorials/smarter_svg_filters/)\n\n### Mais qualidades?\n\n* [Boa Compatibilidade](http://caniuse.com/#search=svg)\n* Podem ser minificados (Gzip)\n* [Maior Acessibilidade](http://www.sitepoint.com/tips-accessible-svg/)\n* Elementos de DOM para serem editados separadamente\n* É tudo código!! =)\n\n### Concluindo...\n\nSabia de tudo? Se sabia porque não está usando?? Se está usando, se mostre! Contribue! Me chama no [twitter](http://twitter.com/Willian_justen), manda um Pull Request na [awesome-svg](https://github.com/willianjusten/awesome-svg), faz o caralho a 4 cara!\n\nDeixo para vocês uma última imagem e um link falando sobre quais as tendências de 2015, advinha quem aparece para caramba lá :p\n\n![SVG Trends](https://ihatetomatoes.net/wp-content/uploads/2014/12/img_assets_svg.jpg)\n\n[Design Trends de 2015](http://foundersgrid.com/design-trends-2015)\n" }, { "path": "posts/porque-eu-evito-funcoes-anonimas.md", "content": "---\nlayout: post\ndate: 2016-07-16T16:08:38.000Z\ntitle: Porque eu evito funções anônimas\ndescription: Funções anônimas podem esconder uma má prática.\nmain-class: js\ntags:\n - js\n - tip\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, vamos lá que esse será um post simplão, mas importante para evitar algumas más práticas em nosso código Javascript.\n\nEnquanto escrevo, vou ouvindo uma playlist chamada [Infinite Indie Folk](https://open.spotify.com/playlist/37i9dQZF1DX2taNm7KfjOX?si=eixED2hNSI-krgGi6OSuzw), adoro esse estilo de música para relaxar e hoje, um sábado lindo e eu aqui na rede, tinha que ouvir algo assim.\n\n## Como criar funções em JS?\n\nExistem diversas formas de se criar funções em JS e algumas delas são:\n\n```js\nvar hey = function() {\n console.log('Hey');\n}\n\nfunction hey() {\n console.log('Hey');\n}\n\nobj.hey = function() {\n console.log('Hey');\n}\n```\n\nSe você reparar, a primeira forma estou nomeando a função através de uma variável e a segunda eu estou nomeando da forma tradicional. Mas precisamos tomar cuidado com o funcionamento dessas formas, por quê?\n\n## Funções anônimas são difíceis de debugar\n\nVamos supor que eu tenha uma função que joga um erro qualquer quando executada:\n\n```js\nsetTimeout(function() {\n throw new Error('hey');\n}, 200);\n```\n\nQuando executar essa função, o erro claramente é jogado no console, como podemos verificar na imagem abaixo:\n\n![Imagem indicando \"Uncaught Error: hey (anonymous function)\"](/assets/img/js-anonima/anonima-erro.png)\n\nO problema aqui é que apesar dele jogar o erro, eu não sei a fonte do erro, pois o erro está atribuído a uma função anônima.\n\nAgora escrevendo a mesma função, porém nomeada:\n\n```js\nsetTimeout(function Hey() {\n throw new Error('hey');\n}, 200);\n```\n\nOlha como fica o retorno:\n\n![Imagem indicando \"Uncaught Error: hey (Hey function)\"](/assets/img/js-anonima/nomeada-erro.png)\n\nQuando abrimos o erro, podemos ver claramente que o erro se encontra na função `Hey` e isso já facilitaria nossa debugagem.\n\n## Funções anônimas não são reutilizáveis\n\nDigamos que eu queira criar um evento, que ao clicar num certo elemento, ele adicione/remova uma classe. Em Javascript puro eu poderia fazer algo como:\n\n```js\ndocument.querySelector('.item').addEventListener('click', function(event) {\n this.classList.toggle('active');\n});\n```\n\nVocê pode olhar o método acima e falar: **Mas o que tem de errado aí?** De fato, não tem nada de errado, mas se eu quisesse utilizar o mesmo método para outro seletor? Não daria né. Por que não fazer assim então:\n\n```js\nfunction toggleActive() {\n this.classList.toggle('active')\n}\n\ndocument.querySelector('.item').addEventListener('click', toggleActive)\ndocument.querySelector('.another-item').addEventListener('click', toggleActive)\n```\n\n## Funções declaradas facilitam o desacoplamento\n\nVamos pensar num código simples de node, onde apendamos um texto e notificamos o usuário, vamos primeiro ver um exemplo comum que pessoas fazem, usando `funções anônimas`:\n\n```js\nvar fs = require('fs');\n\nvar myFile = '/tmp/test';\nfs.readFile(myFile, 'utf8', function(err, txt) { \n if (err) return console.log(err);\n\n txt = txt + 'Mais algum texto!';\n fs.writeFile(myFile, txt, function(err) {\n if(err) return console.log(err);\n console.log('Texto adicionado!');\n });\n});\n```\n\nAli temos um arquivo de texto `myFile` que é lido e adicionado `Mais algum texto!`, então escrevemos no arquivo e informamos o usuário da tarefa concluída.\n\nSe repararmos, temos ali duas funções anônimas, que por si só, já poderiam acusar erro e nem saberíamos corretamente de onde vem. Outra coisa é que temos um início de um `callback hell` de função chamando função que é horrível!\n\nPara melhorar isso, poderíamos primeiro nomear as funções, para já pelo menos saber de onde o erro vem:\n\n```js\nvar fs = require('fs');\n\nvar myFile = '/tmp/test';\nfs.readFile(myFile, 'utf8', function appendText(err, txt) { \n if (err) return console.log(err);\n\n txt = txt + 'Mais algum texto!';\n fs.writeFile(myFile, txt, function notifyUser(err) {\n if(err) return console.log(err);\n console.log('Texto adicionado!');\n });\n});\n```\n\nTendo os nomes, caso algum erro dos erros estoure na tela, já saberemos de onde vem. Mesmo assim, ainda está bem ruim de ler e ficou ainda mais sujo colocando os nomes, então por que não separar as funções?\n\n```js\nvar fs = require('fs');\n\nfunction notifyUser(err) { \n if(err) return console.log(err);\n console.log('Texto adicionado!');\n};\n\nfunction appendText(err, txt) { \n if (err) return console.log(err);\n\n txt = txt + 'Mais algum texto!';\n fs.writeFile(myFile, txt, notifyUser);\n}\n\nvar myFile = '/tmp/test';\nfs.readFile(myFile, 'utf8', appendText);\n```\n\nOlha como ficou mais fácil, temos as nossas funções separadas com suas responsabilidades ÚNICAS e o código ficou muito mais fácil de ler e entender.\n\n## Outras coisinhas mais...\n\nAs `funções anônimas` são difíceis de testar, pois como ela não são chamadas diretamente, eu preciso chamar um `método terceiro` para averiguar o funcionamento da mesma e isso é um baita de um `code smell` (código perigoso/errado).\n\nFunções anônimas não descrevem o funcionamento/responsabilidade única das mesmas, então será necessário que todo o código seja lido, para de fato entender para que serve, imagina se forem milhares de funções assim?\n\nProgramas que criam documentação automática como o jsDoc irão ter grandes problemas com esses tipos de métodos e as vezes irão até deixar de marcar/documentar, o que é ruim quando se precisa de um código altamente documentado, como API's, por exemplo.\n\n## Conclusão\n\nBom galera, como disse lá na parte de cima, não estou dizendo para **nunca** usar função anônima, muito pelo contrário, em vários momentos elas de fato podem ser úteis, principalmente se unidas a `filter`, `map`, `reduce` e `arrow functions`. Mas o importante é prestar atenção em seu código, existem momentos em que declarar funções vai te evitar grandes dores de cabeça.\n\n\n\n\n\n\n" }, { "path": "posts/pre-venda-curso-de-svg.md", "content": "---\nlayout: post\ndate: 2016-04-21T21:15:10.000Z\ntitle: \"Pre-venda: Curso de SVG\"\ndescription: Se adiante e adquira um dos cursos mais completos de SVG totalmente\n em português.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Introdução\n\nFaaala pessoal! Estou aqui para passar uma novidade bem rapidinha para vocês. Quando lancei meu [primeiro post](https://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) sobre o início da criação dos meus cursos, eu falei para vocês que sempre iria disponibilizar conteúdo gratuito e assim foi com o [Curso de Git e Github](https://www.udemy.com/git-e-github-para-iniciantes/) e o [Curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/).\n\nMas hoje eu estou aqui, para disponibilizar a [pré-venda](#pre-venda) do meu mais novo curso que será premium, que será: **Aprendendo SVG do início ao avançado**! =D\n\nUma novidade do curso é que todos irão receber um certificado de conclusão do curso, que poderá ser utilizado como horas extras para faculdade e/ou também para discutir um investimento com sua empresa =)\n\nEm breve eu vou estar colocando aqui um vídeo de divulgação do curso também, para quem quiser compartilhar ^^\n\nSe você já leu meus posts e/ou assistiu algum curso meu e gostou, não perca a oportunidade de pegar o curso na pré-venda, além de você estar ajudando a liberar o curso mais rápido, também ganhará um desconto de **25%** do preço final do curso!! Saindo de **R$ 200,00** (preço no lançamento) para **R$ 150,00**.\n\nRole a página até a parte de [pré-venda](#pre-venda) ou clique no link para escolhar uma das opções. Que pode ser Paypal, Pagseguro ou até mesmo transferência bancária.\n\n**A pré-venda foi finalizada, muito obrigado a todos!**\n\nO curso agora está disponível em seu preço normal e você pode [comprar por aqui](http://www.eventick.com.br/curso-de-svg)\n\n## Video\n\n\n\n## Objetivo do Curso\n\nO curso tem como objetivo passar desde os conceitos básicos do SVG até os mais avançados, permitindo criar basicamente o que se quiser com SVG. O curso será desenvolvido em pequenos módulos com vídeos curtos, facilitando assim o aprendizado e o desenvolvimento do aluno, visando sempre uma didática simples, concisa e bastante aplicada a prática de trabalho.\n\nExistirão alguns projetos ao decorrer do curso, para aplicarmos os conceitos aprendidos, fazendo com que o aluno perceba sua evolução e também comece a trabalhar mais em sua parte criativa e com código.\n\n## Ementa\n\n- Introdução ao SVG\n - Introdução do Curso\n - História\n - O que é?\n - Por que usar?\n - Quando usar?\n - Como criar?\n - Onde baixar?\n- Como usar e suas vantagens/desvantagens?\n - Como imagem\n - Como background-img\n - Via iframe/object/embed\n - Como Data URIs\n - Inline SVG\n- A estrutura do SVG\n - Plano Cartesiano\n - ViewBox e ViewPort\n - preserveAspectRatio\n - Formas Básicas\n - Elemento Path\n - Groups, defs, use e symbol\n- Estilizando o SVG\n - Métodos para estilizar e Peso das Propriedades\n - Fill e Stroke\n - Colorindo ícones com mais de uma cor\n- Projeto #1 - Construindo um SVG responsivo e adaptativo\n - Tornando o SVG Fluido\n - Tornando o SVG adaptativo\n- Sistemas de Ícones em SVG\n - Fixando o uso de ícones com Symbol\n - Usando o Icomoon\n- Projeto #2 - Criando um boilerplate em Gulp para gerar sprites\n- Projeto #3 - Criando um loader com SVG e CSS Animations\n - Editando e preparando o visual do nosso loader\n - Usando Keyframes para animar\n- Animações SVG com SMIL\n - Entendendo o que é SMIL\n - Criando uma animação simples\n - Famoso Morph Path\n - Especificando um caminho para a animação\n- Manipulando SVG com JS\n - Utilizando JS para estilizar e criar novos elementos\n - Algumas bibliotecas aconselhadas\n- Criando animações com as propriedades de Stroke\n - Criando um loader animado usando propriedades do stroke\n - Fazendo o efeito de desenhar\n - Usando o scroll para controlar o desenho\n- Filtros SVG\n - Alguns tipos de filtros\n - Criando uma animação com filtros\n- Acessibilidade no SVG\n - Dicas e informações para deixar tudo mais acessivel\n- Performance\n - Criando e Exportando com Illustrator\n - Usando ferramentas para otimizar\n- Busque Conhecimento\n - Projeto Awesome-SVG e outros\n - Agradecimentos\n\n## Certificado\n\nTodos os alunos que terminarem o curso irão receber um certificado de conclusão\n\n## Repositório do Curso\n\nTodas as informações aqui, também podem ser encontradas no [repositório do curso](https://github.com/willianjusten/curso-de-svg), lá eu disponibilizarei os exemplos que serão feitos no curso e também irei tirar todas as dúvidas através das issues que podem ser abertas lá.\n\n

    Pré-venda Finalizada!

    \n\nAs compras agora poderão ser feitas de duas formas:\n\n- Em dólar direto pela plataforma\n- Em real através do Eventick \n\n**Update:** o curso agora pode ser adquirido através da [Udemy](https://www.udemy.com/aprendendo-svg-do-inicio-ao-avancado/)\n\n### Contato\n\nQualquer dúvida ou curiosidade, é só mandar um email para willianjustenqui@gmail.com ou então falar comigo através de qualquer rede social.\n" }, { "path": "posts/refatorando-componentes-react-para-es6.md", "content": "---\nlayout: post\ndate: 2016-07-30T06:10:26.000Z\ntitle: Refatorando componentes React de ES5 para ES6\ndescription: Aproveite a nova sintaxe e entenda a diferença entre os códigos.\nmain-class: js\ntags:\n - react\n - js\n - tutorial\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nFala pessoal, vou ouvindo uma banda chamada [Balmorhea](https://open.spotify.com/artist/1U0FaHAc4fcwQcYEJFgkm9), que é uma banda de post-rock instrumental, tem um som ótimo para estudar/codar, pois é calma e tem várias sonoridades.\n\nSão 3:20 da manhã e a insônia não me deixa dormir, eu deveria estar fazendo mil outras coisas, mas sei lá, quando vem a vontade de escrever, melhor obedecer né. Só não sei quando vou postar, quem sabe se eu terminar antes de dormir =)\n\nEsse é um post bem legal, especialmente para quem está começando, pois vou mostrar para vocês como seria um código em ES5 e depois em ES6. Então, para quem olhar tutoriais na internet escritos de diferentes formas, pelo menos vai conseguir se guiar e entender o que se está passando ali. Vou separar em vários trechinhos bem pequeninos, assim vai facilitar o entendimento de cada sintaxe.\n\n### Importando o React\n\nEm ES5 seria o modelo normal do CommonJS:\n\n```js\nvar React = require('react');\nvar PropTypes = require('prop-types');\n```\n\nJá em ES6 usando o sistema de [import de módulos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import):\n\n```js\nimport React, { PropTypes } from 'react';\n```\n\nSe você reparar, no `PropTypes` eu utilizo as chaves em volta, isso significa que eu estou pegando só uma parte do módulo `react`, que é o `PropTypes`, evitando ter que digitar `React.PropTypes` toda vez que precisar. Isso se chama [Object destructuring](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).\n\n### Criando um componente e exportando\n\nEm ES5 nós criamos componentes utilizando o método `createReactClass` e depois nós os exportamos usando o `module.exports`.\n\n```js\nvar MeuComponente = createReactClass({\n ...\n});\n\nmodule.exports = MeuComponente;\n```\n\nEm ES6, você pode criar uma classe e extender de `React.Component` para ter as funcionalidades do React.\n\n```js\nexport default class MeuComponente extends React.Component {\n ...\n}\n```\n\nRepare que eu estou também exportando diretamente o `MeuComponent` passando o `export default` no início. Quando eu passo o `default`, estou dizendo que não me importo em qual nome ele vai receber quando for importado. Se eu tivesse colocado só `export`, eu obrigatoriamente teria que importar com o mesmo nome. Outra forma de escrever exportando seria removendo o `export default` no início e colocando `export default MeuComponente;` ao final do código, que é minha opção favorita.\n\n```js\nclass MeuComponente extends React.Component {\n ...\n}\n\nexport default MeuComponente;\n```\n\n### PropTypes e getDefaultProps\n\n~~Em ES5, meu objeto de propTypes fica **dentro** da minha classe, assim como tenho um método para definir minhas propriedades default.~~\n**update 17/05/2018** - após a versão 15.5 PropTypes foi colocado em uma biblioteca separada do React\n\n```js\nvar React = require('react');\nvar PropTypes = require('prop-types');\n\nvar MeuComponente = createReactClass({\n propTypes: {\n title: PropTypes.string.isRequired\n },\n getDefaultProps: function() {\n return {\n title: 'Heey',\n };\n }\n});\n```\n\n~~Já em ES6, tanto a definição de `PropTypes` quanto o `defaultProps` vão para o lado de **fora**.~~\n\n```js\nimport React from 'react';\nimport PropTypes from 'prop-types;\n\nexport default class MeuComponente extends Component {\n ...\n}\n\nMeuComponente.propTypes = {\n title: PropTypes.string.isRequired,\n}\n\nMeuComponente.defaultProps = {\n title: 'Heey',\n};\n```\n\n### getInitialState\n\nPara definir estados iniciais ao meu componente, em ES5 eu preciso usar o método `getInitialState`.\n\n```js\nvar MeuComponente = createReactClass({\n getInitialState: function() {\n return {\n title: this.props.title,\n };\n },\n});\n```\n\nComo em ES6 estamos criando classes, nós temos o `constructor`, que como o nome já diz, irá construir nossa instância base, então é lá que vamos definir nossos estados iniciais.\n\n```js\nexport default class MeuComponente extends Component {\n constructor(props) {\n super(props);\n this.state = {\n title: props.title,\n };\n }\n}\n```\n\n### Fazendo Bind dos métodos\n\nEsse talvez seja o ponto de maior incidência de erros da história do React! Muita gente já deve ter ido dormir pensando \"Por que meu método tá dando undefined? Tá tudo certinho...\"\n\nO que acontece é que quando se utilizava o `createReactClass`, ele já fazia o [autobinding](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding), fazendo a ligação do `this` a todos os métodos.\n\nEm ES5 temos:\n\n```js\nvar MeuComponente = createReactClass({\n handleClick: function(event) {\n this.setState({\n liked: !this.state.liked,\n });\n }\n});\n```\n\nEm ES6, precisaremos fazer o bind manual então:\n\n```js\nexport default class MeuComponente extends Component {\n constructor() {\n super();\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick(event) {\n this.setState({\n liked: !this.state.liked,\n });\n }\n}\n```\n\nReparem que eu faço o bind no `contructor`, que é a forma correta de se fazer. Se você já viu um bind direto na função, **corrija**, é uma má prática.\n\n### Shorthand Syntax\n\nSe você reparar no exemplo acima, em ES5 eu uso `handleClick: function()...` e já no ES6 eu escrevo só `handleClick()` direto. Isso acontece pois todos os métodos são propriedades do objeto. Em ES5, eu preciso definir o nome da propriedade e então chamar uma função, que é o método que eu quero em si.\n\n```js\nvar MeuComponente = createReactClass({\n componentWillMount: function() {\n ...\n }\n});\n\nmodule.exports = MeuComponente;\n```\n\nEm ES6, como temos a [Shorthand Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions), podemos simplesmente escrever como método direto:\n\n```js\nexport default class Mycomponent extends React.Component {\n componentWillMount() {\n ...\n }\n}\n```\n\n## Conclusão\n\nBom pessoal, essas são as principais mudanças de escrita para o React. Espero que você tenha entendido tudo que está ocorrendo e se encontrar mais posts por aí, consiga se virar, não importando em qual sintaxe esteja escrito =)\n\nLembrem-se sempre de utilizar boas práticas de escrita, não importando se está em ES5 ou em ES6, um ótimo styleguide, que tem bastante dica mastigadinha e explicada é o [Airbnb Styleguide](https://github.com/airbnb/javascript/tree/master/react), aconselho darem uma olhadinha.\n" }, { "path": "posts/saude-deve-ser-a-prioridade.md", "content": "---\nlayout: post\ndate: 2018-07-24T12:19:43.000Z\ntitle: Nem React, nem VueJs. Saúde deve ser uma prioridade\ndescription: Uma conversa séria de um dev que se arrepende de algumas escolhas.\nmain-class: misc\ntags:\n - saude\n - lifestyle\n---\n## Introdução\n\nEntão pessoal, meu blog não é só um blog de desenvolvimento, mas também um local que eu tenho para escrever sobre tudo das minhas experiências, porque acho que algo técnico vocês podem encontrar em mil lugares, mas as vezes, algumas experiências são mais difíceis de achar.\n\nQuando eu escrevi sobre o meu [processo da Toptal](https://willianjusten.com.br/meu-processo-para-a-toptal/), eu falei que fiquei super nervoso e ansioso, ficava com medo de não passar. E muita gente disse que era interessante ver esse \"lado humano\" de pessoas que usam como exemplo na área (apesar de eu não me achar exemplo de nada...)\n\nHoje eu venho falar sobre uma coisa que nós como desenvolvedores praticamente não discutimos, que é a **saúde**.\n\n### Devo focar em React? Angular? VueJS? Mas e a saúde?\n\nEssas são as perguntas da maioria dos programadores, né? E para isso, o que nós fazemos? Viramos noites e noites, muitos tomam litros de café para ficar acordados, outros até energéticos, que acabam até criando arritmias... E nessa busca desenfreada de aprender tudo, de se tornar o melhor, a gente nem pensa na saúde, mas precisamos lembrar de uma coisa.\n\n> Um dia o corpo cobra e às vezes o preço é caro demais.\n\nJá se perguntou quantas vezes você se preocupou com a sua saúde? E quantas vezes se preocupou em aprender linguagem X? Não estou falando que é para você virar um [hipocondríaco](https://pt.wikipedia.org/wiki/Hipocondria) maluco, achando que está doente sempre e que precisa se cuidar 500% do tempo. Mas é para se preocupar sim!\n\n### Saúde mental e física!\n\nHá algum tempo, vários artigos tem aparecido sobre saúde mental e como um descanso e terapia são necessários nessa nossa área, que é tão estressante. Aliás, se você tem passado por alguns momentos complicados, tente pensar sobre isso. Vou listar aqui, alguns artigos bem legais sobre isso, recomendo a leitura:\n\n- [Descanso: não um luxo, mas uma necessidade por Fernando Masanori](https://medium.com/@fmasanori/descanso-n%C3%A3o-um-luxo-mas-uma-necessidade-5be23cdecb31)\n- [Programadores e depressão por Paulo Pilotti](https://medium.com/brasil/programadores-e-depressao-30043d2972b5)\n- [Você é suficiente para você? por Isa Silveira](https://medium.com/@isabellasilveira/voc%C3%AA-%C3%A9-suficiente-pra-voc%C3%AA-809a0d35516b)\n\nMas não é só da nossa cabeça que precisamos cuidar, é importante cuidarmos do resto do corpo também. E isso consiste em quê?\n\n#### Ir ao médico\n\n- Faça exames periódicos (check-ups).\n- Caso sinta qualquer coisa, não hesite em ir ao médico (não deixe as coisas para depois).\n\n#### Ter uma vida mais saudável\n\n- Faça uma alimentação adequada, se necessário, vá a um nutricionista.\n- Beba água! Qualquer coisa, [use um app para ajudar](https://www.ativosaude.com/saude/6-aplicativos-que-te-lembram-de-beber-agua/).\n- Faça exercícios regularmente (não precisa ser marombeiro, mas caminhadas regulares ou outro exercício que lhe traga prazer).\n- Tenha boas horas de sono (a maioria de nós tem hábitos noturnos, mas preze por 7h de sono, só assim seu corpo irá se recuperar). Tem [app para monitorar](https://www.sleepcycle.com/) seu sono também.\n- Evite trabalhar por muitas e muitas horas sem descanso. Pequenas pausas são necessárias.\n\n#### Para quem trabalha remoto\n\n- Procure uma cadeira confortável para você (verifique com um ortopedista qualquer coisa).\n- Evite ficar horas direto sentado, levante, pegue um ar e volte.\n- As vezes trabalhe em outro local que não sua casa, é importante ver pessoas (por mais que você ache que não).\n\n## Conclusão\n\nBom, alguns de vocês já devem ter captado a mensagem, mas outros devem estar se perguntando porque estou escrevendo isso. Nos últimos tempos, eu estou tendo vários problemas de saúde e muito de tudo isso, se deve a um **total descuido** com a minha saúde. Eu sempre estive mais em busca de conhecimento e melhoramento, mas deixava a saúde de lado, mesmo quando eu sabia não estar bem.\n\nAgora, infelizmente estou pagando caro por isso e por mais que eu esteja me cuidando agora, sei que terão muitas coisas que não vou conseguir voltar ao que era antes. \n\nQue fique claro, esse não é um post com objetivo de receber \"mensagens de melhora\" nem nada. O objetivo é fazer com que vocês reflitam um pouco sobre a saúde de vocês.\n" }, { "path": "posts/semantic-version.md", "content": "---\nlayout: post\ndate: 2015-10-31T23:36:09.000Z\ntitle: Versionando seu projeto\ndescription: Como versionar corretamente o seu projeto e assim conseguir\n informar rapidamente que tipo de mudança ocorreu.\nmain-class: dev\ntags:\n - projetos\n - semver\ncategories: null\n---\n\n## Introdução\n\nE aí pessoal, tenho ficado distante pacas, fazendo só posts dos links lidos na semana, mas hoje resolvi escrever alguma coisa, pouca e básica, mas não menos importante. Vou tentar fazer assim, para conseguir criar mais conteúdo e também me animar/agitar um pouco. Nesse exato momento estou ouvindo uma playlist chamada [Melancholia](https://open.spotify.com/playlist/37i9dQZF1DWZrc3lwvImLj?si=T01Fdb5ASAa8yHHpnAUNJQ), que tem músicas bem bacanas e que no momento está combinando um pouco comigo...\n\n## O que é versionar e por que versionar?\n\nAntes mesmo de tudo, o que seria versionar um projeto? Todo projeto bem organizado possui um escopo, onde definimos certas metas a alcançar e para cada uma dessas metas, podemos criar uma espécie de `release`, que seria nossa versão.\n\nOutro motivo para se versionar é que assim conseguimos \"guardar\" vários estágios daquele projeto e podemos continuar andando com o desenvolvimento. Assim as pessoas conseguem usar a versão que melhor lhes caber. É o que fazemos em geral com a maioria das bibliotecas e frameworks que utilizamos.\n\n## Usando o Semantic Version\n\nPara manter um padrão mais organizado para versionar, nasceu um projeto chamado também de [SemVer](http://semver.org/), que é um sistema bem básico. Ele é controlado pelo formato `x.y.z`:\n\n- `x` : fica para as famosas Major Versions, que seriam as versões principais fechadas.\n- `y`: fica para as Minor Versions, que seriam adições de pequenas melhorias.\n- `z`: fica para os patchs, que seriam correções de bugs.\n\nEntão, se tivéssemos, por exemplo, a versão `1.4.11`, significaria que ela já teve sua primeira versão lançada, `4` novas features adicionadas depois e `11` correções.\n\n## Entendendo como versionar\n\nDigamos que eu tenha uma simples API com um método `all` que retorna um array contendo todos os dados que eu desejo e essa é minha primeira versão estável da API, ela então terá a versão `1.0.0`. \n\nDepois de lançado, eu vi que dentro do meu método `all`, tinha um bug que fazia não retornar o último item do array. Eu apliquei a correção e lancei uma nova versão. Como era somente um bug, eu deverei mudar o valor da última casa e por isso a versão será `1.0.1`.\n\nMais para frente eu resolvi criar um método chamado `getItem(item)`, que é responsável por pegar um único item daquele array todo. Como eu adicionei uma nova feature, eu irei mudar o número do meio e resetar o último dígito, assim a versão ficará como `1.1.0`, pois irei criar uma nova versão minor e essa ainda não teve nenhuma correção de bugs.\n\nSe um dia eu resolver mudar as assinaturas dos métodos, modificando seus nomes e as formas de chamar, então será uma grande mudança e para isso eu irei alterar o primeiro número e por esta ser uma nova versão, os outros números serão resetados e com isso eu terei a versão `2.0.0`.\n\n## Usando as tags do git para versionar\n\nEu aqui falei só na teoria como nomear e versionar, mas como fazer isso na real? Usando o git é muito simples, basta usarmos as `tags`.\n\nO git permite dois tipos de tags que são `annotated` e `non-annontated`. A annotated tag permite guardar mais informações sobre aquela tag em si, como comentários e meta-informação.\n\nPara criar uma tag basta:\n\n- `git tag 1.0.0` : isso criará uma `non-annontated` tag que vai referenciar ao commit atual.\n- `git tag -a 1.0.0 -m 'Mensagem da Tag'` : isso irá criar uma `annotated` tag, contendo uma mensagem informativa e uma referência para o objeto do commit.\n\nPara listar todas as tags criadas, basta usar `git tag`. Se quiser apagar alguma tag use o comando `git tag -d 1.0.0`.\n\nLembre-se sempre de usar `git push --tags` para subir as tags criadas para o seu repositório remoto e também de usar `git fetch --all` para sincronizar as tags no seu local.\n\nCaso você queira ver uma versão específica, use `git checkout 1.0.0` e estará exatamente onde aquela versão parou, isso se torna extremamente útil.\n\n## Ferramentas para facilitar\n\nUns dias atrás, fazendo umas video-aulas muito legais sobre [Como escrever uma biblioteca javascript opensource](https://egghead.io/lessons/javascript-how-to-write-a-javascript-library-automating-releases-with-semantic-release) eu acabei encontrando uma ferramenta bem bacana para ajudar no versionamento, se chama [semantic-release-cli](https://github.com/semantic-release/semantic-release), vale dar uma olhada tanto no curso quanto na ferramenta =)\n\n## Conclusão\n\nBom, a ideia desse post é fazê-los terem essa visão de que versionamento é importante e se ele for bem feito, só de ler os números de versões, já conseguimos entender se algo muito grande que mudou ou se algo foi adicionado ou corrigido. Passem a criar versões para suas libs e passem a fazê-las do modo certo, o mundo agradece.\n\n\n" }, { "path": "posts/share-button-sem-dependencias.md", "content": "---\nlayout: post\ndate: 2015-05-01T13:57:03.000Z\ntitle: Share Buttons sem dependências\ndescription: Ser social é muito importante, então nada melhor do que fazer com\n que o seu usuário consiga compartilhar mais fácil seu conteúdo.\nmain-class: dev\ntags:\n - social\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nEnquanto eu escrevo vou ouvindo um dos músicos que eu mais gosto e sou influenciado, grande [Bob Dylan](https://open.spotify.com/artist/74ASZWbe4lXaubB36ztrGX).\n\nFaz um tempinho que não escrevo e nesse tempo recebi vários pedidos por email sobre alguns assuntos. Então resolvi que vou voltar a escrever e resolver email por email. E o primeiro email foi do Erick Alexandre:\n\n> Olá Willian.\n> Cara acompanho seu trabalho no site willianjusten.com.br já faz um tempo, e suas dicas sempre me ajudaram muito. Até por isso quero te agradecer, \"Muito obrigado\".\nMas hoje cara quero te pedir um favor, gostei muito dos seus botões addthis e queria te pedir pra me ensinar, como posso colocá-los no meu blog para compartilhamento.\n\nAlém de ensinar como fazer, eu vou explicar um pouquinho sobre essa prática, quais vantagens e desvantagens e como corrigir essas desvantagens.\n\n## Facilidade de compartilhar\n\nCom um simples clique, os visitantes de seu site podem dizer se gostaram e compartilhar com todas as redes sociais. Assim o seu conteúdo pode atravessar rapidamente pela internet, alcançando novos usuários. Se o seu objetivo envolver criar conteúdo para promover os seus produtos ou serviços, é natural que você queira que várias pessoas os vejam. Se for um blog, você vai querer que mais pessoas leiam sobre suas besteiras.\n\nÉ claro que o usuário pode copiar a url e colar onde quer que seja para compartilhar, mas é muito mais fácil ele clicar num botão, que já o leva para a rede desejada e de quebra já coloca um textinho padrão para compartilhar.\n\n### Sites com share buttons são linkados sete vezes mais no twitter\n\nDe acordo com uma [pesquisa da Entrepreneur](http://www.entrepreneur.com/article/220720#), os sites que já possuem share buttons são mais compartilhados, pela facilidade do usuário em compartilhar e também por mostrar indiretamente para o usuário, o que seria o próximo passo, compartilhar.\n\n## Problemas de performance\n\nO maior de todos os problemas desses botões é que eles carregam muitas coisas, que acabam prejudicando bastante a performance do seu site, além de poder correr o risco de bloquear a renderização de outras coisas.\n\nAqui abaixo coloco os links que as próprias redes sociais disponibilizam:\n\n* [Facebook](https://developers.facebook.com/docs/plugins/share-button)\n* [Twitter](https://publish.twitter.com/)\n\nCriando cada um desses botões e adicionando somentes eles em uma página, temos cerca de 41 requests, dentre arquivos `js`, `json`, `png`...\n\n## Como corrigir isso?\n\nCada uma dessas redes sociais possui uma url para share também, que nos facilita bastante, visto que basta utilizarmos e passarmos os parâmetros certos e nada externo será requisitado.\n\n### Twitter\n\n* URL: [https://twitter.com/intent/tweet](https://twitter.com/intent/tweet)\n* Parâmetros: `url`, `text`, `via`, `related`, `hashtags`\n* Ver mais em: [https://dev.twitter.com/docs/intents#tweet-intent](https://dev.twitter.com/web/tweet-button/web-intent)\n\n#### Modo de uso\n\n```html\nCompartilhe no Twitter\n```\n\nExemplo de uso no meu blog, como utilizo Jekyll, eu deixo os dados serem gerados diretamente pelo meu \"backend\". Você pode fazer o mesmo usando a linguagem do seu backend.\n\n```html\n\n \n \n```\n\n### Facebook\n\n* URL: [https://www.facebook.com/sharer/sharer.php](https://www.facebook.com/sharer/sharer.php)\n* Parâmetros: `u`\n\n#### Modo de uso\n\n```html\n Compartilhe no Facebook\n```\n\nExemplo de uso no meu blog:\n\n```html\n \n \n \n```\n\n## Detalhes\n\n```js\n onclick=\"window.open(this.href, 'título da janela', 'width=490,height=530');return false;\"\n```\n\nSe você notar, eu além de colocar os links, também coloquei uma função de `onclick`. Essa função servirá para criar uma nova janela, recebendo a url passada, um título e o tamanho da janela. Isso serve para que o usuário não saia do meu site enquanto compartilha.\n\n## Extra\n\nMeu amigo [Cleyson Leal](https://twitter.com/cleysonlb) me falou que quando precisa criar links rapidinhos utiliza o [Share Link Generator](http://www.sharelinkgenerator.com/), já utilizei também. Para quem não vai usar backend para nada e só precisa criar um link, também é uma boa pedida.\n\n## Conclusão\n\nVimos que a função de share é importante e não precisamos mais depender de libs externas para fazer esse trabalho, com isso nossos sites carregam mais rápido e não perdem suas funcionalidades.\n\nCom o exemplo acima, nós temos só a funcionalidade, mas nosso botão ainda está sem nenhum estilo, você pode se inspirar e criar várias coisinhas legais, desde o minimalista, como fiz no meu blog, até algo bastante detalhado e com mil efeitos. Segue aqui o [link do codepen](http://codepen.io/search?q=share&limit=all&depth=everything&show_forks=false), em que você pode se inspirar um pouquinho.\n\nVocê tem alguma dúvida e quer que ela seja explicada aqui? Basta falar comigo pelas redes sociais ou me mandar um email, ficarei super feliz de ajudar. Abraços e até mais!\n" }, { "path": "posts/sistemas-de-icones-em-svg.md", "content": "---\nlayout: post\ndate: 2015-03-06T22:33:23.000Z\ntitle: \"#6 - Sistemas de Ícones em SVG\"\ndescription: Como usar ícones em SVG e por que ele é bem melhor que outras alternativas?\nmain-class: svg\ntags:\n - svg\n - icons\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\n- [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/)\n- [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/)\n- [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/)\n- [#4 - A Estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/)\n- [#5 - Atomic Design no SVG - g, use, defs, symbol](https://willianjusten.com.br/atomic-design-no-svg/)\n\n## Introdução\n\nComo dizem \"Uma imagem vale mais que mil palavras\" e isso é um fato. Muitas vezes conseguimos simbolizar uma ação apenas com uma imagem. Pensando nisso, os designers desde o início da criação de interfaces resolveram utilizar símbolos para isto e na web não iria ser diferente. Muito provavelmente você já se pegou vendo um ícone de X para fechar alguma coisa ou até ícones mais \"modernos\", como o famoso `Hamburguer Menu`.\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\n## Por que usar SVG e não outros tipos?\n\nBom, primeiro precisamos saber quais são as formas de se utilizar ícones na web:\n\n### Image Sprites\n\nSeria um conjunto de imagens dentro de um mesmo arquivo, sendo cada imagem identificada pela sua posição `x` e `y` dentro do arquivo.\n\n**Vantagens**\n\n- Permite uso de imagens coloridas\n\n**Desvantagens**\n\n- Não é escalável\n- Não há opção de mudar cores\n- Peso em Kb considerável\n\n### Font Icons\n\nTalvez seja o mais utilizado dos tipos. Consiste em criar um tipo de fonte contendo os icones desejados e estes identificados através de codigos unicode. Em geral, são adicionados via css ao pseudo-elemento `:before` ou `:after`.\n\n**Vantagens**\n\n- Escalável\n- Permite modificar cor (somente uma cor por vez! Ainda é monocromático)\n\n**Desvantagens**\n\n- Maior número de requisições normalmente.\n- Enquanto não carrega a fonte, bug de aparecer um quadrado é bem comum.\n\n![Imagem mostrando o Bug que o font-icon tem quando demora a carregar ou não é compatível](https://i.stack.imgur.com/vZhku.png)\n\n### SVG icon\n\nBasicamente um ícone desenhado no illustrator e exportado para o formato SVG.\n\n> Ahhh, mas eu não sei desenhar não, para icon font eu baixo o [Font Awesome](https://fontawesome.com/) e vem tudo pronto. - Você mesmo!\n\nBeleza campeão, mas com SVG você pode fazer o mesmo e até melhor, se quiser, dá uma olhada nesse post, [onde baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) e você irá ver que tem muita coisa legal =)\n\n**Vantagens**\n\n- Escalável\n- Múltiplas Cores\n- Mais leve de todos (inline com gzip)\n- Acessibilidade\n- Melhor controle via CSS\n- Mais semântico\n\n**Desvantagens**\n\n- Certa incompatibilidade com IE8- (pode usar fallback! \\o/)\n\nBom, vendo essa lista, fica claro que ícones em SVG são bem melhores e mais funcionais, está esperando o quê para mudar os ícones nos seus sites e sistemas? Como fazer? Então vamos nessa =)\n\n## Como fazer?\n\nBasicamente existem 3 etapas a serem feitas para se utilizar SVG icons.\n\n- Obter os ícones SVG seja através de um sistema de ícones ou os arquivos feitos por algum designer.\n- Adicionar o SVG inline na página em que será usada.\n- Chamar o ícone desejado.\n\nComo tudo na prática é melhor, vamos a ela. Vou utilizar o [IcoMoon](https://icomoon.io/) para obter meus ícones SVG.\n\n#### Passo 1.1\n\nClicar na opção `IcoMoon App`:\n\n![Passo 1](/assets/img/svg-icons/passo-1.png)\n\n#### Passo 1.2\n\nEscolher os ícones desejados ou importar de alguma fonte externa (sim, ele ainda aceita imports!)\n\n![Passo 2](/assets/img/svg-icons/passo-2.png)\n\n#### Passo 1.3\n\nClicando em `Generate SVG/PNG` conforme indicado no canto inferior esquerdo da imagem anterior irá te levar para uma tela que te permite renomear seus ícones da forma desejada e então baixar um zip contendo os arquivos necessários.\n\n![Passo 3](/assets/img/svg-icons/passo-3.png)\n\nSegue abaixo o conteúdo do zip baixado, indicando os 3 ícones em PNG e em SVG separados e no formato de `defs`, que já é a união de todos os ícones num arquivo só e já utilizando o elemento `defs`, que permite adicionar os ícones, sem renderizá-los diretamente. Eu fiz um post explicando um pouco sobre algumas dessas propriedades do SVG, se não estiver familiriazado, dê uma lidinha no artigo: [#5 - Atomic Design no SVG - g, use, defs, symbol](https://willianjusten.com.br/atomic-design-no-svg/)\n\n![Arquivos](/assets/img/svg-icons/arquivos.png)\n\n#### Passo 2 e 3\n\nJá com os arquivos em mãos, abra o arquivo com as `defs` e inclua em seu projeto. **Dica:** se você utilizar uma linguagem de backend ou até mesmo algo pré-compilado, separe esse arquivo e somente inclua no header do seu projeto. Segue exemplo dos meus [ícones utilizados no blog](https://github.com/willianjusten/willianjusten.github.io/blob/master/_includes/svg-icons.html). Se puder notar, ele está comprimido em apenas uma linha, ficando assim bastante leve, mas esse será um assunto para outro post.\n\nAbaixo segue um dos ícones separados na nossa `defs`:\n\n```html\n\n paperplane\n \n\n```\n\nSe notar ele possui um `id`, que será importante para identificá-lo e poder fazer a chamada do mesmo. Ele possui também um `title`, que vai permitir acessibilidade a nossa imagem, facilitando com que cegos consigam entender o que está sendo mostrado. E a `path`, que nada mais é que o desenho em si.\n\nApós definidos os ícones, basta chamá-los onde deseja, a partir do elemento `use`.\n\n```html\n\n \n\n```\n\nA classe dentro da tag `svg` irá servir para auxiliar e modificar propriedades do ícone, como tamanho, cor e etc. E dentro do elemento `use`, iremos fazer uma chamada através do seu link simbólico, onde iremos chamar o ícone pelo seu `id`.\n\nSegue abaixo o nosso exemplo, bastante fácil e prático.\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nEspero que todos tenham entendido, é um processo bem simples, mas que faz todo diferença no trabalho final, vamos sempre lembrar que quanto mais qualidade o nosso projeto tiver, melhor! =)\n\nSe quiser mais links sobre ícones em SVG, veja na [awesome-svg](https://github.com/willianjusten/awesome-svg/blob/master/topics/Icons.md).\n\nNos próximos posts irei ensinar como estilizar esse ícones, animá-los e fazer várias outras brincadeiras. Se curtiu, compartilha ae! =)\n" }, { "path": "posts/social-meta-tags.md", "content": "---\nlayout: post\ndate: 2015-02-09T21:33:48.000Z\ntitle: Social Meta Tags\ndescription: Aprenda como ser mais social, ter maior relevância nas redes\n sociais e atrair mais usuários.\nmain-class: dev\ntags:\n - social\n - seo\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nEstou aqui de novo para mais uma **#dicarapida** sobre um assunto que é bastante importante, mas muita gente esquece ou não faz de forma correta, que são as Meta Tags Sociais.\n\nHoje em dia, as redes sociais são fundamentais para que a gente consiga alcançar um maior número de pessoas. Antes isso ficava mais a cargo das pesquisas orgânicas, ads e outros modelos de divulgação (email marketing, spots de rádio, tv, etc).\n\nNo meu blog, muito do acesso é dado pelas redes sociais, sendo o facebook o maior propagador, acho que é porque sigo os passos do [Fernando Daciuk](http://blog.da2k.com.br/) e mando spam para todos os grupos do face =p\n\nSegue o gráfico abaixo, indicando as origens de acessos do meu blog:\n\n![Gráfico de Acessos do Blog por Origem](/assets/img/dica-rapida-2/canais.png)\n\n## Mas e por que dessa tal de Meta Tag?\n\nCada rede social possui um conjunto de informações para serem lidas e elas serão enviadas do seu site para as redes através dessas Meta Tags. Isso que permite que as redes leiam seu link e já preencham o post de informações. Elas podem ser visíveis para os outros usuários, como: imagem, título, descrição, hiperlink. Mas também podem ser informações somente para análise da rede social, como o tipo do site (blog, website, ecommerce), autor, hora de publicação, tags e etc.\n\n## Facebook\n\nA maior rede social que temos hoje possui um conjunto de informações que é o chamado [Open Graph](https://developers.facebook.com/docs/sharing/best-practices?locale=pt_BR). A partir dela conseguimos organizar bastante as informações e inclusive fazer uma análise do nosso site utilizando o Facebook Insights.\n\nExistem vários tipos de Meta Tags que o Open Graph suporta e todas elas são sempre iniciadas com o prefixo `og:`, caso queira saber todas que tem, basta dar uma olhada lá no site do [Open Graph](https://developers.facebook.com/docs/sharing/best-practices#tags).\n\nAbaixo seguem algumas das tags principais, das quais inclusive utilizo no meu blog:\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\nTendo esse conjunto de informações, quando você for colocar seu link em algum lugar do facebook, ele vai ler as informações e colocar semelhante a imagem abaixo:\n\n![Imagem de um post no Facebook](/assets/img/dica-rapida-2/face-post.png)\n\n**AVISO:** o facebook é uma bosta para ler seus links corretamente, portanto, utilize a ferramenta de [debug](https://developers.facebook.com/tools/debug/og/object/), para que ele possa ler os dados e identificar se está tudo certinho. Lembre-se também de seguir as regras do facebook, como, por exemplo, tamanhos de imagem e dados passados.\n\n## Twitter\n\nOutra grande rede social, um pouco mais simples, mas que também permite carregar certas informações. Esses dados são chamados de Twitter Cards e são iniciados com o prefixo `twitter:`. Para saber um pouquinho mais, [leia a documentação deles](https://dev.twitter.com/cards/overview)\n\nSeguem as tags básicas:\n\n```html\n\n \n \n\n\n\n```\n\nPara que o twitter passe a aceitar seus cards, você precisa validar [neste link aqui](https://cards-dev.twitter.com/validator). Após validado, quando você postar algum link do seu site, ele será visualizado conforme a imagem abaixo:\n\n![Imagem de um post no twitter](/assets/img/dica-rapida-2/twitter-post.png)\n\n## Google Plus\n\nPor último, mas não menos importante, vem o Google Plus. Apesar de muita gente achar inútil, ele tem uma indexação excelente e por ser do google, muitas vezes é favorecido, portanto, não vamos esquecer dele =p\n\nEle segue o padrão do [Schema.org](http://schema.org/) e seguem abaixo as tags:\n\n```html\n\n\n\n\n\n```\n\n## Conclusão\n\nCom isso fecho a **#dicarapida** de hoje, espero que tenham entendido a importância dessas meta tags e consigam mais relevância em suas postagens e/ou sites. Se tiverem alguma dúvida ou alguma informação a acrescentar, só falar nos comentários logo abaixo =)\n" }, { "path": "posts/sou-bom-o-suficiente.md", "content": "---\nlayout: post\ndate: 2016-12-30T01:12:28.000Z\ntitle: Será que sou bom o suficiente?\ndescription: Essa é uma pergunta bastante comum de nós desenvolvedores, e por que será isso?\nmain-class: misc\ntags:\n - sindromedoimpostor\n - life\ncategories: null\n---\n\n## Introdução\n\nE aí meu povo, com o intuito de voltar a postar com mais frequência, estou eu aqui para falar de um assunto não técnico novamente, mas que julgo bem importante e ligado a nossa área.\n\nE para seguir na vibe desse meu post, já vai abrindo essa playlist chamada [Zen Focus](https://open.spotify.com/user/spotify/playlist/70X9CPfVWXmFqX5ObjSvOP), vários acústicos bem relaxantes e bons de se ouvir. Altamente recomendado se você precisar de foco para trabalhar numa tarefa estressante =)\n\n## Primeiro algumas perguntinhas...\n\nSó para ter uma ideia de como você se sente e se tem algumas similiaridades com isso, vamos lá:\n\n### Opiniões sobre você\n\n- Você, em geral, acha o seu trabalho pior do que os outros acham?\n- Você fica em dúvida se deveria estar de fato no lugar que ocupa?\n- Você se sente preocupado com seu conhecimento e se vê sempre abaixo dos seus amigos ou colegas de trabalho?\n\n### Atitudes perto de seus superiores\n\n- Você fica nervoso ou ansioso diante deles?\n- Você fica preocupado se em algum momento seu superior vai descobrir que você não é tão bom e te demitir?\n\n### Seu processo de desenvolvimento\n\n- Você demora mais tempo tentando deixar tudo perfeito do que de fato finalizar as necessidades do projeto?\n- Quando você sobe um código, você fica tão preocupado com o que seus colegas vão pensar que atrapalha o seu dia de trabalho?\n\nSe você respondeu sim para boa parte das perguntas, isso é um sinal que você pode ter a Síndrome do Impostor. Mas calma! Não é o fim do mundo e você não é o único a ter isso, existem vários como você, quer um exemplo bem próximo? **Eu mesmo**, sim eu tenho Síndrome do Impostor há alguns anos e é claro, isso me complica bastante, mas não me impede de viver e crescer profissionalmente.\n\n## Síndrome do Impostor\n\n> A síndrome do impostor (também conhecida como fenômeno de impostor ou síndrome de fraude) é um conceito que descreve indivíduos de alto desempenho que são marcados por uma incapacidade de internalizar suas realizações e um medo persistente de serem expostos como uma \"fraude\".\n\nQuando você sente que nunca é bom o suficiente em algo e tem o constante medo de ser \"descoberto\" é o exato momento que a síndrome do impostor está atacando. Existe um gráfico bem interessante que mostram os dois opostos, que são o `Efeito Dunning-kruger` que é quando a pessoa se acha melhor e superior a pessoas mais capacitadas (os famosos analistas de facebook) e a `Síndrome do Impostor`, que é quando você é habilidoso, mas incapaz de ver isso.\n\n![Gráfico mostrando os dois efeitos](/assets/img/sindrome-do-impostor/imposter.jpg)\n\nÉ comprovado que essa Síndrome é bastante comum em profissões que possuem muitas cobranças e análises, como jornalistas, escritores e claro, programadores!\n\nHá pouco tempo o Hubspot fez uma pesquisa sobre essa Síndrome na área de Desenvolvimento e encontrou resultados muito interessantes.\n\n![Gráfico mostrando a frequência da Síndrome do Impostor em pessoas da área](/assets/img/sindrome-do-impostor/impostor-graph.png)\n\nPraticamente todos os desenvolvedores já passaram ou passam por momentos da Síndrome do Impostor. E isso independe a experiência, pois até programadores com 10 anos ou mais já relataram passar por isso.\n\nÉ claro que é normal os iniciantes passarem por mais momentos assim, pois eles vêem um mundo gigante diante deles e acabam se sentindo incapazes de evoluir e não percebem o quão rápido evoluem. Lembro de ter feito um post chamado [O que ninguém diz para os iniciantes](https://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/), onde vi várias pessoas com esse aspecto e que tentei mostrar que não precisava ser o fim do mundo.\n\n## E por que nós programadores nos sentimos assim?\n\nBom, isso vária muito de pessoa para pessoa, mas existem algumas coisas comuns em nossa área:\n\n- Nossa \"competição\" não é só em nossa cidade, é com qualquer um que tenha computador e uma boa conexão a internet\n- Toda rotina de programação pode ser medida, o que significa que alguém pode fazer a sua tarefa ser 1000% mais eficiente e fazer você se sentir ainda pior\n- Tudo se atualiza tão rápido que nunca conseguimos nos sentir 100% aptos aquilo que fazemos\n- Usuários podem ser muito burros, mas a culpa sempre será do programador\n- Mesmo depois de trabalhar, costumamos continuar usando computador, o que dá a sensação de estarmos trabalhando demais\n- Boa parte de nós somos introvertidos, então buscar por ajuda pode ser algo bem difícil\n\nE por aí vai, existem N razões que provocam essas sensações...\n\n## E como lidar com isso?\n\n### Veja a realidade como ela realmente é!\n\n![Imagem que mostra que na realidade todos são muito parecidos](/assets/img/sindrome-do-impostor/reality.jpg)\n\nÉ claro que existem grandes desenvolvedores, mas você já parou para pensar em quanto tempo eles gastaram para estar ali? E já parou para pensar que duas vidas são muito distintas e que ele pode ter tido várias influências que colaboraram com o crescimento dele? Tente não se comparar, até porque no final todos somos muitos parecidos, bons em alguns aspectos e não tão bons em outros.\n\n### Diminua seu medo de errar\n\nJá parou para pensar que você só vai conseguir evoluir (e ver evolução) se você errar e te corrigirem para não fazer mais? Pense que a cada erro é um acerto no futuro e que além disso, a pessoa que te corrigiu irá enxergar que você já não erra mais naquilo e evoluiu.\n\nEu tinha muito medo de review de código, demorava horas/dias trabalhando em um mínimo trecho de código com um enorme medo de quem alguém pudesse olhar e falar que estava tudo errado ou falar que tava uma merda mesmo.\n\nIsso só me prejudicava pois eu demorava muito para entregar e os erros que eu cometeria sem saber, eu continuava cometendo, pois para mim não eram erros. Quando percebi que reviews são importantes para que você além de terminar sua tarefa melhor, seja guiado para o caminho certo, comecei a notar uma grande evolução no meu código entregado e também passei a aprender muito mais.\n\n### Diminua sua ansiedade\n\nA maioria dos engenheiros, principalmente os mais novos ou gente como eu, tem uma necessidade gigante de produzir muito código bom em muito pouco tempo. Vá devagar, escreva seu código com calma, tente não se preocupar tanto com o tempo, escreva alguns testes, revise seu código, faça um pair programming se tiver como. Todos esses processos que \"demoram\" vão te ajudar a ter uma entrega melhor.\n\n### Não tenha medo de perguntar\n\nMuitas pessoas deixam de perguntar as coisas por medo de se \"exporem\" e serem \"descobertas\" como um impostor. Mas hey! Ninguém nasceu sabendo e muitas das vezes a outra pessoa já se ferrou tantas vezes com aquilo, que vai ser um alívio para ela saber que alguém também está passando pela mesma coisa.\n\nO aliado das perguntas na nossa área é o `pair programming`, que é uma técnica onde duas pessoas programam juntas, como mamãe dizia \"duas cabeças pensam melhor que uma\".\n\n### Dê um desconto a você\n\nA área de desenvolvimento é gigantesca, existem milhares de linguagens, bibliotecas e outras coisas mais sendo lançadas na velocidade da luz. **E você não precisa aprender tudo!** Isso mesmo, não é porque ontem 5 desenvolvedores legais da Google resolveram lançar a máquina do tempo que você precisa já ser o mestre dela. Vá devagar, quando você tiver necessidade, você vai lá e aprende. Não se sinta mal se você não souber, você conhece alguém que sabe programar em todas as linguagens do mundo e bem?\n\n### Procure por bons feedbacks\n\nA Síndrome do Impostor é uma coisa muito interna, mas coordenadores e colegas de trabalho são bastante importante para ajudar em quão confiante você pode ser com seu trabalho e suas habilidades. Sempre escute os bons feedbacks e aprenda com eles, isso significa que você não precisa chegar amanhã na empresa se achando o melhor do mundo, mas também não precisa se sentir um impostor por estar ali. Escute bem as dicas e absorva tudo que for de bom e, caso você ouça algo ruim e que não lhe fará bem só deixe para lá e busque outros feedbacks melhores.\n\n## Mais leitura\n\nSe você ficou curioso com o assunto e quer conhecer outros programadores que também relataram esse problema, seguem alguns links:\n\n- [Overcoming Impostor Syndrome or How I Learned to Stop Worrying and Love Coding by Alicia Liu](https://medium.com/@aliciatweet/overcoming-impostor-syndrome-bdae04e46ec5#.g63job35d)\n- [I’m an Impostor by David Walsh](https://davidwalsh.name/impostor-syndrome)\n\n## Conclusão\n\nBom pessoal, é basicamente isso que eu queria passar para vocês. Estamos aí quase acabando o ano, geral definindo suas metas e se preocupando com sua vida e analisando como foi seu ano. Peço que vocês analisem o ano que passou, em quais momentos você se sentiu assim e o que você pode fazer para melhorar, essa será sua meta de 2017 a partir de então.\n\nEu não posso dizer que estou curado da Síndrome do Impostor e muito menos que não sinto nada, pelo contrário, ao mesmo tempo que escrevia eu fui lembrando dos várias momentos que tive esse ano. Mas aos poucos eu vou tentando melhorar isso, vou tentando me aliviar mais e ver que muitos dos problemas sou só eu quem crio e por isso eu posso deixá-los de lado.\n\nFaça isso você também, enfrente essa dificuldade de se sentir sempre abaixo dos outros. Estude sim, não deixe de se dedicar, mas não persiga isso deixando tudo de lado só porque você se sente incapaz e um impostor.\n" }, { "path": "posts/talk-uma-conversa-sobre-trabalho-remoto.md", "content": "---\nlayout: post\ndate: 2020-04-20T15:34:33.000Z\ntitle: \"Talk: Uma conversa sobre Trabalho Remoto\"\ndescription: Será que remoto é para todo mundo? Quais os desafios? Quais os\n ganhos? Por onde começar?\nmain-class: dev\ntags:\n - remoto\n - dicas\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Introdução\n\nFala pessoal, semana passada eu fui convidado pelo pessoal do [Meetup Frontend SP](https://www.meetup.com/pt-BR/Frontend-Dev-SP-Meetup/) para palestrar sobre qualquer assunto e eu escolhi **Uma conversa sobre Trabalho Remoto**, que eu acho bem interessante e importante para os momentos atuais e do qual eu já tenho experiência há alguns anos.\n\nVocê pode acessar os [slides da palestra no seguinte link](https://docs.google.com/presentation/d/1Ra3g1zKOQ1_G_9lFLChjo3mm5d9TDAZpy6JCvLLaNcI/edit?usp=sharing)\n\n## Vídeo\n\n\n\nSe você quiser pode [assistir o evento inteiro](https://www.youtube.com/watch?v=l1hPaVpSKMI), que incluiu também uma palestra bem legal do Vitor Mendrone.\n\n## Perguntas e Respostas\n\nComo eu falei no vídeo, iria responder as perguntas que não deu tempo de responder num post e aqui estamos nós. Então vamos lá:\n\n> Já tenho um bom portifólio no github, currículo bem feito, posts no LinkedIn e perfil em inglês também. Já dá pra aplicar pra vagas remotas e júnior ou falta algo?\n\nPelo que você falou, eu diria que já pode aplicar sem problemas. A única coisa que eu fiquei meio apreensivo foi quando você falou \"júnior\". Eu não recomendo trabalho remoto para Jr.\n\nAcho que um ambiente alocado nos primeiros anos de carreira é essencial para se aprender mais sobre como é um desenvolvimento de software em geral, além do trabalho em equipe. E até mesmo para poder evoluir vários pontos que julgo essenciais na vida de remoto, que é a comunicação e disciplina.\n\nMas se você já tiver pelo menos 1-2 anos de experiência e se sentir confiante nesses aspectos, é só aplicar e ver sua adaptação, as vezes funcione super bem.\n\n> Boa noite, ainda não possuo inglês fluente, devo mesmo assim, deixar o perfil em inglês?\n\nEu diria para fazer uma análise, muitos de nós temos medo com inglês e as vezes nos diminuímos muito. Você consegue se comunicar com outra pessoa (mesmo que cometa um erro aqui e ali)? Se você conseguir, já é o suficiente.\n\nMas também precisar ver outra questão, \"Quero vagas para fora no momento?\" Se você quiser trabalhar para empresas estrangeiras, o inglês é a coisa **mais importante**. Praticamente todas as empresas terão essa como a primeira etapa, já que se você não conseguir se comunicar, não será possível trabalhar ali.\n\n> Quem é de outro ramo, dá para mudar?\n\nSim, é mais do que possível mudar! Eu tenho um post [falando da minha trajetória](https://willianjusten.com.br/minha-trajetoria-ate-ser-desenvolvedor/). Eu fazia Química Industrial e mudei completamente! Claro que não é uma transição super rápida ou fácil, mas é sim possível.\n\n> O que é Síndrome do Impostor?\n\nEu tenho um post que se chama [Será que sou bom o suficiente?](https://willianjusten.com.br/sou-bom-o-suficiente/), que aborda exatamente sobre esse tema, vale a pena dar uma lida lá, mas respondendo de forma mais direta.\n\nA síndrome do impostor (também conhecida como fenômeno de impostor ou síndrome de fraude) é um conceito que descreve indivíduos de alto desempenho que são marcados por uma incapacidade de internalizar suas realizações e um medo persistente de serem expostos como uma \"fraude\".\n\n> As empresas aqui no Brasil pagam mais ou menos para o trabalho 100% remoto?\n\nIsso varia de empresa para empresa, é muito difícil de afirmar qualquer coisa, mas é importante verificar bem com a empresa em qual modelo de contratação será o trabalho, visto que se for PJ (Pessoa Jurídica), o salário precisa ser maior para que você possa bancar os gastos extras que você terá e também a falta de benefícios como férias, 13 salário, INSS e outros.\n\n## Conclusão\n\nEspero que vocês tenham curtido a palestra, e se você quiser, eu tenho [uma série de posts sobre trabalho remoto](https://willianjusten.com.br/series/#trabalhar-no-exterior-remoto-viagens-etc) que você pode dar uma olhada, se está procurando saber mais do assunto.\n" }, { "path": "posts/tecnicas-de-aprendizado.md", "content": "---\nlayout: post\ndate: 2015-01-06T10:21:26.000Z\ntitle: Técnicas de aprendizado\ndescription: Se você tem costume de procrastinar, tem dificuldade de aprender\n algo rápido. Aprenda técnicas que te permitem aprender melhor e aumentar sua\n produtividade.\nmain-class: misc\ntags:\n - estudo\n - produtividade\n---\n\n![Tirinha da Mafalda: Garoto fala: As pessoas esperam que o ano que está começando seja melhor que o anterior. Mafalda responde: Aposto que o ano que está começando espera que as pessoas é que sejam melhores](/assets/img/tecnicas-de-aprendizado/mafalda-ano-procrastinando.png)\n\nVocê já se pegou deixando uma tarefa para depois só porque estava cansado ou com preguiça de fazer naquele momento? Já ficou se punindo por não ter feito algo que deveria fazer? Ou então sentou para estudar e até a parede parecia mais interessante? Se você respondeu **não** para todas as perguntas, some daqui seu ET, brincadeiras a parte, é comum do ser humano achar certas tarefas tediantes/desagradáveis e por isso perdemos nosso foco e deixamos de fazer nossas tarefas e isso se chama Procrastinação.\n\n> **Procrastinação:** é o ato de adiar tarefas, realizando outras, menos importantes ou mais prazerosas, deixando as mais importantes para depois.\n\nEste que vos escreve tem um enorme problema de concentração e uma vontade absurda de procrastinar. Eu trabalho em outra cidade, então faço uma viagem um pouco desgastante, acabo chegando em casa cansado e tudo que eu quero é descansar e foi assim que eu demorei mais de 1 ano e meio falando que iria fazer um site/blog e não fiz. Na antiga empresa em que trabalhei, conheci um cara, que para mim é um dos programadores mais fodas que conheço, mas que se esconde, que é o [Guilherme Louro](https://github.com/guilouro) e esses dias ele postou sobre uma das técnicas que vou falar abaixo e bom, apesar de conhecer, eu resolvi dar uma chance e eis que criei meu blog!!\n\n## Introdução\n\nNo intuito de auxiliar as pessoas a melhorarem e controlarem esse estado de vontade de procrastinar, alguns pesquisadores desenvolveram certos métodos de estudo e eu irei falar um pouco sobre alguns deles. A ideia é te dar o caminho das pedras aqui, você escolher um método que mais combina com você e partir para cima. A meta é: **Deixe de procrastinar!**\n\n### Técnica do Pomodoro\n\nA [Técnica do Pomodoro](http://pomodorotechnique.com/) foi criada nos anos 90 por um desenvolvedor chamado [Francesco Cirillo](http://cirilloconsulting.de/). Ele deu esse nome graças aos timers em formato de tomate que ele usou enquanto estudava na universidade. Essa é uma das metodologias mais simples e o conceito está em separar grandes tarefas em pequenas porções de tempo, os chamados \"Pomodoros\" e a cada pomodoro fazer uma breve pausa, para que o cérebro recupere um pouco das energias, relaxe e permita voltar a se concentrar melhor novamente. Isto permite melhorar a concentração e o foco com o tempo. Essa é considerada a técnica favorita dos programadores. Se eu não me engano o [Ney Simões](https://github.com/neysimoes) utiliza este método, se você utilizar esse método também, fala nos comentários, é sempre bom compartilhar experiências =)\n\n#### Como funciona?\n\n1. Escolha uma tarefa para ser completada\n2. Inicie o Pomodoro (o tempo padrão é de 25 minutos)\n3. Trabalhe somente nesta tarefa até que o tempo acabe\n4. Descanse por um pequeno período de tempo (o tempo padrão é de 5 minutos)\n5. Retorne ao Pomodoro\n6. A cada 4 Pomodoros uma pausa maior deve ser feita (em geral são de 15-30 minutos)\n\n#### Links para começar\n\n* [Site oficial](http://pomodorotechnique.com/) - fala basicamente tudo sobre o método\n* [Tirinha genial explicando o método](http://mel-meow.com/uma-longa-noite-aprendendo/) - a tirinha que o Guilherme compartilhou\n* [Pomodoro One](https://itunes.apple.com/us/app/pomodoro-one/id907364780?mt=12) - Aplicativo para Mac com um timer\n* [Pomotodo](https://pomotodo.com/app/) - App online que mapeia os pomodoros e tarefas executadas (utilizo ele)\n* [Tomato Timer](http://tomato-timer.com/) - outro app online\n* [Tomighty](http://www.tomighty.org/) - App para Mac/Windows\n\n### Getting Things Done (GTD)\n\nO GTD é uma invenção do David Allen, dono do site [gettingthingsdone.com](http://gettingthingsdone.com/). Esse método foi feito com o intuito de organizar o caos que a nossa cabeça faz as vezes. Ele tem como objetivo encorajar o usuário a criar metas no seu dia-a-dia e realizá-las. Essas metas podem ser desde arrumar o seu quarto até terminar uma feature importante de um sistema.\n\n#### Como funciona?\n\n1. `Etapa de Coleta`: use um caderno de anotações, um quadro de tarefas, qualquer coisa, simplesmente anote todas as tarefas que você precisa executar.\n2. `Etapa de Processamento`: verifique as tarefas, veja quais são possíveis, quais não são e as elimine.\n3. `Etapa de Organização`: organize as listas de tarefas e crie categorias para cada tipo de ação.\n4. `Etapa de Reflexão`: Sempre revise constantemente as suas tarefas, limpe e atualize as listas, veja tarefas que para executar depois.\n5. `Etapa de Execução`: simplesmente faça suas tarefas, utilize o sistema da melhor maneira possível.\n\n#### Links para começar\n\n* [Site oficial](http://gettingthingsdone.com/) - lá tem as etapas, links para livros e etc.\n* [Produzindo.net](http://www.produzindo.net/gtd-getting-things-done-parte-1-introducao/) - Um blog falando mais a fundo sobre o GTD\n\n### Seinfeld Secret Method (Don't Break the Chain)\n\nEsse é um método simples de implementar e tem como objetivo marcar as coisas que são importantes para nós e permitindo assim, alcançar nossos objetivos. O conceito é simples, gaste um pouco do seu tempo fazendo uma tarefa, ao final do dia, marque um X no calendário. Se você deixar de fazer algum dia, você não pode marcar o X e com isso \"quebra a corrente\".\n\n#### Como funciona?\n\n1. Marque seus objetivos, não comece com mais que 3, você pode aumentar depois para 4, caso tenha certeza que irá conseguir.\n2. Defina tarefas mínimas para cada objetivo, por exemplo, \"correr 1km\".\n3. Defina suas regras e limites\n4. Imprima um calendário e vá marcando o X a cada dia que fizer uma tarefa.\n\n#### Links para começar\n\n* [How Seinfeld's Productivity Secret Fixed My Procrastination Problem](http://lifehacker.com/5886128/how-seinfelds-productivity-secret-fixed-my-procrastination-problem) - um cara contanto sua experiência sobre o método\n* [Writerstore.com](https://www.writersstore.com/dont-break-the-chain-jerry-seinfeld/) - um artigo falando um pouco mais do método\n* [jamesclear.com](https://jamesclear.com/stop-procrastinating-seinfeld-strategy) - mais um artigo falando sobre o método\n\n### Seu próprio método\n\nAs vezes você não quer seguir a risca nenhum desses métodos, mas quer parar de procrastinar, quer começar a aprender, a se concentrar melhor, então não desiste não cara, cria o seu método e parte para cima dele, existem várias histórias muito legais de pessoas que resolveram fazer isso, uma das que mais gosto é do [John Resig](https://github.com/jeresig) criador do JQuery e um dos fundadores da [Khan Academy](https://www.khanacademy.org/).\n\n* [Write Code Every Day](http://ejohn.org/blog/write-code-every-day/) - John Resig diz como resolveu programar um pouco a cada dia.\n* [How I finally learned to build stuff with Rails](https://medium.com/@mackenziechild/how-i-finally-learned-rails-95e9b832675b) - Mackenzie Child dá algumas dicas de como fez para aprender Rails\n* [Jennifer Dewalt](http://blog.jenniferdewalt.com/) - essa programadora mostra a sua experiência de fazer 1 site por dia durante 180 dias!\n\n### Conclusão\n\nSe existe coisa pior que a procrastinação, eu não conheço. Hoje de manhã estava conversando com o [Fernando Daciuk](http://blog.da2k.com.br/) exatamente sobre procrastinação, é uma parada muito complicada, todo mundo já viveu ou vive um tempo em que fazer qualquer coisas fora do horário de expediente já é cansativo e desanimador. Espero que com esse texto você se anime mais, busque conhecimento, compartilhe o que aprendeu e se dedique mais. Quem fala aqui é um ex-químico que se apaixonou tanto pela área que desistiu de tudo só para começar a aprender a mexer com web. Boa sorte galera! E se você tem uma história legal, compartilha aí com a gente!!\n" }, { "path": "posts/theme-color-android-lollipop.md", "content": "---\nlayout: post\ndate: 2015-02-10T23:08:04.000Z\ntitle: Theme Color Android Lollipop\ndescription: Como fazer a barra de notificações do android ficar com a cor do seu site.\nmain-class: dev\ntags:\n - android\n - theme\n - tutorial\ncategories: null\n---\n\nFala galera, vim trazer mais uma **#dicarapida**, essa é bem rápida mesmo. Um amigo estava navegando meu blog no celular dele e notou que tudo ficou com a cor do meu site e me perguntou como fazia, já que o intuito do blog é passar conhecimento, mesmo que seja bem pequeno e simples, resolvi mandar essa dica aqui =)\n\nEssa modificação passou a valer depois da atualização do Chrome 39 para mobile, que veio com o Android Lollipop, portanto, só funciona nessa versão. O que podemos ficar felizes, já que celulares mais modestos como o Moto G (um dos mais utilizados no Brasil), já possui essa versão.\n\nPara quem não tem o Lollipop ainda e quiser saber como é mais ou menos, segue a imagem abaixo:\n\n![Captura de tela de um celular android](/assets/img/theme-color/theme-color.jpg)\n\nPara fazer isso é bastante simples, basta adicionar uma meta tag no head do seu site.\n\n```html\n\n\n```\n\nBom é só isso, vamos tornar nossos sites cada vez mais com a nossa cara, pequenos detalhes fazem a diferença!\n" }, { "path": "posts/trabalhando-com-a-tela-util-do-iphone.md", "content": "---\nlayout: post\ndate: 2020-05-06T12:25:35.000Z\ntitle: Trabalhando com a tela útil do iPhone\ndescription: Como lidar com o notch no topo e a navegação sem botões na parte\n inferior do iPhone num Web App.\nmain-class: dev\ntags:\n - iphone\n - webview\n---\n\n## Introdução\n\nFala pessoal, o post de hoje é sobre uma coisa bem interessante que eu não tinha a menor ideia e acabei de descobrir! Espero que também seja novidade para vocês, se num for, ~~finjam que é~~ tudo bem xD\n\nComo hoje não tem vídeo, não posso deixar de postar uma playlist né? Para hoje, vai a [Evening Chill](https://open.spotify.com/playlist/37i9dQZF1DWZ0OzPeadl0h?si=ybpTtFbZTDO_reyTvED70Q), várias músicas bem legais e calmas.\n\n## Atualização da barra do site\n\nUm aluno [escreveu um tweet](https://twitter.com/brenonovelli/status/1257678890069307392) sobre um projeto que ele criou através do meu Curso de Gatsby. E eu notei que ele criou uma sidebar off-canvas no mobile que eu já estava há muito tempo para fazer no meu blog e sempre enrolava.\n\nAproveitei que estava com tempo livre e resolvi fazer. Se você nunca viu meu site no celular, segue abaixo um gif do antes/depois:\n\n![Menubar antes/depois com mais e menos ícones e uma sidebar vindo da lateral](/assets/img/menubar-before-after.gif)\n\n## Problema do iPhone X\n\nAntes de lançar essa mudança, eu perguntei ao meu amigo [Guilherme Louro](https://github.com/guilouro) para dar uma testada e ele falou que tava muito ruim no iPhone X, pois como esse celular não tem botões de menu, mas sim uma barrinha na parte de baixo, acabava que ficava conflitando. Veja abaixo a imagem de como estava:\n\n![Tela do iphone X mostrando uma barrinha branca logo acima da barra dos ícones](/assets/img/iphone-barra-antes.jpeg)\n\nAntes mesmo o site já tinha problemas com isso, mas ninguém nunca havia me reportado. Foi aí que o próprio Guilherme comentou que no React Native existe uma coisa chamada [Safe Area View](https://reactnative.dev/docs/safeareaview) que é exatamente para solucionar esse problema. Só que meu site obviamente não usa native, então resolvi procurar sobre isso para web e encontrei a [documentação do webkit](https://webkit.org/blog/7929/designing-websites-for-iphone-x/) falando como fazer e funciona mesmo!\n\n## Resolvendo o problema da área útil\n\nPara resolver esse problema é bem fácil até. A primeira coisa que precisamos fazer é identificar essa área útil e alterar o valor da `viewport` para identificar e ocupar toda a área, isso é feito adicionando o `viewport-fit=cover` na tag que utilizamos no nosso `head`:\n\n```html\n\n```\n\nDepois disso, nós precisamos respeitar as chamadas `safe areas` do iphone, abaixo segue uma imagem explicando:\n\n![Imagem do iphone indicando as variáveis de safe-area-inset para cada extremidade](/assets/img/safe-areas.png)\n\nCada um desses lados tem uma variável que podemos utilizar no nosso css, que são: `safe-area-inset-left`, `safe-area-inset-right`, `safe-area-inset-bottom` e `safe-area-inset-top`.\n\nSabendo qual variável precisamos trabalhar, é só escrever o css da seguinte forma:\n\n```css\n.menu-bar {\n padding-bottom: env(safe-area-inset-bottom);\n}\n```\n\nLogo após fazer isso, o meu site já estava corrigido!\n\n![Tela do iphone agora mostrando que as barras não colidem mais entre si](/assets/img/iphone-barra-depois.jpeg)\n\n## Conclusão\n\nSei que é uma coisa bem específica e bem pequena, mas é sempre bom tratarmos nosso site da melhor forma e para todos. E eu confesso que fiquei bem feliz de descobrir uma coisa nova que resolvi escrever esse post.\n" }, { "path": "posts/trabalhando-com-git-hooks-de-forma-facil.md", "content": "---\nlayout: post\ndate: 2016-07-10T15:37:37.000Z\ntitle: Trabalhando com Git Hooks de forma fácil\ndescription: Evite que código sujo ou não testado suba para o repositório remoto.\nmain-class: dev\ntags:\n - git\n - tutorial\ncategories: null\n---\n\n## Introdução\n\nFaaaala pessoal, faz um tempinho que escrevi meu último post, nesses últimos dias tiveram vários e vários eventos em São Paulo e eu tive o prazer de participar =D\n\nLá eu palestrei sobre dois assuntos bem legais e se você ainda não viu meus slides, seguem:\n\n- [CSS loves Math - Meetup CSS SP](https://willianjusten.com.br/meetup-css-sp)\n- [JS loves Music](https://willianjusten.com.br/frontinsampa-16)\n\nEnquanto escrevo esse post vou ouvindo a trilha de um jogo que estou viciado, o jogo em questão é o premiado [Life is Strange](https://www.youtube.com/watch?v=AURVxvIZrmU) e se você só de assistir esse trailer, já se apaixonou pelo jogo, segue comigo na [playlist](https://open.spotify.com/user/officiallifeisstrange/playlist/1f5ZzLDTXHTDR8CYIEddpW), que é incrivel <3\n\n## Git Hooks\n\nGit hooks são scripts que rodam automaticamente cada vez que você realiza alguma ação em particular no repositório Git. Eles permitem modificar o comportamento interno do Git e adicionar triggers customizáveis em vários pontos chave do ciclo de desenvolvimento.\n\nCasos comuns do uso de Git Hooks são encorajar alguma política de commit, alterar algo do ambiente dependendo do estado do repositório ou implementar algum workflow de Integração Contínua.\n\nEssas triggers podem ser ativadas através de commits, push para o repositório remoto, rebase, merges e etc.\n\n## Como funciona\n\nTodo repositório Git ao ser criado, gera um pasta `.git`, que, em geral, é oculta pelos sistemas operacionais. Dentro dessa pasta que é feita toda a mágica de versionamento, logs, separação de branches e etc. E lá também que temos os hooks, se você mandar listar o que tem na pasta `.git`, você verá algo como:\n\n```bash\n$ tree -d -L 1\n.\n├── branches\n├── hooks\n├── info\n├── logs\n├── objects\n└── refs\n\n6 directories\n```\n\nComo vamos trabalhar com Hooks, já é de se imaginar que devemos nos preocupar com a pasta `hooks`. Se listarmos os arquivos, teremos:\n\n```bash\n$ ls\n\napplypatch-msg.sample pre-applypatch.sample pre-rebase.sample\ncommit-msg.sample pre-commit.sample prepare-commit-msg.sample\npost-update.sample pre-push.sample update.sample\n```\n\nSe você reparar, eles já possuem nomes bem distintos de quando serão ativados. Todos estão com a extensão `.sample` e para fazê-los funcionar, basta remover essa extensão. Todos eles já possuem algum código dentro, por exemplo, se eu pegar o arquivo `commit-msg.sample`.\n\n```bash\n#!/bin/sh\n#\n# An example hook script to check the commit log message.\n# Called by \"git commit\" with one argument, the name of the file\n# that has the commit message. The hook should exit with non-zero\n# status after issuing an appropriate message if it wants to stop the\n# commit. The hook is allowed to edit the commit message file.\n#\n# To enable this hook, rename this file to \"commit-msg\".\n\n# Uncomment the below to add a Signed-off-by line to the message.\n# Doing this in a hook is a bad idea in general, but the prepare-commit-msg\n# hook is more suited to it.\n#\n# SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\\(.*>\\).*$/Signed-off-by: \\1/p')\n# grep -qs \"^$SOB\" \"$1\" || echo \"$SOB\" >> \"$1\"\n\n# This example catches duplicate Signed-off-by lines.\n\ntest \"\" = \"$(grep '^Signed-off-by: ' \"$1\" |\n sort | uniq -c | sed -e '/^[ ]*1[ ]/d')\" || {\n echo >&2 Duplicate Signed-off-by lines.\n exit 1\n}\n```\n\nPoderíamos editar esse mesmo arquivo e colocar algo como:\n\n```bash\n#!/bin/sh\n\necho 'Boa! Continue trabalhando campeão!'\n```\n\nNo momento de commitar algo, ele irá mostrar da seguinte forma:\n\n![Mensagem de Boa! Continue trabalhando campeão logo após ter realizado um commit](/assets/img/git-hooks/commit-message.png)\n\nDemais isso né? Aí você pode chegar e falar, mas eu não sei escrever shell script, sem problemas, nosso lindo Python também funciona <3\n\nAhhh, mas eu também não sei Python... Sem problemas, para isso temos algumas outras ferramentas para nos ajudar!\n\n## Utilizando o Husky\n\nO [Husky](https://github.com/typicode/husky) é uma ferramenta incrível feita para o ecossistema Node/Npm e permite criar hooks da forma mais fácil de todas =D\n\nPrimeiro você precisa instalar, o que é um simples:\n\n```bash\n$ npm install husky --save-dev\n```\n\nDepois disso, basta ir no seu `package.json` na parte de scripts e colocar os hooks desejados e as tarefas que você deseja fazer. Segue um exemplo:\n\n```json\n{\n \"scripts\": {\n \"precommit\": \"npm run lint && npm test\",\n \"prepush\": \"npm run lint && npm test\",\n \"lint\": \"eslint ./src\",\n \"test\": \"...\"\n }\n}\n```\n\nAli eu estou criando dois hooks que são `precommit` e `prepush` e estou dizendo que antes de um commit ou um push para o remoto, eles deverão rodar os comandos `lint` e `test`, que eu também determinei no meu npm script. Isso vai garantir que ele verifique se no código não tem nada fora do padrão de escrita, usando o nosso lint. E também irá rodar os testes, evitando que suba algo quebrado.\n\n![Um carinha com bigodes e vestido com camisa de unicórnio falando it's magic de forma bem engraçada](https://i.imgur.com/iZcUNxH.gif)\n\nSe você não conhece o `eslint` para verificar seu padrão de escrita, dá uma olhada nesse [post sobre linters](https://willianjusten.com.br/analisando-seu-codigo-js-com-linter/) que eu escrevi.\n\n## Conclusão\n\nBom galera, espero que vocês tenham entendido o quanto é simples de se utilizar um Git Hook e como ele pode ser importante para o nosso desenvolvimento. Não quero mais ninguém subindo código fora de padrão e com testes quebrando hein! =p\n" }, { "path": "posts/um-novo-projeto-um-novo-desafio.md", "content": "---\nlayout: post\ndate: 2016-03-19T05:57:56.000Z\ntitle: Um novo projeto, um novo desafio\ndescription: Já que eu escrevo, por que não fazer vídeos também? Hoje começa\n mais um desafio pessoal meu, criar cursos sobre desenvolvimento web em geral.\nmain-class: misc\ntags:\n - frontend\n - dev\n - cursos\n - jekyll\ncategories: null\n---\n\n## Introdução\n\nFala pessoal, já faz um mês que não apareço por aqui e peço desculpas por isso. Mas não foi sem motivos, trago hoje uma surpresa que há muito eu já estava querendo fazer. Estou num Uber indo para rodoviária, o projeto já está pronto e no ar e eu estou empolgado com vontade de mostrar logo para todo mundo, então, por favor, ignorem os vários erros que aqui podem conter.\n\nComo muitos de vocês que vem ao blog, vários também vem conversar comigo através de redes sociais e até email. E vários sempre perguntavam se eu fazia video aulas ou tinha interesse de fazer. Confesso que a ideia de fazer vídeos me era interessante, mas eu sempre esbarrava em várias perguntas: \"Como fazer?\", \"O que a galera precisa?\", \"Será que vão gostar?\" e além dessas perguntas, vinham vários medos. Para alguns pode não parecer, mas eu sou muito tímido e fazer vídeos para um monte de gente, que me veria codando e ainda falando, me causava um certo arrepio.\n\nMas assim como no ano passado eu resolvi combater meus medos e comecei esse blog, no início desse ano uma das minhas metas era começar a gravar vídeo aulas. E aí vou falar um pouquinho para vocês de como foi tudo isso.\n\n\n## Feedbacks\n\nAssim que comecei meu blog, eu tive a ideia de criar muitos posts tutoriais e foi bem assim que foram me perguntando se eu não faria vídeos daquilo que estava ensinando, alguns falavam que apesar de acharem os posts excelentes, aprendiam mais e fixavam melhor quando viam vídeo aulas. E eu tinha de concordar, eu, assim como todos os outros programadores, estudo muito e gosto bastante quando é algo em vídeo.\n\nPensando nisso, perguntei para alguns amigos que são sinceros, daqueles que se tu fizer merda vão te criticar até o fim da vida. E todos eles falaram para fazer vídeos sim, que gostam da minha didática e tinha tudo para dar certo. Alguns sacanearam que seria até bom, porque eu falo beeeem devagar e explico tudo nos mínimos detalhes.\n\n\n## Sobre o que falar e para quem?\n\nBom, talvez uma das minhas maiores dúvidas. Eu gosto de tanta coisa, tem tanta coisa que eu gostaria de passar, tanto para quem está começando como para quem já programa há algum tempo. Mas por ser o primeiro curso, precisava ser algo especial e genérico, que pudesse agradar a todos. Depois de muito pensar, a primeira coisa que me veio a cabeça foi, poxa, seu primeiro post do blog foi falando sobre como você criou seu blog e o quanto ele é prático de usar, por que não ensinar isso?\n\nVejo muitas pessoas que tem interesse em criar um site simples, um blog, um portfólio, mas sempre caem nas dúvidas, como fazer? Onde hospedar? Será que vai ser caro? Como faz para colocar no ar? Essas dúvidas são mais comuns que você imagina e faz todo o sentido, isso tudo é muito complicado, só não precisa ser.\n\nSendo assim, o primeiro assunto já estava decidido! Vamos criar um site usando Jekyll do zero e colocar no ar usando o Github Pages!\n\n\n## Cobrar ou não cobrar?\n\nBom, está aí um assunto que divide milhares, tem pessoas que acham justo que seja cobrado, afinal de contas teve todo um trabalho envolvido ali por trás. Já, outras pessoas, chegam a brigar, ser extremistas e falar que tem que ser tudo gratuito para comunidade, uhul, vamos viver num mundo anarquista, mimimis e whiskas sachê...\n\nDiante de tudo isso, o que eu pensei foi, não vou deixar de ajudar a comunidade de desenvolvimento que sempre me ajudou e me acompanha. Vou fazer cursos gratuitos sim, para que as pessoas que estão entrando nesse mundo, possam ter conteúdo para estudar e começarem a se aventurar aí.\n\nMas também farei conteúdo pago. Aí você vem e fala: \"Uééeee? Mas você acabou de dizer que queria ajudar a comunidade, vai virar capitalista agora é?\". Não é bem assim também. Eu me comprometo em sempre fazer conteúdo gratuito para o pessoal, mas cursos mais avançados ou mais demorados, eu preciso que sejam pagos. Até porque são horas de trabalho gastos, onde eu vou abdicar de todos os meus freelas em prol de passar conteúdo para vocês.\n\n\n## Funcionamento\n\n**Atualizado 2018**: Todos os cursos funcionam na Udemy e você pode ver a lista de todos os cursos e seus cupons de desconto no [link aqui](https://willianjusten.com.br/cursos/).\n\nComo eu disse acima, existirão cursos gratuitos rolando e cursos pagos também, os pagos serão seus para sempre e você poderá fazer quando quiser, sem esse negócio de mensalidade, anuidade e etc. Comprou comprou, agora é seu! O pagamento dos cursos poderá ser feito via Paypal, cartão de crédito direto na plataforma e se você quiser um desconto, pode me mandar uma mensagem e fazer uma transferência ou depósito. O negócio é todo mundo conseguir fazer os cursos e ser feliz =D\n\n\n## Como ajudar?\n\nExistem várias formas que você pode me ajudar. [Momento de Will mendigando]\n\n### Compartilhe!\n\nSe você gostar do curso, de mim, de desenvolvimento ou sejá lá o que for. Ajuda o amigo aqui, compartilhe no Facebook, no Twitter, no Google Plus, para os seus grupos do Whatsapp, cara, fala até para sua mãe e cachorro!! Passe a palavra a todas as pessoas que você puder, essa já é uma ajuda **gigantesca**!\n\n### Faça os cursos e comente\n\nNão adianta eu criar e não ter ninguém para assistir ou nenhum feedback. Assista, faça algum projetinho sobre, meta o pau se estiver uma merda, só não seja apático. Cada vídeo dos cursos vai ter uma seção de comentários logo abaixo, onde todos podem tirar dúvidas tanto comigo, quanto entre si. Imagine conversar com outros alunos por ali e compartilhar conhecimento, nada vai me deixar mais feliz.\n\n### Dê sugestões\n\nFale sobre o que você quer assistir, quais assuntos acha interessante, os cursos serão criados baseados nisso, não importa se você é iniciante ou avançado, só fale do que se interessa. E se for algo sinistrão, que eu também não sei, vou ter o maior prazer de aprender para poder ensinar =D\n\n## Um abraço e que comecem os estudos!!\n\nVamos lá galera, todo mundo acessando, compartilhando, curtindo, comentando e sendo feliz!!!\n\n[Link maravilhoso para os cursos!](https://willianjusten.com.br/cursos/)\n" }, { "path": "posts/um-post-por-dia.md", "content": "---\nlayout: post\ndate: 2015-01-05T13:21:09.000Z\ntitle: \"#1postperday!\"\ndescription: A ideia é postar pelo menos uma vez por dia, quanto mais conteúdo\n de web em PT-BR melhor!\nmain-class: misc\ntags:\n - \"#1postperday\"\n - rss\n---\n\nOlá galera, como devem ter notado, foram dois dias seguidos e dois posts e será sempre assim! Eu já vinha com essa ideia na cabeça e quando vi esse [post feito pelo Fernando Daciuk](http://blog.da2k.com.br/2014/12/31/um-post-por-dia/), resolvi que irei tentar seguir isso a risca!\n\nA maioria dos desenvolvedores que tem um blog, sabem o quanto é difícil manter um blog atualizado, seja por muito trabalho, projetos pessoais ou outras prioridades no momento. Mas apesar de saber desses desafios, quero tentar o/\n\nAssim como o Fernando falou, a ideia é gerar e compartilhar conteúdo em pt-BR, que sabemos que ainda há bem pouco.\n\nTodos os posts serão compartilhados com a hashtag **#1postperday**, então se você quiser seguir, basta procurar por essa tag.\n\nSe você é desenvolvedor e se interessou pela ideia, não espera não, vai lá postar começar a postar!!\n\n### Observação\n\nRecebi ótimos feedbacks de amigos e pessoas desconhecidas, agradeço bastante a todo mundo =)\n\nMas eu também vi bastante gente falando \"Até favoritei seu blog para acompanhar\", acho mega legal isso, mas pow, favoritar não vai te avisar se tem post novo ou não, segue no [RSS](https://willianjusten.com.br/sitemap.xml) que é bem mais fácil.\n\nEu particularmente utilizo o [Feedly](http://feedly.com/) e junto a ele uso uma [extensão no chrome](https://chrome.google.com/webstore/detail/feedly-notifier/egikgfbhipinieabdmcpigejkaomgjgb) que me notifica a cada post novo, é assim que eu me mantenho sempre atualizado =)\n\n![Imagem mostrando uma tela com xml para rss](/assets/img/one-post-per-day/feedly.png)\n\nSe você estiver com a extensão do Feedly instalada e clicar em [RSS](https://willianjusten.com.br/sitemap.xml) vai abrir uma janela parecida com a da imagem acima, aí é só mandar abrir e pronto, toda vez que lançar algo novo, você é avisado, assim fica mais fácil de não perder nada.\n\nE para vocês não falarem que eu fiz um post praticamente inútil, vai aqui um listinha de feeds que eu sigo (não são todos, porque senão seria um listão):\n\n#### Gringos\n* [Echo JS](http://www.echojs.com/rss) - posts sobre JS o dia inteiro\n* [A List Apart](https://alistapart.com/main/feed/) - blog sobre desenvolvimento web\n* [Codrops](http://feeds2.feedburner.com/tympanus) - blog mais lindo sobre desenvolvimento web e design\n* [Creative JS](http://creativejs.com/feed/) - Blog sobre JS e um pouco de curiosidades\n* [CSS-Tricks](http://feeds.feedburner.com/CssTricks) - Blog sobre desenvolvimento frontend\n* [Smashing Magazine](http://rss1.smashingmagazine.com/feed/) - Blog sobre desenvolvimento web\n" }, { "path": "posts/um-tema-para-todos-os-lugares-dracula-pro.md", "content": "---\nlayout: post\ndate: 2020-05-08T10:17:19.000Z\ntitle: \"Um tema para todos os lugares: Dracula PRO\"\ndescription: Deixe seu editor, terminal e muito mais com seu tema favorito.\nmain-class: dev\ntags:\n - vscode\n - dicas\n---\n\n## Introdução\n\n_Deixando claro que esse não é um post patrocinado e eu não ganho nada por isso. É somente para divulgar esse belo trabalho do Zeno Rocha._\n\nJá tem um certo tempo que eu resolvi migrar para o Windows/Linux e utilizar um desktop ao invés do meu Macbook Pro. Inclusive fiz [um curso sobre ambiente de Desenvolvimento no Windows](https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd) e falei um pouquinho sobre isso [nest post](https://willianjusten.com.br/novo-curso-criando-um-ambiente-de-desenvolvimento-no-windows/).\n\nE uma coisa chata que acontece quando você está migrando, é que precisa configurar tudo de novo e isso inclui os temas, as vezes nem lembramos que cores usávamos. Além disso, cada lugar fica de uma cor diferente, o que causa até um certo atrito.\n\nSem mais delongas, vamos lá, enquanto escrevo esse post vou ouvindo uma [cantora australiana incrível](https://open.spotify.com/artist/355SqtHY4qKt2wIXrWku0c?si=6im3rYbcS7GJR0EfavE9ZA).\n\n## Conhecendo o Dracula\n\nO [Dracula Theme](https://draculatheme.com/) foi criado pelo [Zeno Rocha](https://zenorocha.com/) em 2013 quando ele teve o seu laptop roubado e ele precisou reconfigurar tudo.\n\nDesde então, esse é um dos temas mais utilizados de todos, tem mais de **12 mil stars no Github** e o tema foi portado para mais de **100 aplicações**! Indo desde o Sublime Text, VS Code, até mesmo o Telegram!\n\n## Dracula PRO\n\nMesmo depois de todo esse sucesso, o Zeno achou que ainda faltavam coisas que poderiam ser melhoradas e aplicadas, com um tratamento mais **premium**. E foi assim que nasceu o [Dracula PRO](https://draculatheme.com/pro/).\n\nPara o Dracula PRO, ele fez um estudo mais profundo na teoria de cores, para escolher cores que tivessem um bom contraste (inclusive testado pela WCAG 1.0 level AA spec) e que permitissem ter uma melhor legibilidade.\n\nAlém disso, ele escolheu 4 fontes que funcionassem perfeitamente com o tema e que dessem suporte a ligatures, você pode ver no vídeo abaixo o que é:\n\n\n\nAlém disso, ainda o pacote vem com um ebook sobre produtividade, um screencast sobre produtividade usando o Alfred, wallpapers e outras coisinhas mais.\n\nE claro, com a vantagem que você poderá ter todas as suas aplicações utilizando o mesmo sistema de cores, diminuindo muito a fricção ao mudar de janela.\n\n## Conclusão\n\nSe você estava procurando uma solução para ter um tema unificado nas suas diversas aplicações, dá uma olhada no [Dracula PRO](https://draculatheme.com/pro/), certeza que vai se impressionar com a qualidade.\n" }, { "path": "posts/usando-netlify-cms-com-nextjs-vercel-e-github.md", "content": "---\nlayout: post\ndate: 2021-10-06T15:52:58.000Z\ntitle: Usando Netlify CMS com NextJS, Vercel e GitHub\ndescription: Como utilizar um CMS super simples como criar Pull Requests no GitHub\nmain-class: js\ntags:\n - cms\n - netlify\n - vercel\n - nextjs\ncategories:\n - NextJS\n---\n## Introdução\n\nFala povo, continuando com posts sobre [NextJS](https://willianjusten.com.br/series#nextjs), o de hoje é para ensinar como eu fiz para utilizar um CMS super simples para o meu blog, continuando com o mesmo workflow simples de criar um arquivo Markdown, dar push para o GitHub e pronto, post no ar!\n\nEnquanto eu vou escrevendo esse post, vou ouvindo o album [Transatlanticism - Death Cab for Cutie](https://open.spotify.com/album/4jQW2mhMH3TxtAOol3Djuf?si=tCh29sjbToudu7sUnWGLLw&dl_branch=1), que é bem calminho e legal.\n\n## Netlify CMS\n\nMas o que é esse tal de Netlify CMS? Bom, como você talvez já saiba, a sigla `CMS` significa `Content Management System` ou de forma prática para entender, aquele admin maroto para editar coisas (no nosso caso, posts de um blog).\n\nE o [Netlify CMS](https://www.netlifycms.org/) no caso é um CMS open source criado pelo pessoal da Netlify com o intuito de fazer esse controle de conteúdo mas sem precisar de um servidor, banco de dados e outras coisas mais. Ele foi feito para funcionar em cima do que nós programadores já usamos, que é o Git! =)\n\nO legal é que ele é simples de configurar e já te dá interfaces bem simples para poder utilizar. Seguem abaixo alguns screenshots da interface:\n\n* Interface mostrando a lista de posts\n ![Interface mostrando a lista de posts](/assets/img/netlify-cms-interface.png)\n* Interface do workflow com rascunhos, em review, ready\n ![Interface do workflow com rascunhos, em review](/assets/img/netlify-workflow.png)\n* Interface da criação de post com campos customizados\n ![Interface da criação de post com campos customizados](/assets/img/netlify-post.png)\n\n## Curti esse bagulho, como faço?\n\nEntão, como o nome já diz, ele foi feito mais pensado na plataforma do [Netlify](https://www.netlify.com/), mas isso não impede de usar na [Vercel](https://vercel.com/). E o mais legal é que ele é agnóstico ao framework/lib/linguagem que você vai usar para criar os posts, para você ter noção, eu venho usando esse CMS no meu blog desde quando ele era feito em Jekyll (Ruby), depois passei para o Gatsby e agora NextJS e continua funcionando perfeitamente, lindo não?\n\n### Configurando os arquivos\n\nPara fazer funcionar no NextJS em específico, você precisa criar uma pasta `admin` ou `cms`, o que desejar na url lá na pasta `public`. Por exemplo, se você criou uma pasta `admin`, o acesso vai ser `suaurl.com.br/admin`.\n\nLá dentro você precisa colocar 2 arquivos muito importantes, o primeiro é o `index.html` que é basicamente o que vai inicializar o CMS. Abaixo vou deixar o snippet do arquivo, mas sempre recomendo pegar a última versão [na documentação oficial](https://www.netlifycms.org/docs/add-to-your-site/).\n\n```html\n\n\n\n \n \n Content Manager\n \n\n\n \n \n\n\n```\n\nDepois você precisa do arquivo `config.yml`, ele quem vai ser responsável por definir qual backend você vai usar (seja GitHub, Gitlab, Bitbucket, etc) e também vai servir para definir onde subir as imagens e até campos customizados que caso você queira criar, um arquivo básico e usando o GitHub ficaria assim:\n\n```yaml\nbackend:\n name: github\n repo: willianjusten/willianjusten.com.br\n base_url: https://willianjusten.com.br/\n auth_endpoint: api/auth/ # Essa rota vai ser muito importante mais para frente\n\nmedia_folder: public/assets/img\npublic_folder: /assets/img\n\npublish_mode: editorial_workflow # Isso permite ter aquele workflow com drafts e tudo\n\nslug:\n encoding: 'ascii'\n clean_accents: true\n\ncollections:\n - name: posts \n label: posts \n folder: posts # A pasta onde ficarão os posts\n create: true # Permite criar um post novo\n slug: '{{slug}}' # Estrutura do nome arquivo, exemplo: title.md\n fields: # Os campos do seu frontmatter\n - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }\n - {\n label: 'Date',\n name: 'date',\n widget: 'datetime',\n format: 'YYYY-MM-DD hh:mm:ss'\n }\n - { label: 'Post Image', name: 'image', widget: 'image', required: false }\n - { label: 'Title', name: 'title', widget: 'string' }\n - { label: 'Description', name: 'description', widget: 'string' }\n\n - { label: 'Body', name: 'body', widget: 'markdown' }\n \n```\n\nLembrando que essas configurações todas e explicações mais detalhadas você encontra [na documentação oficial](https://www.netlifycms.org/docs/add-to-your-site/). Depois disso configurado, vamos precisar começar a parte \"diferenciada\" que é configurar a parte de autenticação para você conseguir de fato logar no CMS e criar as coisas.\n\n### Configurando os arquivos da Autenticação\n\nEssa aqui que era a parte \"tricky\" para funcionar na Vercel. Na Netlify bastava configurar o OAuth do GitHub e conectar na Netlify e fim, mas na Vercel/NextJS é necessário fazer isso e mais um detalhezinho. Mas fique tranquilo, estou aqui para ajudar!\n\nA primeira coisa que você precisa fazer é instalar o pacote [@openlab/vercel-netlify-cms-github](https://www.npmjs.com/package/@openlab/vercel-netlify-cms-github), ele que vai ajudar nessa parte da autenticação para funcionar.\n\nDepois de instalado, você vai precisar criar uma pasta `api` dentro de `src/pages`. E nessa pasta, também iremos criar dois arquivos. \n\nPrimeiro crie um arquivo `auth.js` com o seguinte conteúdo:\n\n```js\nexport { auth as default } from '@openlab/vercel-netlify-cms-github'\n```\n\nE o outro arquivo será o `callback.js` com o conteúdo:\n\n```js\nexport { callback as default } from '@openlab/vercel-netlify-cms-github'\n```\n\nE aí lembra do arquivo `config.yml` que criamos? Se certifica que você está com o `auth_endpoint: api/auth/` definido, ele é necessário exatamente para essa autenticação.\n\n### Gerando as chaves no GitHub\n\nCom tudo configurado, agora é só criar uma aplicação dentro do GitHub para poder controlar a autenticação. Para isso vá até [https://github.com/settings/developers](https://github.com/settings/developers) e clique na opção `New OAuth App`. Nas configs faça:\n\n- Em `Homapage URL` coloque a do seu site\n- Em `Authorization callback URL` coloque exatamente a rota que criamos `https://seusite/api/callback`\n- Após isso você receber 2 chaves que são `client_id` e `client_secret`\n\nAgora com essas chaves, vá lá no painel da Vercel, entre no seu projeto e vá em `Settings > Environment Variables` e crie as duas chaves como:\n\n- `OAUTH_CLIENT_ID` que é o `client_id` da sua aplicação do GitHub\n- `OAUTH_CLIENT_SECRET` que é o `client_secret` da sua aplicação do GitHub\n\nFeito isso, só fazer um novo deploy e tentar acessar seu `https://seusite/admin`, ele vai mostrar uma tela para autenticar com o GitHub, só logar e prontinho!\n\n## Conclusão\n\nEspero que tenham curtido o post e que seja útil para vocês! Se estiver usando, manda um salve lá no [Twitter](https://twitter.com/Willian_justen).\n" }, { "path": "posts/usando-o-preact-no-nextjs-para-mais-performance.md", "content": "---\nlayout: post\ndate: 2021-09-17T04:40:37.000Z\ntitle: Usando o Preact no NextJS para mais performance\ndescription: Diminua ainda mais o bundle do seu projeto NextJS usando o Preact\nmain-class: js\ntags:\n - nextjs\n - performance\ncategories:\n - NextJS\n---\n## Introdução\n\nFala pessoal, continuando com os [posts sobre NextJS](https://willianjusten.com.br/series#nextjs), o de hoje será outro bem rápido, mas muito eficaz. \n\nEnquanto vou escrevendo esse post vou ouvindo uma das bandas que deu origem ao Grunge, nope não é Nirvana e muito menos Pearl Jam, mas sim [Mudhoney](https://open.spotify.com/artist/7LuYiSXiWs86rwWJjEEgB9?si=_J0qSuo_SDOaqiChRCcTQw&dl_branch=1).\n\n## Vidrado em performance\n\nEu sou vidrado em performance, então quando fui migrar do Gatsby para o NextJS eu queria deixar o site tão rápido ou até mais rápido que antes. E como o NextJS é muito mais fácil de editar/customizar as coisas, pensei, por que não tentar substituir o React pelo Preact que é quase a mesma coisa, só que menor?\n\nBastou uma simples busca pelo Google/GitHub da vida que encontrei esse exemplo do [Lee Robinson](https://github.com/leerob/leerob.io/blob/main/next.config.js#L18-L30) que inclusive hoje trabalha na Vercel, testei e super funciona! Segue o snippet abaixo que deve ser adicionado no `next.config.js`\n\n```js\nmodule.exports = {\n webpack: (config, { dev, isServer }) => {\n // Replace React with Preact only in client production build\n if (!dev && !isServer) {\n Object.assign(config.resolve.alias, {\n react: 'preact/compat',\n 'react-dom/test-utils': 'preact/test-utils',\n 'react-dom': 'preact/compat'\n })\n }\n\n return config\n }\n}\n```\n\nDepois de adicionar isso, também precisamos lembrar de instalar as dependências necessárias:\n\n```bash\nyarn add preact preact-render-to-string\n```\n\nE aí é só rodar o `yarn build && yarn start` e você verá tudo funcionando!\n\nVale lembrar que o **Preact não é 100% igual ao React**, então é **muito importante** que você veja [as diferenças](https://preactjs.com/guide/v8/differences-to-react/) e também teste tudo dentro do seu site para ter certeza que não tem nada quebrando.\n\n## Mas e muda muito?\n\nComo o Preact é menor que o React, a mudança vai ser principalmente no tamanho do bundle e geração. Vou deixar aqui embaixo as imagens usando React padrão e depois com o Preact na comparação do meu blog.\n\n### Utilizando React padrão\n\n![Resultado do build com React, durando 24s e a app com 112Kb](/assets/img/blog-react.png)\n\n### Utilizando Preact\n\n![Resultado do build com React, durando 9s e a app com 73Kb](/assets/img/blog-preact.png)\n\nComo você pode notar, eu tive uma diminuição considerável em todas as páginas de cerca ~40kB. Pode não parecer grandes coisas, mas para mim é um ganho enorme!\n\n## Conclusão\n\nComo falei, foi um post super super rápido e prático, mas que funciona super bem e ajuda a limar aqueles kB extras do seu site! Se você está afim de ver mais posts como esse, fica atento nos [posts sobre NextJS](https://willianjusten.com.br/series#nextjs) que eu tenho feito.\n" }, { "path": "posts/usando-svg-sprites.md", "content": "---\nlayout: post\ndate: 2015-05-24T18:25:53.000Z\ntitle: \"#11 - Usando SVG Sprites\"\ndescription: Já foi provado que o SVG substitui icon fonts, mas e Sprites?\n Aprenda a utilizar essa técnica com SVG de várias formas.\nmain-class: svg\ntags:\n - svg\n - css\n - tutorial\ncategories:\n - O mundo mágico do SVG\n---\n\n## Índice da série\n\nTenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG.\n\n## Introdução\n\nVou escrevendo esse post ouvindo algumas músicas do Need For Speed, em especial [Get Low](https://open.spotify.com/track/0r2Bul2NuCViraT2zX1l5j). Para quem não sabe, a EA vai fazer um reboot da série e me deixou bastante animado, já que sou bastante fã.\n\nBom, vamos deixar de lenga-lenga e partir para o que importa. Como já vimos em posts anteriores, o SVG é excelente para ícones e existem várias formas de se utilizar. Hoje vou mostrar um pouco das técnicas de sprite que permite utilizar a tag `img` para chamar nosso ícone desejado.\n\n## O que são Sprites?\n\nAntes de começar a fazer, seria bom um breve resumo do que seria um sprite e qual sua utilidade. Segue uma breve introdução feita pela [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites).\n\n> Sprites são usados em vários web apps onde vários ícones são utilizados. Ao invés de incluir cada ícone como um arquivo `.png`, é muito melhor utilizar uma só imagem contendo todos os ícones, que irá diminuir o número de requisições HTTP e será consideravelmente menor. - MDN\n\nAlém desses benefícios, acho muito mais fácil de organizar os ícones, afinal já sei onde todos eles estão, num mesmo arquivo.\n\n## Escolhendo os ícones\n\nO primeiro de tudo é escolher seus ícones de preferência e montar o arquivo SVG. Se você não sabe desenhar e não tem ideia de onde baixar, fiz um [post falando sobre vários lugares para baixar](https://willianjusten.com.br/onde-baixar-svg/).\n\nPara o post eu utilizei o seguinte [conjunto de ícones](http://br.freepik.com/vetores-gratis/animais-vector-set-plana_715458.htm).\n\n![Conjunto de animais](/assets/img/svg-sprites/sprites.png)\n\n## Definindo posições\n\nAssim como os sprites criados com `background-position` no `css`, no `svg` nós também iremos definir a área do nosso ícone. Primeiramente definimos o tamanho total do documento e depois o tamanho do nosso ícone, lembrando que aqui **não** iremos utilizar dimensões em `px`, para podermos ter total controle e flexibilidade no tamanho e qualidade de nosso ícone.\n\n![Medidas dos ícones](/assets/img/svg-sprites/sprites-medidas.png)\n\nTendo em vista que as propriedades da `viewBox` são \"posicao x, posicao y, largura, altura\". Nosso svg ficará assim:\n\n```html\n...\n```\n\n### 1 - Técnica com views no SVG\n\nPara cada ícone precisaremos criar uma `view` bem simples, colocando cada ícone em sua posição.\n\n```html\n\n\n\n\n\n```\n\nSe você notar, a largura, altura e posição y se mantém e só modificamos a posição no eixo x, que representa uma imagem ao lado da outra.\n\nCom o arquivo todo pronto, eu salvei com o nome de `animals-sprite.svg` dentro da minha pasta `/assets/img/`. Se quiser dar uma olhada diretamente na imagem, segue [link](https://willianjusten.com.br/assets/img/animals-sprite.svg).\n\nTendo a imagem pronta, fica simples de usar, segue um exemplo:\n\n\n\n\"Imagem\n\"Imagem\n\"Imagem\n\n```html\n\"Porquinho\"\n\n\"Vaquinha\"\n\n\"Raposinha\"\n```\n\n### 2 - Técnica com a view definida na chamada da imagem\n\nSe você não quiser criar uma `view` dentro do arquivo SVG, pode definir diretamente na chamada, ficando da seguinte forma:\n\n\"Galinha\"\n\n```html\n\"Galinha\"\n```\n\n### 3 - Técnica utilizando :target\n\nUma técnica bem legal, que vi no [css-tricks](https://css-tricks.com/svg-fragment-identifiers-work/), é utilizar o seletor `:target` para ativar o ícone a ser mostrado.\n\n![Stack Sprites SVG](https://css-tricks.com/wp-content/uploads/2014/11/layers.gif)\n\nA técnica é bem simples, basta ocultar todos os elementos do SVG e só mostrar o que estiver com `:target` marcado.\n\n```css\ng {\n\tdisplay: none;\n}\ng:target {\n\tdisplay: inline;\n}\n```\n\nDessa forma não há necessidade de se criar views, bastando somente colocar `ids` em cada ícone.\n\n```html\n\n\t...\n\t...\n\t...\n\t...\n\t...\n\n```\n\nE para usar cada ícone, basta chamar a imagem seguida da `id`.\n\n\"Coelhinho\"\n\n```html\n\"Coelhinho\"\n```\n\n## Conclusão\n\nBom, é só isso galera. Essa é mais uma forma bastante útil de se utilizar o SVG quando não se quiser usar SVG inline ou não puder. Existem ferramentas que irão nos auxiliar para a criação desses sprites de uma forma mais fácil e que eu irei abordar no próximo post. Se tiver alguma dúvida sobre este post, mande suas dúvidas nos comentários abaixo, farei questão de ajudar =)\n" }, { "path": "posts/usando-um-agregador-de-conteudo.md", "content": "---\nlayout: post\ndate: 2019-07-18T13:15:00.000Z\ntitle: Usando um agregador de conteúdo\ndescription: Como não perder nenhum post dos seus blogs favoritos.\nmain-class: misc\ntags:\n - blogs\n - rss\n---\n## Introdução\n\nEsse é outro post super rapidinho, mas trazendo uma dica que considero bem útil. É possível que você siga meu blog e siga vários outros também, certo? E aí, como faz para se manter atualizado? Para ver se tem post novo ou não?\n\nA maioria vai dizer que abre o blog sempre, para num perder os posts novos. Mas convenhamos, é meio complicado ficar lembrando de abrir sempre né?\n\nE se eu dissesse que existem apps/extensões que te ajudam nessa tarefa e te avisam assim que um post fresquinho sai, não só em um blog, mas em todos que você quiser?\n\n## Agregadores de conteúdo\n\nEsses apps são chamados de agregadores de conteúdo, basta você passar um site (que seja compatível com RSS, ou seja, tenha um `xml` do conteúdo) e o agregador vai adicionar aquele blog na lista e vai mostrar, os posts antigos e também avisar quando tiverem posts novos!\n\nUm que eu utilizo e indico é o [Feedly](https://feedly.com/), dentro dele, basta digitar o título do site ou a url, e o blog sendo compatível, ele já disponibiliza a opção de adicionar, segue abaixo um screenshot disso:\n\n![Um screenshot de um input com \"Willian Justen\" digitado e então abaixo uma sugestão do blog.](/assets/img/feedly-add.png)\n\nDepois de adicionado o blog, ele irá aparecer na lateral, junto com todos os outros sites e você vai ver dentro da lista de posts, todos os posts novos que forem aparecendo. Abaixo uma foto dessa lista:\n\n![Lista com vários blogs e vários posts](/assets/img/feedly-lista.png)\n\n## Conclusão\n\nComo falei, esse seria um post extremamente rápido e simples, mas espero que a dica seja útil para ti. Assim você não perde nenhum post meu! =D\n\nSe você já usa um agregador, mas não é o feedly, coloca aí nos comentários qual é e sua experiência com ele.\n" }, { "path": "posts/utilizando-css-counters.md", "content": "---\nlayout: post\ndate: 2020-04-13T07:28:10.000Z\ntitle: Utilizando CSS Counters\ndescription: Vamos aprender a fazer o CSS contar!\nmain-class: css\ntags:\n - css\n - dev\ncategories:\n - Dicas de CSS\n---\n\n## Introdução\n\nFala pessoal, o post de hoje é mais um [daqueles super simples de CSS](https://willianjusten.com.br/series/#dicas-de-css), mas que talvez vocês não conheçam.\n\nEnquanto escrevo, vou ouvindo uma banda de metalcore muito boa chamada [Architects](https://open.spotify.com/artist/3ZztVuWxHzNpl0THurTFCv?si=Fgce72yKQvq8RqjPzUx5wQ). Se nunca ouviu e curte um som mais pesado, pode ouvir que você vai curtir.\n\nChega de papo furado e vamos direto ao assunto.\n\n## O que são CSS Counters?\n\nSão propriedades do CSS que permitem gerar um conteúdo numérico para elementos, baseados na localização deles no html.\n\n### Como assim?\n\nBasicamente as propriedades são:\n\n- `counter-reset`: é usada para definir ou inicializar um ou mais contadores.\n- `counter-increment`: usada para especificar o valor de incremento para os contadores.\n- `counter()`: é uma função usada junto com o `content` para mostrar o valor do contador.\n\n### Tá, mas como funciona na prática?\n\nSão três passos bem simples. Vamos lá. Digamos que tenhamos o seguinte html:\n\n```html\n
    \n

    Escolha um nome para o counter

    \n

    Incremente o counter

    \n

    Assinale o counter no seu elemento

    \n
    \n```\n\nDigamos que eu queira adicionar um número para cada título, então primeiro eu preciso inicializar o nosso counter no elemento pai, que nesse caso é o `content`, para isso, farei:\n\n```css\n.content {\n counter-reset: section; // pode ser qualquer nome desejado\n}\n```\n\nDepois eu preciso adicionar o incremento:\n\n```css\nh2:before {\n counter-increment: section;\n}\n```\n\nO método de `counter-increment` recebe o contador e também o valor para iniciar a contagem, se nada for passado, será a partir do `1` como padrão.\n\nE por último, basta eu inicializar a função do contador:\n\n```css\nh2:before {\n counter-increment: section;\n content: counter(section);\n}\n```\n\nAí adicionando um pouquinho de estilo, já podemos ter a nossa numeração dinâmica com CSS:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\n### Nested Counters\n\nNós podemos também numerar conteúdos internos. Digamos que tenhamos a seguinte lista:\n\n```html\n
      \n
    • \n Design\n
        \n
      • Web
        • \n
      • Mobile
        • \n
      • Graphic
        • \n
      \n
      • \n
    • Web Development
      • \n
    • \n Mobile Development\n
        \n
      • iOS
        • \n
      • Android
        • \n
      • Windows Phone
        • \n
      \n
      • \n
    \n```\n\nPara termos uma lista tendo `1` e sub-níveis como `1.1`, podemos fazer o css da seguinte forma:\n\n```css\n// Definimos o contador principal\n.services {\n counter-reset: services;\n}\n\n.services__item:before {\n counter-increment: services;\n content: counter(services) '.';\n}\n\n// Definimos o contador para os sub-níveis\n.services__item ul {\n counter-reset: sub-services;\n}\n\n// Nosso `content` pode ser estilizado para conter qualquer coisa, até palavras\n.services__item li:before {\n counter-increment: sub-services;\n content: counter(services) '.' counter(sub-services);\n}\n```\n\nSegue abaixo o exemplo pronto:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\n### Bem legal isso daí, mas e a compatibilidade?\n\nPode ficar despreocupado! Isso funciona até no IE8, como você pode ver no [Can I use](https://caniuse.com/#feat=css-counters).\n\n## Conclusão\n\nComo disse, era um post mega simples, mas que se você não conhecia, agora já conhece! E se você já conhecia, passe adiante!\n" }, { "path": "posts/utilizando-svg-sprites-com-react.md", "content": "---\nlayout: post\ndate: 2016-06-03T23:30:39.000Z\ntitle: Utilizando SVG Sprites com React\ndescription: Aprenda a utilizar os famosos ícones SVG dentro do React de forma\n bem fácil com Stateless Functions.\nmain-class: js\ntags:\n - react\n - js\n - tutorial\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nFala pessoal, para dar início as escritas sobre React, resolvi unir com outra paixão minha, que é o SVG. Então, qual forma melhor de explicar alguma coisa, do que fazendo algo na prática?\n\nSe você ainda não viu nenhum post meu sobre React, eu estou voltando a escrever dentro [dessa série](https://willianjusten.com.br/series/#aprendendo-reactjs), olha lá.\n\nVou falando e ouvindo [um álbum de remixes do Ludovico Einaudi](https://open.spotify.com/album/5vvLGd70sOZSZddNnIejFv), bom demais esse som =D\n\n## Sprites em SVG\n\nJá fiz dois posts sobre esse tipo de técnica em SVG. Um sobre [sistemas de ícones em SVG](https://willianjusten.com.br/sistemas-de-icones-em-svg/) e um outro sobre a [própria técnica](https://willianjusten.com.br/usando-svg-sprites/) de utilizar sprites em SVG.\n\nA prática consiste basicamente em você ter um arquivo com vários ícones, famoso sprite, com cada ícone sendo um `symbol` do SVG referenciado pelo seu id.\n\nUm exemplo de sprite svg seria:\n\n```html\n\n ...\n ...\n ...\n\n```\n\nSe você quiser ver o código extendido, só clicar [neste link](https://willianjusten.com.br/assets/img/react-svg/sprite.svg).\n\nSe você reparar, cada ícone tem o seu próprio `symbol` e também sua própria `viewBox`, que serve para delimitar seu tamanho e área. Para você utilizar um ícone dessa forma, basta você utilizar a tag `use`, seguindo esse exemplo:\n\n```html\n\n \n\n```\n\nNo lugar do `xlink:href`, você passa o id do ícone que você deseja. Para chamar dessa forma, é necessário que o SVG já tenha sido carregado na página anteriormente, para que o `use` consiga encontrar a referência. Mas também é possível utilizar com um sprite totalmente externo, o conhecido `external use`, onde você passa o link da sua imagem + o id, da seguinte forma:\n\n```html\n\n \n\n```\n\nBom, agora que demos uma revisada em como se utilizar ícones SVG, vamos para a parte do React.\n\n## Componentes Reutilizáveis\n\nNão queremos criar um componente React que simplesmente jogue a nossa chamada do ícone SVG já pronto, nós queremos deixar algo mais parametrizável, para que possamos reutilizar o mesmo código sempre. E isso é muito fácil graças ao React. Para isso, vamos aprender hoje como trabalhar com [Stateless Functions](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).\n\n## O que são Stateless Functions?\n\nAs `stateless functions` são de fato, funções sem estado. Ué? Como assim? Você num tinha dito que os componentes de React tinham estado? Mostrou até [um pouco da API](https://willianjusten.com.br/o-basico-da-api-do-reactjs/).\n\n![Gato com dúvida](https://warosu.org/data/fa/img/0063/58/1371640339134.png)\n\nNo React você pode definir seus componentes como funções puras do Javascript, isso mesmo. Sem precisar criar classe, definir estados, nem nada. Você escreve como se fosse Javascript puro mesmo. Vamos dar uma olhada na sintaxe de como funciona:\n\n```jsx\nfunction HelloMessage(props) {\n return
    Hello {props.name}
    \n}\nReactDOM.render(, document.getElementById('app'))\n```\n\nReparem, eu criei uma função chamada `helloMessage`, que recebe um parâmetro `props`. Essa funciona me retorna uma div com um texto dentro escrito \"Hello Willian\", isso acontece, pois eu estou passando a propriedade `name`, que fica dentro de `props`.\n\nReescrevendo o código acima em ES6, ficaria assim:\n\n```jsx\nconst HelloMessage = props =>
    Hello {props.name}
    \nReactDOM.render(, document.getElementById('app'))\n```\n\nAli utilizo `const` e a `fat arrow` do ES6 para diminuir minha escrita e ficar ainda mais bonito meu JS.\n\nEssa forma simplificada é destinada para se criar componentes que não vão ter estados internos e nem vão utilizar os métodos de ciclo de vida de um componente. Num mundo ideal, todos os seus componentes deveriam ser `stateless functions` porque assim conseguimos ter uma performance melhor, evitando verificações e alocamentos de memória desnecessários. Esse é um padrão altamente recomendado, utilize sempre que possível.\n\n## Legal, mas e como uso com SVG?\n\nÉ muito simples meu caro, se já sabemos como chamar nossos sprites, basta passar essa forma para dentro do React. Escrevendo em ES6 ficaria:\n\n```jsx\n// Definimos a url onde se encontra o sprite\nconst url = 'https://willianjusten.com.br/assets/img/react-svg/sprite.svg'\n\n// Aqui criamos um componente\n// que irá gerar nosso ícone SVG\nconst Icon = props => (\n \n \n \n)\n\n// Aqui chamamos nossos ícones\n// passando a propriedade \"icon\"\nReactDOM.render(\n
    \n \n \n \n
    ,\n document.getElementById('app')\n)\n```\n\nDefinimos a url do nosso sprite, nesse caso, estou chamando um sprite do meu blog mesmo. Depois criamos nossa `stateless function` e ali temos alguns pulos do gato.\n\n- Eu estou utilizando uma funcionalidade nova do ES6 para fazer interpolação usando o novo símbolo, que é essa aspas ao contrário. Assim eu posso concatenar minha variável `props.icon` com `${props.icon}` e também minha `url.\n- Depois disso, basta criar um componente e passar a propriedade `icon` com a id que eu desejo.\n\nSegue o exemplo funcional:\n\n

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n

    \n\n\nSe você estiver com dúvidas no ES6, como funciona esse tal de `const`, `fat arrow` e agora esse tal de `template string`, aconselho o [Blog do Nipher](https://nipher.io/series), onde ele explica isso muito bem.\n\n## Conclusão\n\nBom galera, post bastante simples, mas muito importante, tanto para o ecossistema React, quanto para o SVG. É importante que você tente ao máximo criar funções puras para ter mais performance na sua aplicação React. E também é bastante importante que você utilize Sprites SVG para diminuir o número de requisições e também possuir ícones que se adaptam em qualquer tipo de tela.\n\nSe você estiver com dúvidas em SVG e quiser saber mais, aproveita que até dia **05/06** meu curso está com o desconto da pré-venda, você pode saber [mais informações aqui](https://willianjusten.com.br/pre-venda-curso-de-svg/).\n" }, { "path": "posts/valorize-suas-conquistas.md", "content": "---\nlayout: post\ndate: 2023-01-18T08:00:40.000Z\ntitle: Valorize suas conquistas\ndescription: O poder que valorizar nossas conquistas tem sobre nós.\nmain-class: misc\ntags:\n - vida\n - reflexão\n---\n\n## Introdução\n\nNossa, quanto tempo que não apareço por aqui! Meu último post foi no ano **retrasado** falando exatamente como tinha sido [o meu ano de 2021](https://willianjusten.com.br/meu-ano-de-2021) e quebrei essa sequência não escrevendo sobre **ano de 2022**. E bom, não será hoje também que irei falar do meu 2022, mas posso dizer que foi um ano necessário para mim, que me trouxe muitas reflexões e que me fez valorizar muito mais as coisas que eu conquistei, sejam elas materiais ou não, inclusive é muito disso que quero falar hoje nesse post.\n\nJá aviso que o post é sobre minha experiência pessoal e que não é um post de autoajuda/coach/o que você achar que seja, mas sim só um post de reflexão, que talvez possa te trazer algum valor. Inclusive, se você está passando por alguma dificuldade, recomendo fortemente que procure um profissional assim como eu.\n\nMas antes de começar, vamos ao que estou ouvindo enquanto escrevo esse post, como faço desde o meu primeiro post. A trilha de hoje é o album [An evening with Silk Song](https://open.spotify.com/track/3WTWh2WDk4j8GUCGj4xfOd?si=ade6e0366b0d4a47) que é um projeto do Bruno Mars com o Anderson.Paak, vale a pena ouvir demais, me foi indicado recentemente e curti bastante.\n\n## Por que escrever sobre isso?\n\nA ideia desse post nasceu depois da minha primeira consulta com meu psicanalista semana passada. Foi uma conversa tão bacana, que me deu um ânimo legal de escrever que eu não tinha há muito tempo. Como era a primeira consulta, meio que existe aquele protocolo de explicar um pouco a razão de estar ali e conforme a conversa vai, você vai dando mais contextos, explicando mais sobre sua vida.\n\n## Minha trajetória (pode pular se quiser)\n\nNão vou escrever muito, até porque daria um livro e não um post, mas só para dar um contexto para você que está lendo. Eu venho de uma origem bastante humilde, filho único de mãe solteira e que trabalhava como empregada doméstica para nos sustentar, chegamos a morar de favor por algumas vezes e ela fez o que podia e o que não podia para me dar uma boa educação (sim, ela é minha heroína e sempre será).\n\nFiz 4 anos de Química Industrial na Uff em Niterói e como não era de lá, também morei de favor num quarto que era tão pequeno que eu dormia encolhido porque o comprimento do quarto era menor que eu. Prestes a terminar a faculdade, eu tive uma enorme crise de pânico e de angústia, pois eu não me via mais naquela área, mas eu não podia desistir, pois já tinha sofrido tanto para chegar até ali. No final eu não aguentei, tranquei a faculdade, voltei para minha cidade natal e resolvi que iria estudar aquilo que eu realmente achava que era meu propósito, que era a programação. As vezes continuar algo só pelo \"que já sofreu\" não vale a pena, às vezes é melhor parar e seguir em frente e agradeço pela coragem que eu tive naquela época.\n\nNa época que eu voltei para minha cidade, eu botei na cabeça que iria buscar qualquer trabalho que fosse \"próximo\" de computação, tanto porque eu precisava da grana para poder sustentar eu e minha mãe, mas também porque eu queria aprender mais de programação. E foi aí que eu fui virar professor de cursinho de informática, dando aula para criança, adolescente, idosos e ouvindo gritos de um patrão extremamente problemático. De lá, continuei estudando por fora, depois troquei por uma vaga de estagiário por R$ 300 numa agência de publicidade, que obviamente não iria dar para pagar minhas contas, mas eu fui mesmo assim e logo no segundo mês na cara e na coragem eu chamei o dono da agência e falei que se ele não me contratasse eu iria embora porque não tinha condições. Como eu tinha feito um trabalho mais do que o esperado, muito pela ajuda do que hoje virou meu melhor amigo [Guilherme Louro](https://twitter.com/guilhermelouro), ele me contratou e esse foi o meu início como um programador de verdade.\n\nDepois de lá eu passei por alguns lugares bem legais, incluindo a [globo.com](https://www.globo.com/), que era um sonho incrível para mim. Nessa época eu já tinha esse mesmo blog e escrevia bastante, cheguei a palestrar e também contribuir com opensource, poderíamos dizer que eu já estava realizado, mas sempre tinha algo que me incomodava. Eu cheguei a sair da Globo para uma agência multinacional, mas lá eu tive um burnout por trabalho extremo e também porque precisei participar de reuniões em inglês e o desespero/ansiedade bateram muito forte já que eu achava meu inglês muito fraco.\n\nEu larguei essa agência, juntei todas as minhas economias e criei um curso sobre JS com TDD na época e com esse dinheiro, eu de novo fui na cara e na coragem morar na Irlanda para aprender o bendito inglês. Quando cheguei lá, descobri que meu inglês nem era tão ruim assim, o problema era a enorme cobrança que eu botava em mim. Claro que eu não falava fluentemente, mas já conseguia me comunicar e advinha! É isso que importa!\n\nDepois de lá, eu voltei para o Brasil, mas já trabalhando no Core Team da [Toptal](https://www.toptal.com/), minha vida melhorou demais nesse tempo todo, tanto financeiramente quanto profissionalmente. Fiz várias outras coisas, fiquei na Toptal por quase 4 anos, passei um ano trabalhando só para mim num curso e hoje estou na [Appcues](https://www.appcues.com/).\n\nEnfim, escrevi até mais do que eu queria dessa parte, mas isso tudo foi para mostrar que apesar de ter feito e conquistado tanta coisa, eu ainda sofro com esse problema de focar mais no negativo do que no positivo. E isso me faz perder muitas oportunidades de ser feliz.\n\n## Enxergue com melhores olhos\n\nA razão de eu resolver procurar um psicanalista (terapia) é que eu sou uma pessoa muito ansiosa e que enfrenta depressão, isso prejudica muito minha vida e minha visão em relação as coisas. Eu sempre tive uma visão muito negativa das coisas, me cobrando muito, me comparando com outras pessoas e me sentindo muito mal por não conseguir fazer as coisas que eu queria **(na perfeição que eu gostaria)**.\n\nAo falar disso na terapia, ele me pediu para falar um momento bastante recente que eu tivesse tido esse tipo de sentimento e eu falei para ele sobre minha viagem de 32 dias ao Japão. Era um sonho visitar o Japão, eu passei meses planejando e acabei indo no final do ano passado, mas eu tive um gosto meio \"agridoce\". Por mais que eu tenha curtido a experiência, tiveram dias que eu passei mal, outros que nem tive vontade de sair. E isso me deixou mal, com pensamentos como: \"tanta gente queria estar no meu lugar, mas eu não estou aproveitando\". E foi nessa conversa que ele me disse algo que me fez refletir bastante.\n\n> Você ficou mais de 1 mês lá. Em casa, quantas vezes você não passa mal por alguma comida ruim? Quantas vezes você não fica sem vontade de fazer nada? Pois então, por que seria diferente no Japão? Quando você começou a falar da viagem, disse \"a primeira semana foi incrível\" e só. Mas as partes \"ruins\" você falou bastante. Mas e essa primeira semana? Por que você não falou mais sobre ela? Por que você não valorizou mais o que você conquistou?\n\nSei que esse é um exemplo bem **white people problems**, mas ele me deu um click para um monte de coisas da minha vida e tenho certeza que muitas pessoas acabam realmente focando mais na parte ruim ao invés de valorizar as partes boas.\n\n## Tenha suas metas, mas valorize a jornada\n\nEu acredito que todo mundo tem que ter metas, mas eu acredito que muitas vezes as pessoas se esquecem de valorizar a jornada. Acho que a jornada é tão importante quanto a meta, pois é a jornada que te faz crescer, que te faz aprender, que te faz se tornar uma pessoa melhor.\n\nPor mais longe que você esteja da sua meta, saiba que hoje você está mais perto do que ontem e amanhã estará mais perto que hoje. É uma frase clichê do caramba, mas é isso. Se cobre, mas também seja gentil com você mesmo, tente saber a hora que é para ir na cara e na coragem e a hora que é para se dar um tempo e descansar.\n\n## Amplie sua visão\n\nAli acima eu falo para ter metas, mas é importante também saber que metas te ajudam a se guiar, mas não te definem, é sempre bom ter uma visão mais ampla do que você quer para a sua vida. Porque se você só se focar em uma meta, das duas uma, ou você vai conseguir e vai ficar sem saber o que fazer da vida depois, ou você não vai conseguir e vai se sentir um fracasso.\n\nE quando eu digo para ter uma visão do que quer da vida, não é para você começar a ter uma crise existencial agora, mas é para você ter uma ideia de onde você quer chegar. Por exemplo, você pode ser uma pessoa que quer formar uma família ou pode ser uma pessoa que quer viajar o mundo sozinha e tudo também pode mudar no meio do caminho, não tem problema nenhum. Esteja aberto para as mudanças e para as oportunidades que a vida te traz.\n\n## Conclusão\n\nEu sei que esse post ficou bem longo, mas eu queria muito escrever sobre isso, sempre tratei meu blog como um \"cantinho para eu revisitar\" e, esse com certeza vai ser um texto que eu vou querer ler quando estiver me sentindo mal. Talvez você possa ser mais um a ler esse texto comigo algumas vezes. E se você chegou até aqui, obrigado por ler até o final, espero que tenha gostado e que tenha te ajudado de alguma forma.\n\nEu adicionei uma seção para comentários logo ali abaixo, então se você quiser deixar algum relato seu ou qualquer palavra para mim e/ou outras pessoas que passem por aqui, fique a vontade.\n" }, { "path": "posts/varrendo-seu-site-atras-de-links-quebrados.md", "content": "---\nlayout: post\ndate: 2018-03-21T10:52:41.000Z\ntitle: Varrendo seu site atrás de links quebrados\ndescription: Não perca a credibilidade do seu site com imagens ou links quebrados.\nmain-class: dev\ntags:\n - performance\n - tools\ncategories:\n - Performance Web\n---\n\n## Introdução\n\nMais um post da série sobre [Performance Web](https://willianjusten.com.br/series/#performance-web), esse hoje nem foi um post muito planejado, por isso vai ser bem rapidinho, mas é extremamente importante!\n\nEnquanto vou escrevendo esse post, vou ouvindo a banda [A love like pi](https://open.spotify.com/artist/0BRqvQoxmmLexIg5tsOeBb?si=g_jBxLo6THeYjAfa9TX2VA) que mistura um pouco de rock com eletrônico, tem músicas muito calmas e fofas como [Jack and the Giant](https://open.spotify.com/track/1XALSFY5nrFQ9NaI2XNp9t?si=GBOSYn7XTk-isgG7pfcTiw).\n\n## Morte aos links mortos! Ops, pera...\n\nTodos sabemos que a pior coisa do mundo é o usuário abrir o nosso site e encontrar um bug, certo? E links/imagens quebrados são bugs sim e dos piores!\n\nNo meu blog eu costumo referenciar vários links, tanto internos como externos, atualmente já são mais de **1500 links**! E como saber se os links estão sempre funcionando? Hoje mesmo alguns alunos comentaram de uma página com imagens quebradas e eu fiquei tão triste...\n\nFoi aí que lembrei do que fiz com a [Awesome SVG](https://github.com/willianjusten/awesome-svg) e a [Awesome Audio Visualization](https://github.com/willianjusten/awesome-audio-visualization), que são duas listas de links que tenho no Github. Lá eu uso o [awesome bot](https://github.com/dkhamsing/awesome_bot), que pega todas as urls da lista e vai testando uma a uma. E aí resolvi fazer uma solução para o meu blog também.\n\n## Htmlproofer\n\nO [Html Proofer](https://github.com/gjtorikian/html-proofer) é o cara responsável por rodar todo o meu site em busca dos links/imagens quebrados, mas não só isso, ele faz várias outras verificações como checar se o site tem favicon, se scripts externos estão carregando corretamente. E tudo isso de forma bem fácil e customizável, vai lá no github do projeto e veja como é simples.\n\nAqui abaixo fica o script simples que eu fiz com ele:\n\n```bash\n#!/usr/bin/env bash\nset -e # halt script on error\n\necho 'Testing links...'\nbundle exec jekyll build\nbundle exec htmlproofer ./_site --http-status-ignore \"0,999\"\n```\n\nEu precisei usar o `--http-status-ignore \"0,999\"`, pois alguns sites com latência mais alta (mas que estão funcionando) acabavam retornando 0 ou 999, então só para evitar mostrar erros falsos, usei essa opção.\n\n## Travis CI\n\nO segundo carinha que utilizei foi o [Travis CI](https://travis-ci.org/). Ele é um CI simples e que funciona muito bem com projetos open source, basta criar um arquivinho e tudo passa a funcionar.\n\nEu criei um arquivo `.travis.yml` no meu repositório com o seguinte:\n\n```yml\nlanguage: ruby\nrvm:\n - 2.3.1\n\nbefore_script:\n - chmod +x testlinks.sh\n\nscript: ./testlinks.sh\n\nbranches:\n - master\n - drafts\n\nenv:\n global:\n - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer\n```\n\nO `HtmlProofer` e o `Jekyll` são em Ruby, então por isso eu defini o ambiente como de ruby. O `before_script` serve para rodar coisas que são necessárias antes do meu teste principal. No caso eu mudo a permissão para execução do `testlinks.sh`, assim a máquina consegue rodar sem problemas.\n\nDepois eu mando executar o script, que basicamente gera os arquivos do Jekyll e depois roda o HtmlProofer para verificar tudo. Eu também defino os branches `master` e `drafts`, que são os que utilizo no meu blog. Também defino uma variável global, só para a instalação do Htmlproofer ser mais rápida.\n\n## Nightli.es\n\nPor último, mas não menos importante, eu utilizo o [Nighli.es](https://nightli.es/) para criar builds noturnas todos os dias. Assim toda noite o Travis roda os testes e me reporta se algum link tiver quebrado. Isso vai me garantir que o meu blog sempre está funcionando direitinho e bonito, sem links/imagens quebradas!\n\n## Outras ferramentas\n\nVocês podem falar:\n\n> Ahhh, mas eu num uso Ruby. Ruby é lento, Ruby é aquilo, Ruby num sei o que...\n\nEntão tudo bem, existem várias ferramentas do gênero em várias linguagens e até mesmo para quem não sabe programar:\n\n- [Broken-link-checker em JS](https://github.com/stevenvachon/broken-link-checker)\n- [Um site para verificar os links para você](https://www.deadlinkchecker.com/)\n\n## Conclusão\n\nÉ isso aí pessoal, mais um post simples, mas importante para termos sites funcionais e performáticos, afinal de contas, se a imagem não estiver quebrada, não vamos ter demora na resposta da requisição. Além disso, ninguém quer clicar num link que leva para 404 né?\n\nE ah, se você tem alguma dúvida ou sugestão de post, faça nos comentários daqui do blog, estou sempre atento!\n" }, { "path": "posts/video-em-background-com-object-fit.md", "content": "---\nlayout: post\ndate: 2016-06-13T16:01:32.000Z\ntitle: Video em Background com Object-fit\ndescription: Como criar os famosos heros com vídeos full em background usando o object-fit.\nmain-class: css\ntags:\n - css\n - frontend\ncategories: null\n---\n\n## Introdução\n\nVocê com certeza já deve ter acessado algum site que tinha um header gigante com um vídeo tocando por trás, essa é uma das maiores tendências dos últimos tempos. Você pode ver em alguns sites como [airbnb](https://www.airbnb.com.br/), [designhotels](https://www.designhotels.com/original-experiences), [eva](http://www.eva.co/) e outros vários por aí.\n\nEnquanto vou escrevendo esse post, vou ouvindo uma das bandas brasileiras que mais tenho ouvido e que tem feito bastante sucesso lá fora. Se você chutou [Far From Alaska](https://open.spotify.com/artist/1ztNPX8z169arfAY0TWFLB), ponto para você!\n\n## Demo\n\nSe você quer pular tudo e só quer ver como a Demo ficou, só abrir [esse link aqui](https://labs.willianjusten.com.br/video-background/).\n\n## Técnica com Object-fit\n\nUma propriedade que eu sempre achei muito legal era a `background-size: cover`, em que eu faço um background preencher todo o container que eu quero. Essa propriedade é super legal, mas só se aplica em `background` e eu queria usar em tudo. Para isso veio o `object-fit`!\n\nCom o `object-fit` eu consigo usar também em imagens e **vídeos**, fazendo esses elementos preencherem todo o container que eu definir e ainda mantendo o `aspect ratio`. E como faço isso?\n\nPrimeiro criaremos nosso markup, bem simples, contendo só o `wrapper` que é onde queremos que o vídeo preencha todo e a nossa tag de vídeo.\n\n```html\n
    \n \n
    \n```\n\nAs opções em vídeo são `autoplay` para que o vídeo inicie sozinho, `loop` para que ele fique repetindo e `poster` onde defino uma imagem padrão, para os momentos que o vídeo ainda não foi carregado ou que deu erro. Dentro de `source`, podemos colocar o vídeo em diferentes formatos, veja a [tabela de compatibilidade](http://caniuse.com/#search=video) para ver quais formatos você vai precisar utilizar.\n\nDepois de criado o markup, vamos definir nossos estilos. Criamos um `wrapper` onde o nosso vídeo vai ficar, eu estou usando as famosas [viewport units](http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/), para poder definir a altura toda da tela. Também coloco um `overflow: hidden` para evitar que algo passe para fora do container.\n\n```css\n.wrapper {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n}\n```\n\nE aí para o vídeo, para que ele ocupe toda a tela, vamos colocar:\n\n```css\n.wrapper video {\n object-fit: cover;\n width: 100%;\n height: 100%;\n}\n```\n\nO `object-fit: cover` fará com que o vídeo preencha a tela sem perder o seu aspecto. Dentro de `object-fit` temos outras opções também como `contain`, que fará com que o vídeo caiba dentro do espaço sem distorcer, mas podendo ter espaços vazios. E a opção `fill`, que irá preencher tudo, mas irá distorcer a imagem/vídeo.\n\nFeito isso, podemos criar outras coisas, como um conteúdo na parte inferior, colocar chamadas na frente do vídeo, filtros, enfim, aí vai da sua criatividade =)\n\nSe ainda não viu a [demo](https://labs.willianjusten.com.br/video-background/)\n\n## Conclusão\n\nPost bem curtinho, mas mostrando uma tendência bastante utilizada, espero que tenham gostado. Você já fez algum site com esse tipo de ideia? Coloca nos comentários aí. Tem alguma dúvida? Manda aqui também. E se puder compartilhe ali abaixo, ajuda bastante =D\n" }, { "path": "posts/video-iniciando-um-app-react-em-3-minutos.md", "content": "---\nlayout: post\ndate: 2016-08-14T22:29:39.000Z\ntitle: \"Vídeo: Iniciando um app React em 3 minutos\"\ndescription: Iniciar um projeto React não precisa e nem deve ser muito trabalhoso.\nmain-class: js\ntags:\n - react\n - js\n - video\n - tutorial\ncategories:\n - Aprendendo ReactJS\n---\n\n## Introdução\n\nOlá pessoal, esse vai ser meu primeiro post com vídeo, olha que legal <3\n\nA ideia é trazer esse novo modelo com vídeos bem curtinhos para galera que, assim como eu, não está com muito tempo para ler posts imensos e pode até ouvir enquanto faz outras coisas.\n\nComo foi um vídeo, infelizmente não teve trilha sonora enquanto gravei, maaaas, para não deixar você triste sem música, depois de assistir o vídeo, dá um play em [Gudrid Hansdottir](https://open.spotify.com/artist/6iDKe5bQr1XkmNsouyK5Pm), tem um som bem bacana e suave, indicação do meu amigo [Jonas Mendes](https://nipher.io/).\n\n## Video\n\n
    \n\n## Detalhes\n\nÉ importantante que você tenha o **Node >= 4** para que possa funcionar. Aconselho o Node >=6 para uma melhor performance.\n\nQuem curtiu e já está doido para começar uma aplicação React, segue o [link do create-react-app](https://github.com/facebookincubator/create-react-app). E para quem viu no vídeo, os passos são:\n\n```bash\n# instalar globalmente o gerador\nnpm install -g create-react-app\n\n# criar nossa aplicação\ncreate-react-app nome-da-aplicacao\n\n# para rodar\nnpm start\n```\n\n## Info\n\nSe você não quiser perder nenhum vídeo ou post meu, segue [meu twitter](https://twitter.com/Willian_justen) ou então segue meu [RSS](https://willianjusten.com.br/feed.xml) no seu leitor favorito =)\n" }, { "path": "posts/vindo-morar-e-estudar-na-irlanda.md", "content": "---\nlayout: post\ndate: 2017-01-08T21:51:20.000Z\ntitle: Vindo morar e estudar na Irlanda\ndescription: Algumas coisas que eu passei e você precisa saber se deseja vir\n morar e/ou estudar aqui também.\nmain-class: misc\ntags:\n - trip\n - ireland\n - exchange\ncategories:\n - Trabalhar no exterior, remoto, viagens, etc\n---\n\n## Introdução\n\nFaaaala pessoal, esse é um dos posts mais pedidos dos últimos tempos. Várias pessoas quando descobriram que eu estava morando na Irlanda quiseram saber mil coisas e eu recebi vários emails sobre isso, para não deixar só em emails, resolvi escrever aqui.\n\nEu irei separar em algumas partes, esse aqui será o post maior, onde irei falar mais sobre o processo e mais alguns detalhes sobre a Irlanda. Farei outros posts especificamente sobre Mercado de Trabalho e outros detalhes. O post é grande, então pega lá um cafézinho =)\n\nA trilha sonora do dia é de uma banda de rock instrumental de Madrid, que achei fantástica e tenho ouvido nos últimos dias, a banda se chama [Toundra](https://open.spotify.com/artist/3cgIU3hh7Y4pUsPgHB8aYT) e vale a pena ouvir o trabalho dos caras.\n\nVou separar esse post em algumas partes, pois acho que ficará mais simples de se localizar também.\n\n## Índice\n\n- [Estudar Inglês](#estudar-ingles)\n - [Onde?](#onde)\n- [Cursos na Irlanda](#cursos-irlanda)\n- [Clima](#clima-irlanda)\n- [Cultura](#cultura-irlanda)\n- [Processo](#processo-na-irlanda)\n - [Quais tipos de visto existem?](#tipos-visto)\n - [Como tirar o visto de estudante?](#tirar-visto-estudante)\n- [Escolas](#escolas-irlanda)\n- [Moradia](#moradia-irlanda)\n- [Custo de Vida](#custos-irlanda)\n- [Gasto inicial para vir](#gasto-inicial-irlanda)\n- [Beleza da Ilha Esmeralda](#beleza-irlanda)\n- [Viajar da Irlanda](#viajar-da-irlanda)\n- [Curiosidades da Irlanda](#curiosidades-irlanda)\n- [Conclusão](#conclusao)\n\n

    Estudar Inglês

    \n\nComo todo mundo já sabe, inglês é a coisa mais importante para um programador e isso vem antes de qualquer linguagem de programação. É claro que você pode ser um programador incrível e não saber uma gota de inglês, porém você terá muito mais dificuldades de conseguir isso.\n\nAtravés do inglês podemos consumir conteúdos únicos e bastante atualizados, seja de onde for, já que inglês é a língua universal. Sem contar que o inglês abre muitas portas para trabalhos no exterior e permite que você seja visto de onde quer que seja.\n\nSabendo disso, fica aquela pergunta então. Como estudar? E uma das formas que mais facilita é ir morar num país nativo da língua inglesa, mas que fique bem claro, só morar fora não te dará fluência! Morar fora vai te ajudar a ter um convívio mais direto com a língua e consequentemente você acabará treinando mais a língua.\n\nTendo esse desejo de estudar em mente e condições de tentar morar fora um tempo, vem outra pergunta, onde?\n\n

    Onde?

    \n\nExistem alguns países no mundo que falam o inglês como língua nativa e cada um tem seus prós e contras, vamos a eles:\n\n### Reino Unido\n\nBom, talvez um dos primeiros lugares quando se vem em mente é o lugar onde a língua nasceu certo?\n\n**Vantagens**\n\nO Reino Unido possui tradição no ensino de sua língua e o inglês britânico é famoso por ser um dos mais limpos do mundo. A Inglaterra/Escócia fica na Europa e consequentemente perto de tudo, com isso você pode viajar bastante e conhecer muita coisa durante seus estudos. Por ser um berço de história e grandes universidades, é um ótimo lugar para ir se você deseja ficar mais tempo e quem sabe tentar uma pós graduação por lá.\n\n**Desvantagens**\n\nÉ um dos lugares mais caros para se estudar que existe. Como a moeda deles é a Libra Esterlina (que graças abaixou bastante), tudo passa a ser bastante caro. Pouquíssimas escolas dão permissão para o estudante trabalhar e com isso, acaba se tornando ainda mais caro de ficar por lá.\n\n### Estados Unidos\n\nTalvez muitos tenham pensado nesse país primeiro até que o Reino Unido. É o país mais rico do mundo e que possui milhares de coisas para se fazer e milhares de estados para se visitar.\n\n**Vantagens**\n\nDevido a grande influência americana, praticamente tudo que você assiste/ouve/lê vem dos EUA e com isso, várias expressões vem do inglês americano, estando nos EUA, você vai conseguir aprender essas expressões mais facilmente.\n\n**Desvantagens**\n\nLá é o país mais burocrático que tem para conseguir um visto para estudar. Você precisa de muitos documentos para apresentar e isso acaba sendo bem chato. Além disso, as taxas para aplicar ao visto são um pouquinho mais caras que em outros lugares. E na maioria dos casos, você também não poderá trabalhar, o que pode se tornar bem difícil se você não tiver alguma renda.\n\n### Canadá\n\nAh esse país maravilhoso! O Canadá é um EUA que deu certo para mim, com uma cultura bem legal, pessoas bem educadas e lugares maravilhosos, é um ótimo lugar para se estudar né. Mas temos aí alguns detalhes também.\n\n**Vantagens**\n\nO custo é um pouco menor que os EUA, o inglês deles é bastante e costuma ser um pouco mais neutro que o inglês americano, possuindo menos gírias. Possuem algumas das melhores escolas do mundo.\n\n**Desvantagens**\n\nDependendo de qual cidade fique, a distância entre outras cidades pode ser bastante longa e o inverno pode ser bem rigoroso.\n\n### Malta\n\nMalta está a 80 quilômetros da Sicília, na Itália, à leste da Tunísia e ao norte da Líbia, ambos na África. Ficando nessa região possui um clima ensolarado e dizem que uma agitada vida noturna.\n\n**Vantagens**\n\nO custo com o curso de inglês é bastante baixo, assim como o custo de vida. O clima é bem similar ao Brasil, o que acaba sendo mais fácil de se adaptar. O inglês deles é levemente mais lento que outros países e com isso pode ser um pouco mais fácil de se aprender inicialmente.\n\n**Desvantagens**\n\nO inglês não é a primeira lingua da maioria da população. Por ser uma ilha bem pequena, arrumar trabalho é bem mais difícil e as escolas não possuem tantas coisas como em outros países.\n\n### Australia / Nova Zelândia\n\nPaíses maravilhosos e com clima excelente, bem próximos do Brasil. Com pessoas muito amigáveis e um estilo de vida bastante aventureiro.\n\n**Vantagens**\n\nO clima é ótimo, as casas costumam ser mais novas e maiores que da Europa. Os cursos de inglês tem uma boa qualidade e o preço não é tão caro quanto EUA e Canadá.\n\n**Desvantagens**\n\nSão muito distantes, então o gasto inicial (principalmente com passagem) é bem elevado. Outra coisa é que são distantes de tudo, dificultando viajar para outros lugares. O valor ainda é mais alto que países como Irlanda e Malta.\n\n### Irlanda\n\nA famosa Ilha Esmeralda, cheia de belezas por todos os cantos e uma história super rica. Os irlandesas falam duas línguas que são o inglês e o gaélico, por isso todas as placas possuem as duas línguas. São conhecidos por terem um sotaque bem pesado (depende muito de onde) e serem bem educados (depende muito também xD).\n\n**Vantagens**\n\nOs cursos são bastante baratos e você ainda tem a possibilidade de trabalhar 20h por semana, o que ajuda bastante nos custos. A outra vantagem é que possui várias das melhores escolas da Europa. A burocracia não é das maiores, apesar de ter vários detalhes importantes para se ter em mente. E por ser na Europa e ter a Ryanair, é muito fácil viajar para todos os lugares! \\o/\n\n**Desvantagens**\n\nO inglês em algumas partes da Irlanda tem um sotaque bastante carregado. Dublin é uma cidade tão cosmopolita que as vezes fica até difícil arrumar irlandeses de fato. Dublin é uma cidade bem pequena e antiga, então acaba que os aluguéis são caros e as casas não tão boas...\n\n

    Cursos na Irlanda

    \n\nMesmo dentro do curso de inglês, existem alguns tipos de cursos, eles são:\n\n### General English (Inglês Geral)\n\nO General English é o mais tradicional e procurado tipo de curso de inglês. Como o próprio nome diz, faz um grande apanhado sobre a língua inglesa, trabalhando desde conhecimentos gerais até conversação, gramática, linguagem informal como gírias, expressões idiomáticas, etc.\n\nO curso “General English” é a melhor opção para quem precisa aprimorar a língua ou aprender a falar inglês. O principal motivo desse tipo de curso ser o mais procurado é que não há pré-requisitos. Cada escola tem a sua própria forma de divisão, mas, em geral, os níveis do “General English” são Beginner, Elementary, Pre-Intermediate, Intermediate, Upper-Intermediate e Advanced.\n\nA duração mínima é 2 semanas e as aulas começam sempre às segundas-feiras.\n\n### Business English\n\nVoltado para quem quer aprimorar o vocabulário em áreas relacionadas à negócios, como administração, vendas e marketing. É bastante focado em estimular o desenvolvimento do vocabulário dentro de um ambiente corporativo, argumentação, técnicas para apresentação e exposição de ideias.\n\nComo o foco é o mercado de negócios, é fundamental que o aluno já consiga estabelecer uma conversação com razoável fluência. Por isso, o nível de inglês do estudante deve ser entre intermediário e avançado,\n\nO curso de Business English tem duração a partir de 4 semanas, e, em média, dura de 8 a 12 semanas.\n\n### Preparação para Exames de proficiência\n\n#### Preparação para IELTS e TOEFL\n\nPara aqueles que querem estudar no exterior porque estão buscando uma certificação de proficiência em inglês, esse tipo de curso é um dos mais indicados. Tanto o IELTS quanto o TOEFL são dois dos principais exames de proficiência da língua inglesa para propósitos acadêmicos (ingresso em Universidades e Instituições técnicas) e propósitos de imigração. Na Irlanda, o IELTS é a certificação aceita pelas instituições de ensino do país.\n\nPara participar de um curso preparatório para a prova de proficiência, é preciso ter um nível de inglês intermediário ou avançado, mas isso depende da escola e de sua própria política.\n\nEm geral, o preparatório para o IELTS dura 10 semanas e começa em alguns dias específicos, dependendo sempre das regras das escolas.\n\n#### Preparação para exames Cambridge\n\nCurso preparatório para o exame de proficiência da língua inglesa oferecido pela University of Cambridge. Embora não tenha um foco tão acadêmico quanto o IELTS, as certificações emitidas pela Universidade de Cambridge são muito respeitadas na Irlanda e no Reino Unido, em especial, e em mundo todo. Os cursos preparatórios para os exames de Cambridge começam toda segunda-feira e tem duração mínima de quatro semanas.\n\nEste curso é oferecido nos seguintes níveis:\n\n- **FCE (Cambridge English: First)** A prova do FCE é de nível intermediário e atesta que o estudante tem conhecimento suficiente para utilizar a língua inglesa diariamente, tanto escrita quanto falada.\n- **CAE (Cambridge English: Advanced)** é uma prova de nível avançado para pessoas que usam o inglês para fins profissionais ou acadêmicos.\n- **CPE (Cambridge English: Proficiency)**, é a maior certificação de proficiência emitida pela Cambridge. Ele prova que o candidato é proficiente na língua inglesa\n\n

    Clima

    \n\nBom, depois de definida a escolha da Irlanda para estudar inglês, vamos falar sobre a primeira coisa que preocupa os brasileiros, o clima, não que seja uma coisa assim tão ruim.\n\nO clima da Irlanda é influenciado, em sua maioria, pelo Oceano Atlântico. Dessa forma, não se registram temperaturas extremas que outros países com uma latitude semelhante têm. A temperatura média é cerca de 10°C. Embora o tempo possa mudar, ele raramente é extremo. É extremamente raro de nevar e acumular a mesma, o máximo que ocorre são alguns minutos de neve e elas derreterem ao tocar o chão.\n\nNos meses de verão, julho e agosto, existem cerca de 18 horas de luz solar e anoitece somente após as 11 horas da noite, o que é uma maravilha para se aproveitar o dia. Já nos meses de inverno, é normal o Sol nascer as 8h da manhã e já se pôr as 4h da tarde, então durante o inverno você tem a impressão que está sempre noite.\n\nMinha dica aqui é **NÃO COMPRE ROUPA NO BRASIL!** O inverno aqui não é rigoroso como eu disse, mas também não é fraco, então as roupas daqui são mais bem preparadas para o clima, algo que no Brasil não se tem tanta preocupação. Então é melhor que você deixa para comprar tudo aqui, até porque vai sair bem mais barato também.\n\n

    Cultura

    \n\nO povo irlandês é um povo bem nacionalista e eles gostam muito disso. Em todo canto você verá a cor verde, que é um símbolo gigante da Irlanda. Vai ouvir muita música folk tradicional e em quase todo bar que você for, vai ver a famosa pint de Guinness, que é a cerveja mais consumida da Irlanda.\n\n### Bandeira\n\nA bandeira foi apresentada pela primeira vez por Thomas Francis Meagher, em 1848, com base na bandeira tricolor francesa. No entanto, só depois do Levante da Páscoa de 1916, quando foi hasteada acima do Correio Central de Dublin, a bandeira tricolor passou a ser considerada a bandeira nacional. A bandeira foi adotada em 1919 pela República Irlandesa durante sua guerra de independência e, depois, pelo Estado Livre Irlandês. Recebeu status constitucional pela Constituição de 1937, que estabeleceu a República da Irlanda.\n\n

    21st day! Irish Flags everywhere! #ireland🍀

    Uma foto publicada por Willian Justen de Vasconcellos (@will_justen) em

    \n\n\nA seção verde da bandeira simboliza a antiga maioria da tradição gaélica da Irlanda, composta principalmente por católicos romanos. O laranja representa a minoria predominantemente protestante. O branco no centro significa uma trégua duradoura entre as duas culturas, vivendo juntas em paz.\n\n### Geografia\n\nA maioria dos irlandeses vê a si mesmos e aos outros em termos de que parte da Irlanda vêm. A Irlanda é dividida em 32 condados. Isso fica mais evidente durante as partidas entre condados da GAA (Associação Atlética Gaélica), quando os fãs se vestem com as cores específicas de seu condado. A República da Irlanda é formada por 26 condados e a Irlanda do Norte por seis. É também tradicionalmente dividida nas quatro províncias de Connaught, Leinster, Munster e Ulster. O Ulster contém 9 condados, 6 dos quais estão na Irlanda do Norte e 3 na República da Irlanda.\n\n![Mapa da Irlanda](/assets/img/morar-irlanda/ireland-map.gif)\n\n### Cumprimentar pessoas\n\nOs irlandeses têm a reputação de serem muito amigáveis. Geralmente, as pessoas apertam as mãos quando se conhecem pela primeira vez. Amigos se abraçam ou simplesmente dizem oi. Às vezes, as pessoas se beijam no rosto, se se conhecerem bem. As pessoas se olham nos olhos porque isso é sinal de confiança e de que estão interessadas no que está sendo dito.\n\n### Cumprimento de horário\n\nÀs vezes pode parecer que o cumprimento de horário não é muito importante na Irlanda. Geralmente quando alguém marca de se encontrar com você às 8 da noite, normalmente quer dizer 8:15 ou depois. Os irlandeses, em geral, são muito tranquilos com o horário.\n\n### Boas maneiras\n\nAs pessoas normalmente dizem “por favor” e “obrigado”. A maioria das pessoas, por exemplo, agradece ao motorista ao descer do ônibus. As pessoas também costumam fazer fila e esperar a vez, por exemplo, em uma loja.\n\n

    Processo na Irlanda

    \n\nBom, como eu escolhi a Irlanda, irei falar sobre o processo daqui. E de acordo com o que você quiser, existirão diferentes tipos de vistos.\n\n

    Quais tipos de visto existem?

    \n\n**Stamp 0 – Estada temporária ou Permissão limitada (90 dias)**\n\nEsse é o tipo de visto mais comum e é concedido a pessoas que entram na Ilha sem o objetivo de receber benefício do Estado e que cumpram requisitos, sendo um deles o de estar coberto por um seguro de saúde particular. O imigrante que desejar entrar na Irlanda com o Stamp 0 deverá ter os próprios meios de subsídio ou alguém que o faça.\n\n**Stamp 1 – Visto de trabalho**\n\nO Stamp 1 é o almejado Visto de Trabalho. Neste caso, o cidadão que desembarca por aqui precisará de uma proposta de trabalho de uma empresa estabelecida na Irlanda para aplicar para este visto. Enquanto o empregador não tiver recebido a permissão para contratá-lo, o imigrante que possui esse tipo de visto não poderá trabalhar em outros cargos nem se envolver em nenhum negócio ou profissão sem autorização prévia concedida pelo Ministério da Justiça e da Igualdade. O cidadão deverá também respeitar a data de expiração do visto.\n\n**Stamp 1A – Visto de estágio**\n\nVisto que concede a permissão de estagiar em solo irlandês 40h semanais junto a uma equipe qualificada. O visto só é válido até a data de conclusão do estágio.\n\n**Stamp 2 – Visto de estudante com permissão de trabalho**\n\nÉ o visto com o qual a maioria dos brasileiros, permanece na Ilha Esmeralda. O Stamp 2 é concedido sob a condição de o imigrante entrar no país com o objetivo de frequentar aulas regulares, podendo trabalhar **até 20h** durante o período de aulas e até 40h em meses específicos (entre os meses de maio e agosto; e entre 15 de dezembro e 15 de janeiro). O prazo de expiração do visto, que tem um total de **8 meses**, também deve ser respeitado e o imigrante com esse tipo de permissão não poderá recorrer a nenhum tipo de serviços oferecido pelo governo, tais como saúde, seguro desemprego, etc. Para se enquadrar nesta categoria de visto é necessário se matricular em um curso com duração mínima de 25 semanas.\n\n**Stamp 3 – Permanência sem permissão de trabalho**\n\nO Stamp 3 concede a permissão de permanência, porém sem a possibilidade de abrir um negócio ou atuar no mercado de trabalho, até a data especificada pelo oficial de imigração. O imigrante deverá respeitar a data de expiração do visto e não poderá permanecer após a mesma.\n\n**Stamp 4 – Permanência**\n\nEsse visto garante a permanência em solo irlandês até uma data especificada, que pode ser sempre aumentada caso desejado.\n\n

    Como tirar o visto de estudante?

    \n\nVocê faz tudo na Irlanda, **isso mesmo**, o processo é feito na Irlanda! Mas não pense que é essa molezinha também, você precisa das seguintes coisas:\n\n- Matrícula em uma escola\n- Seguro governamental obrigatório\n- Comprovante de acomodação (pode ser temporária)\n- Comprovante de 3000 euros\n- Comprovante de passagem de volta\n- Passaporte com validade de no mínimo 6 meses\n\nEm posse disso, seu primeiro contato será na imigração assim que pousar na Irlanda, você irá conversar com algum carinha super simpático da imigração e ele vai perguntar por todas essas coisas e verificar. Se todos os papéis estiverem corretos, ele irá carimbar o seu passaporte com um visto inicial de 3 meses (sim, 3 meses!).\n\nVocê recebe um visto de 3 meses inicial, pois depois você é obrigado a tirar o seu GNIB (uma espécie de CPF aqui na Irlanda). Você irá pagar **300 euros** para retirar esse documento e com ele, seu visto será extendido para os **8 meses**. Lembrando que para tirar esse tal de GNIB agora você precisa agendar no [site da imigração](https://burghquayregistrationoffice.inis.gov.ie/) e parece que cada vez mais as datas são bem distantes, então você precisa se cuidar para ver isso as vezes até antes de chegar na Irlanda.\n\n

    Escolas

    \n\nÉ muiiito importante que você escolha uma boa escola, por N razões. Uma das principais é, você já está gastando um dinheiro alto com as coisas, não vá pegar algo que você vá se arrepender depois. Vejo muita gente vindo para cá de qualquer maneira e pegando as piores escolas de todas, isso é péssimo, porque a pessoa acaba não aprendendo nada e o dinheiro só vai indo embora.\n\nOutro motivo importante para se escolher uma escola boa é que o governo irlandês tem sido bastante rigoroso com as escolas e se elas não se adequam ao nível mínimo requirido, o governo vai lá e fecha.\n\nEntão não vai dar mole hein, pegue uma boa escola, por mais que tenha preços \"tentadores\" de outras escolas \"mais simples\".\n\nAqui vai uma lista de escolas consideradas muito boas e das quais conheço pessoas que estudam e de fato são muito boas (em ordem alfabética):\n\n- [Atlas Language School](http://atlaslanguageschool.com/)\n- [DCU](https://www.dcu.ie/)\n- [Delfin](https://www.delfinschool.com/en/dublin/)\n- [Emerald](https://www.eci.ie/default.aspx)\n- [IBAT](https://www.ibat.ie/)\n- [ISI](http://www.studyinireland.ie/)\n\nLembrando que estou focando mais em detalhes de Dublin, visto que moro em Dublin, mas existem também escolas em Galway e Cork que são muito boas, mas como não tenho contato com essa parte, vou deixar mais sobre Dublin mesmo.\n\n

    Moradia

    \n\nSe você pensava que depois de arrumar a escola e chegar na Irlanda estava tudo tranquilo. É aí que você se enganou! Chegou o maior terror e uma das coisas mais chatas, frustrantes, irritantes e que pode acabar com todo um sonho em uma semana. Você pode pensar que estou exagerando, mas não estou não, quisera eu estar...\n\nDublin é uma cidade extremamente cosmopolita, com gente do mundo todo tentando a vida aqui, inclusive europeus, pois aqui é o segundo maior salário mínimo da Europa. Com isso, a oferta de casas é pouca para a tamanha quantidade de pessoas. Sabe o que isso significa? Isso mesmo, aluguéis nas alturas e lugares horríveis... Morar sozinho é algo que pode lhe custar muitos e muitos euros e as vezes é bastante chato morar sozinho. Então muita gente decidi dividir, só que o que acontece é que tem pessoas que ficam longe da casa dos pais e adquirem uma mania de serem porcos ao extremo...\n\nAqui para você conseguir um lugar para morar, você já precisa passar numa entrevista tal qual fosse para arrumar um emprego. Irão perguntar milhares de coisas sobre você, pois no mesmo dia irão entrevistas outras N pessoas. E as vezes essa vaga será para dividir quarto com mais 5 cabeças, tendo só um banheiro na casa toda.\n\nPortanto, tomem muiiiito cuidado se virem para cá, analisem bastante e não saiam pegando o primeiro lugar que acharem, pois pode ser uma roubada tamanha. Sobre os valores, isso pode variar absurdamente, mas a base é +ou-:\n\n- Dividir um apê bem localizado com outras 2/4 pessoas, dividindo quarto ~ **450 euros**\n- Dividir um apê bem localizado com outras 2/4 pessoas, quarto single ~ **650 euros**\n- Dividir uma casa mais distante com outras 2/4 pessoas, dividindo quarto ~ **350 euros**\n- Alugar um apê/flat sozinho ~ **800 euros**\n\nAhhh mas minha amiga paga só 200 euros e mora numa mansão! Me passa o contato dessa daí, porque ela é bem sinistra, quero aprender a mentir igual =)\n\nExistem alguns sites/grupos de facebook que você pode ir procurando lugares. Lembrando que pelos sites, em geral, você vai precisar de um inglês melhor, pois terá de tratar diretamente com o Landlord. Brasileiros acabam sempre usando os grupos e o famoso boca-a-boca também.\n\n- [Daft.ie](http://www.daft.ie/)\n- [Rent.ie](http://www.rent.ie/)\n- [Classificados Dublin - Facebook](https://www.facebook.com/groups/ClassificadoDublin/)\n- [Classificados Dublin 2 - Facebook](https://www.facebook.com/groups/DublinClassificados/?ref=br_rs)\n- [The Ideal Flatmate - Facebook](https://www.facebook.com/groups/theidealflatmatedublin/)\n- [Dublin Rent a room/apartment - Facebook](https://www.facebook.com/groups/493501787468168/)\n- [Rent a Room in Dublin - Facebook](https://www.facebook.com/groups/1607597689487462/?ref=br_rs)\n\nSe você tiver optado por estudar em Cork ou Galway, talvez seja um pouco mais fácil de conseguir uma moradia, visto que são cidades menores e não tão cosmopolitas como Dublin.\n\n

    Custo de Vida

    \n\nUma outra coisa muito importante para se saber quando se está indo para outro país é ver o quanto custa para se viver nele. E isso não é saber se a cotação é 3 para 1 ou 4 para 1. É saber o quanto você pode comprar com 10 euros, por exemplo. A primeira dica que dou em relação a questão de gastos é **NÃO CONVERTA PARA O REAL!** Vamos lá galera, se você converter, não vai acabar comprando nada e consequentemente nem vai viver.\n\nÉ importante lembrar que o salário mínimo daqui é de € 9,15/h e com esse dinheiro, por exemplo você consegue comprar:\n\n- 2L de Leite : € 1,49\n- 1 pacote de pão de forma: € 1,26\n- 1 pacote de 15 slices de queijo: € 0.93\n- 1 pacote de 30 slices de presunto: € 1,53\n- 1 pacote de 1kg arroz: € 1,39\n- 1 lata Dark Red Kidney Beans 400g: € 0,23\n- 1kg carne moída: € 4,00\n\nOu seja, em apenas **1h de trabalho**, você já consegue comprar bastante coisa, que talvez no Brasil você precisasse de algumas horas a mais. Lembrando que o salário de € 9,15/h é o mínimo e dependendo da área que você trabalhe, isso pode ser muito maior.\n\nA Irlanda possui muitos mercados extremamente baratos, o que facilita demais a vida de quem não tem muito dinheiro. Alguns dos mercados são:\n\n- [Tesco](https://www.tesco.ie)\n- [Lidl](http://www.lidl.ie/en/index.htm)\n- [Aldi](https://www.aldi.com/)\n- [Polonez](http://www.polonez.ie/)\n\nE não é só comida que é barata aqui não, existem lojas que vendem roupas bem baratas, além de outros acessórios e bugigangas.\n\n- [Penneys](https://www.primark.com/en-ie/homepage) - conhecida como Primark em outros países, eles vendem roupas e outras coisas extremamente baratas.\n- [Dunnes Store](http://www.dunnesstores.com/) - não tão barata como a Penneys, mas com materiais de boa qualidade e num preço muito bom.\n- [Dealz](https://www.dealz.ie/) - lojinha de 1,99 que tem tudo.\n- [EuroGiant](http://www.eurogeneral.ie/) - outra lojinha de 1,99 cheia de coisas.\n\n

    Gasto Inicial para vir

    \n\nUma coisa que também deixa bastante gente curiosa é: Quanto eu vou gastar para ir? Vou aqui colocar algumas coisas importantes para você ter em mente, os preços são estimados e obviamente variam de pessoa para pessoa. Se você tiver um estilo de vida mais barato, pode acabar gastando menos. Então vamos aqui a listinha:\n\n- Escola (inclui 1 semana acomodação, seguro obrigatório): ~2400 euros\n- Passagem aérea ida/volta: ~800 euros\n- Dinheiro de comprovação: 3000 euros (mas o mínimo recomendado é 4000 euros)\n\nEsses acima são os que você já vai gastar antes mesmo de embarcar para a Irlanda. Depois disso, você ainda vai ter alguns gastos de primeiro mês que são bem importantes de serem lembrados:\n\n- GNIB: 300 euros\n- Depósito + Aluguel primeiro mês: ~700 euros (pode retirar do dinheiro de comprovação)\n- Roupa de cama / coisas da primeira casa: ~80 euros\n- Casaco/Segunda Pele/Cachecol/Bota: ~100 euros\n- Plano de Celular: 20 euros (operadora Three.ie)\n- Livro Escola: ~50 euros\n- Comida do primeiro mês: ~150 euros (comendo em casa e não esbanjando)\n\n

    Beleza da Ilha Esmeralda

    \n\nA Irlanda é conhecida como Ilha Esmeralda pois é cercada de verde por todos os lados. É um país incrível e para mim, um dos mais bonitos que já visitei pela Europa. Muitas pessoas vem para Irlanda e acabam ficando só por Dublin, as vezes dão uma passada no ponto turístico mais famoso que é o Cliffs of Moher, mas para mim, a beleza maior está no interior e principalmente na parte sul da Irlanda!\n\n

    More than 800km on the road and I finally achieved my dream! #ireland #dingle #ringofkerry #nofilter

    Uma foto publicada por Willian Justen de Vasconcellos (@will_justen) em

    \n\n\nAqui na Irlanda é bem fácil de se locomover, você pode usar trem para trechos próximos de Dublin ou carro/ônibus para outros pontos mais distantes. O país é bem pequeno, então com 5-6h você atravessa de uma ponta para a outra.\n\nAlém da beleza natural, nós temos também vários artistas pela cidade, tocando, dançando, enfim, fazendo qualquer coisa para chamar a sua atenção.\n\n

    39th day! There's always an artist in each corner of Ireland! #ireland #dance #art

    Um vídeo publicado por Willian Justen de Vasconcellos (@will_justen) em

    \n\n\nSe você quiser, tenho várias fotos/vídeos da Irlanda no meu [Instagram](https://www.instagram.com/will_justen/), boa parte das fotos são tiradas do celular e sem filtro, então é a beleza da Irlanda mesmo.\n\n

    Viajar da Irlanda

    \n\nE além da Irlanda ser bela, uma grande vantagem dessa ilha maravilhosa é que ela fica na Europa, ou seja, pertinho de outros países maravilhosos! E o mais legal é que existe uma companhia low-cost irlandesa que é conhecida na Europa inteira, que é a [Ryanair](https://www.ryanair.com/gb/en/). Com ela, você consegue ir para outros países pagando muito barato, passagens que ficam na faixa de **30-100** euros! Dependendo de quando você compra, você pode ir para Londres por apenas 30 euros, resumindo, se você é apaixonado por viagens, a Irlanda se torna ainda mais incrível. Minha dica é estar sempre com alarmes no [Skyscanner](http://skyscanner.com/), para viajar baratinho =p\n\n

    Curiosidades da Irlanda

    \n\n- **Portas coloridas**: Curiosamente, a Irlanda tem as portas coloridas, em quase a totalidade de suas casas. Há duas lendas que justificam esse costume. O primeiro diz que em 1861 a Rainha Victoria, após a morte do Príncipe Albert decretou que todas as casas Irlandesas tivessem uma bandeira preta como sinal de luto. No dia seguinte, em protesto, um Irlandês pintou a porta de sua casa com uma cor alegre e foi copiado por centenas de Irlandeses. A segunda explicação é que como os homens geralmente voltavam bêbados para casa, com as portas coloridas, ficava mais fácil identificar qual era a sua residência.\n- **Roupas confortáveis**: Conforto é prioridade para os Irlandeses, o curioso é que por isso, eles têm o hábito de usar roupas muito largas. Os moletons geralmente são duas vezes maiores do que o corpo. É um lugar que você pode acordar e sair com a mesma roupa e ninguém sequer vai reparar.\n- **Dedicar-se à caridade**: Este fato nem parece uma curiosidade, porque deveria ser comum em todo o mundo, e até é, mas não com tanta regularidade como na Irlanda. Os Irlandeses são tão caridosos que o país é considerado o mais altruísta da Europa. Segundo dados recentes, 70% da população irlandesa contribui com caridade, 37% contribuem com o tempo livre para trabalhos voluntários, e 64% contribuem com a ajuda à estranhos. Há lojas de caridade espalhadas pelas cidades e é comum você ver toda a noite pessoal oferecendo sopão para os desabrigados em frente aos Correios.\n- Escovar os dentes depois das refeições nao é um hábito irlandês e ninguém olha feio quando eles almoçam e seguem com a vida.\n- Eles falam ‘sorry’ o tempo todo, mesmo quando o ‘sorry’ nao faz o menor sentido ou quando o errado é você.\n- Elas usam roupas muito curtas, muito mesmo. Piriguete brasileira é fichinha perto da irlandesa. Isso sem falar que elas são laranjas de tanta maquiagem...\n- A luz do banheiro fica pra fora do banheiro. Super legal quando a gente quer zoar quem está usando, mas super preocupante quando quem está usando é voce.\n- As crianças irlandesas ficam no carrinho até uns 6 anos. É super engracado ver aquela criança enorme de 1 metro e pouco com os pés balançando no carrinho.\n\n

    Conclusão

    \n\nBom galera, estas aí são algumas das coisas mais importantes se você tem em mente fazer um curso de línguas e/ou morar na Irlanda. O gasto inicial pode parecer alto, mas o retorno eu garanto que é muito mais valioso, seja pela quantidade de cultura que você ganha, seja pelo conhecimento que você adquire.\n\nMorar em um outro país é uma experiência de vida que muda muito a gente em diferentes formas e essa mudança é muito importante para nos conhecermos e entendermos como o mundo funciona fora da sua zona de controle.\n\nEspero que tenham gostado do post e se quiserem compartilhar outras coisas sobre morar fora e até mesmo na Irlanda, é só deixar um comentário =)\n" }, { "path": "public/cms/config.yml", "content": "backend:\n name: github\n branch: main\n repo: willianjusten/willianjusten.com.br\n base_url: https://willianjusten.com.br/\n auth_endpoint: api/auth/\n\nmedia_folder: public/assets/img\npublic_folder: /assets/img\npublish_mode: editorial_workflow\nslug:\n encoding: 'ascii'\n clean_accents: true\n\ncollections:\n - name: posts # Used in routes, e.g. /admin/collections/blog\n label: posts # Used in the UI\n folder: posts # The path to the folder where the documents are stored\n create: true # Allow users to create new documents in this collection\n slug: '{{slug}}' # Filename template i.e. title.md\n fields: # The fields for each document, usually in front matter\n - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }\n - {\n label: 'Date',\n name: 'date',\n widget: 'datetime',\n format: 'YYYY-MM-DD hh:mm:ss'\n }\n - { label: 'Post Image', name: 'image', widget: 'image', required: false }\n - { label: 'Title', name: 'title', widget: 'string' }\n - { label: 'Description', name: 'description', widget: 'string' }\n - {\n label: 'Main Class',\n name: 'main-class',\n widget: 'select',\n options: ['jekyll', 'css', 'js', 'html', 'svg', 'dev', 'misc']\n }\n - {\n label: 'Color',\n name: 'color',\n widget: 'select',\n options:\n [\n { label: 'Jekyll', value: '#B31917' },\n { label: 'CSS', value: '#2DA0C3' },\n { label: 'JS', value: '#D6BA32' },\n { label: 'HTML', value: '#EB7728' },\n { label: 'SVG', value: '#7D669E' },\n { label: 'Dev', value: '#637a91' },\n { label: 'Misc', value: '#7AAB13' }\n ]\n }\n - { label: 'Tags', name: 'tags', widget: 'list', default: [''] }\n - {\n label: 'Category',\n name: 'categories',\n widget: 'list',\n required: false\n }\n - { label: 'Body', name: 'body', widget: 'markdown' }\n" }, { "path": "public/cms/index.html", "content": "\n\n\n \n \n Content Manager\n \n\n\n \n \n\n\n" }, { "path": "public/robots.txt", "content": "# robotstxt.org/\n\nUser-agent: *" }, { "path": "src/components/Analytics/index.js", "content": "import Script from 'next/script'\nimport { GA_TRACKING_ID } from 'lib/gtag'\n\nfunction Analytics() {\n return (\n <>\n \n \n \n )\n}\n\nexport default Analytics\n" }, { "path": "src/components/Avatar/index.js", "content": "import Image from 'next/image'\n\nimport * as S from './styled'\n\nconst Avatar = () => {\n return (\n \n \n \n )\n}\n\nexport default Avatar\n" }, { "path": "src/components/Avatar/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nexport const AvatarWrapper = styled.div`\n img {\n border-radius: 50%;\n }\n\n margin: auto;\n height: 4rem;\n width: 4rem;\n clip-path: circle(50% at 50% 50%);\n\n ${media.lessThan('large')`\n height: 2rem;\n width: 2rem;\n `}\n`\n" }, { "path": "src/components/Comments/index.js", "content": "import React, { useEffect, useRef } from 'react'\n\nconst Comments = ({ title }) => {\n const commentBox = useRef(null)\n\n useEffect(() => {\n const theme = localStorage.getItem('theme') || 'dark'\n const utterancesTheme = theme === 'dark' ? 'github-dark' : 'github-light'\n\n const watchThemeSwitch = new MutationObserver((mutations) => {\n const utterances = document.querySelector('.utterances-frame')\n if (!utterances) return;\n\n for (const mutation of mutations) {\n if (mutation.attributeName !== \"class\") return\n const theme = mutation.target.classList.contains('dark') ? 'github-dark' : 'github-light'\n\n const message = {\n type: 'set-theme',\n theme: theme\n };\n\n utterances.contentWindow.postMessage(message, 'https://utteranc.es');\n }\n });\n\n let scriptEl = document.createElement('script')\n scriptEl.setAttribute('theme', utterancesTheme)\n scriptEl.setAttribute('src', 'https://utteranc.es/client.js')\n scriptEl.setAttribute('crossorigin', 'anonymous')\n scriptEl.setAttribute('repo', 'willianjusten/willianjusten.com.br')\n scriptEl.setAttribute('issue-term', 'title')\n commentBox.current.replaceChildren(scriptEl)\n\n watchThemeSwitch.observe(document.body, { attributes: true });\n }, [title])\n\n return
    \n}\n\nexport default Comments\n" }, { "path": "src/components/Course/index.js", "content": "import * as S from './styled'\n\nconst Course = ({ title, description, link }) => {\n return (\n \n \n \n {title}\n {description}\n \n \n \n )\n}\n\nexport default Course\n" }, { "path": "src/components/Course/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from 'styles/transitions'\n\nexport const CourseWrapper = styled.section`\n align-items: center;\n border-bottom: 1px solid var(--borders);\n display: flex;\n padding: 2rem 3rem;\n width: 100%;\n\n ${media.lessThan('large')`\n flex-direction: column;\n padding: 2rem 1rem;\n `}\n`\n\nexport const CourseLink = styled.a`\n color: var(--texts);\n display: flex;\n text-decoration: none;\n transition: ${transitions.COLOR};\n\n &:hover {\n color: var(--highlight);\n }\n`\n\nexport const CourseInfo = styled.div`\n display: flex;\n flex-direction: column;\n margin-left: 1.5rem;\n\n ${media.lessThan('large')`\n margin: 0;\n `}\n`\n\nexport const CourseTitle = styled.h1`\n font-size: 1.6rem;\n font-weight: 700;\n margin: 0.2rem 0 0.5rem;\n`\n\nexport const CourseDescription = styled.h2`\n font-size: 1.2rem;\n font-weight: 300;\n line-height: 1.2;\n`\n" }, { "path": "src/components/Layout/index.js", "content": "import { useState } from 'react'\n\nimport {\n BLOG_AUTHOR,\n BLOG_AUTHOR_DESCRIPTION,\n BLOG_AUTHOR_POSITION\n} from 'lib/constants'\n\nimport Profile from 'components/Profile'\nimport Sidebar from 'components/Sidebar'\nimport MenuBar from 'components/MenuBar'\n\nimport * as S from './styled'\n\nconst Layout = ({ children }) => {\n const [isMenuOpen, setIsMenuOpen] = useState(false)\n\n return (\n \n \n \n {children}\n \n \n )\n}\n\nexport default Layout\n" }, { "path": "src/components/Layout/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from 'styles/transitions'\n\nexport const LayoutWrapper = styled.section`\n display: flex;\n\n ${media.lessThan('large')`\n flex-direction: column;\n `}\n`\n\nexport const LayoutMain = styled.main`\n background: var(--background);\n min-height: 100vh;\n padding: 0 3.75rem 0 20rem;\n transition: ${transitions.DEFAULT};\n width: 100%;\n\n ${media.lessThan('large')`\n padding: 4rem 0 3rem 0;\n `}\n`\n" }, { "path": "src/components/MenuBar/index.js", "content": "import Link from 'next/link'\nimport { useRouter } from 'next/router'\nimport { useState, useEffect } from 'react'\n\nimport { Home } from '@styled-icons/boxicons-solid/Home'\nimport { SearchAlt2 as Search } from '@styled-icons/boxicons-regular/SearchAlt2'\nimport { UpArrowAlt as Arrow } from '@styled-icons/boxicons-regular/UpArrowAlt'\nimport { Youtube } from '@styled-icons/boxicons-logos/Youtube'\nimport { LightBulb as Light } from '@styled-icons/entypo/LightBulb'\nimport { GraduationCap } from '@styled-icons/fa-solid/GraduationCap'\nimport { Menu } from '@styled-icons/boxicons-regular/Menu'\n\nimport * as S from './styled'\n\nconst MenuBar = ({ setIsMenuOpen, isMenuOpen }) => {\n const router = useRouter()\n const [theme, setTheme] = useState(null)\n\n const isDarkMode = theme === 'dark'\n\n useEffect(() => {\n setTheme(window.__theme)\n window.__onThemeChange = () => setTheme(window.__theme)\n }, [])\n\n const openMenu = () => {\n setIsMenuOpen(!isMenuOpen)\n }\n\n return (\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n {\n window.__setPreferredTheme(isDarkMode ? 'light' : 'dark')\n }}\n className={theme}\n isDarkMode={isDarkMode}\n >\n \n \n {\n window.scroll({ top: 0, behavior: 'smooth' })\n }}\n >\n \n \n \n \n )\n}\n\nexport default MenuBar\n" }, { "path": "src/components/MenuBar/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from 'styles/transitions'\n\nexport const MenuBarWrapper = styled.aside`\n align-items: center;\n background: var(--mediumBackground);\n border-left: 1px solid var(--borders);\n display: flex;\n flex-direction: column;\n height: 100vh;\n justify-content: space-between;\n padding: 0.8rem 0;\n position: fixed;\n right: 0;\n width: 3.75rem;\n transition: ${transitions.ALL};\n\n ${media.lessThan('large')`\n border: 0;\n border-top: 1px solid var(--borders);\n bottom: -3px;\n flex-direction: row;\n height: auto;\n padding: 0;\n padding-bottom: env(safe-area-inset-bottom);\n position: fixed;\n width: 100%;\n `}\n`\n\nexport const MenuBarGroupDesktop = styled.div`\n display: block;\n\n ${media.lessThan('large')`\n display: none;\n `}\n`\n\nexport const MenuBarGroupMobile = styled.div`\n display: none;\n\n ${media.lessThan('large')`\n display: block;\n `}\n`\n\nexport const MenuBarGroup = styled.div`\n display: flex;\n flex-direction: column;\n\n ${media.lessThan('large')`\n flex-direction: row;\n `}\n`\n\nexport const MenuBarLink = styled.a`\n display: block;\n\n &.active {\n span {\n color: var(--highlight);\n }\n }\n`\n\nexport const MenuBarExternalLink = styled.a`\n display: block;\n`\n\nexport const MenuBarItem = styled.span`\n color: var(--texts);\n cursor: pointer;\n display: block;\n height: 3.75rem;\n padding: 1.1rem;\n position: relative;\n width: 3.75rem;\n transition: ${transitions.COLOR};\n\n svg {\n vertical-align: middle;\n }\n\n &.light {\n color: #d4d400;\n }\n\n &.display {\n ${media.lessThan('large')`\n display: none;\n `}\n }\n\n ${media.greaterThan('large')`\n &:hover {\n color: var(--highlight);\n }\n `}\n\n ${media.lessThan('large')`\n height: 3.2rem;\n padding: .9rem;\n position: relative;\n width: 3.2rem;\n `}\n`\n\nexport const MenuBarNotification = styled.span`\n background: var(--highlight);\n border-radius: 50%;\n display: block;\n height: 0.4rem;\n position: absolute;\n right: 12px;\n top: 12px;\n width: 0.4rem;\n`\n" }, { "path": "src/components/MenuLinks/content.js", "content": "const links = [\n {\n label: 'Home',\n url: '/'\n },\n {\n label: 'Sobre Mim',\n url: '/about'\n },\n {\n label: 'Cursos',\n url: '/cursos'\n },\n {\n label: 'Séries',\n url: '/series'\n },\n {\n label: 'Viagens',\n url: 'https://my-trips.willianjusten.com.br/'\n },\n {\n label: 'Fotografia',\n url: 'https://photos.willianjusten.com.br'\n }\n]\n\nexport default links\n" }, { "path": "src/components/MenuLinks/index.js", "content": "import Link from 'next/link'\nimport { useRouter } from 'next/router'\n\nimport links from './content'\n\nimport * as S from './styled'\n\nconst MenuLinks = ({ setIsMenuOpen, isMenuOpen }) => {\n const router = useRouter()\n const menuLinkClick = () => {\n setIsMenuOpen(!isMenuOpen)\n }\n\n return (\n \n \n {links.map((link, i) => (\n \n \n \n {link.label}\n \n \n \n ))}\n \n \n )\n}\n\nexport default MenuLinks\n" }, { "path": "src/components/MenuLinks/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from 'styles/transitions'\n\nexport const MenuLinksWrapper = styled.nav`\n ${media.lessThan('large')`\n margin: auto;\n `}\n`\n\nexport const MenuLinksList = styled.ul`\n font-size: 1.2rem;\n font-weight: 300;\n\n ${media.lessThan('large')`\n font-size: 1.8rem;\n `}\n`\n\nexport const MenuLinksItem = styled.li`\n padding: 0.5rem 0;\n\n ${media.lessThan('large')`\n padding: 1rem 0;\n `}\n\n .active {\n color: var(--highlight);\n }\n\n a {\n color: var(--texts);\n text-decoration: none;\n transition: ${transitions.COLOR};\n\n &:hover {\n color: var(--highlight);\n }\n }\n`\n" }, { "path": "src/components/Pagination/index.js", "content": "import Link from 'next/link'\n\nimport * as S from './styled'\n\nconst Pagination = props => (\n \n {!props.isFirst && (\n \n ← Página Anterior\n \n )}\n

    \n {props.currentPage} de {props.numPages}\n

    \n {!props.isLast && (\n \n Próxima Página →\n \n )}\n     \n)\n\nexport default Pagination\n" }, { "path": "src/components/Pagination/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from '../../styles/transitions';\n\nexport const PaginationWrapper = styled.section`\n align-items: center;\n border-top: 1px solid var(--borders);\n color: var(--texts);\n display: flex;\n padding: 1.5rem 3rem;\n justify-content: space-between;\n\n ${media.lessThan('large')`\n font-size: .8rem;\n padding: 1rem;\n `}\n\n a {\n color: var(--texts);\n text-decoration: none;\n transition: ${transitions.COLOR};\n\n &:hover {\n color: var(--highlight);\n }\n }\n`\n" }, { "path": "src/components/Post/index.js", "content": "import Link from 'next/link'\n\nimport * as S from './styled'\n\nconst Post = ({ slug, date, timeToRead, title, description, main_class }) => {\n return (\n \n \n \n {main_class && (\n {main_class}\n )}\n \n \n {date} {timeToRead && ` • ${timeToRead} min de leitura`}\n \n {title}\n {description}\n \n \n \n \n )\n}\n\nexport default Post\n" }, { "path": "src/components/Post/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from 'styles/transitions'\n\nexport const PostWrapper = styled.section`\n align-items: center;\n border-bottom: 1px solid var(--borders);\n display: flex;\n padding: 2rem 3rem;\n width: 100%;\n transition: ${transitions.ALL};\n\n ${media.lessThan('large')`\n align-items: flex-start;\n flex-direction: column;\n padding: 2rem 1rem;\n `}\n`\n\nexport const PostLink = styled.a`\n color: var(--texts);\n display: flex;\n text-decoration: none;\n transition: ${transitions.COLOR};\n\n &:hover {\n color: var(--highlight);\n }\n`\n\nexport const PostTag = styled.div`\n align-items: center;\n background: var(--highlight);\n border-radius: 50%;\n color: var(--white);\n display: flex;\n font-size: 1.3rem;\n font-weight: 700;\n justify-content: center;\n min-height: 90px;\n min-width: 90px;\n text-transform: uppercase;\n\n ${media.lessThan('large')`\n border-radius: 0;\n font-size: 1rem;\n min-height: auto;\n min-width: auto;\n padding: .2rem .5rem;\n margin-bottom: .7rem;\n `}\n\n &.is-js {\n background: #d6ba32;\n color: #000;\n }\n\n &.is-misc {\n background: #47650b;\n }\n\n &.is-dev {\n background: #61728f;\n }\n\n &.is-svg {\n background: #7d669e;\n }\n\n &.is-css {\n background: #24809e;\n }\n\n &.is-jekyll {\n background: #b31917;\n }\n`\n\nexport const PostInfo = styled.div`\n display: flex;\n flex-direction: column;\n margin-left: 1.5rem;\n\n ${media.lessThan('large')`\n margin: 0;\n `}\n`\n\nexport const PostDate = styled.time`\n font-size: 0.9rem;\n`\n\nexport const PostTitle = styled.h1`\n font-size: 1.6rem;\n font-weight: 700;\n margin: 0.2rem 0 0.5rem;\n`\n\nexport const PostDescription = styled.h2`\n font-size: 1.2rem;\n font-weight: 300;\n line-height: 1.2;\n`\n" }, { "path": "src/components/Profile/index.js", "content": "import Link from 'next/link'\n\nimport Avatar from 'components/Avatar'\n\nimport * as S from './styled'\n\nconst Profile = ({ title, position, authorDescription, isMobileHeader }) => {\n return (\n \n \n \n \n \n {title}\n {position}\n \n \n \n {authorDescription}\n \n )\n}\n\nexport default Profile\n" }, { "path": "src/components/Profile/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from '../../styles/transitions'\n\nexport const ProfileContainer = styled.section`\n display: ${props => (props.isMobileHeader ? 'none' : 'flex')};\n color: var(--texts);\n flex-direction: column;\n\n ${media.lessThan('large')`\n align-items: flex-start;\n display: ${props => (props.isMobileHeader ? 'flex' : 'none')};\n background: var(--mediumBackground);\n border-bottom: 1px solid var(--borders);\n padding: 1rem;\n width: 100vw;\n position: fixed;\n z-index: 10;\n `}\n`\n\nexport const ProfileLink = styled.a`\n color: var(--texts);\n text-decoration: none;\n transition: ${transitions.COLOR};\n\n &:hover {\n color: var(--highlight);\n }\n\n ${media.lessThan('large')`\n display: flex;\n text-align: left;\n `}\n`\n\nexport const ProfileAuthor = styled.h1`\n font-size: 1.6rem;\n margin: 0.5rem auto 1.5rem;\n\n ${media.lessThan('large')`\n font-size: 1.2rem;\n margin: 0 0 0 10px;\n `}\n`\n\nexport const ProfilePosition = styled.small`\n display: block;\n font-size: 1.2rem;\n font-weight: 300;\n\n ${media.lessThan('large')`\n font-size: .8rem;\n margin-top: .2rem;\n `}\n`\n\nexport const ProfileDescription = styled.p`\n font-size: 1rem;\n font-weight: 300;\n line-height: 1.4;\n\n ${media.lessThan('large')`\n display: none;\n `}\n`\n" }, { "path": "src/components/RecommendedPosts/index.js", "content": "import Link from 'next/link'\n\nimport * as S from './styled'\n\nconst RecommendedPosts = ({ next, previous }) => (\n \n {previous && (\n \n \n {previous.frontmatter.title}\n \n \n )}\n {next && (\n \n \n {next.frontmatter.title}\n \n \n )}\n \n)\n\nexport default RecommendedPosts\n" }, { "path": "src/components/RecommendedPosts/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from 'styles/transitions'\n\nexport const RecommendedWrapper = styled.section`\n border-bottom: 1px solid var(--borders);\n border-top: 1px solid var(--borders);\n background: var(--mediumBackground);\n display: flex;\n`\n\nexport const RecommendedLink = styled.a`\n align-items: center;\n background: var(--mediumBackground);\n color: var(--highlight);\n display: flex;\n padding: 3rem;\n text-decoration: none;\n transition: ${transitions.BACKGROUND};\n width: 50%;\n\n ${media.lessThan('large')`\n padding: 2rem 1rem;\n line-height: 1.3;\n font-size: .9rem;\n `}\n\n &:hover {\n background: var(--borders);\n }\n\n &.previous {\n border-right: 1px solid var(--borders);\n }\n\n &.next {\n justify-content: flex-end;\n }\n\n &.next:only-child {\n margin-left: auto;\n border-left: 1px solid var(--borders);\n }\n\n &.previous:before {\n content: '\\\\2190';\n margin-right: 0.5rem;\n }\n\n &.next:after {\n content: '\\\\2192';\n margin-left: 0.5rem;\n }\n`\n" }, { "path": "src/components/Search/Hit.js", "content": "import Post from 'components/Post'\n\nconst Hit = props => {\n const { hit } = props\n\n return (\n \n )\n}\n\nexport default Hit\n" }, { "path": "src/components/Search/index.js", "content": "import { SearchBox, Hits, Stats, Configure } from 'react-instantsearch-dom'\n\nimport Hit from './Hit'\n\nimport * as S from './styled'\n\nconst Search = () => {\n return (\n \n <>\n \n \n \n \n \n Powered by Algolia\n \n \n \n \n )\n}\n\nexport default Search\n" }, { "path": "src/components/Search/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\nimport { Algolia } from '@styled-icons/fa-brands/Algolia'\n\nexport const SearchWrapper = styled.section`\n background: var(--background);\n display: flex;\n flex-direction: column;\n width: 100%;\n transition: opacity 0.4s;\n\n .ais-InstantSearch__root {\n display: flex;\n flex-direction: column;\n height: auto;\n width: 100%;\n }\n\n .ais-SearchBox,\n .ais-Stats {\n padding: 0.5rem 3rem;\n\n ${media.lessThan('large')`\n padding: 0.5rem 1rem;\n `}\n }\n\n .ais-SearchBox {\n padding-top: 6rem;\n\n ${media.lessThan('large')`\n padding-top: 1rem;\n `}\n }\n\n .ais-Stats {\n color: var(--texts);\n }\n\n .ais-SearchBox-input {\n background: none;\n border: none;\n border-bottom: 1px solid var(--borders);\n color: var(--texts);\n display: flex;\n font-size: 1.6rem;\n padding: 0.5rem;\n width: 100%;\n\n &::placeholder {\n color: var(--texts);\n }\n }\n\n .ais-SearchBox-submit,\n .ais-SearchBox-reset {\n display: none;\n }\n`\n\nexport const SearchTitle = styled.h1`\n color: var(--texts);\n font-size: 1rem;\n font-weight: 700;\n padding: 3rem 2rem;\n text-align: right;\n\n ${media.lessThan('large')`\n padding: 1rem;\n line-height: 1.1;\n `}\n`\n\nexport const AlgoliaIcon = styled(Algolia)`\n height: 1.2rem;\n margin-left: 0.5rem;\n width: 1.2rem;\n`\n" }, { "path": "src/components/Sidebar/index.js", "content": "import {\n BLOG_AUTHOR,\n BLOG_AUTHOR_DESCRIPTION,\n BLOG_AUTHOR_POSITION\n} from 'lib/constants'\n\nimport Profile from 'components/Profile'\nimport SocialLinks from 'components/SocialLinks'\nimport MenuLinks from 'components/MenuLinks'\n\nimport * as S from './styled'\n\nconst Sidebar = ({ isMenuOpen, setIsMenuOpen }) => (\n \n \n \n \n \n \n \n)\n\nexport default Sidebar\n" }, { "path": "src/components/Sidebar/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from '../../styles/transitions'\n\nexport const SidebarContainer = styled.aside`\n align-items: center;\n border-right: 1px solid var(--borders);\n background: var(--mediumBackground);\n display: flex;\n flex-direction: column;\n height: 100vh;\n position: fixed;\n padding: 2rem;\n text-align: center;\n width: 20rem;\n transition: ${transitions.ALL};\n z-index: 2;\n\n ${media.lessThan('large')`\n align-items: flex-start;\n border: 0;\n height: calc(100% - 49px);\n padding: 0;\n width: 100%;\n transform: ${props =>\n props.isMenuOpen ? 'translateX(0)' : 'translateX(-100vw)'};\n `}\n`\n\nexport const SidebarLinksContainer = styled.section`\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n`\n" }, { "path": "src/components/SocialLinks/Icons.js", "content": "import { Github } from '@styled-icons/boxicons-logos/Github'\nimport { Twitter } from '@styled-icons/boxicons-logos/Twitter'\nimport { Youtube } from '@styled-icons/boxicons-logos/Youtube'\nimport { Unsplash } from '@styled-icons/boxicons-logos/Unsplash'\nimport { Instagram } from '@styled-icons/boxicons-logos/Instagram'\n\nconst Icons = {\n Github: Github,\n Twitter: Twitter,\n Youtube: Youtube,\n Unsplash: Unsplash,\n Instagram: Instagram\n}\n\nexport default Icons\n" }, { "path": "src/components/SocialLinks/content.js", "content": "const links = [\n {\n label: 'Github',\n url: 'https://github.com/willianjusten'\n },\n {\n label: 'Twitter',\n url: 'https://twitter.com/Willian_justen'\n },\n {\n label: 'Youtube',\n url: 'https://www.youtube.com/WillianJustenCursos/?sub_confirmation=1'\n },\n {\n label: 'Instagram',\n url: 'https://www.instagram.com/will_justen/'\n },\n {\n label: 'Unsplash',\n url: 'https://unsplash.com/@willianjusten'\n }\n]\n\nexport default links\n" }, { "path": "src/components/SocialLinks/index.js", "content": "import links from './content'\nimport Icons from './Icons'\n\nimport * as S from './styled'\n\nconst SocialLinks = () => (\n \n \n {links.map((link, i) => {\n const Icon = Icons[link.label]\n\n return (\n
  • \n \n \n \n \n \n
    • \n )\n })}\n     \n     \n)\n\nexport default SocialLinks\n" }, { "path": "src/components/SocialLinks/styled.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport transitions from 'styles/transitions'\n\nexport const SocialLinksWrapper = styled.nav`\n margin: 2rem auto;\n width: 100%;\n\n ${media.lessThan('large')`\n order: 2;\n margin: 0 0 1rem;\n `}\n`\n\nexport const SocialLinksList = styled.ul`\n align-items: center;\n display: flex;\n justify-content: space-around;\n list-style: none !important;\n\n a {\n color: var(--texts);\n text-decoration: none;\n transition: ${transitions.COLOR};\n\n &:hover {\n color: var(--highlight);\n }\n }\n`\n\nexport const IconWrapper = styled.div`\n fill: #bbb;\n width: 30px;\n height: 30px;\n`\n" }, { "path": "src/lib/api.js", "content": "import matter from 'gray-matter'\nimport { join } from 'path'\nimport fs from 'fs'\n\nimport { format } from 'date-fns'\nimport { pt } from 'date-fns/locale'\n\nconst postsDirectory = join(process.cwd(), 'posts')\n\nexport function getPostBySlug(slug) {\n if (!slug) return null\n\n const realSlug = slug.replace(/\\.md$/, '')\n const fullPath = join(postsDirectory, `${realSlug}.md`)\n const fileContents = fs.readFileSync(fullPath, 'utf8')\n const { data, content } = matter(fileContents)\n\n const date = format(new Date(data.date), \"dd 'de' MMMM 'de' yyyy\", {\n locale: pt\n })\n\n return {\n slug: realSlug,\n date: data.date.toString(),\n frontmatter: { ...data, date },\n content\n }\n}\n\nexport function getAllPosts() {\n const slugs = fs.readdirSync(postsDirectory)\n const posts = slugs\n .map(slug => getPostBySlug(slug))\n .sort((post1, post2) =>\n new Date(post1.date) > new Date(post2.date) ? -1 : 1\n )\n\n return posts\n}\n" }, { "path": "src/lib/buildAlgoliaIndexes.js", "content": "import algoliasearch from 'algoliasearch/lite'\nimport slugify from 'slugify'\n\nfunction transformPostsToSearchObjects(posts) {\n const transformed = posts.map(post => {\n return {\n objectID: slugify(post.frontmatter.title, { lower: true, strict: true }),\n title: post.frontmatter.title,\n main_class: post.frontmatter['main-class'],\n description: post.frontmatter.description,\n content: post.content.substr(0, 5000),\n fields: {\n slug: post.slug\n },\n date: post.frontmatter.date,\n date_timestamp: Date.parse(post.date)\n }\n })\n\n return transformed\n}\n\nexport async function buildAlgoliaIndexes(posts) {\n if (\n Boolean(process.env.NEXT_PUBLIC_PROD_ALGOLIA) !== true ||\n process.env.NODE_ENV === 'development'\n )\n return\n\n try {\n const transformedPosts = transformPostsToSearchObjects(posts)\n\n if (posts.length > 0) {\n const client = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,\n process.env.ALGOLIA_ADMIN_KEY\n )\n\n const index = client.initIndex(process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME)\n const algoliaResponse = await index.saveObjects(transformedPosts)\n\n console.log(\n `\\n\\n🎉 Sucessfully added ${\n algoliaResponse.objectIDs.length\n } records to Algolia search. Object IDs:\\n${algoliaResponse.objectIDs.join(\n '\\n'\n )}`\n )\n }\n } catch (error) {\n console.log(error)\n }\n}\n" }, { "path": "src/lib/constants.js", "content": "export const BLOG_TITLE = 'Willian Justen'\n\nexport const BLOG_SUBTITLE =\n 'Um blog de um desenvolvedor Front End, fã de SVG, Javascript, React e novas tecnologias. Nômade Digital, instrutor na Udemy e viajando o mundo.'\n\nexport const BLOG_DESCRIPTION = [BLOG_TITLE, BLOG_SUBTITLE].join(' | ')\n\nexport const BLOG_AUTHOR = 'Willian Justen'\n\nexport const BLOG_AUTHOR_LINK = 'https://twitter.com/Willian_Justen'\n\nexport const BLOG_URL = 'https://willianjusten.com.br'\n\nexport const BLOG_AUTHOR_POSITION = 'Software Engineer'\n\nexport const BLOG_AUTHOR_DESCRIPTION =\n 'Instrutor na Udemy, escrevo sobre o mundo front end, viagens, vida pessoal e mais.'\n" }, { "path": "src/lib/generateRSS.js", "content": "import { BLOG_URL, BLOG_TITLE, BLOG_SUBTITLE } from 'lib/constants'\nimport markdownToHtml from 'lib/markdownToHtml'\n\nexport async function generateRssItem(post) {\n const content = await markdownToHtml(post.content || '')\n\n return `\n \n ${BLOG_URL}/${post.slug}\n ${post.frontmatter.title}\n ${post.frontmatter.description}\n ${BLOG_URL}/${post.slug}\n ${new Date(post.date).toUTCString()}\n \n \n `\n}\n\nexport async function generateRss(posts) {\n const itemsList = await Promise.all(posts.map(generateRssItem))\n\n return `\n \n \n ${BLOG_TITLE}\n ${BLOG_URL}\n ${BLOG_SUBTITLE}\n en\n ${new Date(posts[0].date).toUTCString()}\n \n ${itemsList.join('')}\n \n \n `\n}\n" }, { "path": "src/lib/generateSitemap.js", "content": "import { BLOG_URL } from './constants'\n\nconst globby = require('globby')\nconst { SitemapStream, streamToPromise } = require('sitemap')\nconst { Readable } = require('stream')\nconst fs = require('fs')\n\n// pages that should not be in the sitemap\nconst blocklist = ['/404']\n\nexport async function generateSitemap(posts) {\n if (process.env.NODE_ENV === 'development') {\n return\n }\n\n const baseUrl = BLOG_URL\n const pages = await globby([\n 'src/pages/**/*{.js}',\n '!src/pages/**/[*',\n '!src/pages/_*.js',\n '!src/pages/api'\n ])\n\n // normal page routes\n const pageLinks = pages\n .map(page => {\n const path = page\n .replace('pages', '')\n .replace('.js', '')\n .replace('src/', '')\n return path === '/index'\n ? { url: '/', changefreq: 'daily', priority: 0.7 }\n : { url: path, changefreq: 'daily', priority: 0.7 }\n })\n .filter(page => !blocklist.includes(page.url))\n\n // post routes\n const postLinks = posts.map(post => ({\n url: `/${post.slug}`,\n changefreq: 'daily',\n priority: 0.7\n }))\n\n const links = [...pageLinks, ...postLinks]\n const stream = new SitemapStream({ hostname: baseUrl })\n\n const xml = await streamToPromise(Readable.from(links).pipe(stream)).then(\n data => data.toString()\n )\n\n fs.writeFileSync('./public/sitemap.xml', xml)\n}\n" }, { "path": "src/lib/gtag.js", "content": "export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING\n\n// https://developers.google.com/analytics/devguides/collection/gtagjs/pages\nexport const pageview = url => {\n window.gtag &&\n window.gtag('config', GA_TRACKING_ID, {\n page_path: url\n })\n}\n\n// https://developers.google.com/analytics/devguides/collection/gtagjs/events\nexport const event = ({ action, category, label, value }) => {\n window.gtag &&\n window.gtag('event', action, {\n event_category: category,\n event_label: label,\n value: value\n })\n}\n" }, { "path": "src/lib/markdownToHtml.js", "content": "import remark from 'remark'\nimport html from 'remark-html'\nimport headings from 'remark-autolink-headings'\nimport slug from 'remark-slug'\nimport remarkOembed from 'remark-oembed'\n\nexport default async function markdownToHtml(markdown) {\n const result = await remark()\n .use(html)\n .use(remarkOembed)\n .use(slug)\n .use(headings, {\n behavior: 'wrap',\n linkProperties: {\n className: 'anchor'\n }\n })\n .process(markdown)\n\n return result.toString()\n}\n" }, { "path": "src/lib/utils.js", "content": "// a function to calculate reading time\nexport const timeToRead = text => {\n const words = text.split(' ')\n const minutes = Math.ceil(words.length / 200)\n return `${minutes} min de leitura`\n}\n\n// a function to return only unique values\nexport const unique = (val, index, self) => {\n return self.indexOf(val) === index\n}\n" }, { "path": "src/pages/404.js", "content": "import { NextSeo } from 'next-seo'\nimport Link from 'next/link'\nimport styled from 'styled-components'\n\nconst Container = styled.section`\n align-items: center;\n background-image: url('https://willianjusten.com.br/assets/img/john-404.gif');\n background-position: bottom left;\n background-repeat: no-repeat;\n background-size: 800px;\n color: #111;\n display: flex;\n font-family: -apple-system, BlinkMacSystemFont, 'San Francisco',\n 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial,\n sans-serif;\n flex-direction: column;\n height: 100vh;\n justify-content: center;\n padding: 0 20px;\n width: 100%;\n\n @media screen and (max-width: 768px) {\n background-size: 280px;\n }\n`\n\nconst Title = styled.h1`\n background: var(--background);\n color: var(--texts);\n font-size: 120px;\n font-weight: bold;\n letter-spacing: 0.1em;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n`\n\nconst Text = styled.p`\n background: var(--background);\n color: var(--texts);\n font-family: Courier, monospace;\n`\n\nconst Button = styled.a`\n background: var(--background);\n border: 1px solid var(--borders);\n border-radius: 6px;\n color: var(--texts);\n cursor: pointer;\n font-size: 11px;\n font-weight: bold;\n letter-spacing: 0.06em;\n line-height: 32px;\n margin-top: 1rem;\n padding: 0 10px;\n text-decoration: none;\n text-transform: uppercase;\n transition: opacity 0.5s;\n\n &:hover {\n opacity: 0.7;\n }\n`\n\nconst NotFoundPage = () => (\n \n \n 404\n Ué? Cadê? Parece que não tem o que você procura.\n \n \n \n \n)\n\nexport default NotFoundPage\n" }, { "path": "src/pages/[slug].js", "content": "import BlogPost from 'templates/blog-post'\nimport { getPostBySlug, getAllPosts } from 'lib/api'\nimport markdownToHtml from 'lib/markdownToHtml'\n\nconst Post = post => {\n return \n}\n\nexport default Post\n\nexport async function getStaticProps({ params }) {\n const slug = params.slug\n const post = getPostBySlug(slug)\n const content = await markdownToHtml(post.content || '')\n\n // get prev/next posts\n const allPosts = getAllPosts()\n const currentPostIndex = allPosts.findIndex(p => p.slug === slug)\n const nextPost = allPosts[currentPostIndex - 1] ?? null\n const prevPost = allPosts[currentPostIndex + 1] ?? null\n\n return {\n props: {\n ...post,\n content,\n nextPost,\n prevPost\n },\n revalidate: false\n }\n}\n\nexport async function getStaticPaths() {\n const posts = getAllPosts()\n const paths = posts.map(({ slug }) => ({ params: { slug } }))\n\n return {\n paths,\n fallback: false\n }\n}\n" }, { "path": "src/pages/_app.js", "content": "import Head from 'next/head'\nimport { useRouter } from 'next/router'\nimport { useEffect } from 'react'\nimport NextNProgress from 'nextjs-progressbar'\n\nimport * as gtag from 'lib/gtag'\nimport { DefaultSeo } from 'next-seo'\nimport SEO from '../../next-seo.config'\nimport Analytics from 'components/Analytics'\n\nimport Layout from 'components/Layout'\nimport GlobalStyles from 'styles/global'\n\nfunction App({ Component, pageProps }) {\n const router = useRouter()\n\n useEffect(() => {\n const handleRouteChange = url => {\n gtag.pageview(url)\n }\n router.events.on('routeChangeComplete', handleRouteChange)\n return () => {\n router.events.off('routeChangeComplete', handleRouteChange)\n }\n }, [router.events])\n\n return (\n <>\n \n Willian Justen\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default App\n" }, { "path": "src/pages/_document.js", "content": "import Document, { Html, Head, Main, NextScript } from 'next/document'\nimport { ServerStyleSheet } from 'styled-components'\n\nexport default class MyDocument extends Document {\n static async getInitialProps(ctx) {\n const sheet = new ServerStyleSheet()\n const originalRenderPage = ctx.renderPage\n\n try {\n ctx.renderPage = () =>\n originalRenderPage({\n enhanceApp: App => props => sheet.collectStyles()\n })\n\n const initialProps = await Document.getInitialProps(ctx)\n return {\n ...initialProps,\n styles: (\n <>\n {initialProps.styles}\n {sheet.getStyleElement()}\n \n )\n }\n } finally {\n sheet.seal()\n }\n }\n\n render() {\n return (\n \n \n \n
    \n \n \n \n \n )\n }\n}\n" }, { "path": "src/pages/about.js", "content": "import { NextSeo } from 'next-seo'\nimport SocialLinks from 'components/SocialLinks'\n\nimport { MainContent } from 'styles/base'\n\nconst AboutPage = () => (\n <>\n \n \n

    Sobre mim

    \n

    \n Meu nome é Willian Justen de Vasconcellos, nasci em Petrópolis/RJ,\n trabalho como Staff Engineer na{' '}\n Appcues e sou instrutor na{' '}\n \n Udemy\n \n , além de ser um nômade digital e tirar{' '}\n \n algumas fotos\n {' '}\n por onde vou.\n

    \n\n

    \n Já passei por empresas como{' '}\n \n Toptal\n \n ,{' '}\n \n Huge\n \n ,{' '}\n \n Globo.com\n \n ,{' '}\n \n Queremos\n {' '}\n e outras mais. Cursei Tecnologia da Informação na Faeterj-Petrópolis no\n ano de 2014, mas curiosamente, essa não foi minha primeira faculdade, eu\n também fiz Química Industrial na Uff. Sim, você leu\n certo, eu realmente fiz Química… E por que eu trabalho com web agora?\n Ah… porque web é incrível, a facilidade em aprender cada dia mais e\n ainda poder ajudar um grande número de pessoas me deixa feliz e\n realizado todos os dias.\n

    \n\n

    \n Eu amo trabalhar em equipe e sou bem comunicativo. No meu tempo livre,\n gosto de ensinar meus amigos sobre alguma coisa que aprendi, acho que\n por isso nasceu esse blog.\n

    \n\n

    Contato

    \n\n

    \n Você pode entrar em contato comigo através de qualquer uma das minhas\n redes sociais.\n

    \n\n \n     \n \n)\n\nexport default AboutPage\n" }, { "path": "src/pages/api/auth.js", "content": "export { auth as default } from '@openlab/vercel-netlify-cms-github'\n" }, { "path": "src/pages/api/callback.js", "content": "export { callback as default } from '@openlab/vercel-netlify-cms-github'\n" }, { "path": "src/pages/cursos.js", "content": "import Course from 'components/Course'\nimport { NextSeo } from 'next-seo'\n\nconst coursesList = [\n {\n title: 'Games in JS',\n link: 'https://games.willianjusten.com.br/',\n description: 'Suba de nível criando jogos em JavaScript!'\n },\n {\n title: 'React Avançado',\n link: 'https://reactavancado.com.br/',\n description: 'Crie aplicações reais com NextJS, Strapi, GraphQL e mais!'\n },\n {\n title: 'NextJS na Prática!',\n link: 'https://www.youtube.com/playlist?list=PLlAbYrWSYTiPlXj6USip_lCPzONUATJbE',\n description:\n 'Crie um mapa totalmente interativo com um CMS integrado em poucas horas!'\n },\n {\n title: 'JS Moderno (ES6)',\n link: 'https://www.youtube.com/playlist?list=PLlAbYrWSYTiPQ1BE8klOtheBC0mtL3hEi',\n description:\n 'Aprenda as novas features do JS moderno em vídeos rápidos e diretos!'\n },\n {\n title: 'Mini-curso de TypeScript',\n link: 'https://www.youtube.com/watch?v=mRixno_uE2o&list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_',\n description:\n 'Aprenda o que é TypeScript, como funciona, por que usar e muito mais!'\n },\n {\n title: 'Criando um ambiente de Desenvolvimento no Windows',\n link: 'https://www.youtube.com/watch?v=YcR8pKvjx44&list=PLlAbYrWSYTiOpefWtd6uvwgKT1R-94Zfd',\n description: 'Comece a desenvolver no Windows do jeito certo e sem erros!'\n },\n {\n title: 'Mini-curso de Netlify no Youtube',\n link: 'https://www.youtube.com/watch?v=a1cIjP1bueM&list=PLlAbYrWSYTiMGMxQf9JSoZUU1rgVpGPth',\n description:\n 'Aprenda a botar seus projetos no ar de forma fácil e gratuita!'\n },\n {\n title: 'Git e Github na Vida Real',\n link: 'https://www.youtube.com/playlist?list=PLlAbYrWSYTiNqugqFFWWsgONJsmc3eMpg',\n description:\n 'Aprenda Workflows usados em empresa e domine o git para nunca mais ter problema nenhum!'\n },\n {\n title: 'Aprendendo SVG do início ao avançado',\n link: 'https://www.youtube.com/playlist?list=PLlAbYrWSYTiOufRJOeP73o4GR9N1afQdP',\n description:\n 'Se adiante e adquira um dos cursos mais completos de SVG totalmente em português.'\n },\n {\n title: 'Git e Github para Iniciantes',\n link: 'https://www.youtube.com/playlist?list=PLlAbYrWSYTiPA2iEiQ2PF_A9j__C4hi0A',\n description:\n 'Tudo que você precisa para começar a versionar seus arquivos e contribuir com a comunidade opensource.'\n }\n]\n\nconst CursosPage = () => (\n <>\n \n {coursesList.map(({ title, description, link }, i) => (\n \n ))}\n \n)\n\nexport default CursosPage\n" }, { "path": "src/pages/index.js", "content": "import fs from 'fs'\nimport { getAllPosts } from 'lib/api'\nimport { buildAlgoliaIndexes } from 'lib/buildAlgoliaIndexes'\nimport { generateRss } from 'lib/generateRSS'\nimport { generateSitemap } from 'lib/generateSitemap'\n\nimport BlogList from 'templates/blog-list'\n\nconst Post = ({ posts }) => {\n return \n}\n\nexport async function getStaticProps() {\n const posts = getAllPosts()\n\n if (process.env.NODE_ENV !== 'development') {\n await generateSitemap(posts)\n\n const rss = await generateRss(posts)\n fs.writeFileSync('./public/feed.xml', rss)\n\n await buildAlgoliaIndexes(posts)\n }\n\n return {\n props: {\n posts\n }\n }\n}\n\nexport default Post\n" }, { "path": "src/pages/search.js", "content": "import { NextSeo } from 'next-seo'\nimport algoliasearch from 'algoliasearch/lite'\nimport { withInstantSearch } from 'next-instantsearch'\n\nimport Search from 'components/Search'\n\nconst algolia = {\n appId: process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,\n searchOnlyApiKey: process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_KEY,\n indexName: process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME\n}\n\nconst searchClient = algoliasearch(algolia.appId, algolia.searchOnlyApiKey)\n\nconst SearchPage = () => {\n return (\n <>\n \n \n \n )\n}\n\nexport default withInstantSearch({\n indexName: algolia.indexName,\n searchClient\n})(SearchPage)\n" }, { "path": "src/pages/series.js", "content": "import { NextSeo } from 'next-seo'\nimport styled from 'styled-components'\nimport media from 'styled-media-query'\n\nimport slugify from 'slugify'\nimport { getAllPosts } from 'lib/api'\nimport { unique } from 'lib/utils'\n\nimport Post from 'components/Post'\n\nconst SeriesTitle = styled.h2`\n background: var(--borders);\n color: var(--texts);\n font-size: 2rem;\n font-weight: 700;\n padding: 1rem 4.4rem;\n\n ${media.lessThan('large')`\n font-size: 1.5rem;\n padding: 1rem;\n `}\n`\n\nconst SeriesPage = ({ posts }) => {\n const postList = posts.filter(post => post.frontmatter.categories !== null)\n\n const categories = postList\n .map(post => post.frontmatter.categories?.[0])\n .filter(unique)\n .filter(n => n)\n\n const slugifyCategory = category => slugify(category, { lower: true })\n\n const getPostsByCategory = category =>\n postList.filter(post => post.frontmatter.categories?.[0] === category)\n\n return (\n <>\n \n\n {categories.map((category, i) => (\n
    \n # {category}\n\n {getPostsByCategory(category).map(post => (\n \n ))}\n
    \n ))}\n \n )\n}\n\nexport async function getStaticProps() {\n const posts = getAllPosts()\n\n return {\n props: {\n posts\n }\n }\n}\n\nexport default SeriesPage\n" }, { "path": "src/styles/base.js", "content": "import styled from 'styled-components'\nimport media from 'styled-media-query'\nimport transitions from './transitions'\n\nexport const PostHeader = styled.header`\n color: var(--postColor);\n margin: auto;\n max-width: 70rem;\n padding: 5rem 5rem 0;\n\n ${media.lessThan('large')`\n padding: 3rem 0 0;\n max-width: 100%;\n `}\n`\n\nexport const PostTitle = styled.h1`\n font-size: 4rem;\n font-weight: 700;\n padding: 0 1.4rem;\n margin: 1rem auto;\n\n ${media.lessThan('large')`\n font-size: 2.8rem;\n line-height: 1.1;\n padding: 0 1rem;\n `}\n`\n\nexport const PostDescription = styled.h2`\n font-size: 2rem;\n font-weight: 200;\n padding: 0 1.4rem;\n\n ${media.lessThan('large')`\n font-size: 1.6rem;\n line-height: 1.3;\n padding: 0 1rem;\n `}\n`\n\nexport const ButtonBack = styled.a`\n color: var(--texts);\n display: flex;\n text-decoration: none;\n margin: 0 0 1.5rem 1.5rem;\n transition: ${transitions.COLOR};\n\n ${media.lessThan('large')`\n margin: 0 0 1.5rem 1rem;\n `}\n\n &:hover {\n color: var(--highlight);\n }\n`\n\nexport const PostDate = styled.p`\n font-size: 1.1rem;\n font-weight: 100;\n padding: 0 1.4rem;\n\n ${media.lessThan('large')`\n padding: 0 1rem;\n `}\n`\n\nexport const MainContent = styled.section`\n margin: auto;\n max-width: 70rem;\n padding: 2rem 5rem;\n\n ${media.lessThan('large')`\n padding: 2rem 0;\n max-width: 100%;\n `}\n\n p,\n h1,\n h2,\n h3,\n h4,\n ul,\n ol,\n .tags,\n iframe,\n .button-post {\n color: var(--postColor);\n font-size: 1.25rem;\n font-weight: 300;\n line-height: 1.7;\n letter-spacing: 0.069rem;\n padding: 0 1.4rem;\n\n ${media.lessThan('large')`\n padding: 0 1rem;\n word-break: break-word;\n `}\n }\n\n p {\n margin: 0 auto 1.6rem;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin: 2.4rem auto 1rem;\n }\n\n ul,\n ol {\n list-style: disc;\n padding-left: 2.5rem;\n margin: 0 auto 1.6rem;\n }\n\n li {\n padding: 0.625rem 0;\n\n & > ul {\n margin-bottom: 0;\n }\n }\n\n p,\n li {\n code {\n word-wrap: break-word;\n }\n }\n\n code {\n background: #2d2d2d;\n color: white;\n padding: 0.1em;\n border-radius: 0.3em;\n white-space: normal;\n overflow-wrap: break-word;\n font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;\n }\n\n pre > code {\n white-space: pre;\n }\n\n img {\n display: block;\n width: auto;\n max-width: 100%;\n margin: 1.875rem auto;\n }\n\n iframe {\n padding: 0 1.6rem 1.6rem;\n width: 100%;\n\n ${media.greaterThan('large')`\n height: 490px;\n `}\n\n ${media.lessThan('large')`\n padding: 0 1rem;\n `}\n }\n\n blockquote {\n color: var(--postColor);\n border-left: 0.3rem solid var(--highlight);\n padding: 0 1.875rem;\n margin: 3.125rem auto;\n }\n\n hr {\n border: 1px solid var(--borders);\n margin: 3rem auto;\n }\n\n #twitter-widget-0,\n .instagram-media,\n .twitter-tweet {\n margin: 20px auto !important;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n font-weight: 800;\n letter-spacing: 0.069rem;\n line-height: 1.4;\n }\n\n h1 {\n font-size: 2.8rem;\n\n ${media.lessThan('large')`\n font-size: 1.875rem;\n `}\n }\n\n h2 {\n font-size: 2.1rem;\n\n ${media.lessThan('large')`\n font-size: 1.375rem;\n `}\n }\n\n h3 {\n font-size: 1.6rem;\n\n ${media.lessThan('large')`\n font-size: 1.125rem;\n `}\n }\n\n h4 {\n font-size: 1.4rem;\n }\n\n h5 {\n font-size: 1.2rem;\n }\n\n strong {\n font-weight: 700;\n }\n\n .instagram-media {\n margin: 1rem auto !important;\n }\n\n a {\n border-bottom: 1px dashed var(--highlight);\n color: var(--highlight);\n text-decoration: none;\n transition: opacity 0.5s;\n\n svg {\n color: var(--postColor);\n }\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n .anchor {\n position: relative;\n border: 0;\n color: var(--postColor);\n text-decoration: none;\n\n &:before {\n content: '#';\n position: absolute;\n left: -35px;\n opacity: 0;\n }\n\n &:hover:before {\n opacity: 1;\n }\n }\n`\n" }, { "path": "src/styles/global.js", "content": "import { createGlobalStyle } from 'styled-components'\n\nconst GlobalStyles = createGlobalStyle`\n /* http://meyerweb.com/eric/tools/css/reset/\n v2.0 | 20110126\n License: none (public domain)\n */\n html, body, div, span, applet, object, iframe,\n h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n a, abbr, acronym, address, big, cite, code,\n del, dfn, em, img, ins, kbd, q, s, samp,\n small, strike, strong, sub, sup, tt, var,\n b, u, i, center,\n dl, dt, dd, ol, ul, li,\n fieldset, form, label, legend,\n table, caption, tbody, tfoot, thead, tr, th, td,\n article, aside, canvas, details, embed,\n figure, figcaption, footer, header, hgroup,\n menu, nav, output, ruby, section, summary,\n time, mark, audio, video {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n }\n /* HTML5 display-role reset for older browsers */\n article, aside, details, figcaption, figure,\n footer, header, hgroup, menu, nav, section {\n display: block;\n }\n body {\n line-height: 1;\n }\n ol, ul {\n list-style: none;\n }\n blockquote, q {\n quotes: none;\n }\n blockquote:before, blockquote:after,\n q:before, q:after {\n content: '';\n content: none;\n }\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n * {\n box-sizing: border-box;\n }\n body {\n background: var(--background);\n line-height: 1;\n font-size: 100%;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n }\n img {\n display: block;\n \twidth: 100%;\n \theight: auto;\n }\n\n body.dark {\n --borders: #38444d;\n --texts: #8899a6;\n --postColor: #fff;\n --highlight: #F231A5;\n --mediumBackground: #0a0c21;\n --background: #030518;\n --white: #fff;\n --black: #222;\n }\n\n body.light {\n --borders: #dedede;\n --postColor: #111;\n --texts: #555555;\n --highlight: #F231A5;\n --mediumBackground: #f0f0f3;\n --background: #fff;\n --white: #fff;\n --black: #222;\n }\n`\nexport default GlobalStyles\n" }, { "path": "src/styles/transitions.js", "content": "const defaultTiming = '0.2s ease'\nconst bgTransition = `background ${defaultTiming}`\nconst colorTransition = `color ${defaultTiming}`\nconst defaultTransition = `${bgTransition}, ${colorTransition}`\n\nconst transitions = {\n DEFAULT: defaultTransition,\n COLOR: colorTransition,\n BACKGROUND: bgTransition,\n ALL: defaultTiming\n}\n\nexport default transitions\n" }, { "path": "src/templates/blog-list.js", "content": "import { useState } from 'react'\nimport InfiniteScroll from 'react-infinite-scroll-component'\n\nimport Post from 'components/Post'\nimport { NextSeo } from 'next-seo'\n\nconst BlogList = ({ posts }) => {\n const sortedPosts = posts.sort((post1, post2) =>\n new Date(post1.date) > new Date(post2.date) ? -1 : 1\n )\n\n const [count, setCount] = useState({\n prev: 0,\n next: 10\n })\n const [hasMore, setHasMore] = useState(true)\n const [current, setCurrent] = useState(\n sortedPosts.slice(count.prev, count.next)\n )\n\n const getMoreData = () => {\n if (current.length === sortedPosts.length) {\n setHasMore(false)\n return\n }\n\n setCurrent(\n current.concat(sortedPosts.slice(count.prev + 10, count.next + 10))\n )\n\n setCount(prevState => ({\n prev: prevState.prev + 10,\n next: prevState.next + 10\n }))\n }\n\n return (\n <>\n \n \n {current.map((post, i) => (\n \n ))}\n \n \n )\n}\n\nexport default BlogList\n" }, { "path": "src/templates/blog-post.js", "content": "import Prism from 'prismjs'\n\nimport { useEffect } from 'react'\nimport Link from 'next/link'\nimport { NextSeo } from 'next-seo'\n\nimport { timeToRead } from 'lib/utils'\n\nimport RecommendedPosts from 'components/RecommendedPosts'\nimport Comments from 'components/Comments'\n\nimport {\n PostHeader,\n PostTitle,\n PostDescription,\n PostDate,\n MainContent,\n ButtonBack\n} from 'styles/base'\n\nconst BlogPost = ({ post }) => {\n useEffect(() => {\n Prism.highlightAll()\n }, [post])\n\n return (\n <>\n \n \n \n ← Voltar na listagem\n \n\n \n {post.frontmatter.date} • {timeToRead(post.content)}\n \n {post.frontmatter.title}\n {post.frontmatter.description}\n \n \n
    \n \n \n \n \n )\n}\n\nexport default BlogPost\n" } ]

    \n See the Pen \n by Willian Justen de Vasconcellos (@willianjusten)\n on CodePen.\n